@snack-uikit/table 0.16.7 → 0.16.8-preview-e82f86de.0

package/README.md

@@ -114,6 +114,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | sorting | `{ initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; }` | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br> <strong>initialState</strong>: Начальное состояние сортировки <br> <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br> <strong>onChange</strong>: Колбэк на изменение сортировки |
 | rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
 | search | `{ initialValue?: string; state?: string; placeholder?: string; loading?: boolean; onChange?(value: string): void; }` | 'Search'<br> <strong>loading</strong>: Состояние загрузки в строке поиска <br> <strong>onChange</strong>: Колбэк на изменение данных в строке поиска | Параметры отвечают за глобальный поиск в таблице <br> <strong>initialState</strong>: Начальное состояние строки поиска <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>placeholder</strong>: Placeholder строки поиска |
+| enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
 | pageSize | `number` | 10 | Максимальное кол-во строк на страницу |
 | pagination | `{ state?: PaginationState; options?: number[]; optionsLabel?: string; onChange?(state: PaginationState): void; }` | 'Rows volume: ' <br> <strong>onChange</strong>: Колбэк на изменение пагинации | Параметры отвечают за пагинацию в таблице <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br> <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу |
 | pageCount | `number` | - | Кол-во страниц (используется для внешнего управления) |
@@ -169,6 +170,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | loading | `boolean` | - | Состояние загрузки |
 | sorting | `{ initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; }` | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br> <strong>initialState</strong>: Начальное состояние сортировки <br> <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br> <strong>onChange</strong>: Колбэк на изменение сортировки |
 | rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
+| enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
 | onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |
 | className | `string` | - | CSS-класс |
 | onRefresh | `() => void` | - | Колбек обновления данных |

package/dist/components/Table/Table.d.ts

@@ -1,6 +1,6 @@
 import { TableProps } from '../types';
 /** Компонент таблицы */
