@cloud-ru/uikit-product-mobile-table 0.14.0 → 0.16.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.16.0 (2025-12-03)
+
+
+### Features
+
+* **FF-7473:** add disabled state and HideToggler support for row selection in mobile table ([f0f7517](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/f0f7517d45ef8f5580865951790238426b96fc16))
+
+
+
+
+
+# 0.15.0 (2025-12-03)
+
+
+### Features
+
+* **FF-7560:** add table sorting and column settings support to mobile table ([f6c47c0](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/f6c47c0bce3f47ad2098b21d9520d244f32f31a2))
+
+
+
+
+
 # 0.14.0 (2025-12-03)
 
 

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

@@ -1,12 +1,12 @@
 import { FiltersState, MobileChipChoiceRowProps } from '@cloud-ru/uikit-product-mobile-chips';
 import { WithSupportProps } from '@cloud-ru/uikit-product-utils';
 import { TableProps } from '@snack-uikit/table';
-export type MobileTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = Pick<TableProps<TData, TFilters>, 'data' | 'columnDefinitions' | 'suppressPagination' | 'suppressToolbar' | 'suppressSearch' | 'search' | 'onRefresh' | 'toolbarAfter' | 'moreActions' | 'className' | 'enableFuzzySearch' | 'loading' | 'dataError' | 'dataFiltered' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'sorting' | 'pagination' | 'pageCount' | 'manualFiltering' | 'manualPagination' | 'manualSorting' | 'getRowId' | 'rowSelection' | 'bulkActions'> & WithSupportProps<{
+export type MobileTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = Pick<TableProps<TData, TFilters>, 'data' | 'columnDefinitions' | 'suppressPagination' | 'suppressToolbar' | 'suppressSearch' | 'search' | 'onRefresh' | 'moreActions' | 'className' | 'enableFuzzySearch' | 'loading' | 'dataError' | 'dataFiltered' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'sorting' | 'pagination' | 'pageCount' | 'manualFiltering' | 'manualPagination' | 'manualSorting' | 'getRowId' | 'rowSelection' | 'bulkActions' | 'columnsSettings' | 'savedState' | 'autoResetPageIndex' | 'toolbarAfter'> & WithSupportProps<{
     headlineId?: string;
     headerBackground?: 'default' | '1-level' | '2-level';
     columnFilters?: MobileChipChoiceRowProps<FiltersState>;
 }>;
-export declare function MobileTable<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, columnDefinitions, headlineId, suppressPagination, suppressToolbar, suppressSearch, enableFuzzySearch, search, onRefresh, toolbarAfter, moreActions, columnFilters, className, headerBackground, noDataState, noResultsState, errorDataState, loading, dataError, dataFiltered, pagination: paginationProp, pageCount, sorting: sortingProp, manualSorting, manualPagination, manualFiltering, getRowId, rowSelection: rowSelectionProp, bulkActions: bulkActionsProp, ...rest }: MobileTableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
+export declare function MobileTable<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, columnDefinitions, headlineId, suppressPagination, suppressToolbar, suppressSearch, enableFuzzySearch, search, onRefresh, toolbarAfter, moreActions, columnFilters, className, headerBackground, noDataState, noResultsState, errorDataState, loading, dataError, dataFiltered, pagination: paginationProp, pageCount, sorting: sortingProp, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, getRowId, rowSelection: rowSelectionProp, bulkActions: bulkActionsProp, columnsSettings: columnsSettingsProp, savedState, ...rest }: MobileTableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
 export declare namespace MobileTable {
     var getRowActionsColumnDef: typeof import("../helperComponents").getRowActionsColumnDef;
     var getStatusColumnDef: typeof import("../helperComponents").getStatusColumnDef;

package/dist/cjs/components/MobileTable.js

@@ -23,13 +23,15 @@ const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
 const uikit_product_mobile_toolbar_1 = require("@cloud-ru/uikit-product-mobile-toolbar");
 const uikit_product_utils_1 = require("@cloud-ru/uikit-product-utils");
 const skeleton_1 = require("@snack-uikit/skeleton");
+const table_1 = require("@snack-uikit/table");
 const helperComponents_1 = require("../helperComponents");
+const ColumnsSettings_1 = require("../helperComponents/ColumnsSettings");
 const constants_1 = require("./constants");
 const hooks_1 = require("./hooks");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_1 = require("./utils");
 function MobileTable(_a) {
-    var { data, columnDefinitions, headlineId, suppressPagination = false, suppressToolbar = false, suppressSearch = false, enableFuzzySearch = false, search, onRefresh, toolbarAfter, moreActions, columnFilters, className, headerBackground = 'default', noDataState, noResultsState, errorDataState, loading, dataError, dataFiltered, pagination: paginationProp, pageCount, sorting: sortingProp, manualSorting = false, manualPagination = false, manualFiltering = false, getRowId, rowSelection: rowSelectionProp, bulkActions: bulkActionsProp } = _a, rest = __rest(_a, ["data", "columnDefinitions", "headlineId", "suppressPagination", "suppressToolbar", "suppressSearch", "enableFuzzySearch", "search", "onRefresh", "toolbarAfter", "moreActions", "columnFilters", "className", "headerBackground", "noDataState", "noResultsState", "errorDataState", "loading", "dataError", "dataFiltered", "pagination", "pageCount", "sorting", "manualSorting", "manualPagination", "manualFiltering", "getRowId", "rowSelection", "bulkActions"]);
+    var { data, columnDefinitions, headlineId, suppressPagination = false, suppressToolbar = false, suppressSearch = false, enableFuzzySearch = false, search, onRefresh, toolbarAfter, moreActions, columnFilters, className, headerBackground = 'default', noDataState, noResultsState, errorDataState, loading, dataError, dataFiltered, pagination: paginationProp, pageCount, sorting: sortingProp, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, getRowId, rowSelection: rowSelectionProp, bulkActions: bulkActionsProp, columnsSettings: columnsSettingsProp, savedState } = _a, rest = __rest(_a, ["data", "columnDefinitions", "headlineId", "suppressPagination", "suppressToolbar", "suppressSearch", "enableFuzzySearch", "search", "onRefresh", "toolbarAfter", "moreActions", "columnFilters", "className", "headerBackground", "noDataState", "noResultsState", "errorDataState", "loading", "dataError", "dataFiltered", "pagination", "pageCount", "sorting", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "getRowId", "rowSelection", "bulkActions", "columnsSettings", "savedState"]);
     const defaultPaginationState = (0, react_1.useMemo)(() => ({ pageIndex: 0, pageSize: constants_1.DEFAULT_PAGE_SIZE }), []);
     const { state: sorting, onStateChange: onSortingChange } = (0, hooks_1.useStateControl)(sortingProp, []);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = (0, hooks_1.useStateControl)(search, '');
@@ -45,23 +47,88 @@ function MobileTable(_a) {
         }
         return isParentSelected && isCurrentRowSelected;
     }, [rowSelectionProp]);
