@trackunit/filters-filter-bar 0.0.579 → 0.0.581

package/index.cjs.js

@@ -4,13 +4,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
 var reactCoreHooks = require('@trackunit/react-core-hooks');
 var reactFilterComponents = require('@trackunit/react-filter-components');
-var sharedUtils = require('@trackunit/shared-utils');
 var react = require('react');
+var stringTs = require('string-ts');
 var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
 var reactComponents = require('@trackunit/react-components');
 var reactFormComponents = require('@trackunit/react-form-components');
 var reactDateAndTimeComponents = require('@trackunit/react-date-and-time-components');
-var stringTs = require('string-ts');
+var sharedUtils = require('@trackunit/shared-utils');
 var tailwindMerge = require('tailwind-merge');
 var dequal = require('dequal');
 var isEqual = require('lodash/isEqual');
@@ -408,7 +408,7 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
     const { logEvent } = reactCoreHooks.useAnalytics(FilterEvents);
     const handleSetValue = (value) => {
         logEvent("Filters Applied - V2", {
-            type: filterName !== null && filterName !== void 0 ? filterName : `${sharedUtils.capitalize(filterDefinition.filterKey)}Filter`,
+            type: filterName !== null && filterName !== void 0 ? filterName : `${stringTs.capitalize(filterDefinition.filterKey)}Filter`,
             value: value.key,
         });
         if (filterDefinition.type === "stringArray") {
@@ -421,10 +421,10 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
                 return toggleFilterValue(value.key)(prev);
             });
         }
