@cloud-ru/uikit-product-mobile-table 0.16.3 → 0.17.1

package/dist/cjs/components/MobileTable/utils/saveTableState/mappers.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatTableStateToRequestPayload = exports.mapSortToRequestPayload = exports.mapPaginationToRequestPayload = exports.mapSortToTableState = exports.mapPaginationToTableState = void 0;
+const toolbar_1 = require("@snack-uikit/toolbar");
+const constants_1 = require("../../../../constants");
+const mapPaginationToTableState = (value) => {
+    if (!value || value.offset === undefined || value.limit === undefined) {
+        return { pageSize: constants_1.DEFAULT_PAGE_SIZE, pageIndex: 0 };
+    }
+    return {
+        pageSize: value.limit || constants_1.DEFAULT_PAGE_SIZE,
+        pageIndex: Math.floor(value.offset / value.limit),
+    };
+};
+exports.mapPaginationToTableState = mapPaginationToTableState;
+const mapSortToTableState = (value = []) => value.map(column => ({
+    id: column.field,
+    desc: column.direction === '-',
+}));
+exports.mapSortToTableState = mapSortToTableState;
+const mapPaginationToRequestPayload = (value) => {
+    if (!value)
+        return undefined;
+    if ('limit' in value || 'offset' in value) {
+        return value;
+    }
+    return {
+        limit: value.pageSize,
+        offset: value.pageSize * value.pageIndex,
+    };
+};
+exports.mapPaginationToRequestPayload = mapPaginationToRequestPayload;
+const mapSortToRequestPayload = (value) => value === null || value === void 0 ? void 0 : value.map(column => ({
+    field: column.id,
+    direction: (column.desc ? '-' : '+'),
+}));
+exports.mapSortToRequestPayload = mapSortToRequestPayload;
+/** Вспомогательная функция для преобразования состояния таблицы к формату RequestPayloadParams */
+const formatTableStateToRequestPayload = ({ pagination, sorting, search, filter, }) => (0, toolbar_1.formatFilterStateToRequestPayload)({
+    filter,
+    search,
+    pagination: (0, exports.mapPaginationToRequestPayload)(pagination),
+    ordering: (0, exports.mapSortToRequestPayload)(sorting),
+});
+exports.formatTableStateToRequestPayload = formatTableStateToRequestPayload;

package/dist/cjs/components/MobileTable/utils/saveTableState/validators.d.ts

@@ -0,0 +1,5 @@
+import { RequestPayloadParams } from '@cloud-ru/ft-request-payload-transform';
+import { ChipChoiceRowProps } from '@snack-uikit/chips';
+export declare const validatePaging: (value: unknown) => value is RequestPayloadParams["pagination"];
+export declare const validateSorting: (value: unknown) => value is RequestPayloadParams["ordering"];
+export declare const validateFilter: <TFilters extends Record<string, unknown>>(value: unknown, filterSettings: ChipChoiceRowProps<TFilters>["filters"]) => value is TFilters;

package/dist/cjs/components/MobileTable/utils/saveTableState/validators.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateFilter = exports.validateSorting = exports.validatePaging = void 0;
+const validatePaging = (value) => typeof (value === null || value === void 0 ? void 0 : value.limit) === 'number' &&
+    typeof (value === null || value === void 0 ? void 0 : value.offset) === 'number';
+exports.validatePaging = validatePaging;
+const validateSorting = (value) => !value ||
+    value.every(column => typeof (column === null || column === void 0 ? void 0 : column.field) === 'string' && typeof (column === null || column === void 0 ? void 0 : column.direction) === 'string');
+exports.validateSorting = validateSorting;
+const validateFilter = (value, filterSettings) => typeof value === 'object' &&
+    value !== null &&
+    Object.keys(value).every(field => Boolean(filterSettings.find(setting => setting.id === field)));
+exports.validateFilter = validateFilter;

package/dist/cjs/constants.d.ts

@@ -15,3 +15,4 @@ export declare const TEST_IDS: {
     statusLabel: string;
 };
 export declare const ROW_ACTIONS_COLUMN_ID = "rowActions";
+export declare const DEFAULT_PAGE_SIZE = 5;

