@trackunit/filters-filter-bar 1.7.87 → 1.7.90

package/index.esm.js

@@ -2,8 +2,8 @@ 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, List, Text, Card, CardBody, useViewportBreakpoints, Popover, PopoverTrigger, Tooltip, PopoverContent, IconButton, MenuList } from '@trackunit/react-components';
-import { useAnalytics, useTextSearch, useCurrentUser } from '@trackunit/react-core-hooks';
+import { Button, Icon, List, Text, Card, CardBody, useViewportBreakpoints, Popover, PopoverTrigger, Tooltip, IconButton, PopoverContent, MenuList } from '@trackunit/react-components';
+import { useAnalytics, useTextSearch, useCurrentUser, useCustomEncoding } from '@trackunit/react-core-hooks';
 import { capitalize } from 'string-ts';
 import { createEvent } from '@trackunit/react-core-contexts-api';
 import { Search, NumberField, RadioGroup } from '@trackunit/react-form-components';
@@ -13,9 +13,9 @@ import { twMerge } from 'tailwind-merge';
 import { customFieldFilterKey } from '@trackunit/iris-app-api';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { dequal } from 'dequal';
-import isEqual from 'lodash/isEqual';
 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",
@@ -1059,7 +1059,7 @@ const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [],
                         setSearchText("");
                     }
                 }, placement: "bottom-start", children: modalState => {
-                    return (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: jsx("div", { "data-testid": "starred-filters-menu-trigger", id: "starred-filters-menu-trigger", children: jsx(Tooltip, { disabled: !compact || modalState.isOpen, label: jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filters: appliedFilters }), children: jsx(Button, { prefix: jsx(Icon, { ariaHidden: true, color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Filter", size: "small" }), size: "small", suffix: compact && showAppliedFiltersCount && filterBarConfig.appliedFilterKeys().length > 0 && isSm ? (jsxs("div", { children: [jsxs("span", { "aria-hidden": true, children: ["(", filterBarConfig.appliedFilterKeys().length, ")"] }), jsxs("span", { className: "sr-only", children: [filterBarConfig.appliedFilterKeys().length, " filters applied"] })] })) : undefined, variant: "secondary", ...buttonProps, children: title !== "" ? (jsx("span", { className: "hidden sm:block", children: title ?? t("filtersBar.filtersHeading") })) : null }) }) }) }), jsx(PopoverContent, { cellPadding: 100, children: jsx(FiltersMenuContent, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, filterBarDefinitionCount: filterBarDefinitionCount, filtersToShowGrouped: filtersToShowGrouped, hasCustomFields: hasCustomFields, removeCustomFieldsGroup: removeCustomFieldsGroup, searchResultsGrouped: searchResultsGrouped, searchText: searchText, setSearchText: setSearchText, setShowCustomFilters: setShowCustomFilters, showCustomFilters: showCustomFilters }) })] }));
+                    return (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: jsx("div", { "data-testid": "starred-filters-menu-trigger", id: "starred-filters-menu-trigger", children: jsx(Tooltip, { disabled: !compact || modalState.isOpen, label: jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filters: appliedFilters }), children: !isSm ? (jsx(IconButton, { "aria-label": title ?? t("filtersBar.filtersHeading"), icon: jsx(Icon, { ariaHidden: true, color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Filter", size: "small" }), size: "small", variant: "secondary", ...buttonProps })) : (jsx(Button, { prefix: jsx(Icon, { ariaHidden: true, color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Filter", size: "small" }), size: "small", suffix: compact && showAppliedFiltersCount && filterBarConfig.appliedFilterKeys().length > 0 ? (jsxs("div", { children: [jsxs("span", { "aria-hidden": true, children: ["(", filterBarConfig.appliedFilterKeys().length, ")"] }), jsxs("span", { className: "sr-only", children: [filterBarConfig.appliedFilterKeys().length, " filters applied"] })] })) : undefined, variant: "secondary", ...buttonProps, children: title !== "" ? (title ?? t("filtersBar.filtersHeading")) : null })) }) }) }), jsx(PopoverContent, { cellPadding: 100, children: jsx(FiltersMenuContent, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, filterBarDefinitionCount: filterBarDefinitionCount, filtersToShowGrouped: filtersToShowGrouped, hasCustomFields: hasCustomFields, removeCustomFieldsGroup: removeCustomFieldsGroup, searchResultsGrouped: searchResultsGrouped, searchText: searchText, setSearchText: setSearchText, setShowCustomFilters: setShowCustomFilters, showCustomFilters: showCustomFilters }) })] }));
                 } }), showDirectlyFilters.length > 0 ? (jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, !compact ? jsx(AppliedFiltersRenderer, { appliedFilters: appliedFilters, filterBarConfig: filterBarConfig }) : null] }));
 };
 
