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

package/dist/cjs/helperComponents/index.js

@@ -14,8 +14,10 @@ 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);
 __exportStar(require("./RowActionsCell"), exports);
 __exportStar(require("./StatusColumnDef"), exports);
 __exportStar(require("./TableCard"), exports);
-__exportStar(require("./TablePagination"), exports);
 __exportStar(require("./TableEmptyState"), exports);
+__exportStar(require("./TablePagination"), exports);
+__exportStar(require("./TableSorting"), exports);

package/dist/esm/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/esm/components/MobileTable.js

@@ -12,18 +12,20 @@ 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, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useLocale } from '@cloud-ru/uikit-product-locale';
 import { MobileToolbar } from '@cloud-ru/uikit-product-mobile-toolbar';
 import { extractSupportProps } from '@cloud-ru/uikit-product-utils';
 import { SkeletonContextProvider } from '@snack-uikit/skeleton';
-import { getRowActionsColumnDef, getStatusColumnDef, TableCard, TableEmptyState, TablePagination, useEmptyState, } from '../helperComponents';
+import { getPinnedGroups, useColumnOrderByDrag, useColumnSettings, usePageReset, } from '@snack-uikit/table';
+import { getRowActionsColumnDef, getStatusColumnDef, TableCard, TableEmptyState, TablePagination, TableSorting, useEmptyState, } from '../helperComponents';
+import { ColumnsSettings } from '../helperComponents/ColumnsSettings';
 import { DEFAULT_PAGE_SIZE } from './constants';
 import { useLoadingTable, useStateControl } from './hooks';
 import styles from './styles.module.css';
 import { fuzzyFilter } from './utils';
 export 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 = useMemo(() => ({ pageIndex: 0, pageSize: DEFAULT_PAGE_SIZE }), []);
     const { state: sorting, onStateChange: onSortingChange } = useStateControl(sortingProp, []);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
@@ -39,23 +41,88 @@ export function MobileTable(_a) {
         }
         return isParentSelected && isCurrentRowSelected;
     }, [rowSelectionProp]);