package/dist/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ROW_ACTIONS_COLUMN_ID = exports.TEST_IDS = void 0;
+exports.DEFAULT_PAGE_SIZE = exports.ROW_ACTIONS_COLUMN_ID = exports.TEST_IDS = void 0;
 exports.TEST_IDS = {
     headerSortIndicator: 'table__header__sort-indicator',
     headerRow: 'table__header-row',
@@ -18,3 +18,4 @@ exports.TEST_IDS = {
     statusLabel: 'table__status-label',
 };
 exports.ROW_ACTIONS_COLUMN_ID = 'rowActions';
+exports.DEFAULT_PAGE_SIZE = 5;

package/dist/cjs/index.d.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './helperComponents';

package/dist/cjs/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components"), exports);
+__exportStar(require("./helperComponents"), exports);

package/dist/esm/components/AdaptiveServerTable/AdaptiveServerTable.js

@@ -12,15 +12,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ServerTable as DesktopTable } from '@snack-uikit/table';
-import { DEFAULT_PAGE_SIZE, DEFAULT_PAGINATION_LIMIT } from '../constants';
-import { useStateControl } from '../hooks';
+import { useValueControl } from '@snack-uikit/utils';
+import { DEFAULT_PAGE_SIZE } from '../../constants';
 import { MobileTable } from '../MobileTable';
