@snack-uikit/table 0.37.34 → 0.37.36-preview-ae5449cf.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## <small>0.37.35 (2026-02-18)</small>
+
+### Only dependencies have been changed
+* [@snack-uikit/chips@0.28.14]($PUBLIC_PROJECT_URL/blob/master/packages/chips/CHANGELOG.md)
+* [@snack-uikit/icons@0.27.6]($PUBLIC_PROJECT_URL/blob/master/packages/icons/CHANGELOG.md)
+* [@snack-uikit/info-block@0.6.37]($PUBLIC_PROJECT_URL/blob/master/packages/info-block/CHANGELOG.md)
+* [@snack-uikit/list@0.32.13]($PUBLIC_PROJECT_URL/blob/master/packages/list/CHANGELOG.md)
+* [@snack-uikit/pagination@0.10.23]($PUBLIC_PROJECT_URL/blob/master/packages/pagination/CHANGELOG.md)
+* [@snack-uikit/toggles@0.13.25]($PUBLIC_PROJECT_URL/blob/master/packages/toggles/CHANGELOG.md)
+* [@snack-uikit/toolbar@0.14.18]($PUBLIC_PROJECT_URL/blob/master/packages/toolbar/CHANGELOG.md)
+* [@snack-uikit/truncate-string@0.7.8]($PUBLIC_PROJECT_URL/blob/master/packages/truncate-string/CHANGELOG.md)
+
+
+
+
+
 ## <small>0.37.34 (2026-02-16)</small>
 
 * feat(LK-7075): added expanding column minsize param ([a216a36](https://github.com/cloud-ru-tech/snack-uikit/commit/a216a36))

package/README.md

@@ -117,7 +117,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | columnSettings* | `{ enableDrag?: boolean; enableSettingsMenu?: boolean; }` | - |  |
-| savedState* | `{ id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - |  |
+| savedState* | `Pick<ToolbarPersistConfig<Record<string, unknown>>, "serializer" \| "parser"> & { id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - |  |
 | tableColumns* | `ColumnDefinition<TData>[]` | - |  |
 ## useColumnSettings
 ### Props
@@ -125,7 +125,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 |------|------|---------------|-------------|
 | pinnedGroups* | `PinnedGroupsState<TData>` | - |  |
 | columnDefinitions* | `ColumnDefinition<TData>[]` | - | Определение внешнего вида и функционала колонок |
-| savedState | `{ id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - | Конфиг для сохранения состояния в localStorage и queryParams. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
+| savedState | `Pick<ToolbarPersistConfig<TFilters>, "serializer" \| "parser"> & { id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - | Конфиг для сохранения состояния в localStorage и queryParams. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
 | columnsSettings | `{ enableDrag?: boolean; enableSettingsMenu?: boolean; }` | - | Параметры отвечают за настройки колонок <br> <strong>enableDrag</strong>: Включение сортировки порядка столбцов вручную перетаскиванием <br> <strong>enableSettingsMenu</strong>: Включение настроек показа колонок <br> |
 | rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; appearance?: RowAppearance; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>appearance</strong>: Режим отображения недоступной для выбора строки. Опции: RowAppearance.Disabled (по дефолту) - серый фон, чекбокс/радиобаттон скрыт, RowAppearance.HideToggler - обычный фон, чекбокс/радиобаттон скрыт <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
 | expanding | `{ getSubRows: (element: TData) => TData[]; expandingColumnDefinition: TreeColumnDefinitionProps<TData>; state?: ExpandedState; onChange?(state: ExpandedState): void; }` | - | Параметр отвечает за общие настройки раскрывающихся строк <br> <strong>getSubRows</strong>: Метод отвечает за получение дочерних строк <br> <strong>expandingColumnDefinition</strong>: Описание колонок для дочерних строк <br> <strong>state</strong>: Состояние открытых строк <br> <strong>onExpandedChange</strong>: Колбэк на раскрытие строк <br> |
@@ -214,7 +214,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | {     top: [],   } | Определение какие строки должны быть закреплены в таблице |
-| savedState | `{ id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - | Конфиг для сохранения состояния в localStorage и queryParams. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
+| savedState | `Pick<ToolbarPersistConfig<TFilters>, "serializer" \| "parser"> & { id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - | Конфиг для сохранения состояния в localStorage и queryParams. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
 | getRowBackgroundColor | `(data: TData) => TableRowColor` | - | Функция для определения цвета фона строки на основе данных строки @param data - данные строки таблицы @returns цвет фона строки или undefined, если цвет не должен применяться |
 | 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 фильтры, сортировки, и т.д) |
@@ -251,7 +251,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 |------|------|---------------|-------------|
 | onChangePage* | `(offset: number, limit: number) => void` | - |  |
 | columnDefinitions* | `ColumnDefinition<TData>[]` | - | Определение внешнего вида и функционала колонок |
-| savedState | `{ id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - | Конфиг для сохранения состояния в localStorage и queryParams. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
+| savedState | `Pick<ToolbarPersistConfig<TFilters>, "serializer" \| "parser"> & { id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - | Конфиг для сохранения состояния в localStorage и queryParams. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
 | columnsSettings | `{ enableDrag?: boolean; enableSettingsMenu?: boolean; }` | - | Параметры отвечают за настройки колонок <br> <strong>enableDrag</strong>: Включение сортировки порядка столбцов вручную перетаскиванием <br> <strong>enableSettingsMenu</strong>: Включение настроек показа колонок <br> |
 | rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; appearance?: RowAppearance; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>appearance</strong>: Режим отображения недоступной для выбора строки. Опции: RowAppearance.Disabled (по дефолту) - серый фон, чекбокс/радиобаттон скрыт, RowAppearance.HideToggler - обычный фон, чекбокс/радиобаттон скрыт <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
 | expanding | `{ getSubRows: (element: TData) => TData[]; expandingColumnDefinition: TreeColumnDefinitionProps<TData>; state?: ExpandedState; onChange?(state: ExpandedState): void; }` | - | Параметр отвечает за общие настройки раскрывающихся строк <br> <strong>getSubRows</strong>: Метод отвечает за получение дочерних строк <br> <strong>expandingColumnDefinition</strong>: Описание колонок для дочерних строк <br> <strong>state</strong>: Состояние открытых строк <br> <strong>onExpandedChange</strong>: Колбэк на раскрытие строк <br> |

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

@@ -112,7 +112,7 @@ function Table(_a) {
     const isPaginationValid = (0, validators_1.validatePaging)(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.pagination);
     const isSortingValid = (0, validators_1.validateSorting)(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.ordering);
     const isSearchValid = !(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.search) || typeof (dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.search) === 'string';
-    const isFilterValid = Boolean((columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.filters) && (0, validators_1.validateFilter)(dataAsSettings.filter, columnFilters.filters));
+    const isFilterValid = !(columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.filters) || Boolean((0, validators_1.validateFilter)(dataAsSettings.filter, columnFilters.filters));
     return isPaginationValid && isSortingValid && isSearchValid && isFilterValid;
   }, [columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.filters]);
   const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
@@ -175,8 +175,8 @@ function Table(_a) {
     if ((rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable) !== undefined) {
       isCurrentRowSelected = typeof rowSelectionProp.enable === 'boolean' ? rowSelectionProp.enable : rowSelectionProp.enable(row);
     }
-    return isParentSelected && isCurrentRowSelected;
-  }, [rowSelectionProp]);
+    return isParentSelected && isCurrentRowSelected && (row.getIsPinned() && enableSelectPinned || !row.getIsPinned());
+  }, [rowSelectionProp, enableSelectPinned]);
   const table = (0, react_table_1.useReactTable)({
     data,
     columns: enabledTableColumns,
@@ -266,22 +266,11 @@ function Table(_a) {
   })) : undefined, [bulkActionsProp, enableSelection, table]);
   const isAllRowsMode = toolbarCheckBoxMode === types_1.ToolbarCheckBoxMode.AllRows;
   const handleOnToolbarCheck = (0, react_1.useCallback)(() => {
-    if (!loading && !enableSelectPinned && table.getTopRows().length) {
-      const centerRows = table.getCenterRows();
-      const isSomeRowsSelected = isAllRowsMode ? table.getIsSomeRowsSelected() : table.getIsSomePageRowsSelected();
-      const isAllCenterRowsSelected = centerRows.every(row => row.getIsSelected());
-      if (isAllCenterRowsSelected) {
-        table.resetRowSelection();
-        return;
-      }
-      centerRows.forEach(row => row.toggleSelected(isSomeRowsSelected ? true : undefined));
-      return;
-    }
     if (!loading && (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow)) {
       isAllRowsMode ? table.toggleAllRowsSelected() : table.toggleAllPageRowsSelected();
       return;
     }
-  }, [isAllRowsMode, loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table, enableSelectPinned]);
+  }, [isAllRowsMode, loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table]);
   const columnSizeVarsRef = (0, react_1.useRef)();
   const headers = table.getFlatHeaders();
   const columnSizes = (0, react_1.useMemo)(() => {
@@ -418,6 +407,8 @@ function Table(_a) {
             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);
@@ -493,7 +484,7 @@ function Table(_a) {
                     rowAutoHeight: rowAutoHeight,
                     columnOrder: columnOrder,
                     enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag,
-                    disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance
+                    disabledRowAppearance: types_1.RowAppearance.HideToggler
                   }, row.id))
                 }) : null, centerRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
                   row: row,

