@snack-uikit/table 0.32.0 → 0.33.0

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.33.0 (2025-03-04)
+
+
+### Features
+
+* **PDS-681:** add save filter ([1406c6c](https://github.com/cloud-ru-tech/snack-uikit/commit/1406c6c447f337b5140135f8741b52ed1a0dfbf0))
+
+
+
+
+
 # 0.32.0 (2025-03-03)
 
 

package/README.md

@@ -144,7 +144,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | {     top: [],   } | Определение какие строки должны быть закреплены в таблице |
-| savedState | `{ id: string; resize?: boolean; }` | - | Конфиг для сохранения состояния в localStorage. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
+| savedState | `{ id: string; filterQueryKey?: string; resize?: boolean; }` | - | Конфиг для сохранения состояния в localStorage. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
 | pagination | `{ state?: PaginationState; options?: number[]; optionsLabel?: string; onChange?(state: PaginationState): void; optionsRender?(value: string \| number, idx: number): string \| number; }` | 'Rows volume: ' <br> <strong>onChange</strong>: Колбэк на изменение пагинации | Параметры отвечают за пагинацию в таблице <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br> <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу |
 | autoResetPageIndex | `boolean` | - | Автоматический сброс пагинации к первой странице при изменении данных или состояния (e.g фильтры, сортировки, и т.д) |
 | pageCount | `number` | - | Кол-во страниц (используется для внешнего управления) |
@@ -209,7 +209,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | - | Определение какие строки должны быть закреплены в таблице |
-| savedState | `{ id: string; resize?: boolean; }` | - | Конфиг для сохранения состояния в localStorage. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
+| savedState | `{ id: string; filterQueryKey?: string; resize?: boolean; }` | - | Конфиг для сохранения состояния в localStorage. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
 | autoResetPageIndex | `boolean` | - | Автоматический сброс пагинации к первой странице при изменении данных или состояния (e.g фильтры, сортировки, и т.д) |
 | suppressPagination | `boolean` | - | Отключение пагинации |
 | manualPagination | `boolean` | true |  |

package/dist/cjs/components/ServerTable/ServerTable.js

@@ -34,10 +34,7 @@ function ServerTable(_a) {
       manualFiltering = true
     } = _a,
     rest = __rest(_a, ["items", "total", "limit", "offset", "onChangePage", "search", "pagination", "columnFilters", "manualSorting", "manualPagination", "manualFiltering"]);
-  const {
-    state: search,
-    onStateChange: setSearch
-  } = (0, hooks_1.useStateControl)(searchProp, '');
+  const [search, setSearch] = (0, hooks_1.useStateControl)(searchProp, '');
   const [tempSearch, setTempSearch] = (0, react_1.useState)(search || '');
   (0, react_1.useEffect)(() => {
     var _a;

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

@@ -34,6 +34,7 @@ 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");
 /** Компонент таблицы */
@@ -86,25 +87,55 @@ function Table(_a) {
     } = _a,
     rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "infiniteLoading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions", "rowAutoHeight"]);
   const {
-    state: globalFilter,
-    onStateChange: onGlobalFilterChange
-  } = (0, hooks_1.useStateControl)(search, '');
-  const {
-    state: rowSelection,
-    onStateChange: onRowSelectionChange
-  } = (0, hooks_1.useStateControl)(rowSelectionProp, {});
+    setDataToStorages,
+    defaultFilter
+  } = (0, useSaveTableSettings_1.useSaveTableSettings)({
+    options: savedState,
+    filterSettings: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.filters
+  });
+  const [globalFilter, onGlobalFilterChange] = (0, hooks_1.useStateControl)(search, '');
+  const [rowSelection, onRowSelectionChange] = (0, hooks_1.useStateControl)(rowSelectionProp, constants_1.DEFAULT_ROW_SELECTION);
   const defaultPaginationState = (0, react_1.useMemo)(() => ({
     pageIndex: 0,
     pageSize
   }), [pageSize]);
-  const {
-    state: sorting,
-    onStateChange: onSortingChange
-  } = (0, hooks_1.useStateControl)(sortingProp, []);
-  const {
-    state: pagination,
-    onStateChange: onPaginationChange
-  } = (0, hooks_1.useStateControl)(paginationProp, defaultPaginationState);
+  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);
+  (0, react_1.useEffect)(() => {
+    setDataToStorages({
+      pagination,
+      sorting,
+      filter,
+      search: globalFilter || ''
+    });
+  }, [pagination, sorting, filter, setDataToStorages, globalFilter]);
+  (0, utils_1.useLayoutEffect)(() => {
+    if (defaultFilter) {
+      defaultFilter.pagination && onPaginationChange(defaultFilter.pagination);
+      defaultFilter.search && onGlobalFilterChange(defaultFilter.search);
+      defaultFilter.sorting && onSortingChange(defaultFilter.sorting);
+      defaultFilter.filter && setFilter((0, utils_2.customDateParser)(defaultFilter.filter));
+      defaultFilter.filter && setFilterVisibility(Object.keys(defaultFilter.filter));
+    }
+    // Только для первого рендера, чтобы проинициализировать фильтр
+    // eslint-disable-next-line
+  }, [defaultFilter]);
+  const patchedFilter = (0, react_1.useMemo)(() => columnFilters ? Object.assign(Object.assign({}, columnFilters), {
+    value: filter,
+    onChange: setFilter,
+    visibleFilters: filterVisibility,
+    onVisibleFiltersChange: setFilterVisibility
+  }) : undefined, [columnFilters, filter, setFilter, filterVisibility, setFilterVisibility]);
   const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
   const manualPagination = infiniteLoading || manualPaginationProp;
   const tableColumns = (0, react_1.useMemo)(() => {
@@ -368,7 +399,7 @@ function Table(_a) {
           })]
         }) : undefined,
         moreActions: moreActions,
