@snack-uikit/table 0.38.5 → 0.38.6

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.38.6 (2026-04-02)
+
+
+### Bug Fixes
+
+* **PDS-3636:** fix persist state ([78c0aad](https://github.com/cloud-ru-tech/snack-uikit/commit/78c0aadffbb178df952848a40e4dc10b0096f7ee))
+
+
+
+
+
 ## 0.38.5 (2026-03-27)
 
 ### Only dependencies have been changed

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

@@ -372,6 +372,38 @@ function Table(_a) {
   } = (0, contexts_1.useCellAutoResizeController)(table);
   const showToolbar = !suppressToolbar;
   const showPagination = !infiniteLoading && !suppressPagination;
+  const tableToolbarPersistConfig = (0, react_1.useMemo)(() => {
+    if (!(savedState === null || savedState === void 0 ? void 0 : savedState.id) || !(savedState === null || savedState === void 0 ? void 0 : savedState.filterQueryKey)) {
+      return undefined;
+    }
+    return {
+      id: savedState.id,
+      filterQueryKey: savedState.filterQueryKey,
+      validateData: validatePersistedState,
+      state: {
+        pagination: (0, mappers_1.mapPaginationToRequestPayload)(pagination),
+        ordering: (0, mappers_1.mapSortToRequestPayload)(sorting),
+        filter,
+        search: globalFilter || ''
+      },
+      serializer: savedState.serializer,
+      parser: savedState.parser,
+      onLoad: state => {
+        state.pagination && onPaginationChange((0, mappers_1.mapPaginationToTableState)(state.pagination));
+        state.search && onGlobalFilterChange(state.search);
+        state.ordering && onSortingChange((0, mappers_1.mapSortToTableState)(state.ordering));
+        if (state.filter) {
+          setFilter(state.filter);
+          setFilterVisibility(Object.keys(state.filter));
+        }
+      }
+    };
+  }, [filter, globalFilter, onGlobalFilterChange, onPaginationChange, onSortingChange, pagination, savedState === null || savedState === void 0 ? void 0 : savedState.filterQueryKey, savedState === null || savedState === void 0 ? void 0 : savedState.id, savedState === null || savedState === void 0 ? void 0 : savedState.parser, savedState === null || savedState === void 0 ? void 0 : savedState.serializer, setFilter, setFilterVisibility, sorting, validatePersistedState]);
+  (0, toolbar_1.usePersistState)({
+    persist: suppressToolbar ? tableToolbarPersistConfig : undefined,
+    filter,
+    search: suppressSearch ? undefined : globalFilter
+  });
   const {
     checked,
     indeterminate
@@ -397,28 +429,7 @@ function Table(_a) {
         },
         className: styles_module_scss_1.default.toolbar,
         onRefresh: onRefresh ? handleOnRefresh : undefined,
-        persist: (savedState === null || savedState === void 0 ? void 0 : savedState.id) && (savedState === null || savedState === void 0 ? void 0 : savedState.filterQueryKey) ? {
-          id: savedState.id,
-          filterQueryKey: savedState.filterQueryKey,
-          validateData: validatePersistedState,
-          state: {
-            pagination: (0, mappers_1.mapPaginationToRequestPayload)(pagination),
-            ordering: (0, mappers_1.mapSortToRequestPayload)(sorting),
-            filter,
-            search: globalFilter || ''
-          },
-          serializer: savedState.serializer,
-          parser: savedState.parser,
-          onLoad: state => {
-            state.pagination && onPaginationChange((0, mappers_1.mapPaginationToTableState)(state.pagination));
-            state.search && onGlobalFilterChange(state.search);
-            state.ordering && onSortingChange((0, mappers_1.mapSortToTableState)(state.ordering));
-            if (state.filter) {
-              setFilter(state.filter);
-              setFilterVisibility(Object.keys(state.filter));
-            }
-          }
-        } : undefined,
+        persist: showToolbar ? tableToolbarPersistConfig : undefined,
         bulkActions: bulkActions,
         selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single',
         checked: checked,

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

@@ -17,7 +17,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useLocale } from '@snack-uikit/locale';
 import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider } from '@snack-uikit/skeleton';
-import { Toolbar } from '@snack-uikit/toolbar';
+import { Toolbar, usePersistState, } from '@snack-uikit/toolbar';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { DEFAULT_EXPANDED, DEFAULT_PAGE_SIZE, DEFAULT_ROW_SELECTION, DEFAULT_SORTING, DefaultColumns, TEST_IDS, } from '../../constants';
@@ -268,6 +268,53 @@ export function Table(_a) {
     const { updateCellMap } = useCellAutoResizeController(table);
     const showToolbar = !suppressToolbar;
     const showPagination = !infiniteLoading && !suppressPagination;
+    const tableToolbarPersistConfig = useMemo(() => {
+        if (!(savedState === null || savedState === void 0 ? void 0 : savedState.id) || !(savedState === null || savedState === void 0 ? void 0 : savedState.filterQueryKey)) {
+            return undefined;
+        }
+        return {
+            id: savedState.id,
+            filterQueryKey: savedState.filterQueryKey,
+            validateData: validatePersistedState,
+            state: {
+                pagination: mapPaginationToRequestPayload(pagination),
+                ordering: mapSortToRequestPayload(sorting),
+                filter,
+                search: globalFilter || '',
+            },
+            serializer: savedState.serializer,
+            parser: savedState.parser,
+            onLoad: state => {
+                state.pagination && onPaginationChange(mapPaginationToTableState(state.pagination));
+                state.search && onGlobalFilterChange(state.search);
+                state.ordering && onSortingChange(mapSortToTableState(state.ordering));
+                if (state.filter) {
+                    setFilter(state.filter);
+                    setFilterVisibility(Object.keys(state.filter));
+                }
+            },
+        };
+    }, [
+        filter,
+        globalFilter,
+        onGlobalFilterChange,
+        onPaginationChange,
+        onSortingChange,
+        pagination,
+        savedState === null || savedState === void 0 ? void 0 : savedState.filterQueryKey,
+        savedState === null || savedState === void 0 ? void 0 : savedState.id,
+        savedState === null || savedState === void 0 ? void 0 : savedState.parser,
+        savedState === null || savedState === void 0 ? void 0 : savedState.serializer,
+        setFilter,
+        setFilterVisibility,
+        sorting,
+        validatePersistedState,
+    ]);
+    usePersistState({
+        persist: suppressToolbar ? tableToolbarPersistConfig : undefined,
+        filter,
+        search: suppressSearch ? undefined : globalFilter,
+    });
     const { checked, indeterminate } = isAllRowsMode
         ? { checked: table.getIsAllRowsSelected(), indeterminate: table.getIsSomeRowsSelected() }
         : { checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected() };
@@ -278,30 +325,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, persist: (savedState === null || savedState === void 0 ? void 0 : savedState.id) && (savedState === null || savedState === void 0 ? void 0 : savedState.filterQueryKey)
-                        ? {
-                            id: savedState.id,
-                            filterQueryKey: savedState.filterQueryKey,
-                            validateData: validatePersistedState,
-                            state: {
-                                pagination: mapPaginationToRequestPayload(pagination),
-                                ordering: mapSortToRequestPayload(sorting),
-                                filter,
-                                search: globalFilter || '',
-                            },
-                            serializer: savedState.serializer,
-                            parser: savedState.parser,
-                            onLoad: state => {
-                                state.pagination && onPaginationChange(mapPaginationToTableState(state.pagination));
-                                state.search && onGlobalFilterChange(state.search);
-                                state.ordering && onSortingChange(mapSortToTableState(state.ordering));
-                                if (state.filter) {
-                                    setFilter(state.filter);
-                                    setFilterVisibility(Object.keys(state.filter));
-                                }
-                            },
-                        }
-                        : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: checked, indeterminate: indeterminate, onCheck: enableSelection ? handleOnToolbarCheck : undefined, outline: outline, after: toolbarAfter || exportSettings || areColumnsSettingsEnabled ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows })), areColumnsSettingsEnabled && (_jsx(ColumnsSettings, { columnsSettings: columnsSettings, enabledColumns: enabledColumns, setEnabledColumns: setEnabledColumns }))] })) : 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(DndContext, Object.assign({}, dndContextProps, { children: _jsx(TableContext.Provider, { value: { table, getRowBackgroundColor }, children: (!infiniteLoading || !data.length) && loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder }), loadingTableRows.map(row => (_jsx(BodyRow, { row: row, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? (_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag })) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag, disabledRowAppearance: RowAppearance.HideToggler }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, row.id))), data.length > 0 && infiniteLoading && loading && !dataError && (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.slice(0, 3).map(row => (_jsx(BodyRow, { row: row, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, 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 })] }), showPagination && (_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, persist: showToolbar ? tableToolbarPersistConfig : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: checked, indeterminate: indeterminate, onCheck: enableSelection ? handleOnToolbarCheck : undefined, outline: outline, after: toolbarAfter || exportSettings || areColumnsSettingsEnabled ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows })), areColumnsSettingsEnabled && (_jsx(ColumnsSettings, { columnsSettings: columnsSettings, enabledColumns: enabledColumns, setEnabledColumns: setEnabledColumns }))] })) : 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(DndContext, Object.assign({}, dndContextProps, { children: _jsx(TableContext.Provider, { value: { table, getRowBackgroundColor }, children: (!infiniteLoading || !data.length) && loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder }), loadingTableRows.map(row => (_jsx(BodyRow, { row: row, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? (_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag })) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag, disabledRowAppearance: RowAppearance.HideToggler }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, row.id))), data.length > 0 && infiniteLoading && loading && !dataError && (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.slice(0, 3).map(row => (_jsx(BodyRow, { row: row, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, 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 })] }), showPagination && (_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/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.38.5",
+  "version": "0.38.6",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -50,7 +50,7 @@
     "@snack-uikit/scroll": "0.10.8",
     "@snack-uikit/skeleton": "0.6.10",
     "@snack-uikit/toggles": "0.13.26",
-    "@snack-uikit/toolbar": "0.14.22",
+    "@snack-uikit/toolbar": "0.14.23",
     "@snack-uikit/truncate-string": "0.7.11",
     "@snack-uikit/typography": "0.8.12",
     "@snack-uikit/utils": "4.0.1",
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "1f7164e6cecf3ccd35444c100907479607cf10f0"
+  "gitHead": "eafd443c52a24f8ef917b78df60ff5ce2137a728"
 }

package/src/components/Table/Table.tsx

@@ -21,7 +21,13 @@ import { FiltersState } from '@snack-uikit/chips';
 import { useLocale } from '@snack-uikit/locale';
 import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider } from '@snack-uikit/skeleton';