package/dist/cjs/components/Table/utils/saveTableState/validators.js

@@ -4,7 +4,15 @@ 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.limit) === 'number' && typeof (value === null || value === void 0 ? void 0 : value.offset) === 'number';
+const validatePaging = value => {
+  if (!value) {
+    return true;
+  }
+  if (typeof value !== 'object') {
+    return false;
+  }
+  return 'limit' in value && typeof value.limit === 'number' && 'offset' in value && typeof value.offset === 'number';
+};
 exports.validatePaging = validatePaging;
 const validateSorting = value => !value || value.every(column => typeof (column === null || column === void 0 ? void 0 : column.field) === 'string' && typeof (column === null || column === void 0 ? void 0 : column.direction) === 'string');
 exports.validateSorting = validateSorting;

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

@@ -1,7 +1,7 @@
 import { PaginationState, Row, RowPinningState, RowSelectionOptions, RowSelectionState, SortingState } from '@tanstack/react-table';
 import { ReactNode, RefObject } from 'react';
 import { FiltersState } from '@snack-uikit/chips';
-import { FilterRow, ToolbarProps } from '@snack-uikit/toolbar';
+import { FilterRow, ToolbarPersistConfig, ToolbarProps } from '@snack-uikit/toolbar';
 import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 import { TABLE_ROW_COLOR } from '../constants';
 import { EmptyStateProps, ExportButtonProps, RowClickHandler, TreeColumnDefinitionProps } from '../helperComponents';