+    const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
+    const pinnedGroups = useMemo(() => getPinnedGroups(columnDefinitions), [columnDefinitions]);
+    const { enabledColumns, setEnabledColumns, getColumnsSettings, enabledTableColumns, enabledColumnsDefinitions, areColumnsSettingsEnabled, } = useColumnSettings({
+        columnDefinitions,
+        pinnedGroups,
+        savedState,
+        columnsSettings: columnsSettingsProp,
+        rowSelection: undefined,
+        enableSelectPinned: false,
+        expanding: undefined,
+    });
+    const { columnOrder, setColumnOrder, enableColumnsOrderSortByDrag } = useColumnOrderByDrag({
+        tableColumns: columnDefinitions,
+        savedState,
+        columnSettings: columnsSettingsProp,
+    });
+    const columnsSettings = useMemo(() => getColumnsSettings(columnOrder), [columnOrder, getColumnsSettings]);
+    // Получаем список колонок с mode: 'hidden', которые всегда доступны для сортировки
+    const hiddenColumnsBySettings = 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' всегда доступны для сортировки
+    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 = useReactTable({
         data,
-        columns: columnDefinitions,
+        columns: enabledTableColumns,
         getCoreRowModel: getCoreRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
         getSortedRowModel: getSortedRowModel(),
-        state: { pagination, globalFilter, sorting, rowSelection },
+        state: {
+            pagination,
+            globalFilter,
+            sorting,
+            rowSelection,
+            columnOrder: enableColumnsOrderSortByDrag ? columnOrder : undefined,
+        },
         pageCount,
         onPaginationChange,
         onSortingChange,
+        onColumnOrderChange: enableColumnsOrderSortByDrag ? setColumnOrder : undefined,
         globalFilterFn: enableFuzzySearch ? fuzzyFilter : 'includesString',
         enableFilters: true,
         manualSorting,
         manualPagination,
         manualFiltering,
         getRowId,
+        autoResetPageIndex,
         onRowSelectionChange,
         enableGrouping: true,
         enableRowSelection,
@@ -64,7 +131,7 @@ export function MobileTable(_a) {
     });
     const { loadingTable } = useLoadingTable({
         pageSize: DEFAULT_PAGE_SIZE,
-        columnDefinitions,
+        columnDefinitions: enabledColumnsDefinitions,
     });
     const tableRows = table.getRowModel().rows;
     const loadingTableRows = loadingTable.getRowModel().rows;
@@ -74,7 +141,6 @@ export 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 = 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]);
@@ -98,6 +164,16 @@ export function MobileTable(_a) {
     const selectionMode = (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow)
         ? 'multiple'
         : 'single';
+    const hasSortableColumns = useMemo(() => columnDefinitions.some(column => column.enableSorting !== false), [columnDefinitions]);
+    const shouldShowSorting = useMemo(() => Boolean(sortingProp) || hasSortableColumns, [sortingProp, hasSortableColumns]);
+    const tableFilteredRows = table.getFilteredRowModel().rows;
+    usePageReset({
+        manualPagination,
+        maximumAvailablePage: pageCount || tableFilteredRows.length / pagination.pageSize,
+        pagination,
+        onPaginationChange,
+        autoResetPageIndex,
+    });
     return (_jsxs("div", Object.assign({ className: cn(styles.tableWrapper, className) }, extractSupportProps(rest), { children: [(!suppressToolbar || columnFilters) && (_jsx("div", { className: styles.header, "data-background": headerBackground, children: _jsx(MobileToolbar, { search: suppressSearch
                         ? undefined
                         : {
@@ -105,7 +181,7 @@ export 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() }) })), _jsx("div", { className: styles.table, children: loading ? (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.map((row, index) => (_jsx(TableCard, { headlineId: headlineId, row: row, table: loadingTable, selection: 'none' }, index))) })) : (_jsxs(_Fragment, { children: [tableRows.map((row, index) => (_jsx(TableCard, { headlineId: headlineId, row: row, table: table, selection: enableSelection ? selectionMode : 'none' }, index))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length })] })) }), !suppressPagination && _jsx(TablePagination, { table: table })] })));
+                        }, onRefresh: onRefresh ? handleOnRefresh : undefined, outline: true, filterRow: columnFilters, after: toolbarAfter || shouldShowSorting || (areColumnsSettingsEnabled && columnsSettings) ? (_jsxs(_Fragment, { children: [toolbarAfter, shouldShowSorting && (_jsx(TableSorting, { table: table, columnDefinitions: columnDefinitions, enabledColumns: areColumnsSettingsEnabled ? enabledColumns : undefined, areColumnsSettingsEnabled: areColumnsSettingsEnabled })), areColumnsSettingsEnabled && columnsSettings && (_jsx(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() }) })), _jsx("div", { className: styles.table, children: loading ? (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.map((row, index) => (_jsx(TableCard, { headlineId: headlineId, row: row, table: loadingTable, selection: 'none' }, index))) })) : (_jsxs(_Fragment, { children: [tableRows.map((row, index) => (_jsx(TableCard, { headlineId: headlineId, row: row, table: table, selection: enableSelection ? selectionMode : 'none' }, index))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length })] })) }), !suppressPagination && _jsx(TablePagination, { table: table })] })));
 }
 MobileTable.getRowActionsColumnDef = getRowActionsColumnDef;
 MobileTable.getStatusColumnDef = getStatusColumnDef;

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

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

package/dist/esm/components/index.js

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

package/dist/esm/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/esm/helperComponents/ColumnsSettings/ColumnsSettings.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MobileDroplist } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { ButtonFunction } from '@snack-uikit/button';
+import { FunctionSettingsSVG } from '@snack-uikit/icons';
+import styles from './styles.module.css';
+export function ColumnsSettings({ columnsSettings, enabledColumns, setEnabledColumns }) {
+    return (_jsx(MobileDroplist, { className: styles.columnsSettings, items: columnsSettings, selection: {
+            value: enabledColumns,
+            onChange: setEnabledColumns,
+            mode: 'multiple',
+        }, "data-test-id": 'table__column-settings-droplist', children: _jsx(ButtonFunction, { size: 'm', "data-test-id": 'table__column-settings', icon: _jsx(FunctionSettingsSVG, {}) }) }));
+}

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

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

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

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

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

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