@@ -1435,6 +1435,23 @@ const createInitialState = ({ name, mainFilters, setValue, }) => {
  * Dont move these to FilterTypes.ts since rollup will mess up the type.d.ts file by moving jsdocs in random places.
  */
 const areaFilterGeoJsonGeometrySchema = z.union([geoJsonPolygonSchema, geoJsonMultiPolygonSchema]);
+const stringSchema = z.string();
+const stringArraySchema = z.array(z.string());
+const numberSchema = z.number();
+const booleanSchema = z.boolean();
+const valueNameSchema = z.object({
+    value: stringSchema,
+    name: stringSchema,
+});
+const minMaxFilterSchema = z.object({
+    min: numberSchema.optional(),
+    max: numberSchema.optional(),
+});
+const dateRangeSchema = z.object({
+    from: stringSchema.optional(),
+    to: stringSchema.optional(),
+});
+const valueNameArraySchema = z.array(valueNameSchema);
 
 const hasValue = (value) => {
     if (value === undefined || value === null) {
@@ -1540,9 +1557,49 @@ const validateFilter = ({ values, filterDefinitions, }) => {
             inBadState = true;
         }
     });
-    stateKeys.sort((a, b) => a.localeCompare(b));
-    const filterKeysNotEqual = !isEqual(stateKeys, filterDefinitions.map(f => f.filterKey).sort((a, b) => a.localeCompare(b)));
-    return !(inBadState || filterKeysNotEqual);
+    // check that all keys in stateKeys  are in filterDefinitions
+    stateKeys.forEach(stateKey => {
+        if (!filterDefinitions.find(filterDefinition => filterDefinition.filterKey === stateKey)) {
+            inBadState = true;
+        }
+    });
+    return !inBadState;
+};
+
+/**
+ * Generic hook for setting the value of a filter bar.
+ *
+ * @template TFilterBarDefinition - The type of the filter bar definition.
+ * @returns {object} An object containing the setValue function.
+ */
+const useIsDefaultValue = () => {
+    const isDefaultValue = useCallback((key, filterValue, filterBarDefinition, initialState) => {
+        const filterDefinition = filterBarDefinition[key];
+        if ((initialState && dequal(filterValue, initialState[key])) ||
+            dequal(filterValue, filterDefinition?.defaultValue)) {
+            return true;
+        }
+        if (!filterValue) {
+            return true;
+        }
+        if (Array.isArray(filterValue)) {
+            return filterValue.length === 0;
+        }
+        if (isMinMaxFilterValue(filterValue)) {
+            return filterValue.min === undefined && filterValue.max === undefined;
+        }
+        if (isValueName(filterValue)) {
+            return filterValue.value === "";
+        }
+        if (isDateRangeValue(filterValue)) {
+            return filterValue.from === undefined && filterValue.to === undefined;
+        }
+        if (typeof filterValue === "object") {
+            return objectKeys(filterValue).length === 0;
+        }
+        return false;
+    }, []);
+    return useMemo(() => ({ isDefaultValue }), [isDefaultValue]);
 };
 
 /**
@@ -1552,6 +1609,7 @@ const validateFilter = ({ values, filterDefinitions, }) => {
  * @returns {object} An object containing filter bar configuration and actions.
  */
 const useFilterBarActions = ({ name, filterBarConfig, filterBarDefinition, setFilterBarConfig, setValue, initialState, }) => {
+    const { isDefaultValue } = useIsDefaultValue();
     const filterMapGetter = useMemo(() => {
         return {
             getFilterBarName: () => {
@@ -1564,28 +1622,7 @@ const useFilterBarActions = ({ name, filterBarConfig, filterBarDefinition, setFi
                 const filter = filterBarConfig.values[key];
                 return filter?.includes(value) || false;
             },
-            isDefaultValue(key, filterValue) {
-                const filterDefinition = filterBarDefinition[key];
-                if (dequal(filterValue, initialState?.[key]) || dequal(filterValue, filterDefinition?.defaultValue)) {
-                    return true;
-                }
-                if (!filterValue) {
-                    return true;
-                }
-                if (Array.isArray(filterValue)) {
-                    return filterValue.length === 0;
-                }
-                if (isMinMaxFilterValue(filterValue)) {
-                    return filterValue.min === undefined && filterValue.max === undefined;
-                }
-                if (isValueName(filterValue)) {
-                    return filterValue.value === "";
-                }
-                if (typeof filterValue === "object") {
-                    return objectKeys(filterValue).length === 0;
-                }
-                return false;
-            },
+            isDefaultValue: (key, value) => isDefaultValue(key, value, filterBarDefinition, initialState),
             getValuesByKey(key) {
                 return filterBarConfig.values[key];
             },
@@ -1612,7 +1649,7 @@ const useFilterBarActions = ({ name, filterBarConfig, filterBarDefinition, setFi
                 return filter?.value === value || false;
             },
         };
-    }, [filterBarDefinition, filterBarConfig.name, filterBarConfig.values, initialState]);
+    }, [filterBarDefinition, filterBarConfig.name, filterBarConfig.values, initialState, isDefaultValue]);
     const filterMapActions = useMemo(() => {
         // Reset an individual filter to its initial state
         const resetIndividualFilterToInitialState = (key) => {
@@ -1829,6 +1866,127 @@ const useFilterBarActions = ({ name, filterBarConfig, filterBarDefinition, setFi
     return useMemo(() => ({ filterMapGetter, filterMapActions }), [filterMapGetter, filterMapActions]);
 };
 
+/**
+ * Hook to sync filter values with URL
+ *
+ * @returns {object} Object containing loadFromUrl and saveToUrl functions
+ */
+const useFilterUrlSync = () => {
+    const getZodSchema = useCallback((filterType) => {
+        if (filterType === "string") {
+            return stringSchema;
+        }
+        else if (filterType === "stringArray") {
+            return stringArraySchema;
+        }
+        else if (filterType === "dateRange") {
+            return dateRangeSchema;
+        }
+        else if (filterType === "area") {
+            return areaFilterGeoJsonGeometrySchema;
+        }
+        else if (filterType === "valueNameArray") {
+            return valueNameArraySchema;
+        }
+        else if (filterType === "valueName") {
+            return valueNameSchema;
+        }
+        else if (filterType === "minMax") {
+            return minMaxFilterSchema;
+        }
+        else if (filterType === "boolean") {
+            return booleanSchema;
+        }
+        return numberSchema;
+    }, []);
+    const getJsonParsedVal = useCallback((filterValue, zodSchema) => {
+        if (!zodSchema) {
+            return filterValue;
+        }
+        if (zodSchema._def.typeName === "ZodString") {
+            return filterValue ? filterValue + "" : filterValue;
+        }
+        if (typeof filterValue === "string") {
+            try {
+                return JSON.parse(filterValue);
+            }
+            catch (e) {
+                return filterValue;
+            }
+        }
+        return filterValue;
+    }, []);
+    const getFilterValuesFromUrl = useCallback((definitions, search) => {
+        const loadedValues = {};
+        definitions.forEach(filter => {
+            const filterValue = search[filter.filterKey];
+            if (filterValue) {
+                const zodSchema = filter.zodSchema || getZodSchema(filter.type);
+                const jsonParsed = getJsonParsedVal(filterValue, zodSchema);
+                const zodParsed = zodSchema.safeParse(jsonParsed);
+                if (zodParsed.success) {
+                    loadedValues[filter.filterKey] = zodParsed.data;
+                }
+            }
+        });
+        return loadedValues;
+    }, [getJsonParsedVal, getZodSchema]);
+    const getFilterValuesToUrl = useCallback((values, definitions, setEmptyAndDefaultValues, isDefaultValue) => {
+        const urlObject = {};
+        definitions.forEach(filter => {
+            const value = values?.[filter.filterKey];
+            if (value) {
+                if (setEmptyAndDefaultValues) {
+                    urlObject[filter.filterKey] = value;
+                }
+                else if (!isDefaultValue(filter.filterKey, value)) {
+                    if (Array.isArray(value) && value.length === 0) {
+                        delete urlObject[filter.filterKey];
+                    }
+                    else {
+                        urlObject[filter.filterKey] = value;
+                    }
+                }
+                else {
+                    delete urlObject[filter.filterKey];
+                }
+            }
+        });
+        return urlObject;
+    }, []);
+    return useMemo(() => ({
+        getFilterValuesFromUrl,
+        getFilterValuesToUrl,
+    }), [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.
  *
@@ -1840,20 +1998,131 @@ const getPersistenceKey = (name, clientSideUserId) => `filter-${name}-${clientSi
 /**
  * Custom hook for managing the persistence of filter bar configurations.
  *
+ * This hook provides a complete state management solution for filter bars with automatic
+ * URL synchronization and localStorage persistence. It maintains the following state:
+ *
+ * ## State Management Flow:
+ *
+ * 1. **Initial Load**:
+ *    - Loads from localStorage (if no custom loadData or saveData function is provided)
+ *    - Updates with state from URL search parameters
+ *    - Ensures URL is updated with the final state after load
+ *
+ * 2. **Save Operations**:
+ *    - Updates localStorage with new filter values
+ *    - Updates URL search parameters to reflect current state
+ *    - Maintains synchronization between localStorage and URL
+ *
+ * 3. **URL Change Detection**:
+ *    - Listens for changes in URL search parameters
+ *    - Compares URL state with last known state to detect external changes
+ *    - Triggers refreshData callback when external URL changes are detected
+ *    - Only updates URL when no custom loadData or saveData function provided
+ *
+ * ## Behavior Modes:
+ *
+ * **Default Mode** (no custom functions):
+ * - Uses localStorage for persistence
+ * - Automatically syncs with URL search parameters
+ * - Handles URL updates and change detection
+ *
+ * **Custom Mode** (with loadData/saveData functions):
+ * - Does NOT sync with URL or use localStorage
+ * - Relies entirely on provided functions for persistence
+ * - Does not provide URL change detection via refreshData callback
+ *
+ * The hook prevents infinite loops by:
+ * - Tracking what state was last sent to the URL
+ * - Only updating URL when state actually changes
+ * - Distinguishing between internal state changes and external URL changes
+ *
  * @template TFilterBarDefinition - The type of the filter bar definition.
  * @param {FilterBarPersistenceProps<TFilterBarDefinition>} props - The props for the filter bar persistence.
  * @returns { object } An object containing the loadData and saveData functions.
  */
-const useFilterBarPersistence = ({ name, setValue, loadData: inputLoadData, saveData: inputSaveData, }) => {
+const useFilterBarPersistence = ({ name, setValue, refreshData, isDefaultValue, loadData: inputLoadData, saveData: inputSaveData, }) => {
     const { clientSideUserId } = useCurrentUser();
+    const search = useSearch({ strict: false });
+    const location = useLocation();
+    const navigate = useNavigate();
+    const { encode, decode } = useCustomEncoding();
+    const { getUrlLengthWithSearchParam } = useSearchUtils();
+    const updateSearch = useCallback(async (searchParams) => {
+        if (!inputLoadData && !inputSaveData) {
+            // 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];
+                    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 [lastSavedState, setLastSavedState] = useState(undefined);
+    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) {
+            requestAnimationFrame(() => {
+                const currentSearchValue = search[name];
+                let currentSearchValueParsed;
+                let lastSearchUpdateRefParsed;
+                try {
+                    currentSearchValueParsed = currentSearchValue ? decode(currentSearchValue) : undefined;
+                }
+                catch (error) {
+                    // Invalid compressed data, treat as undefined
+                    currentSearchValueParsed = undefined;
+                }
+                try {
+                    lastSearchUpdateRefParsed = lastSearchUpdateRef.current ? decode(lastSearchUpdateRef.current) : undefined;
+                }
+                catch (error) {
+                    // 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(currentSearchValueParsed, lastSearchUpdateRefParsed)) {
+                    // This is an external URL change with actual data, trigger refreshData
+                    if (refreshDataRef.current) {
+                        refreshDataRef.current();
+                    }
+                }
+            });
+        }
+    }, [search, name, inputLoadData, inputSaveData, decode]);
     const saveData = useCallback((filterBarConfig, filterBarDefinitions) => {
-        const newValues = Object.assign({}, lastSavedState || {});
+        const newValues = Object.assign({}, lastSavedStateRef.current || {});
         if (filterBarConfig.values) {
             Object.entries(filterBarConfig.values).forEach(([key, value]) => {
                 const typedKey = key;
@@ -1866,41 +2135,83 @@ const useFilterBarPersistence = ({ name, setValue, loadData: inputLoadData, save
         const toPersist = {
             values: newValues,
         };
-        if (!dequal(newValues, lastSavedState)) {
-            setLastSavedState(newValues);
+        if (!dequal(newValues, lastSavedStateRef.current)) {
+            lastSavedStateRef.current = newValues;
             if (inputSaveData) {
                 inputSaveData(newValues);
             }
             else {
                 localStorage.setItem(getPersistenceKey(name, clientSideUserId), JSON.stringify(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);
             }
         }
-    }, [name, clientSideUserId, inputSaveData, lastSavedState]);
-    const loadValues = useCallback(() => {
-        if (inputLoadData) {
-            return inputLoadData();
+    }, [name, clientSideUserId, inputSaveData, getFilterValuesToUrl, updateSearch, encode, isDefaultValue]);
+    const loadFromLocalStorage = useCallback(() => {
+        let storedFilters = null;
+        if (lastName.current !== name) {
+            storedFilters = localStorage.getItem(getPersistenceKey(name, clientSideUserId)) || "{}";
+            lastName.current = name;
         }
         else {
-            let storedFilters = null;
-            if (lastName.current !== name) {
-                storedFilters = localStorage.getItem(getPersistenceKey(name, clientSideUserId)) || "{}";
-                lastName.current = name;
+            storedFilters = initialStoredFilters;
+        }
+        if (storedFilters && storedFilters !== "undefined") {
+            try {
+                const loadedFilterBarConfigValues = JSON.parse(storedFilters);
+                return loadedFilterBarConfigValues?.values || {};
             }
-            else {
-                storedFilters = initialStoredFilters;
+            catch (error) {
+                return {};
             }
-            if (storedFilters && storedFilters !== "undefined") {
-                try {
-                    const loadedFilterBarConfigValues = JSON.parse(storedFilters);
-                    return loadedFilterBarConfigValues?.values;
-                }
-                catch (error) {
-                    return null;
+        }
+        return {};
+    }, [clientSideUserId, name, initialStoredFilters, lastName]);
+    const loadFromSearchURL = useCallback(() => {
+        let searchParams = search || {};
+        const searchParamValue = searchParams[name];
+        if (searchParamValue) {
+            try {
+                searchParams = decode(searchParamValue);
+            }
+            catch (error) {
+                searchParams = {};
+            }
+            return searchParams;
+        }
+        return null;
+    }, [search, name, decode]);
+    const loadValues = useCallback((filterDefinitions) => {
+        if (inputLoadData) {
+            return inputLoadData();
+        }
+        else {
+            const values = loadFromLocalStorage() || {};
+            const searchParams = loadFromSearchURL();
+            if (searchParams && 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) {
+                            values[key] = valuesFromUrl[key];
+                        }
+                        else {
+                            values[key] = filter.defaultValue;
+                        }
+                    });
                 }
             }
-            return null;
+            return values;
         }
-    }, [inputLoadData, initialStoredFilters, clientSideUserId, name]);
+    }, [inputLoadData, loadFromLocalStorage, getFilterValuesFromUrl, loadFromSearchURL]);
     const loadData = useCallback((updatedFilterDefinitionsValues) => {
         const initialStateValues = createInitialState({
             name,
@@ -1908,16 +2219,22 @@ const useFilterBarPersistence = ({ name, setValue, loadData: inputLoadData, save
             setValue,
         });
         const loadedFilterBarConfigValues = {
-            values: loadValues(),
+            values: loadValues(updatedFilterDefinitionsValues),
         };
         let initialFilterBarConfig;
         if (loadedFilterBarConfigValues.values) {
-            // make sure the last saved state is the same as the loaded values no manipulation of values!
-            setLastSavedState(Object.assign({}, loadedFilterBarConfigValues.values));
             if (validateFilter({
                 values: loadedFilterBarConfigValues.values,
                 filterDefinitions: updatedFilterDefinitionsValues,
             })) {
+                objectKeys(initialStateValues.values).forEach(key => {
+                    if (loadedFilterBarConfigValues.values) {
+                        loadedFilterBarConfigValues.values[key] =
+                            loadedFilterBarConfigValues.values[key] !== undefined
+                                ? loadedFilterBarConfigValues.values[key]
+                                : initialStateValues.values[key];
+                    }
+                });
                 initialFilterBarConfig = {
                     values: loadedFilterBarConfigValues.values,
                     name: name,
@@ -1939,9 +2256,17 @@ const useFilterBarPersistence = ({ name, setValue, loadData: inputLoadData, save
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             initialFilterBarConfig.setters[`set${capitalize(key)}`] = (callback) => setValue(key, callback);
         });
+        const urlObject = getFilterValuesToUrl(initialFilterBarConfig.values, updatedFilterDefinitionsValues, false, isDefaultValue);
+        const result = {};
+        if (initialFilterBarConfig.name) {
+            result[initialFilterBarConfig.name] = encode(JSON.stringify(urlObject));
+            // Update the ref BEFORE updating the URL to prevent false external change detection
+            lastSearchUpdateRef.current = result[initialFilterBarConfig.name];
+        }
+        updateSearch(result);
         return initialFilterBarConfig;
-    }, [name, setValue, loadValues]);
-    return useMemo(() => ({ loadData, saveData }), [loadData, saveData]);
+    }, [name, setValue, loadValues, getFilterValuesToUrl, updateSearch, encode, isDefaultValue]);
+    return useMemo(() => ({ loadData, saveData, getFilterValuesToUrl }), [loadData, saveData, getFilterValuesToUrl]);
 };
 
 /**
@@ -1974,21 +2299,18 @@ const useGenericSetValue = () => {
 const useFilterBar = ({ name, onValuesChange, filterBarDefinition, loadData: inputLoadData, saveData: inputSaveData, }) => {
     const lastName = useRef(name);
     const { setValue } = useGenericSetValue();
+    const { isDefaultValue } = useIsDefaultValue();
     const { loadData, saveData } = useFilterBarPersistence({
         name,
+        isDefaultValue: (key, value) => isDefaultValue(key, value, filterBarDefinition),
         setValue: (key, callback) => setValue(setFilterBarConfig, key, callback),
+        refreshData: () => setFilterBarConfig(loadData(objectValues(filterBarDefinition))),
         loadData: inputLoadData,
         saveData: inputSaveData,
     });
     const [filterBarConfig, setFilterBarConfig] = useState(() => {
         return loadData(objectValues(filterBarDefinition));
     });
-    useEffect(() => {
-        if (lastName.current !== name) {
-            setFilterBarConfig(loadData(objectValues(filterBarDefinition)));
-            lastName.current = name;
-        }
-    }, [filterBarDefinition, loadData, name]);
     const { filterMapActions, filterMapGetter } = useFilterBarActions({
         name,
         filterBarConfig,
@@ -1997,10 +2319,20 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, loadData: inp
         setFilterBarConfig,
         setValue: (key, callback) => setValue(setFilterBarConfig, key, callback),
     });
+    const onValuesChangeRef = useRef(onValuesChange);
+    useEffect(() => {
+        onValuesChangeRef.current = onValuesChange;
+    }, [onValuesChange]);
     useEffect(() => {
         saveData(filterBarConfig, filterBarDefinition);
-        onValuesChange?.(filterBarConfig.values);
-    }, [filterBarConfig, filterBarDefinition, onValuesChange, saveData]);
+        onValuesChangeRef.current?.(filterBarConfig.values);
+    }, [filterBarConfig, filterBarDefinition, saveData]);
+    useEffect(() => {
+        if (lastName.current !== name) {
+            setFilterBarConfig(loadData(objectValues(filterBarDefinition)));
+            lastName.current = name;
+        }
+    }, [filterBarDefinition, loadData, name]);
     return useMemo(() => {
         return {
             filterBarConfig: { ...filterBarConfig, ...filterMapActions, ...filterMapGetter },
@@ -2020,13 +2352,20 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, loadData: inp
 const useFilterBarAsync = ({ name, onValuesChange, filterBarDefinition, loadData: inputLoadData, saveData: inputSaveData, }) => {
     const [isDataLoaded, setIsDataLoaded] = useState(false);
     const [asyncLoadedFilterBarDefinitions, setAsyncLoadedFilterBarDefinitions] = useState();
+    const { isDefaultValue } = useIsDefaultValue();
     const internalFilterBarDefinitions = useMemo(() => asyncLoadedFilterBarDefinitions ?? filterBarDefinition, [filterBarDefinition, asyncLoadedFilterBarDefinitions]);
     const { setValue } = useGenericSetValue();
     const { loadData, saveData } = useFilterBarPersistence({
         name,
+        isDefaultValue: (key, value) => isDefaultValue(key, value, filterBarDefinition, filterBarConfig.initialState),
         setValue: (key, callback) => setValue(setFilterBarConfig, key, callback),
         loadData: inputLoadData,
         saveData: inputSaveData,
+        refreshData: () => {
+            if (asyncLoadedFilterBarDefinitions) {
+                setFilterBarConfig(loadData(objectValues(asyncLoadedFilterBarDefinitions)));
+            }
+        },
     });
     const [filterBarConfig, setFilterBarConfig] = useState(() => {
         const initialConfig = {
@@ -2037,13 +2376,16 @@ const useFilterBarAsync = ({ name, onValuesChange, filterBarDefinition, loadData
         };
         return initialConfig;
     });
+    const setValueMemoized = useCallback((key, callback) => {
+        setValue(setFilterBarConfig, key, callback);
+    }, [setFilterBarConfig, setValue]);
     const { filterMapActions, filterMapGetter } = useFilterBarActions({
         name,
         filterBarConfig,
         filterBarDefinition: internalFilterBarDefinitions,
         initialState: filterBarConfig.initialState,
         setFilterBarConfig,
-        setValue: (key, callback) => setValue(setFilterBarConfig, key, callback),
+        setValue: setValueMemoized,
     });
     const dataLoaded = useCallback((loadedFilterDefinitionsValues) => {
         setIsDataLoaded(false);
@@ -2082,19 +2424,18 @@ const useFilterBarAsync = ({ name, onValuesChange, filterBarDefinition, loadData
  * The parameter is validated using the provided Zod schema.
  *
  * @template T - A Zod schema used for validation.
- * @param {string} searchParamName - The name of the search parameter in the URL.
  * @param {string} filterName - The name of the filter.
  * @param {object} search - The current search state, provided by `useSearch` from @tanstack/react-router.
  * @param {T} zodSchema - The Zod schema for validating the filter data.
  * @param {ErrorHandlingContextValue} errorHandler - Error handling context for capturing and reporting exceptions.
  * @returns {any} The parsed filter data if validation succeeds, otherwise `null`.
  */
-const useSearchParamAsFilter = ({ searchParamName, filterName, search, zodSchema, errorHandler, }) => {
+const useSearchParamAsFilter = ({ filterName, search, zodSchema, errorHandler, }) => {
     return useMemo(() => {
-        if (!objectKeys(search).includes(searchParamName)) {
+        if (!objectKeys(search).includes(filterName)) {
             return null;
         }
-        const foundParam = search[searchParamName];
+        const foundParam = search[filterName];
         try {
             const getJsonParsedVal = () => {
                 if (zodSchema._def.typeName === "ZodString") {
@@ -2125,7 +2466,7 @@ const useSearchParamAsFilter = ({ searchParamName, filterName, search, zodSchema
                 zodParseError: null,
             });
         }
-    }, [search, searchParamName, zodSchema, errorHandler, filterName]);
+    }, [search, zodSchema, errorHandler, filterName]);
 };
 const captureUrlParseException = (errorHandler, { filterName, param, jsonParsed: parsed }) => errorHandler.captureException(new Error(JSON.stringify({
     info: `Received invalid values for ${filterName} from URL query params. Can't set ${filterName} filter with this. Please fix the URL query params (or schema).`,
@@ -2154,4 +2495,4 @@ const mergeFilters = (filterBarDefinition, extraFilters) => {
  */
 setupLibraryTranslations();
 
-export { AppliedFiltersRenderer, DefaultCheckboxFilter, DefaultDateRangeFilter, DefaultMinMaxFilter, DefaultRadioFilter, DynamicFilterList, FilterBar, FilterButtonTooltipLabel, FilterComponent, FilterEvents, FilterHeader, FilterResults, FilterTableComponent, FiltersMenu, FiltersMenuContent, FiltersRenderer, GroupedFiltersList, HierarchicalCheckboxFilter, MultipleFilterTooltipLabel, ResetFiltersButton, TooltipLabel, areaFilterGeoJsonGeometrySchema, isAreaFilterValue, isArrayFilterValue, isBooleanValue, isDateRangeValue, isMinMaxFilterValue, isStringArrayFilterValue, isValueName, isValueNameArray, mergeFilters, mockFilterBar, toggleFilterValue, useFilterBar, useFilterBarAsync, useFiltersMenu, useSearchParamAsFilter, validateFilter };
+export { AppliedFiltersRenderer, DefaultCheckboxFilter, DefaultDateRangeFilter, DefaultMinMaxFilter, DefaultRadioFilter, DynamicFilterList, FilterBar, FilterButtonTooltipLabel, FilterComponent, FilterEvents, FilterHeader, FilterResults, FilterTableComponent, FiltersMenu, FiltersMenuContent, FiltersRenderer, GroupedFiltersList, HierarchicalCheckboxFilter, MultipleFilterTooltipLabel, ResetFiltersButton, TooltipLabel, areaFilterGeoJsonGeometrySchema, booleanSchema, dateRangeSchema, isAreaFilterValue, isArrayFilterValue, isBooleanValue, isDateRangeValue, isMinMaxFilterValue, isStringArrayFilterValue, isValueName, isValueNameArray, mergeFilters, minMaxFilterSchema, mockFilterBar, numberSchema, stringArraySchema, stringSchema, toggleFilterValue, useFilterBar, useFilterBarAsync, useFiltersMenu, useSearchParamAsFilter, validateFilter, valueNameArraySchema, valueNameSchema };