@@ -144,7 +144,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
      *  Поле id должно быть уникальным для разных таблиц в рамках приложения. <br>
      *  Для корректной работы необходимо наличие id в конфиге columnDefinitions
      *  */
-    savedState?: {
+    savedState?: Pick<ToolbarPersistConfig<TFilters>, 'serializer' | 'parser'> & {
         id: string;
         filterQueryKey?: string;
         resize?: boolean;

package/dist/cjs/helperComponents/Rows/styles.module.css

@@ -110,18 +110,18 @@
 .bodyRow[data-clickable]{
   cursor:pointer;
 }
-.bodyRow:not([data-disabled]):hover::before{
+.bodyRow:not([data-row-appearance=disabled]):hover::before{
   height:0;
 }
-.bodyRow:not([data-disabled]):not([data-selected]):hover, .bodyRow:not([data-disabled]):not([data-selected])[data-actions-opened]{
+.bodyRow:not([data-row-appearance=disabled]):not([data-selected]):hover, .bodyRow:not([data-row-appearance=disabled]):not([data-selected])[data-actions-opened]{
   background-color:color-mix(in srgb, var(--sys-neutral-accent-default, #787b8a), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a008, 0.08)) * 100%));
   border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
 }
-.bodyRow:not([data-disabled]):not([data-selected]):hover .rowPinnedCells, .bodyRow:not([data-disabled]):not([data-selected])[data-actions-opened] .rowPinnedCells{
+.bodyRow:not([data-row-appearance=disabled]):not([data-selected]):hover .rowPinnedCells, .bodyRow:not([data-row-appearance=disabled]):not([data-selected])[data-actions-opened] .rowPinnedCells{
   background-color:color-mix(in srgb, var(--sys-neutral-accent-default, #787b8a), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a008, 0.08)) * 100%));
   border-color:inherit;
 }
-.bodyRow:not([data-disabled]):hover + .bodyRow::before{
+.bodyRow:not([data-row-appearance=disabled]):hover + .bodyRow::before{
   height:0;
 }
 

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

@@ -24,7 +24,7 @@ import { DEFAULT_EXPANDED, DEFAULT_PAGE_SIZE, DEFAULT_ROW_SELECTION, DEFAULT_SOR
 import { CellAutoResizeContext, useCellAutoResizeController } from '../../contexts';
 import { BodyRow, ColumnsSettings, ExportButton, getColumnId, getRowActionsColumnDef, getStatusColumnDef, HeaderRow, STATUS_APPEARANCE, TableContext, TableEmptyState, TablePagination, useEmptyState, } from '../../helperComponents';
 import { fuzzyFilter } from '../../utils';
-import { ToolbarCheckBoxMode } from '../types';
+import { RowAppearance, ToolbarCheckBoxMode } from '../types';
 import { useColumnOrderByDrag, useColumnSettings, useFilters, useLoadingTable, usePageReset, useStateControl, } from './hooks';
 import styles from './styles.module.css';
 import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSizeFromLocalStorage, getPinnedGroups, getTableColumnsDefinitions, saveStateToLocalStorage, } from './utils';
@@ -50,7 +50,7 @@ export function Table(_a) {
         const isPaginationValid = validatePaging(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.pagination);
         const isSortingValid = validateSorting(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.ordering);
         const isSearchValid = !(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.search) || typeof (dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.search) === 'string';
-        const isFilterValid = Boolean((columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.filters) && validateFilter(dataAsSettings.filter, columnFilters.filters));
+        const isFilterValid = !(columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.filters) || Boolean(validateFilter(dataAsSettings.filter, columnFilters.filters));
         return isPaginationValid && isSortingValid && isSearchValid && isFilterValid;
     }, [columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.filters]);
     const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
@@ -100,8 +100,8 @@ export function Table(_a) {
             isCurrentRowSelected =
                 typeof rowSelectionProp.enable === 'boolean' ? rowSelectionProp.enable : rowSelectionProp.enable(row);
         }
-        return isParentSelected && isCurrentRowSelected;
-    }, [rowSelectionProp]);
+        return (isParentSelected && isCurrentRowSelected && ((row.getIsPinned() && enableSelectPinned) || !row.getIsPinned()));
+    }, [rowSelectionProp, enableSelectPinned]);
     const table = useReactTable({
         data,
         columns: enabledTableColumns,
@@ -181,22 +181,11 @@ export function Table(_a) {
         : undefined, [bulkActionsProp, enableSelection, table]);
     const isAllRowsMode = toolbarCheckBoxMode === ToolbarCheckBoxMode.AllRows;
     const handleOnToolbarCheck = useCallback(() => {
-        if (!loading && !enableSelectPinned && table.getTopRows().length) {
-            const centerRows = table.getCenterRows();
-            const isSomeRowsSelected = isAllRowsMode ? table.getIsSomeRowsSelected() : table.getIsSomePageRowsSelected();
-            const isAllCenterRowsSelected = centerRows.every(row => row.getIsSelected());
-            if (isAllCenterRowsSelected) {
-                table.resetRowSelection();
-                return;
-            }
-            centerRows.forEach(row => row.toggleSelected(isSomeRowsSelected ? true : undefined));
-            return;
-        }
         if (!loading && (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow)) {
             isAllRowsMode ? table.toggleAllRowsSelected() : table.toggleAllPageRowsSelected();
             return;
         }
-    }, [isAllRowsMode, loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table, enableSelectPinned]);
+    }, [isAllRowsMode, loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table]);
     const columnSizeVarsRef = useRef();
     const headers = table.getFlatHeaders();
     const columnSizes = useMemo(() => {
@@ -300,6 +289,8 @@ export function Table(_a) {
                                 filter,
                                 search: globalFilter || '',
                             },
+                            serializer: savedState.serializer,
+                            parser: savedState.parser,
                             onLoad: state => {
                                 state.pagination && onPaginationChange(mapPaginationToTableState(state.pagination));
                                 state.search && onGlobalFilterChange(state.search);
@@ -310,7 +301,7 @@ export function Table(_a) {
                                 }
                             },
                         }
-                        : 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: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, 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 }))] })));
+                        : 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/dist/esm/components/Table/utils/saveTableState/validators.js