-import { type PersistedFilterState, Toolbar, ToolbarProps } from '@snack-uikit/toolbar';
+import {
+  type PersistedFilterState,
+  Toolbar,
+  type ToolbarPersistConfig,
+  ToolbarProps,
+  usePersistState,
+} from '@snack-uikit/toolbar';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
 
@@ -440,6 +446,56 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   const showToolbar = !suppressToolbar;
   const showPagination = !infiniteLoading && !suppressPagination;
 
+  const tableToolbarPersistConfig = useMemo((): ToolbarPersistConfig<TFilters> | undefined => {
+    if (!savedState?.id || !savedState?.filterQueryKey) {
+      return undefined;
+    }
+
+    return {
+      id: savedState.id,
+      filterQueryKey: savedState.filterQueryKey,
+      validateData: validatePersistedState,
+      state: {
+        pagination: mapPaginationToRequestPayload(pagination),
+        ordering: mapSortToRequestPayload(sorting),
+        filter,
+        search: globalFilter || '',
+      },
+      serializer: savedState.serializer,
+      parser: savedState.parser,
+      onLoad: state => {
+        state.pagination && onPaginationChange(mapPaginationToTableState(state.pagination));
+        state.search && onGlobalFilterChange(state.search);
+        state.ordering && onSortingChange(mapSortToTableState(state.ordering));
+        if (state.filter) {
+          setFilter(state.filter as TFilters);
+          setFilterVisibility(Object.keys(state.filter));
+        }
+      },
+    };
+  }, [
+    filter,
+    globalFilter,
+    onGlobalFilterChange,
+    onPaginationChange,
+    onSortingChange,
+    pagination,
+    savedState?.filterQueryKey,
+    savedState?.id,
+    savedState?.parser,
+    savedState?.serializer,
+    setFilter,
+    setFilterVisibility,
+    sorting,
+    validatePersistedState,
+  ]);
+
+  usePersistState<TFilters>({
+    persist: suppressToolbar ? tableToolbarPersistConfig : undefined,
+    filter,
+    search: suppressSearch ? undefined : globalFilter,
+  });
+
   const { checked, indeterminate } = isAllRowsMode
     ? { checked: table.getIsAllRowsSelected(), indeterminate: table.getIsSomeRowsSelected() }
     : { checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected() };
