@snack-uikit/table 0.35.4-preview-352c392a.0 → 0.35.4

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.35.4 (2025-04-22)
+
+
+### Bug Fixes
+
+* **PDS-1971:** table fixes - column order, settings label, refactoring ([a1c34a3](https://github.com/cloud-ru-tech/snack-uikit/commit/a1c34a3783a0a0bf95253529d958ad69421819ce))
+
+
+
+
+
 ## 0.35.3 (2025-04-15)
 
 

package/dist/cjs/components/Table/Table.js

@@ -19,7 +19,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.Table = Table;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const core_1 = require("@dnd-kit/core");
-const modifiers_1 = require("@dnd-kit/modifiers");
 const react_table_1 = require("@tanstack/react-table");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
@@ -32,11 +31,8 @@ const utils_1 = require("@snack-uikit/utils");
 const constants_1 = require("../../constants");
 const contexts_1 = require("../../contexts");
 const helperComponents_1 = require("../../helperComponents");
-const TreeCell_1 = require("../../helperComponents/Cells/TreeCell");
 const utils_2 = require("../../utils");
 const hooks_1 = require("./hooks");
-const usePageReset_1 = require("./hooks/usePageReset");
-const useSaveTableSettings_1 = require("./hooks/useSaveTableSettings");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_3 = require("./utils");
 /** Компонент таблицы */
@@ -92,7 +88,7 @@ function Table(_a) {
   const {
     setDataToStorages,
     defaultFilter
-  } = (0, useSaveTableSettings_1.useSaveTableSettings)({
+  } = (0, hooks_1.useSaveTableSettings)({
     options: savedState,
     filterSettings: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.filters
   });
@@ -104,17 +100,14 @@ function Table(_a) {
   }), [pageSize]);
   const [sorting, onSortingChange] = (0, hooks_1.useStateControl)(sortingProp, constants_1.DEFAULT_SORTING);
   const [pagination, onPaginationChange] = (0, hooks_1.useStateControl)(paginationProp, defaultPaginationState);
-  const [filter, setFilter] = (0, hooks_1.useStateControl)({
-    state: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.value,
-    initialState: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.defaultValue,
-    onChange: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.onChange
-  }, undefined);
-  const [filterVisibility, setFilterVisibility] = (0, hooks_1.useStateControl)({
-    state: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.visibleFilters,
-    initialState: [],
-    onChange: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.onVisibleFiltersChange
-  }, constants_1.DEFAULT_FILTER_VISIBILITY);
-  const [areColumnFiltersOpen, setAreColumnFiltersOpen] = (0, react_1.useState)(() => (0, utils_3.getInitialColumnsOpenValue)(columnFilters));
+  const {
+    filter,
+    patchedFilter,
+    setFilter,
+    setFilterVisibility
+  } = (0, hooks_1.useFilters)({
+    columnFilters
+  });
   (0, react_1.useEffect)(() => {
     setDataToStorages({
       pagination,
@@ -134,91 +127,58 @@ function Table(_a) {
     // Только для первого рендера, чтобы проинициализировать фильтр
     // eslint-disable-next-line
   }, [defaultFilter]);
-  const patchedFilter = (0, react_1.useMemo)(() => {
-    if (!columnFilters) {
-      return undefined;
-    }
-    return Object.assign(Object.assign({
-      open: areColumnFiltersOpen,
-      onOpenChange: setAreColumnFiltersOpen
-    }, columnFilters), {
-      value: filter,
-      onChange: setFilter,
-      visibleFilters: filterVisibility,
-      onVisibleFiltersChange: setFilterVisibility
-    });
-  }, [columnFilters, areColumnFiltersOpen, filter, setFilter, filterVisibility, setFilterVisibility]);
   const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
-  const manualPagination = infiniteLoading || manualPaginationProp;
+  const allTableColumns = (0, react_1.useMemo)(() => (0, utils_3.getTableColumnsDefinitions)({
+    columnDefinitions,
+    enableSelection,
+    enableSelectPinned,
+    expanding
+  }), [columnDefinitions, enableSelection, enableSelectPinned, expanding]);
+  const pinnedGroups = (0, react_1.useMemo)(() => (0, utils_3.getPinnedGroups)(allTableColumns), [allTableColumns]);
   const {
     enabledColumns,
-    setEnabledColumns
-  } = (0, hooks_1.useColumnSettings)(columnDefinitions, savedState);
-  const areColumnsSettingsEnabled = Boolean(columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.enableSettingsMenu);
-  const filteredColumnDefinitions = (0, react_1.useMemo)(() => {
-    if (!areColumnsSettingsEnabled) {
-      return columnDefinitions;
-    }
-    return columnDefinitions.filter(colDef => {
-      if ((0, utils_3.isFilterableColumn)(colDef)) {
-        return enabledColumns.includes((0, utils_3.getColumnIdentifier)(colDef));
-      }
-      return true;
-    });
-  }, [columnDefinitions, enabledColumns, areColumnsSettingsEnabled]);
-  const tableColumns = (0, react_1.useMemo)(() => {
-    let cols = filteredColumnDefinitions;
-    if (enableSelection && !expanding) {
-      cols = [(0, helperComponents_1.getSelectionCellColumnDef)(enableSelectPinned), ...cols];
-    }
-    if (expanding) {
-      cols = [(0, TreeCell_1.getTreeColumnDef)(expanding.expandingColumnDefinition), ...cols];
-    }
-    return cols;
-  }, [filteredColumnDefinitions, enableSelection, enableSelectPinned, expanding]);
-  const enableColumnsOrderSortByDrag = Boolean(columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.enableDrag);
+    setEnabledColumns,
+    getColumnsSettings,
+    enabledTableColumns,
+    enabledColumnsDefinitions,
+    areColumnsSettingsEnabled
+  } = (0, hooks_1.useColumnSettings)({
+    columnDefinitions,
+    pinnedGroups,
+    savedState,
+    columnsSettings: columnsSettingsProp,
+    rowSelection: rowSelectionProp,
+    enableSelectPinned,
+    expanding
+  });
   const {
     columnOrder,
     setColumnOrder,
-    sensors,
-    handleDragEnd
-  } = (0, hooks_1.useColumnOrderByDrag)(tableColumns, savedState);
-  const dndContextProps = (0, react_1.useMemo)(() => {
-    if (!enableColumnsOrderSortByDrag) {
-      return {};
-    }
-    return {
-      collisionDetection: core_1.closestCenter,
-      modifiers: [modifiers_1.restrictToHorizontalAxis],
-      onDragEnd: handleDragEnd,
-      sensors: sensors
-    };
-  }, [enableColumnsOrderSortByDrag, handleDragEnd, sensors]);
-  const filterableColumns = (0, react_1.useMemo)(() => columnDefinitions.filter(utils_3.isFilterableColumn), [columnDefinitions]);
-  const areAllColumnsEnabled = filterableColumns.length === enabledColumns.length;
+    dndContextProps,
+    enableColumnsOrderSortByDrag
+  } = (0, hooks_1.useColumnOrderByDrag)({
+    tableColumns: allTableColumns,
+    savedState,
+    columnSettings: columnsSettingsProp
+  });
   const {
     t
   } = (0, locale_1.useLocale)('Table');
-  const columnsSettings = (0, react_1.useMemo)(() => (0, utils_3.prepareColumnsSettings)({
-    columnDefinitions,
-    columnOrder,
-    areAllColumnsEnabled,
-    t
-  }), [areAllColumnsEnabled, columnDefinitions, columnOrder, t]);
+  const manualPagination = infiniteLoading || manualPaginationProp;
+  const columnsSettings = (0, react_1.useMemo)(() => getColumnsSettings(columnOrder), [columnOrder, getColumnsSettings]);
   const columnPinning = (0, react_1.useMemo)(() => {
-    var _a;
-    const pinningState = {
-      left: [],
-      right: []
-    };
-    for (const col of tableColumns) {
-      const id = (0, helperComponents_1.getColumnId)(col);
-      if (col.pinned && id) {
-        (_a = pinningState[col.pinned]) === null || _a === void 0 ? void 0 : _a.push(id);
+    const getColDefIdsFromGroup = columnDefinitions => columnDefinitions.reduce((accArr, colDef) => {
+      const id = (0, helperComponents_1.getColumnId)(colDef);
+      if (id) {
+        accArr.push(id);
       }
-    }
-    return pinningState;
-  }, [tableColumns]);
+      return accArr;
+    }, []);
+    return {
+      left: getColDefIdsFromGroup(pinnedGroups.left),
+      right: getColDefIdsFromGroup(pinnedGroups.right)
+    };
+  }, [pinnedGroups]);
   const enableRowSelection = (0, react_1.useCallback)(row => {
     const parent = row.getParentRow();
     const isParentSelected = parent ? parent.getCanSelect() : true;
@@ -230,7 +190,7 @@ function Table(_a) {
   }, [rowSelectionProp]);
   const table = (0, react_table_1.useReactTable)({
     data,
-    columns: tableColumns,
+    columns: enabledTableColumns,
     state: {
       columnPinning,
       columnOrder: enableColumnsOrderSortByDrag ? columnOrder : undefined,
@@ -296,7 +256,7 @@ function Table(_a) {
     loadingTable
   } = (0, hooks_1.useLoadingTable)({
     pageSize: Math.min(Math.max(pageSize, 5), constants_1.DEFAULT_PAGE_SIZE),
-    columnDefinitions: filteredColumnDefinitions,
+    columnDefinitions: enabledColumnsDefinitions,
     columnPinning
   });
   const handleOnRefresh = (0, react_1.useCallback)(() => {
@@ -346,7 +306,7 @@ function Table(_a) {
         flexKey
       } = (0, utils_3.getColumnStyleVars)(header.id);
       const originalColDef = originalColumnDefs.find(col => (0, helperComponents_1.getColumnId)(header) === col.id);
-      if (header.id === 'snack_predefined_statusColumn' && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.header) && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.enableSorting)) {
+      if (header.id === constants_1.DefaultColumns.Status && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.header) && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.enableSorting)) {
         vars[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
         vars[flexKey] = '100%';
       } else {
@@ -415,7 +375,7 @@ function Table(_a) {
     noResultsState,
     errorDataState
   });
-  (0, usePageReset_1.usePageReset)({
+  (0, hooks_1.usePageReset)({
     manualPagination,
     maximumAvailablePage: pageCount || tableFilteredRows.length / pagination.pageSize,
     pagination,

package/dist/cjs/components/Table/hooks/index.d.ts

@@ -2,3 +2,6 @@ export * from './useLoadingTable';
 export * from './useStateControl';
 export * from './useColumnOrderByDrag';
 export * from './useColumnSettings';
+export * from './usePageReset';
+export * from './useFilters';
+export * from './useSaveTableSettings';

package/dist/cjs/components/Table/hooks/index.js

@@ -25,4 +25,7 @@ Object.defineProperty(exports, "__esModule", {
 __exportStar(require("./useLoadingTable"), exports);
 __exportStar(require("./useStateControl"), exports);
 __exportStar(require("./useColumnOrderByDrag"), exports);
-__exportStar(require("./useColumnSettings"), exports);
+__exportStar(require("./useColumnSettings"), exports);
+__exportStar(require("./usePageReset"), exports);
+__exportStar(require("./useFilters"), exports);
+__exportStar(require("./useSaveTableSettings"), exports);

package/dist/cjs/components/Table/hooks/useColumnOrderByDrag/index.d.ts

@@ -0,0 +1 @@
+export * from './useColumnOrderByDrag';

package/dist/cjs/components/Table/hooks/useColumnOrderByDrag/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./useColumnOrderByDrag"), exports);

package/dist/cjs/components/Table/hooks/useColumnOrderByDrag/useColumnOrderByDrag.d.ts

@@ -0,0 +1,16 @@
+import { DndContextProps } from '@dnd-kit/core';
+import { Dispatch, SetStateAction } from 'react';
+import { ColumnDefinition } from '../../../../types';
+import { TableProps } from '../../../types';
+type useColumnOrderByDragProps<TData extends object> = {
+    tableColumns: ColumnDefinition<TData>[];
+    savedState: TableProps<TData>['savedState'];
+    columnSettings: TableProps<TData>['columnsSettings'];
+};
+export declare function useColumnOrderByDrag<TData extends object>({ tableColumns, savedState, columnSettings, }: useColumnOrderByDragProps<TData>): {
+    columnOrder: string[];
+    setColumnOrder: Dispatch<SetStateAction<string[]>>;
+    dndContextProps: DndContextProps;
+    enableColumnsOrderSortByDrag: boolean;
+};
+export {};

package/dist/cjs/components/Table/hooks/{useColumnOrderByDrag.js → useColumnOrderByDrag/useColumnOrderByDrag.js}

@@ -5,30 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useColumnOrderByDrag = useColumnOrderByDrag;
 const core_1 = require("@dnd-kit/core");
+const modifiers_1 = require("@dnd-kit/modifiers");
 const sortable_1 = require("@dnd-kit/sortable");
 const react_1 = require("react");
-const utils_1 = require("../utils");
-const validateColumnOrderLocalStorageValue = value => Array.isArray(value) && value.every(setting => typeof setting === 'string');
-const getLocalStorageColumnOrderKey = id => `${id}_columnOrder`;
-function prepareInitialState(tableColumns, savedState) {
-  const columnOrder = tableColumns.filter(column => column.pinned !== 'left' && column.pinned !== 'right').map(utils_1.getColumnIdentifier);
-  if (savedState === null || savedState === void 0 ? void 0 : savedState.columnSettings) {
-    const persistState = JSON.parse(localStorage.getItem(getLocalStorageColumnOrderKey(savedState.id)) || 'null');
-    const persistValue = validateColumnOrderLocalStorageValue(persistState) ? persistState : null;
-    if (persistValue !== null) {
-      return [...persistValue, ...columnOrder.filter(column => !(persistValue === null || persistValue === void 0 ? void 0 : persistValue.includes(column)))];
-    }
-    localStorage.setItem(getLocalStorageColumnOrderKey(savedState.id), JSON.stringify(columnOrder));
-  }
-  return columnOrder;
-}
+const prepareInitialState_1 = require("./utils/prepareInitialState");
 const draggingOptions = {
   activationConstraint: {
     distance: 5 // Is required to differ click (sort) from drag
   }
 };
-function useColumnOrderByDrag(tableColumns, savedState) {
-  const [columnOrder, setColumnOrderState] = (0, react_1.useState)(() => prepareInitialState(tableColumns, savedState));
+function useColumnOrderByDrag(_ref) {
+  let {
+    tableColumns,
+    savedState,
+    columnSettings
+  } = _ref;
+  const [columnOrder, setColumnOrderState] = (0, react_1.useState)(() => (0, prepareInitialState_1.prepareInitialState)(tableColumns, savedState));
   const setColumnOrder = (0, react_1.useCallback)(value => {
     let updatedOrder;
     if (value instanceof Function) {
@@ -37,15 +29,15 @@ function useColumnOrderByDrag(tableColumns, savedState) {
       updatedOrder = value;
     }
     if (savedState === null || savedState === void 0 ? void 0 : savedState.columnSettings) {
-      localStorage.setItem(getLocalStorageColumnOrderKey(savedState.id), JSON.stringify(updatedOrder));
+      localStorage.setItem((0, prepareInitialState_1.getLocalStorageColumnOrderKey)(savedState.id), JSON.stringify(updatedOrder));
     }
     setColumnOrderState(updatedOrder);
-  }, [columnOrder, savedState === null || savedState === void 0 ? void 0 : savedState.columnSettings, savedState === null || savedState === void 0 ? void 0 : savedState.id]);
-  const handleDragEnd = (0, react_1.useCallback)(_ref => {
+  }, [columnOrder, savedState]);
+  const handleDragEnd = (0, react_1.useCallback)(_ref2 => {
     let {
       active,
       over
-    } = _ref;
+    } = _ref2;
     if (!active || !over) {
       return;
     }
@@ -64,10 +56,22 @@ function useColumnOrderByDrag(tableColumns, savedState) {
     });
   }, [columnOrder, setColumnOrder]);
   const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.MouseSensor, draggingOptions), (0, core_1.useSensor)(core_1.TouchSensor, {}), (0, core_1.useSensor)(core_1.KeyboardSensor, {}));
+  const enableColumnsOrderSortByDrag = Boolean(columnSettings === null || columnSettings === void 0 ? void 0 : columnSettings.enableDrag);
+  const dndContextProps = (0, react_1.useMemo)(() => {
+    if (!enableColumnsOrderSortByDrag) {
+      return {};
+    }
+    return {
+      collisionDetection: core_1.closestCenter,
+      modifiers: [modifiers_1.restrictToHorizontalAxis],
+      onDragEnd: handleDragEnd,
+      sensors
+    };
+  }, [enableColumnsOrderSortByDrag, handleDragEnd, sensors]);
   return {
     columnOrder,
     setColumnOrder,
-    handleDragEnd,
-    sensors
+    dndContextProps,
+    enableColumnsOrderSortByDrag
   };
 }

package/dist/cjs/components/Table/hooks/useColumnOrderByDrag/utils/prepareInitialState.d.ts

@@ -0,0 +1,4 @@
+import { ColumnDefinition } from '../../../../../types';
+import { TableProps } from '../../../../types';
+export declare const getLocalStorageColumnOrderKey: (id: string) => string;
+export declare function prepareInitialState<TData extends object>(tableColumns: ColumnDefinition<TData>[], savedState: TableProps<TData>['savedState']): string[];

package/dist/cjs/components/Table/hooks/useColumnOrderByDrag/utils/prepareInitialState.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLocalStorageColumnOrderKey = void 0;
+exports.prepareInitialState = prepareInitialState;
+const utils_1 = require("../../../utils");
+const getLocalStorageColumnOrderKey = id => `${id}_columnOrder`;
+exports.getLocalStorageColumnOrderKey = getLocalStorageColumnOrderKey;
+function prepareInitialState(tableColumns, savedState) {
+  const columnOrder = tableColumns.filter(column => column.pinned !== 'left' && column.pinned !== 'right').map(utils_1.getColumnIdentifier);
+  if (savedState === null || savedState === void 0 ? void 0 : savedState.columnSettings) {
+    const persistState = JSON.parse(localStorage.getItem((0, exports.getLocalStorageColumnOrderKey)(savedState.id)) || 'null');
+    const persistValue = (0, utils_1.isEveryArrayItemString)(persistState) ? persistState : null;
+    if (persistValue !== null) {
+      return [...persistValue, ...columnOrder.filter(column => !(persistValue === null || persistValue === void 0 ? void 0 : persistValue.includes(column)))];
+    }
+    localStorage.setItem((0, exports.getLocalStorageColumnOrderKey)(savedState.id), JSON.stringify(columnOrder));
+  }
+  return columnOrder;
+}

package/dist/cjs/components/Table/hooks/useColumnSettings/index.d.ts

@@ -0,0 +1 @@
+export * from './useColumnSettings';

package/dist/cjs/components/Table/hooks/useColumnSettings/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./useColumnSettings"), exports);

package/dist/cjs/components/Table/hooks/useColumnSettings/useColumnSettings.d.ts

@@ -0,0 +1,14 @@
+import { TableProps } from '../../../types';
+import { PinnedGroupsState } from '../../utils';
+type useColumnSettingsProps<TData extends object, TFilters extends Record<string, unknown>> = Pick<TableProps<TData, TFilters>, 'columnDefinitions' | 'columnsSettings' | 'savedState' | 'rowSelection' | 'expanding'> & Required<Pick<TableProps<TData, TFilters>, 'enableSelectPinned'>> & {
+    pinnedGroups: PinnedGroupsState<TData>;
+};
+export declare function useColumnSettings<TData extends object, TFilters extends Record<string, unknown>>({ columnDefinitions, columnsSettings, pinnedGroups, savedState, rowSelection, enableSelectPinned, expanding, }: useColumnSettingsProps<TData, TFilters>): {
+    enabledColumns: string[];
+    setEnabledColumns: (value: string[]) => void;
+    enabledColumnsDefinitions: import("../../../..").ColumnDefinition<TData>[];
+    enabledTableColumns: import("../../../..").ColumnDefinition<TData>[];
+    getColumnsSettings: (columnOrder: string[]) => [import("@snack-uikit/list/dist/esm/components/Items").GroupSelectItem];
+    areColumnsSettingsEnabled: boolean;
+};
+export {};

package/dist/cjs/components/Table/hooks/useColumnSettings/useColumnSettings.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColumnSettings = useColumnSettings;
+const react_1 = require("react");
+const locale_1 = require("@snack-uikit/locale");
+const utils_1 = require("../../utils");
+const utils_2 = require("./utils");
+function useColumnSettings(_ref) {
+  let {
+    columnDefinitions,
+    columnsSettings,
+    pinnedGroups,
+    savedState,
+    rowSelection,
+    enableSelectPinned,
+    expanding
+  } = _ref;
+  const {
+    t
+  } = (0, locale_1.useLocale)('Table');
+  const localStorageKey = `${savedState === null || savedState === void 0 ? void 0 : savedState.id}_columnSettings`;
+  const configurableColumns = (0, react_1.useMemo)(() => columnDefinitions.filter(utils_2.isColumnVisibilityConfigurable), [columnDefinitions]);
+  const [enabledColumns, setEnabledColumns] = (0, react_1.useState)(() => (0, utils_2.getEnabledColumnsInitialState)(configurableColumns, savedState, localStorageKey));
+  const setEnabledColumnsOuter = (0, react_1.useCallback)(value => {
+    if (savedState === null || savedState === void 0 ? void 0 : savedState.columnSettings) {
+      localStorage.setItem(localStorageKey, JSON.stringify(value));
+    }
+    setEnabledColumns(value);
+  }, [localStorageKey, savedState === null || savedState === void 0 ? void 0 : savedState.columnSettings]);
+  const areColumnsSettingsEnabled = Boolean(columnsSettings === null || columnsSettings === void 0 ? void 0 : columnsSettings.enableSettingsMenu);
+  const enabledColumnsDefinitions = (0, react_1.useMemo)(() => {
+    if (!areColumnsSettingsEnabled) {
+      return columnDefinitions;
+    }
+    return columnDefinitions.filter(colDef => {
+      if ((0, utils_2.isFilterableColumn)(colDef)) {
+        return enabledColumns.includes((0, utils_1.getColumnIdentifier)(colDef));
+      }
+      return true;
+    });
+  }, [columnDefinitions, enabledColumns, areColumnsSettingsEnabled]);
+  const enableSelection = Boolean(rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.enable);
+  const enabledTableColumns = (0, react_1.useMemo)(() => (0, utils_1.getTableColumnsDefinitions)({
+    columnDefinitions: enabledColumnsDefinitions,
+    enableSelection,
+    enableSelectPinned,
+    expanding
+  }), [enableSelectPinned, enableSelection, enabledColumnsDefinitions, expanding]);
+  const areAllColumnsEnabled = enabledColumns.length === configurableColumns.length;
+  const getColumnsSettings = (0, react_1.useCallback)(columnOrder => (0, utils_2.prepareColumnsSettings)({
+    pinnedGroups,
+    columnOrder,
+    areAllColumnsEnabled,
+    t
+  }), [areAllColumnsEnabled, pinnedGroups, t]);
+  return {
+    enabledColumns,
+    setEnabledColumns: setEnabledColumnsOuter,
+    enabledColumnsDefinitions,
+    enabledTableColumns,
+    getColumnsSettings,
+    areColumnsSettingsEnabled
+  };
+}

package/dist/cjs/components/Table/hooks/useColumnSettings/utils/getEnabledColumnsInitialState.d.ts

@@ -0,0 +1,3 @@
+import { ColumnDefinition } from '../../../../../types';
+import { TableProps } from '../../../../types';
+export declare function getEnabledColumnsInitialState<TData extends object, TFilters extends Record<string, unknown>>(configurableColumns: ColumnDefinition<TData>[], savedState: TableProps<TFilters>['savedState'], localStorageKey: string): string[];

package/dist/cjs/components/Table/hooks/useColumnSettings/utils/getEnabledColumnsInitialState.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getEnabledColumnsInitialState = getEnabledColumnsInitialState;
+const utils_1 = require("../../../utils");
+const isColumnEnabledInitially_1 = require("./isColumnEnabledInitially");
+function getSettingsFromLocalStorage(localStorageKey) {
+  const localStorageState = JSON.parse(localStorage.getItem(localStorageKey) || 'null');
+  return (0, utils_1.isEveryArrayItemString)(localStorageState) ? localStorageState : null;
+}
+function getEnabledColumnsInitialState(configurableColumns, savedState, localStorageKey) {
+  const localStorageSettings = getSettingsFromLocalStorage(localStorageKey);
+  return configurableColumns.filter(colDef => {
+    const columnIdentifier = (0, utils_1.getColumnIdentifier)(colDef);
+    if (localStorageSettings && (savedState === null || savedState === void 0 ? void 0 : savedState.columnSettings)) {
+      return Boolean(localStorageSettings.find(columnKey => columnKey === columnIdentifier));
+    }
+    return (0, isColumnEnabledInitially_1.isColumnEnabledInitially)(colDef);
+  }).map(utils_1.getColumnIdentifier);
+}

package/dist/cjs/components/Table/hooks/useColumnSettings/utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from './isFilterableColumn';
+export * from './isColumnEnabledInitially';
+export * from './isColumnVisibilityConfigurable';
+export * from './prepareColumnsSettings';
+export * from './getEnabledColumnsInitialState';

package/dist/cjs/components/Table/hooks/useColumnSettings/utils/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./isFilterableColumn"), exports);
+__exportStar(require("./isColumnEnabledInitially"), exports);
+__exportStar(require("./isColumnVisibilityConfigurable"), exports);
+__exportStar(require("./prepareColumnsSettings"), exports);
+__exportStar(require("./getEnabledColumnsInitialState"), exports);

package/dist/cjs/components/Table/hooks/useColumnSettings/utils/isColumnEnabledInitially.d.ts

@@ -0,0 +1,2 @@
+import { ColumnDefinition } from '../../../../../types';
+export declare function isColumnEnabledInitially<TData extends object>(colDef: ColumnDefinition<TData>): boolean;

package/dist/cjs/components/Table/hooks/useColumnSettings/utils/isColumnEnabledInitially.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isColumnEnabledInitially = isColumnEnabledInitially;
+function isColumnEnabledInitially(colDef) {
+  var _a;
+  if ('columnSettings' in colDef && colDef.columnSettings !== undefined) {
+    return ((_a = colDef.columnSettings) === null || _a === void 0 ? void 0 : _a.mode) !== 'defaultFalse';
+  }
+  return true;
+}

package/dist/cjs/components/Table/hooks/useColumnSettings/utils/isColumnVisibilityConfigurable.d.ts

@@ -0,0 +1,2 @@
+import { ColumnDefinition } from '../../../../../types';
+export declare function isColumnVisibilityConfigurable<TData extends object>(colDef: ColumnDefinition<TData>): boolean;

package/dist/cjs/components/Table/hooks/useColumnSettings/utils/isColumnVisibilityConfigurable.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isColumnVisibilityConfigurable = isColumnVisibilityConfigurable;
+function isColumnVisibilityConfigurable(colDef) {
+  if ('columnSettings' in colDef && colDef.columnSettings !== undefined) {
+    const {
+      mode
+    } = colDef.columnSettings;
+    if (!mode) {
+      return true;
+    }
+    switch (mode) {
+      case 'hidden':
+        return false;
+      case 'defaultTrue':
+      case 'defaultFalse':
+      default:
+        return true;
+    }
+  }
+  return true;
+}

package/dist/cjs/components/Table/hooks/useColumnSettings/utils/isFilterableColumn.d.ts

@@ -0,0 +1,2 @@
+import { ColumnDefinition, FilterableColumnDefinition } from '../../../../../types';
+export declare function isFilterableColumn<TData extends object>(colDef: ColumnDefinition<TData>): colDef is FilterableColumnDefinition<TData>;