@trackunit/filters-filter-bar 1.3.42 → 1.3.45

package/index.cjs.js

@@ -367,13 +367,13 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked
  *
  * @returns {ReactElement} - Returns the FilterHeader component.
  */
-const FilterHeader = ({ filterKey, title, searchEnabled, searchProps, filterHasChanged, resetIndividualFilterToInitialState, onResetFilter, loading = false, children, className, dataTestId, }) => {
+const FilterHeader = ({ filterKey, title, searchEnabled, searchProps, filterHasChanges, resetIndividualFilterToInitialState, onResetFilter, loading = false, children, className, dataTestId, }) => {
     const [t] = useTranslation();
     const handleResetFilter = () => {
         resetIndividualFilterToInitialState(filterKey);
         onResetFilter?.();
     };
-    return (jsxRuntime.jsxs(reactFilterComponents.FilterHeader, { className: className, dataTestId: dataTestId ?? `${filterKey}-filter-header`, loading: loading, onReset: handleResetFilter, resetLabel: t("filtersBar.resetFilter"), showReset: filterHasChanged(filterKey), title: title, children: [searchEnabled ? (jsxRuntime.jsx(reactFormComponents.Search, { autoFocus: true, fieldSize: "small", id: `${filterKey}-search`, onChange: e => searchProps.onChange(e.currentTarget.value), onKeyDown: e => {
+    return (jsxRuntime.jsxs(reactFilterComponents.FilterHeader, { className: className, dataTestId: dataTestId ?? `${filterKey}-filter-header`, loading: loading, onReset: handleResetFilter, resetLabel: t("filtersBar.resetFilter"), showReset: filterHasChanges, title: title, children: [searchEnabled ? (jsxRuntime.jsx(reactFormComponents.Search, { autoFocus: true, fieldSize: "small", id: `${filterKey}-search`, onChange: e => searchProps.onChange(e.currentTarget.value), onKeyDown: e => {
                     if (e.key === "Enter" && searchProps.onEnter) {
                         searchProps.onEnter(searchProps.value);
                     }
@@ -502,7 +502,7 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
             setMultipleValues(selectValues);
         }
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FilterHeader, { ...filterDefinition, ...filterBarActions, loading: loading, searchEnabled: true, searchProps: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FilterHeader, { ...filterDefinition, ...filterBarActions, filterHasChanges: filterBarActions.appliedFilterKeys().includes(filterDefinition.filterKey), loading: loading, searchEnabled: true, searchProps: {
                     value: customSearch?.value ?? searchText,
                     onChange: customSearch?.onChange ?? setSearchText,
                     count: undefinedCount ? filteredOptions.length - 1 : filteredOptions.length,
@@ -587,8 +587,8 @@ const DefaultMinMaxFilter = ({ filterDefinition, filterName, value, setValue, fi
     }, [value]);
     const { logEvent } = reactCoreHooks.useAnalytics(FilterEvents);
     const handleApply = () => {
-        const realMinValue = minValue === 0 ? undefined : minValue ?? undefined;
-        const realMaxValue = maxValue === 0 ? undefined : maxValue ?? undefined;
+        const realMinValue = minValue === 0 ? undefined : (minValue ?? undefined);
+        const realMaxValue = maxValue === 0 ? undefined : (maxValue ?? undefined);
         logEvent("Filters Applied - V2", {
             type: filterName ?? `${stringTs.capitalize(filterDefinition.filterKey)}Filter`,
             value: JSON.stringify({ min: realMinValue, max: realMaxValue }),
@@ -597,7 +597,7 @@ const DefaultMinMaxFilter = ({ filterDefinition, filterName, value, setValue, fi
             return realMinValue || realMaxValue ? { min: realMinValue, max: realMaxValue } : {};
         });
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactFilterComponents.FilterHeader, { onReset: () => filterBarActions.resetIndividualFilterToInitialState(filterDefinition.filterKey), resetLabel: t("filtersBar.resetFilter"), showReset: filterBarActions.filterHasChanged(filterDefinition.filterKey), title: filterDefinition.title }), jsxRuntime.jsxs(reactFilterComponents.FilterBody, { children: [jsxRuntime.jsxs("div", { className: "flex gap-4 px-1", children: [jsxRuntime.jsx(reactFormComponents.NumberField, { addonAfter: unit, className: "w-40", label: t("filtersBar.defaultMinMaxFilters.min"), max: filterDefinition.type === "minMax" ? filterDefinition.maximumNumber : undefined, min: filterDefinition.type === "minMax" ? filterDefinition.minimumNumber : undefined, onChange: e => setMinValue(e.target.value === "" ? undefined : Number(e.target.value)), value: minValue ?? "" }), jsxRuntime.jsx(reactFormComponents.NumberField, { addonAfter: unit, className: "w-40", label: t("filtersBar.defaultMinMaxFilters.max"), max: filterDefinition.type === "minMax" ? filterDefinition.maximumNumber : undefined, min: filterDefinition.type === "minMax" ? filterDefinition.minimumNumber : undefined, onChange: e => setMaxValue(e.target.value === "" ? undefined : Number(e.target.value)), value: maxValue ?? "" })] }), jsxRuntime.jsx(reactFilterComponents.FilterFooter, { children: jsxRuntime.jsx(reactComponents.Button, { onClick: handleApply, size: "small", variant: "ghost", children: t("filtersBar.defaultMinMaxFilters.apply") }) })] })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactFilterComponents.FilterHeader, { onReset: () => filterBarActions.resetIndividualFilterToInitialState(filterDefinition.filterKey), resetLabel: t("filtersBar.resetFilter"), showReset: filterBarActions.appliedFilterKeys().includes(filterDefinition.filterKey), title: filterDefinition.title }), jsxRuntime.jsxs(reactFilterComponents.FilterBody, { children: [jsxRuntime.jsxs("div", { className: "flex gap-4 px-1", children: [jsxRuntime.jsx(reactFormComponents.NumberField, { addonAfter: unit, className: "w-40", label: t("filtersBar.defaultMinMaxFilters.min"), max: filterDefinition.type === "minMax" ? filterDefinition.maximumNumber : undefined, min: filterDefinition.type === "minMax" ? filterDefinition.minimumNumber : undefined, onChange: e => setMinValue(e.target.value === "" ? undefined : Number(e.target.value)), value: minValue ?? "" }), jsxRuntime.jsx(reactFormComponents.NumberField, { addonAfter: unit, className: "w-40", label: t("filtersBar.defaultMinMaxFilters.max"), max: filterDefinition.type === "minMax" ? filterDefinition.maximumNumber : undefined, min: filterDefinition.type === "minMax" ? filterDefinition.minimumNumber : undefined, onChange: e => setMaxValue(e.target.value === "" ? undefined : Number(e.target.value)), value: maxValue ?? "" })] }), jsxRuntime.jsx(reactFilterComponents.FilterFooter, { children: jsxRuntime.jsx(reactComponents.Button, { onClick: handleApply, size: "small", variant: "ghost", children: t("filtersBar.defaultMinMaxFilters.apply") }) })] })] }));
 };
 
 /**
@@ -619,7 +619,7 @@ const DefaultRadioFilter = ({ filterDefinition, filterBarActions, options, loadi
         }
     };
     const selectedRadioId = filteredOptions.find(option => filterBarActions.objectIncludesValue(filterDefinition.filterKey, option.key));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FilterHeader, { ...filterBarActions, ...filterDefinition, loading: loading, searchEnabled: true, searchProps: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FilterHeader, { ...filterBarActions, ...filterDefinition, filterHasChanges: filterBarActions.appliedFilterKeys().includes(filterDefinition.filterKey), loading: loading, searchEnabled: true, searchProps: {
                     value: customSearch?.value ?? searchText,
                     onChange: customSearch?.onChange ?? setSearchText,
                     count: filteredOptions.length,
@@ -647,7 +647,7 @@ const useStarredGroupFilters = (filterDefinitions, hiddenFilters) => {
         }))
             .filter(filter => filter.filters.length > 0);
     }, [filterDefinitions, hiddenFilters, t]);
-    return { filtersGrouped };
+    return react.useMemo(() => ({ filtersGrouped }), [filtersGrouped]);
 };
 const uniqueKeysFromGroups = (filters) => [...new Set(filters.map(filter => filter.group))];
 
@@ -779,11 +779,13 @@ const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starred
         ...hideInStarredMenu,
         ...hiddenFilters,
     ]);
-    const nonHiddenStarredFilterKeys = starredFilterKeys.filter(key => !hideInStarredMenu.includes(key));
-    const hiddenFiltersCount = filtersGrouped.map(group => group.filters).flat().length +
-        hiddenFilters.length -
-        nonHiddenStarredFilterKeys.length +
-        numberOfShowDirectlyFilters;
+    const hiddenFiltersCount = react.useMemo(() => {
+        const nonHiddenStarredFilterKeys = starredFilterKeys.filter(key => !hideInStarredMenu.includes(key));
+        return (filtersGrouped.map(group => group.filters).flat().length +
+            hiddenFilters.length -
+            nonHiddenStarredFilterKeys.length +
+            numberOfShowDirectlyFilters);
+    }, [filtersGrouped, hiddenFilters, starredFilterKeys, hideInStarredMenu, numberOfShowDirectlyFilters]);
     const getHiddenFiltersLabel = () => {
         switch (hiddenFiltersCount) {
             case 0:
@@ -822,13 +824,13 @@ const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starred
 const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], compact, dataTestId, className, }) => {
     const [t] = useTranslation();
     const { isLg } = reactComponents.useViewportBreakpoints();
-    const isCompactMode = compact ?? !isLg;
+    const isCompactMode = react.useMemo(() => compact ?? !isLg, [compact, isLg]);
     const hideInMenu = react.useMemo(() => {
         return sharedUtils.objectValues(filterBarDefinition)
             .map(filter => {
             const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
             const showInStarredMenu = filter.showInStarredMenu ? filter.showInStarredMenu() : true;
-            const showMenuAnywayBecauseFilterHasChanged = filterBarConfig.filterHasChanged(filter.filterKey);
+            const showMenuAnywayBecauseFilterHasChanged = filterBarConfig.appliedFilterKeys().includes(filter.filterKey);
             return (!showInFilterBar || !showInStarredMenu) && !showMenuAnywayBecauseFilterHasChanged
                 ? filter.filterKey
                 : null;
@@ -839,17 +841,21 @@ const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
         ...hideInMenu,
         ...hiddenFilters,
     ]);
-    const allFilters = filtersGrouped.map(group => group.filters).flat();
-    const starredFilters = allFilters.filter(filter => {
-        return (filterBarConfig.starredFilterKeys.includes(filter.filterKey) &&
-            !filter.showDirectly);
-    });
-    const appliedFilters = starredFilters.filter(filter => filterBarConfig.appliedFilterKeys.includes(filter.filterKey));
-    const filtersToShow = starredFilters.filter(filter => !filter.showDirectly);
-    const showDirectlyFilters = allFilters.filter(filter => filter.showDirectly);
-    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-wrap items-center gap-2", className), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Popover, { placement: "bottom-start", children: modalState => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { "data-testid": "starred-filters-menu-trigger", children: jsxRuntime.jsxs(reactComponents.Tooltip, { disabled: !isCompactMode || modalState.isOpen, label: jsxRuntime.jsx(FilterButtonTooltipLabel, { filterBarConfig: filterBarConfig }), children: [jsxRuntime.jsx(reactComponents.Button, { className: "@xs:flex hidden", prefix: jsxRuntime.jsx(reactComponents.Icon, { color: filterBarConfig.appliedFilterKeys.length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", suffix: isCompactMode && filterBarConfig.appliedFilterKeys.length > 0
-                                                ? `(${filterBarConfig.appliedFilterKeys.length})`
-                                                : undefined, variant: "secondary", children: t("filtersBar.filtersHeading") }), jsxRuntime.jsx(reactComponents.IconButton, { className: "@xs:hidden", icon: jsxRuntime.jsx(reactComponents.Icon, { color: filterBarConfig.appliedFilterKeys.length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", variant: "secondary" })] }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { cellPadding: 100, children: jsxRuntime.jsxs(reactComponents.Card, { className: "max-h-[min(600px,_calc(100dvh-32px))] overflow-hidden sm:w-[350px]", children: [filtersToShow.length > 0 ? (jsxRuntime.jsx(reactComponents.CardBody, { density: "dense", children: jsxRuntime.jsx("div", { className: "flex h-full min-w-min flex-col gap-2", children: jsxRuntime.jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: filtersToShow }) }) })) : null, jsxRuntime.jsxs(reactComponents.CardFooter, { className: filtersToShow.length === 0 ? "border-none" : undefined, density: "dense", children: [jsxRuntime.jsx(StarredFiltersMenu, { className: "mr-auto", filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, starredFilterKeys: filterBarConfig.starredFilterKeys, updateStarredFilters: filterBarConfig.updateStarredFilters }), !isCompactMode ? null : (jsxRuntime.jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys.length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState }))] })] }) })] })) }), showDirectlyFilters.length > 0 ? (jsxRuntime.jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, !isCompactMode ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [appliedFilters.filter(filter => !filter.showDirectly).length > 0 ? (jsxRuntime.jsx("div", { className: "h-4 w-[1px] bg-slate-300" })) : null, jsxRuntime.jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: appliedFilters }), jsxRuntime.jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys.length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })] })) : null] }));
+    const { appliedFilters, filtersToShow, showDirectlyFilters } = react.useMemo(() => {
+        const allFilters = filtersGrouped.map(group => group.filters).flat();
+        const starredFilters = allFilters.filter(filter => {
+            return (filterBarConfig.starredFilterKeys.includes(filter.filterKey) &&
+                !filter.showDirectly);
+        });
+        return {
+            appliedFilters: starredFilters.filter(filter => filterBarConfig.appliedFilterKeys().includes(filter.filterKey)),
+            filtersToShow: starredFilters.filter(filter => !filter.showDirectly),
+            showDirectlyFilters: allFilters.filter(filter => filter.showDirectly),
+        };
+    }, [filterBarConfig, filtersGrouped]);
+    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-wrap items-center gap-2", className), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Popover, { placement: "bottom-start", children: modalState => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { "data-testid": "starred-filters-menu-trigger", children: jsxRuntime.jsxs(reactComponents.Tooltip, { disabled: !isCompactMode || modalState.isOpen, label: jsxRuntime.jsx(FilterButtonTooltipLabel, { filterBarConfig: filterBarConfig }), children: [jsxRuntime.jsx(reactComponents.Button, { className: "@xs:flex hidden", prefix: jsxRuntime.jsx(reactComponents.Icon, { color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", suffix: isCompactMode && filterBarConfig.appliedFilterKeys().length > 0
+                                                ? `(${filterBarConfig.appliedFilterKeys().length})`
+                                                : undefined, variant: "secondary", children: t("filtersBar.filtersHeading") }), jsxRuntime.jsx(reactComponents.IconButton, { className: "@xs:hidden", icon: jsxRuntime.jsx(reactComponents.Icon, { color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", variant: "secondary" })] }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { cellPadding: 100, children: jsxRuntime.jsxs(reactComponents.Card, { className: "max-h-[min(600px,_calc(100dvh-32px))] overflow-hidden sm:w-[350px]", children: [filtersToShow.length > 0 ? (jsxRuntime.jsx(reactComponents.CardBody, { density: "dense", children: jsxRuntime.jsx("div", { className: "flex h-full min-w-min flex-col gap-2", children: jsxRuntime.jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: filtersToShow }) }) })) : null, jsxRuntime.jsxs(reactComponents.CardFooter, { className: filtersToShow.length === 0 ? "border-none" : undefined, density: "dense", children: [jsxRuntime.jsx(StarredFiltersMenu, { className: "mr-auto", filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, starredFilterKeys: filterBarConfig.starredFilterKeys, updateStarredFilters: filterBarConfig.updateStarredFilters }), !isCompactMode ? null : (jsxRuntime.jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys().length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState }))] })] }) })] })) }), showDirectlyFilters.length > 0 ? (jsxRuntime.jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, !isCompactMode ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [appliedFilters.filter(filter => !filter.showDirectly).length > 0 ? (jsxRuntime.jsx("div", { className: "h-4 w-[1px] bg-slate-300" })) : null, jsxRuntime.jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: appliedFilters }), jsxRuntime.jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys().length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })] })) : null] }));
 };
 const FiltersList = ({ filters, filterBarConfig }) => {
     return filters.length === 0
@@ -860,17 +866,17 @@ const FiltersList = ({ filters, filterBarConfig }) => {
 };
 const FilterButtonTooltipLabel = ({ filterBarConfig, }) => {
     const [t] = useTranslation();
-    switch (filterBarConfig.appliedFilterKeys.length) {
+    switch (filterBarConfig.appliedFilterKeys().length) {
         case 0:
             return t("filtersBar.appliedFiltersTooltip.none");
         case 1:
-            return filterBarConfig.appliedFilterKeys[0]
+            return filterBarConfig.appliedFilterKeys()[0]
                 ? t("filtersBar.appliedFiltersTooltip.singular", {
-                    filterName: filterBarConfig.getFilterTitle(filterBarConfig.appliedFilterKeys[0]),
+                    filterName: filterBarConfig.getFilterTitle(filterBarConfig.appliedFilterKeys()[0]),
                 })
                 : null; // should never happen though
         default:
-            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [t("filtersBar.appliedFiltersTooltip.plural", { count: filterBarConfig.appliedFilterKeys.length }), jsxRuntime.jsx("ul", { className: "list-inside", children: filterBarConfig.appliedFilterKeys.map((appliedFilterKey, index) => (jsxRuntime.jsx("li", { className: "list-disc", children: filterBarConfig.getFilterTitle(appliedFilterKey) }, index))) })] }));
+            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [t("filtersBar.appliedFiltersTooltip.plural", { count: filterBarConfig.appliedFilterKeys().length }), jsxRuntime.jsx("ul", { className: "list-inside", children: filterBarConfig.appliedFilterKeys().map((appliedFilterKey, index) => (jsxRuntime.jsx("li", { className: "list-disc", children: filterBarConfig.getFilterTitle(appliedFilterKey) }, index))) })] }));
     }
 };
 
@@ -887,11 +893,11 @@ const doNothing = (args) => { };
 const mockFilterBar = {
     filterBarConfig: {
         isFilterIncludedByKey: doNothing,
-        appliedFilterKeys: [],
+        appliedFilterKeys: () => [],
         arrayIncludesValue: doNothing,
         getFilterTitle: doNothing,
         getFilterBarName: doNothing,
-        initialState: { filtered: { customerType: [] }, empty: { customerType: [] } },
+        initialState: { customerType: [] },
         name: "test",
         objectArrayIncludesValue: doNothing,
         resetFiltersToInitialState: doNothing,
@@ -908,7 +914,6 @@ const mockFilterBar = {
         toggleArrayObjectValue: doNothing,
         toggleArrayValue: doNothing,
         values: { customerType: [] },
-        filterHasChanged: doNothing,
         starredFilterKeys: [],
         getValuesByKey: doNothing,
         setters: {
@@ -919,10 +924,35 @@ const mockFilterBar = {
         setObjectValue: doNothing,
         toggleObjectValue: doNothing,
     },
-    dataLoaded: doNothing(),
     filterBarDefinition: {},
+    name: "test",
+    onValuesChange: doNothing,
 };
 
+/**
+ *
+ */
+const createFilterSetters = (mainFilters, setValue) => mainFilters.reduce((prev, curr) => {
+    const key = curr.filterKey;
+    return {
+        ...prev,
+        [`set${stringTs.capitalize(key)}`]: (callback) => setValue(key, callback),
+    };
+    // eslint-disable-next-line local-rules/no-typescript-assertion
+}, {});
+
+/**
+ *
+ */
+const createFilterValues = (mainFilters, useDefaultValues = false) => mainFilters.reduce((prev, curr) => {
+    const key = curr.filterKey;
+    const type = curr.type;
+    return {
+        ...prev,
+        [key]: useDefaultValues ? (curr.defaultValue ?? getInitialValueFromType(type)) : getInitialValueFromType(type),
+    };
+}, {});
+
 /**
  * A helper function that returns a default value based on the filter type.
  *
@@ -955,253 +985,40 @@ const getInitialValueFromType = (type) => {
  * @template TFilterBarDefinition - The type representing the filter bar definition.
  * @returns {FilterBarConfig<TFilterBarDefinition>} - Returns an initial filter bar configuration object.
  */
-const createInitialState = (name, mainFilters, initialState, setValue) => {
+const createInitialState = ({ name, mainFilters, setValue, }) => {
     const defaultStarredKeys = mainFilters
         .filter(f => f.default)
+        // eslint-disable-next-line local-rules/no-typescript-assertion
         .map(f => f.filterKey);
-    const values = mainFilters.reduce((prev, curr) => {
-        const key = curr.filterKey;
-        const type = curr.type;
-        return {
-            ...prev,
-            [key]: 
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            "filtered" in initialState && initialState.filtered[key]
-                ? initialState.filtered[key]
-                : (curr.defaultValue ?? getInitialValueFromType(type)),
-        };
-    }, {});
-    const setters = mainFilters.reduce((prev, curr) => {
-        const key = curr.filterKey;
-        return {
-            ...prev,
-            [`set${stringTs.capitalize(key)}`]: (callback) => setValue(key, callback),
-        };
-    }, {});
+    const values = createFilterValues(mainFilters, true);
+    const initialState = createFilterValues(mainFilters);
+    const setters = createFilterSetters(mainFilters, setValue);
     return {
         name,
-        initialState: { filtered: values, empty: "empty" in initialState ? initialState.empty : {} },
         starredFilterKeys: defaultStarredKeys,
         values,
         setters,
+        initialState,
     };
 };
 
-const areaFilterGeoJsonGeometrySchema = zod.z.union([geoJsonUtils.geoJsonPolygonSchema, geoJsonUtils.geoJsonMultiPolygonSchema]);
-
-const hasValue = (value) => {
-    if (value === undefined || value === null) {
-        return false;
-    }
-    // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
-    if (typeof value === "object" && Object.keys(value).length === 0) {
-        return false;
-    }
-    return !(Array.isArray(value) && value.length === 0);
-};
-const isNotRightType = (filterDefinition, foundFilter) => {
-    return ((filterDefinition.type === "valueNameArray" && !isValueNameArray(foundFilter)) ||
-        (filterDefinition.type === "valueName" && !isValueName(foundFilter)) ||
-        (filterDefinition.type === "stringArray" && !isStringArrayFilterValue(foundFilter)) ||
-        (filterDefinition.type === "dateRange" && !isDateRangeValue(foundFilter)) ||
-        (filterDefinition.type === "area" && !isAreaFilterValue(foundFilter)) ||
-        (filterDefinition.type === "minMax" && !isMinMaxFilterValue(foundFilter)) ||
-        (filterDefinition.type === "boolean" && !isBooleanValue(foundFilter)) ||
-        (filterDefinition.type === "string" && typeof foundFilter !== "string") ||
-        (filterDefinition.type === "number" && typeof foundFilter !== "number"));
-};
-/**
- *
- */
-const isMinMaxFilterValue = (value) => {
-    return value
-        ? // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
-            typeof value === "object" && (Object.keys(value).includes("min") || Object.keys(value).includes("max"))
-        : false;
-};
-/**
- *
- */
-const isDateRangeValue = (value) => {
-    return value
-        ? // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
-            typeof value === "object" && (Object.keys(value).includes("from") || Object.keys(value).includes("to"))
-        : false;
-};
-/**
- * {
-    type: "Polygon";
-    coordinates: [number, number][][];
-}
- */
-const isAreaFilterValue = (value) => {
-    return areaFilterGeoJsonGeometrySchema.safeParse(value).success;
-};
-/**
- *
- */
-const isArrayFilterValue = (value) => {
-    return Array.isArray(value);
-};
-/**
- *
- */
-const isStringArrayFilterValue = (value) => {
-    return isArrayFilterValue(value) && value.every(item => typeof item === "string");
-};
-/**
- *
- */
-const isBooleanValue = (value) => {
-    // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
-    return value ? typeof value === "object" && Object.keys(value).includes("booleanValue") : false;
-};
-/**
- * Type guard to check if a value is a single ValueName object
- */
-const isValueName = (value) => {
-    return (typeof value === "object" &&
-        value !== null &&
-        // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
-        Object.keys(value).includes("name") &&
-        // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
-        Object.keys(value).includes("value"));
-};
-/**
- * Type guard to check if a value is an array of ValueName objects
- */
-const isValueNameArray = (value) => {
-    return isArrayFilterValue(value) && value.every(isValueName);
-};
-/**
- * Validates a filter configuration against filter definitions.
- *
- * @template TFilterBarDefinition - The type of the filter bar definition.
- * @param {FilterBarConfig<TFilterBarDefinition>} filter - The filter configuration to validate.
- * @param {FilterDefinition[]} filterDefinitions - An array of filter definitions to validate against.
- * @returns {boolean} - Returns `true` if the filter configuration is valid, otherwise `false`.
- */
-const validateFilter = (filter, filterDefinitions) => {
-    const stateKeys = [];
-    let inBadState = false;
-    // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
-    for (const key of Object.keys(filter?.values || {})) {
-        if (filterDefinitions.find(filterDefinition => filterDefinition.filterKey === key)) {
-            stateKeys.push(key);
-        }
-        else {
-            inBadState = true;
-        }
-    }
-    filterDefinitions.forEach(filterDefinition => {
-        const foundFilter = filter?.values && filter.values[filterDefinition.filterKey];
-        if (filter) {
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            if (foundFilter && hasValue(foundFilter) && isNotRightType(filterDefinition, foundFilter)) {
-                inBadState = true;
-            }
-        }
-        else {
-            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);
-};
-
 /**
- * Custom hook for managing a filter bar's state and actions.
+ * Custom hook for managing a filter bar's actions  .
  *
  * @template TFilterBarDefinition - A generic type for the filter bar definition.
  * @returns {object} An object containing filter bar configuration and actions.
  */
-const useFilterBar = ({ name, onValuesChange, filterBarDefinition, loadAsync, initialState, }) => {
-    const [asyncLoadedFilterBarDefinitions, setAsyncLoadedFilterBarDefinitions] = react.useState();
-    const internalFilterBarDefinitions = react.useMemo(() => asyncLoadedFilterBarDefinitions ?? filterBarDefinition, [filterBarDefinition, asyncLoadedFilterBarDefinitions]);
-    const { clientSideUserId } = reactCoreHooks.useCurrentUser();
-    const setValue = react.useCallback((key, callback) => {
-        setFilterBarConfig(prevState => {
-            return {
-                ...prevState,
-                values: {
-                    ...prevState.values,
-                    [key]: callback(prevState.values[key]),
-                },
-            };
-        });
-    }, []);
-    const [initialStoredFilters] = react.useState(() => localStorage.getItem(`filter-${name}-${clientSideUserId}`) || "{}");
-    const loadData = react.useCallback((updatedFilterDefinitionsValues) => {
-        let initialFilterBarConfig;
-        const storedFilters = initialStoredFilters;
-        if (storedFilters && storedFilters !== "undefined") {
-            const loadedFilterBarConfig = JSON.parse(storedFilters);
-            if (validateFilter(loadedFilterBarConfig, updatedFilterDefinitionsValues)) {
-                initialFilterBarConfig = {
-                    ...loadedFilterBarConfig,
-                    initialState: initialState || loadedFilterBarConfig.initialState,
-                };
-            }
-        }
-        //WHY WE NEED THIS?
-        //For filters that are not visible, and we want to set the default value to the initial state.
-        //To do this for a changing default value as in customers and sites we would need to recreate the initialFilterBarConfig every time the default value changes.
-        //This mean that filterbars that have this functionality wouldn't be able to save the state of the filterbar.
-        //Another option would be to create a new filterbar for each customer or site. This also has its drawbacks. Would raise it with the frontend community.
-        const hasNonVisibleDefaultValues = updatedFilterDefinitionsValues.some(value => value.showInStarredMenu &&
-            !value.showInStarredMenu() &&
-            value.showInFilterBar &&
-            !value.showInFilterBar() &&
-            value.defaultValue?.toString &&
-            value.defaultValue.toString().length > 0);
-        if (initialFilterBarConfig === undefined || hasNonVisibleDefaultValues) {
-            initialFilterBarConfig = createInitialState(name, updatedFilterDefinitionsValues, initialState || {}, setValue);
-        }
-        // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
-        Object.keys(initialFilterBarConfig.values).forEach(key => {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            initialFilterBarConfig.setters[`set${stringTs.capitalize(key)}`] = (callback) => setValue(key, callback);
-        });
-        return initialFilterBarConfig;
-    }, [initialState, name, setValue, initialStoredFilters]);
-    const dataLoaded = react.useCallback((loadedFilterDefinitionsValues) => {
-        if (!loadAsync) {
-            throw new Error("You must pass in loadAsync to useFilterBar when loading filter data asynchronously");
-        }
-        setAsyncLoadedFilterBarDefinitions(loadedFilterDefinitionsValues);
-        setFilterBarConfig(prev => loadData(sharedUtils.objectValues(loadedFilterDefinitionsValues)));
-    }, [loadAsync, loadData]);
-    const [filterBarConfig, setFilterBarConfig] = react.useState(() => {
-        let initialFilterBarConfig;
-        if (!loadAsync) {
-            initialFilterBarConfig = loadData(sharedUtils.objectValues(internalFilterBarDefinitions));
-        }
-        else {
-            initialFilterBarConfig = createInitialState(name, sharedUtils.objectValues(internalFilterBarDefinitions), initialState || {}, setValue);
-            // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
-            Object.keys(initialFilterBarConfig.values).forEach(key => {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                initialFilterBarConfig.setters[`set${stringTs.capitalize(key)}`] = (callback) => setValue(key, callback);
-            });
-        }
-        return initialFilterBarConfig;
-    });
-    react.useEffect(() => {
-        onValuesChange?.(filterBarConfig.values);
-    }, [filterBarConfig.values, filterBarConfig, onValuesChange]);
-    react.useEffect(() => {
-        localStorage.setItem(`filter-${name}-${clientSideUserId}`, JSON.stringify(filterBarConfig));
-    }, [filterBarConfig, name, clientSideUserId]);
+const useFilterBarActions = ({ name, filterBarConfig, filterBarDefinition, setFilterBarConfig, setValue, initialState, }) => {
     const filterMapGetter = react.useMemo(() => {
         return {
             getFilterBarName: () => {
                 return filterBarConfig.name;
             },
             getFilterTitle(key) {
-                return internalFilterBarDefinitions[key]?.title ?? key;
+                return filterBarDefinition[key]?.title ?? key;
             },
             arrayIncludesValue(key, value) {
+                // eslint-disable-next-line local-rules/no-typescript-assertion
                 const filter = filterBarConfig.values[key];
                 return filter?.includes(value) || false;
             },
@@ -1212,58 +1029,37 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, loadAsync, in
                 const values = filterBarConfig.values[key];
                 return Boolean(values);
             },
-            get appliedFilterKeys() {
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                const initialStateFilteredValues = JSON.parse(JSON.stringify(filterBarConfig.initialState?.filtered || {}));
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                const initialStateEmptyValues = JSON.parse(JSON.stringify(filterBarConfig.initialState?.empty || {}));
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                const currentFilters = JSON.parse(JSON.stringify(filterBarConfig.values || {}));
-                return sharedUtils.objectKeys(currentFilters)
+            appliedFilterKeys() {
+                const initialStateEmptyValues = JSON.parse(JSON.stringify(initialState ? initialState : {}));
+                const currentFilters = JSON.parse(JSON.stringify(filterBarConfig.values));
+                // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
+                return Object.keys(currentFilters)
                     .filter(filterKey => {
-                    const isFilterValueEqualToInitialStateValue = dequal.dequal(currentFilters[filterKey], initialStateFilteredValues[filterKey]);
-                    const emptyStateValue = initialStateEmptyValues[filterKey];
-                    // If we passed an initialState's empty state, we have to compare whether this field is different
-                    // from the empty state. If the field is different from the empty state, it means that it is an active filter.
-                    if (emptyStateValue) {
-                        const isFilterValueEqualToEmptyStateValue = dequal.dequal(currentFilters[filterKey], emptyStateValue);
-                        return !isFilterValueEqualToEmptyStateValue;
-                    }
-                    // Otherwise, we need to check whether our filter's field value equals the initial state's field value
-                    // The initialState value is created based on the `initialState` passed to this hook, and some magic
-                    // done in the `createInitialState` function.
+                    const isFilterValueEqualToInitialStateValue = dequal.dequal(currentFilters[filterKey], initialStateEmptyValues[filterKey]);
                     return !isFilterValueEqualToInitialStateValue;
                 })
                     .map(key => String(key));
             },
-            filterHasChanged(key) {
-                const initialStateFilteredValue = JSON.parse(
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                JSON.stringify(filterBarConfig.initialState?.filtered?.[key] || {}));
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                const currentFilter = JSON.parse(JSON.stringify(filterBarConfig.values[key] || {}));
-                return !dequal.dequal(currentFilter, initialStateFilteredValue);
-            },
             objectArrayIncludesValue(key, value) {
+                // eslint-disable-next-line local-rules/no-typescript-assertion
                 const filter = filterBarConfig.values[key];
                 return filter?.find(f => f.value === value) !== undefined || false;
             },
             objectIncludesValue(key, value) {
+                // eslint-disable-next-line local-rules/no-typescript-assertion
                 const filter = filterBarConfig.values[key];
                 return filter?.value === value || false;
             },
         };
-    }, [
-        filterBarConfig.initialState.empty,
-        filterBarConfig.initialState.filtered,
-        filterBarConfig.name,
-        filterBarConfig.values,
-        internalFilterBarDefinitions,
-    ]);
+    }, [filterBarDefinition, filterBarConfig.name, filterBarConfig.values, initialState]);
     const filterMapActions = react.useMemo(() => {
         // Reset an individual filter to its initial state
         const resetIndividualFilterToInitialState = (key) => {
-            const tmpInitialState = createInitialState(name, sharedUtils.objectValues(internalFilterBarDefinitions), initialState || {}, setValue);
+            const tmpInitialState = createInitialState({
+                name,
+                mainFilters: sharedUtils.objectValues(filterBarDefinition),
+                setValue,
+            });
             setFilterBarConfig(prevState => {
                 return {
                     ...prevState,
@@ -1476,20 +1272,315 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, loadAsync, in
                 setFilterBarConfig(prevState => {
                     return {
                         ...prevState,
-                        values: createInitialState(name, sharedUtils.objectValues(internalFilterBarDefinitions), initialState || {}, setValue).values,
+                        values: createInitialState({
+                            name,
+                            mainFilters: sharedUtils.objectValues(filterBarDefinition),
+                            setValue,
+                        }).values,
                     };
                 });
             },
             resetIndividualFilterToInitialState,
         };
-    }, [initialState, name, setValue, internalFilterBarDefinitions]);
+    }, [name, setFilterBarConfig, setValue, filterBarDefinition]);
+    return react.useMemo(() => ({ filterMapGetter, filterMapActions }), [filterMapGetter, filterMapActions]);
+};
+
+const areaFilterGeoJsonGeometrySchema = zod.z.union([geoJsonUtils.geoJsonPolygonSchema, geoJsonUtils.geoJsonMultiPolygonSchema]);
+
+const hasValue = (value) => {
+    if (value === undefined || value === null) {
+        return false;
+    }
+    // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
+    if (typeof value === "object" && Object.keys(value).length === 0) {
+        return false;
+    }
+    return !(Array.isArray(value) && value.length === 0);
+};
+const isNotRightType = (filterDefinition, foundFilter) => {
+    return ((filterDefinition.type === "valueNameArray" && !isValueNameArray(foundFilter)) ||
+        (filterDefinition.type === "valueName" && !isValueName(foundFilter)) ||
+        (filterDefinition.type === "stringArray" && !isStringArrayFilterValue(foundFilter)) ||
+        (filterDefinition.type === "dateRange" && !isDateRangeValue(foundFilter)) ||
+        (filterDefinition.type === "area" && !isAreaFilterValue(foundFilter)) ||
+        (filterDefinition.type === "minMax" && !isMinMaxFilterValue(foundFilter)) ||
+        (filterDefinition.type === "boolean" && !isBooleanValue(foundFilter)) ||
+        (filterDefinition.type === "string" && typeof foundFilter !== "string") ||
+        (filterDefinition.type === "number" && typeof foundFilter !== "number"));
+};
+/**
+ *
+ */
+const isMinMaxFilterValue = (value) => {
+    return value
+        ? // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
+            typeof value === "object" && (Object.keys(value).includes("min") || Object.keys(value).includes("max"))
+        : false;
+};
+/**
+ *
+ */
+const isDateRangeValue = (value) => {
+    return value
+        ? // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
+            typeof value === "object" && (Object.keys(value).includes("from") || Object.keys(value).includes("to"))
+        : false;
+};
+/**
+ * {
+    type: "Polygon";
+    coordinates: [number, number][][];
+}
+ */
+const isAreaFilterValue = (value) => {
+    return areaFilterGeoJsonGeometrySchema.safeParse(value).success;
+};
+/**
+ *
+ */
+const isArrayFilterValue = (value) => {
+    return Array.isArray(value);
+};
+/**
+ *
+ */
+const isStringArrayFilterValue = (value) => {
+    return isArrayFilterValue(value) && value.every(item => typeof item === "string");
+};
+/**
+ *
+ */
+const isBooleanValue = (value) => {
+    // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
+    return value ? typeof value === "object" && Object.keys(value).includes("booleanValue") : false;
+};
+/**
+ * Type guard to check if a value is a single ValueName object
+ */
+const isValueName = (value) => {
+    return (typeof value === "object" &&
+        value !== null &&
+        // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
+        Object.keys(value).includes("name") &&
+        // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
+        Object.keys(value).includes("value"));
+};
+/**
+ * Type guard to check if a value is an array of ValueName objects
+ */
+const isValueNameArray = (value) => {
+    return isArrayFilterValue(value) && value.every(isValueName);
+};
+/**
+ * Validates a filter configuration against filter definitions.
+ *
+ * @template TFilterBarDefinition - The type of the filter bar definition.
+ * @param {FilterBarConfig<TFilterBarDefinition>} filter - The filter configuration to validate.
+ * @param {FilterDefinition[]} filterDefinitions - An array of filter definitions to validate against.
+ * @returns {boolean} - Returns `true` if the filter configuration is valid, otherwise `false`.
+ */
+const validateFilter = ({ values, starredFilterKeys, filterDefinitions, }) => {
+    const stateKeys = [];
+    let inBadState = false;
+    // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
+    for (const key of Object.keys(values)) {
+        if (filterDefinitions.find(filterDefinition => filterDefinition.filterKey === key)) {
+            stateKeys.push(key);
+        }
+        else {
+            inBadState = true;
+        }
+    }
+    filterDefinitions.forEach(filterDefinition => {
+        const foundFilter = values[filterDefinition.filterKey];
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (foundFilter && hasValue(foundFilter) && isNotRightType(filterDefinition, foundFilter)) {
+            inBadState = true;
+        }
+    });
+    if (starredFilterKeys.length > 0) {
+        const allKeys = filterDefinitions.map(f => f.filterKey);
+        const filteredStarredFilterKeys = starredFilterKeys.filter(key => allKeys.includes(key));
+        if (filteredStarredFilterKeys.length !== starredFilterKeys.length) {
+            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);
+};
+
+const getPersistenceKey = (name, clientSideUserId) => `filter-${name}-${clientSideUserId}`;
+/**
+ * Custom hook for managing the persistence of filter bar configurations.
+ *
+ * @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, }) => {
+    const { clientSideUserId } = reactCoreHooks.useCurrentUser();
+    const [initialStoredFilters] = react.useState(() => localStorage.getItem(getPersistenceKey(name, clientSideUserId)) || "{}");
+    const saveData = react.useCallback((filterBarConfig) => {
+        const toPersist = {
+            values: filterBarConfig.values ?? {},
+            starredFilterKeys: filterBarConfig.starredFilterKeys ?? [],
+        };
+        localStorage.setItem(getPersistenceKey(name, clientSideUserId), JSON.stringify(toPersist));
+    }, [name, clientSideUserId]);
+    const loadData = react.useCallback((updatedFilterDefinitionsValues) => {
+        let initialFilterBarConfig;
+        const storedFilters = initialStoredFilters;
+        const hasNonVisibleDefaultValues = updatedFilterDefinitionsValues.some(value => value.showInStarredMenu &&
+            !value.showInStarredMenu() &&
+            value.showInFilterBar &&
+            !value.showInFilterBar() &&
+            value.defaultValue?.toString &&
+            value.defaultValue.toString().length > 0);
+        const initialStateValues = createInitialState({
+            name,
+            mainFilters: updatedFilterDefinitionsValues,
+            setValue,
+        });
+        if (storedFilters && storedFilters !== "undefined") {
+            const loadedFilterBarConfigValues = JSON.parse(storedFilters);
+            if (!loadedFilterBarConfigValues.values) {
+                loadedFilterBarConfigValues.values = {};
+            }
+            if (!loadedFilterBarConfigValues.starredFilterKeys) {
+                loadedFilterBarConfigValues.starredFilterKeys = [];
+            }
+            if (validateFilter({
+                values: loadedFilterBarConfigValues.values,
+                starredFilterKeys: loadedFilterBarConfigValues.starredFilterKeys,
+                filterDefinitions: updatedFilterDefinitionsValues,
+            })) {
+                initialFilterBarConfig = {
+                    values: loadedFilterBarConfigValues.values,
+                    name: name,
+                    starredFilterKeys: loadedFilterBarConfigValues.starredFilterKeys,
+                    setters: initialStateValues.setters,
+                    initialState: initialStateValues.initialState,
+                };
+            }
+        }
+        if (initialFilterBarConfig === undefined || hasNonVisibleDefaultValues) {
+            initialFilterBarConfig = initialStateValues;
+        }
+        // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
+        Object.keys(initialFilterBarConfig.values).forEach(key => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            initialFilterBarConfig.setters[`set${stringTs.capitalize(key)}`] = (callback) => setValue(key, callback);
+        });
+        return initialFilterBarConfig;
+    }, [name, setValue, initialStoredFilters]);
+    return react.useMemo(() => ({ loadData, saveData }), [loadData, saveData]);
+};
+
+/**
+ * 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 useGenericSetValue = () => {
+    const setValue = react.useCallback((setFilterBarConfig, key, callback) => {
+        setFilterBarConfig(prevState => {
+            return {
+                ...prevState,
+                values: {
+                    ...prevState.values,
+                    [key]: callback(prevState.values[key]),
+                },
+            };
+        });
+    }, []);
+    return react.useMemo(() => ({ setValue }), [setValue]);
+};
+
+/**
+ * Custom hook for managing a filter bar's state and actions.
+ *
+ * @template TFilterBarDefinition - A generic type for the filter bar definition.
+ * @returns {object} An object containing filter bar configuration and actions.
+ */
+const useFilterBar = ({ name, onValuesChange, filterBarDefinition, }) => {
+    const { setValue } = useGenericSetValue();
+    const { loadData, saveData } = useFilterBarPersistence({
+        name,
+        setValue: (key, callback) => setValue(setFilterBarConfig, key, callback),
+    });
+    const [filterBarConfig, setFilterBarConfig] = react.useState(() => {
+        return loadData(sharedUtils.objectValues(filterBarDefinition));
+    });
+    const { filterMapActions, filterMapGetter } = useFilterBarActions({
+        name,
+        filterBarConfig,
+        filterBarDefinition,
+        initialState: filterBarConfig.initialState,
+        setFilterBarConfig,
+        setValue: (key, callback) => setValue(setFilterBarConfig, key, callback),
+    });
+    react.useEffect(() => {
+        onValuesChange?.(filterBarConfig.values);
+        saveData(filterBarConfig);
+    }, [filterBarConfig.values, filterBarConfig, onValuesChange, saveData]);
+    return react.useMemo(() => {
+        return {
+            filterBarConfig: { ...filterBarConfig, ...filterMapActions, ...filterMapGetter },
+            filterBarDefinition,
+            name,
+            onValuesChange,
+        };
+    }, [filterBarConfig, filterMapActions, filterMapGetter, filterBarDefinition, name, onValuesChange]);
+};
+
+/**
+ * Custom hook for managing a filter bar's state and actions.
+ *
+ * @template TFilterBarDefinition - A generic type for the filter bar definition.
+ * @returns {object} An object containing filter bar configuration and actions.
+ */
+const useFilterBarAsync = ({ name, onValuesChange, filterBarDefinition, }) => {
+    const [isDataLoaded, setIsDataLoaded] = react.useState(false);
+    const [asyncLoadedFilterBarDefinitions, setAsyncLoadedFilterBarDefinitions] = react.useState();
+    const internalFilterBarDefinitions = react.useMemo(() => asyncLoadedFilterBarDefinitions ?? filterBarDefinition, [filterBarDefinition, asyncLoadedFilterBarDefinitions]);
+    const { setValue } = useGenericSetValue();
+    const { loadData, saveData } = useFilterBarPersistence({
+        name,
+        setValue: (key, callback) => setValue(setFilterBarConfig, key, callback),
+    });
+    const [filterBarConfig, setFilterBarConfig] = react.useState(() => {
+        return loadData(sharedUtils.objectValues(internalFilterBarDefinitions));
+    });
+    const { filterMapActions, filterMapGetter } = useFilterBarActions({
+        name,
+        filterBarConfig,
+        filterBarDefinition,
+        initialState: filterBarConfig.initialState,
+        setFilterBarConfig,
+        setValue: (key, callback) => setValue(setFilterBarConfig, key, callback),
+    });
+    const dataLoaded = react.useCallback((loadedFilterDefinitionsValues) => {
+        setIsDataLoaded(true);
+        setAsyncLoadedFilterBarDefinitions(loadedFilterDefinitionsValues);
+        setFilterBarConfig(_ => loadData(sharedUtils.objectValues(loadedFilterDefinitionsValues)));
+    }, [loadData]);
+    react.useEffect(() => {
+        if (isDataLoaded) {
+            onValuesChange?.(filterBarConfig.values);
+            saveData(filterBarConfig);
+        }
+    }, [filterBarConfig.values, filterBarConfig, onValuesChange, saveData, isDataLoaded]);
     return react.useMemo(() => {
         return {
             filterBarConfig: { ...filterBarConfig, ...filterMapActions, ...filterMapGetter },
             filterBarDefinition: internalFilterBarDefinitions,
             dataLoaded,
+            name,
         };
-    }, [filterBarConfig, filterMapActions, filterMapGetter, internalFilterBarDefinitions, dataLoaded]);
+    }, [filterBarConfig, filterMapActions, filterMapGetter, internalFilterBarDefinitions, dataLoaded, name]);
 };
 
 /**
@@ -1506,47 +1597,43 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, loadAsync, in
  */
 const useSearchParamAsFilter = ({ searchParamName, filterName, search, zodSchema, errorHandler, }) => {
     return react.useMemo(() => {
-        if (sharedUtils.objectKeys(search).includes(searchParamName)) {
-            const foundParam = search[searchParamName];
-            try {
-                let jsonParsed;
+        if (!sharedUtils.objectKeys(search).includes(searchParamName)) {
+            return null;
+        }
+        const foundParam = search[searchParamName];
+        try {
+            const getJsonParsedVal = () => {
                 if (zodSchema._def.typeName === "ZodString") {
-                    jsonParsed = foundParam ? foundParam + "" : foundParam;
+                    return foundParam ? foundParam + "" : foundParam;
                 }
-                else {
-                    if (typeof search === "string" && typeof foundParam === "string") {
-                        jsonParsed = JSON.parse(foundParam);
-                    }
-                    else {
-                        jsonParsed = foundParam;
-                    }
-                }
-                const zodParsed = zodSchema.safeParse(jsonParsed);
-                if (zodParsed.success) {
-                    return zodParsed.data;
+                if (typeof search === "string" && typeof foundParam === "string") {
+                    return JSON.parse(foundParam);
                 }
-                else {
-                    captureUrlParseException(errorHandler, {
-                        filterName,
-                        param: typeof foundParam === "string" ? foundParam : JSON.stringify(foundParam),
-                        jsonParsed: jsonParsed,
-                        zodParseError: zodParsed.error,
-                    });
-                }
-            }
-            catch (e) {
-                captureUrlParseException(errorHandler, {
-                    filterName,
-                    param: typeof foundParam === "string" ? foundParam : JSON.stringify(foundParam),
-                    jsonParsed: "parse json error",
-                    zodParseError: null,
-                });
+                return foundParam;
+            };
+            const jsonParsed = getJsonParsedVal();
+            const zodParsed = zodSchema.safeParse(jsonParsed);
+            if (zodParsed.success) {
+                return zodParsed.data;
             }
+            captureUrlParseException(errorHandler, {
+                filterName,
+                param: typeof foundParam === "string" ? foundParam : JSON.stringify(foundParam),
+                jsonParsed: jsonParsed,
+                zodParseError: zodParsed.error,
+            });
+        }
+        catch (e) {
+            captureUrlParseException(errorHandler, {
+                filterName,
+                param: typeof foundParam === "string" ? foundParam : JSON.stringify(foundParam),
+                jsonParsed: "parse json error",
+                zodParseError: null,
+            });
         }
-        return null;
     }, [search, searchParamName, zodSchema, errorHandler, filterName]);
 };
-const captureUrlParseException = (errorHandler, { filterName, param, jsonParsed: parsed, }) => errorHandler.captureException(new Error(JSON.stringify({
+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).`,
     param,
     parsed,
@@ -1596,5 +1683,6 @@ exports.mergeFilters = mergeFilters;
 exports.mockFilterBar = mockFilterBar;
 exports.toggleFilterValue = toggleFilterValue;
 exports.useFilterBar = useFilterBar;
+exports.useFilterBarAsync = useFilterBarAsync;
 exports.useSearchParamAsFilter = useSearchParamAsFilter;
 exports.validateFilter = validateFilter;