@cloud-ru/uikit-product-mobile-toolbar 3.0.1 → 4.0.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 4.0.0 (2026-10-15)
+
+
+### BREAKING CHANGES
+
+
+* **CORESERV-12174:** remove double url-encoding of mobile toolbar persisted state ([cb69518](https://github.com/cloud-ru-tech/uikit-product/commit/cb69518dbf30bf30c553beec5a350828c8133420))
+
+
+
+
+## 3.0.2 (2026-10-09)
+
+**Note:** Version bump only for package @cloud-ru/uikit-product-mobile-toolbar
+
+
+
+
+
 ## 3.0.1 (2026-09-29)
 
 **Note:** Version bump only for package @cloud-ru/uikit-product-mobile-toolbar

package/dist/cjs/components/MobileToolbar/hooks/usePersistState/utils/__tests__/persistStateQueryParam.spec.d.ts

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

package/dist/cjs/components/MobileToolbar/hooks/usePersistState/utils/__tests__/persistStateQueryParam.spec.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const __1 = require("..");
+const BASE_URL = 'https://example.com/table';
+const QUERY_KEY = 'state';
+const writeStateToUrl = (state) => {
+    const url = new URL(BASE_URL);
+    url.searchParams.set(QUERY_KEY, (0, __1.defaultSerializer)(state));
+    return url;
+};
+const readStateFromUrl = (href) => { var _a; return (0, __1.defaultParser)((_a = new URL(href).searchParams.get(QUERY_KEY)) !== null && _a !== void 0 ? _a : ''); };
+const paginationState = {
+    pagination: { limit: 25, offset: 0 },
+    search: '',
+    filter: {},
+};
+const roundTripCases = [
+    { name: 'pagination', state: paginationState },
+    {
+        name: 'ordering',
+        state: {
+            ordering: [
+                { field: 'name', direction: '-' },
+                { field: 'status', direction: '+' },
+            ],
+            search: '',
+            filter: {},
+        },
+    },
+    {
+        name: 'filter with in and eq conditions',
+        state: { search: '', filter: { status: ['active', 'inactive'], type: 'http' } },
+    },
+    { name: 'cyrillic search with space', state: { search: 'точка москва', filter: {} } },
+    { name: 'search with plus, space and hash', state: { search: 'a+b #1', filter: {} } },
+    { name: 'search with percent sign', state: { search: '100%', filter: {} } },
+    { name: 'search with percent-encoded-like sequence', state: { search: 'a%41b', filter: {} } },
+];
+(0, vitest_1.describe)('persisted toolbar state in query param', () => {
+    roundTripCases.forEach(({ name, state }) => {
+        (0, vitest_1.it)(`should restore ${name} from url`, () => {
+            const url = writeStateToUrl(state);
+            (0, vitest_1.expect)(readStateFromUrl(url.href)).toEqual(state);
+        });
+    });
+    roundTripCases
+        .filter(({ state }) => { var _a; return !((_a = state.search) === null || _a === void 0 ? void 0 : _a.includes('%')); })
+        .forEach(({ name, state }) => {
+        (0, vitest_1.it)(`should not double-encode ${name} in url`, () => {
+            const url = writeStateToUrl(state);
+            (0, vitest_1.expect)(url.search).not.toContain('%25');
+        });
+    });
+    (0, vitest_1.it)('should encode pagination once', () => {
+        const url = writeStateToUrl(paginationState);
+        (0, vitest_1.expect)(url.search).toBe('?state=limit%3D25%26offset%3D0');
+    });
+    (0, vitest_1.it)('should encode literal percent sign in search exactly once', () => {
+        const url = writeStateToUrl({ search: '100%', filter: {} });
+        (0, vitest_1.expect)(url.search.match(/%25/g)).toHaveLength(1);
+        (0, vitest_1.expect)(readStateFromUrl(url.href).search).toBe('100%');
+    });
+    (0, vitest_1.it)('should truncate search containing ampersand and equals sign', () => {
+        const url = writeStateToUrl({ search: 'a&b=c', filter: {} });
+        (0, vitest_1.expect)(readStateFromUrl(url.href).search).toBe('a');
+    });
+});

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

@@ -25,7 +25,7 @@ const mapFilterFromPayload = (value) => {
 };
 const defaultParser = (value) => {
     var _a, _b;
-    const parsed = (0, ft_request_payload_transform_1.parseQueryParamsString)(value);
+    const parsed = (0, ft_request_payload_transform_1.parseQueryParamsString)(value, { decode: false });
     return {
         pagination: parsed === null || parsed === void 0 ? void 0 : parsed.pagination,
         ordering: parsed === null || parsed === void 0 ? void 0 : parsed.ordering,

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

@@ -8,4 +8,5 @@ export declare const formatFilterStateToRequestPayload: <T extends FiltersState>
         encode?: boolean;
     }): string;
 };
+/** Возвращает сырую строку: URL-кодированием занимается `URLSearchParams.set` в источнике query-параметров */
 export declare const defaultSerializer: <T extends FiltersState>(value: PersistedFilterState<T>) => string;

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

@@ -41,5 +41,6 @@ const formatFilterStateToRequestPayload = (value) => {
     });
 };
 exports.formatFilterStateToRequestPayload = formatFilterStateToRequestPayload;
