@snack-uikit/table 0.26.7 → 0.27.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.27.0 (2025-01-23)
+
+
+### BREAKING CHANGES
+
+
+* **PDS-926:** add bulkActions prop, remove onDelete and toolbarBefore props ([e9e9afd](https://github.com/cloud-ru-tech/snack-uikit/commit/e9e9afdd0e69ed505bee6157151879fe01bcaf57))
+
+
+
+
 ## 0.26.7 (2025-01-22)
 
 ### Only dependencies have been changed

package/README.md

@@ -127,19 +127,18 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | className | `string` | - | CSS-класс |
 | loading | `boolean` | - | Состояние загрузки |
 | onRefresh | `() => void` | - | Колбек обновления данных |
-| onDelete | `(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void) => void` | - | Колбек удаления выбранных |
 | outline | `boolean` | - | Внешний бордер для тулбара и таблицы |
 | columnFilters | `ReactNode` | - | Фильтры |
 | dataFiltered | `boolean` | - |  |
 | dataError | `boolean` | - |  |
-| exportSettings | `{ fileName: string; filterData?: boolean; exportToCSV?(args: ExportProps<TData>): void; exportToXLSX?(args: ExportProps<TData>): void; }` | - | Настройки экспорта в тулбаре |
-| moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
 | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
 | noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
 | errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
 | suppressToolbar | `boolean` | - | Отключение тулбара |
-| toolbarBefore | `ReactNode` | - | Дополнительный слот в `Toolbar` перед строкой поиска |
+| bulkActions | `BulkAction[]` | - | Список действия для массовых операций |
+| moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
 | toolbarAfter | `ReactNode` | - | Дополнительный слот в `Toolbar` после строки поиска |
+| exportSettings | `{ fileName: string; filterData?: boolean; exportToCSV?(args: ExportProps<TData>): void; exportToXLSX?(args: ExportProps<TData>): void; }` | - | Настройки экспорта в тулбаре |
 | suppressPagination | `boolean` | - | Отключение пагинации |
 | manualSorting | `boolean` | - |  |
 | manualPagination | `boolean` | - |  |
@@ -188,19 +187,18 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | className | `string` | - | CSS-класс |
 | loading | `boolean` | - | Состояние загрузки |
 | onRefresh | `() => void` | - | Колбек обновления данных |
-| onDelete | `(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void) => void` | - | Колбек удаления выбранных |
 | outline | `boolean` | - | Внешний бордер для тулбара и таблицы |
 | columnFilters | `ReactNode` | - | Фильтры |
 | dataFiltered | `boolean` | - |  |
 | dataError | `boolean` | - |  |
-| exportSettings | `{ fileName: string; filterData?: boolean; exportToCSV?(args: ExportProps<TData>): void; exportToXLSX?(args: ExportProps<TData>): void; }` | - | Настройки экспорта в тулбаре |
-| moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
 | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
 | noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
 | errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
 | suppressToolbar | `boolean` | - | Отключение тулбара |
-| toolbarBefore | `ReactNode` | - | Дополнительный слот в `Toolbar` перед строкой поиска |
+| bulkActions | `BulkAction[]` | - | Список действия для массовых операций |
+| moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
 | toolbarAfter | `ReactNode` | - | Дополнительный слот в `Toolbar` после строки поиска |
+| exportSettings | `{ fileName: string; filterData?: boolean; exportToCSV?(args: ExportProps<TData>): void; exportToXLSX?(args: ExportProps<TData>): void; }` | - | Настройки экспорта в тулбаре |
 | suppressPagination | `boolean` | - | Отключение пагинации |
 | manualSorting | `boolean` | true |  |
 | manualPagination | `boolean` | true |  |

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

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

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

@@ -55,7 +55,6 @@ function Table(_a) {
       className,
       onRowClick,
       onRefresh,
-      onDelete,
       pageSize = constants_1.DEFAULT_PAGE_SIZE,
       pageCount,
       loading = false,
@@ -68,7 +67,6 @@ function Table(_a) {
       noResultsState,
       errorDataState,
       suppressToolbar = false,
-      toolbarBefore,
       toolbarAfter,
       suppressPagination = false,
       manualSorting = false,
@@ -80,9 +78,10 @@ function Table(_a) {
       getRowId,
       enableFuzzySearch,
       savedState,
-      expanding
+      expanding,
+      bulkActions: bulkActionsProp
     } = _a,
-    rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding"]);
+    rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions"]);
   const {
     state: globalFilter,
     onStateChange: onGlobalFilterChange
@@ -203,14 +202,12 @@ function Table(_a) {
     table.resetRowSelection();
     onRefresh === null || onRefresh === void 0 ? void 0 : onRefresh();
   }, [onRefresh, table]);
-  const handleOnDelete = (0, react_1.useCallback)(() => {
-    if (loading) {
-      return;
-    }
-    if (onDelete) {
-      onDelete(table.getState().rowSelection, table.resetRowSelection);
+  const bulkActions = (0, react_1.useMemo)(() => enableSelection ? bulkActionsProp === null || bulkActionsProp === void 0 ? void 0 : bulkActionsProp.map(action => Object.assign(Object.assign({}, action), {
+    onClick: () => {
+      var _a;
+      return (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, table.getState().rowSelection, table.resetRowSelection);
     }
-  }, [loading, onDelete, table]);
+  })) : undefined, [bulkActionsProp, enableSelection, table]);
   const handleOnCheck = (0, react_1.useCallback)(() => {
     if (!loading && !enableSelectPinned && table.getTopRows().length) {
       const centerRows = table.getCenterRows();
@@ -345,15 +342,14 @@ function Table(_a) {
             loading: search === null || search === void 0 ? void 0 : search.loading,
             placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || t('searchPlaceholder')
           },
-          checked: table.getIsAllPageRowsSelected(),
-          indeterminate: table.getIsSomePageRowsSelected(),
           className: styles_module_scss_1.default.toolbar,
           onRefresh: onRefresh ? handleOnRefresh : undefined,
-          onDelete: enableSelection && onDelete ? handleOnDelete : undefined,
+          bulkActions: bulkActions,
+          selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single',
+          checked: table.getIsAllPageRowsSelected(),
+          indeterminate: table.getIsSomePageRowsSelected(),
           onCheck: enableSelection ? handleOnCheck : undefined,
           outline: outline,
-          selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single',
-          before: toolbarBefore,
           after: toolbarAfter || exportSettings ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
             children: [toolbarAfter, exportSettings && (0, jsx_runtime_1.jsx)(helperComponents_1.ExportButton, {
               settings: exportSettings,

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

@@ -5,6 +5,9 @@ import { WithSupportProps } from '@snack-uikit/utils';
 import { EmptyStateProps, ExportButtonProps, RowClickHandler } from '../helperComponents';
 import { TreeColumnDefinitionProps } from '../helperComponents/Cells/TreeCell';
 import { ColumnDefinition } from '../types';
+type BulkAction = Omit<NonNullable<ToolbarProps['bulkActions']>[number], 'onClick'> & {
+    onClick?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
+};
 export type TableProps<TData extends object> = WithSupportProps<{
     /** Данные для отрисовки */
     data: TData[];
@@ -91,18 +94,12 @@ export type TableProps<TData extends object> = WithSupportProps<{
     loading?: boolean;
     /** Колбек обновления данных */
     onRefresh?(): void;
-    /** Колбек удаления выбранных */
-    onDelete?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
     /** Внешний бордер для тулбара и таблицы */
     outline?: boolean;
     /** Фильтры */
     columnFilters?: ReactNode;
     dataFiltered?: boolean;
     dataError?: boolean;
-    /** Настройки экспорта в тулбаре */
-    exportSettings?: ExportButtonProps<TData>['settings'];
-    /** Элементы выпадающего списка кнопки с действиями */
-    moreActions?: ToolbarProps['moreActions'];
     /** Экран при отстутствии данных */
     noDataState?: EmptyStateProps;
     /** Экран при отстутствии результатов поиска или фильтров */
@@ -111,10 +108,14 @@ export type TableProps<TData extends object> = WithSupportProps<{
     errorDataState?: EmptyStateProps;
     /** Отключение тулбара */
     suppressToolbar?: boolean;
-    /** Дополнительный слот в `Toolbar` перед строкой поиска */
-    toolbarBefore?: ReactNode;
+    /** Список действия для массовых операций */
+    bulkActions?: BulkAction[];
+    /** Элементы выпадающего списка кнопки с действиями */
+    moreActions?: ToolbarProps['moreActions'];
     /** Дополнительный слот в `Toolbar` после строки поиска */
     toolbarAfter?: ReactNode;
+    /** Настройки экспорта в тулбаре */
+    exportSettings?: ExportButtonProps<TData>['settings'];
     /** Отключение пагинации */
     suppressPagination?: boolean;
     manualSorting?: boolean;
@@ -179,3 +180,4 @@ export type ServerTableProps<TData extends object> = Omit<TableProps<TData>, 'pa
         optionsLabel?: string;
     };
 };
+export {};

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

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

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

@@ -32,7 +32,7 @@ import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSiz
 export function Table(_a) {
     var { data, rowPinning = {
         top: [],
-    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, toolbarBefore, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding"]);
+    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions"]);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
     const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
     const defaultPaginationState = useMemo(() => ({
@@ -132,14 +132,9 @@ export function Table(_a) {
         table.resetRowSelection();
         onRefresh === null || onRefresh === void 0 ? void 0 : onRefresh();
     }, [onRefresh, table]);
-    const handleOnDelete = useCallback(() => {
-        if (loading) {
-            return;
-        }
-        if (onDelete) {
-            onDelete(table.getState().rowSelection, table.resetRowSelection);
-        }
-    }, [loading, onDelete, table]);
+    const bulkActions = useMemo(() => enableSelection
+        ? bulkActionsProp === null || bulkActionsProp === void 0 ? void 0 : bulkActionsProp.map(action => (Object.assign(Object.assign({}, action), { onClick: () => { var _a; return (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, table.getState().rowSelection, table.resetRowSelection); } })))
+        : undefined, [bulkActionsProp, enableSelection, table]);
     const handleOnCheck = useCallback(() => {
         if (!loading && !enableSelectPinned && table.getTopRows().length) {
             const centerRows = table.getCenterRows();
@@ -247,7 +242,7 @@ export function Table(_a) {
                                 onChange: onGlobalFilterChange,
                                 loading: search === null || search === void 0 ? void 0 : search.loading,
                                 placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || t('searchPlaceholder'),
-                            }, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', before: toolbarBefore, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions }), columnFilters && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFilters, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })) }));
+                            }, className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions }), columnFilters && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFilters, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })) }));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

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

@@ -5,6 +5,9 @@ import { WithSupportProps } from '@snack-uikit/utils';
 import { EmptyStateProps, ExportButtonProps, RowClickHandler } from '../helperComponents';
 import { TreeColumnDefinitionProps } from '../helperComponents/Cells/TreeCell';
 import { ColumnDefinition } from '../types';
+type BulkAction = Omit<NonNullable<ToolbarProps['bulkActions']>[number], 'onClick'> & {
+    onClick?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
+};
 export type TableProps<TData extends object> = WithSupportProps<{
     /** Данные для отрисовки */
     data: TData[];
@@ -91,18 +94,12 @@ export type TableProps<TData extends object> = WithSupportProps<{
     loading?: boolean;
     /** Колбек обновления данных */
     onRefresh?(): void;
-    /** Колбек удаления выбранных */
-    onDelete?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
     /** Внешний бордер для тулбара и таблицы */
     outline?: boolean;
     /** Фильтры */
     columnFilters?: ReactNode;
     dataFiltered?: boolean;
     dataError?: boolean;
-    /** Настройки экспорта в тулбаре */
-    exportSettings?: ExportButtonProps<TData>['settings'];
-    /** Элементы выпадающего списка кнопки с действиями */
-    moreActions?: ToolbarProps['moreActions'];
     /** Экран при отстутствии данных */
     noDataState?: EmptyStateProps;
     /** Экран при отстутствии результатов поиска или фильтров */
@@ -111,10 +108,14 @@ export type TableProps<TData extends object> = WithSupportProps<{
     errorDataState?: EmptyStateProps;
     /** Отключение тулбара */
     suppressToolbar?: boolean;
-    /** Дополнительный слот в `Toolbar` перед строкой поиска */
-    toolbarBefore?: ReactNode;
+    /** Список действия для массовых операций */
+    bulkActions?: BulkAction[];
+    /** Элементы выпадающего списка кнопки с действиями */
+    moreActions?: ToolbarProps['moreActions'];
     /** Дополнительный слот в `Toolbar` после строки поиска */
     toolbarAfter?: ReactNode;
+    /** Настройки экспорта в тулбаре */
+    exportSettings?: ExportButtonProps<TData>['settings'];
     /** Отключение пагинации */
     suppressPagination?: boolean;
     manualSorting?: boolean;
@@ -179,3 +180,4 @@ export type ServerTableProps<TData extends object> = Omit<TableProps<TData>, 'pa
         optionsLabel?: string;
     };
 };
+export {};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.26.7",
+  "version": "0.27.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,20 +36,20 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.19.5",
-    "@snack-uikit/chips": "0.24.0",
-    "@snack-uikit/icon-predefined": "0.7.2",
-    "@snack-uikit/icons": "0.24.1",
-    "@snack-uikit/info-block": "0.6.8",
-    "@snack-uikit/list": "0.23.0",
-    "@snack-uikit/pagination": "0.10.0",
-    "@snack-uikit/scroll": "0.9.2",
-    "@snack-uikit/skeleton": "0.6.1",
-    "@snack-uikit/toggles": "0.13.4",
-    "@snack-uikit/toolbar": "0.9.18",
-    "@snack-uikit/truncate-string": "0.6.5",
-    "@snack-uikit/typography": "0.8.3",
-    "@snack-uikit/utils": "3.6.0",
+    "@snack-uikit/button": "0.19.6",
+    "@snack-uikit/chips": "0.24.1",
+    "@snack-uikit/icon-predefined": "0.7.3",
+    "@snack-uikit/icons": "0.24.2",
+    "@snack-uikit/info-block": "0.6.9",
+    "@snack-uikit/list": "0.23.1",
+    "@snack-uikit/pagination": "0.10.1",
+    "@snack-uikit/scroll": "0.9.3",
+    "@snack-uikit/skeleton": "0.6.2",
+    "@snack-uikit/toggles": "0.13.5",
+    "@snack-uikit/toolbar": "0.10.0",
+    "@snack-uikit/truncate-string": "0.6.6",
+    "@snack-uikit/typography": "0.8.4",
+    "@snack-uikit/utils": "3.7.0",
     "@tanstack/match-sorter-utils": "8.11.8",
     "@tanstack/react-table": "8.12.0",
     "classnames": "2.5.1",
@@ -61,5 +61,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "546ae486452e74e78f65fd9ce0044c13b058872c"
+  "gitHead": "3528e78aec23804dca44d311947c1dcd4ed3792b"
 }

package/src/components/Table/Table.tsx

@@ -18,7 +18,7 @@ import { RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useLocale } from '@snack-uikit/locale';
 import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider } from '@snack-uikit/skeleton';
-import { Toolbar } from '@snack-uikit/toolbar';
+import { Toolbar, ToolbarProps } from '@snack-uikit/toolbar';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
 
@@ -70,7 +70,6 @@ export function Table<TData extends object>({
   className,
   onRowClick,
   onRefresh,
-  onDelete,
   pageSize = DEFAULT_PAGE_SIZE,
   pageCount,
   loading = false,
@@ -83,7 +82,6 @@ export function Table<TData extends object>({
   noResultsState,
   errorDataState,
   suppressToolbar = false,
-  toolbarBefore,
   toolbarAfter,
   suppressPagination = false,
   manualSorting = false,
@@ -96,6 +94,7 @@ export function Table<TData extends object>({
   enableFuzzySearch,
   savedState,
   expanding,
+  bulkActions: bulkActionsProp,
   ...rest
 }: TableProps<TData>) {
   const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl<string>(search, '');
@@ -219,15 +218,16 @@ export function Table<TData extends object>({
     onRefresh?.();
   }, [onRefresh, table]);
 
-  const handleOnDelete = useCallback(() => {
-    if (loading) {
-      return;
-    }
-
-    if (onDelete) {
-      onDelete(table.getState().rowSelection, table.resetRowSelection);
-    }
-  }, [loading, onDelete, table]);
+  const bulkActions: ToolbarProps['bulkActions'] = useMemo(
+    () =>
+      enableSelection
+        ? bulkActionsProp?.map(action => ({
+            ...action,
+            onClick: () => action.onClick?.(table.getState().rowSelection, table.resetRowSelection),
+          }))
+        : undefined,
+    [bulkActionsProp, enableSelection, table],
+  );
 
   const handleOnCheck = useCallback(() => {
     if (!loading && !enableSelectPinned && table.getTopRows().length) {
@@ -371,15 +371,14 @@ export function Table<TData extends object>({
                 loading: search?.loading,
                 placeholder: search?.placeholder || t('searchPlaceholder'),
               }}
-              checked={table.getIsAllPageRowsSelected()}
-              indeterminate={table.getIsSomePageRowsSelected()}
               className={styles.toolbar}
               onRefresh={onRefresh ? handleOnRefresh : undefined}
-              onDelete={enableSelection && onDelete ? handleOnDelete : undefined}
+              bulkActions={bulkActions}
+              selectionMode={rowSelectionProp?.multiRow ? 'multiple' : 'single'}
+              checked={table.getIsAllPageRowsSelected()}
+              indeterminate={table.getIsSomePageRowsSelected()}
               onCheck={enableSelection ? handleOnCheck : undefined}
               outline={outline}
-              selectionMode={rowSelectionProp?.multiRow ? 'multiple' : 'single'}
-              before={toolbarBefore}
               after={
                 toolbarAfter || exportSettings ? (
                   <>

package/src/components/types.ts

@@ -15,6 +15,10 @@ import { EmptyStateProps, ExportButtonProps, RowClickHandler } from '../helperCo
 import { TreeColumnDefinitionProps } from '../helperComponents/Cells/TreeCell';
 import { ColumnDefinition } from '../types';
 
+type BulkAction = Omit<NonNullable<ToolbarProps['bulkActions']>[number], 'onClick'> & {
+  onClick?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
+};
+
 export type TableProps<TData extends object> = WithSupportProps<{
   /** Данные для отрисовки */
   data: TData[];
@@ -111,9 +115,6 @@ export type TableProps<TData extends object> = WithSupportProps<{
   /** Колбек обновления данных */
   onRefresh?(): void;
 
-  /** Колбек удаления выбранных */
-  onDelete?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
-
   /** Внешний бордер для тулбара и таблицы */
   outline?: boolean;
 
@@ -123,12 +124,6 @@ export type TableProps<TData extends object> = WithSupportProps<{
   dataFiltered?: boolean;
   dataError?: boolean;
 
-  /** Настройки экспорта в тулбаре */
-  exportSettings?: ExportButtonProps<TData>['settings'];
-
-  /** Элементы выпадающего списка кнопки с действиями */
-  moreActions?: ToolbarProps['moreActions'];
-
   /** Экран при отстутствии данных */
   noDataState?: EmptyStateProps;
   /** Экран при отстутствии результатов поиска или фильтров */
@@ -138,10 +133,14 @@ export type TableProps<TData extends object> = WithSupportProps<{
 
   /** Отключение тулбара */
   suppressToolbar?: boolean;
-  /** Дополнительный слот в `Toolbar` перед строкой поиска */
-  toolbarBefore?: ReactNode;
+  /** Список действия для массовых операций */
+  bulkActions?: BulkAction[];
+  /** Элементы выпадающего списка кнопки с действиями */
+  moreActions?: ToolbarProps['moreActions'];
   /** Дополнительный слот в `Toolbar` после строки поиска */
   toolbarAfter?: ReactNode;
+  /** Настройки экспорта в тулбаре */
+  exportSettings?: ExportButtonProps<TData>['settings'];
 
   /** Отключение пагинации */
   suppressPagination?: boolean;

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

@@ -79,7 +79,7 @@
     @include styles-tokens-table.composite-var(styles-tokens-table.$sans-body-m);
   }
   .line {
-    margin-left: calc(styles-tokens-table.$dimension-4m + styles-tokens-table.$dimension-025m);
+    margin-left: calc(#{styles-tokens-table.$dimension-4m} + #{styles-tokens-table.$dimension-025m});
   }
   .firstLine {
     margin-left: styles-tokens-table.$dimension-2m