@cloud-ru/uikit-product-mobile-toolbar 0.4.13 → 0.5.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.5.0 (2026-01-21)
+
+
+### Features
+
+* **FF-7319:** persist state functionality in mobile toolbar ([95099d3](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/95099d3de3883152d2eb8066537c4bb8ad74ed92))
+
+
+
+
+
+## 0.4.14 (2025-12-17)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-icons@16.1.1](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/icons/CHANGELOG.md)
+* [@cloud-ru/uikit-product-mobile-chips@0.8.47](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/mobile-chips/CHANGELOG.md)
+* [@cloud-ru/uikit-product-mobile-dropdown@0.9.31](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/mobile-dropdown/CHANGELOG.md)
+* [@cloud-ru/uikit-product-mobile-tooltip@0.5.4](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/mobile-tooltip/CHANGELOG.md)
+* [@cloud-ru/uikit-product-utils@8.1.0](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
 ## 0.4.13 (2025-12-12)
 
 ### Only dependencies have been changed

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

@@ -1,7 +1,11 @@
 import { FiltersState } from '@cloud-ru/uikit-product-mobile-chips';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { CheckedToolbarProps, DefaultToolbarProps, FilterRow } from './types';
+import { CheckedToolbarProps, DefaultToolbarProps, FilterRow, ToolbarPersistConfig } from './types';
 export type MobileToolbarProps<TState extends FiltersState = Record<string, unknown>> = WithSupportProps<DefaultToolbarProps | CheckedToolbarProps> & {
     filterRow?: FilterRow<TState>;
+    /** Конфиг для сохранения состояния в localStorage и queryParams. <br>
+     *  Поле id должно быть уникальным для каждого инстанса компонента. <br>
+     *  */
+    persist?: ToolbarPersistConfig<TState>;
 };
-export declare function MobileToolbar<TState extends FiltersState = Record<string, unknown>>({ className, after, outline, moreActions, onRefresh, search, filterRow: filterRowProps, ...rest }: MobileToolbarProps<TState>): import("react/jsx-runtime").JSX.Element;
+export declare function MobileToolbar<TState extends FiltersState = Record<string, unknown>>({ className, after, outline, moreActions, onRefresh, search, filterRow: filterRowProps, persist, ...rest }: MobileToolbarProps<TState>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MobileToolbar/MobileToolbar.js

@@ -32,12 +32,13 @@ const hooks_1 = require("./hooks");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function MobileToolbar(_a) {
     var _b, _c;
-    var { className, after, outline, moreActions, onRefresh, search, filterRow: filterRowProps } = _a, rest = __rest(_a, ["className", "after", "outline", "moreActions", "onRefresh", "search", "filterRow"]);
+    var { className, after, outline, moreActions, onRefresh, search, filterRow: filterRowProps, persist } = _a, rest = __rest(_a, ["className", "after", "outline", "moreActions", "onRefresh", "search", "filterRow", "persist"]);
     const needsBulkActions = (0, helpers_1.isBulkActionsProps)(rest);
     const hasVisibleRefresh = onRefresh && !(moreActions === null || moreActions === void 0 ? void 0 : moreActions.length);
     const hasLeftSideElements = Boolean(needsBulkActions || hasVisibleRefresh);
     const resizingContainerRef = (0, react_1.useRef)(null);
     const { t } = (0, uikit_product_locale_1.useLocale)('MobileToolbar');
+    (0, hooks_1.usePersistState)({ persist, filter: filterRowProps === null || filterRowProps === void 0 ? void 0 : filterRowProps.value, search: search === null || search === void 0 ? void 0 : search.value });
     const moreActionsProps = (0, react_1.useMemo)(() => onRefresh
         ? {
             pinTop: [{ content: { option: t('refresh') }, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.UpdateSVG, {}), onClick: onRefresh }],

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

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

package/dist/cjs/components/MobileToolbar/hooks/index.js

@@ -0,0 +1,18 @@
+"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("./useFilters"), exports);
+__exportStar(require("./usePersistState"), exports);

package/dist/cjs/components/MobileToolbar/{hooks.d.ts → hooks/useFilters.d.ts}

@@ -1,6 +1,6 @@
 import { FiltersState } from '@cloud-ru/uikit-product-mobile-chips';
-import { FilterButtonProps } from '../../helperComponents';
-import { FilterRow } from './types';
+import { FilterButtonProps } from '../../../helperComponents';
+import { FilterRow } from '../types';
 type UseFiltersProps<TState extends FiltersState> = {
     filterRow?: FilterRow<TState>;
 };

package/dist/cjs/components/MobileToolbar/hooks/usePersistState/index.d.ts

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

package/dist/cjs/components/MobileToolbar/hooks/usePersistState/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("./usePersistState"), exports);

package/dist/cjs/components/MobileToolbar/hooks/usePersistState/usePersistState.d.ts

@@ -0,0 +1,9 @@
+import { FiltersState } from '@snack-uikit/chips';
+import { ToolbarPersistConfig } from '../../types';
+type usePersistStateProps<TState extends FiltersState = Record<string, unknown>> = {
+    persist?: ToolbarPersistConfig<TState>;
+    filter?: TState;
+    search?: string;
+};
+export declare function usePersistState<TState extends FiltersState = Record<string, unknown>>({ persist, filter, search, }: usePersistStateProps<TState>): void;
+export {};

package/dist/cjs/components/MobileToolbar/hooks/usePersistState/usePersistState.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePersistState = usePersistState;
+const react_1 = require("react");
+const utils_1 = require("@snack-uikit/utils");
+const utils_2 = require("./utils");
+function usePersistState({ persist, filter, search, }) {
+    const hasHydratedRef = (0, react_1.useRef)(false);
+    const dataPersistOptions = (0, react_1.useMemo)(() => {
+        if (!(persist === null || persist === void 0 ? void 0 : persist.filterQueryKey) || !(persist === null || persist === void 0 ? void 0 : persist.id))
+            return undefined;
+        const defaultValidate = (value) => {
+            const filterOk = (value === null || value === void 0 ? void 0 : value.filter) === undefined || (typeof value.filter === 'object' && value.filter !== null);
+            const searchOk = (value === null || value === void 0 ? void 0 : value.search) === undefined || typeof value.search === 'string';
+            return Boolean(filterOk && searchOk);
+        };
+        const combinedValidate = (value) => {
+            const baseValid = defaultValidate(value);
+            return (persist === null || persist === void 0 ? void 0 : persist.validateData) ? baseValid && persist.validateData(value) : baseValid;
+        };
+        return {
+            queryKey: persist.filterQueryKey,
+            localStorageKey: `${persist.id}_filter`,
+            validateData: combinedValidate,
+        };
+    }, [persist]);
+    const { getDefaultData, setDataToStorages } = (0, utils_1.useDataPersist)({
+        options: dataPersistOptions,
+        serializer: value => ((persist === null || persist === void 0 ? void 0 : persist.serializer) ? persist.serializer(value) : (0, utils_2.defaultSerializer)(value)),
+        parser: (value) => ((persist === null || persist === void 0 ? void 0 : persist.parser) ? persist.parser(value) : (0, utils_2.defaultParser)(value)),
+    });
+    const defaultState = (0, react_1.useMemo)(getDefaultData, [getDefaultData]);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (hasHydratedRef.current) {
+            return;
+        }
+        if (defaultState) {
+            (_a = persist === null || persist === void 0 ? void 0 : persist.onLoad) === null || _a === void 0 ? void 0 : _a.call(persist, Object.assign(Object.assign({}, defaultState), { filter: (0, utils_2.prepareDataForFilter)((_b = defaultState.filter) !== null && _b !== void 0 ? _b : {}) }));
+        }
+        // mark as hydrated after attempting to load defaultState
+        hasHydratedRef.current = true;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [defaultState]);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (!(persist === null || persist === void 0 ? void 0 : persist.id) || !(persist === null || persist === void 0 ? void 0 : persist.filterQueryKey) || !hasHydratedRef.current) {
+            return;
+        }
+        const snapshot = (_b = (_a = persist.state) !== null && _a !== void 0 ? _a : getDefaultData()) !== null && _b !== void 0 ? _b : {};
+        if (filter) {
+            snapshot.filter = filter;
+        }
+        if (search !== undefined) {
+            snapshot.search = search;
+        }
+        if (Object.keys(snapshot).length === 0)
+            return;
+        setDataToStorages(snapshot);
+    }, [persist === null || persist === void 0 ? void 0 : persist.id, persist === null || persist === void 0 ? void 0 : persist.filterQueryKey, persist === null || persist === void 0 ? void 0 : persist.state, filter, search, setDataToStorages, getDefaultData]);
+}