+    const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
+    const pinnedGroups = (0, react_1.useMemo)(() => (0, table_1.getPinnedGroups)(columnDefinitions), [columnDefinitions]);
+    const { enabledColumns, setEnabledColumns, getColumnsSettings, enabledTableColumns, enabledColumnsDefinitions, areColumnsSettingsEnabled, } = (0, table_1.useColumnSettings)({
+        columnDefinitions,
+        pinnedGroups,
+        savedState,
+        columnsSettings: columnsSettingsProp,
+        rowSelection: undefined,
+        enableSelectPinned: false,
+        expanding: undefined,
+    });
+    const { columnOrder, setColumnOrder, enableColumnsOrderSortByDrag } = (0, table_1.useColumnOrderByDrag)({
+        tableColumns: columnDefinitions,
+        savedState,
+        columnSettings: columnsSettingsProp,
+    });
+    const columnsSettings = (0, react_1.useMemo)(() => getColumnsSettings(columnOrder), [columnOrder, getColumnsSettings]);
+    // Получаем список колонок с mode: 'hidden', которые всегда доступны для сортировки
+    const hiddenColumnsBySettings = (0, react_1.useMemo)(() => {
+        if (!areColumnsSettingsEnabled)
+            return new Set();
+        const hidden = new Set();
+        columnDefinitions.forEach(colDef => {
+            var _a;
+            let columnId;
+            if ('id' in colDef && colDef.id) {
+                columnId = colDef.id;
+            }
+            else if ('accessorKey' in colDef && colDef.accessorKey) {
+                columnId = String(colDef.accessorKey);
+            }
+            if (columnId) {
+                const colDefWithSettings = colDef;
+                if (((_a = colDefWithSettings.columnSettings) === null || _a === void 0 ? void 0 : _a.mode) === 'hidden') {
+                    hidden.add(columnId);
+                }
+            }
+        });
+        return hidden;
+    }, [areColumnsSettingsEnabled, columnDefinitions]);
+    // Сбрасываем сортировку, если колонка с активной сортировкой была скрыта
+    // Колонки с mode: 'hidden' всегда доступны для сортировки
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (areColumnsSettingsEnabled && enabledColumns && sorting.length > 0) {
+            const activeSortColumnId = (_a = sorting[0]) === null || _a === void 0 ? void 0 : _a.id;
+            if (activeSortColumnId) {
+                const isHiddenColumn = hiddenColumnsBySettings.has(activeSortColumnId);
+                const isEnabledColumn = enabledColumns.includes(activeSortColumnId);
+                // Сбрасываем сортировку только если колонка не скрыта через mode: 'hidden' и не включена
+                if (!isHiddenColumn && !isEnabledColumn) {
+                    // Колонка с активной сортировкой скрыта - сбрасываем сортировку
+                    onSortingChange([]);
+                }
+            }
+        }
+    }, [areColumnsSettingsEnabled, enabledColumns, sorting, onSortingChange, hiddenColumnsBySettings]);
     const table = (0, react_table_1.useReactTable)({
         data,
-        columns: columnDefinitions,
+        columns: enabledTableColumns,
         getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
         getPaginationRowModel: (0, react_table_1.getPaginationRowModel)(),
         getFilteredRowModel: (0, react_table_1.getFilteredRowModel)(),
         getSortedRowModel: (0, react_table_1.getSortedRowModel)(),
-        state: { pagination, globalFilter, sorting, rowSelection },
+        state: {
+            pagination,
+            globalFilter,
+            sorting,
+            rowSelection,
+            columnOrder: enableColumnsOrderSortByDrag ? columnOrder : undefined,
+        },
         pageCount,
         onPaginationChange,
         onSortingChange,
+        onColumnOrderChange: enableColumnsOrderSortByDrag ? setColumnOrder : undefined,
         globalFilterFn: enableFuzzySearch ? utils_1.fuzzyFilter : 'includesString',
         enableFilters: true,
         manualSorting,
         manualPagination,
         manualFiltering,
         getRowId,
+        autoResetPageIndex,
         onRowSelectionChange,
         enableGrouping: true,
         enableRowSelection,
@@ -70,7 +137,7 @@ function MobileTable(_a) {
     });
     const { loadingTable } = (0, hooks_1.useLoadingTable)({
         pageSize: constants_1.DEFAULT_PAGE_SIZE,
-        columnDefinitions,
+        columnDefinitions: enabledColumnsDefinitions,
     });
     const tableRows = table.getRowModel().rows;
     const loadingTableRows = loadingTable.getRowModel().rows;
@@ -80,7 +147,6 @@ function MobileTable(_a) {
         table.resetRowSelection();
         onRefresh === null || onRefresh === void 0 ? void 0 : onRefresh();
     }, [onRefresh, table]);