-export declare function Table<TData extends object>({ data, columnDefinitions, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize, pageCount, loading, outline, moreActions, exportFileName, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, toolbarBefore, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, scrollRef, scrollContainerRef, getRowId, ...rest }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData extends object>({ data, columnDefinitions, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize, pageCount, loading, outline, moreActions, exportFileName, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, toolbarBefore, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, ...rest }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
     var statusAppearances: {

package/dist/components/Table/Table.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
 import cn from 'classnames';
-import { useCallback, useEffect, useMemo } from 'react';
+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';
@@ -27,7 +27,7 @@ import { useStateControl } from './hooks/useStateControl';
 import styles from './styles.module.css';
 /** Компонент таблицы */
 export function Table(_a) {
-    var { data, columnDefinitions, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportFileName, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, toolbarBefore, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, scrollRef, scrollContainerRef, getRowId } = _a, rest = __rest(_a, ["data", "columnDefinitions", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportFileName", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "scrollRef", "scrollContainerRef", "getRowId"]);
+    var { data, columnDefinitions, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportFileName, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, toolbarBefore, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch } = _a, rest = __rest(_a, ["data", "columnDefinitions", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportFileName", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch"]);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
     const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
     const defaultPaginationState = useMemo(() => ({
@@ -37,6 +37,11 @@ export function Table(_a) {
     const { state: sorting, onStateChange: onSortingChange } = useStateControl(sortingProp, []);
     const { state: pagination, onStateChange: onPaginationChange } = useStateControl(paginationProp, defaultPaginationState);
     const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
+    useEffect(() => {
+        if (pagination.pageIndex >= data.length / pagination.pageSize) {
+            onPaginationChange(Object.assign(Object.assign({}, pagination), { pageIndex: 0 }));
+        }
+    }, [data.length, onPaginationChange, pagination]);
     const tableColumns = useMemo(() => {
         let cols = columnDefinitions;
         if (enableSelection) {
@@ -75,7 +80,7 @@ export function Table(_a) {
         manualSorting,
         manualPagination,
         manualFiltering,
-        globalFilterFn: fuzzyFilter,
+        globalFilterFn: enableFuzzySearch ? fuzzyFilter : undefined,
         onGlobalFilterChange,
         getRowId,
         onRowSelectionChange,
@@ -89,6 +94,7 @@ export function Table(_a) {
         onSortingChange,
         getSortedRowModel: getSortedRowModel(),
         onPaginationChange,
+        autoResetPageIndex: false,
         getPaginationRowModel: getPaginationRowModel(),
         getCoreRowModel: getCoreRowModel(),
         columnResizeMode: 'onEnd',
@@ -116,8 +122,21 @@ export function Table(_a) {
             return;
         }
     }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table]);
-    useEffect(() => { }, []);
+    const columnSizeVarsRef = useRef();
     const columnSizeVars = useMemo(() => {
+        var _a;
+        const sizeKey = (id) => `--table-column-${id}-size`;
+        const flexKey = (id) => `--table-column-${id}-flex`;
+        const getCurrentlyConfiguredHeaderWidth = (id) => {
+            const cell = document.querySelector(`[data-header-id="${id}"]`);
+            const resizeHandler = cell === null || cell === void 0 ? void 0 : cell.querySelector('[data-test-id="table__header-cell-resize-handle-moving-part"]');
+            if (cell && resizeHandler) {
+                const { width } = cell.getBoundingClientRect();
+                const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
+                return width + offset;
+            }
+            return 0;
+        };
         const originalColumnDefs = table._getColumnDefs();
         const headers = table.getFlatHeaders();
         const colSizes = {};
@@ -126,20 +145,29 @@ export function Table(_a) {
             const originalColDef = originalColumnDefs.find(col => getColumnId(header) === col.id);
             const originalColumnDefSize = originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.size;
             const initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
+            const prevSize = (_a = columnSizeVarsRef.current) === null || _a === void 0 ? void 0 : _a[sizeKey(header.id)];
             let size = initSize;
             if (header.column.getCanResize()) {
                 const currentSize = header.getSize();
                 const colDefSize = header.column.columnDef.size;
                 size = currentSize === colDefSize ? initSize : `${currentSize}px`;
+                if (prevSize === '100%' && currentSize !== colDefSize) {
+                    const realSize = getCurrentlyConfiguredHeaderWidth(header.id);
+                    table.setColumnSizing(old => (Object.assign(Object.assign({}, old), { [header.id]: realSize })));
+                    size = `${realSize}px`;
+                }
             }
-            colSizes[`--table-column-${header.id}-size`] = size;
-            colSizes[`--table-column-${header.id}-flex`] = size === '100%' ? 'unset' : '0';
+            colSizes[sizeKey(header.id)] = size;
+            colSizes[flexKey(header.id)] = size === '100%' ? 'unset' : '0';
         }
         return colSizes;
         /* effect must be called only on columnSizingInfo.isResizingColumn changes
           to reduce unnecessary recalculations */
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [table.getState().columnSizingInfo.isResizingColumn]);
+    useEffect(() => {
+        columnSizeVarsRef.current = columnSizeVars;
+    }, [columnSizeVars]);
     const tableRows = table.getRowModel().rows;
     const loadingTableRows = loadingTable.getRowModel().rows;
     const tablePagination = table.getState().pagination;

package/dist/components/types.d.ts

@@ -48,6 +48,8 @@ export type TableProps<TData extends object> = WithSupportProps<{
         loading?: boolean;
         onChange?(value: string): void;
     };
+    /** Включить нечеткий поиск  */
+    enableFuzzySearch?: boolean;
     /** Максимальное кол-во строк на страницу @default 10 */
     pageSize?: number;
     /** Параметры отвечают за пагинацию в таблице <br>

package/dist/constants.js

@@ -17,7 +17,7 @@ export const TEST_IDS = {
     rowActions: {
         droplistTrigger: 'table__body-row__droplistTrigger',
         droplist: 'table__body-row__actions-droplist',
-        option: 'table__body-row__action-option',
+        option: 'list__base-item-option',
     },
     statusIndicator: 'table__status-indicator',
     statusLabel: 'table__status-label',

package/dist/helperComponents/Cells/HeaderCell/HeaderCell.js

@@ -26,5 +26,5 @@ export function HeaderCell({ header, className }) {
             return;
         return (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
     };
-    return (_jsxs(Cell, { style: style, onMouseUp: sortingHandler, "data-sortable": isSortable || undefined, "data-no-padding": columnDef.noHeaderCellPadding || undefined, "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined, "data-test-id": TEST_IDS.headerCell, "data-resizing": isResizing || undefined, role: 'columnheader', className: cn(styles.tableHeaderCell, className, columnDef.headerClassName), ref: cellRef, children: [_jsxs("div", { className: styles.tableHeaderCellMain, children: [columnDef.header && (_jsx("div", { className: styles.tableHeaderCellName, children: _jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) }) })), Boolean(sortIcon) && (_jsx("div", { className: styles.tableHeaderIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator, children: sortIcon }))] }), Boolean(isResizable) && _jsx(ResizeHandle, { header: header, cellRef: cellRef })] }));
+    return (_jsxs(Cell, { style: style, onMouseUp: sortingHandler, "data-sortable": isSortable || undefined, "data-no-padding": columnDef.noHeaderCellPadding || undefined, "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined, "data-test-id": TEST_IDS.headerCell, "data-header-id": header.id, "data-resizing": isResizing || undefined, role: 'columnheader', className: cn(styles.tableHeaderCell, className, columnDef.headerClassName), ref: cellRef, children: [_jsxs("div", { className: styles.tableHeaderCellMain, children: [columnDef.header && (_jsx("div", { className: styles.tableHeaderCellName, children: _jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) }) })), Boolean(sortIcon) && (_jsx("div", { className: styles.tableHeaderIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator, children: sortIcon }))] }), Boolean(isResizable) && _jsx(ResizeHandle, { header: header, cellRef: cellRef })] }));
 }

package/dist/helperComponents/Cells/HeaderCell/ResizeHandle.js

@@ -22,8 +22,15 @@ function getResizeIndicatorOffset({ header, cellRef }) {
 export function ResizeHandle({ header, cellRef }) {
     const isResizing = header.column.getIsResizing();
     const resizeHandler = header.getResizeHandler();
+    const handleMouseDown = event => {
+        if (event.detail === 2) {
+            header.column.resetSize();
+            return;
+        }
+        resizeHandler(event);
+    };
     const offset = isResizing ? getResizeIndicatorOffset({ header, cellRef }) : 0;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(styles.tableHeaderIcon, styles.tableHeaderResizeHandle), "data-resizing": isResizing || undefined, onMouseDown: resizeHandler, onTouchStart: resizeHandler }), isResizing && (_jsx("div", { className: styles.tableHeaderResizeIndicator, style: {
-                    transform: `translateX(${offset}px)`,
+    return (_jsxs(_Fragment, { children: [_jsx("div", { role: 'button', tabIndex: 0, className: cn(styles.tableHeaderIcon, styles.tableHeaderResizeHandle), "data-resizing": isResizing || undefined, onMouseDown: handleMouseDown, onTouchStart: resizeHandler }), isResizing && (_jsx("div", { "data-test-id": 'table__header-cell-resize-handle-moving-part', className: styles.tableHeaderResizeIndicator, style: {
+                    '--offset': `${offset}px`,
                 } }))] }));
 }

package/dist/helperComponents/Cells/HeaderCell/styles.module.css

@@ -103,6 +103,7 @@
   z-index:2;
   top:0;
   right:0;
+  transform:translateX(var(--offset));
   width:1px;
   height:100%;
   background-color:var(--sys-neutral-decor-activated, #bfc2cc);

package/dist/helperComponents/Cells/RowActionsCell/RowActionsCell.d.ts

@@ -1,20 +1,7 @@
 import { CellContext } from '@tanstack/react-table';
-import { MouseEvent, ReactElement } from 'react';
-import { BaseItemProps } from '@snack-uikit/list';
+import { DroplistProps } from '@snack-uikit/list';
 import { ColumnDefinition } from '../../../types';
-export type RowActionInfo<TData> = {
-    rowId: string;
-    data: TData;
-    itemId?: string;
-};
-export type RowActionProps<TData> = Pick<BaseItemProps, 'content' | 'disabled' | 'data-test-id'> & {
-    icon?: ReactElement;
-    tagLabel?: string;
-    id?: string;
-    hidden?: boolean;
-    onClick(row: RowActionInfo<TData>, e: MouseEvent<HTMLElement>): void;
-};
-export type ActionsGenerator<TData> = (cell: CellContext<TData, unknown>) => RowActionProps<TData>[];
+export type ActionsGenerator<TData> = (cell: CellContext<TData, unknown>) => DroplistProps['items'];
 export type RowActionsColumnDefProps<TData> = {
     /** Действия для строки */
     actionsGenerator: ActionsGenerator<TData>;

package/dist/helperComponents/Cells/RowActionsCell/RowActionsCell.js

@@ -1,39 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo, useRef } from 'react';
+import { useCallback, useMemo } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
 import { MoreSVG } from '@snack-uikit/icons';
-import { Droplist } from '@snack-uikit/list';
-import { Tag } from '@snack-uikit/tag';
+import { Droplist, isBaseItemProps } from '@snack-uikit/list';
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../../constants';
 import { useRowContext } from '../../contexts';
 import styles from './styles.module.css';
 function RowActionsCell({ row, actions }) {
-    const { droplistOpened, setDroplistOpen } = useRowContext();
-    const triggerRef = useRef(null);
-    const handleItemClick = (item) => (e) => {
-        item.onClick({ rowId: row.id, itemId: item.id, data: row.original }, e);
-    };
+    const { dropListOpened, setDropListOpen } = useRowContext();
+    const patchItem = useCallback((item, cb) => {
+        if (isBaseItemProps(item)) {
+            return Object.assign(Object.assign({}, item), { onClick(e) {
+                    var _a;
+                    (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
+                    cb(e);
+                } });
+        }
+        return Object.assign(Object.assign({}, item), { items: item.items.map(i => patchItem(i, cb)) });
+    }, []);
     const disabled = !row.getCanSelect();
     const stopPropagationClick = (e) => {
         e.stopPropagation();
     };
-    const visibleActions = useMemo(() => actions.filter(item => !(item === null || item === void 0 ? void 0 : item.hidden)), [actions]);
+    const patchedItems = useMemo(() => actions.map(item => patchItem(item, () => setDropListOpen(false))), [actions, patchItem, setDropListOpen]);
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    _jsx("div", { onClick: stopPropagationClick, className: styles.rowActionsCellWrap, "data-open": droplistOpened || undefined, children: !disabled && Boolean(visibleActions.length) && (_jsx(Droplist, { trigger: 'clickAndFocusVisible', open: droplistOpened, onOpenChange: setDroplistOpen, placement: 'bottom-end', size: 'm', "data-test-id": TEST_IDS.rowActions.droplist, triggerElemRef: triggerRef, items: actions
-                .filter(item => !(item === null || item === void 0 ? void 0 : item.hidden))
-                .map(item => ({
-                id: item.id,
-                onClick: e => {
-                    handleItemClick(item)(e);
-                    setDroplistOpen(false);
-                },
-                disabled: item.disabled,
-                content: item.content,
-                beforeContent: item.icon,
-                afterContent: item.tagLabel ? _jsx(Tag, { label: item.tagLabel }) : undefined,
-                'data-test-id': item['data-test-id'] || TEST_IDS.rowActions.option,
-            })), children: _jsx("span", { className: styles.rowActionsCellTrigger, children: _jsx(ButtonFunction, { icon: _jsx(MoreSVG, { size: 24 }), "data-test-id": TEST_IDS.rowActions.droplistTrigger, ref: triggerRef }) }) })) }));
+    _jsx("div", { onClick: stopPropagationClick, className: styles.rowActionsCellWrap, "data-open": dropListOpened || undefined, children: !disabled && Boolean(actions.length) && (_jsx(Droplist, { trigger: 'clickAndFocusVisible', open: dropListOpened, onOpenChange: setDropListOpen, placement: 'bottom-end', size: 'm', "data-test-id": TEST_IDS.rowActions.droplist, items: patchedItems, children: _jsx(ButtonFunction, { icon: _jsx(MoreSVG, { size: 24 }), "data-test-id": TEST_IDS.rowActions.droplistTrigger }) })) }));
 }
 /** Вспомогательная функция для создания ячейки с дополнительными действиями у строки */
 export function getRowActionsColumnDef({ actionsGenerator, pinned, }) {

package/dist/helperComponents/Cells/RowActionsCell/styles.module.css

@@ -16,20 +16,14 @@
 }
 
 .rowActionsCellWrap{
+  --offset:0px;
+  cursor:pointer;
   box-sizing:border-box;
   width:100%;
   height:100%;
-}
-
-.rowActionsCellTrigger{
-  --offset:0px;
   padding-left:var(--space-table-cell-action-padding, 4px);
   padding-right:var(--space-table-cell-action-padding, 4px);
-  cursor:pointer;
   display:flex;
   align-items:center;
   justify-content:center;
-  box-sizing:border-box;
-  width:100%;
-  height:100%;
 }

package/dist/helperComponents/Rows/BodyRow.js

@@ -9,7 +9,7 @@ import { Row } from './Row';
 import styles from './styles.module.css';
 export function BodyRow({ row, onRowClick }) {
     const { pinnedLeft, pinnedRight, unpinned } = useRowCells(row);
-    const [droplistOpened, setDroplistOpen] = useState(false);
+    const [dropListOpened, setDropListOpen] = useState(false);
     const disabled = !row.getCanSelect();
     const handleRowClick = (e) => {
         if (disabled)
@@ -21,5 +21,5 @@ export function BodyRow({ row, onRowClick }) {
             toggleSelected: row.toggleSelected,
         });
     };
-    return (_jsx(RowContext.Provider, { value: { droplistOpened, setDroplistOpen }, children: _jsxs(Row, { onClick: handleRowClick, "data-clickable": Boolean(onRowClick) || undefined, "data-disabled": disabled || undefined, "data-selected": row.getIsSelected() || undefined, "data-actions-opened": droplistOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, className: styles.bodyRow, children: [pinnedLeft && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: pinnedLeft.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) })), unpinned.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))), pinnedRight && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: pinnedRight.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) }))] }) }));
+    return (_jsx(RowContext.Provider, { value: { dropListOpened, setDropListOpen }, children: _jsxs(Row, { onClick: handleRowClick, "data-clickable": Boolean(onRowClick) || undefined, "data-disabled": disabled || undefined, "data-selected": row.getIsSelected() || undefined, "data-actions-opened": dropListOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, className: styles.bodyRow, children: [pinnedLeft && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: pinnedLeft.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) })), unpinned.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))), pinnedRight && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: pinnedRight.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) }))] }) }));
 }

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

