@trackunit/filters-filter-bar 0.0.491 → 0.0.493

package/index.esm.js

@@ -1,18 +1,20 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { twMerge } from 'tailwind-merge';
-import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { Button, Popover, PopoverTrigger, IconButton, Icon, PopoverContent, MenuList, Text, StarButton, useViewportSize, Collapse, VirtualizedList } from '@trackunit/react-components';
-import { objectValues, truthy, capitalize, nonNullable } from '@trackunit/shared-utils';
-import { useMemo, useState, Fragment as Fragment$1, useRef, useEffect, useCallback } from 'react';
-import { Filter as Filter$1, FilterBody, RadioFilterItem, CheckBoxFilterItem, FilterHeader as FilterHeader$1, FilterFooter } from '@trackunit/react-filter-components';
 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, Fragment as Fragment$1 } from 'react';
 import { createEvent } from '@trackunit/react-core-contexts-api';
+import { VirtualizedList, Text, Button, useGeometry, usePrevious, useDebounce, useLocalStorage, Popover, PopoverTrigger, PopoverContent, MenuList, MenuItem, Tooltip, IconButton, Icon, StarButton, useViewportSize, Card, CardBody } from '@trackunit/react-components';
 import { Search, NumberField, RadioGroup } from '@trackunit/react-form-components';
 import { DayRangePicker } from '@trackunit/react-date-and-time-components';
+import { cvaMerge } from '@trackunit/css-class-variance-utilities';
+import { twMerge } from 'tailwind-merge';
+import { z } from 'zod';
 import { dequal } from 'dequal';
-import { capitalize as capitalize$1 } from 'string-ts';
 import isEqual from 'lodash/isEqual';