-    const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
     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); } })))
         : undefined, [bulkActionsProp, enableSelection, table]);
@@ -104,6 +170,16 @@ function MobileTable(_a) {
     const selectionMode = (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow)
         ? 'multiple'
         : 'single';
+    const hasSortableColumns = (0, react_1.useMemo)(() => columnDefinitions.some(column => column.enableSorting !== false), [columnDefinitions]);
+    const shouldShowSorting = (0, react_1.useMemo)(() => Boolean(sortingProp) || hasSortableColumns, [sortingProp, hasSortableColumns]);
+    const tableFilteredRows = table.getFilteredRowModel().rows;
+    (0, table_1.usePageReset)({
+        manualPagination,
+        maximumAvailablePage: pageCount || tableFilteredRows.length / pagination.pageSize,
+        pagination,
+        onPaginationChange,
+        autoResetPageIndex,
+    });
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.tableWrapper, className) }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: [(!suppressToolbar || columnFilters) && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.header, "data-background": headerBackground, children: (0, jsx_runtime_1.jsx)(uikit_product_mobile_toolbar_1.MobileToolbar, { search: suppressSearch
                         ? undefined
                         : {
@@ -111,7 +187,7 @@ function MobileTable(_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'),
-                        }, onRefresh: onRefresh ? handleOnRefresh : undefined, outline: true, filterRow: columnFilters, after: toolbarAfter, moreActions: moreActions, bulkActions: bulkActions, selectedCount: table.getSelectedRowModel().rows.length, selectionMode: selectionMode, onCheck: enableSelection ? handleOnToolbarCheck : undefined, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected() }) })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.table, children: loading ? ((0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContextProvider, { loading: true, children: loadingTableRows.map((row, index) => ((0, jsx_runtime_1.jsx)(helperComponents_1.TableCard, { headlineId: headlineId, row: row, table: loadingTable, selection: 'none' }, index))) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [tableRows.map((row, index) => ((0, jsx_runtime_1.jsx)(helperComponents_1.TableCard, { headlineId: headlineId, row: row, table: table, selection: enableSelection ? selectionMode : 'none' }, index))), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length })] })) }), !suppressPagination && (0, jsx_runtime_1.jsx)(helperComponents_1.TablePagination, { table: table })] })));
+                        }, onRefresh: onRefresh ? handleOnRefresh : undefined, outline: true, filterRow: columnFilters, after: toolbarAfter || shouldShowSorting || (areColumnsSettingsEnabled && columnsSettings) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolbarAfter, shouldShowSorting && ((0, jsx_runtime_1.jsx)(helperComponents_1.TableSorting, { table: table, columnDefinitions: columnDefinitions, enabledColumns: areColumnsSettingsEnabled ? enabledColumns : undefined, areColumnsSettingsEnabled: areColumnsSettingsEnabled })), areColumnsSettingsEnabled && columnsSettings && ((0, jsx_runtime_1.jsx)(ColumnsSettings_1.ColumnsSettings, { columnsSettings: columnsSettings, enabledColumns: enabledColumns, setEnabledColumns: setEnabledColumns }))] })) : undefined, moreActions: moreActions, bulkActions: bulkActions, selectedCount: table.getSelectedRowModel().rows.length, selectionMode: selectionMode, onCheck: enableSelection ? handleOnToolbarCheck : undefined, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected() }) })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.table, children: loading ? ((0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContextProvider, { loading: true, children: loadingTableRows.map((row, index) => ((0, jsx_runtime_1.jsx)(helperComponents_1.TableCard, { headlineId: headlineId, row: row, table: loadingTable, selection: 'none' }, index))) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [tableRows.map((row, index) => ((0, jsx_runtime_1.jsx)(helperComponents_1.TableCard, { headlineId: headlineId, row: row, table: table, selectionAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance, selection: enableSelection ? selectionMode : 'none' }, index))), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length })] })) }), !suppressPagination && (0, jsx_runtime_1.jsx)(helperComponents_1.TablePagination, { table: table })] })));
 }
 MobileTable.getRowActionsColumnDef = helperComponents_1.getRowActionsColumnDef;
 MobileTable.getStatusColumnDef = helperComponents_1.getStatusColumnDef;

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