-        filterRow: columnFilters,
+        filterRow: patchedFilter,
         "data-test-id": constants_1.TEST_IDS.toolbar
       })
     }), (0, jsx_runtime_1.jsxs)(scroll_1.Scroll, {

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

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

package/dist/cjs/components/Table/hooks/useSaveTableSettings/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("./useSaveTableSettings"), exports);

package/dist/cjs/components/Table/hooks/useSaveTableSettings/types.d.ts

@@ -0,0 +1,7 @@
+import { PaginationState, SortingState } from '@tanstack/react-table';
+export type Settings<TFilter> = {
+    filter?: TFilter;
+    pagination: PaginationState;
+    search: string;
+    sorting: SortingState;
+};

package/dist/cjs/components/Table/hooks/useSaveTableSettings/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,12 @@
+import { ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
+import { TableProps } from '../../../types';
+import { Settings } from './types';
+type TableSettings<TFilter extends FiltersState = Record<string, unknown>> = {
+    options?: TableProps<TFilter>['savedState'];
+    filterSettings?: ChipChoiceRowProps<TFilter>['filters'];
+};
+export declare const useSaveTableSettings: <TFilter extends FiltersState = Record<string, unknown>>({ options, filterSettings, }: TableSettings<TFilter>) => {
+    defaultFilter: Settings<TFilter> | null | undefined;
+    setDataToStorages: (data: Settings<TFilter>) => void;
+};
+export {};

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSaveTableSettings = void 0;
+const react_1 = require("react");
+const utils_1 = require("@snack-uikit/utils");
+const utils_2 = require("./utils");
+const vallidators_1 = require("./vallidators");
+const useSaveTableSettings = _ref => {
+  let {
+    options,
+    filterSettings
+  } = _ref;
+  const validate = (0, react_1.useCallback)(data => {
+    const isPaginationValid = (0, vallidators_1.validatePaging)(data === null || data === void 0 ? void 0 : data.pagination);
+    const isSortingValid = (0, vallidators_1.validateSorting)(data === null || data === void 0 ? void 0 : data.sorting);
+    const isSearchValid = typeof (data === null || data === void 0 ? void 0 : data.search) === 'string';
+    const isFilterValid = Boolean(filterSettings && (0, vallidators_1.validateFilter)(data.filter, filterSettings));
+    return isPaginationValid && isSortingValid && isSearchValid && isFilterValid;
+  }, [filterSettings]);
+  const filterQueryKey = options === null || options === void 0 ? void 0 : options.filterQueryKey;
+  const filterLocalStorageKey = (options === null || options === void 0 ? void 0 : options.id) ? `${options === null || options === void 0 ? void 0 : options.id}_filter` : '';
+  const filterStateOptions = (0, react_1.useMemo)(() => filterQueryKey ? {
+    filterQueryKey,
+    filterLocalStorageKey,
+    validateData: validate
+  } : undefined, [filterQueryKey, validate, filterLocalStorageKey]);
+  const {
+    getDefaultFilter,
+    setDataToStorages
+  } = (0, utils_1.useDataPersist)({
+    options: filterStateOptions,
+    serializer: utils_2.serializer,
+    parser: utils_2.parser
+  });
+  const defaultFilter = (0, react_1.useMemo)(getDefaultFilter, [getDefaultFilter]);
+  return {
+    defaultFilter,
+    setDataToStorages
+  };
+};
+exports.useSaveTableSettings = useSaveTableSettings;

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

@@ -0,0 +1,2 @@
+export * from './serializer';
+export * from './parser';

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

@@ -0,0 +1,26 @@
+"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("./serializer"), exports);
+__exportStar(require("./parser"), exports);

package/dist/cjs/components/Table/hooks/useSaveTableSettings/utils/parser.d.ts

@@ -0,0 +1,3 @@
+import { FiltersState } from '@snack-uikit/chips';
+import { Settings } from '../types';
+export declare const parser: <TFilter extends FiltersState = Record<string, unknown>>(value: string) => Settings<TFilter>;

package/dist/cjs/components/Table/hooks/useSaveTableSettings/utils/parser.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parser = void 0;
+const ft_request_payload_transform_1 = require("@cloud-ru/ft-request-payload-transform");
+const constants_1 = require("../../../../../constants");
+const mapPagination = value => {
+  if (!value || !value.offset || !value.limit) return {
+    pageSize: constants_1.DEFAULT_PAGE_SIZE,
+    pageIndex: 0
+  };
+  return {
+    pageSize: value.limit || constants_1.DEFAULT_PAGE_SIZE,
+    pageIndex: Math.floor(value.offset / value.limit)
+  };
+};
+const mapSort = function () {
+  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return value.map(column => ({
+    id: column.field,
+    desc: column.direction === 'd'
+  }));
+};
+const mapFilter = value => {
+  if (!value) {
+    return undefined;
+  }
+  return Object.fromEntries(value.map(filter => [filter.field, filter.value]));
+};
+const parser = value => {
+  var _a;
+  const parsedValue = (0, ft_request_payload_transform_1.parseQueryParamsString)(value);
+  return {
+    pagination: mapPagination(parsedValue === null || parsedValue === void 0 ? void 0 : parsedValue.pagination),
+    search: ((_a = parsedValue === null || parsedValue === void 0 ? void 0 : parsedValue.search) === null || _a === void 0 ? void 0 : _a.toString()) || '',
+    sorting: mapSort(parsedValue === null || parsedValue === void 0 ? void 0 : parsedValue.sort),
+    filter: mapFilter(parsedValue === null || parsedValue === void 0 ? void 0 : parsedValue.filter)
+  };
+};
+exports.parser = parser;

package/dist/cjs/components/Table/hooks/useSaveTableSettings/utils/serializer.d.ts

@@ -0,0 +1,3 @@
+import { FiltersState } from '@snack-uikit/chips';
+import { Settings } from '../types';
+export declare const serializer: <TFilter extends FiltersState = Record<string, unknown>>(value: Settings<TFilter>) => string;

package/dist/cjs/components/Table/hooks/useSaveTableSettings/utils/serializer.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.serializer = void 0;
+const ft_request_payload_transform_1 = require("@cloud-ru/ft-request-payload-transform");
+const mapPagination = value => ({
+  limit: value.pageSize,
+  offset: value.pageSize * value.pageIndex
+});
+const mapSort = value => value.map(column => ({
+  field: column.id,
+  direction: column.desc ? 'd' : 'a'
+}));
+const mapDateToString = filter => filter instanceof Date ? filter.toISOString() : filter;
+const mapFilter = value => {
+  if (!value) {
+    return undefined;
+  }
+  return Object.entries(value).filter(_ref => {
+    let [_, value] = _ref;
+    return value !== undefined;
+  }).map(_ref2 => {
+    let [key, value] = _ref2;
+    return Array.isArray(value) ? {
+      value: value.map(mapDateToString),
+      condition: 'in',
+      field: key
+    } : {
+      value: mapDateToString(value),
+      condition: 'eq',
+      field: key
+    };
+  });
+};
+const serializer = value => (0, ft_request_payload_transform_1.createRequestPayload)({
+  pagination: mapPagination(value.pagination),
+  search: value.search,
+  sort: mapSort(value.sorting),
+  filter: mapFilter(value.filter)
+}).toString();
+exports.serializer = serializer;

package/dist/cjs/components/Table/hooks/useSaveTableSettings/vallidators.d.ts

@@ -0,0 +1,5 @@
+import { PaginationState, SortingState } from '@tanstack/react-table';
+import { ChipChoiceRowProps } from '@snack-uikit/chips';
+export declare const validatePaging: (value: unknown) => value is PaginationState;
+export declare const validateSorting: (value: unknown) => value is SortingState;
+export declare const validateFilter: <TFilter extends Record<string, unknown>>(value: unknown, filterSettings: ChipChoiceRowProps<TFilter>["filters"]) => value is TFilter;

package/dist/cjs/components/Table/hooks/useSaveTableSettings/vallidators.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateFilter = exports.validateSorting = exports.validatePaging = void 0;
+const validatePaging = value => typeof (value === null || value === void 0 ? void 0 : value.pageSize) === 'number' && typeof (value === null || value === void 0 ? void 0 : value.pageIndex) === 'number';
+exports.validatePaging = validatePaging;
+const validateSorting = value => value === null || value === void 0 ? void 0 : value.every(column => typeof (column === null || column === void 0 ? void 0 : column.id) === 'string' && typeof (column === null || column === void 0 ? void 0 : column.desc) === 'boolean');
+exports.validateSorting = validateSorting;
+const validateFilter = (value, filterSettings) => typeof value === 'object' && value !== null && Object.keys(value).every(field => Boolean(filterSettings.find(setting => setting.id === field)));
+exports.validateFilter = validateFilter;

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

@@ -2,7 +2,4 @@ export declare function useStateControl<TState>(control: {
     initialState?: TState;
     state?: TState;
     onChange?(state: TState): void;
-} | undefined, defaultState: TState): {
-    state: TState;
-    onStateChange: import("uncontrollable").Handler;
-};
+} | undefined, defaultState: TState): readonly [TState, import("uncontrollable").Handler];

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

