@trackunit/filters-filter-bar 1.3.151 → 1.3.154

package/index.cjs.js

@@ -11,8 +11,8 @@ var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
 var reactFormComponents = require('@trackunit/react-form-components');
 var reactDateAndTimeComponents = require('@trackunit/react-date-and-time-components');
 var sharedUtils = require('@trackunit/shared-utils');
-var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var tailwindMerge = require('tailwind-merge');
+var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var dequal = require('dequal');
 var isEqual = require('lodash/isEqual');
 var geoJsonUtils = require('@trackunit/geo-json-utils');
@@ -128,7 +128,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",
@@ -147,10 +147,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",
@@ -329,6 +334,7 @@ const FilterEvents = {
     "Starring Filter - Toggled": reactCoreContextsApi.createEvent({
         description: "A filter was starred or unstarred",
     }),
+    "Showing Filters - All or Favorites": reactCoreContextsApi.createEvent(),
 };
 
 /**
@@ -352,11 +358,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 = react.useRef(null);
     const updatedRowCount = react.useMemo(() => (showRequestMoreUseSearch ? rowCount + 1 : rowCount), [rowCount, showRequestMoreUseSearch]);
-    return (jsxRuntime.jsx(reactFilterComponents.FilterBody, { limitSize: true, ref: parentRef, children: jsxRuntime.jsx(reactComponents.VirtualizedList, { count: updatedRowCount, rowHeight: 40, separator: "space", children: index => {
+    return (jsxRuntime.jsx(reactFilterComponents.FilterBody, { limitSize: true, ref: parentRef, children: jsxRuntime.jsx(reactComponents.VirtualizedList, { className: className, count: updatedRowCount, rowHeight: 40, separator: "space", children: index => {
                 return (jsxRuntime.jsx("div", { children: showRequestMoreUseSearch && index === rowCount ? (jsxRuntime.jsxs("div", { className: "p-3 pt-2", children: [jsxRuntime.jsx("span", { className: "text-sm text-gray-600", children: t("filter.more.options.if.you.search.title", { count: rowCount }) }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx("span", { className: "text-sm italic text-gray-400", children: t("filter.more.options.if.you.search.description") })] })) : type === "Radio" ? (jsxRuntime.jsx(reactFilterComponents.RadioFilterItem, { dataTestId: "dynamic-filter-radio-" + keyMapper(index), itemCount: count(index), label: labelMapper(index), selected: checked(index), value: keyMapper(index) }, keyMapper(index))) : (jsxRuntime.jsx(reactFilterComponents.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))) }));
@@ -368,17 +374,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 (jsxRuntime.jsxs(reactFilterComponents.FilterHeader, { className: className, dataTestId: dataTestId ?? `${filterKey}-filter-header`, loading: loading, onReset: handleResetFilter, resetLabel: t("filtersBar.resetFilter"), showReset: filterHasChanges, title: title, children: [searchEnabled ? (jsxRuntime.jsx(reactFormComponents.Search, { autoFocus: true, fieldSize: "small", id: `${filterKey}-search`, onChange: e => searchProps.onChange(e.currentTarget.value), onKeyDown: e => {
-                    if (e.key === "Enter" && searchProps.onEnter) {
-                        searchProps.onEnter(searchProps.value);
-                    }
-                }, placeholder: searchProps.placeholder ?? t("assetFilters.searchPlaceholder"), suffix: jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: searchProps.count }), value: searchProps.value })) : null, children] }));
+    return (jsxRuntime.jsx(reactFilterComponents.FilterHeader, { className: className, dataTestId: dataTestId ?? `${filterKey}-filter-header`, loading: loading, onReset: handleResetFilter, resetLabel: t("filtersBar.resetFilter"), searchComponent: searchEnabled ? jsxRuntime.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 (jsxRuntime.jsx(reactFormComponents.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: jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: searchProps.count }), value: searchProps.value }));
 };
 
 /**
@@ -398,7 +413,7 @@ const FilterResults = ({ results, ignoreUndefined, loading, children, }) => {
 };
 const EmptyResults = ({ loading }) => {
     const [t] = useTranslation();
-    return (jsxRuntime.jsx("div", { className: "grid h-20 w-full place-content-center pl-2 pr-2", "data-testid": "empty-filter-results", children: jsxRuntime.jsx(reactComponents.Text, { align: "center", italicize: true, subtle: true, children: loading ? t("filtersBar.loading") : t("filtersBar.emptyResults") }) }));
+    return (jsxRuntime.jsx("div", { className: "grid h-20 w-[280px] place-content-center pl-2 pr-2", "data-testid": "empty-filter-results", children: jsxRuntime.jsx(reactComponents.Text, { align: "center", className: "w-full break-words", italicize: true, subtle: true, children: loading ? t("filtersBar.loading") : t("filtersBar.emptyResults") }) }));
 };
 
 /**
@@ -411,7 +426,6 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
     const { logEvent } = reactCoreHooks.useAnalytics(FilterEvents);
     const [hasSelectedAll, setHasSelectedAll] = react.useState(false);
     const { t } = useTranslation();
-    const [selectedCount, setSelectedCount] = react.useState(0);
     const handleSetValue = (value) => {
         logEvent("Filters Applied - V2", {
             type: filterName ?? `${stringTs.capitalize(filterDefinition.filterKey)}Filter`,
@@ -476,19 +490,18 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
     react.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([]);
@@ -506,19 +519,20 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FilterHeader, { ...filterDefinition, ...filterBarActions, filterHasChanges: filterBarActions.appliedFilterKeys().includes(filterDefinition.filterKey), loading: loading, searchEnabled: true, searchProps: {
                     value: customSearch?.value ?? searchText,
                     onChange: customSearch?.onChange ?? setSearchText,
+                    onClear: customSearch?.onClear ?? (() => setSearchText("")),
                     count: undefinedCount ? filteredOptions.length - 1 : filteredOptions.length,
-                } }), options.length >= 2 ? (jsxRuntime.jsxs(reactComponents.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, jsxRuntime.jsx(FilterResults, { ignoreUndefined: undefinedCount !== null, loading: loading, results: results, children: res => (jsxRuntime.jsx(DynamicFilterList, { checked: index => {
+                }, children: options.length >= 2 ? (jsxRuntime.jsx(reactComponents.Button, { className: "place-self-start", dataTestId: "selectAllButton", disabled: hasSelectedAll, onClick: handleSelectAll, size: "small", variant: "ghost", children: t("filtersBar.selectAll") })) : null }), jsxRuntime.jsx(FilterResults, { ignoreUndefined: undefinedCount !== null, loading: loading, results: results, children: res => (jsxRuntime.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 ? (jsxRuntime.jsx("div", { className: "m-1", children: jsxRuntime.jsx(reactFilterComponents.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);
@@ -623,10 +637,282 @@ const DefaultRadioFilter = ({ filterDefinition, filterBarActions, options, loadi
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FilterHeader, { ...filterBarActions, ...filterDefinition, filterHasChanges: filterBarActions.appliedFilterKeys().includes(filterDefinition.filterKey), loading: loading, searchEnabled: true, searchProps: {
                     value: customSearch?.value ?? searchText,
                     onChange: customSearch?.onChange ?? setSearchText,
+                    onClear: customSearch?.onClear ?? (() => setSearchText("")),
                     count: filteredOptions.length,
                 } }), jsxRuntime.jsx(FilterResults, { loading: loading, results: customSearch ? options : filteredOptions, children: res => (jsxRuntime.jsx(reactFormComponents.RadioGroup, { id: "DefaultRadioFilter", onChange: e => {
                         handleClick(e.currentTarget.value);
-                    }, value: selectedRadioId?.key || "", children: jsxRuntime.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: jsxRuntime.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 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: filter.component({
+            filterDefinition: filter,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            value: values,
+            setValue,
+            filterBarActions,
+            filterState,
+        }) })) : (jsxRuntime.jsx(reactFilterComponents.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 = react.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 react.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 => (jsxRuntime.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 (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, role: "menu", children: filtersGrouped.map((group, idx) => {
+            const isLastGroup = idx === filtersGrouped.length - 1;
+            return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.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 }), jsxRuntime.jsx("ul", { "aria-labelledby": `${group.key}-group-title`, className: "grid", "data-testid": `${group.key}-group-list`, children: jsxRuntime.jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: group.filters, visualStyle: "list-item" }) })] }), isLastGroup ? null : jsxRuntime.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 (jsxRuntime.jsxs(reactComponents.Button, { className: className, dataTestId: dataTestId ?? "reset-filters-button", onClick: () => {
+            resetFiltersToInitialState();
+        }, size: "small", variant: "ghost", children: [t("filtersBar.resetFilters"), jsxRuntime.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 } = reactComponents.useViewportBreakpoints();
+    const [showCustomFilters, setShowCustomFilters] = react.useState(false);
+    // TODO: Add analytics if event requirements are defined
+    // const { logEvent } = useAnalytics(FilterEvents);
+    const hideInMenu = react.useMemo(() => {
+        return sharedUtils.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(sharedUtils.truthy);
+    }, [filterBarConfig, filterBarDefinition]);
+    const { filtersGrouped } = useGroupFilters(sharedUtils.objectValues(filterBarDefinition), [...hideInMenu, ...hiddenFilters]);
+    const { appliedFilters, filtersToShow, showDirectlyFilters, hasCustomFields } = react.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] = reactCoreHooks.useTextSearch(filtersToShow, item => [item.title]);
+    const { filtersGrouped: searchResultsGrouped } = useGroupFilters(searchResults, []);
+    const { filtersGrouped: filtersToShowGrouped } = useGroupFilters(filtersToShow, []);
+    const appliedCustomFields = react.useMemo(() => appliedFilters.filter(filter => filter.group === "CUSTOM_FIELDS"), [appliedFilters]);
+    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex items-center gap-2", className), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Popover, { onOpenStateChange: open => {
+                    if (!open) {
+                        setShowCustomFilters(false);
+                        setSearchText("");
+                    }
+                }, placement: "bottom-start", children: modalState => {
+                    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { "data-testid": "starred-filters-menu-trigger", id: "starred-filters-menu-trigger", children: jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !compact || modalState.isOpen, label: jsxRuntime.jsx(FilterButtonTooltipLabel, { filterBarConfig: filterBarConfig }), children: jsxRuntime.jsx(reactComponents.Button, { prefix: jsxRuntime.jsx(reactComponents.Icon, { ariaHidden: true, color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Filter", size: "small" }), size: "small", suffix: compact && filterBarConfig.appliedFilterKeys().length > 0 && isSm ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("span", { "aria-hidden": true, children: ["(", filterBarConfig.appliedFilterKeys().length, ")"] }), jsxRuntime.jsxs("span", { className: "sr-only", children: [filterBarConfig.appliedFilterKeys().length, " filters applied"] })] })) : undefined, variant: "secondary", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: title ?? t("filtersBar.filtersHeading") }) }) }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { cellPadding: 100, children: jsxRuntime.jsxs(reactComponents.Card, { className: "max-h-[min(600px,_calc(100dvh-32px))] w-[300px] overflow-y-hidden", dataTestId: "starred-filters-menu-popover", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 p-1", children: [jsxRuntime.jsx(reactFormComponents.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 }), jsxRuntime.jsxs("div", { className: "flex h-7 items-center justify-between gap-1 px-3", children: [jsxRuntime.jsx(reactComponents.Text, { className: "text-secondary-400", size: "small", children: jsxRuntime.jsx(FiltersAppliedCountLabel, { filterBarConfig: filterBarConfig }) }), filterBarConfig.appliedFilterKeys().length > 0 ? (jsxRuntime.jsx(ResetFiltersButton, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] })] }), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(reactComponents.CardBody, { className: "gap-1 p-1", density: "none", disableGap: true, children: [jsxRuntime.jsx(GroupedFiltersList, { className: "flex flex-col gap-1", filterBarConfig: filterBarConfig, filtersGrouped: searchText
+                                                        ? searchResultsGrouped
+                                                        : showCustomFilters
+                                                            ? filtersToShowGrouped
+                                                            : removeCustomFields(filtersToShowGrouped) }), hasCustomFields && !showCustomFilters && !searchText ? (jsxRuntime.jsx(CustomFieldsHiddenGroup, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, onShow: () => {
+                                                        setShowCustomFilters(true);
+                                                    } })) : null] })] }) })] }));
+                } }), showDirectlyFilters.length > 0 ? (jsxRuntime.jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, !compact ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [appliedFilters.filter(filter => !filter.showDirectly).length > 0 ? (jsxRuntime.jsx("div", { className: "h-4 w-[1px] bg-slate-300", "data-testid": "applied-filters-buttons" })) : null, jsxRuntime.jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: appliedFilters }), filterBarConfig.appliedFilterKeys().length > 0 ? (jsxRuntime.jsx(ResetFiltersButton, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] })) : null] }));
+};
+const Separator = () => jsxRuntime.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [t("filtersBar.appliedFiltersTooltip.plural", { count: filterBarConfig.appliedFilterKeys().length }), jsxRuntime.jsx("ul", { className: "list-inside", children: filterBarConfig.appliedFilterKeys().map((appliedFilterKey, index) => (jsxRuntime.jsx("li", { className: "list-disc", children: filterBarConfig.getFilterTitle(appliedFilterKey) }, index))) })] }));
+    }
+};
+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 jsxRuntime.jsx(jsxRuntime.Fragment, { children: t("filtersMenu.appliedFiltersLabel.plural", { count: filterBarConfig.appliedFilterKeys().length }) });
+    }
+};
+const CustomFieldsHiddenGroup = ({ appliedCustomFields, filterBarConfig, onShow, }) => {
+    const [t] = useTranslation();
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Button, { "aria-controls": "filters-list", className: "text-primary-600 w-full justify-between px-3", onClick: onShow, prefix: jsxRuntime.jsx(reactComponents.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 ? (jsxRuntime.jsx("ul", { "aria-label": "Visible custom fields", "data-testid": "applied-custom-fields-list", children: jsxRuntime.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 = react.useCallback((key) => {
+        // eslint-disable-next-line local-rules/no-typescript-assertion
+        return key;
+    }, []);
+    const filters = react.useMemo(() => {
+        if (Array.isArray(filterKey)) {
+            return filterKey.map(key => filterBarDefinition[ensureFilterKey(key)]).filter(Boolean);
+        }
+        return [];
+    }, [filterKey, filterBarDefinition, ensureFilterKey]);
+    if (Array.isArray(filterKey)) {
+        return (jsxRuntime.jsx(reactComponents.MoreMenu, { customButton: jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.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: () => (jsxRuntime.jsx(reactComponents.MenuList, { children: filters.map((value, index) => value && (jsxRuntime.jsx(FilterComponent, { filter: value, filterBarActions: filterBarConfig, filterState: filterBarConfig, visualStyle: "list-item" }, index))) })) }));
+    }
+    const filter = filterBarDefinition[ensureFilterKey(filterKey)];
+    if (!filter) {
+        return null;
+    }
+    return (jsxRuntime.jsx("div", { onClick: event => event.stopPropagation(), children: jsxRuntime.jsx(FilterComponent, { asIcon: "Filter", filter: filter, filterBarActions: filterBarConfig, filterState: filterBarConfig, size: "extraSmall" }) }));
 };
 
 /**
@@ -854,263 +1140,11 @@ const HierarchicalCheckboxFilter = ({ filterDefinition, filterBarActions, option
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FilterHeader, { ...filterDefinition, ...filterBarActions, filterHasChanges: filterBarActions.appliedFilterKeys().includes(filterDefinition.filterKey), loading: loading, ...searchHeaderProps }), jsxRuntime.jsx("div", { className: "max-h-60 overflow-y-auto", children: jsxRuntime.jsx(FilterResults, { loading: loading, results: filteredOptions, children: results => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: results.map(option => (jsxRuntime.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 = react.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 react.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 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: filter.component({
-            filterDefinition: filter,
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            value: values,
-            setValue,
-            filterBarActions,
-            filterState,
-        }) })) : (jsxRuntime.jsx(reactFilterComponents.Filter, { 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 (jsxRuntime.jsx(reactComponents.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 } = reactCoreHooks.useAnalytics(FilterEvents);
-    const numberOfShowDirectlyFilters = sharedUtils.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 = react.useMemo(() => {
-        return sharedUtils.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(sharedUtils.truthy);
-    }, [filterBarDefinition]);
-    const { filtersGrouped } = useStarredGroupFilters(sharedUtils.objectValues(filterBarDefinition), [
-        ...hideInStarredMenu,
-        ...hiddenFilters,
-    ]);
-    const hiddenFiltersCount = react.useMemo(() => {
-        const nonHiddenStarredFilterKeys = starredFilterKeys.filter(key => !hideInStarredMenu.includes(key));
-        return (filtersGrouped.map(group => group.filters).flat().length +
-            hiddenFilters.length -
-            nonHiddenStarredFilterKeys.length +
-            numberOfShowDirectlyFilters);
-    }, [filtersGrouped, hiddenFilters, starredFilterKeys, hideInStarredMenu, numberOfShowDirectlyFilters]);
-    const getHiddenFiltersLabel = () => {
-        switch (hiddenFiltersCount) {
-            case 0:
-                return t("filtersBar.hiddenFilters.toggleFilters");
-            case 1:
-                return t("filtersBar.hiddenFilters.singular");
-            default:
-                return t("filtersBar.hiddenFilters.plural", { count: hiddenFiltersCount });
-        }
-    };
-    return (jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { className: className, dataTestId: dataTestId ?? "starred-filters-menu", size: "small", variant: "ghost", children: getHiddenFiltersLabel() }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(reactComponents.MenuList, { className: "overflow-hidden", dataTestId: "starred-filters-menu-popover", children: jsxRuntime.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 (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Text, { className: "pb-1 pt-2", dataTestId: "starred-filters-group-title", size: "small", subtle: true, uppercase: true, children: group.title }), jsxRuntime.jsx("div", { className: "grid", children: group.filters.map(filter => {
-                                            return !filter.isHidden ? (jsxRuntime.jsx(reactFormComponents.ToggleSwitchOption, { className: reactComponents.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 && jsxRuntime.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 } = reactComponents.useViewportBreakpoints();
-    const isCompactMode = react.useMemo(() => compact ?? !isLg, [compact, isLg]);
-    const hideInMenu = react.useMemo(() => {
-        return sharedUtils.objectValues(filterBarDefinition)
-            .map(filter => {
-            const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
-            const showInStarredMenu = filter.showInStarredMenu ? filter.showInStarredMenu() : true;
-            const showMenuAnywayBecauseFilterHasChanged = filterBarConfig.appliedFilterKeys().includes(filter.filterKey);
-            return (!showInFilterBar || !showInStarredMenu) && !showMenuAnywayBecauseFilterHasChanged
-                ? filter.filterKey
-                : null;
-        })
-            .filter(sharedUtils.truthy);
-    }, [filterBarConfig, filterBarDefinition]);
-    const { filtersGrouped } = useStarredGroupFilters(sharedUtils.objectValues(filterBarDefinition), [
-        ...hideInMenu,
-        ...hiddenFilters,
-    ]);
-    const { appliedFilters, filtersToShow, showDirectlyFilters } = react.useMemo(() => {
-        const allFilters = filtersGrouped.map(group => group.filters).flat();
-        const starredFilters = allFilters.filter(filter => {
-            return (filterBarConfig.starredFilterKeys.includes(filter.filterKey) &&
-                !filter.showDirectly);
-        });
-        return {
-            appliedFilters: starredFilters.filter(filter => filterBarConfig.appliedFilterKeys().includes(filter.filterKey)),
-            filtersToShow: starredFilters.filter(filter => !filter.showDirectly),
-            showDirectlyFilters: allFilters.filter(filter => filter.showDirectly),
-        };
-    }, [filterBarConfig, filtersGrouped]);
-    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-wrap items-center gap-2", className), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Popover, { placement: "bottom-start", children: modalState => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { "data-testid": "starred-filters-menu-trigger", children: jsxRuntime.jsxs(reactComponents.Tooltip, { disabled: !isCompactMode || modalState.isOpen, label: jsxRuntime.jsx(FilterButtonTooltipLabel, { filterBarConfig: filterBarConfig }), children: [jsxRuntime.jsx(reactComponents.Button, { className: "@xs:flex hidden", prefix: jsxRuntime.jsx(reactComponents.Icon, { color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", suffix: isCompactMode && filterBarConfig.appliedFilterKeys().length > 0
-                                                ? `(${filterBarConfig.appliedFilterKeys().length})`
-                                                : undefined, variant: "secondary", children: title ? title : t("filtersBar.filtersHeading") }), jsxRuntime.jsx(reactComponents.IconButton, { className: "@xs:hidden", icon: jsxRuntime.jsx(reactComponents.Icon, { color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", variant: "secondary" })] }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { cellPadding: 100, children: jsxRuntime.jsxs(reactComponents.Card, { className: "max-h-[min(600px,_calc(100dvh-32px))] overflow-hidden sm:w-[350px]", children: [filtersToShow.length > 0 ? (jsxRuntime.jsx(reactComponents.CardBody, { density: "dense", children: jsxRuntime.jsx("div", { className: "flex h-full min-w-min flex-col gap-2", children: jsxRuntime.jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: filtersToShow }) }) })) : null, jsxRuntime.jsxs(reactComponents.CardFooter, { className: filtersToShow.length === 0 ? "border-none" : undefined, density: "dense", children: [jsxRuntime.jsx(StarredFiltersMenu, { className: "mr-auto", filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, starredFilterKeys: filterBarConfig.starredFilterKeys, updateStarredFilters: filterBarConfig.updateStarredFilters }), !isCompactMode ? null : (jsxRuntime.jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys().length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState }))] })] }) })] })) }), showDirectlyFilters.length > 0 ? (jsxRuntime.jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, !isCompactMode ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [appliedFilters.filter(filter => !filter.showDirectly).length > 0 ? (jsxRuntime.jsx("div", { className: "h-4 w-[1px] bg-slate-300" })) : null, jsxRuntime.jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: appliedFilters }), jsxRuntime.jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys().length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })] })) : null] }));
-};
-const FiltersList = ({ filters, filterBarConfig }) => {
-    return filters.length === 0
-        ? null
-        : filters.map(filter => {
-            return (jsxRuntime.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [t("filtersBar.appliedFiltersTooltip.plural", { count: filterBarConfig.appliedFilterKeys().length }), jsxRuntime.jsx("ul", { className: "list-inside", children: filterBarConfig.appliedFilterKeys().map((appliedFilterKey, index) => (jsxRuntime.jsx("li", { className: "list-disc", children: filterBarConfig.getFilterTitle(appliedFilterKey) }, index))) })] }));
-    }
-};
-
 /**
  * The FilterBar component serves as a wrapper for managing filters.
  */
-const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact, title, }) => {
-    return (jsxRuntime.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 (jsxRuntime.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
@@ -1932,11 +1966,16 @@ exports.DefaultMinMaxFilter = DefaultMinMaxFilter;
 exports.DefaultRadioFilter = DefaultRadioFilter;
 exports.DynamicFilterList = DynamicFilterList;
 exports.FilterBar = FilterBar;
+exports.FilterComponent = FilterComponent;
 exports.FilterEvents = FilterEvents;
 exports.FilterHeader = FilterHeader;
 exports.FilterResults = FilterResults;
+exports.FilterTableComponent = FilterTableComponent;
+exports.FiltersMenu = FiltersMenu;
+exports.FiltersRenderer = FiltersRenderer;
+exports.GroupedFiltersList = GroupedFiltersList;
 exports.HierarchicalCheckboxFilter = HierarchicalCheckboxFilter;
-exports.StarredFilters = StarredFilters;
+exports.ResetFiltersButton = ResetFiltersButton;
 exports.areaFilterGeoJsonGeometrySchema = areaFilterGeoJsonGeometrySchema;
 exports.isAreaFilterValue = isAreaFilterValue;
 exports.isArrayFilterValue = isArrayFilterValue;