@@ -1,3 +1,4 @@
 export * from './AdaptiveTable';
 export * from './AdaptiveServerTable';
 export * from './MobileTable';
+export * from '../helperComponents';

package/dist/cjs/components/index.js

@@ -17,3 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./AdaptiveTable"), exports);
 __exportStar(require("./AdaptiveServerTable"), exports);
 __exportStar(require("./MobileTable"), exports);
+__exportStar(require("../helperComponents"), exports);

package/dist/cjs/helperComponents/ColumnsSettings/ColumnsSettings.d.ts

@@ -0,0 +1,7 @@
+import { GroupSelectItemProps } from '@snack-uikit/list';
+export type ColumnsSettingsProps = {
+    enabledColumns: string[];
+    setEnabledColumns(enabledColumns: string[]): void;
+    columnsSettings: [GroupSelectItemProps];
+};
+export declare function ColumnsSettings({ columnsSettings, enabledColumns, setEnabledColumns }: ColumnsSettingsProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/ColumnsSettings/ColumnsSettings.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnsSettings = ColumnsSettings;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_mobile_dropdown_1 = require("@cloud-ru/uikit-product-mobile-dropdown");
+const button_1 = require("@snack-uikit/button");
+const icons_1 = require("@snack-uikit/icons");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ColumnsSettings({ columnsSettings, enabledColumns, setEnabledColumns }) {
+    return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.MobileDroplist, { className: styles_module_scss_1.default.columnsSettings, items: columnsSettings, selection: {
+            value: enabledColumns,
+            onChange: setEnabledColumns,
+            mode: 'multiple',
+        }, "data-test-id": 'table__column-settings-droplist', children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { size: 'm', "data-test-id": 'table__column-settings', icon: (0, jsx_runtime_1.jsx)(icons_1.FunctionSettingsSVG, {}) }) }));
+}

