@snack-uikit/table 0.16.8 → 0.17.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.17.0 (2024-05-08)
+
+
+### Bug Fixes
+
+* **PDS-135:** change column sizing when header changes ([985fee7](https://github.com/cloud-ru-tech/snack-uikit/commit/985fee74f695cfc7c19dba2a1c73202a83295bc8))
+* **PDS-135:** fix first resize of columns, add reset of column size on double-click ([3094130](https://github.com/cloud-ru-tech/snack-uikit/commit/309413044ddacafe077f16686469d73fa676ded5))
+* **PDS-135:** keep page number when data is updated ([76b0b74](https://github.com/cloud-ru-tech/snack-uikit/commit/76b0b7448f112575bb35b413ac3db54ab938f70e))
+* **PDS-135:** right-pinned column does not change its place when resizing ([60b96b4](https://github.com/cloud-ru-tech/snack-uikit/commit/60b96b4dd652d5bc106d1d9b5ed1cc5ec9925d67))
+* **PDS-190:** redundant scroll, click on resize handler ([e520169](https://github.com/cloud-ru-tech/snack-uikit/commit/e5201697109c0dbb4e09034401367026c312fe9a))
+* **PDS-197:** fix copyCell flex behaviour ([cb3c2a5](https://github.com/cloud-ru-tech/snack-uikit/commit/cb3c2a516431cd1877756c3e3cc2f8e42b47ce83))
+
+
+### Features
+
+* **PDS-135:** add enableFuzzySearch prop ([cf203f3](https://github.com/cloud-ru-tech/snack-uikit/commit/cf203f33f27bcd34927de0090c3b7f5a8046fdab))
+* **PDS-208:** add headerAlign prop ([066fb90](https://github.com/cloud-ru-tech/snack-uikit/commit/066fb90898ed542d1763f23556b30a494b63c2b9))
+
+
+### BREAKING CHANGES
+
+
+* **PDS-135:** add full api from list to actions ([aae4ed3](https://github.com/cloud-ru-tech/snack-uikit/commit/aae4ed341d2e397b079e810a9b38762d9a96d952))
+
+
+
+
 ## 0.16.8 (2024-05-08)
 
 ### Only dependencies have been changed

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';
@@ -22,12 +22,12 @@ import { extractSupportProps } from '@snack-uikit/utils';
 import { DEFAULT_PAGE_SIZE } from '../../constants';
 import { BodyRow, ExportButton, getColumnId, getRowActionsColumnDef, getSelectionCellColumnDef, getStatusColumnDef, HeaderRow, STATUS_APPEARANCE, TableContext, TableEmptyState, TablePagination, useEmptyState, } from '../../helperComponents';
 import { fuzzyFilter } from '../../utils';
-import { useLoadingTable } from './hooks';
-import { useStateControl } from './hooks/useStateControl';
+import { useLoadingTable, useStateControl } from './hooks';
 import styles from './styles.module.css';
+import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth } from './utils';
 /** Компонент таблицы */
 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,30 +122,47 @@ export function Table(_a) {
             return;
         }
     }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table]);
-    useEffect(() => { }, []);
+    const columnSizeVarsRef = useRef();
+    const headers = table.getFlatHeaders();
     const columnSizeVars = useMemo(() => {
+        var _a;
         const originalColumnDefs = table._getColumnDefs();
-        const headers = table.getFlatHeaders();
         const colSizes = {};
         for (let i = 0; i < headers.length; i++) {
             const header = headers[i];
+            const { sizeKey, flexKey } = getColumnStyleVars(header.id);
             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];
             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] = size;
+            colSizes[flexKey] = size === '100%' ? 'unset' : '0';
         }
         return colSizes;
-        /* effect must be called only on columnSizingInfo.isResizingColumn changes
-          to reduce unnecessary recalculations */
+        /*
+          effect must be called only on columnSizingInfo.isResizingColumn changes
+          to reduce unnecessary recalculations
+    
+          headers ids can also change, so they also should present here
+    
+          table.getTotalSize() will trigger re-render after double-click size reset
+        */
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [table.getState().columnSizingInfo.isResizingColumn]);
+    }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
+    useEffect(() => {
+        columnSizeVarsRef.current = columnSizeVars;
+    }, [columnSizeVars]);
     const tableRows = table.getRowModel().rows;
     const loadingTableRows = loadingTable.getRowModel().rows;
     const tablePagination = table.getState().pagination;

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

@@ -1 +1,2 @@
 export * from './useLoadingTable';
+export * from './useStateControl';

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

@@ -1 +1,2 @@
 export * from './useLoadingTable';
+export * from './useStateControl';

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

@@ -0,0 +1,5 @@
+export declare function getCurrentlyConfiguredHeaderWidth(id: string): number;
+export declare function getColumnStyleVars(id: string): {
+    sizeKey: string;
+    flexKey: string;
+};

package/dist/components/Table/utils.js

@@ -0,0 +1,16 @@
+export function 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;
+}
+export function getColumnStyleVars(id) {
+    return {
+        sizeKey: `--table-column-${id}-size`,
+        flexKey: `--table-column-${id}-flex`,
+    };
+}

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/CopyCell/styles.module.css

@@ -10,6 +10,9 @@
 .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.d.ts

@@ -1,7 +1,9 @@
 import { Header } from '@tanstack/react-table';
+import { ColumnPinPosition } from '../../../types';
 import { CellProps } from '../Cell';
 type HeaderCellProps<TData> = Omit<CellProps, 'align' | 'children' | 'onClick' | 'style'> & {
     header: Header<TData, unknown>;
+    pinPosition?: ColumnPinPosition;
 };
-export declare function HeaderCell<TData>({ header, className }: HeaderCellProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function HeaderCell<TData>({ header, pinPosition, className }: HeaderCellProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -9,7 +9,7 @@ import { Cell } from '../Cell';
 import { getSortingIcon } from './helpers';
 import { ResizeHandle } from './ResizeHandle';
 import styles from './styles.module.css';
-export function HeaderCell({ header, className }) {
+export function HeaderCell({ header, pinPosition, className }) {
     const cellRef = useRef(null);
     const isSortable = header.column.getCanSort();
     const isResizable = header.column.getCanResize();
@@ -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-align": columnDef.headerAlign || undefined, "data-header-id": header.id, "data-resizing": isResizing || undefined, "data-pin-position": pinPosition || 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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
+import { stopEventPropagation } from './helpers';
 import styles from './styles.module.css';
 function getResizeIndicatorOffset({ header, cellRef }) {
     var _a;
@@ -22,8 +23,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, onMouseUp: stopEventPropagation }), 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/helpers.d.ts

@@ -1,2 +1,4 @@
 import { SortDirection } from '@tanstack/react-table';
+import { MouseEventHandler } from 'react';
 export declare function getSortingIcon(sort?: SortDirection | false): import("react/jsx-runtime").JSX.Element | null;
+export declare const stopEventPropagation: MouseEventHandler;

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

@@ -10,3 +10,6 @@ export function getSortingIcon(sort) {
             return null;
     }
 }
+export const stopEventPropagation = e => {
+    e.stopPropagation();
+};

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

@@ -23,6 +23,27 @@
   opacity:0;
 }
 
+.tableHeaderResizeIndicator{
+  cursor:col-resize;
+  position:absolute;
+  z-index:2;
+  top:0;
+  right:0;
+  transform:translateX(var(--offset));
+  width:1px;
+  height:100%;
+  background-color:var(--sys-neutral-decor-activated, #bfc2cc);
+}
+.tableHeaderResizeIndicator::after{
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  transform:translateX(-50%);
+  width:calc(100% + var(--dimension-4m, 32px));
+  height:100%;
+}
+
 .tableHeaderCell{
   padding-left:var(--space-table-head-column-horizontal-padding, 8px);
   padding-right:var(--space-table-head-column-horizontal-padding, 8px);
@@ -69,6 +90,19 @@
      -moz-user-select:none;
           user-select:none;
 }
+.tableHeaderCell[data-align=right]{
+  justify-content:flex-end;
+}
+.tableHeaderCell[data-pin-position=right]:last-child{
+  overflow:hidden;
+}
+.tableHeaderCell[data-pin-position=right]:last-child .tableHeaderResizeHandle{
+  right:0;
+  transform:none;
+}
+.tableHeaderCell[data-pin-position=right]:last-child .tableHeaderResizeIndicator{
+  right:calc(var(--dimension-1m, 8px) / 2);
+}
 
 .tableHeaderCellMain{
   overflow:auto;
@@ -95,24 +129,4 @@
 .tableHeaderIcon svg{
   width:var(--size-icon-container-xs, 16px) !important;
   height:var(--size-icon-container-xs, 16px) !important;
-}
-
-.tableHeaderResizeIndicator{
-  cursor:col-resize;
-  position:absolute;
-  z-index:2;
-  top:0;
-  right:0;
-  width:1px;
-  height:100%;
-  background-color:var(--sys-neutral-decor-activated, #bfc2cc);
-}
-.tableHeaderResizeIndicator::after{
-  content:"";
-  position:absolute;
-  top:0;
-  left:0;
-  transform:translateX(-50%);
-  width:calc(100% + var(--dimension-4m, 32px));
-  height:100%;
 }

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/HeaderRow.js

@@ -7,5 +7,5 @@ import { Row } from './Row';
 import styles from './styles.module.css';
 export function HeaderRow() {
     const { leftPinned, unpinned, rightPinned } = useHeaderGroups();
-    return (_jsxs(Row, { className: styles.tableHeader, "data-test-id": TEST_IDS.headerRow, children: [leftPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : _jsx(HeaderCell, { header: header }, header.id))) })), unpinned.map(headerGroup => headerGroup.headers.map(header => _jsx(HeaderCell, { header: header }, header.id))), rightPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : _jsx(HeaderCell, { header: header }, header.id))) }))] }));
+    return (_jsxs(Row, { className: styles.tableHeader, "data-test-id": TEST_IDS.headerRow, children: [leftPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : _jsx(HeaderCell, { header: header }, header.id))) })), unpinned.map(headerGroup => headerGroup.headers.map(header => _jsx(HeaderCell, { header: header }, header.id))), rightPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : (_jsx(HeaderCell, { header: header, pinPosition: COLUMN_PIN_POSITION.Right }, header.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

@@ -9,6 +9,8 @@ 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;
     /** Отключить паддинг у ячейки в теле таблицы */
@@ -37,5 +39,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 { PaginationState, SortingState, RowSelectionState, RowSelectionOptions, EmptyStateProps, ToolbarProps, HeaderContext, CellContext, };
+export type { RowActionsColumnDefProps, StatusColumnDefinitionProps, RowInfo, RowClickHandler, ActionsGenerator, CopyCellProps, MapStatusToAppearanceFnType, } from './helperComponents';
+export type { ColumnPinPosition, PaginationState, SortingState, RowSelectionState, RowSelectionOptions, EmptyStateProps, ToolbarProps, HeaderContext, CellContext, };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.16.8",
+  "version": "0.17.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,17 +33,16 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.17.1",
-    "@snack-uikit/chips": "0.13.4",
+    "@snack-uikit/chips": "0.14.0",
     "@snack-uikit/icon-predefined": "0.5.1",
     "@snack-uikit/icons": "0.21.0",
     "@snack-uikit/info-block": "0.3.5",
-    "@snack-uikit/list": "0.11.5",
+    "@snack-uikit/list": "0.12.0",
     "@snack-uikit/pagination": "0.6.8",
     "@snack-uikit/scroll": "0.5.3",
     "@snack-uikit/skeleton": "0.3.4",
-    "@snack-uikit/tag": "0.9.2",
     "@snack-uikit/toggles": "0.9.9",
-    "@snack-uikit/toolbar": "0.7.33",
+    "@snack-uikit/toolbar": "0.7.34",
     "@snack-uikit/truncate-string": "0.4.14",
     "@snack-uikit/typography": "0.6.2",
     "@snack-uikit/utils": "3.3.0",
@@ -58,5 +57,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "59bd2ac46a341357d543ada864a34e09745b3e42"
+  "gitHead": "a308f550fb12d114a27d9b7d6804c212a316a09d"
 }