-import { onSearchDebounced } from '../utils';
+import { DEFAULT_PAGINATION_LIMIT } from './constants';
+import { onSearchDebounced } from './utils';
 export function AdaptiveServerTable(_a) {
     var { layoutType } = _a, props = __rest(_a, ["layoutType"]);
     const isMobile = layoutType === 'mobile';
     const { onChangePage, search: searchProp, pagination, items, total = DEFAULT_PAGINATION_LIMIT, limit = DEFAULT_PAGINATION_LIMIT, offset = 0 } = props, rest = __rest(props, ["onChangePage", "search", "pagination", "items", "total", "limit", "offset"]);
-    const { state: search, onStateChange: setSearch } = useStateControl(searchProp, '');
+    const [search, setSearch] = useValueControl(searchProp !== null && searchProp !== void 0 ? searchProp : { defaultValue: '' });
     const [tempSearch, setTempSearch] = useState(search || '');
     useEffect(() => {
         var _a;

package/dist/{cjs/components → esm/components/AdaptiveServerTable}/constants.d.ts

@@ -1,3 +1,2 @@
-export declare const DEFAULT_PAGE_SIZE = 5;
 export declare const SEARCH_DELAY = 500;
 export declare const DEFAULT_PAGINATION_LIMIT = 10;

package/dist/esm/components/{constants.js → AdaptiveServerTable/constants.js}

@@ -1,3 +1,2 @@
-export const DEFAULT_PAGE_SIZE = 5;
 export const SEARCH_DELAY = 500;
 export const DEFAULT_PAGINATION_LIMIT = 10;

package/dist/esm/components/{utils.d.ts → AdaptiveServerTable/utils.d.ts}

@@ -1,5 +1,3 @@
-import { FilterFn } from '@tanstack/react-table';
-export declare const fuzzyFilter: FilterFn<any>;
 type OnSearchDebouncedType = (newValue: string, onChange: (newValue: string) => void) => void;
 export declare const onSearchDebounced: OnSearchDebouncedType;
 export {};

package/dist/esm/components/AdaptiveServerTable/utils.js

@@ -0,0 +1,5 @@
+import debounce from 'lodash.debounce';
+import { SEARCH_DELAY } from './constants';
+export const onSearchDebounced = debounce((newValue, onChange) => {
+    onChange(newValue);
+}, SEARCH_DELAY);

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

@@ -0,0 +1,7 @@
+import { FiltersState } from '@cloud-ru/uikit-product-mobile-chips';
+import { MobileTableProps } from './types';
+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 → MobileTable/MobileTable.js}

@@ -18,19 +18,19 @@ import { MobileToolbar } from '@cloud-ru/uikit-product-mobile-toolbar';
 import { extractSupportProps } from '@cloud-ru/uikit-product-utils';
 import { SkeletonContextProvider } from '@snack-uikit/skeleton';
 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 { useValueControl } from '@snack-uikit/utils';
+import { DEFAULT_PAGE_SIZE } from '../../constants';
+import { ColumnsSettings, getRowActionsColumnDef, getStatusColumnDef, TableCard, TableEmptyState, TablePagination, TableSorting, useEmptyState, } from '../../helperComponents';
+import { useFilters, useLoadingTable } from './hooks';
 import styles from './styles.module.css';
-import { fuzzyFilter } from './utils';
+import { fuzzyFilter, getPersistedStateValidator, mapPaginationToRequestPayload, mapPaginationToTableState, mapSortToRequestPayload, mapSortToTableState, } 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, 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, '');
-    const { state: pagination, onStateChange: onPaginationChange } = useStateControl(paginationProp, defaultPaginationState);
-    const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
+    const [sorting = [], onSortingChange] = useValueControl(sortingProp !== null && sortingProp !== void 0 ? sortingProp : { defaultValue: [] });
+    const [globalFilter = '', onGlobalFilterChange] = useValueControl(search !== null && search !== void 0 ? search : { defaultValue: '' });
+    const [pagination = defaultPaginationState, onPaginationChange] = useValueControl(paginationProp !== null && paginationProp !== void 0 ? paginationProp : { defaultValue: defaultPaginationState });
+    const [rowSelection = {}, onRowSelectionChange] = useValueControl(rowSelectionProp !== null && rowSelectionProp !== void 0 ? rowSelectionProp : { defaultValue: {} });
     const enableRowSelection = useCallback((row) => {
         const parent = row.getParentRow();
         const isParentSelected = parent ? parent.getCanSelect() : true;
@@ -167,6 +167,8 @@ export function MobileTable(_a) {
     const hasSortableColumns = useMemo(() => columnDefinitions.some(column => column.enableSorting !== false), [columnDefinitions]);
     const shouldShowSorting = useMemo(() => Boolean(sortingProp) || hasSortableColumns, [sortingProp, hasSortableColumns]);
     const tableFilteredRows = table.getFilteredRowModel().rows;
+    const { filter, patchedFilter, setFilter, setFilterVisibility } = useFilters({ columnFilters });
+    const validatePersistedState = useMemo(() => getPersistedStateValidator(columnFilters), [columnFilters]);
     usePageReset({
         manualPagination,
         maximumAvailablePage: pageCount || tableFilteredRows.length / pagination.pageSize,
@@ -181,7 +183,28 @@ 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 || 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, selectionAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance, 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: patchedFilter, 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(), persist: (savedState === null || savedState === void 0 ? void 0 : savedState.id) && (savedState === null || savedState === void 0 ? void 0 : savedState.filterQueryKey)
+                        ? {
+                            id: savedState.id,
+                            filterQueryKey: savedState.filterQueryKey,
+                            validateData: data => validatePersistedState(data),
+                            state: {
+                                pagination: mapPaginationToRequestPayload(pagination),
+                                ordering: mapSortToRequestPayload(sorting),
+                                filter,
+                                search: globalFilter || '',
+                            },
+                            onLoad: state => {
+                                state.pagination && onPaginationChange(mapPaginationToTableState(state.pagination));
+                                state.search && onGlobalFilterChange(state.search);
+                                state.ordering && onSortingChange(mapSortToTableState(state.ordering));
+                                if (state.filter) {
+                                    setFilter(state.filter);
+                                    setFilterVisibility(Object.keys(state.filter));
+                                }
+                            },
+                        }
+                        : undefined }) })), _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, selectionAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance, 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/MobileTable/hooks/index.d.ts

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

package/dist/esm/components/MobileTable/hooks/index.js

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

package/dist/esm/components/MobileTable/hooks/useFilters/index.d.ts

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

package/dist/esm/components/MobileTable/hooks/useFilters/index.js

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

package/dist/esm/components/MobileTable/hooks/useFilters/useFilters.d.ts

@@ -0,0 +1,78 @@
+import { FiltersState } from '@cloud-ru/uikit-product-mobile-chips';
+import { MobileTableProps } from '../../types';
+type useFiltersProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = Pick<MobileTableProps<TData, TFilters>, 'columnFilters'>;
+export declare function useFilters<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ columnFilters, }: useFiltersProps<TData, TFilters>): {
+    filter: TFilters | undefined;
+    setFilter: (value: any, ...args: any[]) => any;
+    patchedFilter: {
+        value: TFilters | undefined;
+        onChange: (filter: TFilters) => void;
+        visibleFilters: string[];
+        onVisibleFiltersChange: (value: any, ...args: any[]) => any;
+        'data-test-id'?: string;
+        "aria-activedescendant"?: string | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-description"?: string | undefined;
+        "aria-details"?: string | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
+        defaultValue?: Partial<TFilters> | undefined;
+        filters: import("@cloud-ru/uikit-product-mobile-chips").MobileChipChoiceRowFilter[];
+        size?: import("@cloud-ru/uikit-product-mobile-chips/dist/esm/components/MobileChipChoiceRow/types").ChipChoiceRowSize;
+        className?: string;
+        showClearButton?: boolean;
+        showAddButton?: boolean;
+        initialOpen?: boolean;
+        open: boolean;
+        onOpenChange: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    } | undefined;
+    setFilterVisibility: (value: any, ...args: any[]) => any;
+};
+export {};