package/dist/cjs/components/MobileToolbar/hooks/usePersistState/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './parser';
+export * from './serializer';

package/dist/cjs/components/MobileToolbar/hooks/usePersistState/utils/index.js

@@ -0,0 +1,18 @@
+"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("./parser"), exports);
+__exportStar(require("./serializer"), exports);

package/dist/cjs/components/MobileToolbar/hooks/usePersistState/utils/parser.d.ts

@@ -0,0 +1,4 @@
+import { FiltersState } from '@snack-uikit/chips';
+import { PersistedFilterState } from '../../../types';
+export declare const defaultParser: <T extends FiltersState>(value: string) => PersistedFilterState<T>;
+export declare const prepareDataForFilter: <T>(filter: Record<string, unknown>) => T;

package/dist/cjs/components/MobileToolbar/hooks/usePersistState/utils/parser.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prepareDataForFilter = exports.defaultParser = void 0;
+const ft_request_payload_transform_1 = require("@cloud-ru/ft-request-payload-transform");
+const toolbar_1 = require("@snack-uikit/toolbar");
+const parseValue = (value) => {
+    if ((0, toolbar_1.isDateString)(value)) {
+        return new Date(value);
+    }
+    if (typeof value === 'boolean') {
+        return String(value);
+    }
+    return value;
+};
+const mapFilterFromPayload = (value) => {
+    if (!value) {
+        return undefined;
+    }
+    return Object.fromEntries(value.map(filter => {
+        if (Array.isArray(filter.value)) {
+            return [filter.field, filter.value.map(parseValue)];
+        }
+        return [filter.field, parseValue(filter.value)];
+    }));
+};
+const defaultParser = (value) => {
+    var _a, _b;
+    const parsed = (0, ft_request_payload_transform_1.parseQueryParamsString)(value);
+    return {
+        pagination: parsed === null || parsed === void 0 ? void 0 : parsed.pagination,
+        ordering: parsed === null || parsed === void 0 ? void 0 : parsed.ordering,
+        search: ((_a = parsed === null || parsed === void 0 ? void 0 : parsed.search) === null || _a === void 0 ? void 0 : _a.toString()) || '',
+        filter: (_b = mapFilterFromPayload(parsed === null || parsed === void 0 ? void 0 : parsed.filter)) !== null && _b !== void 0 ? _b : {},
+    };
+};
+exports.defaultParser = defaultParser;
+const prepareDataForFilter = (filter) => Object.entries(filter).reduce((acc, [key, value]) => {
+    if (Array.isArray(value)) {
+        acc[key] = value.map(parseValue);
+    }
+    else {
+        acc[key] = parseValue(value);
+    }
+    return acc;
+}, Object.assign({}, filter));
+exports.prepareDataForFilter = prepareDataForFilter;