-const defaultSerializer = (value) => (0, exports.formatFilterStateToRequestPayload)(value).toString();
+/** Возвращает сырую строку: URL-кодированием занимается `URLSearchParams.set` в источнике query-параметров */
+const defaultSerializer = (value) => (0, exports.formatFilterStateToRequestPayload)(value).toString({ encode: false });
 exports.defaultSerializer = defaultSerializer;

package/dist/esm/components/MobileToolbar/hooks/usePersistState/utils/__tests__/persistStateQueryParam.spec.d.ts

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

package/dist/esm/components/MobileToolbar/hooks/usePersistState/utils/__tests__/persistStateQueryParam.spec.js

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest';
+import { defaultParser, defaultSerializer } from '..';
+const BASE_URL = 'https://example.com/table';
+const QUERY_KEY = 'state';
+const writeStateToUrl = (state) => {
+    const url = new URL(BASE_URL);
+    url.searchParams.set(QUERY_KEY, defaultSerializer(state));
+    return url;
+};
+const readStateFromUrl = (href) => { var _a; return defaultParser((_a = new URL(href).searchParams.get(QUERY_KEY)) !== null && _a !== void 0 ? _a : ''); };
+const paginationState = {
+    pagination: { limit: 25, offset: 0 },
+    search: '',
+    filter: {},
+};
+const roundTripCases = [
+    { name: 'pagination', state: paginationState },
+    {
+        name: 'ordering',
+        state: {
+            ordering: [
+                { field: 'name', direction: '-' },
+                { field: 'status', direction: '+' },
+            ],
+            search: '',
+            filter: {},
+        },
+    },
+    {
+        name: 'filter with in and eq conditions',
+        state: { search: '', filter: { status: ['active', 'inactive'], type: 'http' } },
+    },
+    { name: 'cyrillic search with space', state: { search: 'точка москва', filter: {} } },
+    { name: 'search with plus, space and hash', state: { search: 'a+b #1', filter: {} } },
+    { name: 'search with percent sign', state: { search: '100%', filter: {} } },
+    { name: 'search with percent-encoded-like sequence', state: { search: 'a%41b', filter: {} } },
+];
+describe('persisted toolbar state in query param', () => {
+    roundTripCases.forEach(({ name, state }) => {
+        it(`should restore ${name} from url`, () => {
+            const url = writeStateToUrl(state);
+            expect(readStateFromUrl(url.href)).toEqual(state);
+        });
+    });
+    roundTripCases
+        .filter(({ state }) => { var _a; return !((_a = state.search) === null || _a === void 0 ? void 0 : _a.includes('%')); })
+        .forEach(({ name, state }) => {
+        it(`should not double-encode ${name} in url`, () => {
+            const url = writeStateToUrl(state);
+            expect(url.search).not.toContain('%25');
+        });
+    });
+    it('should encode pagination once', () => {
+        const url = writeStateToUrl(paginationState);
+        expect(url.search).toBe('?state=limit%3D25%26offset%3D0');
+    });
+    it('should encode literal percent sign in search exactly once', () => {
+        const url = writeStateToUrl({ search: '100%', filter: {} });
+        expect(url.search.match(/%25/g)).toHaveLength(1);
+        expect(readStateFromUrl(url.href).search).toBe('100%');
+    });
+    it('should truncate search containing ampersand and equals sign', () => {
+        const url = writeStateToUrl({ search: 'a&b=c', filter: {} });
+        expect(readStateFromUrl(url.href).search).toBe('a');
+    });
+});

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