@@ -1,5 +1,12 @@
-export const validatePaging = (value) => typeof (value === null || value === void 0 ? void 0 : value.limit) === 'number' &&
-    typeof (value === null || value === void 0 ? void 0 : value.offset) === 'number';
+export const validatePaging = (value) => {
+    if (!value) {
+        return true;
+    }
+    if (typeof value !== 'object') {
+        return false;
+    }
+    return 'limit' in value && typeof value.limit === 'number' && 'offset' in value && typeof value.offset === 'number';
+};
 export const validateSorting = (value) => !value ||
     value.every(column => typeof (column === null || column === void 0 ? void 0 : column.field) === 'string' && typeof (column === null || column === void 0 ? void 0 : column.direction) === 'string');
 export const validateFilter = (value, filterSettings) => typeof value === 'object' &&

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

@@ -1,7 +1,7 @@
 import { PaginationState, Row, RowPinningState, RowSelectionOptions, RowSelectionState, SortingState } from '@tanstack/react-table';
 import { ReactNode, RefObject } from 'react';
 import { FiltersState } from '@snack-uikit/chips';
-import { FilterRow, ToolbarProps } from '@snack-uikit/toolbar';
+import { FilterRow, ToolbarPersistConfig, ToolbarProps } from '@snack-uikit/toolbar';
 import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 import { TABLE_ROW_COLOR } from '../constants';
 import { EmptyStateProps, ExportButtonProps, RowClickHandler, TreeColumnDefinitionProps } from '../helperComponents';