package/dist/cjs/components/MobileToolbar/hooks/usePersistState/utils/serializer.d.ts

@@ -0,0 +1,11 @@
+import { RequestPayloadParams } from '@cloud-ru/ft-request-payload-transform';
+import { FiltersState } from '@snack-uikit/chips';
+import { PersistedFilterState } from '../../../types';
+/** Вспомогательная функция для преобразования состояния тулбара к формату RequestPayloadParams */
+export declare const formatFilterStateToRequestPayload: <T extends FiltersState>(value?: PersistedFilterState<T> | null) => {
+    toObject(): Partial<RequestPayloadParams>;
+    toString(params?: {
+        encode?: boolean;
+    }): string;
+};
+export declare const defaultSerializer: <T extends FiltersState>(value: PersistedFilterState<T>) => string;

package/dist/cjs/components/MobileToolbar/hooks/usePersistState/utils/serializer.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultSerializer = exports.formatFilterStateToRequestPayload = void 0;
+const ft_request_payload_transform_1 = require("@cloud-ru/ft-request-payload-transform");
+const toolbar_1 = require("@snack-uikit/toolbar");
+const mapValueToString = (filter) => {
+    if (filter instanceof Date) {
+        return filter.toISOString();
+    }
+    if ((0, toolbar_1.isDateString)(filter)) {
+        return filter;
+    }
+    return filter;
+};
+const mapFilterToPayload = (value) => {
+    if (!value) {
+        return undefined;
+    }
+    return Object.entries(value)
+        .filter(([, v]) => v !== undefined)
+        .map(([key, v]) => Array.isArray(v)
+        ? {
+            value: v.map(mapValueToString),
+            condition: 'in',
+            field: key,
+        }
+        : {
+            value: mapValueToString(v),
+            condition: 'eq',
+            field: key,
+        });
+};
+/** Вспомогательная функция для преобразования состояния тулбара к формату RequestPayloadParams */
+const formatFilterStateToRequestPayload = (value) => {
+    var _a;
+    return (0, ft_request_payload_transform_1.createRequestPayload)({
+        pagination: value === null || value === void 0 ? void 0 : value.pagination,
+        search: (_a = value === null || value === void 0 ? void 0 : value.search) !== null && _a !== void 0 ? _a : '',
+        ordering: value === null || value === void 0 ? void 0 : value.ordering,
+        filter: mapFilterToPayload(value === null || value === void 0 ? void 0 : value.filter),
+    });
+};
+exports.formatFilterStateToRequestPayload = formatFilterStateToRequestPayload;
+const defaultSerializer = (value) => (0, exports.formatFilterStateToRequestPayload)(value).toString();
+exports.defaultSerializer = defaultSerializer;

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

@@ -1,3 +1,4 @@
+import { RequestPayloadParams } from '@cloud-ru/ft-request-payload-transform';
 import { ReactNode } from 'react';
 import { FiltersState, MobileChipChoiceRowProps } from '@cloud-ru/uikit-product-mobile-chips';
 import { BulkActionsProps, MoreActionsProps } from '../../helperComponents';
@@ -41,4 +42,26 @@ export type FilterRow<TState extends FiltersState> = Omit<MobileChipChoiceRowPro
     initialOpen?: boolean;
     onOpenChange?(isOpen: boolean): void;
 };
+export type PersistedFilterState<T extends FiltersState> = {
+    pagination?: RequestPayloadParams['pagination'];
+    ordering?: RequestPayloadParams['ordering'];
+    search?: string;
+    filter?: T;
+};
+export type ToolbarPersistConfig<T extends FiltersState> = {
+    /** Уникальный id для текущего инстанса компонента */
+    id?: string;
+    /** Ключ для queryParams */
+    filterQueryKey?: string;
+    /** Валидатор сохраненных */
+    validateData?(value: unknown): value is PersistedFilterState<T>;
+    /** Custom-сериализация состояния перед сохранением в queryParams */
+    serializer?(value: PersistedFilterState<T>): string;
+    /** Custom-парсер queryParams для преобразования в данные состояния */
+    parser?(value: string): PersistedFilterState<T>;
+    /** Состояние для сохранения */
+    state?: PersistedFilterState<T>;
+    /** Колбэк при первом рендере для получения сохраненных данных и установки их в стейт */
+    onLoad?(state: PersistedFilterState<T>): void;
+};
 export {};

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

@@ -1,7 +1,11 @@
 import { FiltersState } from '@cloud-ru/uikit-product-mobile-chips';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { CheckedToolbarProps, DefaultToolbarProps, FilterRow } from './types';
+import { CheckedToolbarProps, DefaultToolbarProps, FilterRow, ToolbarPersistConfig } from './types';
 export type MobileToolbarProps<TState extends FiltersState = Record<string, unknown>> = WithSupportProps<DefaultToolbarProps | CheckedToolbarProps> & {
     filterRow?: FilterRow<TState>;
+    /** Конфиг для сохранения состояния в localStorage и queryParams. <br>
+     *  Поле id должно быть уникальным для каждого инстанса компонента. <br>
+     *  */
+    persist?: ToolbarPersistConfig<TState>;
 };