@@ -4,16 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStateControl = useStateControl;
+const react_1 = require("react");
 const uncontrollable_1 = require("uncontrollable");
 function useStateControl(control, defaultState) {
   var _a, _b;
-  const [state, onStateChange] = (0, uncontrollable_1.useUncontrolledProp)(control === null || control === void 0 ? void 0 : control.state, (_b = (_a = control === null || control === void 0 ? void 0 : control.state) !== null && _a !== void 0 ? _a : control === null || control === void 0 ? void 0 : control.initialState) !== null && _b !== void 0 ? _b : defaultState, controlState => {
-    var _a;
-    const newState = typeof controlState === 'function' ? controlState(state) : controlState;
-    (_a = control === null || control === void 0 ? void 0 : control.onChange) === null || _a === void 0 ? void 0 : _a.call(control, newState);
-  });
-  return {
-    state,
-    onStateChange
-  };
+  const state = control === null || control === void 0 ? void 0 : control.state;
+  const onChange = control === null || control === void 0 ? void 0 : control.onChange;
+  return (0, uncontrollable_1.useUncontrolledProp)(control === null || control === void 0 ? void 0 : control.state, (_b = (_a = control === null || control === void 0 ? void 0 : control.state) !== null && _a !== void 0 ? _a : control === null || control === void 0 ? void 0 : control.initialState) !== null && _b !== void 0 ? _b : defaultState, (0, react_1.useCallback)(controlState => {
+    const newState = typeof controlState === 'function' ? controlState(state || defaultState) : controlState;
+    onChange === null || onChange === void 0 ? void 0 : onChange(newState);
+  }, [state, defaultState, onChange]));
 }