@@ -38,6 +38,7 @@
 }
 .rowPinnedCells[data-position=right]{
   right:0;
+  margin-left:auto;
 }
 .rowPinnedCells[data-position=right]::after{
   left:0;

package/dist/helperComponents/contexts.d.ts

@@ -1,8 +1,8 @@
 import { Table } from '@tanstack/react-table';
 import { Dispatch, SetStateAction } from 'react';
 type RowContext = {
-    droplistOpened: boolean;
-    setDroplistOpen: Dispatch<SetStateAction<boolean>>;
+    dropListOpened: boolean;
+    setDropListOpen: Dispatch<SetStateAction<boolean>>;
 };
 export declare const RowContext: import("react").Context<RowContext>;
 export declare const useRowContext: () => RowContext;

package/dist/helperComponents/contexts.js

@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'react';
 export const RowContext = createContext({
-    droplistOpened: false,
-    setDroplistOpen() { },
+    dropListOpened: false,
+    setDropListOpen() { },
 });
 export const useRowContext = () => useContext(RowContext);
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/dist/types.d.ts

@@ -37,5 +37,5 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
     size: number;
 };
 export type ColumnDefinition<TData> = NormalColumnDefinition<TData> | PinnedColumnDefinition<TData>;
-export type { RowActionInfo, RowActionProps, RowActionsColumnDefProps, StatusColumnDefinitionProps, RowInfo, RowClickHandler, ActionsGenerator, CopyCellProps, MapStatusToAppearanceFnType, } from './helperComponents';
+export type { RowActionsColumnDefProps, StatusColumnDefinitionProps, RowInfo, RowClickHandler, ActionsGenerator, CopyCellProps, MapStatusToAppearanceFnType, } from './helperComponents';
 export type { PaginationState, SortingState, RowSelectionState, RowSelectionOptions, EmptyStateProps, ToolbarProps, HeaderContext, CellContext, };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.16.7",