-export declare function MobileToolbar<TState extends FiltersState = Record<string, unknown>>({ className, after, outline, moreActions, onRefresh, search, filterRow: filterRowProps, ...rest }: MobileToolbarProps<TState>): import("react/jsx-runtime").JSX.Element;
+export declare function MobileToolbar<TState extends FiltersState = Record<string, unknown>>({ className, after, outline, moreActions, onRefresh, search, filterRow: filterRowProps, persist, ...rest }: MobileToolbarProps<TState>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MobileToolbar/MobileToolbar.js

@@ -22,16 +22,17 @@ import { TEST_IDS } from '../../constants';
 import { BulkActions, FilterButton, MoreActions, Separator } from '../../helperComponents';
 import { BulkActionsCheckbox } from '../../helperComponents/BulkActionsCheckbox';
 import { isBulkActionsProps } from './helpers';
-import { useFilters } from './hooks';
+import { useFilters, usePersistState } from './hooks';
 import styles from './styles.module.css';
 export function MobileToolbar(_a) {
     var _b, _c;
-    var { className, after, outline, moreActions, onRefresh, search, filterRow: filterRowProps } = _a, rest = __rest(_a, ["className", "after", "outline", "moreActions", "onRefresh", "search", "filterRow"]);
+    var { className, after, outline, moreActions, onRefresh, search, filterRow: filterRowProps, persist } = _a, rest = __rest(_a, ["className", "after", "outline", "moreActions", "onRefresh", "search", "filterRow", "persist"]);
     const needsBulkActions = isBulkActionsProps(rest);
     const hasVisibleRefresh = onRefresh && !(moreActions === null || moreActions === void 0 ? void 0 : moreActions.length);
     const hasLeftSideElements = Boolean(needsBulkActions || hasVisibleRefresh);
     const resizingContainerRef = useRef(null);
     const { t } = useLocale('MobileToolbar');
+    usePersistState({ persist, filter: filterRowProps === null || filterRowProps === void 0 ? void 0 : filterRowProps.value, search: search === null || search === void 0 ? void 0 : search.value });
     const moreActionsProps = useMemo(() => onRefresh
         ? {
             pinTop: [{ content: { option: t('refresh') }, icon: _jsx(UpdateSVG, {}), onClick: onRefresh }],

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

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

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

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

package/dist/esm/components/MobileToolbar/{hooks.d.ts → hooks/useFilters.d.ts}

@@ -1,6 +1,6 @@
 import { FiltersState } from '@cloud-ru/uikit-product-mobile-chips';
-import { FilterButtonProps } from '../../helperComponents';
-import { FilterRow } from './types';
+import { FilterButtonProps } from '../../../helperComponents';
+import { FilterRow } from '../types';
 type UseFiltersProps<TState extends FiltersState> = {
     filterRow?: FilterRow<TState>;
 };

package/dist/esm/components/MobileToolbar/hooks/usePersistState/index.d.ts

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

package/dist/esm/components/MobileToolbar/hooks/usePersistState/index.js

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

package/dist/esm/components/MobileToolbar/hooks/usePersistState/usePersistState.d.ts

@@ -0,0 +1,9 @@
+import { FiltersState } from '@snack-uikit/chips';
+import { ToolbarPersistConfig } from '../../types';
+type usePersistStateProps<TState extends FiltersState = Record<string, unknown>> = {
+    persist?: ToolbarPersistConfig<TState>;
+    filter?: TState;
+    search?: string;
+};
+export declare function usePersistState<TState extends FiltersState = Record<string, unknown>>({ persist, filter, search, }: usePersistStateProps<TState>): void;
+export {};

package/dist/esm/components/MobileToolbar/hooks/usePersistState/usePersistState.js

@@ -0,0 +1,58 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { useDataPersist } from '@snack-uikit/utils';
+import { defaultParser, defaultSerializer, prepareDataForFilter } from './utils';
+export function usePersistState({ persist, filter, search, }) {
+    const hasHydratedRef = useRef(false);
+    const dataPersistOptions = useMemo(() => {
+        if (!(persist === null || persist === void 0 ? void 0 : persist.filterQueryKey) || !(persist === null || persist === void 0 ? void 0 : persist.id))
+            return undefined;
+        const defaultValidate = (value) => {
+            const filterOk = (value === null || value === void 0 ? void 0 : value.filter) === undefined || (typeof value.filter === 'object' && value.filter !== null);
+            const searchOk = (value === null || value === void 0 ? void 0 : value.search) === undefined || typeof value.search === 'string';
+            return Boolean(filterOk && searchOk);
+        };
+        const combinedValidate = (value) => {
+            const baseValid = defaultValidate(value);
+            return (persist === null || persist === void 0 ? void 0 : persist.validateData) ? baseValid && persist.validateData(value) : baseValid;
+        };
+        return {
+            queryKey: persist.filterQueryKey,
+            localStorageKey: `${persist.id}_filter`,
+            validateData: combinedValidate,
+        };
+    }, [persist]);
+    const { getDefaultData, setDataToStorages } = useDataPersist({
+        options: dataPersistOptions,
+        serializer: value => ((persist === null || persist === void 0 ? void 0 : persist.serializer) ? persist.serializer(value) : defaultSerializer(value)),
+        parser: (value) => ((persist === null || persist === void 0 ? void 0 : persist.parser) ? persist.parser(value) : defaultParser(value)),
+    });
+    const defaultState = useMemo(getDefaultData, [getDefaultData]);
+    useEffect(() => {
+        var _a, _b;
+        if (hasHydratedRef.current) {
+            return;
+        }
+        if (defaultState) {
+            (_a = persist === null || persist === void 0 ? void 0 : persist.onLoad) === null || _a === void 0 ? void 0 : _a.call(persist, Object.assign(Object.assign({}, defaultState), { filter: prepareDataForFilter((_b = defaultState.filter) !== null && _b !== void 0 ? _b : {}) }));
+        }
+        // mark as hydrated after attempting to load defaultState
+        hasHydratedRef.current = true;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [defaultState]);
+    useEffect(() => {
+        var _a, _b;
+        if (!(persist === null || persist === void 0 ? void 0 : persist.id) || !(persist === null || persist === void 0 ? void 0 : persist.filterQueryKey) || !hasHydratedRef.current) {
+            return;
+        }
+        const snapshot = (_b = (_a = persist.state) !== null && _a !== void 0 ? _a : getDefaultData()) !== null && _b !== void 0 ? _b : {};
+        if (filter) {
+            snapshot.filter = filter;
+        }
+        if (search !== undefined) {
+            snapshot.search = search;
+        }
+        if (Object.keys(snapshot).length === 0)
+            return;
+        setDataToStorages(snapshot);
+    }, [persist === null || persist === void 0 ? void 0 : persist.id, persist === null || persist === void 0 ? void 0 : persist.filterQueryKey, persist === null || persist === void 0 ? void 0 : persist.state, filter, search, setDataToStorages, getDefaultData]);
+}

package/dist/esm/components/MobileToolbar/hooks/usePersistState/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './parser';
+export * from './serializer';

package/dist/esm/components/MobileToolbar/hooks/usePersistState/utils/index.js

@@ -0,0 +1,2 @@
+export * from './parser';
+export * from './serializer';

package/dist/esm/components/MobileToolbar/hooks/usePersistState/utils/parser.d.ts

@@ -0,0 +1,4 @@
+import { FiltersState } from '@snack-uikit/chips';
+import { PersistedFilterState } from '../../../types';
+export declare const defaultParser: <T extends FiltersState>(value: string) => PersistedFilterState<T>;
+export declare const prepareDataForFilter: <T>(filter: Record<string, unknown>) => T;

package/dist/esm/components/MobileToolbar/hooks/usePersistState/utils/parser.js

@@ -0,0 +1,41 @@
+import { parseQueryParamsString } from '@cloud-ru/ft-request-payload-transform';
+import { isDateString } from '@snack-uikit/toolbar';
+const parseValue = (value) => {
+    if (isDateString(value)) {
+        return new Date(value);
+    }
+    if (typeof value === 'boolean') {
+        return String(value);
+    }
+    return value;
+};
+const mapFilterFromPayload = (value) => {
+    if (!value) {
+        return undefined;
+    }
+    return Object.fromEntries(value.map(filter => {
+        if (Array.isArray(filter.value)) {
+            return [filter.field, filter.value.map(parseValue)];
+        }
+        return [filter.field, parseValue(filter.value)];
+    }));
+};
+export const defaultParser = (value) => {
+    var _a, _b;
+    const parsed = parseQueryParamsString(value);
+    return {
+        pagination: parsed === null || parsed === void 0 ? void 0 : parsed.pagination,
+        ordering: parsed === null || parsed === void 0 ? void 0 : parsed.ordering,
+        search: ((_a = parsed === null || parsed === void 0 ? void 0 : parsed.search) === null || _a === void 0 ? void 0 : _a.toString()) || '',
+        filter: (_b = mapFilterFromPayload(parsed === null || parsed === void 0 ? void 0 : parsed.filter)) !== null && _b !== void 0 ? _b : {},
+    };
+};
+export const prepareDataForFilter = (filter) => Object.entries(filter).reduce((acc, [key, value]) => {
+    if (Array.isArray(value)) {
+        acc[key] = value.map(parseValue);
+    }
+    else {
+        acc[key] = parseValue(value);
+    }
+    return acc;
+}, Object.assign({}, filter));

package/dist/esm/components/MobileToolbar/hooks/usePersistState/utils/serializer.d.ts

@@ -0,0 +1,11 @@
+import { RequestPayloadParams } from '@cloud-ru/ft-request-payload-transform';
+import { FiltersState } from '@snack-uikit/chips';
+import { PersistedFilterState } from '../../../types';
+/** Вспомогательная функция для преобразования состояния тулбара к формату RequestPayloadParams */
+export declare const formatFilterStateToRequestPayload: <T extends FiltersState>(value?: PersistedFilterState<T> | null) => {
+    toObject(): Partial<RequestPayloadParams>;
+    toString(params?: {
+        encode?: boolean;
+    }): string;
+};
+export declare const defaultSerializer: <T extends FiltersState>(value: PersistedFilterState<T>) => string;

package/dist/esm/components/MobileToolbar/hooks/usePersistState/utils/serializer.js

@@ -0,0 +1,40 @@
+import { createRequestPayload } from '@cloud-ru/ft-request-payload-transform';
+import { isDateString } from '@snack-uikit/toolbar';
+const mapValueToString = (filter) => {
+    if (filter instanceof Date) {
+        return filter.toISOString();
+    }
+    if (isDateString(filter)) {
+        return filter;
+    }
+    return filter;
+};
+const mapFilterToPayload = (value) => {
+    if (!value) {
+        return undefined;
+    }
+    return Object.entries(value)
+        .filter(([, v]) => v !== undefined)
+        .map(([key, v]) => Array.isArray(v)
+        ? {
+            value: v.map(mapValueToString),
+            condition: 'in',
+            field: key,
+        }
+        : {
+            value: mapValueToString(v),
+            condition: 'eq',
+            field: key,
+        });
+};
+/** Вспомогательная функция для преобразования состояния тулбара к формату RequestPayloadParams */
+export const formatFilterStateToRequestPayload = (value) => {
+    var _a;
+    return createRequestPayload({
+        pagination: value === null || value === void 0 ? void 0 : value.pagination,
+        search: (_a = value === null || value === void 0 ? void 0 : value.search) !== null && _a !== void 0 ? _a : '',
+        ordering: value === null || value === void 0 ? void 0 : value.ordering,
+        filter: mapFilterToPayload(value === null || value === void 0 ? void 0 : value.filter),
+    });
+};
+export const defaultSerializer = (value) => formatFilterStateToRequestPayload(value).toString();

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

@@ -1,3 +1,4 @@
+import { RequestPayloadParams } from '@cloud-ru/ft-request-payload-transform';
 import { ReactNode } from 'react';
 import { FiltersState, MobileChipChoiceRowProps } from '@cloud-ru/uikit-product-mobile-chips';
 import { BulkActionsProps, MoreActionsProps } from '../../helperComponents';
@@ -41,4 +42,26 @@ export type FilterRow<TState extends FiltersState> = Omit<MobileChipChoiceRowPro
     initialOpen?: boolean;
     onOpenChange?(isOpen: boolean): void;
 };
+export type PersistedFilterState<T extends FiltersState> = {
+    pagination?: RequestPayloadParams['pagination'];
+    ordering?: RequestPayloadParams['ordering'];
+    search?: string;
+    filter?: T;
+};
+export type ToolbarPersistConfig<T extends FiltersState> = {
+    /** Уникальный id для текущего инстанса компонента */
+    id?: string;
+    /** Ключ для queryParams */
+    filterQueryKey?: string;
+    /** Валидатор сохраненных */
+    validateData?(value: unknown): value is PersistedFilterState<T>;
+    /** Custom-сериализация состояния перед сохранением в queryParams */
+    serializer?(value: PersistedFilterState<T>): string;
+    /** Custom-парсер queryParams для преобразования в данные состояния */
+    parser?(value: string): PersistedFilterState<T>;
+    /** Состояние для сохранения */
+    state?: PersistedFilterState<T>;
+    /** Колбэк при первом рендере для получения сохраненных данных и установки их в стейт */
+    onLoad?(state: PersistedFilterState<T>): void;
+};
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-mobile-toolbar",
   "title": "Mobile Toolbar",
-  "version": "0.4.13",
+  "version": "0.5.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,23 +36,25 @@
   },
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/uikit-product-icons": "16.1.0",
-    "@cloud-ru/uikit-product-mobile-chips": "0.8.46",
-    "@cloud-ru/uikit-product-mobile-dropdown": "0.9.30",
-    "@cloud-ru/uikit-product-mobile-tooltip": "0.5.3",
-    "@cloud-ru/uikit-product-utils": "8.0.2",
+    "@cloud-ru/ft-request-payload-transform": "0.3.0",
+    "@cloud-ru/uikit-product-icons": "16.1.1",
+    "@cloud-ru/uikit-product-mobile-chips": "0.8.47",
+    "@cloud-ru/uikit-product-mobile-dropdown": "0.9.31",
+    "@cloud-ru/uikit-product-mobile-tooltip": "0.5.4",
+    "@cloud-ru/uikit-product-utils": "8.1.0",
     "@snack-uikit/button": "0.19.15",
+    "@snack-uikit/chips": "0.28.12",
     "@snack-uikit/counter": "0.8.9",
     "@snack-uikit/search-private": "0.4.29",
     "@snack-uikit/tag": "0.15.7",
     "@snack-uikit/toggles": "0.13.20",
-    "@snack-uikit/toolbar": "0.13.22",
-    "@snack-uikit/utils": "3.10.1",
+    "@snack-uikit/toolbar": "0.14.16",
+    "@snack-uikit/utils": "4.0.0",
     "classnames": "2.5.1",
     "uncontrollable": "8.0.4"
   },
   "peerDependencies": {
     "@cloud-ru/uikit-product-locale": "*"
   },
-  "gitHead": "7303f734eef30f1ac7ac3a279bcf324dcd549059"
+  "gitHead": "b8c76e1a66bd22f7c266466eb340860b06581d10"
 }

package/src/components/MobileToolbar/MobileToolbar.tsx

@@ -12,14 +12,18 @@ import { TEST_IDS } from '../../constants';
 import { BulkActions, FilterButton, MoreActions, Separator } from '../../helperComponents';
 import { BulkActionsCheckbox } from '../../helperComponents/BulkActionsCheckbox';
 import { isBulkActionsProps } from './helpers';
-import { useFilters } from './hooks';
+import { useFilters, usePersistState } from './hooks';
 import styles from './styles.module.scss';
-import { CheckedToolbarProps, DefaultToolbarProps, FilterRow } from './types';
+import { CheckedToolbarProps, DefaultToolbarProps, FilterRow, ToolbarPersistConfig } from './types';
 
 export type MobileToolbarProps<TState extends FiltersState = Record<string, unknown>> = WithSupportProps<
   DefaultToolbarProps | CheckedToolbarProps
 > & {
   filterRow?: FilterRow<TState>;
+  /** Конфиг для сохранения состояния в localStorage и queryParams. <br>
+   *  Поле id должно быть уникальным для каждого инстанса компонента. <br>
+   *  */
+  persist?: ToolbarPersistConfig<TState>;
 };
 
 export function MobileToolbar<TState extends FiltersState = Record<string, unknown>>({
@@ -30,6 +34,7 @@ export function MobileToolbar<TState extends FiltersState = Record<string, unkno
   onRefresh,
   search,
   filterRow: filterRowProps,
+  persist,
   ...rest
 }: MobileToolbarProps<TState>) {
   const needsBulkActions = isBulkActionsProps(rest);
@@ -39,6 +44,8 @@ export function MobileToolbar<TState extends FiltersState = Record<string, unkno
 
   const { t } = useLocale('MobileToolbar');
 
+  usePersistState({ persist, filter: filterRowProps?.value, search: search?.value });
+
   const moreActionsProps = useMemo(
     () =>
       onRefresh

package/src/components/MobileToolbar/hooks/index.ts

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

package/src/components/MobileToolbar/{hooks.ts → hooks/useFilters.ts}

@@ -3,8 +3,8 @@ import { useUncontrolledProp } from 'uncontrollable';
 
 import { FiltersState, hasFilterBeenApplied } from '@cloud-ru/uikit-product-mobile-chips';
 
-import { FilterButtonProps } from '../../helperComponents';
-import { FilterRow } from './types';
+import { FilterButtonProps } from '../../../helperComponents';
+import { FilterRow } from '../types';
 
 type UseFiltersProps<TState extends FiltersState> = {
   filterRow?: FilterRow<TState>;

package/src/components/MobileToolbar/hooks/usePersistState/index.ts

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

package/src/components/MobileToolbar/hooks/usePersistState/usePersistState.ts

@@ -0,0 +1,87 @@
+import { useEffect, useMemo, useRef } from 'react';
+
+import { FiltersState } from '@snack-uikit/chips';
+import { DataPersistOptions, useDataPersist } from '@snack-uikit/utils';
+
+import { PersistedFilterState, ToolbarPersistConfig } from '../../types';
+import { defaultParser, defaultSerializer, prepareDataForFilter } from './utils';
+
+type usePersistStateProps<TState extends FiltersState = Record<string, unknown>> = {
+  persist?: ToolbarPersistConfig<TState>;
+  filter?: TState;
+  search?: string;
+};
+
+export function usePersistState<TState extends FiltersState = Record<string, unknown>>({
+  persist,
+  filter,
+  search,
+}: usePersistStateProps<TState>) {
+  const hasHydratedRef = useRef(false);
+
+  const dataPersistOptions = useMemo<DataPersistOptions<PersistedFilterState<TState>> | undefined>(() => {
+    if (!persist?.filterQueryKey || !persist?.id) return undefined;
+
+    const defaultValidate = (value: PersistedFilterState<TState>): boolean => {
+      const filterOk = value?.filter === undefined || (typeof value.filter === 'object' && value.filter !== null);
+      const searchOk = value?.search === undefined || typeof value.search === 'string';
+      return Boolean(filterOk && searchOk);
+    };
+
+    const combinedValidate = (value: PersistedFilterState<TState>): boolean => {
+      const baseValid = defaultValidate(value);
+      return persist?.validateData ? baseValid && persist.validateData(value) : baseValid;
+    };
+
+    return {
+      queryKey: persist.filterQueryKey,
+      localStorageKey: `${persist.id}_filter`,
+      validateData: combinedValidate as unknown as (value: unknown) => value is PersistedFilterState<TState>,
+    };
+  }, [persist]);
+
+  const { getDefaultData, setDataToStorages } = useDataPersist<PersistedFilterState<TState>>({
+    options: dataPersistOptions,
+    serializer: value => (persist?.serializer ? persist.serializer(value) : defaultSerializer<TState>(value)),
+    parser: (value: string) => (persist?.parser ? persist.parser(value) : defaultParser<TState>(value)),
+  });
+
+  const defaultState = useMemo(getDefaultData, [getDefaultData]);
+
+  useEffect(() => {
+    if (hasHydratedRef.current) {
+      return;
+    }
+
+    if (defaultState) {
+      persist?.onLoad?.({
+        ...defaultState,
+        filter: prepareDataForFilter(defaultState.filter ?? {}),
+      });
+    }
+
+    // mark as hydrated after attempting to load defaultState
+    hasHydratedRef.current = true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultState]);
+
+  useEffect(() => {
+    if (!persist?.id || !persist?.filterQueryKey || !hasHydratedRef.current) {
+      return;
+    }
+
+    const snapshot = persist.state ?? getDefaultData() ?? ({} as PersistedFilterState<TState>);
+
+    if (filter) {
+      snapshot.filter = filter;
+    }
+
+    if (search !== undefined) {
+      snapshot.search = search;
+    }
+
+    if (Object.keys(snapshot).length === 0) return;
+
+    setDataToStorages(snapshot);
+  }, [persist?.id, persist?.filterQueryKey, persist?.state, filter, search, setDataToStorages, getDefaultData]);
+}

package/src/components/MobileToolbar/hooks/usePersistState/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './parser';
+export * from './serializer';

package/src/components/MobileToolbar/hooks/usePersistState/utils/parser.ts

@@ -0,0 +1,61 @@
+import { parseQueryParamsString, RequestPayloadParams } from '@cloud-ru/ft-request-payload-transform';
+
+import { FiltersState } from '@snack-uikit/chips';
+import { isDateString } from '@snack-uikit/toolbar';
+
+import { PersistedFilterState } from '../../../types';
+
+const parseValue = (value: unknown) => {
+  if (isDateString(value)) {
+    return new Date(value);
+  }
+
+  if (typeof value === 'boolean') {
+    return String(value);
+  }
+
+  return value;
+};
+
+const mapFilterFromPayload = <TFilters extends FiltersState = Record<string, unknown>>(
+  value?: RequestPayloadParams['filter'],
+): TFilters | undefined => {
+  if (!value) {
+    return undefined;
+  }
+
+  return Object.fromEntries(
+    value.map(filter => {
+      if (Array.isArray(filter.value)) {
+        return [filter.field, filter.value.map(parseValue)];
+      }
+
+      return [filter.field, parseValue(filter.value)];
+    }),
+  ) as TFilters;
+};
+
+export const defaultParser = <T extends FiltersState>(value: string): PersistedFilterState<T> => {
+  const parsed = parseQueryParamsString(value);
+
+  return {
+    pagination: parsed?.pagination,
+    ordering: parsed?.ordering,
+    search: parsed?.search?.toString() || '',
+    filter: mapFilterFromPayload<T>(parsed?.filter) ?? ({} as T),
+  };
+};
+
+export const prepareDataForFilter = <T>(filter: Record<string, unknown>): T =>
+  Object.entries(filter).reduce(
+    (acc, [key, value]) => {
+      if (Array.isArray(value)) {
+        acc[key] = value.map(parseValue);
+      } else {
+        acc[key] = parseValue(value);
+      }
+
+      return acc;
+    },
+    { ...filter },
+  ) as T;

package/src/components/MobileToolbar/hooks/usePersistState/utils/serializer.ts

@@ -0,0 +1,54 @@
+import { createRequestPayload, RequestPayloadParams } from '@cloud-ru/ft-request-payload-transform';
+
+import { FiltersState } from '@snack-uikit/chips';
+import { isDateString } from '@snack-uikit/toolbar';
+
+import { PersistedFilterState } from '../../../types';
+
+type FilterValue = string | null | number | boolean | Date;
+
+const mapValueToString = (filter: FilterValue): string | null | number | boolean => {
+  if (filter instanceof Date) {
+    return filter.toISOString();
+  }
+
+  if (isDateString(filter)) {
+    return filter;
+  }
+
+  return filter;
+};
+
+const mapFilterToPayload = (value?: FiltersState): RequestPayloadParams['filter'] => {
+  if (!value) {
+    return undefined;
+  }
+
+  return Object.entries(value)
+    .filter(([, v]) => v !== undefined)
+    .map(([key, v]) =>
+      Array.isArray(v)
+        ? {
+            value: (v as FilterValue[]).map(mapValueToString),
+            condition: 'in',
+            field: key,
+          }
+        : {
+            value: mapValueToString(v as FilterValue),
+            condition: 'eq',
+            field: key,
+          },
+    );
+};
+
+/** Вспомогательная функция для преобразования состояния тулбара к формату RequestPayloadParams */
+export const formatFilterStateToRequestPayload = <T extends FiltersState>(value?: PersistedFilterState<T> | null) =>
+  createRequestPayload({
+    pagination: value?.pagination,
+    search: value?.search ?? '',
+    ordering: value?.ordering,
+    filter: mapFilterToPayload(value?.filter),
+  });
+
+export const defaultSerializer = <T extends FiltersState>(value: PersistedFilterState<T>) =>
+  formatFilterStateToRequestPayload(value).toString();

package/src/components/MobileToolbar/types.ts

@@ -1,3 +1,4 @@
+import { RequestPayloadParams } from '@cloud-ru/ft-request-payload-transform';
 import { ReactNode } from 'react';
 
 import { FiltersState, MobileChipChoiceRowProps } from '@cloud-ru/uikit-product-mobile-chips';
@@ -51,3 +52,27 @@ export type FilterRow<TState extends FiltersState> = Omit<MobileChipChoiceRowPro
   initialOpen?: boolean;
   onOpenChange?(isOpen: boolean): void;
 };
+
+export type PersistedFilterState<T extends FiltersState> = {
+  pagination?: RequestPayloadParams['pagination'];
+  ordering?: RequestPayloadParams['ordering'];
+  search?: string;
+  filter?: T;
+};
+
+export type ToolbarPersistConfig<T extends FiltersState> = {
+  /** Уникальный id для текущего инстанса компонента */
+  id?: string;
+  /** Ключ для queryParams */
+  filterQueryKey?: string;
+  /** Валидатор сохраненных */
+  validateData?(value: unknown): value is PersistedFilterState<T>;
+  /** Custom-сериализация состояния перед сохранением в queryParams */
+  serializer?(value: PersistedFilterState<T>): string;
+  /** Custom-парсер queryParams для преобразования в данные состояния */
+  parser?(value: string): PersistedFilterState<T>;
+  /** Состояние для сохранения */
+  state?: PersistedFilterState<T>;
+  /** Колбэк при первом рендере для получения сохраненных данных и установки их в стейт */
+  onLoad?(state: PersistedFilterState<T>): void;
+};