package/dist/cjs/components/types.d.ts

@@ -119,6 +119,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
      *  */
     savedState?: {
         id: string;
+        filterQueryKey?: string;
         resize?: boolean;
     };
 }>;

package/dist/cjs/constants.d.ts

@@ -35,3 +35,6 @@ export declare const SORT_FN: {
     readonly AlphaNumeric: "alphanumeric";
 };
 export declare const DEFAULT_PAGE_SIZE = 10;
+export declare const DEFAULT_SORTING: never[];
+export declare const DEFAULT_FILTER_VISIBILITY: never[];
+export declare const DEFAULT_ROW_SELECTION: {};

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DEFAULT_PAGE_SIZE = exports.SORT_FN = exports.TEST_IDS = exports.COLUMN_ALIGN = exports.COLUMN_PIN_POSITION = void 0;
+exports.DEFAULT_ROW_SELECTION = exports.DEFAULT_FILTER_VISIBILITY = exports.DEFAULT_SORTING = exports.DEFAULT_PAGE_SIZE = exports.SORT_FN = exports.TEST_IDS = exports.COLUMN_ALIGN = exports.COLUMN_PIN_POSITION = void 0;
 exports.COLUMN_PIN_POSITION = {
   Left: 'left',
   Right: 'right'
@@ -40,4 +40,7 @@ exports.SORT_FN = {
   DateTime: 'datetime',
   AlphaNumeric: 'alphanumeric'
 };
-exports.DEFAULT_PAGE_SIZE = 10;
+exports.DEFAULT_PAGE_SIZE = 10;
+exports.DEFAULT_SORTING = [];
+exports.DEFAULT_FILTER_VISIBILITY = [];
+exports.DEFAULT_ROW_SELECTION = {};

package/dist/cjs/utils.d.ts

@@ -1,3 +1,4 @@
 import { FilterFn } from '@tanstack/react-table';
 export declare const fuzzyFilter: FilterFn<any>;
 export declare const preciseFilter: FilterFn<any>;
+export declare const customDateParser: <T>(value: Record<string, unknown>) => T;

package/dist/cjs/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.preciseFilter = exports.fuzzyFilter = void 0;
+exports.customDateParser = exports.preciseFilter = exports.fuzzyFilter = void 0;
 const match_sorter_utils_1 = require("@tanstack/match-sorter-utils");
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const fuzzyFilter = (row, columnId, value, addMeta) => {
@@ -22,4 +22,16 @@ const preciseFilter = (row, columnId, value, addMeta) => {
   });
   return itemRank.passed;
 };