package/dist/esm/components/MobileTable/hooks/useFilters/useFilters.js

@@ -0,0 +1,28 @@
+import { useMemo, useState } from 'react';
+import { useValueControl } from '@snack-uikit/utils';
+import { getInitialColumnsFiltersOpenValue } from './utils';
+export function useFilters({ columnFilters, }) {
+    const [areColumnFiltersOpen, setAreColumnFiltersOpen] = useState(() => getInitialColumnsFiltersOpenValue(columnFilters));
+    const [filter, setFilter] = useValueControl({
+        value: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.value,
+        defaultValue: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.defaultValue,
+        onChange: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.onChange,
+    });
+    const [filterVisibility = [], setFilterVisibility] = useValueControl({
+        value: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.visibleFilters,
+        defaultValue: [],
+        onChange: columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.onVisibleFiltersChange,
+    });
+    const patchedFilter = useMemo(() => {
+        if (!columnFilters) {
+            return undefined;
+        }
+        return Object.assign(Object.assign({ open: areColumnFiltersOpen, onOpenChange: setAreColumnFiltersOpen }, columnFilters), { value: filter, onChange: setFilter, visibleFilters: filterVisibility, onVisibleFiltersChange: setFilterVisibility });
+    }, [columnFilters, areColumnFiltersOpen, filter, setFilter, filterVisibility, setFilterVisibility]);
+    return {
+        filter,
+        setFilter,
+        patchedFilter,
+        setFilterVisibility,
+    };
+}

package/dist/esm/components/MobileTable/hooks/useFilters/utils/getInitialColumnsFiltersOpenValue.d.ts

@@ -0,0 +1,2 @@
+import { MobileTableProps } from '../../../types';
+export declare function getInitialColumnsFiltersOpenValue<TData extends object>(columnFilters: MobileTableProps<TData>['columnFilters']): boolean;

package/dist/esm/components/MobileTable/hooks/useFilters/utils/getInitialColumnsFiltersOpenValue.js

@@ -0,0 +1,8 @@
+export function getInitialColumnsFiltersOpenValue(columnFilters) {
+    if (!columnFilters) {
+        return false;
+    }
+    return 'initialOpen' in columnFilters && typeof columnFilters.initialOpen === 'boolean'
+        ? columnFilters.initialOpen
+        : true;
+}

package/dist/esm/components/MobileTable/hooks/useFilters/utils/index.d.ts

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

package/dist/esm/components/MobileTable/hooks/useFilters/utils/index.js

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

package/dist/esm/components/{hooks.d.ts → MobileTable/hooks/useLoadingTable.d.ts}

@@ -1,13 +1,5 @@
 import { FiltersState } from '@cloud-ru/uikit-product-mobile-chips';
 import { TableProps } from '@snack-uikit/table';
-export declare function useStateControl<TState>(control: {
-    initialState?: TState;
-    state?: TState;
-    onChange?(state: TState): void;
-} | undefined, defaultState: TState): {
-    state: TState;
-    onStateChange: import("uncontrollable").Handler;
-};
 type UseLoadingTableProps<TData extends object, TFilters extends FiltersState> = {
     columnDefinitions: TableProps<TData, TFilters>['columnDefinitions'];
     pageSize: number;

package/dist/esm/components/MobileTable/hooks/useLoadingTable.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { useMemo } from 'react';
+import { SkeletonText } from '@snack-uikit/skeleton';
+import { ROW_ACTIONS_COLUMN_ID } from '../../../constants';
+export function useLoadingTable({ pageSize, columnDefinitions, }) {
+    const data = useMemo(() => (Array.from({ length: pageSize }).map(() => ({})) || []), [pageSize]);
+    const columns = useMemo(() => columnDefinitions
+        .filter(column => column.id !== ROW_ACTIONS_COLUMN_ID)
+        .map(column => (Object.assign(Object.assign({}, column), { cell: () => _jsx(SkeletonText, { lines: 1, width: '100%' }) }))), [columnDefinitions]);
+    const loadingTable = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    });
+    return { loadingTable };
+}

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

