@trackunit/filters-filter-bar 1.3.151 → 1.3.154

package/index.esm.js

@@ -1,16 +1,16 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { VirtualizedList, Text, Button, Popover, PopoverTrigger, PopoverContent, MenuList, cvaInteractableItem, useViewportBreakpoints, Tooltip, Icon, IconButton, Card, CardBody, CardFooter } from '@trackunit/react-components';
+import { VirtualizedList, Text, Button, useViewportBreakpoints, Popover, PopoverTrigger, Tooltip, Icon, PopoverContent, Card, CardBody, MoreMenu, IconButton, MenuList } from '@trackunit/react-components';
 import { useAnalytics, useTextSearch, useCurrentUser } from '@trackunit/react-core-hooks';
-import { FilterBody, RadioFilterItem, CheckBoxFilterItem, FilterHeader as FilterHeader$1, FilterFooter, Filter as Filter$1 } from '@trackunit/react-filter-components';
+import { FilterBody, RadioFilterItem, CheckBoxFilterItem, FilterHeader as FilterHeader$1, FilterFooter, Filter } from '@trackunit/react-filter-components';
 import { useRef, useMemo, useState, useEffect, useCallback, Fragment as Fragment$1 } from 'react';
 import { capitalize } from 'string-ts';
 import { createEvent } from '@trackunit/react-core-contexts-api';
-import { Search, NumberField, RadioGroup, ToggleSwitchOption } from '@trackunit/react-form-components';
+import { Search, NumberField, RadioGroup } from '@trackunit/react-form-components';
 import { DayRangePicker } from '@trackunit/react-date-and-time-components';
 import { nonNullable, capitalize as capitalize$1, objectValues, truthy, objectKeys } from '@trackunit/shared-utils';
-import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { twMerge } from 'tailwind-merge';
+import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { dequal } from 'dequal';
 import isEqual from 'lodash/isEqual';
 import { geoJsonPolygonSchema, geoJsonMultiPolygonSchema } from '@trackunit/geo-json-utils';
@@ -126,7 +126,7 @@ var defaultTranslations = {
 	"filtersBar.defaultMinMaxFilters.min": "Min",
 	"filtersBar.deselectAll": "Deselect All",
 	"filtersBar.emptyResults": "No results were found for your search term.",
-	"filtersBar.filtersHeading": "Filters",
+	"filtersBar.filtersHeading": "Filter",
 	"filtersBar.groups.ASSET": "Asset",
 	"filtersBar.groups.CUSTOM_FIELDS": "Custom Fields",
 	"filtersBar.groups.CUSTOMERS": "Customers",
@@ -145,10 +145,15 @@ var defaultTranslations = {
 	"filtersBar.loading": "Loading...",
 	"filtersBar.myNetworkGroup": "My Network",
 	"filtersBar.resetFilter": "Reset",
-	"filtersBar.resetFilters": "Reset Filters",
+	"filtersBar.resetFilters": "Reset all",
+	"filtersBar.searchFiltersPlaceholder": "Search filters...",
+	"filtersBar.searchPlaceholder": "Search...",
 	"filtersBar.selectAll": "Select All",
+	"filtersBar.showAll": "Show all",
 	"filtersBar.starredFilters.title": "Filters",
 	"filtersBar.starredFiltersTitle": "Starred Filters",
+	"filtersMenu.appliedFiltersLabel.plural": "{{count}} filters applied",
+	"filtersMenu.appliedFiltersLabel.singular": "1 filter applied",
 	"fleetlist.column.activity": "Activity",
 	"fleetlist.column.assetIds": "Asset Ids",
 	"fleetlist.column.assetType": "Asset Type",
@@ -327,6 +332,7 @@ const FilterEvents = {
     "Starring Filter - Toggled": createEvent({
         description: "A filter was starred or unstarred",
     }),
+    "Showing Filters - All or Favorites": createEvent(),
 };
 
 /**
@@ -350,11 +356,11 @@ const toggleFilterValue = (value) => {
  *
  * @returns {ReactElement} - Returns the DynamicFilterList component.
  */
-const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked, count, showRequestMoreUseSearch = false, type, }) => {
+const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked, count, showRequestMoreUseSearch = false, type, className, }) => {
     const [t] = useTranslation();
     const parentRef = useRef(null);
     const updatedRowCount = useMemo(() => (showRequestMoreUseSearch ? rowCount + 1 : rowCount), [rowCount, showRequestMoreUseSearch]);
-    return (jsx(FilterBody, { 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, { className: className, 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?.(index);
                         } }, keyMapper(index))) }));
@@ -366,17 +372,26 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked
  *
  * @returns {ReactElement} - Returns the FilterHeader component.
  */
