fix(@clayui/core): remove hiddenColumns API in favor of `visibleCol…

…umns`

packages/clay-core/src/table/Head.tsx

@@ -54,22 +54,22 @@ function HeadInner<T extends Record<string, any>>(
 ) {
 	const {
 		columnsVisibility,
-		hiddenColumns,
 		messages,
 		onHeadCellsChange,
-		onHiddenColumnsChange,
+		onVisibleColumnsChange,
+		visibleColumns,
 	} = useTable();
 
 	const collection = useCollection<T>({
 		children,
 		items,
 		suppressTextValueWarning: false,
-		visibleKeys: new Set(hiddenColumns.keys()),
+		visibleKeys: new Set(visibleColumns.keys()),
 	});
 
 	useMemo(() => {
-		if (hiddenColumns.size === 0) {
-			onHiddenColumnsChange(collection.getItems(), 0);
+		if (visibleColumns.size === 0) {
+			onVisibleColumnsChange(collection.getItems(), 0);
 		}
 		onHeadCellsChange(collection.getSize());
 	}, []);
@@ -127,7 +127,7 @@ function HeadInner<T extends Record<string, any>>(
 										<Item
 											key={item}
 											onClick={() =>
-												onHiddenColumnsChange(
+												onVisibleColumnsChange(
 													item,
 													collection.getItem(item)
 														.index
@@ -153,16 +153,16 @@ function HeadInner<T extends Record<string, any>>(
 															},
 														}}
 														disabled={
-															hiddenColumns.has(
+															visibleColumns.has(
 																item
 															) &&
-															hiddenColumns.size ===
+															visibleColumns.size ===
 																1
 														}
 														onChange={(event) => {
 															event.stopPropagation();
 
-															onHiddenColumnsChange(
+															onVisibleColumnsChange(
 																item,
 																collection.getItem(
 																	item
@@ -172,7 +172,7 @@ function HeadInner<T extends Record<string, any>>(
 														onKeyDown={(event) => {
 															switch (event.key) {
 																case 'Enter':
-																	onHiddenColumnsChange(
+																	onVisibleColumnsChange(
 																		item,
 																		collection.getItem(
 																			item
@@ -184,7 +184,7 @@ function HeadInner<T extends Record<string, any>>(
 															}
 														}}
 														sizing="sm"
-														toggled={hiddenColumns.has(
+														toggled={visibleColumns.has(
 															item
 														)}
 													/>

packages/clay-core/src/table/Row.tsx

@@ -110,10 +110,10 @@ function RowInner<T extends Record<string, any>>(
 		columnsVisibility,
 		expandedKeys,
 		headCellsCount,
-		hiddenColumns,
 		onExpandedChange,
 		onLoadMore,
 		treegrid,
+		visibleColumns,
 	} = useTable();
 	const {insert} = useBody();
 	const [isFocused, setIsFocused] = useState(false);
@@ -154,8 +154,8 @@ function RowInner<T extends Record<string, any>>(
 	const ref = useForwardRef(outRef);
 
 	const visibleKeys = useMemo(
-		() => Array.from(hiddenColumns.values()),
-		[hiddenColumns]
+		() => Array.from(visibleColumns.values()),
+		[visibleColumns]
 	);
 
 	const collection = useCollection({

packages/clay-core/src/table/Table.tsx

@@ -34,19 +34,19 @@ export type Props = {
 	defaultSort?: Sorting | null;
 
 	/**
-	 * Default value for hidden columns in the table (uncontrolled).
+	 * Default value for visible columns in the table (uncontrolled).
 	 */
-	defaultHiddenColumns?: Map<React.Key, number>;
+	defaultVisibleColumns?: Map<React.Key, number>;
 
 	/**
 	 * The currently expanded keys in the collection (controlled).
 	 */
 	expandedKeys?: Set<React.Key>;
 
 	/**
-	 * Defines which columns are hidden in the table (controlled).
+	 * Defines which columns are visible in the table (controlled).
 	 */
-	hiddenColumns?: Map<React.Key, number>;
+	visibleColumns?: Map<React.Key, number>;
 
 	/**
 	 * Texts used for assertive messages to SRs.
@@ -81,7 +81,7 @@ export type Props = {
 	/**
 	 * Callback called when columns visibility changes (controlled).
 	 */
-	onHiddenColumnsChange?: (columns: Map<React.Key, number>) => void;
+	onVisibleColumnsChange?: (columns: Map<React.Key, number>) => void;
 
 	/**
 	 * Current state of sort (controlled).
@@ -114,7 +114,7 @@ export const Table = React.forwardRef<HTMLDivElement, Props>(
 			className,
 			defaultExpandedKeys = defaultSet,
 			defaultSort,
-			defaultHiddenColumns = new Map(),
+			defaultVisibleColumns = new Map(),
 			expandedKeys: externalExpandedKeys,
 			messages = {
 				columnsVisibility: 'Manage Columns Visibility',
@@ -125,9 +125,9 @@ export const Table = React.forwardRef<HTMLDivElement, Props>(
 				sortDescription: 'sortable column',
 				sorting: 'sorted by column {0} in {1} order',
 			},
-			hiddenColumns: externalHiddenColumns,
+			visibleColumns: externalVisibleColumns,
 			onExpandedChange,
-			onHiddenColumnsChange,
+			onVisibleColumnsChange,
 			onLoadMore,
 			onSortChange,
 			size,
@@ -157,13 +157,13 @@ export const Table = React.forwardRef<HTMLDivElement, Props>(
 			value: externalSort,
 		});
 
-		const [hidden, setHidden] = useControlledState({
-			defaultName: 'defaultSort',
-			defaultValue: defaultHiddenColumns,
-			handleName: 'onHiddenColumnsChange',
-			name: 'hiddenColumns',
-			onChange: onHiddenColumnsChange,
-			value: externalHiddenColumns,
+		const [visibleColumns, setVisibleColumns] = useControlledState({
+			defaultName: 'defaultVisibleColumns',
+			defaultValue: defaultVisibleColumns,
+			handleName: 'onVisibleColumnsChange',
+			name: 'visibleColumns',
+			onChange: onVisibleColumnsChange,
+			value: externalVisibleColumns,
 		});
 
 		const ref = useForwardRef(outRef);
@@ -206,18 +206,30 @@ export const Table = React.forwardRef<HTMLDivElement, Props>(
 							columnsVisibility,
 							expandedKeys,
 							headCellsCount,
-							hiddenColumns: hidden,
 							messages,
 							nestedKey,
 							onExpandedChange: setExpandedKeys,
 							onHeadCellsChange: setHeadCellsCount,
-							onHiddenColumnsChange: useCallback(
+							onLoadMore,
+							onSortChange: useCallback(
+								(sort, textValue) => {
+									announcerAPI.current!.announce(
+										sub(messages!.sorting, [
+											textValue,
+											sort!.direction,
+										])
+									);
+									setSorting(sort);
+								},
+								[setSorting]
+							),
+							onVisibleColumnsChange: useCallback(
 								(
 									column: React.Key | Array<React.Key>,
 									index: number
 								) => {
 									if (Array.isArray(column)) {
-										const columns = new Map(hidden);
+										const columns = new Map(visibleColumns);
 
 										column.forEach((value, index) => {
 											if (columns.has(value)) {
@@ -227,39 +239,27 @@ export const Table = React.forwardRef<HTMLDivElement, Props>(
 											}
 										});
 
-										setHidden(columns);
+										setVisibleColumns(columns);
 
 										return;
 									}
 
-									const columns = new Map(hidden);
+									const columns = new Map(visibleColumns);
 
 									if (columns.has(column)) {
 										columns.delete(column);
 									} else {
 										columns.set(column, index);
 									}
 
-									setHidden(columns);
+									setVisibleColumns(columns);
 								},
-								[setHidden, hidden]
-							),
-							onLoadMore,
-							onSortChange: useCallback(
-								(sort, textValue) => {
-									announcerAPI.current!.announce(
-										sub(messages!.sorting, [
-											textValue,
-											sort!.direction,
-										])
-									);
-									setSorting(sort);
-								},
-								[setSorting]
+								[setVisibleColumns, visibleColumns]
 							),
 							sort,
 							sortDescriptionId,
 							treegrid: !!nestedKey,
+							visibleColumns,
 						}}
 					>
 						{children}

packages/clay-core/src/table/context.tsx

@@ -14,14 +14,14 @@ type Context = {
 	columnsVisibility: boolean;
 	expandedKeys: Set<React.Key>;
 	headCellsCount: number;
-	hiddenColumns: Map<React.Key, number>;
+	visibleColumns: Map<React.Key, number>;
 	messages: Record<string, string>;
 	nestedKey?: string;
 	onExpandedChange: (keys: Set<React.Key>) => void;
 	onHeadCellsChange: (value: number) => void;
 	onLoadMore?: (item: unknown) => Promise<Array<any> | undefined>;
 	onSortChange: (sorting: Sorting | null, textValue: string) => void;
-	onHiddenColumnsChange: (
+	onVisibleColumnsChange: (
 		column: React.Key | Array<React.Key>,
 		index: number
 	) => void;