+  "version": "0.16.8-preview-e82f86de.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,17 +33,16 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.17.1",
-    "@snack-uikit/chips": "0.13.3",
+    "@snack-uikit/chips": "0.13.4-preview-e82f86de.0",
     "@snack-uikit/icon-predefined": "0.5.1",
     "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/info-block": "0.3.4",
-    "@snack-uikit/list": "0.11.4",
+    "@snack-uikit/list": "0.11.5-preview-e82f86de.0",
     "@snack-uikit/pagination": "0.6.7",
     "@snack-uikit/scroll": "0.5.3",
     "@snack-uikit/skeleton": "0.3.4",
-    "@snack-uikit/tag": "0.9.1",
     "@snack-uikit/toggles": "0.9.8",
-    "@snack-uikit/toolbar": "0.7.32",
+    "@snack-uikit/toolbar": "0.7.33-preview-e82f86de.0",
     "@snack-uikit/truncate-string": "0.4.13",
     "@snack-uikit/typography": "0.6.2",
     "@snack-uikit/utils": "3.3.0",
@@ -58,5 +57,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "e7cf32fd5b9568bacce1f8cb1958c0ace6b52274"
+  "gitHead": "31a8e5230a8829ad3222c4bb9acb9b20e5345f4d"
 }

package/src/components/Table/Table.tsx