-exports.preciseFilter = preciseFilter;
+exports.preciseFilter = preciseFilter;
+const isDateString = value => typeof value === 'string' && !isNaN(Number(new Date(value)));
+const customDateParser = value => Object.fromEntries(Object.entries(value).map(_ref => {
+  let [key, value] = _ref;
+  if (isDateString(value)) {
+    return [key, new Date(value)];
+  }
+  if (Array.isArray(value) && value.some(isDateString)) {
+    return [key, value.map(element => isDateString(element) ? new Date(element) : element)];
+  }
+  return [key, value];
+}));
+exports.customDateParser = customDateParser;

package/dist/esm/components/ServerTable/ServerTable.js

@@ -18,7 +18,7 @@ import { DEFAULT_PAGINATION_LIMIT } from './constants';
 import { onSearchDebounced } from './utils';
 export function ServerTable(_a) {
     var { items, total = DEFAULT_PAGINATION_LIMIT, limit = DEFAULT_PAGINATION_LIMIT, offset = 0, onChangePage, search: searchProp, pagination, columnFilters, manualSorting = true, manualPagination = true, manualFiltering = true } = _a, rest = __rest(_a, ["items", "total", "limit", "offset", "onChangePage", "search", "pagination", "columnFilters", "manualSorting", "manualPagination", "manualFiltering"]);
-    const { state: search, onStateChange: setSearch } = useStateControl(searchProp, '');
+    const [search, setSearch] = useStateControl(searchProp, '');
     const [tempSearch, setTempSearch] = useState(search || '');
     useEffect(() => {
         var _a;

package/dist/esm/components/Table/Table.js

@@ -18,14 +18,15 @@ import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider } from '@snack-uikit/skeleton';
 import { Toolbar } from '@snack-uikit/toolbar';
 import { TruncateString } from '@snack-uikit/truncate-string';
-import { extractSupportProps } from '@snack-uikit/utils';
-import { DEFAULT_PAGE_SIZE, TEST_IDS } from '../../constants';
+import { extractSupportProps, useLayoutEffect } from '@snack-uikit/utils';
+import { DEFAULT_FILTER_VISIBILITY, DEFAULT_PAGE_SIZE, DEFAULT_ROW_SELECTION, DEFAULT_SORTING, TEST_IDS, } from '../../constants';
 import { CellAutoResizeContext, useCellAutoResizeController } from '../../contexts';
 import { BodyRow, ExportButton, getColumnId, getRowActionsColumnDef, getSelectionCellColumnDef, getStatusColumnDef, HeaderRow, STATUS_APPEARANCE, TableContext, TableEmptyState, TablePagination, useEmptyState, } from '../../helperComponents';
 import { getTreeColumnDef } from '../../helperComponents/Cells/TreeCell';
-import { fuzzyFilter } from '../../utils';
+import { customDateParser, fuzzyFilter } from '../../utils';
 import { useLoadingTable, useStateControl } from './hooks';
 import { usePageReset } from './hooks/usePageReset';
+import { useSaveTableSettings } from './hooks/useSaveTableSettings';
 import styles from './styles.module.css';
 import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSizeFromLocalStorage, saveStateToLocalStorage, } from './utils';
 /** Компонент таблицы */
@@ -33,14 +34,44 @@ export function Table(_a) {
     var { data, rowPinning = {
         top: [],
     }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, infiniteLoading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, suppressSearch = false, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination: manualPaginationProp = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, rowAutoHeight } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "infiniteLoading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions", "rowAutoHeight"]);