+import reduce from 'lodash/reduce';
+import { capitalize as capitalize$1 } from 'string-ts';
 
 var defaultTranslations = {
 	"access.management.filter.operator.role.keyAdmin": "Key Admin",
@@ -80,8 +82,8 @@ var defaultTranslations = {
 	"assetFilters.regions.WESTERN_ASIA": "Western Asia",
 	"assetFilters.regions.WESTERN_EUROPE": "Western Europe",
 	"assetFilters.regions.WHOLE_WORLD": "Whole world",
-	"assetFilters.searchFilter.label": "Search filter",
-	"assetFilters.searchPlaceholder": "Search...",
+	"assetFilters.searchFilter.label": "Text search",
+	"assetFilters.searchPlaceholder": "Search by text...",
 	"assetFilters.serviceAssignmentStatusFilter.label": "Assignment Status",
 	"assetFilters.servicePlanFilter.fullyConfigured": "Fully configured",
 	"assetFilters.servicePlanFilter.label": "Service Plan",
@@ -103,6 +105,12 @@ var defaultTranslations = {
 	"auditlog.filter.users": "Users",
 	"filter.more.options.if.you.search.description": "Use search to refine results.",
 	"filter.more.options.if.you.search.title": "Over {{count}} items found.",
+	"filters.shared.clear": "clear",
+	"filters.shared.clearAll": "clear all",
+	"filters.shared.recentSearches": "Recent searches",
+	"filtersBar.appliedFiltersTooltip.none": "No filters applied",
+	"filtersBar.appliedFiltersTooltip.plural": "{{count}} filters applied:",
+	"filtersBar.appliedFiltersTooltip.singular": "{{filterName}} filter applied",
 	"filtersBar.closeFilter": "Close",
 	"filtersBar.defaultAssetFilters.followedFilter.ALL": "All Assets",
 	"filtersBar.defaultAssetFilters.followedFilter.allLabel": "All Assets",
@@ -302,128 +310,6 @@ const setupLibraryTranslations = () => {
     registerTranslations(translations);
 };
 
-/**
- * Custom React hook for grouping and filtering a list of filters.
- *
- * @param {FilterDefinition[]} filterDefinitions - The list of filter definitions to group and filter.
- * @param {string[]} hiddenFilters - An array of filter keys representing filters to be hidden.
- * @returns {UseGroupFiltersReturnType} An object containing the grouped filters.
- */
-const useStarredGroupFilters = (filterDefinitions, hiddenFilters) => {
-    const [t] = useTranslation();
-    const filtersGrouped = useMemo(() => {
-        const keys = uniqueKeysFromGroups(filterDefinitions);
-        return keys
-            .map(key => ({
-            key: t(`filtersBar.groups.${key}`),
-            filters: filterDefinitions.filter(rawFilter => rawFilter.group === key && hiddenFilters.includes(rawFilter.filterKey) === false),
-        }))
-            .filter(filter => filter.filters.length > 0);
-    }, [filterDefinitions, hiddenFilters, t]);
-    return { filtersGrouped };
-};
-const uniqueKeysFromGroups = (filters) => [...new Set(filters.map(filter => filter.group))];
-
-/**
- * Returns the two first values, appends counter if more.
- *
- * @param {string[]} [input] Array of values to reduce
- * @returns {*}  {string}
- */
-const reduceFilterText = (input) => {
-    if (!Array.isArray(input)) {
-        return input;
-    }
-    // Only first two elements
-    const firstTwo = input.slice(0, 2);
-    const remainder = input.slice(2, input.length).length;
-    const firstTwoJoined = firstTwo.join(", ");
-    const remainderStr = remainder > 0 ? `, +${remainder}` : "";
-    return firstTwoJoined + remainderStr;
-};
-
-/**
- * Filter is a React component that renders a filter element based on the provided filter definition and state.
- *
- * @returns {JSX.Element} - Returns the Filter component.
- */
-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();
-        }
-        return "";
-    };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const setValue = (callback) => {
-        const newValue = callback(filterBarActions.getValuesByKey(filter.filterKey));
-        if (filter.type === "string") {
-            filterBarActions.setStringValue(filter.filterKey, newValue);
-        }
-        else if (filter.type === "stringArray") {
-            filterBarActions.setArrayValue(filter.filterKey, newValue);
-        }
-        else if (filter.type === "dateRange") {
-            filterBarActions.setDateRange(filter.filterKey, newValue);
-        }
-        else if (filter.type === "boundingBox") {
-            filterBarActions.setBoundingBox(newValue);
-        }
-        else if (filter.type === "valueName") {
-            filterBarActions.setArrayObjectValue(filter.filterKey, newValue);
-        }
-        else if (filter.type === "minMax") {
-            filterBarActions.setMinMaxValue(filter.filterKey, newValue);
-        }
-        else if (filter.type === "boolean") {
-            filterBarActions.setBooleanValue(filter.filterKey, newValue);
-        }
-        else {
-            filterBarActions.setNumberValue(filter.filterKey, newValue);
-        }
-    };
-    const text = filterText();
-    const activeFilterText = Array.isArray(text) ? text.join(", ") : text;
-    const showDirectly = filter.showDirectly || false;
-    return showDirectly ? (jsx(Fragment, { children: filter.component({
-            filterDefinition: filter,
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            value: values,
-            setValue,
-            filterBarActions,
-            filterState,
-        }) })) : (jsx(Filter$1, { activeLabel: activeFilterText, dataTestId: `${filter.filterKey}-filter-button`, isActive: filterText().length > 0, title: filter.title, withStickyHeader: true, children: filter.component({
-            filterDefinition: filter,
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            value: values,
-            setValue,
-            filterBarActions,
-            filterState,
-        }) }));
-};
-
-/**
- * ResetFiltersButton is a React component that provides a button for resetting filters.
- *
- * @returns {ReactElement | null} The rendered ResetFiltersButton component, or null if no filters have been applied.
- */
-const ResetFiltersButton = ({ filtersHaveBeenApplied, resetFiltersToInitialState, }) => {
-    const [t] = useTranslation();
-    if (!filtersHaveBeenApplied) {
-        return null;
-    }
-    return (jsx(Button, { dataTestId: "reset-filters-button", onClick: () => {
-            resetFiltersToInitialState();
-        }, size: "small", variant: "ghost-neutral", children: t("filtersBar.resetFilters") }));
-};
-
 /**
  * Events — each with a name, and eventType.
  * Adding a Description is encouraged.
@@ -439,101 +325,6 @@ const FilterEvents = {
     "Starring Filter - Toggled": createEvent(),
 };
 
-/**
- * StarredFiltersMenu is a React component that displays a menu of starred filters within a filter bar.
- *
- * @returns {JSX.Element} - Returns the StarredFiltersMenu component.
- */
-const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starredFilterKeys, hiddenFilters = [], }) => {
-    const [t] = useTranslation();
-    const { logEvent } = useAnalytics(FilterEvents);
-    const hideInStarredMenu = useMemo(() => {
-        return objectValues(filterBarDefinition)
-            .map(filter => {
-            const showInStarredMenu = filter.showInStarredMenu ? filter.showInStarredMenu() : true;
-            const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
-            return !showInStarredMenu || !showInFilterBar ? filter.filterKey : null;
-        })
-            .filter(truthy);
-    }, [filterBarDefinition]);
-    const { filtersGrouped } = useStarredGroupFilters(objectValues(filterBarDefinition), [
-        ...hideInStarredMenu,
-        ...hiddenFilters,
-    ]);
-    return (jsxs(Fragment, { children: [jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(IconButton, { dataTestId: "starred-filters-menu", icon: jsx(Icon, { name: "Funnel", size: "small" }), size: "small", title: t("filtersBar.starredFiltersTitle") }) }), jsx(PopoverContent, { children: jsx(MenuList, { className: "max-h-[55vh] w-72 overflow-y-auto", dataTestId: "starred-filters-menu-popover", children: jsx("div", { children: filtersGrouped.map((group, idx) => {
-                                    const isLast = idx === filtersGrouped.length - 1;
-                                    return (jsxs("div", { className: "mb-2", children: [jsx("div", { className: "mt-2 mb-1 flex px-2", children: jsx(Text, { dataTestId: "starred-filters-group-title", size: "small", subtle: true, uppercase: true, weight: "bold", children: group.key }) }), group.filters.map(filter => {
-                                                return (jsxs("div", { className: "flex w-full cursor-pointer items-center justify-between rounded-sm py-0 px-2 transition hover:bg-neutral-50", "data-testid": `${filter.filterKey}-star-filter`, onClick: () => {
-                                                        updateStarredFilters(filter.filterKey);
-                                                        logEvent("Starring Filter - Toggled", {
-                                                            type: filter.filterKey,
-                                                        });
-                                                    }, children: [jsx(Text, { weight: "thick", children: filter.title }), jsx(StarButton, { onClick: e => {
-                                                                e.preventDefault();
-                                                                e.stopPropagation();
-                                                                updateStarredFilters(filter.filterKey);
-                                                                logEvent("Starring Filter - Toggled", {
-                                                                    type: filter.filterKey,
-                                                                });
-                                                            }, starred: starredFilterKeys.includes(filter.filterKey) })] }, filter.filterKey));
-                                            }), !isLast && jsx("div", { className: "mt-2 h-[1px] w-full bg-neutral-300" })] }, group.key));
-                                }) }) }) })] }), starredFilterKeys.length > 0 ? jsx("div", { className: "h-7 w-[1px] bg-neutral-300" }) : null] }));
-};
-
-const cvaCollapse = cvaMerge("bg-white", {
-    variants: {
-        disableCollapse: { true: "hidden" },
-    },
-});
-const cvaFilterWithoutCollapse = cvaMerge([], {
-    variants: { disableCollapse: { true: "flex", false: ["hidden", "md:flex"] } },
-});
-/**
- * StarredFilters is a React component that displays a list of starred filters based on the provided filter bar configuration.
- *
- * @template TFilterBarDefinition - The type representing the filter bar definition.
- * @returns {JSX.Element} - Returns the StarredFilters component.
- */
-const StarredFilters = ({ filterBarDefinition, filterBarConfig, disableCollapse, hiddenFilters = [], }) => {
-    const [expanded, setExpanded] = useState(false);
-    const [t] = useTranslation();
-    const { isMd } = useViewportSize();
-    return isMd || disableCollapse ? (jsx(FilterSelection, { className: cvaFilterWithoutCollapse({ disableCollapse }), filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters })) : (jsx(Collapse, { className: cvaCollapse({ disableCollapse }), id: "storybook_collapsible", initialExpanded: expanded, label: t("filtersBar.filtersHeading") + (filterBarConfig.filtersHaveBeenApplied ? " *" : ""), onToggle: () => setExpanded(prev => !prev), children: jsx(FilterSelection, { className: "flex", filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters }) }));
-};
-const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], className, }) => {
-    const hideInFilterBar = useMemo(() => {
-        return objectValues(filterBarDefinition)
-            .map(filter => {
-            const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
-            return !showInFilterBar ? filter.filterKey : null;
-        })
-            .filter(truthy);
-    }, [filterBarDefinition]);
-    const { filtersGrouped } = useStarredGroupFilters(objectValues(filterBarDefinition), [
-        ...hideInFilterBar,
-        ...hiddenFilters,
-    ]);
-    return (jsxs("div", { className: twMerge([className, "flex-wrap", "items-center", "gap-3"]), "data-testid": "starred-filters", children: [jsx(StarredFiltersMenu, { filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, starredFilterKeys: filterBarConfig.starredFilterKeys, updateStarredFilters: filterBarConfig.updateStarredFilters }), filtersGrouped.map(group => group.filters
-                .filter(filter => !hiddenFilters.includes(filter.filterKey))
-                .map(filter => {
-                const showMenuAnyway = filterBarConfig.filterHasChanged(filter.filterKey) &&
-                    filter.showInStarredMenu &&
-                    !filter.showInStarredMenu();
-                if (filterBarConfig.starredFilterKeys.includes(filter.filterKey) ||
-                    showMenuAnyway) {
-                    return (jsx(Fragment$1, { children: jsx(Filter, { filter: filter, filterBarActions: filterBarConfig, filterState: { values: filterBarConfig.values, setters: filterBarConfig.setters } }, `filter-${filter.filterKey}`) }, filter.filterKey));
-                }
-                return null;
-            })), jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.filtersHaveBeenApplied, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })] }));
-};
-
-/**
- * The FilterBar component serves as a wrapper for managing filters.
- */
-const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, disableCollapse = false, }) => {
-    return (jsx("div", { className: twMerge("flex", className), "data-testid": `${filterBarConfig.name}-filterbar`, children: jsx(StarredFilters, { disableCollapse: disableCollapse, filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters }) }));
-};
-
 /**
  * Toggles a filter value in an array.
  *
@@ -559,7 +350,7 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked
     const [t] = useTranslation();
     const parentRef = useRef(null);
     const updatedRowCount = useMemo(() => (showRequestMoreUseSearch ? rowCount + 1 : rowCount), [rowCount, showRequestMoreUseSearch]);
-    return (jsx(FilterBody, { dataTestId: "FUUUCK", limitSize: true, ref: parentRef, children: jsx(VirtualizedList, { count: updatedRowCount, rowHeight: 40, separator: "space", children: index => {
+    return (jsx(FilterBody, { limitSize: true, ref: parentRef, children: jsx(VirtualizedList, { count: updatedRowCount, rowHeight: 40, separator: "space", children: index => {
                 return (jsx("div", { children: showRequestMoreUseSearch && index === rowCount ? (jsxs("div", { className: "p-3 pt-2", children: [jsx("span", { className: "text-sm text-gray-600", children: t("filter.more.options.if.you.search.title", { count: rowCount }) }), jsx("br", {}), jsx("span", { className: "text-sm italic text-gray-400", children: t("filter.more.options.if.you.search.description") })] })) : type === "Radio" ? (jsx(RadioFilterItem, { dataTestId: "dynamic-filter-radio-" + keyMapper(index), itemCount: count(index), label: labelMapper(index), selected: checked(index), value: keyMapper(index) }, keyMapper(index))) : (jsx(CheckBoxFilterItem, { checked: checked(index), dataTestId: "dynamic-filter-check-box-" + keyMapper(index), itemCount: count(index), label: labelMapper(index), name: keyMapper(index), onChange: () => {
                             onChange === null || onChange === void 0 ? void 0 : onChange(index);
                         } }, keyMapper(index))) }));
@@ -571,13 +362,17 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked
  *
  * @returns {JSX.Element} - Returns the FilterHeader component.
  */