@@ -0,0 +1,3 @@
+export * from './MobileTable';
+export * from './types';
+export { formatTableStateToRequestPayload } from './utils/saveTableState/mappers';

package/dist/esm/components/MobileTable/index.js

@@ -0,0 +1,3 @@
+export * from './MobileTable';
+export * from './types';
+export { formatTableStateToRequestPayload } from './utils/saveTableState/mappers';

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

@@ -0,0 +1,11 @@
+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' | '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<TFilters> & {
+        initialOpen?: boolean;
+    };
+}>;

package/dist/esm/components/MobileTable/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/MobileTable/utils/fuzzyFilter.d.ts

@@ -0,0 +1,2 @@
+import { FilterFn } from '@tanstack/react-table';
+export declare const fuzzyFilter: FilterFn<any>;

package/dist/esm/components/{utils.js → MobileTable/utils/fuzzyFilter.js}

@@ -1,6 +1,4 @@
 import { rankItem } from '@tanstack/match-sorter-utils';
-import debounce from 'lodash.debounce';
-import { SEARCH_DELAY } from './constants';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const fuzzyFilter = (row, columnId, value, addMeta) => {
     const itemRank = rankItem(row.getValue(columnId), value);
@@ -9,6 +7,3 @@ export const fuzzyFilter = (row, columnId, value, addMeta) => {
     });
     return itemRank.passed;
 };
-export const onSearchDebounced = debounce((newValue, onChange) => {
-    onChange(newValue);
-}, SEARCH_DELAY);

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

@@ -0,0 +1,2 @@
+export * from './fuzzyFilter';
+export * from './saveTableState';

package/dist/esm/components/MobileTable/utils/index.js

@@ -0,0 +1,2 @@
+export * from './fuzzyFilter';
+export * from './saveTableState';

package/dist/esm/components/MobileTable/utils/saveTableState/getPersistedStateValidator.d.ts

@@ -0,0 +1,4 @@
+import { FiltersState } from '@snack-uikit/chips';
+import { PersistedFilterState } from '@snack-uikit/toolbar';
+import { MobileTableProps } from '../../types';
+export declare const getPersistedStateValidator: <TData extends object, TFilters extends FiltersState = Record<string, unknown>>(columnFilters: MobileTableProps<TData, TFilters>["columnFilters"]) => (data: unknown) => data is PersistedFilterState<TFilters>;

package/dist/esm/components/MobileTable/utils/saveTableState/getPersistedStateValidator.js

@@ -0,0 +1,9 @@
+import { validateFilter, validatePaging, validateSorting } from './validators';
+export const getPersistedStateValidator = (columnFilters) => (data) => {
+    const dataAsSettings = data;
+    const isPaginationValid = validatePaging(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.pagination);
+    const isSortingValid = validateSorting(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.ordering);
+    const isSearchValid = !(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.search) || typeof (dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.search) === 'string';
+    const isFilterValid = Boolean((columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.filters) && validateFilter(dataAsSettings.filter, columnFilters.filters));
+    return isPaginationValid && isSortingValid && isSearchValid && isFilterValid;
+};

package/dist/esm/components/MobileTable/utils/saveTableState/index.d.ts

@@ -0,0 +1,3 @@
+export * from './validators';
+export * from './mappers';
+export * from './getPersistedStateValidator';

package/dist/esm/components/MobileTable/utils/saveTableState/index.js

@@ -0,0 +1,3 @@
+export * from './validators';
+export * from './mappers';
+export * from './getPersistedStateValidator';

package/dist/esm/components/MobileTable/utils/saveTableState/mappers.d.ts

@@ -0,0 +1,18 @@
+import { RequestPayloadParams } from '@cloud-ru/ft-request-payload-transform';
+import { PaginationState, SortingState } from '@tanstack/react-table';
+import { FiltersState } from '@snack-uikit/chips';
+import { PersistedFilterState } from '@snack-uikit/toolbar';
+export declare const mapPaginationToTableState: (value?: RequestPayloadParams["pagination"]) => PaginationState;
+export declare const mapSortToTableState: (value?: RequestPayloadParams["ordering"]) => SortingState;
+export declare const mapPaginationToRequestPayload: (value?: PaginationState | RequestPayloadParams["pagination"]) => RequestPayloadParams["pagination"];
+export declare const mapSortToRequestPayload: (value?: SortingState) => RequestPayloadParams["ordering"];
+/** Вспомогательная функция для преобразования состояния таблицы к формату RequestPayloadParams */
+export declare const formatTableStateToRequestPayload: <T extends FiltersState>({ pagination, sorting, search, filter, }: Omit<PersistedFilterState<T>, "pagination" | "sorting"> & {
+    pagination?: PaginationState | RequestPayloadParams["pagination"];
+    sorting?: SortingState;
+}) => {
+    toObject(): Partial<RequestPayloadParams>;
+    toString(params?: {
+        encode?: boolean;
+    }): string;
+};

