@trackunit/filters-filter-bar 1.21.4 → 1.21.7

package/index.cjs.js

@@ -17,7 +17,6 @@ var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities
 var dequal = require('dequal');
 var geoJsonUtils = require('@trackunit/geo-json-utils');
 var zod = require('zod');
-var reactRouter = require('@tanstack/react-router');
 
 var defaultTranslations = {
 	"access.management.filter.operator.role.keyAdmin": "Key Admin",
@@ -2045,125 +2044,31 @@ const useFilterUrlSync = () => {
     }), [getFilterValuesFromUrl, getFilterValuesToUrl]);
 };
 
-/**
- * This hook provides functionality to:
- * - Get the length of the search parameters excluding a specific key
- */
-const useSearchUtils = () => {
-    const location = reactRouter.useLocation();
-    const getSearchParamsLengthExcluding = react.useCallback((excludeKey, searchParams) => {
-        return sharedUtils.objectKeys(searchParams)
-            .filter(key => key !== excludeKey)
-            .reduce((totalLength, key) => {
-            const keyLength = encodeURIComponent(String(key)).length;
-            const value = searchParams[key] !== null ? encodeURIComponent(searchParams[key]?.toString() ?? "") : "";
-            const valueLength = value.length;
-            // Add 1 for '=' and 1 for '&' (except for the first param)
-            return totalLength + keyLength + valueLength + (totalLength > 0 ? 2 : 1);
-        }, 0);
-    }, []);
-    const getUrlLengthWithSearchParam = react.useCallback((key, value, prev) => {
-        const searchParamsLength = getSearchParamsLengthExcluding(key, prev);
-        const urlLength = location.href.length - (location.searchStr.length || 0) + (location.hash.length || 0) + searchParamsLength;
-        // 1 === '&' and 1 === '='
-        return urlLength + 1 + key.length + 1 + value.length;
-    }, [getSearchParamsLengthExcluding, location]);
-    return react.useMemo(() => ({ getSearchParamsLengthExcluding, getUrlLengthWithSearchParam }), [getSearchParamsLengthExcluding, getUrlLengthWithSearchParam]);
-};
-
-const MAX_URL_LENGTH = 5000;
-/**
- * Get the persistence key for the filter bar.
- *
- * @param {string} name - The name of the filter bar.
- * @param {string} clientSideUserId - The client side user id.
- * @returns {string} The persistence key.
- */
-const getPersistenceKey = (name, clientSideUserId) => `filter-${name}-${clientSideUserId}`;
 /**
  * Custom hook for managing the persistence of filter bar configurations.
  */
 const useFilterBarPersistence = ({ name, setValue, refreshData, isDefaultValue, loadData: inputLoadData, saveData: inputSaveData, }) => {
     const { clientSideUserId } = reactCoreHooks.useCurrentUser();
-    const search = reactRouter.useSearch({ strict: false, shouldThrow: false });
-    const location = reactRouter.useLocation();
-    const navigate = reactRouter.useNavigate();
     const { encode, decode } = reactComponents.useCustomEncoding();
-    const { getUrlLengthWithSearchParam } = useSearchUtils();
-    const updateSearch = react.useCallback(async (searchParams) => {
-        if (!inputLoadData && !inputSaveData && Boolean(search)) {
-            // should check if the state has actually changed from what we last sent to the URL
-            if (!searchParams[name] ||
-                (typeof searchParams[name] === "string" &&
-                    !dequal.dequal(decode(searchParams[name]), typeof search[name] === "string" ? decode(search[name]) : search[name]))) {
-                return requestAnimationFrame(async () => {
-                    const replace = search[name] === undefined || search[name] === null;
-                    await navigate({
-                        to: ".",
-                        search: (prev) => {
-                            if (getUrlLengthWithSearchParam(name, searchParams[name] || "", prev) <= MAX_URL_LENGTH) {
-                                return { ...prev, ...searchParams };
-                            }
-                            else {
-                                // eslint-disable-next-line no-console
-                                console.log(`URL too long, skipping sync of filters to the browsers URL, to avoid crashing the browser, limit is ${MAX_URL_LENGTH}, was: ${getUrlLengthWithSearchParam(name, searchParams[name] || "", prev)}`);
-                                const newSearchParams = { ...prev, [name]: undefined };
-                                return newSearchParams;
-                            }
-                        },
-                        hash: location.hash,
-                        replace,
-                    });
-                });
-            }
-        }
-        return Promise.resolve();
-    }, [navigate, name, search, inputLoadData, inputSaveData, decode, getUrlLengthWithSearchParam, location.hash]);
-    const getFromLocalStorage = react.useCallback((persistenceKey) => {
-        return localStorage.getItem(getPersistenceKey(persistenceKey, clientSideUserId));
-    }, [clientSideUserId]);
-    const lastName = react.useRef(name);
-    const [initialStoredFilters] = react.useState(() => (!inputLoadData && getFromLocalStorage(name)) || "{}");
-    const { getFilterValuesFromUrl, getFilterValuesToUrl } = useFilterUrlSync();
-    const lastSavedStateRef = react.useRef(undefined);
-    const lastSearchUpdateRef = react.useRef(undefined);
     const refreshDataRef = react.useRef(refreshData);
     react.useEffect(() => {
         refreshDataRef.current = refreshData;
     }, [refreshData]);
-    // Add this useEffect to detect external URL changes
-    react.useEffect(() => {
-        if (!inputLoadData && !inputSaveData) {
-            const currentSearchValue = search?.[name];
-            let currentSearchValueParsed;
-            let lastSearchUpdateRefParsed;
-            try {
-                currentSearchValueParsed = currentSearchValue !== undefined && currentSearchValue !== null ? decode(currentSearchValue) : undefined;
-            }
-            catch (_) {
-                // Invalid compressed data, treat as undefined
-                currentSearchValueParsed = undefined;
-            }
-            try {
-                lastSearchUpdateRefParsed = lastSearchUpdateRef.current ? decode(lastSearchUpdateRef.current) : undefined;
-            }
-            catch (_) {
-                // Invalid compressed data, treat as undefined
-                lastSearchUpdateRefParsed = undefined;
-            }
-            // H4sIADGRuGgAA3WTy07eQAxGXwVlXUtje27uruqWd0C2x1NaAa2AdoN49xq6-LOgUpQo0onny7H9ctzHsy591q8_73_dxXM8xNPT8fnl-KN3v-P4fHy5vj4-HQ96__5yd3e8fjqeQh_9Nt9v48fVfayr9f3b1YrHBH3f3GDBaj4Zui-HuvsADeO8KeFGrmYrj8hCbzTZrF0coRMRVEYHGcKAsW1Iw8qiF3ox06zbASth1t4GVsqCUvIxqO9R-EJ7w2aDJnjHCbV6JtmlgOSHQzB4DLvQtiwiRGB3aUk3h0lLgdyjFiyD8USPhd55BYzakkbaSbeA2jfmFaV7v9BMErKLguWpUNdQEKwTsqqXNETL_eRkbqojy1K0pCtVkK4LJM2VPtk6lQtdcIpSs2RGno9aQG0LSJrmvgrKHCeDFWWQN0iNNZMYgczFQNtH0VbqKifaq7uVBFdvBIgRIBoClcLXQFlC7VR7E7l2PdHKnH36kN5rJFY96Z0m3mhTKv-hG8cscytgU0vLnAOlTNAWdd_TR11y8m3dsxsGyJp_2XOg5hyZOxaP2Qu6nX137DbnW5L0_S-3p9CPk2hC09sG15SXgrKrHgQlpYe6ZKl9oScNb74IOmMmmbkSYmmHdYWZ7z3baWKpiWq0nA6u2fkEYFoOS-_OtibuIqfdaa0oDytgnB2saSC3YTSI0UKIc9nofWJf_wIRCrRd6AMAAA
-            // Check if this is an external URL change (not from our own updates)
-            // Only trigger refreshData if there's a meaningful change in the URL value
-            if (search?.[name] !== undefined && !dequal.dequal(lastSearchUpdateRefParsed, currentSearchValueParsed)) {
-                // This is an external URL change with actual data, trigger refreshData
-                void requestAnimationFrame(() => {
-                    if (refreshDataRef.current) {
-                        refreshDataRef.current();
-                    }
-                });
-            }
-        }
-    }, [search, name, inputLoadData, inputSaveData, decode]);
+    const { searchValue, updateSearchParam } = reactComponents.useSearchParamSync({
+        key: name,
+        enabled: !inputLoadData && !inputSaveData,
+        onExternalChange: () => {
+            refreshDataRef.current?.();
+        },
+    });
+    const storageKey = reactComponents.useStorageKey(`filter-${name}`, clientSideUserId);
+    const getFromLocalStorage = react.useCallback(() => {
+        return localStorage.getItem(storageKey);
+    }, [storageKey]);
+    const lastName = react.useRef(name);
+    const [initialStoredFilters] = react.useState(() => (!inputLoadData && getFromLocalStorage()) || "{}");
+    const { getFilterValuesFromUrl, getFilterValuesToUrl } = useFilterUrlSync();
+    const lastSavedStateRef = react.useRef(undefined);
     const saveData = react.useCallback((filterBarConfig, filterBarDefinitions) => {
         const newValues = Object.assign({}, lastSavedStateRef.current || {});
         if (filterBarConfig.values) {
@@ -2184,22 +2089,16 @@ const useFilterBarPersistence = ({ name, setValue, refreshData, isDefaultValue,
                 inputSaveData(newValues);
             }
             else {
-                localStorage.setItem(getPersistenceKey(name, clientSideUserId), JSON.stringify(toPersist));
+                localStorage.setItem(storageKey, reactComponents.storageSerializer.serialize(toPersist));
                 const urlObject = getFilterValuesToUrl(newValues, sharedUtils.objectValues(filterBarDefinitions), false, isDefaultValue);
-                const result = {};
-                if (filterBarConfig.name) {
-                    result[filterBarConfig.name] = encode(urlObject);
-                    // Update the ref BEFORE updating the URL to prevent false external change detection
-                    lastSearchUpdateRef.current = result[filterBarConfig.name];
-                }
-                updateSearch(result);
+                updateSearchParam(encode(urlObject));
             }
         }
-    }, [name, clientSideUserId, inputSaveData, getFilterValuesToUrl, updateSearch, encode, isDefaultValue]);
+    }, [storageKey, inputSaveData, getFilterValuesToUrl, updateSearchParam, encode, isDefaultValue]);
     const loadFromLocalStorage = react.useCallback(() => {
         let storedFilters = null;
         if (lastName.current !== name) {
-            storedFilters = localStorage.getItem(getPersistenceKey(name, clientSideUserId)) || "{}";
+            storedFilters = localStorage.getItem(storageKey) || "{}";
             lastName.current = name;
         }
         else {
@@ -2207,29 +2106,34 @@ const useFilterBarPersistence = ({ name, setValue, refreshData, isDefaultValue,
         }
         if (storedFilters && storedFilters !== "undefined") {
             try {
-                const loadedFilterBarConfigValues = JSON.parse(storedFilters);
-                return loadedFilterBarConfigValues?.values ?? {};
+                const deserialized = reactComponents.storageSerializer.deserialize(storedFilters);
+                if (typeof deserialized === "object" && deserialized !== null && !Array.isArray(deserialized)) {
+                    const record = Object.fromEntries(Object.entries(deserialized));
+                    return record.values ?? {};
+                }
+                return {};
             }
-            catch (error) {
+            catch {
                 return {};
             }
         }
         return {};
-    }, [clientSideUserId, name, initialStoredFilters, lastName]);
+    }, [storageKey, name, initialStoredFilters, lastName]);
     const loadFromSearchURL = react.useCallback(() => {
-        let searchParams = search ?? {};
-        const searchParamValue = searchParams[name];
-        if (searchParamValue !== undefined && searchParamValue !== null) {
+        if (searchValue !== undefined) {
             try {
-                searchParams = decode(searchParamValue);
+                const decoded = decode(searchValue);
+                if (typeof decoded === "object" && !Array.isArray(decoded)) {
+                    return Object.fromEntries(Object.entries(decoded));
+                }
+                return {};
             }
-            catch (error) {
-                searchParams = {};
+            catch {
+                return {};
             }
-            return searchParams;
         }
         return null;
-    }, [search, name, decode]);
+    }, [searchValue, decode]);
     const loadValues = react.useCallback((filterDefinitions) => {
         if (inputLoadData) {
             return inputLoadData();
@@ -2240,7 +2144,6 @@ const useFilterBarPersistence = ({ name, setValue, refreshData, isDefaultValue,
             if (searchParams !== null && sharedUtils.objectKeys(searchParams).length > 0) {
                 const valuesFromUrl = getFilterValuesFromUrl(filterDefinitions, searchParams);
                 if (sharedUtils.objectKeys(valuesFromUrl).length > 0) {
-                    // if there are values from the URL, update ALL filters values based on the searchParams or their defaults
                     filterDefinitions.forEach(filter => {
                         const key = filter.filterKey;
                         if (key in valuesFromUrl) {
@@ -2300,19 +2203,9 @@ const useFilterBarPersistence = ({ name, setValue, refreshData, isDefaultValue,
             initialFilterBarConfig.setters[`set${stringTs.capitalize(key)}`] = (callback) => setValue(key, callback);
         });
         const urlObject = getFilterValuesToUrl(initialFilterBarConfig.values, updatedFilterDefinitionsValues, false, isDefaultValue);
-        let needUpdate = false;
-        const result = {};
-        if (initialFilterBarConfig.name) {
-            result[initialFilterBarConfig.name] = encode(urlObject);
-            needUpdate = !dequal.dequal(lastSearchUpdateRef.current, result[initialFilterBarConfig.name]);
-            // Update the ref BEFORE updating the URL to prevent false external change detection
-            lastSearchUpdateRef.current = result[initialFilterBarConfig.name];
-        }
-        if (needUpdate) {
-            void updateSearch(result);
-        }
+        updateSearchParam(encode(urlObject));
         return initialFilterBarConfig;
-    }, [name, setValue, loadValues, getFilterValuesToUrl, updateSearch, encode, isDefaultValue]);
+    }, [name, setValue, loadValues, getFilterValuesToUrl, updateSearchParam, encode, isDefaultValue]);
     return react.useMemo(() => ({ loadData, saveData, getFilterValuesToUrl }), [loadData, saveData, getFilterValuesToUrl]);
 };
 

package/index.esm.js

@@ -2,7 +2,7 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { useMemo, useRef, useState, useEffect, useCallback, Fragment as Fragment$1 } from 'react';
 import { Filter, FilterBody, RadioFilterItem, CheckBoxFilterItem, FilterHeader as FilterHeader$1, FilterFooter } from '@trackunit/react-filter-components';
-import { Button, Icon, useList, List, Text, useTextSearch, Card, CardBody, useViewportBreakpoints, Popover, PopoverTrigger, Tooltip, Badge, PopoverContent, IconButton, MenuList, useCustomEncoding, useWatch } from '@trackunit/react-components';
+import { Button, Icon, useList, List, Text, useTextSearch, Card, CardBody, useViewportBreakpoints, Popover, PopoverTrigger, Tooltip, Badge, PopoverContent, IconButton, MenuList, useCustomEncoding, useSearchParamSync, useStorageKey, storageSerializer, useWatch } from '@trackunit/react-components';
 import { useAnalytics, useCurrentUser } from '@trackunit/react-core-hooks';
 import { capitalize } from 'string-ts';
 import { createEvent } from '@trackunit/iris-app-runtime-core-api';
@@ -15,7 +15,6 @@ import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { dequal } from 'dequal';
 import { geoJsonPolygonSchema, geoJsonMultiPolygonSchema } from '@trackunit/geo-json-utils';
 import { z } from 'zod';
-import { useLocation, useSearch, useNavigate } from '@tanstack/react-router';
 
 var defaultTranslations = {
 	"access.management.filter.operator.role.keyAdmin": "Key Admin",
@@ -2043,125 +2042,31 @@ const useFilterUrlSync = () => {
     }), [getFilterValuesFromUrl, getFilterValuesToUrl]);
 };
 
-/**
- * This hook provides functionality to:
- * - Get the length of the search parameters excluding a specific key
- */
-const useSearchUtils = () => {
-    const location = useLocation();
-    const getSearchParamsLengthExcluding = useCallback((excludeKey, searchParams) => {
-        return objectKeys(searchParams)
-            .filter(key => key !== excludeKey)
-            .reduce((totalLength, key) => {
-            const keyLength = encodeURIComponent(String(key)).length;
-            const value = searchParams[key] !== null ? encodeURIComponent(searchParams[key]?.toString() ?? "") : "";
-            const valueLength = value.length;
-            // Add 1 for '=' and 1 for '&' (except for the first param)
-            return totalLength + keyLength + valueLength + (totalLength > 0 ? 2 : 1);
-        }, 0);
-    }, []);
-    const getUrlLengthWithSearchParam = useCallback((key, value, prev) => {
-        const searchParamsLength = getSearchParamsLengthExcluding(key, prev);
-        const urlLength = location.href.length - (location.searchStr.length || 0) + (location.hash.length || 0) + searchParamsLength;
-        // 1 === '&' and 1 === '='
-        return urlLength + 1 + key.length + 1 + value.length;
-    }, [getSearchParamsLengthExcluding, location]);
-    return useMemo(() => ({ getSearchParamsLengthExcluding, getUrlLengthWithSearchParam }), [getSearchParamsLengthExcluding, getUrlLengthWithSearchParam]);
-};
-
-const MAX_URL_LENGTH = 5000;
-/**
- * Get the persistence key for the filter bar.
- *
- * @param {string} name - The name of the filter bar.
- * @param {string} clientSideUserId - The client side user id.
- * @returns {string} The persistence key.
- */
-const getPersistenceKey = (name, clientSideUserId) => `filter-${name}-${clientSideUserId}`;
 /**
  * Custom hook for managing the persistence of filter bar configurations.
  */
 const useFilterBarPersistence = ({ name, setValue, refreshData, isDefaultValue, loadData: inputLoadData, saveData: inputSaveData, }) => {
     const { clientSideUserId } = useCurrentUser();
-    const search = useSearch({ strict: false, shouldThrow: false });
-    const location = useLocation();
-    const navigate = useNavigate();
     const { encode, decode } = useCustomEncoding();
-    const { getUrlLengthWithSearchParam } = useSearchUtils();
-    const updateSearch = useCallback(async (searchParams) => {
-        if (!inputLoadData && !inputSaveData && Boolean(search)) {
-            // should check if the state has actually changed from what we last sent to the URL
-            if (!searchParams[name] ||
-                (typeof searchParams[name] === "string" &&
-                    !dequal(decode(searchParams[name]), typeof search[name] === "string" ? decode(search[name]) : search[name]))) {
-                return requestAnimationFrame(async () => {
-                    const replace = search[name] === undefined || search[name] === null;
-                    await navigate({
-                        to: ".",
-                        search: (prev) => {
-                            if (getUrlLengthWithSearchParam(name, searchParams[name] || "", prev) <= MAX_URL_LENGTH) {
-                                return { ...prev, ...searchParams };
-                            }
-                            else {
-                                // eslint-disable-next-line no-console
-                                console.log(`URL too long, skipping sync of filters to the browsers URL, to avoid crashing the browser, limit is ${MAX_URL_LENGTH}, was: ${getUrlLengthWithSearchParam(name, searchParams[name] || "", prev)}`);
-                                const newSearchParams = { ...prev, [name]: undefined };
-                                return newSearchParams;
-                            }
-                        },
-                        hash: location.hash,
-                        replace,
-                    });
-                });
-            }
-        }
-        return Promise.resolve();
-    }, [navigate, name, search, inputLoadData, inputSaveData, decode, getUrlLengthWithSearchParam, location.hash]);
-    const getFromLocalStorage = useCallback((persistenceKey) => {
-        return localStorage.getItem(getPersistenceKey(persistenceKey, clientSideUserId));
-    }, [clientSideUserId]);
-    const lastName = useRef(name);
-    const [initialStoredFilters] = useState(() => (!inputLoadData && getFromLocalStorage(name)) || "{}");
-    const { getFilterValuesFromUrl, getFilterValuesToUrl } = useFilterUrlSync();
-    const lastSavedStateRef = useRef(undefined);
-    const lastSearchUpdateRef = useRef(undefined);
     const refreshDataRef = useRef(refreshData);
     useEffect(() => {
         refreshDataRef.current = refreshData;
     }, [refreshData]);
-    // Add this useEffect to detect external URL changes
-    useEffect(() => {
-        if (!inputLoadData && !inputSaveData) {
-            const currentSearchValue = search?.[name];
-            let currentSearchValueParsed;
-            let lastSearchUpdateRefParsed;
-            try {
-                currentSearchValueParsed = currentSearchValue !== undefined && currentSearchValue !== null ? decode(currentSearchValue) : undefined;
-            }
-            catch (_) {
-                // Invalid compressed data, treat as undefined
-                currentSearchValueParsed = undefined;
-            }
-            try {
-                lastSearchUpdateRefParsed = lastSearchUpdateRef.current ? decode(lastSearchUpdateRef.current) : undefined;
-            }
-            catch (_) {
-                // Invalid compressed data, treat as undefined
-                lastSearchUpdateRefParsed = undefined;
-            }
-            // H4sIADGRuGgAA3WTy07eQAxGXwVlXUtje27uruqWd0C2x1NaAa2AdoN49xq6-LOgUpQo0onny7H9ctzHsy591q8_73_dxXM8xNPT8fnl-KN3v-P4fHy5vj4-HQ96__5yd3e8fjqeQh_9Nt9v48fVfayr9f3b1YrHBH3f3GDBaj4Zui-HuvsADeO8KeFGrmYrj8hCbzTZrF0coRMRVEYHGcKAsW1Iw8qiF3ox06zbASth1t4GVsqCUvIxqO9R-EJ7w2aDJnjHCbV6JtmlgOSHQzB4DLvQtiwiRGB3aUk3h0lLgdyjFiyD8USPhd55BYzakkbaSbeA2jfmFaV7v9BMErKLguWpUNdQEKwTsqqXNETL_eRkbqojy1K0pCtVkK4LJM2VPtk6lQtdcIpSs2RGno9aQG0LSJrmvgrKHCeDFWWQN0iNNZMYgczFQNtH0VbqKifaq7uVBFdvBIgRIBoClcLXQFlC7VR7E7l2PdHKnH36kN5rJFY96Z0m3mhTKv-hG8cscytgU0vLnAOlTNAWdd_TR11y8m3dsxsGyJp_2XOg5hyZOxaP2Qu6nX137DbnW5L0_S-3p9CPk2hC09sG15SXgrKrHgQlpYe6ZKl9oScNb74IOmMmmbkSYmmHdYWZ7z3baWKpiWq0nA6u2fkEYFoOS-_OtibuIqfdaa0oDytgnB2saSC3YTSI0UKIc9nofWJf_wIRCrRd6AMAAA
-            // Check if this is an external URL change (not from our own updates)
-            // Only trigger refreshData if there's a meaningful change in the URL value
-            if (search?.[name] !== undefined && !dequal(lastSearchUpdateRefParsed, currentSearchValueParsed)) {
-                // This is an external URL change with actual data, trigger refreshData
-                void requestAnimationFrame(() => {
-                    if (refreshDataRef.current) {
-                        refreshDataRef.current();
-                    }
-                });
-            }
-        }
-    }, [search, name, inputLoadData, inputSaveData, decode]);
+    const { searchValue, updateSearchParam } = useSearchParamSync({
+        key: name,
+        enabled: !inputLoadData && !inputSaveData,
+        onExternalChange: () => {
+            refreshDataRef.current?.();
+        },
+    });
+    const storageKey = useStorageKey(`filter-${name}`, clientSideUserId);
+    const getFromLocalStorage = useCallback(() => {
+        return localStorage.getItem(storageKey);
+    }, [storageKey]);
+    const lastName = useRef(name);
+    const [initialStoredFilters] = useState(() => (!inputLoadData && getFromLocalStorage()) || "{}");
+    const { getFilterValuesFromUrl, getFilterValuesToUrl } = useFilterUrlSync();
+    const lastSavedStateRef = useRef(undefined);
     const saveData = useCallback((filterBarConfig, filterBarDefinitions) => {
         const newValues = Object.assign({}, lastSavedStateRef.current || {});
         if (filterBarConfig.values) {
@@ -2182,22 +2087,16 @@ const useFilterBarPersistence = ({ name, setValue, refreshData, isDefaultValue,
                 inputSaveData(newValues);
             }
             else {
-                localStorage.setItem(getPersistenceKey(name, clientSideUserId), JSON.stringify(toPersist));
+                localStorage.setItem(storageKey, storageSerializer.serialize(toPersist));
                 const urlObject = getFilterValuesToUrl(newValues, objectValues(filterBarDefinitions), false, isDefaultValue);
-                const result = {};
-                if (filterBarConfig.name) {
-                    result[filterBarConfig.name] = encode(urlObject);
-                    // Update the ref BEFORE updating the URL to prevent false external change detection
-                    lastSearchUpdateRef.current = result[filterBarConfig.name];
-                }
-                updateSearch(result);
+                updateSearchParam(encode(urlObject));
             }
         }
-    }, [name, clientSideUserId, inputSaveData, getFilterValuesToUrl, updateSearch, encode, isDefaultValue]);
+    }, [storageKey, inputSaveData, getFilterValuesToUrl, updateSearchParam, encode, isDefaultValue]);
     const loadFromLocalStorage = useCallback(() => {
         let storedFilters = null;
         if (lastName.current !== name) {
-            storedFilters = localStorage.getItem(getPersistenceKey(name, clientSideUserId)) || "{}";
+            storedFilters = localStorage.getItem(storageKey) || "{}";
             lastName.current = name;
         }
         else {
@@ -2205,29 +2104,34 @@ const useFilterBarPersistence = ({ name, setValue, refreshData, isDefaultValue,
         }
         if (storedFilters && storedFilters !== "undefined") {
             try {
-                const loadedFilterBarConfigValues = JSON.parse(storedFilters);
-                return loadedFilterBarConfigValues?.values ?? {};
+                const deserialized = storageSerializer.deserialize(storedFilters);
+                if (typeof deserialized === "object" && deserialized !== null && !Array.isArray(deserialized)) {
+                    const record = Object.fromEntries(Object.entries(deserialized));
+                    return record.values ?? {};
+                }
+                return {};
             }
-            catch (error) {
+            catch {
                 return {};
             }
         }
         return {};
-    }, [clientSideUserId, name, initialStoredFilters, lastName]);
+    }, [storageKey, name, initialStoredFilters, lastName]);
     const loadFromSearchURL = useCallback(() => {
-        let searchParams = search ?? {};
-        const searchParamValue = searchParams[name];
-        if (searchParamValue !== undefined && searchParamValue !== null) {
+        if (searchValue !== undefined) {
             try {
-                searchParams = decode(searchParamValue);
+                const decoded = decode(searchValue);
+                if (typeof decoded === "object" && !Array.isArray(decoded)) {
+                    return Object.fromEntries(Object.entries(decoded));
+                }
+                return {};
             }
-            catch (error) {
-                searchParams = {};
+            catch {
+                return {};
             }
-            return searchParams;
         }
         return null;
-    }, [search, name, decode]);
+    }, [searchValue, decode]);
     const loadValues = useCallback((filterDefinitions) => {
         if (inputLoadData) {
             return inputLoadData();
@@ -2238,7 +2142,6 @@ const useFilterBarPersistence = ({ name, setValue, refreshData, isDefaultValue,
             if (searchParams !== null && objectKeys(searchParams).length > 0) {
                 const valuesFromUrl = getFilterValuesFromUrl(filterDefinitions, searchParams);
                 if (objectKeys(valuesFromUrl).length > 0) {
-                    // if there are values from the URL, update ALL filters values based on the searchParams or their defaults
                     filterDefinitions.forEach(filter => {
                         const key = filter.filterKey;
                         if (key in valuesFromUrl) {
@@ -2298,19 +2201,9 @@ const useFilterBarPersistence = ({ name, setValue, refreshData, isDefaultValue,
             initialFilterBarConfig.setters[`set${capitalize(key)}`] = (callback) => setValue(key, callback);
         });
         const urlObject = getFilterValuesToUrl(initialFilterBarConfig.values, updatedFilterDefinitionsValues, false, isDefaultValue);
-        let needUpdate = false;
-        const result = {};
-        if (initialFilterBarConfig.name) {
-            result[initialFilterBarConfig.name] = encode(urlObject);
-            needUpdate = !dequal(lastSearchUpdateRef.current, result[initialFilterBarConfig.name]);
-            // Update the ref BEFORE updating the URL to prevent false external change detection
-            lastSearchUpdateRef.current = result[initialFilterBarConfig.name];
-        }
-        if (needUpdate) {
-            void updateSearch(result);
-        }
+        updateSearchParam(encode(urlObject));
         return initialFilterBarConfig;
-    }, [name, setValue, loadValues, getFilterValuesToUrl, updateSearch, encode, isDefaultValue]);
+    }, [name, setValue, loadValues, getFilterValuesToUrl, updateSearchParam, encode, isDefaultValue]);
     return useMemo(() => ({ loadData, saveData, getFilterValuesToUrl }), [loadData, saveData, getFilterValuesToUrl]);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "1.21.4",
+  "version": "1.21.7",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -10,18 +10,18 @@
     "dequal": "^2.0.3",
     "tailwind-merge": "^2.0.0",
     "string-ts": "^2.0.0",
-    "zod": "^3.23.8",
+    "zod": "^3.25.76",
     "@trackunit/iris-app-api": "1.17.2",
-    "@trackunit/react-core-hooks": "1.15.11",
-    "@trackunit/react-filter-components": "1.20.4",
-    "@trackunit/react-date-and-time-components": "1.23.4",
+    "@trackunit/react-core-hooks": "1.15.12",
+    "@trackunit/react-filter-components": "1.20.7",
+    "@trackunit/react-date-and-time-components": "1.23.7",
     "@trackunit/shared-utils": "1.13.97",
-    "@trackunit/react-form-components": "1.21.4",
-    "@trackunit/iris-app-runtime-core-api": "1.14.10",
+    "@trackunit/react-form-components": "1.21.7",
+    "@trackunit/iris-app-runtime-core-api": "1.14.11",
     "@trackunit/geo-json-utils": "1.12.8",
-    "@trackunit/i18n-library-translation": "1.18.2",
+    "@trackunit/i18n-library-translation": "1.18.3",
     "@trackunit/css-class-variance-utilities": "1.11.97",
-    "@trackunit/react-components": "1.21.15"
+    "@trackunit/react-components": "1.21.18"
   },
   "peerDependencies": {
     "@apollo/client": "^3.13.8",

package/src/lib/hooks/utils/useFilterBarPersistence.d.ts

@@ -9,13 +9,9 @@ export interface FilterBarPersistenceProps<TFilterBarDefinition extends FilterBa
      */
     isDefaultValue: (key: string, value: FilterValueType) => boolean;
 }
-export declare const MAX_URL_LENGTH = 5000;
+export { MAX_URL_LENGTH } from "@trackunit/react-components";
 /**
- * Get the persistence key for the filter bar.
- *
- * @param {string} name - The name of the filter bar.
- * @param {string} clientSideUserId - The client side user id.
- * @returns {string} The persistence key.
+ * @deprecated Use `useStorageKey` from `@trackunit/react-components` with key `filter-${name}` instead.
  */
 export declare const getPersistenceKey: (name: string, clientSideUserId?: string) => string;
 /**
@@ -72,4 +68,3 @@ type UseFilterBarPersistenceReturn<TFilterBarDefinition extends FilterBarDefinit
  * Custom hook for managing the persistence of filter bar configurations.
  */
 export declare const useFilterBarPersistence: <TFilterBarDefinition extends FilterBarDefinition>({ name, setValue, refreshData, isDefaultValue, loadData: inputLoadData, saveData: inputSaveData, }: FilterBarPersistenceProps<TFilterBarDefinition>) => UseFilterBarPersistenceReturn<TFilterBarDefinition>;
-export {};