package/dist/esm/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/esm/helperComponents/TableSorting/TableSorting.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ArrowDownSVG, ArrowUpSVG, SortSVG } from '@cloud-ru/uikit-product-icons';
+import { MobileDroplist } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { ButtonFunction } from '@snack-uikit/button';
+import { useTableSorting } from './useTableSorting';
+export function TableSorting({ table, sorting, columnDefinitions, enabledColumns, areColumnsSettingsEnabled = false, }) {
+    const [open, setOpen] = useState(false);
+    const { items, pinBottom, selection, currentSort, selectedSortId, handleClearSort } = 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 = SortSVG;
+    if (currentSort) {
+        SortIcon = currentSort.desc ? ArrowDownSVG : ArrowUpSVG;
+    }
+    return (_jsx(MobileDroplist, { items: items, selection: selection, virtualized: items.length > 10, pinBottom: clearItem, open: open, onOpenChange: setOpen, children: _jsx(ButtonFunction, { size: 'm', icon: _jsx(SortIcon, {}), appearance: selectedSortId ? 'primary' : 'neutral' }) }));
+}

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

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

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

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

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

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

package/dist/esm/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/esm/helperComponents/TableSorting/useTableSorting.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { ArrowDownSVG, ArrowUpSVG, UpdateSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import styles from './styles.module.css';
+import { createColumnDefMap, getHeaderLabel, groupHeadersByPinned } from './utils';
+export function useTableSorting({ table, sorting: sortingProp, columnDefinitions, enabledColumns, areColumnsSettingsEnabled = false, }) {
+    const { t } = useLocale('Table');
+    const sorting = sortingProp !== null && sortingProp !== void 0 ? sortingProp : table.getState().sorting;
+    const columnDefMap = useMemo(() => createColumnDefMap(columnDefinitions), [columnDefinitions]);
+    const hiddenColumnsBySettings = 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 = 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 = 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 = getHeaderLabel(header);
+        return {
+            id: firstSort.id,
+            label: headerLabel || firstSort.id,
+            desc: firstSort.desc,
+        };
+    }, [sorting, table, areColumnsSettingsEnabled, enabledColumns, hiddenColumnsBySettings]);
+    const handleColumnSortToggle = 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 = useCallback(() => {
+        table.setSorting([]);
+    }, [table]);
+    const selectedSortId = 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 = 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 = getHeaderLabel(header) || columnId;
+        let SortIcon = undefined;
+        if (isAsc) {
+            SortIcon = _jsx(ArrowUpSVG, {});
+        }
+        else if (isDesc) {
+            SortIcon = _jsx(ArrowDownSVG, {});
+        }
+        return {
+            id: `sort-${columnId}`,
+            content: {
+                option: headerLabel,
+            },
+            afterContent: SortIcon,
+            onClick: () => handleColumnSortToggle(columnId),
+        };
+    }, [sorting, handleColumnSortToggle]);
+    const groupSortableHeadersByPinned = useCallback(() => groupHeadersByPinned(sortableHeaders, columnDefMap), [sortableHeaders, columnDefMap]);
+    const { items, pinBottom } = 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: _jsx(UpdateSVG, {}),
+                onClick: handleClearSort,
+                disabled: sorting.length === 0,
+                className: styles.clearSortItem,
+            },
+        ];
+        const mainGroup = {
+            type: 'group',
+            label: t('sort'),
+            items: groups,
+            mode: 'primary',
+        };
+        return {
+            items: [mainGroup],
+            pinBottom: clearItem,
+        };
+    }, [groupSortableHeadersByPinned, createSortItem, sorting, handleClearSort, t]);
+    const handleSelectionChange = 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 = useMemo(() => {
+        if (!selectedSortId)
+            return undefined;
+        return {
+            mode: 'single',
+            value: selectedSortId,
+            onChange: handleSelectionChange,
+        };
+    }, [selectedSortId, handleSelectionChange]);
+    return {
+        items,
+        pinBottom,
+        selection,
+        currentSort,
+        selectedSortId,
+        handleClearSort,
+    };
+}