-const FilterHeader = ({ filterKey, title, searchEnabled, searchProps, filterHasChanges, resetIndividualFilterToInitialState, onResetFilter, loading = false, children, className, dataTestId, }) => {
+const FilterHeader = ({ filterKey, title, searchEnabled, searchProps, filterHasChanges, resetIndividualFilterToInitialState, onResetFilter, loading = false, className, dataTestId, hideHeader = false, children, }) => {
     const [t] = useTranslation();
     const handleResetFilter = () => {
         resetIndividualFilterToInitialState(filterKey);
         onResetFilter?.();
     };
-    return (jsxs(FilterHeader$1, { className: className, dataTestId: dataTestId ?? `${filterKey}-filter-header`, loading: loading, onReset: handleResetFilter, resetLabel: t("filtersBar.resetFilter"), showReset: filterHasChanges, 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: searchProps.placeholder ?? t("assetFilters.searchPlaceholder"), suffix: jsx(Text, { size: "small", subtle: true, children: searchProps.count }), value: searchProps.value })) : null, children] }));
+    return (jsx(FilterHeader$1, { className: className, dataTestId: dataTestId ?? `${filterKey}-filter-header`, loading: loading, onReset: handleResetFilter, resetLabel: t("filtersBar.resetFilter"), searchComponent: searchEnabled ? jsx(FilterHeaderSearchComponent, { filterKey: filterKey, searchProps: searchProps }) : undefined, showReset: filterHasChanges, title: hideHeader ? undefined : title, children: children }));
+};
+/**
+ * FilterHeaderSearchComponent renders a search input for the FilterHeader component.
+ */
+const FilterHeaderSearchComponent = ({ searchProps, filterKey, }) => {
+    const [t] = useTranslation();
+    return (jsx(Search, { autoFocus: true, className: "w-full", fieldSize: "small", id: `${filterKey}-search`, onChange: e => searchProps.onChange(e.currentTarget.value), onClear: () => {
+            searchProps.onClear?.();
+        }, onKeyDown: e => {
+            if (e.key === "Enter" && searchProps.onEnter) {
+                searchProps.onEnter(searchProps.value);
+            }
+        }, placeholder: searchProps.placeholder ?? t("filtersBar.searchPlaceholder"), suffix: jsx(Text, { size: "small", subtle: true, children: searchProps.count }), value: searchProps.value }));
 };
 
 /**
@@ -396,7 +411,7 @@ const FilterResults = ({ results, ignoreUndefined, loading, children, }) => {
 };
 const EmptyResults = ({ loading }) => {
     const [t] = useTranslation();
-    return (jsx("div", { className: "grid h-20 w-full place-content-center pl-2 pr-2", "data-testid": "empty-filter-results", children: jsx(Text, { align: "center", italicize: true, subtle: true, children: loading ? t("filtersBar.loading") : t("filtersBar.emptyResults") }) }));
+    return (jsx("div", { className: "grid h-20 w-[280px] place-content-center pl-2 pr-2", "data-testid": "empty-filter-results", children: jsx(Text, { align: "center", className: "w-full break-words", italicize: true, subtle: true, children: loading ? t("filtersBar.loading") : t("filtersBar.emptyResults") }) }));
 };
 
 /**
@@ -409,7 +424,6 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
     const { logEvent } = useAnalytics(FilterEvents);
     const [hasSelectedAll, setHasSelectedAll] = useState(false);
     const { t } = useTranslation();
-    const [selectedCount, setSelectedCount] = useState(0);
     const handleSetValue = (value) => {
         logEvent("Filters Applied - V2", {
             type: filterName ?? `${capitalize(filterDefinition.filterKey)}Filter`,
@@ -474,19 +488,18 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
     useEffect(() => {
         const values = filterBarActions.getValuesByKey(filterDefinition.filterKey);
         if (Array.isArray(values)) {
-            setSelectedCount(values.length);
-            if (values.length === 0) {
-                setHasSelectedAll(false);
+            const optionsLength = undefinedCount ? options.length - 1 : options.length;
+            if (values.length === optionsLength) {
+                setHasSelectedAll(true);
             }
             else {
-                setHasSelectedAll(true);
+                setHasSelectedAll(false);
             }
         }
         else {
-            setSelectedCount(0);
             setHasSelectedAll(true);
         }
-    }, [filterBarActions, filterDefinition.filterKey, undefinedCount]);
+    }, [filterBarActions, filterDefinition.filterKey, options.length, undefinedCount]);
     const handleSelectAll = () => {
         if (hasSelectedAll) {
             setMultipleValues([]);
@@ -504,19 +517,20 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
     return (jsxs(Fragment, { children: [jsx(FilterHeader, { ...filterDefinition, ...filterBarActions, filterHasChanges: filterBarActions.appliedFilterKeys().includes(filterDefinition.filterKey), loading: loading, searchEnabled: true, searchProps: {
                     value: customSearch?.value ?? searchText,
                     onChange: customSearch?.onChange ?? setSearchText,
+                    onClear: customSearch?.onClear ?? (() => setSearchText("")),
                     count: undefinedCount ? filteredOptions.length - 1 : filteredOptions.length,
-                } }), options.length >= 2 ? (jsxs(Button, { className: "mb-1 ml-1 mt-1", dataTestId: "selectAllButton", onClick: handleSelectAll, size: "small", variant: "ghost", children: [hasSelectedAll ? t("filtersBar.deselectAll") : t("filtersBar.selectAll"), " (", selectedCount || (undefinedCount ? options.length - 1 : options.length), ")"] })) : null, jsx(FilterResults, { ignoreUndefined: undefinedCount !== null, loading: loading, results: results, children: res => (jsx(DynamicFilterList, { checked: index => {
+                }, children: options.length >= 2 ? (jsx(Button, { className: "place-self-start", dataTestId: "selectAllButton", disabled: hasSelectedAll, onClick: handleSelectAll, size: "small", variant: "ghost", children: t("filtersBar.selectAll") })) : null }), jsx(FilterResults, { ignoreUndefined: undefinedCount !== null, loading: loading, results: results, children: res => (jsx(DynamicFilterList, { checked: index => {
                         return filterDefinition.type === "valueNameArray"
                             ? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, res[index]?.key || "")
                             : filterBarActions.arrayIncludesValue(filterDefinition.filterKey, res[index]?.key || "");
-                    }, count: index => res[index]?.count, keyMapper: index => res[index]?.key || "", labelMapper: index => res[index]?.label || "", onChange: index => {
+                    }, className: "mb-1", count: index => res[index]?.count, keyMapper: index => res[index]?.key || "", labelMapper: index => res[index]?.label || "", onChange: index => {
                         const result = res[index];
                         if (result) {
                             handleSetValue(result);
                         }
                     }, rowCount: undefinedCount ? res.length - 1 : res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, type: "CheckBox" })) }), showUndefinedOptionWithCountAtBottom && undefinedCount ? (jsx("div", { className: "m-1", children: jsx(CheckBoxFilterItem, { checked: filterDefinition.type === "valueNameArray"
                         ? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, results[undefinedCount.index]?.key || "")
-                        : filterBarActions.arrayIncludesValue(filterDefinition.filterKey, results[undefinedCount.index]?.key || ""), className: "rounded-none border-t-2", dataTestId: "dynamic-filter-check-box-undefined", itemCount: undefinedCount.count, label: results[undefinedCount.index]?.label, name: "dynamic-filter-check-box-undefined", onChange: () => {
+                        : filterBarActions.arrayIncludesValue(filterDefinition.filterKey, results[undefinedCount.index]?.key || ""), dataTestId: "dynamic-filter-check-box-undefined", itemCount: undefinedCount.count, label: results[undefinedCount.index]?.label, name: "dynamic-filter-check-box-undefined", onChange: () => {
                         const result = results[undefinedCount.index];
                         if (result) {
                             handleSetValue(result);
@@ -621,10 +635,282 @@ const DefaultRadioFilter = ({ filterDefinition, filterBarActions, options, loadi
     return (jsxs(Fragment, { children: [jsx(FilterHeader, { ...filterBarActions, ...filterDefinition, filterHasChanges: filterBarActions.appliedFilterKeys().includes(filterDefinition.filterKey), loading: loading, searchEnabled: true, searchProps: {
                     value: customSearch?.value ?? searchText,
                     onChange: customSearch?.onChange ?? setSearchText,
+                    onClear: customSearch?.onClear ?? (() => 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?.key || "", children: jsx(DynamicFilterList, { checked: index => filterBarActions.objectIncludesValue(filterDefinition.filterKey, res[index]?.key || ""), count: index => res[index]?.count, keyMapper: index => res[index]?.key || "", labelMapper: index => res[index]?.label || "", rowCount: res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, type: "Radio" }) })) })] }));
+                    }, value: selectedRadioId?.key || "", children: jsx(DynamicFilterList, { checked: index => filterBarActions.objectIncludesValue(filterDefinition.filterKey, res[index]?.key || ""), className: "m-1 mt-0", count: index => res[index]?.count, keyMapper: index => res[index]?.key || "", labelMapper: index => res[index]?.label || "", rowCount: res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, type: "Radio" }) })) })] }));
+};
+
+/**
+ * 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 {ReactElement} - Returns the Filter component.
+ */
+const FilterComponent = ({ filter, filterBarActions, filterState, readOnly = false, visualStyle = "button", className, asIcon, size, }) => {
+    const values = filterBarActions.getValuesByKey(filter.filterKey);
+    const valuesLength = values && Array.isArray(values) ? values.length : undefined;
+    const getFilterText = () => {
+        if (!values) {
+            return undefined;
+        }
+        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) => {
+        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 === "area") {
+            filterBarActions.setArea(newValue);
+        }
+        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);
+        }
+        else if (filter.type === "boolean") {
+            filterBarActions.setBooleanValue(filter.filterKey, newValue);
+        }
+        else {
+            filterBarActions.setNumberValue(filter.filterKey, newValue);
+        }
+    };
+    const text = getFilterText();
+    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, { activeLabel: activeFilterText, activeOptionsCount: valuesLength, asIcon: asIcon, className: className, dataTestId: `${filter.filterKey}-filter-button`, isActive: filterBarActions.appliedFilterKeys().includes(filter.filterKey), popoverProps: { placement: visualStyle === "list-item" ? "right-start" : "bottom-start" }, readOnly: readOnly, size: size, title: filter.title, visualStyle: visualStyle, withStickyHeader: true, children: filter.component({
+            filterDefinition: filter,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            value: values,
+            setValue,
+            filterBarActions,
+            filterState,
+        }) }));
+};
+
+/**
+ * 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 useGroupFilters = (filterDefinitions, hiddenFilters) => {
+    const [t] = useTranslation();
+    const filtersGrouped = useMemo(() => {
+        const keys = uniqueKeysFromGroups(filterDefinitions);
+        return keys
+            .map(key => ({
+            key,
+            title: 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 useMemo(() => ({ filtersGrouped }), [filtersGrouped]);
+};
+const uniqueKeysFromGroups = (filters) => [...new Set(filters.map(filter => filter.group))];
+
+/**
+ * FiltersRenderer renders an array of Filter components from filter definitions
+ * It ignores hidden filters.
+ *
+ * Note: This component does not provide any styling or layout - use a wrapper for proper list styling.
+ *
+ * @param {object} props - The component props
+ * @param {FilterDefinition[]} props.filters - Array of filter definitions to render
+ * @param {FilterBarConfig & FilterMapActions & FilterMapGetter} props.filterBarConfig - The filter bar configuration
+ * @param {ComponentProps<typeof FilterComponent>["visualStyle"]} [props.visualStyle] - The visual style of the filters
+ * @returns {ReactElement[] | null} - Returns an array of Filter components or null
+ */
+const FiltersRenderer = ({ filters, filterBarConfig, visualStyle, }) => {
+    return filters.length === 0
+        ? null
+        : filters
+            .filter(filter => !filter.isHidden)
+            .map(filter => (jsx(FilterComponent, { filter: filter, filterBarActions: filterBarConfig, filterState: { values: filterBarConfig.values, setters: filterBarConfig.setters }, visualStyle: visualStyle }, `filter-${filter.filterKey}`)));
+};
+
+/**
+ * FiltersList is a React component that displays a list of filters within a filter bar.
+ *
+ * @returns {ReactElement} - Returns the FiltersList component.
+ */
+const GroupedFiltersList = ({ filterBarConfig, filtersGrouped, className, dataTestId = "grouped-filters-list", }) => {
+    return (jsx("div", { className: className, "data-testid": dataTestId, role: "menu", children: filtersGrouped.map((group, idx) => {
+            const isLastGroup = idx === filtersGrouped.length - 1;
+            return (jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { children: [jsx(Text, { className: "text-secondary-400 h-7 px-3 py-2", dataTestId: `${group.key}-group-title`, size: "small", uppercase: true, weight: "bold", children: group.title }), jsx("ul", { "aria-labelledby": `${group.key}-group-title`, className: "grid", "data-testid": `${group.key}-group-list`, children: jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: group.filters, visualStyle: "list-item" }) })] }), isLastGroup ? null : jsx("div", { className: "bg-secondary-200 h-[1px] w-full", role: "separator" })] }, group.key));
+        }) }));
+};
+
+/**
+ * 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 = ({ resetFiltersToInitialState, dataTestId, className, }) => {
+    const [t] = useTranslation();
+    return (jsxs(Button, { className: className, dataTestId: dataTestId ?? "reset-filters-button", onClick: () => {
+            resetFiltersToInitialState();
+        }, size: "small", variant: "ghost", children: [t("filtersBar.resetFilters"), jsx("span", { className: "sr-only", children: "Resets all applied filters" })] }));
+};
+
+/**
+ * FilterMenu is a React component that displays a list of filters in a popover menu based on the provided filter bar configuration.
+ *
+ * @template TFilterBarDefinition - The type representing the filter bar definition.
+ * @returns {ReactElement} - Returns the FilterMenu component.
+ */
+const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], compact, title, dataTestId = "filters-menu", className, }) => {
+    const [t] = useTranslation();
+    const { isSm } = useViewportBreakpoints();
+    const [showCustomFilters, setShowCustomFilters] = useState(false);
+    // TODO: Add analytics if event requirements are defined
+    // const { logEvent } = useAnalytics(FilterEvents);
+    const hideInMenu = useMemo(() => {
+        return objectValues(filterBarDefinition)
+            .map(filter => {
+            const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
+            const showInStarredMenu = filter.showInStarredMenu ? filter.showInStarredMenu() : true; // TODO: Starred menu concept should be completely removed everywhere
+            const showMenuAnywayBecauseFilterHasChanged = filterBarConfig.appliedFilterKeys().includes(filter.filterKey);
+            return (!showInFilterBar || !showInStarredMenu) && !showMenuAnywayBecauseFilterHasChanged
+                ? filter.filterKey
+                : null;
+        })
+            .filter(truthy);
+    }, [filterBarConfig, filterBarDefinition]);
+    const { filtersGrouped } = useGroupFilters(objectValues(filterBarDefinition), [...hideInMenu, ...hiddenFilters]);
+    const { appliedFilters, filtersToShow, showDirectlyFilters, hasCustomFields } = useMemo(() => {
+        const allFilters = filtersGrouped.map(group => group.filters).flat();
+        return {
+            appliedFilters: allFilters.filter(filter => filterBarConfig.appliedFilterKeys().includes(filter.filterKey)),
+            filtersToShow: allFilters.filter(filter => !filter.showDirectly),
+            showDirectlyFilters: allFilters.filter(filter => filter.showDirectly),
+            hasCustomFields: allFilters.some(filter => filter.group === "CUSTOM_FIELDS"),
+        };
+    }, [filterBarConfig, filtersGrouped]);
+    const [searchResults, searchText, setSearchText] = useTextSearch(filtersToShow, item => [item.title]);
+    const { filtersGrouped: searchResultsGrouped } = useGroupFilters(searchResults, []);
+    const { filtersGrouped: filtersToShowGrouped } = useGroupFilters(filtersToShow, []);
+    const appliedCustomFields = useMemo(() => appliedFilters.filter(filter => filter.group === "CUSTOM_FIELDS"), [appliedFilters]);
+    return (jsxs("div", { className: twMerge("flex items-center gap-2", className), "data-testid": dataTestId, children: [jsx(Popover, { onOpenStateChange: open => {
+                    if (!open) {
+                        setShowCustomFilters(false);
+                        setSearchText("");
+                    }
+                }, placement: "bottom-start", children: modalState => {
+                    return (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: jsx("div", { "data-testid": "starred-filters-menu-trigger", id: "starred-filters-menu-trigger", children: jsx(Tooltip, { disabled: !compact || modalState.isOpen, label: jsx(FilterButtonTooltipLabel, { filterBarConfig: filterBarConfig }), children: jsx(Button, { prefix: jsx(Icon, { ariaHidden: true, color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Filter", size: "small" }), size: "small", suffix: compact && filterBarConfig.appliedFilterKeys().length > 0 && isSm ? (jsxs("div", { children: [jsxs("span", { "aria-hidden": true, children: ["(", filterBarConfig.appliedFilterKeys().length, ")"] }), jsxs("span", { className: "sr-only", children: [filterBarConfig.appliedFilterKeys().length, " filters applied"] })] })) : undefined, variant: "secondary", children: jsx("span", { className: "hidden sm:block", children: title ?? t("filtersBar.filtersHeading") }) }) }) }) }), jsx(PopoverContent, { cellPadding: 100, children: jsxs(Card, { className: "max-h-[min(600px,_calc(100dvh-32px))] w-[300px] overflow-y-hidden", dataTestId: "starred-filters-menu-popover", children: [jsxs("div", { className: "flex flex-col gap-1 p-1", children: [jsx(Search, { autoFocus: true, dataTestId: "starred-filters-menu-search", fieldSize: "small", id: "search-filters-list", onChange: e => setSearchText(e.currentTarget.value), onClear: () => setSearchText(""), placeholder: t("filtersBar.searchFiltersPlaceholder"), value: searchText }), jsxs("div", { className: "flex h-7 items-center justify-between gap-1 px-3", children: [jsx(Text, { className: "text-secondary-400", size: "small", children: jsx(FiltersAppliedCountLabel, { filterBarConfig: filterBarConfig }) }), filterBarConfig.appliedFilterKeys().length > 0 ? (jsx(ResetFiltersButton, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] })] }), jsx(Separator, {}), jsxs(CardBody, { className: "gap-1 p-1", density: "none", disableGap: true, children: [jsx(GroupedFiltersList, { className: "flex flex-col gap-1", filterBarConfig: filterBarConfig, filtersGrouped: searchText
+                                                        ? searchResultsGrouped
+                                                        : showCustomFilters
+                                                            ? filtersToShowGrouped
+                                                            : removeCustomFields(filtersToShowGrouped) }), hasCustomFields && !showCustomFilters && !searchText ? (jsx(CustomFieldsHiddenGroup, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, onShow: () => {
+                                                        setShowCustomFilters(true);
+                                                    } })) : null] })] }) })] }));
+                } }), showDirectlyFilters.length > 0 ? (jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, !compact ? (jsxs(Fragment, { children: [appliedFilters.filter(filter => !filter.showDirectly).length > 0 ? (jsx("div", { className: "h-4 w-[1px] bg-slate-300", "data-testid": "applied-filters-buttons" })) : null, jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: appliedFilters }), filterBarConfig.appliedFilterKeys().length > 0 ? (jsx(ResetFiltersButton, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] })) : null] }));
+};
+const Separator = () => jsx("hr", { className: "border-secondary-200", role: "separator" });
+const FilterButtonTooltipLabel = ({ filterBarConfig, }) => {
+    const [t] = useTranslation();
+    switch (filterBarConfig.appliedFilterKeys().length) {
+        case 0:
+            return t("filtersBar.appliedFiltersTooltip.none");
+        case 1:
+            return filterBarConfig.appliedFilterKeys()[0]
+                ? t("filtersBar.appliedFiltersTooltip.singular", {
+                    filterName: filterBarConfig.getFilterTitle(filterBarConfig.appliedFilterKeys()[0]),
+                })
+                : null; // should never happen though
+        default:
+            return (jsxs(Fragment, { children: [t("filtersBar.appliedFiltersTooltip.plural", { count: filterBarConfig.appliedFilterKeys().length }), jsx("ul", { className: "list-inside", children: filterBarConfig.appliedFilterKeys().map((appliedFilterKey, index) => (jsx("li", { className: "list-disc", children: filterBarConfig.getFilterTitle(appliedFilterKey) }, index))) })] }));
+    }
+};
+const FiltersAppliedCountLabel = ({ filterBarConfig, }) => {
+    const [t] = useTranslation();
+    switch (filterBarConfig.appliedFilterKeys().length) {
+        case 0:
+            return t("filtersBar.appliedFiltersTooltip.none");
+        case 1:
+            return filterBarConfig.appliedFilterKeys()[0] ? t("filtersMenu.appliedFiltersLabel.singular") : null;
+        default:
+            return jsx(Fragment, { children: t("filtersMenu.appliedFiltersLabel.plural", { count: filterBarConfig.appliedFilterKeys().length }) });
+    }
+};
+const CustomFieldsHiddenGroup = ({ appliedCustomFields, filterBarConfig, onShow, }) => {
+    const [t] = useTranslation();
+    return (jsxs(Fragment, { children: [jsx(Separator, {}), jsxs("div", { children: [jsx(Button, { "aria-controls": "filters-list", className: "text-primary-600 w-full justify-between px-3", onClick: onShow, prefix: jsx(Text, { className: "text-secondary-400", size: "small", uppercase: true, weight: "bold", children: t("filtersBar.groups.CUSTOM_FIELDS") }), size: "small", variant: "ghost-neutral", children: t("filtersBar.showAll") }), appliedCustomFields.length > 0 ? (jsx("ul", { "aria-label": "Visible custom fields", "data-testid": "applied-custom-fields-list", children: jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: appliedCustomFields, visualStyle: "list-item" }) })) : null] })] }));
+};
+const removeCustomFields = (filtersGrouped) => filtersGrouped.filter(group => group.key !== "CUSTOM_FIELDS");
+
+/**
+ * Filter is a React component that renders a filter element based on the provided filter definition and state.
+ *
+ * @returns {ReactElement} - Returns the Filter component.
+ */
+const FilterTableComponent = ({ filterKey, filterBarDefinition, filterBarConfig, }) => {
+    const ensureFilterKey = useCallback((key) => {
+        // eslint-disable-next-line local-rules/no-typescript-assertion
+        return key;
+    }, []);
+    const filters = useMemo(() => {
+        if (Array.isArray(filterKey)) {
+            return filterKey.map(key => filterBarDefinition[ensureFilterKey(key)]).filter(Boolean);
+        }
+        return [];
+    }, [filterKey, filterBarDefinition, ensureFilterKey]);
+    if (Array.isArray(filterKey)) {
+        return (jsx(MoreMenu, { customButton: jsx(IconButton, { icon: jsx(Icon, { color: filterKey.some(key => filterBarConfig.appliedFilterKeys().includes(key)) ? "primary" : undefined, name: "Filter", size: "small" }), onClick: event => event.stopPropagation(), size: "extraSmall", variant: "ghost-neutral" }), children: () => (jsx(MenuList, { children: filters.map((value, index) => value && (jsx(FilterComponent, { filter: value, filterBarActions: filterBarConfig, filterState: filterBarConfig, visualStyle: "list-item" }, index))) })) }));
+    }
+    const filter = filterBarDefinition[ensureFilterKey(filterKey)];
+    if (!filter) {
+        return null;
+    }
+    return (jsx("div", { onClick: event => event.stopPropagation(), children: jsx(FilterComponent, { asIcon: "Filter", filter: filter, filterBarActions: filterBarConfig, filterState: filterBarConfig, size: "extraSmall" }) }));
 };
 
 /**
@@ -852,263 +1138,11 @@ const HierarchicalCheckboxFilter = ({ filterDefinition, filterBarActions, option
     return (jsxs(Fragment, { children: [jsx(FilterHeader, { ...filterDefinition, ...filterBarActions, filterHasChanges: filterBarActions.appliedFilterKeys().includes(filterDefinition.filterKey), loading: loading, ...searchHeaderProps }), jsx("div", { className: "max-h-60 overflow-y-auto", children: jsx(FilterResults, { loading: loading, results: filteredOptions, children: results => (jsx(Fragment, { children: results.map(option => (jsx(RenderHierarchicalOption, { cascadeSelection: cascadeSelection, filterBarActions: filterBarActions, filterDefinition: filterDefinition, logEvent: logEvent, option: option, optionsMap: optionsMap, selectedValues: selectedValues, setValue: setValue }, option.key))) })) }) })] }));
 };
 
-/**
- * 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,
-            title: 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 useMemo(() => ({ filtersGrouped }), [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 {ReactElement} - Returns the Filter component.
- */
-const Filter = ({ filter, filterBarActions, filterState, }) => {
-    const values = filterBarActions.getValuesByKey(filter.filterKey);
-    const getFilterText = () => {
-        if (!values) {
-            return undefined;
-        }
-        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) => {
-        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 === "area") {
-            filterBarActions.setArea(newValue);
-        }
-        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);
-        }
-        else if (filter.type === "boolean") {
-            filterBarActions.setBooleanValue(filter.filterKey, newValue);
-        }
-        else {
-            filterBarActions.setNumberValue(filter.filterKey, newValue);
-        }
-    };
-    const text = getFilterText();
-    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: Boolean(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,
-            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, dataTestId, className, }) => {
-    const [t] = useTranslation();
-    if (!filtersHaveBeenApplied) {
-        return null;
-    }
-    return (jsx(Button, { className: className, dataTestId: dataTestId ?? "reset-filters-button", onClick: () => {
-            resetFiltersToInitialState();
-        }, size: "small", variant: "ghost-neutral", children: t("filtersBar.resetFilters") }));
-};
-
-/**
- * StarredFiltersMenu is a React component that displays a menu of starred filters within a filter bar.
- *
- * @returns {ReactElement} - Returns the StarredFiltersMenu component.
- */
-const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starredFilterKeys, hiddenFilters = [], className, dataTestId, }) => {
-    const [t] = useTranslation();
-    const { logEvent } = useAnalytics(FilterEvents);
-    const numberOfShowDirectlyFilters = objectValues(filterBarDefinition).filter(filter => filter.showDirectly).length; //TODO: this is a bit of a silly workaround to get the count to match without changing any other logic as I am pressed for time...but it works for now.🙈
-    const hideInStarredMenu = useMemo(() => {
-        return objectValues(filterBarDefinition)
-            .map(filter => {
-            const showInStarredMenu = filter.showInStarredMenu ? filter.showInStarredMenu() : true;
-            const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
-            return filter.showDirectly || !showInStarredMenu || !showInFilterBar ? filter.filterKey : null;
-        })
-            .filter(truthy);
-    }, [filterBarDefinition]);
-    const { filtersGrouped } = useStarredGroupFilters(objectValues(filterBarDefinition), [
-        ...hideInStarredMenu,
-        ...hiddenFilters,
-    ]);
-    const hiddenFiltersCount = useMemo(() => {
-        const nonHiddenStarredFilterKeys = starredFilterKeys.filter(key => !hideInStarredMenu.includes(key));
-        return (filtersGrouped.map(group => group.filters).flat().length +
-            hiddenFilters.length -
-            nonHiddenStarredFilterKeys.length +
-            numberOfShowDirectlyFilters);
-    }, [filtersGrouped, hiddenFilters, starredFilterKeys, hideInStarredMenu, numberOfShowDirectlyFilters]);
-    const getHiddenFiltersLabel = () => {
-        switch (hiddenFiltersCount) {
-            case 0:
-                return t("filtersBar.hiddenFilters.toggleFilters");
-            case 1:
-                return t("filtersBar.hiddenFilters.singular");
-            default:
-                return t("filtersBar.hiddenFilters.plural", { count: hiddenFiltersCount });
-        }
-    };
-    return (jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { className: className, dataTestId: dataTestId ?? "starred-filters-menu", size: "small", variant: "ghost", children: getHiddenFiltersLabel() }) }), jsx(PopoverContent, { children: jsx(MenuList, { className: "overflow-hidden", dataTestId: "starred-filters-menu-popover", children: jsx("div", { className: "max-h-[55dvh] w-72 overflow-y-auto px-3 pb-2", children: filtersGrouped.map((group, idx) => {
-                            const isLast = idx === filtersGrouped.length - 1;
-                            return (jsxs("div", { children: [jsx(Text, { className: "pb-1 pt-2", dataTestId: "starred-filters-group-title", size: "small", subtle: true, uppercase: true, children: group.title }), jsx("div", { className: "grid", children: group.filters.map(filter => {
-                                            return !filter.isHidden ? (jsx(ToggleSwitchOption, { className: cvaInteractableItem({
-                                                    selected: false,
-                                                    cursor: "pointer",
-                                                    focused: "auto",
-                                                    className: "py-1 pl-2 pr-3",
-                                                }), "data-testid": `${filter.filterKey}-star-filter`, id: `visible-filters-toggle-${filter.filterKey}`, label: filter.title, onChange: toggled => {
-                                                    updateStarredFilters(filter.filterKey);
-                                                    logEvent("Starring Filter - Toggled", {
-                                                        type: filter.filterKey,
-                                                        value: toggled.toString(),
-                                                    });
-                                                }, showInputFocus: false, size: "medium", toggled: starredFilterKeys.includes(filter.filterKey) }, filter.filterKey)) : null;
-                                        }) }), !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 {ReactElement} - Returns the StarredFilters component.
- */
-const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], compact, dataTestId, className, title, }) => {
-    const [t] = useTranslation();
-    const { isLg } = useViewportBreakpoints();
-    const isCompactMode = useMemo(() => compact ?? !isLg, [compact, isLg]);
-    const hideInMenu = useMemo(() => {
-        return objectValues(filterBarDefinition)
-            .map(filter => {
-            const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
-            const showInStarredMenu = filter.showInStarredMenu ? filter.showInStarredMenu() : true;
-            const showMenuAnywayBecauseFilterHasChanged = filterBarConfig.appliedFilterKeys().includes(filter.filterKey);
-            return (!showInFilterBar || !showInStarredMenu) && !showMenuAnywayBecauseFilterHasChanged
-                ? filter.filterKey
-                : null;
-        })
-            .filter(truthy);
-    }, [filterBarConfig, filterBarDefinition]);
-    const { filtersGrouped } = useStarredGroupFilters(objectValues(filterBarDefinition), [
-        ...hideInMenu,
-        ...hiddenFilters,
-    ]);
-    const { appliedFilters, filtersToShow, showDirectlyFilters } = useMemo(() => {
-        const allFilters = filtersGrouped.map(group => group.filters).flat();
-        const starredFilters = allFilters.filter(filter => {
-            return (filterBarConfig.starredFilterKeys.includes(filter.filterKey) &&
-                !filter.showDirectly);
-        });
-        return {
-            appliedFilters: starredFilters.filter(filter => filterBarConfig.appliedFilterKeys().includes(filter.filterKey)),
-            filtersToShow: starredFilters.filter(filter => !filter.showDirectly),
-            showDirectlyFilters: allFilters.filter(filter => filter.showDirectly),
-        };
-    }, [filterBarConfig, filtersGrouped]);
-    return (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: title ? title : 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 sm:w-[350px]", 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
-        ? null
-        : filters.map(filter => {
-            return (jsx(Filter, { filter: filter, filterBarActions: filterBarConfig, filterState: { values: filterBarConfig.values, setters: filterBarConfig.setters } }, `filter-${filter.filterKey}`));
-        });
-};
-const FilterButtonTooltipLabel = ({ filterBarConfig, }) => {
-    const [t] = useTranslation();
-    switch (filterBarConfig.appliedFilterKeys().length) {
-        case 0:
-            return t("filtersBar.appliedFiltersTooltip.none");
-        case 1:
-            return filterBarConfig.appliedFilterKeys()[0]
-                ? t("filtersBar.appliedFiltersTooltip.singular", {
-                    filterName: filterBarConfig.getFilterTitle(filterBarConfig.appliedFilterKeys()[0]),
-                })
-                : null; // should never happen though
-        default:
-            return (jsxs(Fragment, { children: [t("filtersBar.appliedFiltersTooltip.plural", { count: filterBarConfig.appliedFilterKeys().length }), jsx("ul", { className: "list-inside", children: filterBarConfig.appliedFilterKeys().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, compact, title, }) => {
-    return (jsx(StarredFilters, { className: className, compact: compact, dataTestId: `${filterBarConfig.name}-filterbar`, filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, title: title }));
+const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact = true, title, }) => {
+    return (jsx(FiltersMenu, { className: className, compact: compact, dataTestId: `${filterBarConfig.name}-filterbar`, filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, title: title }));
 };
 
 // Can't import jest.fn so must define a function that does nothing but mimics the jest.fn
@@ -1924,4 +1958,4 @@ const mergeFilters = (filterBarDefinition, extraFilters) => {
  */
 setupLibraryTranslations();
 
-export { DefaultCheckboxFilter, DefaultDateRangeFilter, DefaultMinMaxFilter, DefaultRadioFilter, DynamicFilterList, FilterBar, FilterEvents, FilterHeader, FilterResults, HierarchicalCheckboxFilter, StarredFilters, areaFilterGeoJsonGeometrySchema, isAreaFilterValue, isArrayFilterValue, isBooleanValue, isDateRangeValue, isMinMaxFilterValue, isStringArrayFilterValue, isValueName, isValueNameArray, mergeFilters, mockFilterBar, toggleFilterValue, useFilterBar, useFilterBarAsync, useSearchParamAsFilter, validateFilter };
+export { DefaultCheckboxFilter, DefaultDateRangeFilter, DefaultMinMaxFilter, DefaultRadioFilter, DynamicFilterList, FilterBar, FilterComponent, FilterEvents, FilterHeader, FilterResults, FilterTableComponent, FiltersMenu, FiltersRenderer, GroupedFiltersList, HierarchicalCheckboxFilter, ResetFiltersButton, areaFilterGeoJsonGeometrySchema, isAreaFilterValue, isArrayFilterValue, isBooleanValue, isDateRangeValue, isMinMaxFilterValue, isStringArrayFilterValue, isValueName, isValueNameArray, mergeFilters, mockFilterBar, toggleFilterValue, useFilterBar, useFilterBarAsync, useSearchParamAsFilter, validateFilter };