@@ -465,32 +521,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
             }
             className={styles.toolbar}
             onRefresh={onRefresh ? handleOnRefresh : undefined}
-            persist={
-              savedState?.id && savedState?.filterQueryKey
-                ? {
-                    id: savedState.id,
-                    filterQueryKey: savedState.filterQueryKey,
-                    validateData: validatePersistedState,
-                    state: {
-                      pagination: mapPaginationToRequestPayload(pagination),
-                      ordering: mapSortToRequestPayload(sorting),
-                      filter,
-                      search: globalFilter || '',
-                    },
-                    serializer: savedState.serializer,
-                    parser: savedState.parser,
-                    onLoad: state => {
-                      state.pagination && onPaginationChange(mapPaginationToTableState(state.pagination));
-                      state.search && onGlobalFilterChange(state.search);
-                      state.ordering && onSortingChange(mapSortToTableState(state.ordering));
-                      if (state.filter) {
-                        setFilter(state.filter as TFilters);
-                        setFilterVisibility(Object.keys(state.filter));
-                      }
-                    },
-                  }
-                : undefined
-            }
+            persist={showToolbar ? tableToolbarPersistConfig : undefined}
             bulkActions={bulkActions}
             selectionMode={rowSelectionProp?.multiRow ? 'multiple' : 'single'}
             checked={checked}