package/dist/esm/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>[];
+};

package/dist/esm/helperComponents/TableSorting/utils.js

@@ -0,0 +1,70 @@
+export function getHeaderLabel(header) {
+    const headerDef = header.column.columnDef.header;
+    if (typeof headerDef === 'string') {
+        return headerDef;
+    }
+    if (typeof headerDef === 'function') {
+        try {
+            const context = header.getContext();
+            const result = headerDef(context);
+            if (typeof result === 'string' || typeof result === 'number') {
+                return String(result);
+            }
+            if (result != null && typeof result === 'object' && 'props' in result && result.props) {
+                const children = result.props.children;
+                if (typeof children === 'string' || typeof children === 'number') {
+                    return String(children);
+                }
+                if (Array.isArray(children)) {
+                    const textChild = children.find(child => typeof child === 'string' || typeof child === 'number');
+                    if (textChild != null) {
+                        return String(textChild);
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.error('Error getting header label:', error);
+        }
+    }
+    return header.id || header.column.id || '';
+}
+export function createColumnDefMap(columnDefinitions) {
+    const map = new Map();
+    columnDefinitions.forEach(colDef => {
+        let id;
+        if ('id' in colDef && colDef.id) {
+            id = colDef.id;
+        }
+        else if ('accessorKey' in colDef && colDef.accessorKey) {
+            id = String(colDef.accessorKey);
+        }
+        if (id) {
+            map.set(id, colDef);
+        }
+    });
+    return map;
+}
+export function groupHeadersByPinned(headers, columnDefMap) {
+    const leftHeaders = [];
+    const unpinnedHeaders = [];
+    const rightHeaders = [];
+    headers.forEach(header => {
+        const columnDef = columnDefMap.get(header.id);
+        if (!columnDef) {
+            unpinnedHeaders.push(header);
+            return;
+        }
+        switch (columnDef.pinned) {
+            case 'left':
+                leftHeaders.push(header);
+                break;
+            case 'right':
+                rightHeaders.push(header);
+                break;
+            default:
+                unpinnedHeaders.push(header);
+        }
+    });
+    return { leftHeaders, unpinnedHeaders, rightHeaders };
+}

package/dist/esm/helperComponents/index.d.ts

@@ -1,5 +1,7 @@
+export * from './ColumnsSettings';
 export * from './RowActionsCell';
 export * from './StatusColumnDef';
 export * from './TableCard';
-export * from './TablePagination';
 export * from './TableEmptyState';
+export * from './TablePagination';
+export * from './TableSorting';

package/dist/esm/helperComponents/index.js

@@ -1,5 +1,7 @@
+export * from './ColumnsSettings';
 export * from './RowActionsCell';
 export * from './StatusColumnDef';
 export * from './TableCard';
-export * from './TablePagination';
 export * from './TableEmptyState';
+export * from './TablePagination';
+export * from './TableSorting';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-mobile-table",
   "title": "Mobile Table",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -42,11 +42,14 @@
     "@cloud-ru/uikit-product-mobile-toolbar": "0.4.11",
     "@cloud-ru/uikit-product-utils": "8.0.1",
     "@snack-uikit/button": "0.19.16",
+    "@snack-uikit/figma-tokens": "18.0.1",
+    "@snack-uikit/icons": "0.27.4",
     "@snack-uikit/info-block": "0.6.35",
+    "@snack-uikit/list": "0.32.10",
     "@snack-uikit/pagination": "0.10.21",
     "@snack-uikit/skeleton": "0.6.9",
     "@snack-uikit/status": "0.10.7",
-    "@snack-uikit/table": "0.37.23",
+    "@snack-uikit/table": "0.37.25",
     "@snack-uikit/toggles": "0.13.23",
     "@tanstack/match-sorter-utils": "8.19.4",
     "@tanstack/react-table": "8.12.0",
@@ -60,5 +63,5 @@
   "devDependencies": {
     "@types/lodash.debounce": "4.0.9"
   },
-  "gitHead": "6366d4a4912c09f95af6ba794df7b5a246893762"
+  "gitHead": "765bcc332ea9c28ea21abac518944d95e4bfc6fe"
 }