package/dist/cjs/helperComponents/ColumnsSettings/index.d.ts

@@ -0,0 +1 @@
+export * from './ColumnsSettings';

package/dist/cjs/helperComponents/ColumnsSettings/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ColumnsSettings"), exports);

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

@@ -0,0 +1,3 @@
+.columnsSettings{
+  min-width:256px;
+}

package/dist/cjs/helperComponents/TableCard/TableCard.d.ts

@@ -1,9 +1,11 @@
 import { Row, Table } from '@tanstack/react-table';
+import { RowAppearance } from '@snack-uikit/table';
 type TableCardProps<TData extends object> = {
     headlineId?: string;
     row: Row<TData>;
     table: Table<TData>;
     selection: 'multiple' | 'single' | 'none';
+    selectionAppearance?: RowAppearance;
 };
-export declare function TableCard<TData extends object>({ headlineId, table, row, selection }: TableCardProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function TableCard<TData extends object>({ headlineId, table, row, selection, selectionAppearance, }: TableCardProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/helperComponents/TableCard/TableCard.js

@@ -7,22 +7,27 @@ exports.TableCard = TableCard;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_table_1 = require("@tanstack/react-table");
 const react_1 = require("react");
+const table_1 = require("@snack-uikit/table");
 const toggles_1 = require("@snack-uikit/toggles");
 const constants_1 = require("../../constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function TableCard({ headlineId, table, row, selection }) {
+function TableCard({ headlineId, table, row, selection, selectionAppearance = table_1.RowAppearance.Disabled, }) {
     const headerGroups = table.getHeaderGroups();
     const headerCell = row._getAllCellsByColumnId()[headlineId !== null && headlineId !== void 0 ? headlineId : ''];
     const headerColumn = table.getFlatHeaders().find(header => header.id === headlineId);
     const actionsCell = row._getAllCellsByColumnId()[constants_1.ROW_ACTIONS_COLUMN_ID];
     const actionsColumn = table.getFlatHeaders().find(header => header.id === constants_1.ROW_ACTIONS_COLUMN_ID);
     const isSelected = row.getIsSelected();
+    const canSelect = row.getCanSelect();
+    const isDisabled = !canSelect;
     const handleSelection = (0, react_1.useCallback)(() => {
+        if (isDisabled)
+            return;
         if (selection === 'single')
             row.toggleSelected(true);
         if (selection === 'multiple')
             row.toggleSelected(!isSelected);
-    }, [isSelected, row, selection]);
+    }, [isDisabled, isSelected, row, selection]);
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.card, "data-is-selected": isSelected !== null && isSelected !== void 0 ? isSelected : undefined, "data-selection-mode": selection, onClick: handleSelection, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [headerCell && headerColumn && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.headline, children: (0, react_table_1.flexRender)(headerColumn.column.columnDef.cell, headerCell.getContext()) })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.body, children: headerGroups.map(group => group.headers.map((header, index) => {
@@ -32,5 +37,7 @@ function TableCard({ headlineId, table, row, selection }) {
                             const column = header.column.columnDef;
                             const cell = row._getAllCellsByColumnId()[header.column.id];
                             return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.cardRow, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.cardRowHeader, children: (0, react_table_1.flexRender)(column.header, header.getContext()) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.cardRowContent, children: (0, react_table_1.flexRender)(column.cell, cell.getContext()) })] }, header.id || index));