-        else if (filterDefinition.type === "valueName") {
+        else if (filterDefinition.type === "valueNameArray") {
             // eslint-disable-next-line local-rules/no-typescript-assertion
-            const setValueAsValueName = setValue;
-            setValueAsValueName(prev => {
+            const setValueAsValueNameArray = setValue;
+            setValueAsValueNameArray(prev => {
                 if (!prev) {
                     return [{ name: value.label, value: value.key }];
                 }
@@ -462,7 +462,7 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
                     count: undefinedCount ? filteredOptions.length - 1 : filteredOptions.length,
                 } }), jsxRuntime.jsx(FilterResults, { ignoreUndefined: undefinedCount !== null, loading: loading, results: results, children: res => (jsxRuntime.jsx(DynamicFilterList, { checked: index => {
                         var _a, _b;
-                        return filterDefinition.type === "valueName"
+                        return filterDefinition.type === "valueNameArray"
                             ? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || "")
                             : filterBarActions.arrayIncludesValue(filterDefinition.filterKey, ((_b = res[index]) === null || _b === void 0 ? void 0 : _b.key) || "");
                     }, count: index => { var _a; return (_a = res[index]) === null || _a === void 0 ? void 0 : _a.count; }, keyMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || ""; }, labelMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.label) || ""; }, onChange: index => {
@@ -470,7 +470,7 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
                         if (result) {
                             handleSetValue(result);
                         }
-                    }, rowCount: undefinedCount ? res.length - 1 : res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, type: "CheckBox" })) }), showUndefinedOptionWithCountAtBottom && undefinedCount ? (jsxRuntime.jsx(reactFilterComponents.CheckBoxFilterItem, { checked: filterDefinition.type === "valueName"
+                    }, rowCount: undefinedCount ? res.length - 1 : res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, type: "CheckBox" })) }), showUndefinedOptionWithCountAtBottom && undefinedCount ? (jsxRuntime.jsx(reactFilterComponents.CheckBoxFilterItem, { checked: filterDefinition.type === "valueNameArray"
                     ? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, ((_c = results[undefinedCount.index]) === null || _c === void 0 ? void 0 : _c.key) || "")
                     : filterBarActions.arrayIncludesValue(filterDefinition.filterKey, ((_d = results[undefinedCount.index]) === null || _d === void 0 ? void 0 : _d.key) || ""), className: "rounded-none border-t-2", dataTestId: "dynamic-filter-check-box-undefined", itemCount: undefinedCount.count, label: (_e = results[undefinedCount.index]) === null || _e === void 0 ? void 0 : _e.label, name: "dynamic-filter-check-box-undefined", onChange: () => {
                     const result = results[undefinedCount.index];
@@ -564,29 +564,29 @@ const DefaultMinMaxFilter = ({ filterDefinition, filterName, value, setValue, fi
  *
  * @returns {JSX.Element} - Returns the DefaultRadioFilter component.
  */
-const DefaultRadioFilter = ({ filterDefinition, filterBarActions, options, loading, filterName, customSearch, showRequestMoreUseSearch = false, }) => {
-    var _a, _b, _c;
+const DefaultRadioFilter = ({ filterDefinition, filterBarActions, options, loading, filterName, customSearch, showRequestMoreUseSearch = false, setValue, }) => {
+    var _a, _b;
     const { logEvent } = reactCoreHooks.useAnalytics(FilterEvents);
     const [filteredOptions, searchText, setSearchText] = reactCoreHooks.useTextSearch(options, item => [item.label]);
     const handleClick = (selectedId) => {
         var _a;
         const { key, label } = (_a = filteredOptions.find(({ key: id }) => id === selectedId)) !== null && _a !== void 0 ? _a : {};
         if (key && label) {
-            filterBarActions.setArrayObjectValue(filterDefinition.filterKey, [{ value: key, name: label }]);
+            setValue(() => ({ value: key, name: label }));
             logEvent("Filters Applied - V2", {
-                type: filterName !== null && filterName !== void 0 ? filterName : `${sharedUtils.capitalize(filterDefinition.filterKey)}Filter`,
+                type: filterName !== null && filterName !== void 0 ? filterName : `${stringTs.capitalize(filterDefinition.filterKey)}Filter`,
                 value: String(label),
             });
         }
     };
-    const selectedRadioId = ((_a = filteredOptions.find(partner => filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, partner.key))) === null || _a === void 0 ? void 0 : _a.key) || "";
+    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: {
-                    value: (_b = customSearch === null || customSearch === void 0 ? void 0 : customSearch.value) !== null && _b !== void 0 ? _b : searchText,
-                    onChange: (_c = customSearch === null || customSearch === void 0 ? void 0 : customSearch.onChange) !== null && _c !== void 0 ? _c : setSearchText,
+                    value: (_a = customSearch === null || customSearch === void 0 ? void 0 : customSearch.value) !== null && _a !== void 0 ? _a : searchText,
+                    onChange: (_b = customSearch === null || customSearch === void 0 ? void 0 : customSearch.onChange) !== null && _b !== void 0 ? _b : setSearchText,
                     count: filteredOptions.length,
                 } }), jsxRuntime.jsx(FilterResults, { loading: loading, results: customSearch ? options : filteredOptions, children: res => (jsxRuntime.jsx(reactFormComponents.RadioGroup, { id: "DefaultRadioFilter", onChange: e => {
                         handleClick(e.currentTarget.value);
-                    }, value: selectedRadioId, children: jsxRuntime.jsx(DynamicFilterList, { checked: index => { var _a; return filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || ""); }, count: index => { var _a; return (_a = res[index]) === null || _a === void 0 ? void 0 : _a.count; }, keyMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || ""; }, labelMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.label) || ""; }, rowCount: res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, type: "Radio" }) })) })] }));
+                    }, value: (selectedRadioId === null || selectedRadioId === void 0 ? void 0 : selectedRadioId.key) || "", children: jsxRuntime.jsx(DynamicFilterList, { checked: index => { var _a; return filterBarActions.objectIncludesValue(filterDefinition.filterKey, ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || ""); }, count: index => { var _a; return (_a = res[index]) === null || _a === void 0 ? void 0 : _a.count; }, keyMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || ""; }, labelMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.label) || ""; }, rowCount: res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, type: "Radio" }) })) })] }));
 };
 
 /**
@@ -637,17 +637,20 @@ const reduceFilterText = (input) => {
  */
 const Filter = ({ filter, filterBarActions, filterState, }) => {
     const values = filterBarActions.getValuesByKey(filter.filterKey);
-    const filterText = () => {
-        if (values) {
-            if (filter.valueAsText) {
-                return reduceFilterText(filter.valueAsText(values));
-            }
-            else if (filter.type === "valueName") {
-                return reduceFilterText(values.map(value => value.name));
-            }
-            return values.toString();
+    const getFilterText = () => {
+        if (!values) {
+            return undefined;
         }
-        return "";
+        if (filter.valueAsText) {
+            return reduceFilterText(filter.valueAsText(values));
+        }
+        else if (filter.type === "valueNameArray") {
+            return reduceFilterText(values.map(value => value.name));
+        }
+        else if (filter.type === "valueName") {
+            return values.name;
+        }
+        return values.toString();
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const setValue = (callback) => {
@@ -664,9 +667,12 @@ const Filter = ({ filter, filterBarActions, filterState, }) => {
         else if (filter.type === "area") {
             filterBarActions.setArea(newValue);
         }
-        else if (filter.type === "valueName") {
+        else if (filter.type === "valueNameArray") {
             filterBarActions.setArrayObjectValue(filter.filterKey, newValue);
         }
+        else if (filter.type === "valueName") {
+            filterBarActions.setObjectValue(filter.filterKey, newValue);
+        }
         else if (filter.type === "minMax") {
             filterBarActions.setMinMaxValue(filter.filterKey, newValue);
         }
@@ -677,7 +683,7 @@ const Filter = ({ filter, filterBarActions, filterState, }) => {
             filterBarActions.setNumberValue(filter.filterKey, newValue);
         }
     };
-    const text = filterText();
+    const text = getFilterText();
     const activeFilterText = Array.isArray(text) ? text.join(", ") : text;
     const showDirectly = filter.showDirectly || false;
     return showDirectly ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: filter.component({
@@ -687,7 +693,7 @@ const Filter = ({ filter, filterBarActions, filterState, }) => {
             setValue,
             filterBarActions,
             filterState,
-        }) })) : (jsxRuntime.jsx(reactFilterComponents.Filter, { activeLabel: activeFilterText, dataTestId: `${filter.filterKey}-filter-button`, isActive: filterText().length > 0, popoverProps: { placement: "right-start" }, title: filter.title, withStickyHeader: true, children: filter.component({
+        }) })) : (jsxRuntime.jsx(reactFilterComponents.Filter, { activeLabel: activeFilterText, dataTestId: `${filter.filterKey}-filter-button`, isActive: Boolean(text === null || text === void 0 ? void 0 : text.length), popoverProps: { placement: "right-start" }, title: filter.title, withStickyHeader: true, children: filter.component({
             filterDefinition: filter,
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             value: values,
@@ -772,9 +778,10 @@ const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starred
  * @template TFilterBarDefinition - The type representing the filter bar definition.
  * @returns {JSX.Element} - Returns the StarredFilters component.
  */
-const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], }) => {
+const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], compact, dataTestId, className, }) => {
     const [t] = useTranslation();
-    const { isLg } = reactComponents.useViewportSize();
+    const { isLg } = reactComponents.useViewportBreakpoints();
+    const isCompactMode = compact !== null && compact !== void 0 ? compact : !isLg;
     const hideInMenu = react.useMemo(() => {
         return sharedUtils.objectValues(filterBarDefinition)
             .map(filter => {
@@ -799,9 +806,9 @@ const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
     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: "flex flex-wrap items-center gap-2", 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: isLg || 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: !isLg && filterBarConfig.appliedFilterKeys.length > 0
+    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", 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 }), isLg ? null : (jsxRuntime.jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys.length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState }))] })] }) })] })) }), showDirectlyFilters.length > 0 ? (jsxRuntime.jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, isLg ? (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] }));
+                                                : 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", 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
@@ -829,8 +836,8 @@ const FilterButtonTooltipLabel = ({ filterBarConfig, }) => {
 /**
  * The FilterBar component serves as a wrapper for managing filters.
  */
-const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, }) => {
-    return (jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex", className), "data-testid": `${filterBarConfig.name}-filterbar`, children: jsxRuntime.jsx(StarredFilters, { filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters }) }));
+const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact, }) => {
+    return (jsxRuntime.jsx(StarredFilters, { className: className, compact: compact, dataTestId: `${filterBarConfig.name}-filterbar`, filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters }));
 };
 
 // Can't import jest.fn so must define a function that does nothing but mimics the jest.fn
@@ -867,6 +874,9 @@ const mockFilterBar = {
             setCriticality: doNothing,
             setServicePlan: doNothing,
         },
+        objectIncludesValue: doNothing,
+        setObjectValue: doNothing,
+        toggleObjectValue: doNothing,
     },
     filterBarDefinition: {},
 };
@@ -883,9 +893,12 @@ const getInitialValueFromType = (type) => {
     if (type === "stringArray") {
         return [];
     }
-    if (type === "valueName") {
+    if (type === "valueNameArray") {
         return [];
     }
+    if (type === "valueName") {
+        return { value: undefined, name: undefined };
+    }
     if (type === "minMax") {
         return { min: undefined, max: undefined };
     }
@@ -952,7 +965,8 @@ const hasValue = (value) => {
     return !(Array.isArray(value) && value.length === 0);
 };
 const isNotRightType = (filterDefinition, foundFilter) => {
-    return ((filterDefinition.type === "valueName" && !isValueNameFilterValue(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)) ||
@@ -1011,13 +1025,21 @@ const isBooleanValue = (value) => {
     return value ? typeof value === "object" && Object.keys(value).includes("booleanValue") : false;
 };
 /**
- *
+ * Type guard to check if a value is a single ValueName object
  */
-const isValueNameFilterValue = (value) => {
-    return (isArrayFilterValue(value) &&
-        value.every(
+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
-        item => typeof item === "object" && Object.keys(item).includes("name") && Object.keys(item).includes("value")));
+        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.
@@ -1112,9 +1134,7 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
         return initialFilterBarConfig;
     });
     react.useEffect(() => {
-        if (onValuesChange) {
-            onValuesChange(filterBarConfig.values);
-        }
+        onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(filterBarConfig.values);
     }, [filterBarConfig.values, filterBarConfig, onValuesChange]);
     react.useEffect(() => {
         localStorage.setItem(`filter-${name}`, JSON.stringify(filterBarConfig));
@@ -1166,6 +1186,10 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
                 const filter = filterBarConfig.values[key];
                 return (filter === null || filter === void 0 ? void 0 : filter.find(f => f.value === value)) !== undefined || false;
             },
+            objectIncludesValue(key, value) {
+                const filter = filterBarConfig.values[key];
+                return (filter === null || filter === void 0 ? void 0 : filter.value) === value || false;
+            },
         };
     }, [filterBarConfig.initialState, filterBarConfig.name, filterBarConfig.values, filterBarDefinition]);
     const filterMapActions = react.useMemo(() => {
@@ -1341,6 +1365,17 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
                     };
                 });
             },
+            setObjectValue(key, filterValue) {
+                setFilterBarConfig(prevState => {
+                    return {
+                        ...prevState,
+                        values: {
+                            ...prevState.values,
+                            [key]: filterValue,
+                        },
+                    };
+                });
+            },
             //Setting multiple value name objects
             toggleArrayObjectValue(key, filterValue) {
                 setFilterBarConfig(prevState => {
@@ -1361,6 +1396,17 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
                     };
                 });
             },
+            toggleObjectValue(key, filterValue) {
+                setFilterBarConfig(prevState => {
+                    return {
+                        ...prevState,
+                        values: {
+                            ...prevState.values,
+                            [key]: filterValue,
+                        },
+                    };
+                });
+            },
             // Reset filters to initial state
             resetFiltersToInitialState() {
                 setFilterBarConfig(prevState => {
@@ -1426,7 +1472,8 @@ exports.isBooleanValue = isBooleanValue;
 exports.isDateRangeValue = isDateRangeValue;
 exports.isMinMaxFilterValue = isMinMaxFilterValue;
 exports.isStringArrayFilterValue = isStringArrayFilterValue;
-exports.isValueNameFilterValue = isValueNameFilterValue;
+exports.isValueName = isValueName;
+exports.isValueNameArray = isValueNameArray;
 exports.mergeFilters = mergeFilters;
 exports.mockFilterBar = mockFilterBar;
 exports.toggleFilterValue = toggleFilterValue;

package/index.esm.js

@@ -2,13 +2,13 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { useAnalytics, useTextSearch } from '@trackunit/react-core-hooks';
 import { FilterBody, RadioFilterItem, CheckBoxFilterItem, FilterHeader as FilterHeader$1, FilterFooter, Filter as Filter$1 } from '@trackunit/react-filter-components';
-import { capitalize, nonNullable, objectValues, truthy } from '@trackunit/shared-utils';
 import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
+import { capitalize } from 'string-ts';
 import { createEvent } from '@trackunit/react-core-contexts-api';
-import { VirtualizedList, Text, Button, Popover, PopoverTrigger, PopoverContent, MenuList, useViewportSize, Tooltip, Icon, IconButton, Card, CardBody, CardFooter } from '@trackunit/react-components';
+import { VirtualizedList, Text, Button, Popover, PopoverTrigger, PopoverContent, MenuList, useViewportBreakpoints, Tooltip, Icon, IconButton, Card, CardBody, CardFooter } from '@trackunit/react-components';
 import { Search, NumberField, RadioGroup, Toggle } from '@trackunit/react-form-components';
 import { DayRangePicker } from '@trackunit/react-date-and-time-components';
-import { capitalize as capitalize$1 } from 'string-ts';
+import { nonNullable, capitalize as capitalize$1, objectValues, truthy } from '@trackunit/shared-utils';
 import { twMerge } from 'tailwind-merge';
 import { dequal } from 'dequal';
 import isEqual from 'lodash/isEqual';
@@ -419,10 +419,10 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
                 return toggleFilterValue(value.key)(prev);
             });
         }
-        else if (filterDefinition.type === "valueName") {
+        else if (filterDefinition.type === "valueNameArray") {
             // eslint-disable-next-line local-rules/no-typescript-assertion
-            const setValueAsValueName = setValue;
-            setValueAsValueName(prev => {
+            const setValueAsValueNameArray = setValue;
+            setValueAsValueNameArray(prev => {
                 if (!prev) {
                     return [{ name: value.label, value: value.key }];
                 }
@@ -460,7 +460,7 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
                     count: undefinedCount ? filteredOptions.length - 1 : filteredOptions.length,
                 } }), jsx(FilterResults, { ignoreUndefined: undefinedCount !== null, loading: loading, results: results, children: res => (jsx(DynamicFilterList, { checked: index => {
                         var _a, _b;
-                        return filterDefinition.type === "valueName"
+                        return filterDefinition.type === "valueNameArray"
                             ? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || "")
                             : filterBarActions.arrayIncludesValue(filterDefinition.filterKey, ((_b = res[index]) === null || _b === void 0 ? void 0 : _b.key) || "");
                     }, count: index => { var _a; return (_a = res[index]) === null || _a === void 0 ? void 0 : _a.count; }, keyMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || ""; }, labelMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.label) || ""; }, onChange: index => {
@@ -468,7 +468,7 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
                         if (result) {
                             handleSetValue(result);
                         }
-                    }, rowCount: undefinedCount ? res.length - 1 : res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, type: "CheckBox" })) }), showUndefinedOptionWithCountAtBottom && undefinedCount ? (jsx(CheckBoxFilterItem, { checked: filterDefinition.type === "valueName"
+                    }, rowCount: undefinedCount ? res.length - 1 : res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, type: "CheckBox" })) }), showUndefinedOptionWithCountAtBottom && undefinedCount ? (jsx(CheckBoxFilterItem, { checked: filterDefinition.type === "valueNameArray"
                     ? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, ((_c = results[undefinedCount.index]) === null || _c === void 0 ? void 0 : _c.key) || "")
                     : filterBarActions.arrayIncludesValue(filterDefinition.filterKey, ((_d = results[undefinedCount.index]) === null || _d === void 0 ? void 0 : _d.key) || ""), className: "rounded-none border-t-2", dataTestId: "dynamic-filter-check-box-undefined", itemCount: undefinedCount.count, label: (_e = results[undefinedCount.index]) === null || _e === void 0 ? void 0 : _e.label, name: "dynamic-filter-check-box-undefined", onChange: () => {
                     const result = results[undefinedCount.index];
@@ -514,7 +514,7 @@ const DefaultDateRangeFilter = ({ filterDefinition, filterName, value, setValue,
     const { logEvent } = useAnalytics(FilterEvents);
     const handleApply = (fromDateValue, toDateValue) => {
         logEvent("Filters Applied - V2", {
-            type: filterName !== null && filterName !== void 0 ? filterName : `${capitalize(filterDefinition.filterKey)}Filter`,
+            type: filterName !== null && filterName !== void 0 ? filterName : `${capitalize$1(filterDefinition.filterKey)}Filter`,
             value: JSON.stringify({ from: fromDateValue, to: toDateValue }),
         });
         setValue(() => ({ from: fromDateValue, to: toDateValue }));
@@ -547,7 +547,7 @@ const DefaultMinMaxFilter = ({ filterDefinition, filterName, value, setValue, fi
         const realMinValue = minValue === 0 ? undefined : minValue !== null && minValue !== void 0 ? minValue : undefined;
         const realMaxValue = maxValue === 0 ? undefined : maxValue !== null && maxValue !== void 0 ? maxValue : undefined;
         logEvent("Filters Applied - V2", {
-            type: filterName !== null && filterName !== void 0 ? filterName : `${capitalize$1(filterDefinition.filterKey)}Filter`,
+            type: filterName !== null && filterName !== void 0 ? filterName : `${capitalize(filterDefinition.filterKey)}Filter`,
             value: JSON.stringify({ min: realMinValue, max: realMaxValue }),
         });
         setValue(() => {
@@ -562,29 +562,29 @@ const DefaultMinMaxFilter = ({ filterDefinition, filterName, value, setValue, fi
  *
  * @returns {JSX.Element} - Returns the DefaultRadioFilter component.
  */
-const DefaultRadioFilter = ({ filterDefinition, filterBarActions, options, loading, filterName, customSearch, showRequestMoreUseSearch = false, }) => {
-    var _a, _b, _c;
+const DefaultRadioFilter = ({ filterDefinition, filterBarActions, options, loading, filterName, customSearch, showRequestMoreUseSearch = false, setValue, }) => {
+    var _a, _b;
     const { logEvent } = useAnalytics(FilterEvents);
     const [filteredOptions, searchText, setSearchText] = useTextSearch(options, item => [item.label]);
     const handleClick = (selectedId) => {
         var _a;
         const { key, label } = (_a = filteredOptions.find(({ key: id }) => id === selectedId)) !== null && _a !== void 0 ? _a : {};
         if (key && label) {
-            filterBarActions.setArrayObjectValue(filterDefinition.filterKey, [{ value: key, name: label }]);
+            setValue(() => ({ value: key, name: label }));
             logEvent("Filters Applied - V2", {
                 type: filterName !== null && filterName !== void 0 ? filterName : `${capitalize(filterDefinition.filterKey)}Filter`,
                 value: String(label),
             });
         }
     };
-    const selectedRadioId = ((_a = filteredOptions.find(partner => filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, partner.key))) === null || _a === void 0 ? void 0 : _a.key) || "";
+    const selectedRadioId = filteredOptions.find(option => filterBarActions.objectIncludesValue(filterDefinition.filterKey, option.key));
     return (jsxs(Fragment, { children: [jsx(FilterHeader, { ...filterBarActions, ...filterDefinition, loading: loading, searchEnabled: true, searchProps: {
-                    value: (_b = customSearch === null || customSearch === void 0 ? void 0 : customSearch.value) !== null && _b !== void 0 ? _b : searchText,
-                    onChange: (_c = customSearch === null || customSearch === void 0 ? void 0 : customSearch.onChange) !== null && _c !== void 0 ? _c : setSearchText,
+                    value: (_a = customSearch === null || customSearch === void 0 ? void 0 : customSearch.value) !== null && _a !== void 0 ? _a : searchText,
+                    onChange: (_b = customSearch === null || customSearch === void 0 ? void 0 : customSearch.onChange) !== null && _b !== void 0 ? _b : setSearchText,
                     count: filteredOptions.length,
                 } }), jsx(FilterResults, { loading: loading, results: customSearch ? options : filteredOptions, children: res => (jsx(RadioGroup, { id: "DefaultRadioFilter", onChange: e => {
                         handleClick(e.currentTarget.value);
-                    }, value: selectedRadioId, children: jsx(DynamicFilterList, { checked: index => { var _a; return filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || ""); }, count: index => { var _a; return (_a = res[index]) === null || _a === void 0 ? void 0 : _a.count; }, keyMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || ""; }, labelMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.label) || ""; }, rowCount: res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, type: "Radio" }) })) })] }));
+                    }, value: (selectedRadioId === null || selectedRadioId === void 0 ? void 0 : selectedRadioId.key) || "", children: jsx(DynamicFilterList, { checked: index => { var _a; return filterBarActions.objectIncludesValue(filterDefinition.filterKey, ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || ""); }, count: index => { var _a; return (_a = res[index]) === null || _a === void 0 ? void 0 : _a.count; }, keyMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || ""; }, labelMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.label) || ""; }, rowCount: res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, type: "Radio" }) })) })] }));
 };
 
 /**
@@ -635,17 +635,20 @@ const reduceFilterText = (input) => {
  */
 const Filter = ({ filter, filterBarActions, filterState, }) => {
     const values = filterBarActions.getValuesByKey(filter.filterKey);
-    const filterText = () => {
-        if (values) {
-            if (filter.valueAsText) {
-                return reduceFilterText(filter.valueAsText(values));
-            }
-            else if (filter.type === "valueName") {
-                return reduceFilterText(values.map(value => value.name));
-            }
-            return values.toString();
+    const getFilterText = () => {
+        if (!values) {
+            return undefined;
         }
-        return "";
+        if (filter.valueAsText) {
+            return reduceFilterText(filter.valueAsText(values));
+        }
+        else if (filter.type === "valueNameArray") {
+            return reduceFilterText(values.map(value => value.name));
+        }
+        else if (filter.type === "valueName") {
+            return values.name;
+        }
+        return values.toString();
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const setValue = (callback) => {
@@ -662,9 +665,12 @@ const Filter = ({ filter, filterBarActions, filterState, }) => {
         else if (filter.type === "area") {
             filterBarActions.setArea(newValue);
         }
-        else if (filter.type === "valueName") {
+        else if (filter.type === "valueNameArray") {
             filterBarActions.setArrayObjectValue(filter.filterKey, newValue);
         }
+        else if (filter.type === "valueName") {
+            filterBarActions.setObjectValue(filter.filterKey, newValue);
+        }
         else if (filter.type === "minMax") {
             filterBarActions.setMinMaxValue(filter.filterKey, newValue);
         }
@@ -675,7 +681,7 @@ const Filter = ({ filter, filterBarActions, filterState, }) => {
             filterBarActions.setNumberValue(filter.filterKey, newValue);
         }
     };
-    const text = filterText();
+    const text = getFilterText();
     const activeFilterText = Array.isArray(text) ? text.join(", ") : text;
     const showDirectly = filter.showDirectly || false;
     return showDirectly ? (jsx(Fragment, { children: filter.component({
@@ -685,7 +691,7 @@ const Filter = ({ filter, filterBarActions, filterState, }) => {
             setValue,
             filterBarActions,
             filterState,
-        }) })) : (jsx(Filter$1, { activeLabel: activeFilterText, dataTestId: `${filter.filterKey}-filter-button`, isActive: filterText().length > 0, popoverProps: { placement: "right-start" }, title: filter.title, withStickyHeader: true, children: filter.component({
+        }) })) : (jsx(Filter$1, { activeLabel: activeFilterText, dataTestId: `${filter.filterKey}-filter-button`, isActive: Boolean(text === null || text === void 0 ? void 0 : text.length), popoverProps: { placement: "right-start" }, title: filter.title, withStickyHeader: true, children: filter.component({
             filterDefinition: filter,
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             value: values,
@@ -770,9 +776,10 @@ const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starred
  * @template TFilterBarDefinition - The type representing the filter bar definition.
  * @returns {JSX.Element} - Returns the StarredFilters component.
  */
-const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], }) => {
+const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], compact, dataTestId, className, }) => {
     const [t] = useTranslation();
-    const { isLg } = useViewportSize();
+    const { isLg } = useViewportBreakpoints();
+    const isCompactMode = compact !== null && compact !== void 0 ? compact : !isLg;
     const hideInMenu = useMemo(() => {
         return objectValues(filterBarDefinition)
             .map(filter => {
@@ -797,9 +804,9 @@ const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
     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 (jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [jsx(Popover, { placement: "bottom-start", children: modalState => (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: jsx("div", { "data-testid": "starred-filters-menu-trigger", children: jsxs(Tooltip, { disabled: isLg || modalState.isOpen, label: jsx(FilterButtonTooltipLabel, { filterBarConfig: filterBarConfig }), children: [jsx(Button, { className: "@xs:flex hidden", prefix: jsx(Icon, { color: filterBarConfig.appliedFilterKeys.length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", suffix: !isLg && filterBarConfig.appliedFilterKeys.length > 0
+    return (jsxs("div", { className: twMerge("flex flex-wrap items-center gap-2", className), "data-testid": dataTestId, children: [jsx(Popover, { placement: "bottom-start", children: modalState => (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: jsx("div", { "data-testid": "starred-filters-menu-trigger", children: jsxs(Tooltip, { disabled: !isCompactMode || modalState.isOpen, label: jsx(FilterButtonTooltipLabel, { filterBarConfig: filterBarConfig }), children: [jsx(Button, { className: "@xs:flex hidden", prefix: jsx(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") }), jsx(IconButton, { className: "@xs:hidden", icon: jsx(Icon, { color: filterBarConfig.appliedFilterKeys.length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", variant: "secondary" })] }) }) }), jsx(PopoverContent, { cellPadding: 100, children: jsxs(Card, { className: "max-h-[min(600px,_calc(100dvh-32px))] overflow-hidden", children: [filtersToShow.length > 0 ? (jsx(CardBody, { density: "dense", children: jsx("div", { className: "flex h-full min-w-min flex-col gap-2", children: jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: filtersToShow }) }) })) : null, jsxs(CardFooter, { className: filtersToShow.length === 0 ? "border-none" : undefined, density: "dense", children: [jsx(StarredFiltersMenu, { className: "mr-auto", filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, starredFilterKeys: filterBarConfig.starredFilterKeys, updateStarredFilters: filterBarConfig.updateStarredFilters }), isLg ? null : (jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys.length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState }))] })] }) })] })) }), showDirectlyFilters.length > 0 ? (jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, isLg ? (jsxs(Fragment, { children: [appliedFilters.filter(filter => !filter.showDirectly).length > 0 ? (jsx("div", { className: "h-4 w-[1px] bg-slate-300" })) : null, jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: appliedFilters }), jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys.length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })] })) : null] }));
+                                                : undefined, variant: "secondary", children: t("filtersBar.filtersHeading") }), jsx(IconButton, { className: "@xs:hidden", icon: jsx(Icon, { color: filterBarConfig.appliedFilterKeys.length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", variant: "secondary" })] }) }) }), jsx(PopoverContent, { cellPadding: 100, children: jsxs(Card, { className: "max-h-[min(600px,_calc(100dvh-32px))] overflow-hidden", children: [filtersToShow.length > 0 ? (jsx(CardBody, { density: "dense", children: jsx("div", { className: "flex h-full min-w-min flex-col gap-2", children: jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: filtersToShow }) }) })) : null, jsxs(CardFooter, { className: filtersToShow.length === 0 ? "border-none" : undefined, density: "dense", children: [jsx(StarredFiltersMenu, { className: "mr-auto", filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, starredFilterKeys: filterBarConfig.starredFilterKeys, updateStarredFilters: filterBarConfig.updateStarredFilters }), !isCompactMode ? null : (jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys.length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState }))] })] }) })] })) }), showDirectlyFilters.length > 0 ? (jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, !isCompactMode ? (jsxs(Fragment, { children: [appliedFilters.filter(filter => !filter.showDirectly).length > 0 ? (jsx("div", { className: "h-4 w-[1px] bg-slate-300" })) : null, jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: appliedFilters }), jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys.length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })] })) : null] }));
 };
 const FiltersList = ({ filters, filterBarConfig }) => {
     return filters.length === 0
@@ -827,8 +834,8 @@ const FilterButtonTooltipLabel = ({ filterBarConfig, }) => {
 /**
  * The FilterBar component serves as a wrapper for managing filters.
  */
-const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, }) => {
-    return (jsx("div", { className: twMerge("flex", className), "data-testid": `${filterBarConfig.name}-filterbar`, children: jsx(StarredFilters, { filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters }) }));
+const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact, }) => {
+    return (jsx(StarredFilters, { className: className, compact: compact, dataTestId: `${filterBarConfig.name}-filterbar`, filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters }));
 };
 
 // Can't import jest.fn so must define a function that does nothing but mimics the jest.fn
@@ -865,6 +872,9 @@ const mockFilterBar = {
             setCriticality: doNothing,
             setServicePlan: doNothing,
         },
+        objectIncludesValue: doNothing,
+        setObjectValue: doNothing,
+        toggleObjectValue: doNothing,
     },
     filterBarDefinition: {},
 };
@@ -881,9 +891,12 @@ const getInitialValueFromType = (type) => {
     if (type === "stringArray") {
         return [];
     }
-    if (type === "valueName") {
+    if (type === "valueNameArray") {
         return [];
     }
+    if (type === "valueName") {
+        return { value: undefined, name: undefined };
+    }
     if (type === "minMax") {
         return { min: undefined, max: undefined };
     }
@@ -916,7 +929,7 @@ const createInitialState = (name, mainFilters, initialState, setValue) => {
         const key = curr.filterKey;
         return {
             ...prev,
-            [`set${capitalize$1(key)}`]: (callback) => setValue(key, callback),
+            [`set${capitalize(key)}`]: (callback) => setValue(key, callback),
         };
     }, {});
     const updatedInitialState = mainFilters.reduce((prev, curr) => {
@@ -950,7 +963,8 @@ const hasValue = (value) => {
     return !(Array.isArray(value) && value.length === 0);
 };
 const isNotRightType = (filterDefinition, foundFilter) => {
-    return ((filterDefinition.type === "valueName" && !isValueNameFilterValue(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)) ||
@@ -1009,13 +1023,21 @@ const isBooleanValue = (value) => {
     return value ? typeof value === "object" && Object.keys(value).includes("booleanValue") : false;
 };
 /**
- *
+ * Type guard to check if a value is a single ValueName object
  */
-const isValueNameFilterValue = (value) => {
-    return (isArrayFilterValue(value) &&
-        value.every(
+const isValueName = (value) => {
+    return (typeof value === "object" &&
+        value !== null &&
         // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
-        item => typeof item === "object" && Object.keys(item).includes("name") && Object.keys(item).includes("value")));
+        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.
@@ -1105,14 +1127,12 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
         // 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${capitalize$1(key)}`] = (callback) => setValue(key, callback);
+            initialFilterBarConfig.setters[`set${capitalize(key)}`] = (callback) => setValue(key, callback);
         });
         return initialFilterBarConfig;
     });
     useEffect(() => {
-        if (onValuesChange) {
-            onValuesChange(filterBarConfig.values);
-        }
+        onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(filterBarConfig.values);
     }, [filterBarConfig.values, filterBarConfig, onValuesChange]);
     useEffect(() => {
         localStorage.setItem(`filter-${name}`, JSON.stringify(filterBarConfig));
@@ -1164,6 +1184,10 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
                 const filter = filterBarConfig.values[key];
                 return (filter === null || filter === void 0 ? void 0 : filter.find(f => f.value === value)) !== undefined || false;
             },
+            objectIncludesValue(key, value) {
+                const filter = filterBarConfig.values[key];
+                return (filter === null || filter === void 0 ? void 0 : filter.value) === value || false;
+            },
         };
     }, [filterBarConfig.initialState, filterBarConfig.name, filterBarConfig.values, filterBarDefinition]);
     const filterMapActions = useMemo(() => {
@@ -1339,6 +1363,17 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
                     };
                 });
             },
+            setObjectValue(key, filterValue) {
+                setFilterBarConfig(prevState => {
+                    return {
+                        ...prevState,
+                        values: {
+                            ...prevState.values,
+                            [key]: filterValue,
+                        },
+                    };
+                });
+            },
             //Setting multiple value name objects
             toggleArrayObjectValue(key, filterValue) {
                 setFilterBarConfig(prevState => {
@@ -1359,6 +1394,17 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
                     };
                 });
             },
+            toggleObjectValue(key, filterValue) {
+                setFilterBarConfig(prevState => {
+                    return {
+                        ...prevState,
+                        values: {
+                            ...prevState.values,
+                            [key]: filterValue,
+                        },
+                    };
+                });
+            },
             // Reset filters to initial state
             resetFiltersToInitialState() {
                 setFilterBarConfig(prevState => {
@@ -1408,4 +1454,4 @@ const mergeFilters = (filterBarDefinition, extraFilters) => {
  */
 setupLibraryTranslations();
 
-export { DefaultCheckboxFilter, DefaultDateRangeFilter, DefaultMinMaxFilter, DefaultRadioFilter, DynamicFilterList, FilterBar, FilterEvents, FilterHeader, FilterResults, StarredFilters, isAreaFilterValue, isArrayFilterValue, isBooleanValue, isDateRangeValue, isMinMaxFilterValue, isStringArrayFilterValue, isValueNameFilterValue, mergeFilters, mockFilterBar, toggleFilterValue, useFilterBar, validateFilter };
+export { DefaultCheckboxFilter, DefaultDateRangeFilter, DefaultMinMaxFilter, DefaultRadioFilter, DynamicFilterList, FilterBar, FilterEvents, FilterHeader, FilterResults, StarredFilters, isAreaFilterValue, isArrayFilterValue, isBooleanValue, isDateRangeValue, isMinMaxFilterValue, isStringArrayFilterValue, isValueName, isValueNameArray, mergeFilters, mockFilterBar, toggleFilterValue, useFilterBar, validateFilter };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "0.0.579",
+  "version": "0.0.581",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/lib/FilterBar.d.ts

@@ -18,9 +18,13 @@ interface FilterBarProps<TFilterBarDefinition extends FilterBarDefinition> {
      * @see FilterBarConfig
      */
     filterBarConfig: FilterBarConfig<TFilterBarDefinition> & FilterMapActions & FilterMapGetter;
+    /**
+     * If true, the starred filters will be displayed in a compact mode
+     */
+    compact?: boolean;
 }
 /**
  * The FilterBar component serves as a wrapper for managing filters.
  */
-export declare const FilterBar: <TFilterBarDefinition extends FilterBarDefinition>({ hiddenFilters, className, filterBarDefinition, filterBarConfig, }: FilterBarProps<TFilterBarDefinition>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterBar: <TFilterBarDefinition extends FilterBarDefinition>({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact, }: FilterBarProps<TFilterBarDefinition>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/DefaultRadioFilter.d.ts

@@ -5,4 +5,4 @@ import { DefaultFilterProps } from "./DefaultFilterTypes";
  *
  * @returns {JSX.Element} - Returns the DefaultRadioFilter component.
  */
-export declare const DefaultRadioFilter: ({ filterDefinition, filterBarActions, options, loading, filterName, customSearch, showRequestMoreUseSearch, }: DefaultFilterProps<ValueName[]>) => JSX.Element;
+export declare const DefaultRadioFilter: ({ filterDefinition, filterBarActions, options, loading, filterName, customSearch, showRequestMoreUseSearch, setValue, }: DefaultFilterProps<ValueName>) => JSX.Element;

package/src/lib/components/StarredFilters.d.ts

@@ -1,5 +1,6 @@
+import { CommonProps } from "@trackunit/react-components";
 import { FilterBarConfig, FilterBarDefinition, FilterMapActions, FilterMapGetter } from "../types/FilterTypes";
-interface StarredFiltersProps<TFilterBarDefinition extends FilterBarDefinition> {
+interface StarredFiltersProps<TFilterBarDefinition extends FilterBarDefinition> extends CommonProps {
     /**
      * Configuration for the filter bar.
      */
@@ -12,6 +13,10 @@ interface StarredFiltersProps<TFilterBarDefinition extends FilterBarDefinition>
      * If you want some of the filters to be hidden, but still programmatically enabled
      */
     hiddenFilters?: string[];
+    /**
+     * If true, the starred filters will be displayed in a compact mode
+     */
+    compact?: boolean;
 }
 /**
  * StarredFilters is a React component that displays a list of starred filters based on the provided filter bar configuration.
@@ -19,5 +24,5 @@ interface StarredFiltersProps<TFilterBarDefinition extends FilterBarDefinition>
  * @template TFilterBarDefinition - The type representing the filter bar definition.
  * @returns {JSX.Element} - Returns the StarredFilters component.
  */
-export declare const StarredFilters: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarDefinition, filterBarConfig, hiddenFilters, }: StarredFiltersProps<TFilterBarDefinition>) => import("react/jsx-runtime").JSX.Element;
+export declare const StarredFilters: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarDefinition, filterBarConfig, hiddenFilters, compact, dataTestId, className, }: StarredFiltersProps<TFilterBarDefinition>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/hooks/useFilterBar.d.ts

@@ -29,6 +29,7 @@ export declare const useFilterBar: <TFilterBarDefinition extends FilterBarDefini
         getFilterTitle: (key: string) => string;
         getFilterBarName: () => string;
         objectArrayIncludesValue: (key: string, value: string) => boolean;
+        objectIncludesValue: (key: string, value: string) => boolean;
         getValuesByKey: (key: string) => FilterValueType;
         arrayIncludesValue: (key: string, value: string | boolean) => boolean;
         appliedFilterKeys: (keyof FilterBarDefinition)[];
@@ -44,7 +45,9 @@ export declare const useFilterBar: <TFilterBarDefinition extends FilterBarDefini
         setDateRange: (key: string, value: DateRangeValue) => void;
         setMinMaxValue: (key: string, minMaxValue: MinMaxFilterValue) => void;
         setArrayObjectValue: (key: string, value: ValueName[]) => void;
+        setObjectValue: (key: string, value: ValueName) => void;
         toggleArrayObjectValue: (key: string, value: ValueName) => void;
+        toggleObjectValue: (key: string, value: ValueName) => void;
         resetFiltersToInitialState: () => void;
         resetIndividualFilterToInitialState: (key: string) => void;
         name: string;

package/src/lib/types/FilterTypes.d.ts

@@ -14,8 +14,8 @@ export type MinMaxFilterValue = {
     min?: number;
     max?: number;
 };
-export type FilterValueType = string[] | ValueName[] | MinMaxFilterValue | GeoJsonPolygon | string | number | BooleanValue | undefined;
-export declare type FilterTypes = "boolean" | "string" | "number" | "dateRange" | "area" | "valueName" | "stringArray" | "minMax";
+export type FilterValueType = string[] | ValueName[] | ValueName | MinMaxFilterValue | GeoJsonPolygon | string | number | BooleanValue | undefined;
+export declare type FilterTypes = "boolean" | "string" | "number" | "dateRange" | "area" | "valueNameArray" | "valueName" | "stringArray" | "minMax";
 export type FilterMapActions = {
     updateStarredFilters: (filterkey: string) => void;
     toggleArrayValue: (key: string, value: string) => void;
@@ -27,7 +27,9 @@ export type FilterMapActions = {
     setDateRange: (key: string, value: DateRangeValue) => void;
     setMinMaxValue: (key: string, minMaxValue: MinMaxFilterValue) => void;
     setArrayObjectValue: (key: string, value: ValueName[]) => void;
+    setObjectValue: (key: string, value: ValueName) => void;
     toggleArrayObjectValue: (key: string, value: ValueName) => void;
+    toggleObjectValue: (key: string, value: ValueName) => void;
     resetFiltersToInitialState: () => void;
     resetIndividualFilterToInitialState: (key: string) => void;
 };
@@ -35,6 +37,7 @@ export type FilterMapGetter = {
     getFilterTitle: (key: string) => string;
     getFilterBarName: () => string;
     objectArrayIncludesValue: (key: string, value: string) => boolean;
+    objectIncludesValue: (key: string, value: string) => boolean;
     getValuesByKey: (key: string) => FilterValueType;
     arrayIncludesValue: (key: string, value: string | boolean) => boolean;
     readonly appliedFilterKeys: (keyof FilterBarDefinition)[];
@@ -109,12 +112,18 @@ export interface AreaFilterDefinition extends AbstractFilterDefinition {
     valueAsText?: (value: GeoJsonPolygon) => string;
     component: (filterComponentProps: FilterViewProps<GeoJsonPolygon>) => React.ReactNode;
 }
-export interface ValueNameFilterDefinition extends AbstractFilterDefinition {
-    type: "valueName";
+export interface ValueNameArrayFilterDefinition extends AbstractFilterDefinition {
+    type: "valueNameArray";
     defaultValue?: ValueName[];
     valueAsText?: (value: ValueName[]) => string[];
     component: (filterComponentProps: FilterViewProps<ValueName[]>) => React.ReactNode;
 }
+export interface ValueNameFilterDefinition extends AbstractFilterDefinition {
+    type: "valueName";
+    defaultValue?: ValueName;
+    valueAsText?: (value: ValueName) => string;
+    component: (filterComponentProps: FilterViewProps<ValueName>) => React.ReactNode;
+}
 export interface StringArrayFilterDefinition extends AbstractFilterDefinition {
     type: "stringArray";
     defaultValue?: string[];
@@ -153,7 +162,7 @@ export interface DateRangeFilterDefinition extends AbstractFilterDefinition {
     valueAsText?: (value: DateRangeValue) => string;
     component: (filterComponentProps: FilterViewProps<DateRangeValue>) => React.ReactNode;
 }
-export type FilterDefinition = BooleanFilterDefinition | MinMaxFilterDefinition | StringFilterDefinition | NumberFilterDefinition | DateRangeFilterDefinition | AreaFilterDefinition | ValueNameFilterDefinition | StringArrayFilterDefinition;
+export type FilterDefinition = BooleanFilterDefinition | MinMaxFilterDefinition | StringFilterDefinition | NumberFilterDefinition | DateRangeFilterDefinition | AreaFilterDefinition | ValueNameFilterDefinition | ValueNameArrayFilterDefinition | StringArrayFilterDefinition;
 export type FilterDefinitionValue = NonNullable<FilterDefinition["defaultValue"]>;
 export interface FilterViewProps<TReturnType> {
     filterDefinition: FilterDefinition;
@@ -169,7 +178,7 @@ export type FiltersStoreInstance<T extends FilterBarDefinition> = Partial<Filter
 export interface FilterStateMap<T extends FilterBarDefinition> {
     filtersMap: Record<string, FilterBarConfig<T>>;
 }
-export type FilterBarInferredValue<T extends FilterBarDefinition, K extends keyof T> = T[K]["type"] extends infer Type ? Type extends "boolean" ? BooleanValue | undefined : Type extends "string" ? string | undefined : Type extends "number" ? number | undefined : Type extends "area" ? GeoJsonPolygon | undefined : Type extends "valueName" ? ValueName[] | undefined : Type extends "stringArray" ? string[] | undefined : Type extends "minMax" ? MinMaxFilterValue | undefined : Type extends "dateRange" ? DateRangeValue | undefined : undefined : undefined;
+export type FilterBarInferredValue<T extends FilterBarDefinition, K extends keyof T> = T[K]["type"] extends infer Type ? Type extends "boolean" ? BooleanValue | undefined : Type extends "string" ? string | undefined : Type extends "number" ? number | undefined : Type extends "area" ? GeoJsonPolygon | undefined : Type extends "valueNameArray" ? ValueName[] | undefined : Type extends "valueName" ? ValueName | undefined : Type extends "stringArray" ? string[] | undefined : Type extends "minMax" ? MinMaxFilterValue | undefined : Type extends "dateRange" ? DateRangeValue | undefined : undefined : undefined;
 export type SetterKey<T extends string> = `set${Capitalize<T>}`;
 export type ReverseSetterKey<T extends string> = Uncapitalize<T extends `set${infer U}` ? U : never>;
 export type ExtractFilterKeys<T extends FilterBarDefinition> = Extract<keyof T, string>;

package/src/lib/utils/createInitialState.d.ts

@@ -6,8 +6,14 @@ type InitialTypes = {
     Arg: "stringArray";
     Init: string[];
 } | {
-    Arg: "valueName";
+    Arg: "valueNameArray";
     Init: ValueName[];
+} | {
+    Arg: "valueName";
+    Init: {
+        value: undefined;
+        name: undefined;
+    };
 } | {
     Arg: "minMax";
     Init: {

package/src/lib/utils/validateFilter.d.ts

@@ -28,9 +28,13 @@ export declare const isStringArrayFilterValue: (value: FilterDefinitionValue) =>
  */
 export declare const isBooleanValue: (value: FilterDefinitionValue) => value is BooleanValue;
 /**
- *
+ * Type guard to check if a value is a single ValueName object
+ */
+export declare const isValueName: (value: unknown) => value is ValueName;
+/**
+ * Type guard to check if a value is an array of ValueName objects
  */
-export declare const isValueNameFilterValue: (value: FilterDefinitionValue) => value is ValueName[];
+export declare const isValueNameArray: (value: FilterDefinitionValue) => value is ValueName[];
 /**
  * Validates a filter configuration against filter definitions.
  *