@@ -22,7 +22,7 @@ const mapFilterFromPayload = (value) => {
 };
 export const defaultParser = (value) => {
     var _a, _b;
-    const parsed = parseQueryParamsString(value);
+    const parsed = parseQueryParamsString(value, { decode: false });
     return {
         pagination: parsed === null || parsed === void 0 ? void 0 : parsed.pagination,
         ordering: parsed === null || parsed === void 0 ? void 0 : parsed.ordering,

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

@@ -8,4 +8,5 @@ export declare const formatFilterStateToRequestPayload: <T extends FiltersState>
         encode?: boolean;
     }): string;
 };
+/** Возвращает сырую строку: URL-кодированием занимается `URLSearchParams.set` в источнике query-параметров */
 export declare const defaultSerializer: <T extends FiltersState>(value: PersistedFilterState<T>) => string;

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

@@ -37,4 +37,5 @@ export const formatFilterStateToRequestPayload = (value) => {
         filter: mapFilterToPayload(value === null || value === void 0 ? void 0 : value.filter),
     });
 };
-export const defaultSerializer = (value) => formatFilterStateToRequestPayload(value).toString();
+/** Возвращает сырую строку: URL-кодированием занимается `URLSearchParams.set` в источнике query-параметров */
+export const defaultSerializer = (value) => formatFilterStateToRequestPayload(value).toString({ encode: false });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-mobile-toolbar",
   "title": "Mobile Toolbar",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -35,21 +35,21 @@
     "access": "public"
   },
   "dependencies": {
-    "@cloud-ru/ft-request-payload-transform": "^0.3.0",
+    "@cloud-ru/ft-request-payload-transform": "^0.5.0",
     "@snack-uikit/button": "^1.0.1",
     "@snack-uikit/chips": "^1.0.1",
     "@snack-uikit/counter": "^1.0.1",
     "@snack-uikit/search-private": "^1.0.1",
     "@snack-uikit/tag": "^1.0.1",
     "@snack-uikit/toggles": "^1.0.1",
-    "@snack-uikit/toolbar": "^1.0.1",
+    "@snack-uikit/toolbar": "^2.0.0",
     "@snack-uikit/utils": "^5.0.0",
     "classnames": "^2.5.1",
     "uncontrollable": "^8.0.4",
-    "@cloud-ru/uikit-product-icons": "^19.1.0",
-    "@cloud-ru/uikit-product-mobile-dropdown": "^3.0.1",
-    "@cloud-ru/uikit-product-mobile-chips": "^3.0.1",
-    "@cloud-ru/uikit-product-mobile-tooltip": "^2.0.1",
+    "@cloud-ru/uikit-product-icons": "^19.2.0",
+    "@cloud-ru/uikit-product-mobile-chips": "^3.0.2",
+    "@cloud-ru/uikit-product-mobile-dropdown": "^3.0.2",
+    "@cloud-ru/uikit-product-mobile-tooltip": "^2.0.2",
     "@cloud-ru/uikit-product-utils": "^10.0.0"
   },
   "peerDependencies": {

package/src/components/MobileToolbar/hooks/usePersistState/utils/__tests__/persistStateQueryParam.spec.ts

@@ -0,0 +1,85 @@
+import { describe, expect, it } from 'vitest';
+
+import { FiltersState } from '@snack-uikit/chips';
+
+import { PersistedFilterState } from '../../../../types';
+import { defaultParser, defaultSerializer } from '..';
+
+const BASE_URL = 'https://example.com/table';
+const QUERY_KEY = 'state';
+
+const writeStateToUrl = (state: PersistedFilterState<FiltersState>) => {
+  const url = new URL(BASE_URL);
+  url.searchParams.set(QUERY_KEY, defaultSerializer(state));
+  return url;
+};
+
+const readStateFromUrl = (href: string) => defaultParser(new URL(href).searchParams.get(QUERY_KEY) ?? '');
+
+const paginationState: PersistedFilterState<FiltersState> = {
+  pagination: { limit: 25, offset: 0 },
+  search: '',
+  filter: {},
+};
+
+const roundTripCases: { name: string; state: PersistedFilterState<FiltersState> }[] = [
+  { name: 'pagination', state: paginationState },
+  {
+    name: 'ordering',
+    state: {
+      ordering: [
+        { field: 'name', direction: '-' },
+        { field: 'status', direction: '+' },
+      ],
+      search: '',
+      filter: {},
+    },
+  },
+  {
+    name: 'filter with in and eq conditions',
+    state: { search: '', filter: { status: ['active', 'inactive'], type: 'http' } },
+  },
+  { name: 'cyrillic search with space', state: { search: 'точка москва', filter: {} } },
+  { name: 'search with plus, space and hash', state: { search: 'a+b #1', filter: {} } },
+  { name: 'search with percent sign', state: { search: '100%', filter: {} } },
+  { name: 'search with percent-encoded-like sequence', state: { search: 'a%41b', filter: {} } },
+];
+
+describe('persisted toolbar state in query param', () => {
+  roundTripCases.forEach(({ name, state }) => {
+    it(`should restore ${name} from url`, () => {
+      const url = writeStateToUrl(state);
+
+      expect(readStateFromUrl(url.href)).toEqual(state);
+    });
+  });
+
+  roundTripCases
+    .filter(({ state }) => !state.search?.includes('%'))
+    .forEach(({ name, state }) => {
+      it(`should not double-encode ${name} in url`, () => {
+        const url = writeStateToUrl(state);
+
+        expect(url.search).not.toContain('%25');
+      });
+    });
+
+  it('should encode pagination once', () => {
+    const url = writeStateToUrl(paginationState);
+
+    expect(url.search).toBe('?state=limit%3D25%26offset%3D0');
+  });
+
+  it('should encode literal percent sign in search exactly once', () => {
+    const url = writeStateToUrl({ search: '100%', filter: {} });
+
+    expect(url.search.match(/%25/g)).toHaveLength(1);
+    expect(readStateFromUrl(url.href).search).toBe('100%');
+  });
+
+  it('should truncate search containing ampersand and equals sign', () => {
+    const url = writeStateToUrl({ search: 'a&b=c', filter: {} });
+
+    expect(readStateFromUrl(url.href).search).toBe('a');
+  });
+});

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

@@ -35,7 +35,7 @@ const mapFilterFromPayload = <TFilters extends FiltersState = Record<string, unk
 };
 
 export const defaultParser = <T extends FiltersState>(value: string): PersistedFilterState<T> => {
-  const parsed = parseQueryParamsString(value);
+  const parsed = parseQueryParamsString(value, { decode: false });
 
   return {
     pagination: parsed?.pagination,

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

@@ -49,5 +49,6 @@ export const formatFilterStateToRequestPayload = <T extends FiltersState>(value?
     filter: mapFilterToPayload(value?.filter),
   });
 
+/** Возвращает сырую строку: URL-кодированием занимается `URLSearchParams.set` в источнике query-параметров */
 export const defaultSerializer = <T extends FiltersState>(value: PersistedFilterState<T>) =>
-  formatFilterStateToRequestPayload(value).toString();
+  formatFilterStateToRequestPayload(value).toString({ encode: false });