@snack-uikit/table 0.16.8-preview-fa3ea861.0 → 0.16.8

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.16.8 (2024-05-08)
+
+### Only dependencies have been changed
+* [@snack-uikit/chips@0.13.4](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/chips/CHANGELOG.md)
+* [@snack-uikit/icons@0.21.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icons/CHANGELOG.md)
+* [@snack-uikit/info-block@0.3.5](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/info-block/CHANGELOG.md)
+* [@snack-uikit/list@0.11.5](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+* [@snack-uikit/pagination@0.6.8](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/pagination/CHANGELOG.md)
+* [@snack-uikit/tag@0.9.2](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/tag/CHANGELOG.md)
+* [@snack-uikit/toggles@0.9.9](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toggles/CHANGELOG.md)
+* [@snack-uikit/toolbar@0.7.33](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toolbar/CHANGELOG.md)
+* [@snack-uikit/truncate-string@0.4.14](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/truncate-string/CHANGELOG.md)
+
+
+
+
+
 ## 0.16.7 (2024-04-27)
 
 ### Only dependencies have been changed

package/README.md

@@ -114,7 +114,6 @@ 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` | - | Кол-во страниц (используется для внешнего управления) |
@@ -170,7 +169,6 @@ 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, enableFuzzySearch, ...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, ...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, useRef } from 'react';
+import { useCallback, useEffect, useMemo } 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, 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"]);
+    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"]);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
     const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
     const defaultPaginationState = useMemo(() => ({
@@ -37,11 +37,6 @@ 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) {
@@ -80,7 +75,7 @@ export function Table(_a) {
         manualSorting,
         manualPagination,
         manualFiltering,
-        globalFilterFn: enableFuzzySearch ? fuzzyFilter : undefined,
+        globalFilterFn: fuzzyFilter,
         onGlobalFilterChange,
         getRowId,
         onRowSelectionChange,
@@ -94,7 +89,6 @@ export function Table(_a) {
         onSortingChange,
         getSortedRowModel: getSortedRowModel(),
         onPaginationChange,
-        autoResetPageIndex: false,
         getPaginationRowModel: getPaginationRowModel(),
         getCoreRowModel: getCoreRowModel(),
         columnResizeMode: 'onEnd',
@@ -122,62 +116,30 @@ export function Table(_a) {
             return;
         }
     }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table]);
-    const columnSizeVarsRef = useRef();
-    const headers = table.getFlatHeaders();
-    const columnSizesSnapshot = table
-        .getAllColumns()
-        .map(column => column.getSize())
-        .join('_');
+    useEffect(() => { }, []);
     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 = {};
         for (let i = 0; i < headers.length; i++) {
             const header = headers[i];
             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[sizeKey(header.id)] = size;
-            colSizes[flexKey(header.id)] = size === '100%' ? 'unset' : '0';
+            colSizes[`--table-column-${header.id}-size`] = size;
+            colSizes[`--table-column-${header.id}-flex`] = size === '100%' ? 'unset' : '0';
         }
         return colSizes;
-        /*
-          effect must be called only on columnSizingInfo.isResizingColumn changes
-          to reduce unnecessary recalculations
-    
-          headers ids can also change, so they also should present here
-    
-          columnSizesSnapshot will trigger re-render after double-click size reset
-        */
+        /* 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, headers, columnSizesSnapshot]);
-    useEffect(() => {
-        columnSizeVarsRef.current = columnSizeVars;
-    }, [columnSizeVars]);
+    }, [table.getState().columnSizingInfo.isResizingColumn]);
     const tableRows = table.getRowModel().rows;
     const loadingTableRows = loadingTable.getRowModel().rows;
     const tablePagination = table.getState().pagination;

package/dist/components/types.d.ts

@@ -48,8 +48,6 @@ 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: 'list__base-item-option',
+        option: 'table__body-row__action-option',
     },
     statusIndicator: 'table__status-indicator',
     statusLabel: 'table__status-label',

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

@@ -10,9 +10,6 @@
 .copyCell .copyButton{
   display:none;
 }
-.copyCell:hover{
-  margin-right:calc(0px - (var(--dimension-4m, 32px) + var(--dimension-050m, 4px)));
-}
 .copyCell:hover .copyButton{
   display:inline-flex;
 }

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-align": columnDef.headerAlign || undefined, "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 })] }));
+    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 })] }));
 }

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

@@ -22,15 +22,8 @@ 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", { 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`,
+    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)`,
                 } }))] }));
 }

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

@@ -69,9 +69,6 @@
      -moz-user-select:none;
           user-select:none;
 }
-.tableHeaderCell[data-align=right]{
-  justify-content:flex-end;
-}
 
 .tableHeaderCellMain{
   overflow:auto;
@@ -106,7 +103,6 @@
   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,7 +1,20 @@
 import { CellContext } from '@tanstack/react-table';
-import { DroplistProps } from '@snack-uikit/list';
+import { MouseEvent, ReactElement } from 'react';
+import { BaseItemProps } from '@snack-uikit/list';
 import { ColumnDefinition } from '../../../types';
-export type ActionsGenerator<TData> = (cell: CellContext<TData, unknown>) => DroplistProps['items'];
+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 RowActionsColumnDefProps<TData> = {
     /** Действия для строки */
     actionsGenerator: ActionsGenerator<TData>;

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

@@ -1,31 +1,39 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
 import { MoreSVG } from '@snack-uikit/icons';
-import { Droplist, isBaseItemProps } from '@snack-uikit/list';
+import { Droplist } from '@snack-uikit/list';
+import { Tag } from '@snack-uikit/tag';
 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 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 { droplistOpened, setDroplistOpen } = useRowContext();
+    const triggerRef = useRef(null);
+    const handleItemClick = (item) => (e) => {
+        item.onClick({ rowId: row.id, itemId: item.id, data: row.original }, e);
+    };
     const disabled = !row.getCanSelect();
     const stopPropagationClick = (e) => {
         e.stopPropagation();
     };
-    const patchedItems = useMemo(() => actions.map(item => patchItem(item, () => setDropListOpen(false))), [actions, patchItem, setDropListOpen]);
+    const visibleActions = useMemo(() => actions.filter(item => !(item === null || item === void 0 ? void 0 : item.hidden)), [actions]);
     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(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 }) })) }));
+    _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 }) }) })) }));
 }
 /** Вспомогательная функция для создания ячейки с дополнительными действиями у строки */
 export function getRowActionsColumnDef({ actionsGenerator, pinned, }) {

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

@@ -16,14 +16,20 @@
 }
 
 .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,7 +38,6 @@
 }
 .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

@@ -9,8 +9,6 @@ type ColumnPinPosition = ValueOf<typeof COLUMN_PIN_POSITION>;
 type BaseColumnDefinition<TData> = Except<ColumnDef<TData>, 'footer' | 'enablePinning' | 'enableGrouping' | 'enableColumnFilter' | 'filterFn' | 'enableGlobalFilter' | 'enableMultiSort' | 'enableHiding'> & {
     /** Заголовок колонки */
     header?: string | ((ctx: HeaderContext<TData, unknown>) => string);
-    /** Позиционирование заголовка колонки */
-    headerAlign?: ColumnAlign;
     /** Позиционирование контента ячейки в теле таблицы */
     align?: ColumnAlign;
     /** Отключить паддинг у ячейки в теле таблицы */
@@ -39,5 +37,5 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
     size: number;
 };
 export type ColumnDefinition<TData> = NormalColumnDefinition<TData> | PinnedColumnDefinition<TData>;
-export type { RowActionsColumnDefProps, StatusColumnDefinitionProps, RowInfo, RowClickHandler, ActionsGenerator, CopyCellProps, MapStatusToAppearanceFnType, } from './helperComponents';
+export type { RowActionInfo, RowActionProps, 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.8-preview-fa3ea861.0",
+  "version": "0.16.8",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,17 +33,18 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.17.1",
-    "@snack-uikit/chips": "0.13.4-preview-fa3ea861.0",
+    "@snack-uikit/chips": "0.13.4",
     "@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.5-preview-fa3ea861.0",
-    "@snack-uikit/pagination": "0.6.7",
+    "@snack-uikit/icons": "0.21.0",
+    "@snack-uikit/info-block": "0.3.5",
+    "@snack-uikit/list": "0.11.5",
+    "@snack-uikit/pagination": "0.6.8",
     "@snack-uikit/scroll": "0.5.3",
     "@snack-uikit/skeleton": "0.3.4",
-    "@snack-uikit/toggles": "0.9.8",
-    "@snack-uikit/toolbar": "0.7.33-preview-fa3ea861.0",
-    "@snack-uikit/truncate-string": "0.4.13",
+    "@snack-uikit/tag": "0.9.2",
+    "@snack-uikit/toggles": "0.9.9",
+    "@snack-uikit/toolbar": "0.7.33",
+    "@snack-uikit/truncate-string": "0.4.14",
     "@snack-uikit/typography": "0.6.2",
     "@snack-uikit/utils": "3.3.0",
     "@tanstack/match-sorter-utils": "8.11.8",
@@ -57,5 +58,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "f43a4ee983d921d1e1c8bdccd05a950d278c43ed"
+  "gitHead": "59bd2ac46a341357d543ada864a34e09745b3e42"
 }

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, useRef } from 'react';
+import { RefObject, useCallback, useEffect, useMemo } 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,12 +99,6 @@ 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) {
@@ -112,7 +106,6 @@ export function Table<TData extends object>({
     }
     return cols;
   }, [columnDefinitions, enableSelection]);
-
   const columnPinning = useMemo(() => {
     const pinningState: Required<ColumnPinningState> = { left: [], right: [] };
     for (const col of tableColumns) {
@@ -146,7 +139,7 @@ export function Table<TData extends object>({
     manualPagination,
     manualFiltering,
 
-    globalFilterFn: enableFuzzySearch ? fuzzyFilter : undefined,
+    globalFilterFn: fuzzyFilter,
     onGlobalFilterChange,
 
     getRowId,
@@ -161,9 +154,9 @@ export function Table<TData extends object>({
     onSortingChange,
     getSortedRowModel: getSortedRowModel(),
     onPaginationChange,
-    autoResetPageIndex: false,
     getPaginationRowModel: getPaginationRowModel(),
     getCoreRowModel: getCoreRowModel(),
+
     columnResizeMode: 'onEnd',
   });
 
@@ -196,41 +189,18 @@ export function Table<TData extends object>({
     }
   }, [loading, rowSelectionProp?.multiRow, table]);
 
-  const columnSizeVarsRef = useRef<Record<string, string>>();
-  const headers = table.getFlatHeaders();
-  const columnSizesSnapshot = table
-    .getAllColumns()
-    .map(column => column.getSize())
-    .join('_');
+  useEffect(() => {}, []);
 
   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 colSizes: Record<string, string> = {};
+    const headers = table.getFlatHeaders();
+    const colSizes: { [key: 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;
 
@@ -239,34 +209,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[sizeKey(header.id)] = size;
-      colSizes[flexKey(header.id)] = size === '100%' ? 'unset' : '0';
+      colSizes[`--table-column-${header.id}-size`] = size;
+      colSizes[`--table-column-${header.id}-flex`] = size === '100%' ? 'unset' : '0';
     }
 
     return colSizes;
-    /*
-      effect must be called only on columnSizingInfo.isResizingColumn changes
-      to reduce unnecessary recalculations
-
-      headers ids can also change, so they also should present here
-
-      columnSizesSnapshot will trigger re-render after double-click size reset
-    */
+    /* 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, headers, columnSizesSnapshot]);
-
-  useEffect(() => {
-    columnSizeVarsRef.current = columnSizeVars;
-  }, [columnSizeVars]);
+  }, [table.getState().columnSizingInfo.isResizingColumn]);
 
   const tableRows = table.getRowModel().rows;
   const loadingTableRows = loadingTable.getRowModel().rows;

package/src/components/types.ts

@@ -52,9 +52,6 @@ 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: 'list__base-item-option',
+    option: 'table__body-row__action-option',
   },
   statusIndicator: 'table__status-indicator',
   statusLabel: 'table__status-label',

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

@@ -10,14 +10,11 @@
   width: 100%;
   min-width: 0;
   max-width: 100%;
-
   .copyButton {
     display: none;
   }
 
   &:hover {
-    margin-right: calc(0px - calc($dimension-4m + $dimension-050m));
-
     .copyButton {
       display: inline-flex;
     }

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

@@ -46,8 +46,6 @@ 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-align={columnDef.headerAlign || undefined}
-      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 { MouseEventHandler, RefObject } from 'react';
+import { RefObject } from 'react';
 
 import styles from './styles.module.scss';
 
@@ -37,34 +37,24 @@ 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={handleMouseDown}
+        onMouseDown={resizeHandler}
         onTouchStart={resizeHandler}
       />
 
       {isResizing && (
         <div
-          data-test-id='table__header-cell-resize-handle-moving-part'
           className={styles.tableHeaderResizeIndicator}
           style={{
-            '--offset': `${offset}px`,
+            transform: `translateX(${offset}px)`,
           }}
         />
       )}

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

@@ -92,10 +92,6 @@
   &[data-resizing] {
     user-select: none;
   }
-
-  &[data-align='right'] {
-    justify-content: flex-end;
-  }
 }
 
 .tableHeaderCellMain {
@@ -137,7 +133,6 @@
   z-index: 2;
   top: 0;
   right: 0;
-  transform: translateX(var(--offset));
 
   width: 1px;
   height: 100%;

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

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

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

@@ -24,15 +24,24 @@
 }
 
 .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,7 +61,6 @@ $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

@@ -33,8 +33,6 @@ type BaseColumnDefinition<TData> = Except<
 > & {
   /** Заголовок колонки */
   header?: string | ((ctx: HeaderContext<TData, unknown>) => string);
-  /** Позиционирование заголовка колонки */
-  headerAlign?: ColumnAlign;
   /** Позиционирование контента ячейки в теле таблицы */
   align?: ColumnAlign;
   /** Отключить паддинг у ячейки в теле таблицы */
@@ -66,6 +64,8 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
 export type ColumnDefinition<TData> = NormalColumnDefinition<TData> | PinnedColumnDefinition<TData>;
 
 export type {
+  RowActionInfo,
+  RowActionProps,
   RowActionsColumnDefProps,
   StatusColumnDefinitionProps,
   RowInfo,