-    const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
-    const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
+    const { setDataToStorages, defaultFilter } = useSaveTableSettings({
+        options: savedState,
+        filterSettings: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.filters,
+    });
+    const [globalFilter, onGlobalFilterChange] = useStateControl(search, '');
+    const [rowSelection, onRowSelectionChange] = useStateControl(rowSelectionProp, DEFAULT_ROW_SELECTION);
     const defaultPaginationState = useMemo(() => ({
         pageIndex: 0,
         pageSize,
     }), [pageSize]);
-    const { state: sorting, onStateChange: onSortingChange } = useStateControl(sortingProp, []);
-    const { state: pagination, onStateChange: onPaginationChange } = useStateControl(paginationProp, defaultPaginationState);
+    const [sorting, onSortingChange] = useStateControl(sortingProp, DEFAULT_SORTING);
+    const [pagination, onPaginationChange] = useStateControl(paginationProp, defaultPaginationState);
+    const [filter, setFilter] = 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] = useStateControl({
+        state: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.visibleFilters,
+        initialState: [],
+        onChange: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.onVisibleFiltersChange,
+    }, DEFAULT_FILTER_VISIBILITY);
+    useEffect(() => {
+        setDataToStorages({ pagination, sorting, filter, search: globalFilter || '' });
+    }, [pagination, sorting, filter, setDataToStorages, globalFilter]);
+    useLayoutEffect(() => {
+        if (defaultFilter) {
+            defaultFilter.pagination && onPaginationChange(defaultFilter.pagination);
+            defaultFilter.search && onGlobalFilterChange(defaultFilter.search);
+            defaultFilter.sorting && onSortingChange(defaultFilter.sorting);
+            defaultFilter.filter && setFilter(customDateParser(defaultFilter.filter));
+            defaultFilter.filter && setFilterVisibility(Object.keys(defaultFilter.filter));
+        }
+        // Только для первого рендера, чтобы проинициализировать фильтр
+        // eslint-disable-next-line
+    }, [defaultFilter]);
+    const patchedFilter = useMemo(() => columnFilters
+        ? Object.assign(Object.assign({}, columnFilters), { value: filter, onChange: setFilter, visibleFilters: filterVisibility, onVisibleFiltersChange: setFilterVisibility }) : undefined, [columnFilters, filter, setFilter, filterVisibility, setFilterVisibility]);
     const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
     const manualPagination = infiniteLoading || manualPaginationProp;
     const tableColumns = useMemo(() => {
@@ -248,7 +279,7 @@ export function Table(_a) {
                             onChange: onGlobalFilterChange,
                             loading: search === null || search === void 0 ? void 0 : search.loading,
                             placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || t('searchPlaceholder'),
-                        }, className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnToolbarCheck : undefined, outline: outline, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions, filterRow: columnFilters, "data-test-id": TEST_IDS.toolbar }) })), _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, "data-outline": outline || undefined, children: [_jsx("div", { className: styles.tableContent, style: columnSizes.vars, children: _jsx(CellAutoResizeContext.Provider, { value: { updateCellMap }, children: _jsx(TableContext.Provider, { value: { table }, children: (!infiniteLoading || !data.length) && loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight }), loadingTableRows.map(row => (_jsx(BodyRow, { row: row, rowAutoHeight: rowAutoHeight }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight }, row.id))), data.length > 0 && infiniteLoading && loading && !dataError && (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.slice(0, 3).map(row => (_jsx(BodyRow, { row: row }, row.id))) })), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }), !infiniteLoading && !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })));
+                        }, className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnToolbarCheck : undefined, outline: outline, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions, filterRow: patchedFilter, "data-test-id": TEST_IDS.toolbar }) })), _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, "data-outline": outline || undefined, children: [_jsx("div", { className: styles.tableContent, style: columnSizes.vars, children: _jsx(CellAutoResizeContext.Provider, { value: { updateCellMap }, children: _jsx(TableContext.Provider, { value: { table }, children: (!infiniteLoading || !data.length) && loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight }), loadingTableRows.map(row => (_jsx(BodyRow, { row: row, rowAutoHeight: rowAutoHeight }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight }, row.id))), data.length > 0 && infiniteLoading && loading && !dataError && (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.slice(0, 3).map(row => (_jsx(BodyRow, { row: row }, row.id))) })), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }), !infiniteLoading && !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

package/dist/esm/components/Table/hooks/useSaveTableSettings/index.d.ts

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

package/dist/esm/components/Table/hooks/useSaveTableSettings/index.js

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

package/dist/esm/components/Table/hooks/useSaveTableSettings/types.d.ts

@@ -0,0 +1,7 @@
+import { PaginationState, SortingState } from '@tanstack/react-table';
+export type Settings<TFilter> = {
+    filter?: TFilter;
+    pagination: PaginationState;
+    search: string;
+    sorting: SortingState;
+};

package/dist/esm/components/Table/hooks/useSaveTableSettings/types.js

@@ -0,0 +1 @@
+export {};