-                        })) })] }), selection === 'single' && (0, jsx_runtime_1.jsx)(toggles_1.Radio, { size: 'm', className: styles_module_scss_1.default.selectionController, checked: isSelected }), selection === 'multiple' && (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, { size: 'm', className: styles_module_scss_1.default.selectionController, checked: isSelected }), actionsCell && actionsColumn && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.button, children: (0, react_table_1.flexRender)(actionsColumn.column.columnDef.cell, actionsCell.getContext()) }))] }));
+                        })) })] }), selection === 'single' &&
+                (isDisabled && selectionAppearance === table_1.RowAppearance.HideToggler ? null : ((0, jsx_runtime_1.jsx)(toggles_1.Radio, { size: 'm', className: styles_module_scss_1.default.selectionController, checked: isSelected, disabled: isDisabled }))), selection === 'multiple' &&
+                (isDisabled && selectionAppearance === table_1.RowAppearance.HideToggler ? null : ((0, jsx_runtime_1.jsx)(toggles_1.Checkbox, { size: 'm', className: styles_module_scss_1.default.selectionController, checked: isSelected, disabled: isDisabled }))), actionsCell && actionsColumn && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.button, children: (0, react_table_1.flexRender)(actionsColumn.column.columnDef.cell, actionsCell.getContext()) }))] }));
 }

package/dist/cjs/helperComponents/TableSorting/TableSorting.d.ts

@@ -0,0 +1,10 @@
+import { SortingState, Table } from '@tanstack/react-table';
+import { ColumnDefinition } from '@snack-uikit/table';
+export type TableSortingProps<TData extends object> = {
+    table: Table<TData>;
+    sorting?: SortingState;
+    columnDefinitions: ColumnDefinition<TData>[];
+    enabledColumns?: string[];
+    areColumnsSettingsEnabled?: boolean;
+};
+export declare function TableSorting<TData extends object>({ table, sorting, columnDefinitions, enabledColumns, areColumnsSettingsEnabled, }: TableSortingProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/TableSorting/TableSorting.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableSorting = TableSorting;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
+const uikit_product_mobile_dropdown_1 = require("@cloud-ru/uikit-product-mobile-dropdown");
+const button_1 = require("@snack-uikit/button");
+const useTableSorting_1 = require("./useTableSorting");
+function TableSorting({ table, sorting, columnDefinitions, enabledColumns, areColumnsSettingsEnabled = false, }) {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const { items, pinBottom, selection, currentSort, selectedSortId, handleClearSort } = (0, useTableSorting_1.useTableSorting)({
+        table,
+        sorting,
+        columnDefinitions,
+        enabledColumns,
+        areColumnsSettingsEnabled,
+    });
+    const handleClear = () => {
+        handleClearSort();
+        setOpen(false);
+    };
+    const clearItem = (pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom[0]) ? [Object.assign(Object.assign({}, pinBottom[0]), { onClick: handleClear })] : undefined;
+    let SortIcon = uikit_product_icons_1.SortSVG;
+    if (currentSort) {
+        SortIcon = currentSort.desc ? uikit_product_icons_1.ArrowDownSVG : uikit_product_icons_1.ArrowUpSVG;
+    }
+    return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.MobileDroplist, { items: items, selection: selection, virtualized: items.length > 10, pinBottom: clearItem, open: open, onOpenChange: setOpen, children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { size: 'm', icon: (0, jsx_runtime_1.jsx)(SortIcon, {}), appearance: selectedSortId ? 'primary' : 'neutral' }) }));
+}

package/dist/cjs/helperComponents/TableSorting/index.d.ts

@@ -0,0 +1 @@
+export * from './TableSorting';

package/dist/cjs/helperComponents/TableSorting/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TableSorting"), exports);

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

@@ -0,0 +1,3 @@
+.clearSortItem[data-disabled=true] svg{
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}

package/dist/cjs/helperComponents/TableSorting/useTableSorting.d.ts

@@ -0,0 +1,23 @@
+import { SortingState, Table } from '@tanstack/react-table';
+import { MobileDroplistProps, SelectionSingleState } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { ColumnDefinition } from '@snack-uikit/table';
+type UseTableSortingReturn = {
+    items: MobileDroplistProps['items'];
+    pinBottom: MobileDroplistProps['items'];
+    selection?: SelectionSingleState;
+    currentSort: {
+        id: string;
+        label: string;
+        desc: boolean;
+    } | null;
+    selectedSortId?: string;
+    handleClearSort(): void;
+};
+export declare function useTableSorting<TData extends object>({ table, sorting: sortingProp, columnDefinitions, enabledColumns, areColumnsSettingsEnabled, }: {
+    table: Table<TData>;
+    sorting?: SortingState;
+    columnDefinitions: ColumnDefinition<TData>[];
+    enabledColumns?: string[];
+    areColumnsSettingsEnabled?: boolean;
+}): UseTableSortingReturn;
+export {};