-const FilterHeader = ({ filterKey, title, searchEnabled, searchProps, filterHasChanged, resetIndividualFilterToInitialState, onResetFilter, loading = false, }) => {
+const FilterHeader = ({ filterKey, title, searchEnabled, searchProps, filterHasChanged, resetIndividualFilterToInitialState, onResetFilter, loading = false, className, dataTestId, }) => {
     const [t] = useTranslation();
     const handleResetFilter = () => {
         resetIndividualFilterToInitialState(filterKey);
         onResetFilter === null || onResetFilter === void 0 ? void 0 : onResetFilter();
     };
-    return (jsx(FilterHeader$1, { dataTestId: `${filterKey}-filter-header`, loading: loading, onReset: handleResetFilter, resetLabel: t("filtersBar.resetFilter"), showReset: filterHasChanged(filterKey), title: title, children: searchEnabled ? (jsx(Search, { autoFocus: true, fieldSize: "small", id: `${filterKey}-search`, onChange: e => searchProps.onChange(e.currentTarget.value), placeholder: t("assetFilters.searchPlaceholder"), suffix: jsx(Text, { size: "small", subtle: true, children: searchProps.count }), value: searchProps.value })) : null }));
+    return (jsx(FilterHeader$1, { className: className, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : `${filterKey}-filter-header`, loading: loading, onReset: handleResetFilter, resetLabel: t("filtersBar.resetFilter"), showReset: filterHasChanged(filterKey), title: title, children: searchEnabled ? (jsx(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);
+                }
+            }, placeholder: t("assetFilters.searchPlaceholder"), suffix: jsx(Text, { size: "small", subtle: true, children: searchProps.count }), value: searchProps.value })) : null }));
 };
 
 /**
@@ -792,6 +587,351 @@ const DefaultRadioFilter = ({ filterDefinition, filterBarActions, options, loadi
                     }, 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" }) })) })] }));
 };
 
+/**
+ * Custom React hook for grouping and filtering a list of filters.
+ *
+ * @param {FilterDefinition[]} filterDefinitions - The list of filter definitions to group and filter.
+ * @param {string[]} hiddenFilters - An array of filter keys representing filters to be hidden.
+ * @returns {UseGroupFiltersReturnType} An object containing the grouped filters.
+ */
+const useStarredGroupFilters = (filterDefinitions, hiddenFilters) => {
+    const [t] = useTranslation();
+    const filtersGrouped = useMemo(() => {
+        const keys = uniqueKeysFromGroups(filterDefinitions);
+        return keys
+            .map(key => ({
+            key: t(`filtersBar.groups.${key}`),
+            filters: filterDefinitions.filter(rawFilter => rawFilter.group === key && hiddenFilters.includes(rawFilter.filterKey) === false),
+        }))
+            .filter(filter => filter.filters.length > 0);
+    }, [filterDefinitions, hiddenFilters, t]);
+    return { filtersGrouped };
+};
+const uniqueKeysFromGroups = (filters) => [...new Set(filters.map(filter => filter.group))];
+
+/**
+ * Returns the two first values, appends counter if more.
+ *
+ * @param {string[]} [input] Array of values to reduce
+ * @returns {*}  {string}
+ */
+const reduceFilterText = (input) => {
+    if (!Array.isArray(input)) {
+        return input;
+    }
+    // Only first two elements
+    const firstTwo = input.slice(0, 2);
+    const remainder = input.slice(2, input.length).length;
+    const firstTwoJoined = firstTwo.join(", ");
+    const remainderStr = remainder > 0 ? `, +${remainder}` : "";
+    return firstTwoJoined + remainderStr;
+};
+
+/**
+ * Filter is a React component that renders a filter element based on the provided filter definition and state.
+ *
+ * @returns {JSX.Element} - Returns the Filter component.
+ */
+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();
+        }
+        return "";
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const setValue = (callback) => {
+        const newValue = callback(filterBarActions.getValuesByKey(filter.filterKey));
+        if (filter.type === "string") {
+            filterBarActions.setStringValue(filter.filterKey, newValue);
+        }
+        else if (filter.type === "stringArray") {
+            filterBarActions.setArrayValue(filter.filterKey, newValue);
+        }
+        else if (filter.type === "dateRange") {
+            filterBarActions.setDateRange(filter.filterKey, newValue);
+        }
+        else if (filter.type === "boundingBox") {
+            filterBarActions.setBoundingBox(newValue);
+        }
+        else if (filter.type === "valueName") {
+            filterBarActions.setArrayObjectValue(filter.filterKey, newValue);
+        }
+        else if (filter.type === "minMax") {
+            filterBarActions.setMinMaxValue(filter.filterKey, newValue);
+        }
+        else if (filter.type === "boolean") {
+            filterBarActions.setBooleanValue(filter.filterKey, newValue);
+        }
+        else {
+            filterBarActions.setNumberValue(filter.filterKey, newValue);
+        }
+    };
+    const text = filterText();
+    const activeFilterText = Array.isArray(text) ? text.join(", ") : text;
+    const showDirectly = filter.showDirectly || false;
+    return showDirectly ? (jsx(Fragment, { children: filter.component({
+            filterDefinition: filter,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            value: values,
+            setValue,
+            filterBarActions,
+            filterState,
+        }) })) : (jsx(Filter$1, { activeLabel: activeFilterText, dataTestId: `${filter.filterKey}-filter-button`, isActive: filterText().length > 0, title: filter.title, withStickyHeader: true, children: filter.component({
+            filterDefinition: filter,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            value: values,
+            setValue,
+            filterBarActions,
+            filterState,
+        }) }));
+};
+
+/**
+ * ResetFiltersButton is a React component that provides a button for resetting filters.
+ *
+ * @returns {ReactElement | null} The rendered ResetFiltersButton component, or null if no filters have been applied.
+ */
+const ResetFiltersButton = ({ filtersHaveBeenApplied, resetFiltersToInitialState, }) => {
+    const [t] = useTranslation();
+    if (!filtersHaveBeenApplied) {
+        return null;
+    }
+    return (jsx(Button, { dataTestId: "reset-filters-button", onClick: () => {
+            resetFiltersToInitialState();
+        }, size: "small", variant: "ghost-neutral", children: t("filtersBar.resetFilters") }));
+};
+
+const MAX_RECENT_SEARCHES = 20;
+/**
+ *
+ */
+const SearchFilterInline = ({ filterBarActions, filterState, filter, className, dataTestId, }) => {
+    const { logEvent } = useAnalytics(FilterEvents);
+    const searchElementRef = useRef(null);
+    const geometry = useGeometry(searchElementRef);
+    const filterValue = (filter === null || filter === void 0 ? void 0 : filter.filterKey) ? String(filterState.values[filter.filterKey]) : undefined;
+    const [searchString, setSearchString] = useState(filterValue !== null && filterValue !== void 0 ? filterValue : "");
+    const previousFilterValue = usePrevious(filterValue);
+    useDebounce(searchString, 500, "both", debouncedSearchString => {
+        if (filterValue === debouncedSearchString) {
+            return;
+        }
+        apply({ value: debouncedSearchString, setRecent: false });
+    });
+    useEffect(() => {
+        // Catch a change in filter value from outside the component and update the search string to match
+        if (filterValue === searchString || previousFilterValue === filterValue) {
+            return;
+        }
+        filterValue !== undefined && setSearchString(filterValue);
+    }, [filterValue, previousFilterValue, searchString]);
+    const [t] = useTranslation();
+    const [recentSearches, setRecentSearches] = useLocalStorage({
+        defaultState: [],
+        key: "free-text-filter-recent-searches",
+        schema: z.array(z.string()),
+    });
+    const apply = useCallback(({ value, wasPreviousSearch = false, setRecent = true, }) => {
+        if (setRecent !== false) {
+            setRecentSearches(prev => {
+                const noDuplicatesRecent = prev.filter(r => r !== value);
+                const cappedLengthRecent = noDuplicatesRecent.slice(0, MAX_RECENT_SEARCHES - 1);
+                return [value, ...cappedLengthRecent];
+            });
+        }
+        logEvent("Filters Applied - V2", {
+            type: "free-text-search",
+            value,
+            additionalProperties: {
+                wasPreviousSearch: Boolean(wasPreviousSearch),
+            },
+        });
+        (filter === null || filter === void 0 ? void 0 : filter.filterKey) && filterBarActions.setStringValue(filter.filterKey, value);
+    }, [filter === null || filter === void 0 ? void 0 : filter.filterKey, filterBarActions, logEvent, setRecentSearches]);
+    return (jsxs(Popover, { activation: defaultActivation => ({ ...defaultActivation, keyboardHandlers: false }), dataTestId: dataTestId ? `${dataTestId}-popover` : undefined, placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Search
+                //TODO: [Buss] remove height restruction once baseinput sixes matches buttons
+                , { 
+                    //TODO: [Buss] remove height restruction once baseinput sixes matches buttons
+                    className: twMerge(className, "h-7"), fieldSize: "small", onChange: e => {
+                        const parsedValue = z.string().safeParse(e.target.value);
+                        parsedValue.success ? setSearchString(parsedValue.data) : setSearchString("");
+                    }, onClear: () => setSearchString(""), onKeyDown: e => {
+                        if (e.key === "Enter") {
+                            apply({ value: searchString });
+                        }
+                    }, ref: searchElementRef, value: searchString }) }), recentSearches.length > 0 ? (jsx(PopoverContent, { children: jsx("div", { style: { minWidth: geometry.width }, children: jsxs(MenuList, { className: "overflow-hidden", children: [jsx(FilterBody, { className: "max-w-none p-1", limitSize: true, children: jsx("ul", { className: "grid h-full gap-0.5", children: recentSearches.map((option, index) => (jsx(MenuItem, { className: "max-h-fit overflow-hidden", id: "free-text-search-filter-inline", label: option, onClick: () => {
+                                            apply({ value: option, wasPreviousSearch: true });
+                                            setRecentSearches(prev => {
+                                                const noDuplicatesRecent = prev.filter(r => r !== option);
+                                                const cappedLengthRecent = noDuplicatesRecent.slice(0, MAX_RECENT_SEARCHES - 1);
+                                                return [option, ...cappedLengthRecent];
+                                            });
+                                            setSearchString(option);
+                                        }, selected: option === filterValue, size: "small", suffix: jsx(Tooltip, { label: t("filters.shared.clear"), children: jsx(IconButton, { circular: true, icon: jsx(Icon, { name: "Trash", size: "small" }), onClick: e => {
+                                                    e.stopPropagation();
+                                                    setRecentSearches(prev => prev.filter(r => r !== option));
+                                                }, size: "small", variant: "ghost-neutral" }) }) }, `${option}-${index}`))) }) }), jsxs("div", { className: "flex items-baseline justify-between gap-x-2 border-t-2 border-slate-300 px-2 py-0.5", children: [jsx(Text, { className: "py-0.5", size: "small", subtle: true, children: t("filters.shared.recentSearches") }), recentSearches.length > 1 ? (jsx(Button, { onClick: () => setRecentSearches([]), size: "small", variant: "ghost", children: t("filters.shared.clearAll") })) : null] })] }) }) })) : null] }));
+};
+
+/**
+ * StarredFiltersMenu is a React component that displays a menu of starred filters within a filter bar.
+ *
+ * @returns {JSX.Element} - Returns the StarredFiltersMenu component.
+ */
+const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starredFilterKeys, hiddenFilters = [], className, dataTestId, }) => {
+    const [t] = useTranslation();
+    const { logEvent } = useAnalytics(FilterEvents);
+    const hideInStarredMenu = useMemo(() => {
+        return objectValues(filterBarDefinition)
+            .map(filter => {
+            const showInStarredMenu = filter.showInStarredMenu ? filter.showInStarredMenu() : true;
+            const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
+            return !showInStarredMenu || !showInFilterBar ? filter.filterKey : null;
+        })
+            .filter(truthy);
+    }, [filterBarDefinition]);
+    const { filtersGrouped } = useStarredGroupFilters(objectValues(filterBarDefinition), [
+        ...hideInStarredMenu,
+        ...hiddenFilters,
+    ]);
+    return (jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(IconButton, { className: className, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "starred-filters-menu", icon: jsx(Icon, { name: "Star", size: "small" }), size: "small", title: t("filtersBar.starredFiltersTitle"), variant: "secondary" }) }), jsx(PopoverContent, { children: jsx(MenuList, { className: "overflow-hidden", dataTestId: "starred-filters-menu-popover", children: jsx("div", { className: "max-h-[55vh] w-72 overflow-y-auto", children: filtersGrouped.map((group, idx) => {
+                            const isLast = idx === filtersGrouped.length - 1;
+                            return (jsxs("div", { className: "mb-2", children: [jsx("div", { className: "mb-1 mt-2 flex px-2", children: jsx(Text, { dataTestId: "starred-filters-group-title", size: "small", subtle: true, uppercase: true, weight: "bold", children: group.key }) }), group.filters.map(filter => {
+                                        return (jsxs("div", { className: "flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-0 transition hover:bg-neutral-50", "data-testid": `${filter.filterKey}-star-filter`, onClick: () => {
+                                                updateStarredFilters(filter.filterKey);
+                                                logEvent("Starring Filter - Toggled", {
+                                                    type: filter.filterKey,
+                                                });
+                                            }, children: [jsx(Text, { weight: "thick", children: filter.title }), jsx(StarButton, { onClick: e => {
+                                                        e.preventDefault();
+                                                        e.stopPropagation();
+                                                        updateStarredFilters(filter.filterKey);
+                                                        logEvent("Starring Filter - Toggled", {
+                                                            type: filter.filterKey,
+                                                        });
+                                                    }, starred: starredFilterKeys.includes(filter.filterKey) })] }, filter.filterKey));
+                                    }), !isLast && jsx("div", { className: "mt-2 h-[1px] w-full bg-neutral-300" })] }, group.key));
+                        }) }) }) })] }));
+};
+
+/**
+ * StarredFilters is a React component that displays a list of starred filters based on the provided filter bar configuration.
+ *
+ * @template TFilterBarDefinition - The type representing the filter bar definition.
+ * @returns {JSX.Element} - Returns the StarredFilters component.
+ */
+const StarredFilters = ({ filterBarDefinition, filterBarConfig, disableCollapse, hiddenFilters = [], }) => {
+    const [t] = useTranslation();
+    const { isLg } = useViewportSize();
+    return (jsxs("div", { className: cvaFiltersAndSearchContainer({ collapsed: !(isLg || disableCollapse) }), children: [isLg || disableCollapse ? (jsx(FilterSelection, { filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters })) : (jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx("div", { children: jsxs(Tooltip, { label: jsx(FilterButtonTooltipLabel, { filterBarConfig: filterBarConfig }), children: [jsx(Button, { className: "@xs:flex hidden", prefix: jsx(Icon, { color: filterBarConfig.appliedFilters.length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", variant: "secondary", children: t("filtersBar.filtersHeading") }), jsx(IconButton, { className: "@xs:hidden", icon: jsx(Icon, { color: filterBarConfig.appliedFilters.length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", variant: "secondary" })] }) }) }), jsx(PopoverContent, { cellPadding: 100, children: jsx(Card, { children: jsx(CardBody, { children: jsx(FilterSelection, { filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters }) }) }) })] })), filterBarDefinition.search ? (jsx("div", { className: "flex w-full", children: jsx(SearchFilterInline, { className: "w-full max-w-80", filter: filterBarDefinition.search, filterBarActions: filterBarConfig, filterState: { values: filterBarConfig.values, setters: filterBarConfig.setters } }, "filter-search") })) : null] }));
+};
+const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], className, }) => {
+    const hideInFilterBar = useMemo(() => {
+        return objectValues(filterBarDefinition)
+            .map(filter => {
+            const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
+            return !showInFilterBar ? filter.filterKey : null;
+        })
+            .filter(truthy);
+    }, [filterBarDefinition]);
+    const { filtersGrouped } = useStarredGroupFilters(objectValues(filterBarDefinition), [
+        ...hideInFilterBar,
+        ...hiddenFilters,
+    ]);
+    return (jsxs("div", { className: twMerge([className, "flex-wrap", "items-center", "gap-3", "flex"]), "data-testid": "starred-filters", children: [jsx(StarredFiltersMenu, { filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, starredFilterKeys: filterBarConfig.starredFilterKeys, updateStarredFilters: filterBarConfig.updateStarredFilters }), filterBarConfig.starredFilterKeys.length > 0 ? jsx("div", { className: "h-4 w-[1px] bg-slate-300" }) : null, filtersGrouped.map(group => group.filters
+                .filter(filter => !hiddenFilters.includes(filter.filterKey))
+                .map(filter => {
+                const showMenuAnyway = filterBarConfig.filterHasChanged(filter.filterKey) &&
+                    filter.showInStarredMenu &&
+                    !filter.showInStarredMenu();
+                if (filter.filterKey !== "search" &&
+                    (filterBarConfig.starredFilterKeys.includes(filter.filterKey) ||
+                        showMenuAnyway)) {
+                    return (jsx(Fragment$1, { children: jsx(Filter, { filter: filter, filterBarActions: filterBarConfig, filterState: { values: filterBarConfig.values, setters: filterBarConfig.setters } }, `filter-${filter.filterKey}`) }, filter.filterKey));
+                }
+                return null;
+            })), jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilters.length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })] }));
+};
+const cvaFiltersAndSearchContainer = cvaMerge(["grid", "gap-2", "w-full"], {
+    variants: {
+        collapsed: {
+            true: ["grid-cols-min-fr"],
+            false: ["grid-cols-[minmax(0,1fr)_300px]"],
+        },
+    },
+    defaultVariants: {
+        collapsed: false,
+    },
+});
+const FilterButtonTooltipLabel = ({ filterBarConfig, }) => {
+    const [t] = useTranslation();
+    switch (filterBarConfig.appliedFilters.length) {
+        case 0:
+            return t("filtersBar.filtersHeading");
+        case 1:
+            return filterBarConfig.appliedFilters[0]
+                ? t("filtersBar.appliedFiltersTooltip.singular", {
+                    filterName: filterBarConfig.getFilterTitle(filterBarConfig.appliedFilters[0]),
+                })
+                : null; // should never happen though
+        default:
+            return (jsxs(Fragment, { children: [t("filtersBar.appliedFiltersTooltip.plural", { count: filterBarConfig.appliedFilters.length }), jsx("ul", { className: "list-inside", children: filterBarConfig.appliedFilters.map((appliedFilterKey, index) => (jsx("li", { className: "list-disc", children: filterBarConfig.getFilterTitle(appliedFilterKey) }, index))) })] }));
+    }
+};
+
+/**
+ * The FilterBar component serves as a wrapper for managing filters.
+ */
+const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, disableCollapse = false, }) => {
+    return (jsx("div", { className: twMerge("flex", className), "data-testid": `${filterBarConfig.name}-filterbar`, children: jsx(StarredFilters, { disableCollapse: disableCollapse, filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters }) }));
+};
+
+// Can't import jest.fn so must define a function that does nothing but mimics the jest.fn
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const doNothing = (args) => { };
+const mockFilterBar = {
+    filterBarConfig: {
+        isFilterIncludedByKey: doNothing,
+        appliedFilters: [],
+        arrayIncludesValue: doNothing,
+        getFilterTitle: doNothing,
+        getFilterBarName: doNothing,
+        initialState: { customerType: [] },
+        name: "test",
+        objectArrayIncludesValue: doNothing,
+        resetFiltersToInitialState: doNothing,
+        resetIndividualFilterToInitialState: doNothing,
+        updateStarredFilters: doNothing,
+        setArrayObjectValue: doNothing,
+        setArrayValue: doNothing,
+        setBooleanValue: doNothing,
+        setBoundingBox: doNothing,
+        setDateRange: doNothing,
+        setMinMaxValue: doNothing,
+        setNumberValue: doNothing,
+        setStringValue: doNothing,
+        toggleArrayObjectValue: doNothing,
+        toggleArrayValue: doNothing,
+        values: { customerType: [] },
+        filterHasChanged: doNothing,
+        starredFilterKeys: [],
+        getValuesByKey: doNothing,
+        setters: {
+            setCriticality: doNothing,
+            setServicePlan: doNothing,
+        },
+    },
+    filterBarDefinition: {},
+};
+
 /**
  * A helper function that returns a default value based on the filter type.
  *
@@ -1040,9 +1180,13 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
     }, [filterBarConfig, name]);
     const filterMapGetter = useMemo(() => {
         return {
-            getFilterName: () => {
+            getFilterBarName: () => {
                 return filterBarConfig.name;
             },
+            getFilterTitle(key) {
+                var _a, _b;
+                return (_b = (_a = filterBarDefinition[key]) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : key;
+            },
             arrayIncludesValue(key, value) {
                 const filter = filterBarConfig.values[key];
                 return (filter === null || filter === void 0 ? void 0 : filter.includes(value)) || false;
@@ -1054,15 +1198,18 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
                 const values = filterBarConfig.values[key];
                 return Boolean(values);
             },
-            get filtersHaveBeenApplied() {
+            get appliedFilters() {
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                 const initialStateValues = filterBarConfig.initialState || {};
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                 const currentFilters = filterBarConfig.values || {};
                 // parse and stringify to remove empty references before comparing
+                // eslint-disable-next-line local-rules/no-typescript-assertion
                 const currentValuesWithoutEmptyRefs = JSON.parse(JSON.stringify(currentFilters));
+                // eslint-disable-next-line local-rules/no-typescript-assertion
                 const initialStateValuesWithoutEmptyRefs = JSON.parse(JSON.stringify(initialStateValues));
-                return !dequal(currentValuesWithoutEmptyRefs, initialStateValuesWithoutEmptyRefs);
+                return getKeysOfUnequalProperties(currentValuesWithoutEmptyRefs, initialStateValuesWithoutEmptyRefs).map(key => key.toString() // TODO: FilterName type should be PropertyKey instead of string to avoid this .toString() bs but out-of-scope for this round of improvements
+                );
             },
             filterHasChanged(key) {
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -1079,7 +1226,7 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
                 return (filter === null || filter === void 0 ? void 0 : filter.find(f => f.value === value)) !== undefined || false;
             },
         };
-    }, [filterBarConfig.initialState, filterBarConfig.name, filterBarConfig.values]);
+    }, [filterBarConfig.initialState, filterBarConfig.name, filterBarConfig.values, filterBarDefinition]);
     const filterMapActions = useMemo(() => {
         // Reset an individual filter to its initial state
         const resetIndividualFilterToInitialState = (key) => {
@@ -1292,6 +1439,14 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
         };
     }, [filterBarConfig, filterMapActions, filterMapGetter, filterBarDefinition]);
 };
+const getKeysOfUnequalProperties = (obj1, obj2) => {
+    return reduce(obj1, (result, value, key) => {
+        if (!isEqual(value, obj2[key])) {
+            result.push(key);
+        }
+        return result;
+    }, []);
+};
 
 /**
  * Merges additional filters into an existing filter bar definition.
@@ -1314,4 +1469,4 @@ const mergeFilters = (filterBarDefinition, extraFilters) => {
  */
 setupLibraryTranslations();
 
-export { DefaultCheckboxFilter, DefaultDateRangeFilter, DefaultMinMaxFilter, DefaultRadioFilter, DynamicFilterList, FilterBar, FilterEvents, FilterHeader, FilterResults, StarredFilters, isArrayFilterValue, isBooleanValue, isBoundingBox, isDateRangeValue, isMinMaxFilterValue, isStringArrayFilterValue, isValueNameFilterValue, mergeFilters, toggleFilterValue, useFilterBar, validateFilter };
+export { DefaultCheckboxFilter, DefaultDateRangeFilter, DefaultMinMaxFilter, DefaultRadioFilter, DynamicFilterList, FilterBar, FilterEvents, FilterHeader, FilterResults, StarredFilters, isArrayFilterValue, isBooleanValue, isBoundingBox, isDateRangeValue, isMinMaxFilterValue, isStringArrayFilterValue, isValueNameFilterValue, mergeFilters, mockFilterBar, toggleFilterValue, useFilterBar, validateFilter };