@@ -11,7 +11,7 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import cn from 'classnames';
-import { RefObject, useCallback, useEffect, useMemo } from 'react';
+import { RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { useLocale } from '@snack-uikit/locale';
 import { Scroll } from '@snack-uikit/scroll';
@@ -76,7 +76,7 @@ export function Table<TData extends object>({
   scrollRef,
   scrollContainerRef,
   getRowId,
-
+  enableFuzzySearch,
   ...rest
 }: TableProps<TData>) {
   const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl<string>(search, '');
@@ -99,6 +99,12 @@ export function Table<TData extends object>({
   );
   const enableSelection = Boolean(rowSelectionProp?.enable);
 
+  useEffect(() => {
+    if (pagination.pageIndex >= data.length / pagination.pageSize) {
+      onPaginationChange({ ...pagination, pageIndex: 0 });
+    }
+  }, [data.length, onPaginationChange, pagination]);
+
   const tableColumns: ColumnDefinition<TData>[] = useMemo(() => {
     let cols: ColumnDefinition<TData>[] = columnDefinitions;
     if (enableSelection) {
@@ -139,7 +145,7 @@ export function Table<TData extends object>({
     manualPagination,
     manualFiltering,
 
-    globalFilterFn: fuzzyFilter,
+    globalFilterFn: enableFuzzySearch ? fuzzyFilter : undefined,
     onGlobalFilterChange,
 
     getRowId,
@@ -154,9 +160,9 @@ export function Table<TData extends object>({
     onSortingChange,
     getSortedRowModel: getSortedRowModel(),
     onPaginationChange,
+    autoResetPageIndex: false,
     getPaginationRowModel: getPaginationRowModel(),
     getCoreRowModel: getCoreRowModel(),
-
     columnResizeMode: 'onEnd',
   });
 
@@ -189,18 +195,37 @@ export function Table<TData extends object>({
     }
   }, [loading, rowSelectionProp?.multiRow, table]);
 
-  useEffect(() => {}, []);
+  const columnSizeVarsRef = useRef<Record<string, string>>();
 
   const columnSizeVars = useMemo(() => {
+    const sizeKey = (id: string) => `--table-column-${id}-size`;
+    const flexKey = (id: string) => `--table-column-${id}-flex`;
+
+    const getCurrentlyConfiguredHeaderWidth = (id: string) => {
+      const cell = document.querySelector<HTMLDivElement>(`[data-header-id="${id}"]`);
+      const resizeHandler = cell?.querySelector<HTMLDivElement>(
+        '[data-test-id="table__header-cell-resize-handle-moving-part"]',
+      );
+
+      if (cell && resizeHandler) {
+        const { width } = cell.getBoundingClientRect();
+        const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
+        return width + offset;
+      }
+
+      return 0;
+    };
+
     const originalColumnDefs = table._getColumnDefs();
     const headers = table.getFlatHeaders();
-    const colSizes: { [key: string]: string } = {};
+    const colSizes: Record<string, string> = {};
 
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
       const originalColDef = originalColumnDefs.find(col => getColumnId(header) === col.id);
       const originalColumnDefSize = originalColDef?.size;
       const initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
+      const prevSize = columnSizeVarsRef.current?.[sizeKey(header.id)];
 
       let size = initSize;
 
@@ -209,10 +234,17 @@ export function Table<TData extends object>({
         const colDefSize = header.column.columnDef.size;
 
         size = currentSize === colDefSize ? initSize : `${currentSize}px`;
+
+        if (prevSize === '100%' && currentSize !== colDefSize) {
+          const realSize = getCurrentlyConfiguredHeaderWidth(header.id);
+          table.setColumnSizing(old => ({ ...old, [header.id]: realSize }));
+
+          size = `${realSize}px`;
+        }
       }
 
-      colSizes[`--table-column-${header.id}-size`] = size;
-      colSizes[`--table-column-${header.id}-flex`] = size === '100%' ? 'unset' : '0';
+      colSizes[sizeKey(header.id)] = size;
+      colSizes[flexKey(header.id)] = size === '100%' ? 'unset' : '0';
     }
 
     return colSizes;
@@ -221,6 +253,10 @@ export function Table<TData extends object>({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [table.getState().columnSizingInfo.isResizingColumn]);
 
+  useEffect(() => {
+    columnSizeVarsRef.current = columnSizeVars;
+  }, [columnSizeVars]);
+
   const tableRows = table.getRowModel().rows;
   const loadingTableRows = loadingTable.getRowModel().rows;
   const tablePagination = table.getState().pagination;

package/src/components/types.ts

@@ -52,6 +52,9 @@ export type TableProps<TData extends object> = WithSupportProps<{
     onChange?(value: string): void;
   };
 
+  /** Включить нечеткий поиск  */
+  enableFuzzySearch?: boolean;
+
   /** Максимальное кол-во строк на страницу @default 10 */
   pageSize?: number;
 

package/src/constants.ts

@@ -19,7 +19,7 @@ export const TEST_IDS = {
   rowActions: {
     droplistTrigger: 'table__body-row__droplistTrigger',
     droplist: 'table__body-row__actions-droplist',
-    option: 'table__body-row__action-option',
+    option: 'list__base-item-option',
   },
   statusIndicator: 'table__status-indicator',
   statusLabel: 'table__status-label',

package/src/helperComponents/Cells/HeaderCell/HeaderCell.tsx

@@ -46,6 +46,7 @@ export function HeaderCell<TData>({ header, className }: HeaderCellProps<TData>)
       data-no-padding={columnDef.noHeaderCellPadding || undefined}
       data-no-offset={columnDef.noHeaderCellBorderOffset || undefined}
       data-test-id={TEST_IDS.headerCell}
+      data-header-id={header.id}
       data-resizing={isResizing || undefined}
       role='columnheader'
       className={cn(styles.tableHeaderCell, className, columnDef.headerClassName)}

package/src/helperComponents/Cells/HeaderCell/ResizeHandle.tsx

@@ -1,6 +1,6 @@
 import { Header } from '@tanstack/react-table';
 import cn from 'classnames';
-import { RefObject } from 'react';
+import { MouseEventHandler, RefObject } from 'react';
 
 import styles from './styles.module.scss';
 
@@ -37,24 +37,34 @@ function getResizeIndicatorOffset<TData>({ header, cellRef }: ResizeHandleProps<
 export function ResizeHandle<TData>({ header, cellRef }: ResizeHandleProps<TData>) {
   const isResizing = header.column.getIsResizing();
   const resizeHandler = header.getResizeHandler();
+  const handleMouseDown: MouseEventHandler = event => {
+    if (event.detail === 2) {
+      header.column.resetSize();
+      return;
+    }
+
+    resizeHandler(event);
+  };
 
   const offset = isResizing ? getResizeIndicatorOffset({ header, cellRef }) : 0;
 
   return (
     <>
-      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
       <div
+        role='button'
+        tabIndex={0}
         className={cn(styles.tableHeaderIcon, styles.tableHeaderResizeHandle)}
         data-resizing={isResizing || undefined}
-        onMouseDown={resizeHandler}
+        onMouseDown={handleMouseDown}
         onTouchStart={resizeHandler}
       />
 
       {isResizing && (
         <div
+          data-test-id='table__header-cell-resize-handle-moving-part'
           className={styles.tableHeaderResizeIndicator}
           style={{
-            transform: `translateX(${offset}px)`,
+            '--offset': `${offset}px`,
           }}
         />
       )}

package/src/helperComponents/Cells/HeaderCell/styles.module.scss

@@ -133,6 +133,7 @@
   z-index: 2;
   top: 0;
   right: 0;
+  transform: translateX(var(--offset));
 
   width: 1px;
   height: 100%;

package/src/helperComponents/Cells/RowActionsCell/RowActionsCell.tsx

@@ -1,42 +1,36 @@
 import { CellContext, Row } from '@tanstack/react-table';
-import { MouseEvent, ReactElement, useMemo, useRef } from 'react';
+import { MouseEvent, MouseEventHandler, useCallback, useMemo } from 'react';
 
 import { ButtonFunction } from '@snack-uikit/button';
 import { MoreSVG } from '@snack-uikit/icons';
-import { BaseItemProps, Droplist } from '@snack-uikit/list';
-import { Tag } from '@snack-uikit/tag';
+import { Droplist, DroplistProps, isBaseItemProps, ItemProps } from '@snack-uikit/list';
 
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../../constants';
 import { ColumnDefinition } from '../../../types';
 import { useRowContext } from '../../contexts';
 import styles from './styles.module.scss';
 
-export type RowActionInfo<TData> = {
-  rowId: string;
-  data: TData;
-  itemId?: string;
-};
-
-export type RowActionProps<TData> = Pick<BaseItemProps, 'content' | 'disabled' | 'data-test-id'> & {
-  icon?: ReactElement;
-  tagLabel?: string;
-  id?: string;
-  hidden?: boolean;
-  onClick(row: RowActionInfo<TData>, e: MouseEvent<HTMLElement>): void;
-};
-
 type RowActionsCellProps<TData> = {
-  actions: RowActionProps<TData>[];
+  actions: DroplistProps['items'];
   row: Row<TData>;
 };
 
 function RowActionsCell<TData>({ row, actions }: RowActionsCellProps<TData>) {
-  const { droplistOpened, setDroplistOpen } = useRowContext();
-  const triggerRef = useRef(null);
+  const { dropListOpened, setDropListOpen } = useRowContext();
 
-  const handleItemClick = (item: RowActionProps<TData>) => (e: MouseEvent<HTMLElement>) => {
-    item.onClick({ rowId: row.id, itemId: item.id, data: row.original }, e);
-  };
+  const patchItem = useCallback((item: ItemProps, cb: MouseEventHandler): ItemProps => {
+    if (isBaseItemProps(item)) {
+      return {
+        ...item,
+        onClick(e) {
+          item.onClick?.(e);
+          cb(e);
+        },
+      };
+    }
+
+    return { ...item, items: item.items.map(i => patchItem(i, cb)) };
+  }, []);
 
   const disabled = !row.getCanSelect();
 
@@ -44,49 +38,32 @@ function RowActionsCell<TData>({ row, actions }: RowActionsCellProps<TData>) {
     e.stopPropagation();
   };
 
-  const visibleActions: RowActionProps<TData>[] = useMemo(() => actions.filter(item => !item?.hidden), [actions]);
+  const patchedItems = useMemo(
+    () => actions.map(item => patchItem(item, () => setDropListOpen(false))),
+    [actions, patchItem, setDropListOpen],
+  );
 
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    <div onClick={stopPropagationClick} className={styles.rowActionsCellWrap} data-open={droplistOpened || undefined}>
-      {!disabled && Boolean(visibleActions.length) && (
+    <div onClick={stopPropagationClick} className={styles.rowActionsCellWrap} data-open={dropListOpened || undefined}>
+      {!disabled && Boolean(actions.length) && (
         <Droplist
           trigger='clickAndFocusVisible'
-          open={droplistOpened}
-          onOpenChange={setDroplistOpen}
+          open={dropListOpened}
+          onOpenChange={setDropListOpen}
           placement='bottom-end'
           size='m'
           data-test-id={TEST_IDS.rowActions.droplist}
-          triggerElemRef={triggerRef}
-          items={actions
-            .filter(item => !item?.hidden)
-            .map(item => ({
-              id: item.id,
-              onClick: e => {
-                handleItemClick(item)(e);
-                setDroplistOpen(false);
-              },
-              disabled: item.disabled,
-              content: item.content,
-              beforeContent: item.icon,
-              afterContent: item.tagLabel ? <Tag label={item.tagLabel} /> : undefined,
-              'data-test-id': item['data-test-id'] || TEST_IDS.rowActions.option,
-            }))}
+          items={patchedItems}
         >
-          <span className={styles.rowActionsCellTrigger}>
-            <ButtonFunction
-              icon={<MoreSVG size={24} />}
-              data-test-id={TEST_IDS.rowActions.droplistTrigger}
-              ref={triggerRef}
-            />
-          </span>
+          <ButtonFunction icon={<MoreSVG size={24} />} data-test-id={TEST_IDS.rowActions.droplistTrigger} />
         </Droplist>
       )}
     </div>
   );
 }
 
-export type ActionsGenerator<TData> = (cell: CellContext<TData, unknown>) => RowActionProps<TData>[];
+export type ActionsGenerator<TData> = (cell: CellContext<TData, unknown>) => DroplistProps['items'];
 
 export type RowActionsColumnDefProps<TData> = {
   /** Действия для строки */

package/src/helperComponents/Cells/RowActionsCell/styles.module.scss

@@ -24,24 +24,15 @@
 }
 
 .rowActionsCellWrap {
+  --offset: 0px;
+  cursor: pointer;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-}
-
-.rowActionsCellTrigger {
-  --offset: 0px;
 
   @include composite-var($table-cells-action);
-  
-
-  cursor: pointer;
 
   display: flex;
   align-items: center;
   justify-content: center;
-
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
 }

package/src/helperComponents/Rows/BodyRow.tsx

@@ -26,7 +26,7 @@ type BodyRowProps<TData> = {
 export function BodyRow<TData>({ row, onRowClick }: BodyRowProps<TData>) {
   const { pinnedLeft, pinnedRight, unpinned } = useRowCells(row);
 
-  const [droplistOpened, setDroplistOpen] = useState(false);
+  const [dropListOpened, setDropListOpen] = useState(false);
 
   const disabled = !row.getCanSelect();
 
@@ -42,13 +42,13 @@ export function BodyRow<TData>({ row, onRowClick }: BodyRowProps<TData>) {
   };
 
   return (
-    <RowContext.Provider value={{ droplistOpened, setDroplistOpen }}>
+    <RowContext.Provider value={{ dropListOpened, setDropListOpen }}>
       <Row
         onClick={handleRowClick}
         data-clickable={Boolean(onRowClick) || undefined}
         data-disabled={disabled || undefined}
         data-selected={row.getIsSelected() || undefined}
-        data-actions-opened={droplistOpened || undefined}
+        data-actions-opened={dropListOpened || undefined}
         data-test-id={TEST_IDS.bodyRow}
         data-row-id={row.id}
         className={styles.bodyRow}

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

@@ -61,6 +61,7 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
 
   &[data-position='right'] {
     right: 0;
+    margin-left: auto;
 
     &::after {
       left: 0;

package/src/helperComponents/contexts.ts

@@ -2,13 +2,13 @@ import { Table } from '@tanstack/react-table';
 import { createContext, Dispatch, SetStateAction, useContext } from 'react';
 
 type RowContext = {
-  droplistOpened: boolean;
-  setDroplistOpen: Dispatch<SetStateAction<boolean>>;
+  dropListOpened: boolean;
+  setDropListOpen: Dispatch<SetStateAction<boolean>>;
 };
 
 export const RowContext = createContext<RowContext>({
-  droplistOpened: false,
-  setDroplistOpen() {},
+  dropListOpened: false,
+  setDropListOpen() {},
 });
 
 export const useRowContext = () => useContext(RowContext);

package/src/types.ts

@@ -64,8 +64,6 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
 export type ColumnDefinition<TData> = NormalColumnDefinition<TData> | PinnedColumnDefinition<TData>;
 
 export type {
-  RowActionInfo,
-  RowActionProps,
   RowActionsColumnDefProps,
   StatusColumnDefinitionProps,
   RowInfo,