package/dist/cjs/helperComponents/TableSorting/useTableSorting.js

@@ -0,0 +1,189 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTableSorting = useTableSorting;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_1 = require("./utils");
+function useTableSorting({ table, sorting: sortingProp, columnDefinitions, enabledColumns, areColumnsSettingsEnabled = false, }) {
+    const { t } = (0, uikit_product_locale_1.useLocale)('Table');
+    const sorting = sortingProp !== null && sortingProp !== void 0 ? sortingProp : table.getState().sorting;
+    const columnDefMap = (0, react_1.useMemo)(() => (0, utils_1.createColumnDefMap)(columnDefinitions), [columnDefinitions]);
+    const hiddenColumnsBySettings = (0, react_1.useMemo)(() => {
+        if (!areColumnsSettingsEnabled)
+            return new Set();
+        const hidden = new Set();
+        columnDefMap.forEach((colDef, columnId) => {
+            var _a;
+            const colDefWithSettings = colDef;
+            if (((_a = colDefWithSettings.columnSettings) === null || _a === void 0 ? void 0 : _a.mode) === 'hidden') {
+                hidden.add(columnId);
+            }
+        });
+        return hidden;
+    }, [areColumnsSettingsEnabled, columnDefMap]);
+    const sortableHeaders = (0, react_1.useMemo)(() => {
+        let headers = table
+            .getFlatHeaders()
+            .filter(header => header.column.getCanSort() && header.id !== 'select' && header.id !== 'actions');
+        if (areColumnsSettingsEnabled && enabledColumns) {
+            headers = headers.filter(header => hiddenColumnsBySettings.has(header.id) || enabledColumns.includes(header.id));
+        }
+        return headers;
+    }, [table, areColumnsSettingsEnabled, enabledColumns, hiddenColumnsBySettings]);
+    const currentSort = (0, react_1.useMemo)(() => {
+        if (sorting.length === 0)
+            return null;
+        const firstSort = sorting[0];
+        if (areColumnsSettingsEnabled && enabledColumns) {
+            const isHiddenColumn = hiddenColumnsBySettings.has(firstSort.id);
+            const isEnabledColumn = enabledColumns.includes(firstSort.id);
+            if (!isHiddenColumn && !isEnabledColumn) {
+                return null;
+            }
+        }
+        const header = table.getFlatHeaders().find(h => h.id === firstSort.id);
+        if (!header)
+            return null;
+        const headerLabel = (0, utils_1.getHeaderLabel)(header);
+        return {
+            id: firstSort.id,
+            label: headerLabel || firstSort.id,
+            desc: firstSort.desc,
+        };
+    }, [sorting, table, areColumnsSettingsEnabled, enabledColumns, hiddenColumnsBySettings]);
+    const handleColumnSortToggle = (0, react_1.useCallback)((columnId) => {
+        const currentSorting = table.getState().sorting;
+        const currentColumnSort = currentSorting.find(s => s.id === columnId);
+        let newSorting;
+        if (!currentColumnSort) {
+            newSorting = [{ id: columnId, desc: false }];
+        }
+        else if (!currentColumnSort.desc) {
+            newSorting = [{ id: columnId, desc: true }];
+        }
+        else {
+            newSorting = [];
+        }
+        table.setSorting(newSorting);
+    }, [table]);
+    const handleClearSort = (0, react_1.useCallback)(() => {
+        table.setSorting([]);
+    }, [table]);
+    const selectedSortId = (0, react_1.useMemo)(() => {
+        if (sorting.length === 0)
+            return undefined;
+        const firstSort = sorting[0];
+        if (areColumnsSettingsEnabled && enabledColumns) {
+            const isHiddenColumn = hiddenColumnsBySettings.has(firstSort.id);
+            const isEnabledColumn = enabledColumns.includes(firstSort.id);
+            if (!isHiddenColumn && !isEnabledColumn) {
+                return undefined;
+            }
+        }
+        return `sort-${firstSort.id}`;
+    }, [sorting, areColumnsSettingsEnabled, enabledColumns, hiddenColumnsBySettings]);
+    const createSortItem = (0, react_1.useCallback)((header) => {
+        const columnId = header.id;
+        const currentColumnSort = sorting.find(s => s.id === columnId);
+        const isAsc = currentColumnSort && !currentColumnSort.desc;
+        const isDesc = currentColumnSort && currentColumnSort.desc;
+        const headerLabel = (0, utils_1.getHeaderLabel)(header) || columnId;
+        let SortIcon = undefined;
+        if (isAsc) {
+            SortIcon = (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ArrowUpSVG, {});
+        }
+        else if (isDesc) {
+            SortIcon = (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ArrowDownSVG, {});
+        }
+        return {
+            id: `sort-${columnId}`,
+            content: {
+                option: headerLabel,
+            },
+            afterContent: SortIcon,
+            onClick: () => handleColumnSortToggle(columnId),
+        };
+    }, [sorting, handleColumnSortToggle]);
+    const groupSortableHeadersByPinned = (0, react_1.useCallback)(() => (0, utils_1.groupHeadersByPinned)(sortableHeaders, columnDefMap), [sortableHeaders, columnDefMap]);
+    const { items, pinBottom } = (0, react_1.useMemo)(() => {
+        const { leftHeaders, unpinnedHeaders, rightHeaders } = groupSortableHeadersByPinned();
+        const groups = [];
+        if (leftHeaders.length > 0) {
+            groups.push({
+                type: 'group',
+                divider: false,
+                items: leftHeaders.map(createSortItem),
+            });
+        }
+        if (unpinnedHeaders.length > 0) {
+            groups.push({
+                type: 'group',
+                divider: leftHeaders.length > 0 || rightHeaders.length > 0,
+                items: unpinnedHeaders.map(createSortItem),
+            });
+        }
+        if (rightHeaders.length > 0) {
+            groups.push({
+                type: 'group',
+                divider: leftHeaders.length > 0 || unpinnedHeaders.length > 0,
+                items: rightHeaders.map(createSortItem),
+            });
+        }
+        const clearItem = [
+            {
+                id: 'snack-internal-clear-id',
+                content: {
+                    option: t('clearSort'),
+                },
+                afterContent: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.UpdateSVG, {}),
+                onClick: handleClearSort,
+                disabled: sorting.length === 0,
+                className: styles_module_scss_1.default.clearSortItem,
+            },
+        ];
+        const mainGroup = {
+            type: 'group',
+            label: t('sort'),
+            items: groups,
+            mode: 'primary',
+        };
+        return {
+            items: [mainGroup],
+            pinBottom: clearItem,
+        };
+    }, [groupSortableHeadersByPinned, createSortItem, sorting, handleClearSort, t]);
+    const handleSelectionChange = (0, react_1.useCallback)((selectedId) => {
+        const id = String(selectedId);
+        if (id === 'sort-clear') {
+            return;
+        }
+        const match = id.match(/^sort-(.+)$/);
+        if (match) {
+            const [, columnId] = match;
+            handleColumnSortToggle(columnId);
+        }
+    }, [handleColumnSortToggle]);
+    const selection = (0, react_1.useMemo)(() => {
+        if (!selectedSortId)
+            return undefined;
+        return {
+            mode: 'single',
+            value: selectedSortId,
+            onChange: handleSelectionChange,
+        };
+    }, [selectedSortId, handleSelectionChange]);
+    return {
+        items,
+        pinBottom,
+        selection,
+        currentSort,
+        selectedSortId,
+        handleClearSort,
+    };
+}

package/dist/cjs/helperComponents/TableSorting/utils.d.ts

@@ -0,0 +1,9 @@
+import { Header } from '@tanstack/react-table';
+import { ColumnDefinition } from '@snack-uikit/table';
+export declare function getHeaderLabel<TData extends object>(header: Header<TData, unknown>): string;
+export declare function createColumnDefMap<TData extends object>(columnDefinitions: ColumnDefinition<TData>[]): Map<string, ColumnDefinition<TData>>;
+export declare function groupHeadersByPinned<TData extends object>(headers: Header<TData, unknown>[], columnDefMap: Map<string, ColumnDefinition<TData>>): {
+    leftHeaders: Header<TData, unknown>[];
+    unpinnedHeaders: Header<TData, unknown>[];
+    rightHeaders: Header<TData, unknown>[];
+};