package/dist/esm/components/MobileTable/utils/saveTableState/mappers.js

@@ -0,0 +1,37 @@
+import { formatFilterStateToRequestPayload } from '@snack-uikit/toolbar';
+import { DEFAULT_PAGE_SIZE } from '../../../../constants';
+export const mapPaginationToTableState = (value) => {
+    if (!value || value.offset === undefined || value.limit === undefined) {
+        return { pageSize: DEFAULT_PAGE_SIZE, pageIndex: 0 };
+    }
+    return {
+        pageSize: value.limit || DEFAULT_PAGE_SIZE,
+        pageIndex: Math.floor(value.offset / value.limit),
+    };
+};
+export const mapSortToTableState = (value = []) => value.map(column => ({
+    id: column.field,
+    desc: column.direction === '-',
+}));
+export const mapPaginationToRequestPayload = (value) => {
+    if (!value)
+        return undefined;
+    if ('limit' in value || 'offset' in value) {
+        return value;
+    }
+    return {
+        limit: value.pageSize,
+        offset: value.pageSize * value.pageIndex,
+    };
+};
+export const mapSortToRequestPayload = (value) => value === null || value === void 0 ? void 0 : value.map(column => ({
+    field: column.id,
+    direction: (column.desc ? '-' : '+'),
+}));
+/** Вспомогательная функция для преобразования состояния таблицы к формату RequestPayloadParams */
+export const formatTableStateToRequestPayload = ({ pagination, sorting, search, filter, }) => formatFilterStateToRequestPayload({
+    filter,
+    search,
+    pagination: mapPaginationToRequestPayload(pagination),
+    ordering: mapSortToRequestPayload(sorting),
+});

package/dist/esm/components/MobileTable/utils/saveTableState/validators.d.ts

@@ -0,0 +1,5 @@
+import { RequestPayloadParams } from '@cloud-ru/ft-request-payload-transform';
+import { ChipChoiceRowProps } from '@snack-uikit/chips';
+export declare const validatePaging: (value: unknown) => value is RequestPayloadParams["pagination"];
+export declare const validateSorting: (value: unknown) => value is RequestPayloadParams["ordering"];
+export declare const validateFilter: <TFilters extends Record<string, unknown>>(value: unknown, filterSettings: ChipChoiceRowProps<TFilters>["filters"]) => value is TFilters;

package/dist/esm/components/MobileTable/utils/saveTableState/validators.js

@@ -0,0 +1,7 @@
+export const validatePaging = (value) => typeof (value === null || value === void 0 ? void 0 : value.limit) === 'number' &&
+    typeof (value === null || value === void 0 ? void 0 : value.offset) === 'number';
+export const validateSorting = (value) => !value ||
+    value.every(column => typeof (column === null || column === void 0 ? void 0 : column.field) === 'string' && typeof (column === null || column === void 0 ? void 0 : column.direction) === 'string');
+export const validateFilter = (value, filterSettings) => typeof value === 'object' &&
+    value !== null &&
+    Object.keys(value).every(field => Boolean(filterSettings.find(setting => setting.id === field)));

package/dist/esm/constants.d.ts

@@ -15,3 +15,4 @@ export declare const TEST_IDS: {
     statusLabel: string;
 };
 export declare const ROW_ACTIONS_COLUMN_ID = "rowActions";
+export declare const DEFAULT_PAGE_SIZE = 5;

package/dist/esm/constants.js

@@ -15,3 +15,4 @@ export const TEST_IDS = {
     statusLabel: 'table__status-label',
 };
 export const ROW_ACTIONS_COLUMN_ID = 'rowActions';
+export const DEFAULT_PAGE_SIZE = 5;

package/dist/esm/index.d.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './helperComponents';

package/dist/esm/index.js

@@ -1 +1,2 @@
 export * from './components';
+export * from './helperComponents';