@@ -144,7 +144,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
      *  Поле id должно быть уникальным для разных таблиц в рамках приложения. <br>
      *  Для корректной работы необходимо наличие id в конфиге columnDefinitions
      *  */
-    savedState?: {
+    savedState?: Pick<ToolbarPersistConfig<TFilters>, 'serializer' | 'parser'> & {
         id: string;
         filterQueryKey?: string;
         resize?: boolean;

package/dist/esm/helperComponents/Rows/styles.module.css

@@ -110,18 +110,18 @@
 .bodyRow[data-clickable]{
   cursor:pointer;
 }
-.bodyRow:not([data-disabled]):hover::before{
+.bodyRow:not([data-row-appearance=disabled]):hover::before{
   height:0;
 }
-.bodyRow:not([data-disabled]):not([data-selected]):hover, .bodyRow:not([data-disabled]):not([data-selected])[data-actions-opened]{
+.bodyRow:not([data-row-appearance=disabled]):not([data-selected]):hover, .bodyRow:not([data-row-appearance=disabled]):not([data-selected])[data-actions-opened]{
   background-color:color-mix(in srgb, var(--sys-neutral-accent-default, #787b8a), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a008, 0.08)) * 100%));
   border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
 }
-.bodyRow:not([data-disabled]):not([data-selected]):hover .rowPinnedCells, .bodyRow:not([data-disabled]):not([data-selected])[data-actions-opened] .rowPinnedCells{
+.bodyRow:not([data-row-appearance=disabled]):not([data-selected]):hover .rowPinnedCells, .bodyRow:not([data-row-appearance=disabled]):not([data-selected])[data-actions-opened] .rowPinnedCells{
   background-color:color-mix(in srgb, var(--sys-neutral-accent-default, #787b8a), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a008, 0.08)) * 100%));
   border-color:inherit;
 }
-.bodyRow:not([data-disabled]):hover + .bodyRow::before{
+.bodyRow:not([data-row-appearance=disabled]):hover + .bodyRow::before{
   height:0;
 }
 

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.37.34",
+  "version": "0.37.36-preview-ae5449cf.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -42,16 +42,16 @@
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@snack-uikit/button": "0.19.17",
-    "@snack-uikit/chips": "0.28.13",
-    "@snack-uikit/icons": "0.27.5",
-    "@snack-uikit/info-block": "0.6.36",
-    "@snack-uikit/list": "0.32.12",
-    "@snack-uikit/pagination": "0.10.22",
+    "@snack-uikit/chips": "0.28.14",
+    "@snack-uikit/icons": "0.27.6",
+    "@snack-uikit/info-block": "0.6.37",
+    "@snack-uikit/list": "0.32.13",
+    "@snack-uikit/pagination": "0.10.23",
     "@snack-uikit/scroll": "0.10.6",
     "@snack-uikit/skeleton": "0.6.10",
-    "@snack-uikit/toggles": "0.13.24",
-    "@snack-uikit/toolbar": "0.14.17",
-    "@snack-uikit/truncate-string": "0.7.7",
+    "@snack-uikit/toggles": "0.13.25",
+    "@snack-uikit/toolbar": "0.14.18",
+    "@snack-uikit/truncate-string": "0.7.8",
     "@snack-uikit/typography": "0.8.12",
     "@snack-uikit/utils": "4.0.1",
     "@tanstack/match-sorter-utils": "8.11.8",
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "7342fbaed272bfd1c382432826c0ef53311c7ada"
+  "gitHead": "2b7d2b664595517f72f9522b5173f908ebe4b5fc"
 }

package/src/components/Table/Table.tsx

@@ -50,7 +50,7 @@ import {
 } from '../../helperComponents';
 import { ColumnDefinition } from '../../types';
 import { fuzzyFilter } from '../../utils';
-import { TableProps, ToolbarCheckBoxMode } from '../types';
+import { RowAppearance, TableProps, ToolbarCheckBoxMode } from '../types';
 import {
   useColumnOrderByDrag,
   useColumnSettings,
@@ -157,9 +157,8 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
         const isPaginationValid = validatePaging(dataAsSettings?.pagination);
         const isSortingValid = validateSorting(dataAsSettings?.ordering);
         const isSearchValid = !dataAsSettings?.search || typeof dataAsSettings?.search === 'string';
-        const isFilterValid = Boolean(
-          columnFilters?.filters && validateFilter(dataAsSettings.filter, columnFilters.filters),
-        );
+        const isFilterValid =
+          !columnFilters?.filters || Boolean(validateFilter(dataAsSettings.filter, columnFilters.filters));
 
         return isPaginationValid && isSortingValid && isSearchValid && isFilterValid;
       },
@@ -232,9 +231,11 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
         isCurrentRowSelected =
           typeof rowSelectionProp.enable === 'boolean' ? rowSelectionProp.enable : rowSelectionProp.enable(row);
       }
-      return isParentSelected && isCurrentRowSelected;
+      return (
+        isParentSelected && isCurrentRowSelected && ((row.getIsPinned() && enableSelectPinned) || !row.getIsPinned())
+      );
     },
-    [rowSelectionProp],
+    [rowSelectionProp, enableSelectPinned],
   );
 
   const table = useReactTable<TData>({
@@ -332,25 +333,11 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   const isAllRowsMode = toolbarCheckBoxMode === ToolbarCheckBoxMode.AllRows;
 
   const handleOnToolbarCheck = useCallback(() => {
-    if (!loading && !enableSelectPinned && table.getTopRows().length) {
-      const centerRows = table.getCenterRows();
-      const isSomeRowsSelected = isAllRowsMode ? table.getIsSomeRowsSelected() : table.getIsSomePageRowsSelected();
-      const isAllCenterRowsSelected = centerRows.every(row => row.getIsSelected());
-
-      if (isAllCenterRowsSelected) {
-        table.resetRowSelection();
-        return;
-      }
-
-      centerRows.forEach(row => row.toggleSelected(isSomeRowsSelected ? true : undefined));
-      return;
-    }
-
     if (!loading && rowSelectionProp?.multiRow) {
       isAllRowsMode ? table.toggleAllRowsSelected() : table.toggleAllPageRowsSelected();
       return;
     }
-  }, [isAllRowsMode, loading, rowSelectionProp?.multiRow, table, enableSelectPinned]);
+  }, [isAllRowsMode, loading, rowSelectionProp?.multiRow, table]);
 
   const columnSizeVarsRef = useRef<Record<string, string>>();
   const headers = table.getFlatHeaders();
@@ -490,6 +477,8 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
                       filter,
                       search: globalFilter || '',
                     },
+                    serializer: savedState.serializer,
+                    parser: savedState.parser,
                     onLoad: state => {
                       state.pagination && onPaginationChange(mapPaginationToTableState(state.pagination));
                       state.search && onGlobalFilterChange(state.search);
@@ -576,7 +565,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
                             rowAutoHeight={rowAutoHeight}
                             columnOrder={columnOrder}
                             enableColumnsOrderSortByDrag={enableColumnsOrderSortByDrag}
-                            disabledRowAppearance={rowSelectionProp?.appearance}
+                            disabledRowAppearance={RowAppearance.HideToggler}
                           />
                         ))}
                       </div>

package/src/components/Table/utils/saveTableState/validators.ts

@@ -1,9 +1,17 @@
 import { RequestPayloadParams } from '@cloud-ru/ft-request-payload-transform';
 import { ChipChoiceRowProps } from '@snack-uikit/chips';
 
-export const validatePaging = (value: unknown): value is RequestPayloadParams['pagination'] =>
-  typeof (value as RequestPayloadParams['pagination'])?.limit === 'number' &&
-  typeof (value as RequestPayloadParams['pagination'])?.offset === 'number';
+export const validatePaging = (value: unknown): value is RequestPayloadParams['pagination'] => {
+  if (!value) {
+    return true;
+  }
+
+  if (typeof value !== 'object') {
+    return false;
+  }
+
+  return 'limit' in value && typeof value.limit === 'number' && 'offset' in value && typeof value.offset === 'number';
+};
 
 export const validateSorting = (value: unknown): value is RequestPayloadParams['ordering'] =>
   !value ||

package/src/components/types.ts

@@ -9,7 +9,7 @@ import {
 import { ReactNode, RefObject } from 'react';
 
 import { FiltersState } from '@snack-uikit/chips';
-import { FilterRow, ToolbarProps } from '@snack-uikit/toolbar';
+import { FilterRow, ToolbarPersistConfig, ToolbarProps } from '@snack-uikit/toolbar';
 import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 
 import { TABLE_ROW_COLOR } from '../constants';
@@ -177,7 +177,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
    *  Поле id должно быть уникальным для разных таблиц в рамках приложения. <br>
    *  Для корректной работы необходимо наличие id в конфиге columnDefinitions
    *  */
-  savedState?: {
+  savedState?: Pick<ToolbarPersistConfig<TFilters>, 'serializer' | 'parser'> & {
     id: string;
     filterQueryKey?: string;
     resize?: boolean;

package/src/helperComponents/Rows/styles.module.scss

@@ -154,7 +154,7 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
     cursor: pointer;
   }
 
-  &:not([data-disabled]) {
+  &:not([data-row-appearance='disabled']) {
     &:hover {
       &::before {
         height: 0;