@trackunit/filters-filter-bar 1.3.200 → 1.3.202

package/index.cjs.js

@@ -110,7 +110,7 @@ var defaultTranslations = {
 	"filter.more.options.if.you.search.title": "Over {{count}} items found.",
 	"filtersBar.appliedFiltersTooltip.none": "No filters applied",
 	"filtersBar.appliedFiltersTooltip.plural": "{{count}} filters applied:",
-	"filtersBar.appliedFiltersTooltip.singular": "{{filterName}} filter applied:",
+	"filtersBar.appliedFiltersTooltip.singular": "{{filterName}} filter applied",
 	"filtersBar.defaultAssetFilters.followedFilter.ALL": "All Assets",
 	"filtersBar.defaultAssetFilters.followedFilter.allLabel": "All Assets",
 	"filtersBar.defaultAssetFilters.followedFilter.FOLLOWED": "Followed Only",
@@ -645,6 +645,25 @@ const DefaultRadioFilter = ({ filterDefinition, filterBarActions, options, loadi
                     }, 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" }) })) })] }));
 };
 
+/**
+ * Tooltip label for the filter button
+ */
+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))) })] }));
+    }
+};
+
 /**
  * Returns the two first values, appends counter if more.
  *
@@ -760,6 +779,64 @@ const useGroupFilters = (filterDefinitions, hiddenFilters) => {
 };
 const uniqueKeysFromGroups = (filters) => [...new Set(filters.map(filter => filter.group))];
 
+/**
+ * This hook is used to manage the filters menu.
+ * It returns the filters that should be shown in the menu, the filters that should be shown directly in the filter bar,
+ * and the filters that should be shown in the search results.
+ */
+const useFiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], allowShowFiltersDirectly = true, }) => {
+    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 removeCustomFieldsGroup = react.useCallback((groupOfFilters) => groupOfFilters.filter(group => group.key !== "CUSTOM_FIELDS"), []);
+    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 && allowShowFiltersDirectly),
+            hasCustomFields: allFilters.some(filter => filter.group === "CUSTOM_FIELDS"),
+        };
+    }, [filterBarConfig, filtersGrouped, allowShowFiltersDirectly]);
+    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 react.useMemo(() => {
+        return {
+            appliedFilters,
+            hasCustomFields,
+            showDirectlyFilters,
+            appliedCustomFields,
+            searchText,
+            setSearchText,
+            filtersToShowGrouped,
+            searchResultsGrouped,
+            removeCustomFieldsGroup,
+        };
+    }, [
+        appliedFilters,
+        hasCustomFields,
+        showDirectlyFilters,
+        appliedCustomFields,
+        searchText,
+        setSearchText,
+        filtersToShowGrouped,
+        searchResultsGrouped,
+        removeCustomFieldsGroup,
+    ]);
+};
+
 /**
  * FiltersRenderer renders an array of Filter components from filter definitions
  * It ignores hidden filters.
@@ -780,6 +857,60 @@ const FiltersRenderer = ({ filters, filterBarConfig, visualStyle, }) => {
             .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" })] }));
+};
+
+/**
+ *
+ */
+const FiltersMenuContent = ({ filterBarConfig, setShowCustomFilters, setSearchText, searchText, searchResultsGrouped, filtersToShowGrouped, removeCustomFieldsGroup, hasCustomFields, appliedCustomFields, showCustomFilters, }) => {
+    const [t] = useTranslation();
+    return (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-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
+                                : removeCustomFieldsGroup(filtersToShowGrouped) }), hasCustomFields && !showCustomFilters && !searchText ? (jsxRuntime.jsx(CustomFieldsHiddenGroup, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, onShow: () => {
+                            setShowCustomFilters(true);
+                        } })) : null] })] }));
+};
+const Separator = () => jsxRuntime.jsx("hr", { className: "border-secondary-200", role: "separator" });
+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] })] }));
+};
+
 /**
  * TooltipValues component that displays formatted tooltip values based on the provided input.
  *
@@ -788,40 +919,28 @@ const FiltersRenderer = ({ filters, filterBarConfig, visualStyle, }) => {
  * @returns {ReactElement} The rendered TooltipValues component.
  */
 const TooltipValues = ({ values }) => {
-    return jsxRuntime.jsx("div", { children: renderTooltipValues(values) });
-};
-const renderTooltipValues = (values) => {
     if (values === undefined) {
-        return null;
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
     // Array of objects ValueName[]
     if (Array.isArray(values) && typeof values[0] === "object") {
-        return (jsxRuntime.jsx("ul", { className: "list-inside", children: values.map((value, index) => (jsxRuntime.jsx("li", { className: "list-disc", children: value.name }, index))) }));
+        return (jsxRuntime.jsx("ul", { className: "list-inside pl-2", children: values.map((value, index) => (jsxRuntime.jsx("li", { className: "list-disc text-xs font-normal", children: value.name }, index))) }));
     }
     // Array of strings
-    if (Array.isArray(values)) {
-        return (jsxRuntime.jsx("ul", { className: "list-inside", children: values.map((value, index) => {
-                return (jsxRuntime.jsx("li", { className: "list-disc", children: typeof value === "string" ? value : value.name }, index));
+    if (Array.isArray(values) && typeof values[0] === "string") {
+        return (jsxRuntime.jsx("ul", { className: "list-inside pl-2", children: values.map((value, index) => {
+                return (jsxRuntime.jsx("li", { className: "list-disc text-xs font-normal", children: typeof value === "string" ? value : value.name }, index));
             }) }));
     }
     // single object ValueName
     if (typeof values === "object" && values.name) {
-        return (jsxRuntime.jsx("ul", { className: "list-inside", children: jsxRuntime.jsx("li", { className: "list-disc", children: values.name }) }));
+        return (jsxRuntime.jsx("ul", { className: "list-inside pl-2", children: jsxRuntime.jsx("li", { className: "list-disc text-xs font-normal", children: values.name }) }));
     }
     // String or number
     if (typeof values === "string" || typeof values === "number") {
-        return (jsxRuntime.jsx("ul", { className: "list-inside", children: jsxRuntime.jsx("li", { className: "list-disc", children: values.toString() }) }));
-    }
-    // BooleanValue
-    if (typeof values === "object" && values.booleanValue !== undefined) {
-        return values.booleanValue ? "Yes" : "No";
+        return (jsxRuntime.jsx("ul", { className: "list-inside pl-2", children: jsxRuntime.jsx("li", { className: "list-disc text-xs font-normal", children: values.toString() }) }));
     }
-    // MinMaxFilterValue
-    if (typeof values === "object" && "min" in values && "max" in values) {
-        const minMax = values;
-        return `Min: ${minMax.min}, Max: ${minMax.max}`;
-    }
-    return null;
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
 };
 
 /**
@@ -834,13 +953,16 @@ const renderTooltipValues = (values) => {
  * @param {string} props.filterKey - The key identifying the filter.
  * @returns {ReactElement} The rendered tooltip label and applied filter values.
  */
-const SingleFilterTooltipLabel = ({ filterBarConfig, filterKey, }) => {
-    const title = filterBarConfig.getFilterTitle(filterKey);
-    const values = filterBarConfig.getValuesByKey(filterKey);
-    const [t] = useTranslation();
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [t("filtersBar.appliedFiltersTooltip.singular", {
-                filterName: title,
-            }), jsxRuntime.jsx(TooltipValues, { values: values })] }));
+const SingleFilterTooltipLabel = ({ filterBarConfig, filter, filterKey, }) => {
+    const title = react.useMemo(() => filterBarConfig.getFilterTitle(filterKey), [filterBarConfig, filterKey]);
+    const values = react.useMemo(() => filterBarConfig.getValuesByKey(filterKey), [filterBarConfig, filterKey]);
+    const displayValues = react.useMemo(() => {
+        if (filter?.valueAsText) {
+            return filter.valueAsText(values);
+        }
+        return values;
+    }, [filter, values]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "text-xs font-medium", children: title }), jsxRuntime.jsx(TooltipValues, { values: displayValues })] }));
 };
 
 /**
@@ -854,119 +976,51 @@ const SingleFilterTooltipLabel = ({ filterBarConfig, filterKey, }) => {
  * @param {string[]} [props.filterKeys] An optional list of filter keys to filter the currently applied filters.
  * @returns {ReactElement | string} Returns a element or string for the tooltip displaying applied filters.
  */
-const MultipleFilterTooltipLabel = ({ filterBarConfig, filterKeys, }) => {
+const MultipleFilterTooltipLabel = ({ filterBarConfig, filterKeys, filters, }) => {
     const [t] = useTranslation();
-    const appliedFilterKeys = filterKeys
-        ? filterKeys.filter(key => filterBarConfig.appliedFilterKeys().includes(key))
-        : filterBarConfig.appliedFilterKeys();
+    const appliedKeys = filterBarConfig.appliedFilterKeys();
+    const appliedFilterKeys = filterKeys ? filterKeys.filter(key => appliedKeys.includes(key)) : appliedKeys;
+    const filtersMap = filters.reduce((acc, filter) => {
+        if (filter.filterKey) {
+            acc[filter.filterKey] = filter;
+        }
+        return acc;
+    }, {});
     switch (appliedFilterKeys.length) {
         case 0:
             return t("filtersBar.appliedFiltersTooltip.none");
         case 1:
-            return jsxRuntime.jsx(SingleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKey: appliedFilterKeys[0] });
+            return (jsxRuntime.jsx(SingleFilterTooltipLabel, { filter: filtersMap[appliedFilterKeys[0]], filterBarConfig: filterBarConfig, filterKey: appliedFilterKeys[0] }));
         default:
-            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [t("filtersBar.appliedFiltersTooltip.plural", { count: appliedFilterKeys.length }), appliedFilterKeys.map(filterKey => {
-                        const title = filterBarConfig.getFilterTitle(filterKey);
-                        const values = filterBarConfig.getValuesByKey(filterKey);
-                        return filterBarConfig.appliedFilterKeys().includes(filterKey) ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { children: [title, ":"] }), jsxRuntime.jsx(TooltipValues, { values: values })] }, filterKey)) : null;
-                    })] }));
+            return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: appliedFilterKeys.map(filterKey => (jsxRuntime.jsx(SingleFilterTooltipLabel, { filter: filtersMap[filterKey], filterBarConfig: filterBarConfig, filterKey: filterKey }, 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 FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], compact, title, dataTestId = "filters-menu", className, showAppliedFiltersCount = true, buttonProps, allowShowFiltersDirectly = true, }) => {
     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]);
+    const { appliedFilters, showDirectlyFilters, hasCustomFields, filtersToShowGrouped, searchResultsGrouped, searchText, appliedCustomFields, removeCustomFieldsGroup, setSearchText, } = useFiltersMenu({
+        filterBarDefinition,
+        filterBarConfig,
+        hiddenFilters,
+        allowShowFiltersDirectly,
+    });
     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(MultipleFilterTooltipLabel, { 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] })] }) })] }));
+                    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(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filters: appliedFilters }), 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 && showAppliedFiltersCount && 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", ...buttonProps, children: title !== "" ? (jsxRuntime.jsx("span", { className: "hidden sm:block", children: title ?? t("filtersBar.filtersHeading") })) : null }) }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { cellPadding: 100, children: jsxRuntime.jsx(FiltersMenuContent, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, filtersToShowGrouped: filtersToShowGrouped, hasCustomFields: hasCustomFields, removeCustomFieldsGroup: removeCustomFieldsGroup, searchResultsGrouped: searchResultsGrouped, searchText: searchText, setSearchText: setSearchText, setShowCustomFilters: setShowCustomFilters, showCustomFilters: showCustomFilters }) })] }));
                 } }), 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 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.
@@ -987,14 +1041,14 @@ const FilterTableComponent = ({ filterKey, filterBarDefinition, filterBarConfig,
     if (Array.isArray(filterKey)) {
         const isActive = filterKey.some(key => filterBarConfig.appliedFilterKeys().includes(key));
         return (jsxRuntime.jsx(reactComponents.Popover, { placement: "bottom-start", children: modalState => {
-                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(reactComponents.Tooltip, { disabled: modalState.isOpen || !isActive, label: jsxRuntime.jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKeys: filterKey }), children: jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Filter", size: "small" }), size: "extraSmall", variant: isActive ? "filled" : "ghost-neutral" }) }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(reactComponents.MenuList, { children: filters.map((value, index) => value && (jsxRuntime.jsx(FilterComponent, { filter: value, filterBarActions: filterBarConfig, filterState: filterBarConfig, visualStyle: "list-item" }, index))) }) })] }));
+                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(reactComponents.Tooltip, { disabled: modalState.isOpen || !isActive, label: jsxRuntime.jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKeys: filterKey, filters: filters }), placement: "bottom", children: jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Filter", size: "small" }), size: "extraSmall", variant: isActive ? "filled" : "ghost-neutral" }) }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { 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(reactComponents.Tooltip, { disabled: !filterBarConfig.appliedFilterKeys().includes(filterKey), label: jsxRuntime.jsx(SingleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKey: filterKey }), children: jsxRuntime.jsx(FilterComponent, { asIcon: "Filter", filter: filter, filterBarActions: filterBarConfig, filterState: filterBarConfig, size: "extraSmall" }) }) }));
+    return (jsxRuntime.jsx("div", { onClick: event => event.stopPropagation(), children: jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !filterBarConfig.appliedFilterKeys().includes(filterKey), label: jsxRuntime.jsx(SingleFilterTooltipLabel, { filter: filter, filterBarConfig: filterBarConfig, filterKey: filterKey }), placement: "bottom", children: jsxRuntime.jsx(FilterComponent, { asIcon: "Filter", filter: filter, filterBarActions: filterBarConfig, filterState: filterBarConfig, size: "extraSmall" }) }) }));
 };
 
 /**
@@ -1225,8 +1279,8 @@ const HierarchicalCheckboxFilter = ({ filterDefinition, filterBarActions, option
 /**
  * The FilterBar component serves as a wrapper for managing filters.
  */
-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 }));
+const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact = true, title, allowShowFiltersDirectly = true, }) => {
+    return (jsxRuntime.jsx(FiltersMenu, { allowShowFiltersDirectly: allowShowFiltersDirectly, 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
@@ -1888,8 +1942,8 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, }) => {
         setValue: (key, callback) => setValue(setFilterBarConfig, key, callback),
     });
     react.useEffect(() => {
-        onValuesChange?.(filterBarConfig.values);
         saveData(filterBarConfig, filterBarDefinition);
+        onValuesChange?.(filterBarConfig.values);
     }, [filterBarConfig, filterBarDefinition, onValuesChange, saveData]);
     return react.useMemo(() => {
         return {
@@ -2048,12 +2102,14 @@ exports.DefaultMinMaxFilter = DefaultMinMaxFilter;
 exports.DefaultRadioFilter = DefaultRadioFilter;
 exports.DynamicFilterList = DynamicFilterList;
 exports.FilterBar = FilterBar;
+exports.FilterButtonTooltipLabel = FilterButtonTooltipLabel;
 exports.FilterComponent = FilterComponent;
 exports.FilterEvents = FilterEvents;
 exports.FilterHeader = FilterHeader;
 exports.FilterResults = FilterResults;
 exports.FilterTableComponent = FilterTableComponent;
 exports.FiltersMenu = FiltersMenu;
+exports.FiltersMenuContent = FiltersMenuContent;
 exports.FiltersRenderer = FiltersRenderer;
 exports.GroupedFiltersList = GroupedFiltersList;
 exports.HierarchicalCheckboxFilter = HierarchicalCheckboxFilter;
@@ -2072,5 +2128,6 @@ exports.mockFilterBar = mockFilterBar;
 exports.toggleFilterValue = toggleFilterValue;
 exports.useFilterBar = useFilterBar;
 exports.useFilterBarAsync = useFilterBarAsync;
+exports.useFiltersMenu = useFiltersMenu;
 exports.useSearchParamAsFilter = useSearchParamAsFilter;
 exports.validateFilter = validateFilter;

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { VirtualizedList, Text, Button, useViewportBreakpoints, Popover, PopoverTrigger, Tooltip, Icon, PopoverContent, Card, CardBody, IconButton, MenuList } from '@trackunit/react-components';
+import { VirtualizedList, Text, Button, Card, CardBody, useViewportBreakpoints, Popover, PopoverTrigger, Tooltip, Icon, PopoverContent, 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 } from '@trackunit/react-filter-components';
 import { useRef, useMemo, useState, useEffect, useCallback, Fragment as Fragment$1 } from 'react';
@@ -108,7 +108,7 @@ var defaultTranslations = {
 	"filter.more.options.if.you.search.title": "Over {{count}} items found.",
 	"filtersBar.appliedFiltersTooltip.none": "No filters applied",
 	"filtersBar.appliedFiltersTooltip.plural": "{{count}} filters applied:",
-	"filtersBar.appliedFiltersTooltip.singular": "{{filterName}} filter applied:",
+	"filtersBar.appliedFiltersTooltip.singular": "{{filterName}} filter applied",
 	"filtersBar.defaultAssetFilters.followedFilter.ALL": "All Assets",
 	"filtersBar.defaultAssetFilters.followedFilter.allLabel": "All Assets",
 	"filtersBar.defaultAssetFilters.followedFilter.FOLLOWED": "Followed Only",
@@ -643,6 +643,25 @@ const DefaultRadioFilter = ({ filterDefinition, filterBarActions, options, loadi
                     }, 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" }) })) })] }));
 };
 
+/**
+ * Tooltip label for the filter button
+ */
+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))) })] }));
+    }
+};
+
 /**
  * Returns the two first values, appends counter if more.
  *
@@ -758,6 +777,64 @@ const useGroupFilters = (filterDefinitions, hiddenFilters) => {
 };
 const uniqueKeysFromGroups = (filters) => [...new Set(filters.map(filter => filter.group))];
 
+/**
+ * This hook is used to manage the filters menu.
+ * It returns the filters that should be shown in the menu, the filters that should be shown directly in the filter bar,
+ * and the filters that should be shown in the search results.
+ */
+const useFiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], allowShowFiltersDirectly = true, }) => {
+    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 removeCustomFieldsGroup = useCallback((groupOfFilters) => groupOfFilters.filter(group => group.key !== "CUSTOM_FIELDS"), []);
+    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 && allowShowFiltersDirectly),
+            hasCustomFields: allFilters.some(filter => filter.group === "CUSTOM_FIELDS"),
+        };
+    }, [filterBarConfig, filtersGrouped, allowShowFiltersDirectly]);
+    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 useMemo(() => {
+        return {
+            appliedFilters,
+            hasCustomFields,
+            showDirectlyFilters,
+            appliedCustomFields,
+            searchText,
+            setSearchText,
+            filtersToShowGrouped,
+            searchResultsGrouped,
+            removeCustomFieldsGroup,
+        };
+    }, [
+        appliedFilters,
+        hasCustomFields,
+        showDirectlyFilters,
+        appliedCustomFields,
+        searchText,
+        setSearchText,
+        filtersToShowGrouped,
+        searchResultsGrouped,
+        removeCustomFieldsGroup,
+    ]);
+};
+
 /**
  * FiltersRenderer renders an array of Filter components from filter definitions
  * It ignores hidden filters.
@@ -778,6 +855,60 @@ const FiltersRenderer = ({ filters, filterBarConfig, visualStyle, }) => {
             .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" })] }));
+};
+
+/**
+ *
+ */
+const FiltersMenuContent = ({ filterBarConfig, setShowCustomFilters, setSearchText, searchText, searchResultsGrouped, filtersToShowGrouped, removeCustomFieldsGroup, hasCustomFields, appliedCustomFields, showCustomFilters, }) => {
+    const [t] = useTranslation();
+    return (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-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
+                                : removeCustomFieldsGroup(filtersToShowGrouped) }), hasCustomFields && !showCustomFilters && !searchText ? (jsx(CustomFieldsHiddenGroup, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, onShow: () => {
+                            setShowCustomFilters(true);
+                        } })) : null] })] }));
+};
+const Separator = () => jsx("hr", { className: "border-secondary-200", role: "separator" });
+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] })] }));
+};
+
 /**
  * TooltipValues component that displays formatted tooltip values based on the provided input.
  *
@@ -786,40 +917,28 @@ const FiltersRenderer = ({ filters, filterBarConfig, visualStyle, }) => {
  * @returns {ReactElement} The rendered TooltipValues component.
  */
 const TooltipValues = ({ values }) => {
-    return jsx("div", { children: renderTooltipValues(values) });
-};
-const renderTooltipValues = (values) => {
     if (values === undefined) {
-        return null;
+        return jsx(Fragment, {});
     }
     // Array of objects ValueName[]
     if (Array.isArray(values) && typeof values[0] === "object") {
-        return (jsx("ul", { className: "list-inside", children: values.map((value, index) => (jsx("li", { className: "list-disc", children: value.name }, index))) }));
+        return (jsx("ul", { className: "list-inside pl-2", children: values.map((value, index) => (jsx("li", { className: "list-disc text-xs font-normal", children: value.name }, index))) }));
     }
     // Array of strings
-    if (Array.isArray(values)) {
-        return (jsx("ul", { className: "list-inside", children: values.map((value, index) => {
-                return (jsx("li", { className: "list-disc", children: typeof value === "string" ? value : value.name }, index));
+    if (Array.isArray(values) && typeof values[0] === "string") {
+        return (jsx("ul", { className: "list-inside pl-2", children: values.map((value, index) => {
+                return (jsx("li", { className: "list-disc text-xs font-normal", children: typeof value === "string" ? value : value.name }, index));
             }) }));
     }
     // single object ValueName
     if (typeof values === "object" && values.name) {
-        return (jsx("ul", { className: "list-inside", children: jsx("li", { className: "list-disc", children: values.name }) }));
+        return (jsx("ul", { className: "list-inside pl-2", children: jsx("li", { className: "list-disc text-xs font-normal", children: values.name }) }));
     }
     // String or number
     if (typeof values === "string" || typeof values === "number") {
-        return (jsx("ul", { className: "list-inside", children: jsx("li", { className: "list-disc", children: values.toString() }) }));
-    }
-    // BooleanValue
-    if (typeof values === "object" && values.booleanValue !== undefined) {
-        return values.booleanValue ? "Yes" : "No";
+        return (jsx("ul", { className: "list-inside pl-2", children: jsx("li", { className: "list-disc text-xs font-normal", children: values.toString() }) }));
     }
-    // MinMaxFilterValue
-    if (typeof values === "object" && "min" in values && "max" in values) {
-        const minMax = values;
-        return `Min: ${minMax.min}, Max: ${minMax.max}`;
-    }
-    return null;
+    return jsx(Fragment, {});
 };
 
 /**
@@ -832,13 +951,16 @@ const renderTooltipValues = (values) => {
  * @param {string} props.filterKey - The key identifying the filter.
  * @returns {ReactElement} The rendered tooltip label and applied filter values.
  */
-const SingleFilterTooltipLabel = ({ filterBarConfig, filterKey, }) => {
-    const title = filterBarConfig.getFilterTitle(filterKey);
-    const values = filterBarConfig.getValuesByKey(filterKey);
-    const [t] = useTranslation();
-    return (jsxs(Fragment, { children: [t("filtersBar.appliedFiltersTooltip.singular", {
-                filterName: title,
-            }), jsx(TooltipValues, { values: values })] }));
+const SingleFilterTooltipLabel = ({ filterBarConfig, filter, filterKey, }) => {
+    const title = useMemo(() => filterBarConfig.getFilterTitle(filterKey), [filterBarConfig, filterKey]);
+    const values = useMemo(() => filterBarConfig.getValuesByKey(filterKey), [filterBarConfig, filterKey]);
+    const displayValues = useMemo(() => {
+        if (filter?.valueAsText) {
+            return filter.valueAsText(values);
+        }
+        return values;
+    }, [filter, values]);
+    return (jsxs(Fragment, { children: [jsx("div", { className: "text-xs font-medium", children: title }), jsx(TooltipValues, { values: displayValues })] }));
 };
 
 /**
@@ -852,119 +974,51 @@ const SingleFilterTooltipLabel = ({ filterBarConfig, filterKey, }) => {
  * @param {string[]} [props.filterKeys] An optional list of filter keys to filter the currently applied filters.
  * @returns {ReactElement | string} Returns a element or string for the tooltip displaying applied filters.
  */
-const MultipleFilterTooltipLabel = ({ filterBarConfig, filterKeys, }) => {
+const MultipleFilterTooltipLabel = ({ filterBarConfig, filterKeys, filters, }) => {
     const [t] = useTranslation();
-    const appliedFilterKeys = filterKeys
-        ? filterKeys.filter(key => filterBarConfig.appliedFilterKeys().includes(key))
-        : filterBarConfig.appliedFilterKeys();
+    const appliedKeys = filterBarConfig.appliedFilterKeys();
+    const appliedFilterKeys = filterKeys ? filterKeys.filter(key => appliedKeys.includes(key)) : appliedKeys;
+    const filtersMap = filters.reduce((acc, filter) => {
+        if (filter.filterKey) {
+            acc[filter.filterKey] = filter;
+        }
+        return acc;
+    }, {});
     switch (appliedFilterKeys.length) {
         case 0:
             return t("filtersBar.appliedFiltersTooltip.none");
         case 1:
-            return jsx(SingleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKey: appliedFilterKeys[0] });
+            return (jsx(SingleFilterTooltipLabel, { filter: filtersMap[appliedFilterKeys[0]], filterBarConfig: filterBarConfig, filterKey: appliedFilterKeys[0] }));
         default:
-            return (jsxs(Fragment, { children: [t("filtersBar.appliedFiltersTooltip.plural", { count: appliedFilterKeys.length }), appliedFilterKeys.map(filterKey => {
-                        const title = filterBarConfig.getFilterTitle(filterKey);
-                        const values = filterBarConfig.getValuesByKey(filterKey);
-                        return filterBarConfig.appliedFilterKeys().includes(filterKey) ? (jsxs("div", { children: [jsxs("div", { children: [title, ":"] }), jsx(TooltipValues, { values: values })] }, filterKey)) : null;
-                    })] }));
+            return (jsx(Fragment, { children: appliedFilterKeys.map(filterKey => (jsx(SingleFilterTooltipLabel, { filter: filtersMap[filterKey], filterBarConfig: filterBarConfig, filterKey: filterKey }, 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 FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], compact, title, dataTestId = "filters-menu", className, showAppliedFiltersCount = true, buttonProps, allowShowFiltersDirectly = true, }) => {
     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]);
+    const { appliedFilters, showDirectlyFilters, hasCustomFields, filtersToShowGrouped, searchResultsGrouped, searchText, appliedCustomFields, removeCustomFieldsGroup, setSearchText, } = useFiltersMenu({
+        filterBarDefinition,
+        filterBarConfig,
+        hiddenFilters,
+        allowShowFiltersDirectly,
+    });
     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(MultipleFilterTooltipLabel, { 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] })] }) })] }));
+                    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(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filters: appliedFilters }), children: jsx(Button, { prefix: jsx(Icon, { ariaHidden: true, color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Filter", size: "small" }), size: "small", suffix: compact && showAppliedFiltersCount && 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", ...buttonProps, children: title !== "" ? (jsx("span", { className: "hidden sm:block", children: title ?? t("filtersBar.filtersHeading") })) : null }) }) }) }), jsx(PopoverContent, { cellPadding: 100, children: jsx(FiltersMenuContent, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, filtersToShowGrouped: filtersToShowGrouped, hasCustomFields: hasCustomFields, removeCustomFieldsGroup: removeCustomFieldsGroup, searchResultsGrouped: searchResultsGrouped, searchText: searchText, setSearchText: setSearchText, setShowCustomFilters: setShowCustomFilters, showCustomFilters: showCustomFilters }) })] }));
                 } }), 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 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.
@@ -985,14 +1039,14 @@ const FilterTableComponent = ({ filterKey, filterBarDefinition, filterBarConfig,
     if (Array.isArray(filterKey)) {
         const isActive = filterKey.some(key => filterBarConfig.appliedFilterKeys().includes(key));
         return (jsx(Popover, { placement: "bottom-start", children: modalState => {
-                return (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: jsx("div", { children: jsx(Tooltip, { disabled: modalState.isOpen || !isActive, label: jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKeys: filterKey }), children: jsx(IconButton, { icon: jsx(Icon, { name: "Filter", size: "small" }), size: "extraSmall", variant: isActive ? "filled" : "ghost-neutral" }) }) }) }), jsx(PopoverContent, { children: jsx(MenuList, { children: filters.map((value, index) => value && (jsx(FilterComponent, { filter: value, filterBarActions: filterBarConfig, filterState: filterBarConfig, visualStyle: "list-item" }, index))) }) })] }));
+                return (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: jsx("div", { children: jsx(Tooltip, { disabled: modalState.isOpen || !isActive, label: jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKeys: filterKey, filters: filters }), placement: "bottom", children: jsx(IconButton, { icon: jsx(Icon, { name: "Filter", size: "small" }), size: "extraSmall", variant: isActive ? "filled" : "ghost-neutral" }) }) }) }), jsx(PopoverContent, { 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(Tooltip, { disabled: !filterBarConfig.appliedFilterKeys().includes(filterKey), label: jsx(SingleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKey: filterKey }), children: jsx(FilterComponent, { asIcon: "Filter", filter: filter, filterBarActions: filterBarConfig, filterState: filterBarConfig, size: "extraSmall" }) }) }));
+    return (jsx("div", { onClick: event => event.stopPropagation(), children: jsx(Tooltip, { disabled: !filterBarConfig.appliedFilterKeys().includes(filterKey), label: jsx(SingleFilterTooltipLabel, { filter: filter, filterBarConfig: filterBarConfig, filterKey: filterKey }), placement: "bottom", children: jsx(FilterComponent, { asIcon: "Filter", filter: filter, filterBarActions: filterBarConfig, filterState: filterBarConfig, size: "extraSmall" }) }) }));
 };
 
 /**
@@ -1223,8 +1277,8 @@ const HierarchicalCheckboxFilter = ({ filterDefinition, filterBarActions, option
 /**
  * The FilterBar component serves as a wrapper for managing filters.
  */
-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 }));
+const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact = true, title, allowShowFiltersDirectly = true, }) => {
+    return (jsx(FiltersMenu, { allowShowFiltersDirectly: allowShowFiltersDirectly, 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
@@ -1886,8 +1940,8 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, }) => {
         setValue: (key, callback) => setValue(setFilterBarConfig, key, callback),
     });
     useEffect(() => {
-        onValuesChange?.(filterBarConfig.values);
         saveData(filterBarConfig, filterBarDefinition);
+        onValuesChange?.(filterBarConfig.values);
     }, [filterBarConfig, filterBarDefinition, onValuesChange, saveData]);
     return useMemo(() => {
         return {
@@ -2040,4 +2094,4 @@ const mergeFilters = (filterBarDefinition, extraFilters) => {
  */
 setupLibraryTranslations();
 
-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 };
+export { DefaultCheckboxFilter, DefaultDateRangeFilter, DefaultMinMaxFilter, DefaultRadioFilter, DynamicFilterList, FilterBar, FilterButtonTooltipLabel, FilterComponent, FilterEvents, FilterHeader, FilterResults, FilterTableComponent, FiltersMenu, FiltersMenuContent, FiltersRenderer, GroupedFiltersList, HierarchicalCheckboxFilter, ResetFiltersButton, areaFilterGeoJsonGeometrySchema, isAreaFilterValue, isArrayFilterValue, isBooleanValue, isDateRangeValue, isMinMaxFilterValue, isStringArrayFilterValue, isValueName, isValueNameArray, mergeFilters, mockFilterBar, toggleFilterValue, useFilterBar, useFilterBarAsync, useFiltersMenu, useSearchParamAsFilter, validateFilter };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "1.3.200",
+  "version": "1.3.202",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,17 +14,17 @@
     "tailwind-merge": "^2.0.0",
     "string-ts": "^2.0.0",
     "zod": "3.23.4",
-    "@trackunit/iris-app-api": "1.3.127",
+    "@trackunit/iris-app-api": "1.3.128",
     "@trackunit/react-core-hooks": "1.3.131",
-    "@trackunit/react-filter-components": "1.3.165",
-    "@trackunit/react-date-and-time-components": "1.3.167",
+    "@trackunit/react-filter-components": "1.3.167",
+    "@trackunit/react-date-and-time-components": "1.3.169",
     "@trackunit/shared-utils": "1.5.121",
-    "@trackunit/react-form-components": "1.3.165",
+    "@trackunit/react-form-components": "1.3.167",
     "@trackunit/react-core-contexts-api": "1.4.127",
     "@trackunit/geo-json-utils": "1.3.121",
-    "@trackunit/i18n-library-translation": "1.3.136",
+    "@trackunit/i18n-library-translation": "1.3.137",
     "@trackunit/css-class-variance-utilities": "1.3.121",
-    "@trackunit/react-components": "1.4.145",
+    "@trackunit/react-components": "1.4.147",
     "@trackunit/react-test-setup": "1.0.11"
   },
   "module": "./index.esm.js",

package/src/lib/FilterBar.d.ts

@@ -26,9 +26,13 @@ interface FilterBarProps<TFilterBarDefinition extends FilterBarDefinition> {
      * The title of the filter bar default is "Filters" (translated)
      */
     title?: string;
+    /**
+     * If true, the filters marked as showDirectly will not be shown directly in the filter bar
+     */
+    allowShowFiltersDirectly?: boolean;
 }
 /**
  * The FilterBar component serves as a wrapper for managing filters.
  */
-export declare const FilterBar: <TFilterBarDefinition extends FilterBarDefinition>({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact, title, }: FilterBarProps<TFilterBarDefinition>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterBar: <TFilterBarDefinition extends FilterBarDefinition>({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact, title, allowShowFiltersDirectly, }: FilterBarProps<TFilterBarDefinition>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,7 @@
+import { FilterBarConfig, FilterBarDefinition, FilterMapActions, FilterMapGetter } from "../types/FilterTypes";
+/**
+ * Tooltip label for the filter button
+ */
+export declare const FilterButtonTooltipLabel: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarConfig, }: {
+    filterBarConfig: FilterBarConfig<TFilterBarDefinition> & FilterMapActions & FilterMapGetter;
+}) => string | import("react/jsx-runtime").JSX.Element | null;

package/src/lib/components/FilterTooltips/MultipleFilterTooltipLabel.d.ts

@@ -1,8 +1,9 @@
 import { ReactElement } from "react";
-import { FilterBarDefinition, FilterMapActions, FilterMapGetter, FilterState } from "../../types/FilterTypes";
+import { FilterBarDefinition, FilterDefinition, FilterMapActions, FilterMapGetter, FilterState } from "../../types/FilterTypes";
 interface MultipleFilterTooltipLabelProps<TFilterBarDefinition extends FilterBarDefinition> {
     filterBarConfig: FilterState<TFilterBarDefinition> & FilterMapActions & FilterMapGetter;
     filterKeys?: string[];
+    filters: FilterDefinition[];
 }
 /**
  * Component that displays a tooltip for filters.
@@ -15,5 +16,5 @@ interface MultipleFilterTooltipLabelProps<TFilterBarDefinition extends FilterBar
  * @param {string[]} [props.filterKeys] An optional list of filter keys to filter the currently applied filters.
  * @returns {ReactElement | string} Returns a element or string for the tooltip displaying applied filters.
  */
-declare const MultipleFilterTooltipLabel: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarConfig, filterKeys, }: MultipleFilterTooltipLabelProps<TFilterBarDefinition>) => ReactElement | string;
+declare const MultipleFilterTooltipLabel: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarConfig, filterKeys, filters, }: MultipleFilterTooltipLabelProps<TFilterBarDefinition>) => ReactElement | string;
 export default MultipleFilterTooltipLabel;

package/src/lib/components/FilterTooltips/SingleFilterTooltipLabel.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from "react";
-import { FilterBarDefinition, FilterMapActions, FilterMapGetter, FilterState } from "../../types/FilterTypes";
+import { FilterBarDefinition, FilterDefinition, FilterMapActions, FilterMapGetter, FilterState } from "../../types/FilterTypes";
 interface SingleFilterTooltipLabelProps<TFilterBarDefinition extends FilterBarDefinition> {
     filterBarConfig: FilterState<TFilterBarDefinition> & FilterMapActions & FilterMapGetter;
+    filter?: FilterDefinition;
     filterKey: string;
 }
 /**
@@ -14,5 +15,5 @@ interface SingleFilterTooltipLabelProps<TFilterBarDefinition extends FilterBarDe
  * @param {string} props.filterKey - The key identifying the filter.
  * @returns {ReactElement} The rendered tooltip label and applied filter values.
  */
-declare const SingleFilterTooltipLabel: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarConfig, filterKey, }: SingleFilterTooltipLabelProps<TFilterBarDefinition>) => ReactElement;
+declare const SingleFilterTooltipLabel: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarConfig, filter, filterKey, }: SingleFilterTooltipLabelProps<TFilterBarDefinition>) => ReactElement;
 export default SingleFilterTooltipLabel;

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

@@ -1,7 +1,11 @@
-import { CommonProps } from "@trackunit/react-components";
+import { ButtonProps, CommonProps } from "@trackunit/react-components";
 import { ReactElement } from "react";
 import { FilterBarConfig, FilterBarDefinition, FilterMapActions, FilterMapGetter } from "../types/FilterTypes";
 interface FiltersMenuProps<TFilterBarDefinition extends FilterBarDefinition> extends CommonProps {
+    /**
+     * If true, the filters marked as showDirectly will not be shown directly in the filter bar
+     */
+    allowShowFiltersDirectly?: boolean;
     /**
      * Configuration for the filter bar.
      */
@@ -9,7 +13,7 @@ interface FiltersMenuProps<TFilterBarDefinition extends FilterBarDefinition> ext
     /**
      * The definition of the filter bar, specifying its structure and filters.
      */
-    filterBarDefinition: FilterBarDefinition;
+    filterBarDefinition: TFilterBarDefinition;
     /**
      * If you want some of the filters to be hidden, but still programmatically enabled
      */
@@ -18,10 +22,18 @@ interface FiltersMenuProps<TFilterBarDefinition extends FilterBarDefinition> ext
      * If true, the starred filters will be displayed in a compact mode
      */
     compact?: boolean;
+    /**
+     * If true, the applied filters count will be shown in the filter button, only visible when compact is true
+     */
+    showAppliedFiltersCount?: boolean;
     /**
      * The title of the filter bar default is "Filters" (translated)
      */
     title?: string;
+    /**
+     * The icon props for the filter button to override the icon look and feel.
+     */
+    buttonProps?: ButtonProps;
 }
 /**
  * FilterMenu is a React component that displays a list of filters in a popover menu based on the provided filter bar configuration.
@@ -29,5 +41,5 @@ interface FiltersMenuProps<TFilterBarDefinition extends FilterBarDefinition> ext
  * @template TFilterBarDefinition - The type representing the filter bar definition.
  * @returns {ReactElement} - Returns the FilterMenu component.
  */
-export declare const FiltersMenu: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarDefinition, filterBarConfig, hiddenFilters, compact, title, dataTestId, className, }: FiltersMenuProps<TFilterBarDefinition>) => ReactElement;
+export declare const FiltersMenu: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarDefinition, filterBarConfig, hiddenFilters, compact, title, dataTestId, className, showAppliedFiltersCount, buttonProps, allowShowFiltersDirectly, }: FiltersMenuProps<TFilterBarDefinition>) => ReactElement;
 export {};

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

@@ -0,0 +1,17 @@
+import { GroupOfFilters } from "../hooks/useGroupFilters";
+import { FilterBarConfig, FilterBarDefinition, FilterDefinition, FilterMapActions, FilterMapGetter } from "../types/FilterTypes";
+/**
+ *
+ */
+export declare const FiltersMenuContent: ({ filterBarConfig, setShowCustomFilters, setSearchText, searchText, searchResultsGrouped, filtersToShowGrouped, removeCustomFieldsGroup, hasCustomFields, appliedCustomFields, showCustomFilters, }: {
+    filterBarConfig: FilterBarConfig<FilterBarDefinition> & FilterMapActions & FilterMapGetter;
+    setShowCustomFilters: (show: boolean) => void;
+    setSearchText: (text: string) => void;
+    searchText: string;
+    searchResultsGrouped: GroupOfFilters[];
+    filtersToShowGrouped: GroupOfFilters[];
+    removeCustomFieldsGroup: (groupOfFilters: GroupOfFilters[]) => GroupOfFilters[];
+    hasCustomFields: boolean;
+    appliedCustomFields: FilterDefinition[];
+    showCustomFilters: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,10 +4,12 @@ export * from "./DefaultFilterTypes";
 export * from "./DefaultMinMaxFilter";
 export * from "./DefaultRadioFilter";
 export * from "./DynamicFilterList";
+export * from "./FilterButtonTooltipLabel";
 export * from "./FilterComponent";
 export * from "./FilterHeader";
 export * from "./FilterResults";
 export * from "./FiltersMenu";
+export * from "./FiltersMenuContent";
 export * from "./FiltersRenderer";
 export * from "./FilterTableComponent";
 export * from "./GroupedFiltersList";

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

@@ -0,0 +1,25 @@
+import { FilterBarConfig, FilterBarDefinition, FilterMapActions, FilterMapGetter } from "../types/FilterTypes";
+import { GroupOfFilters } from "./useGroupFilters";
+type UseFiltersMenuProps<TFilterBarDefinition extends FilterBarDefinition> = {
+    filterBarDefinition: TFilterBarDefinition;
+    filterBarConfig: FilterBarConfig<TFilterBarDefinition> & FilterMapActions & FilterMapGetter;
+    hiddenFilters?: string[];
+    allowShowFiltersDirectly?: boolean;
+};
+/**
+ * This hook is used to manage the filters menu.
+ * It returns the filters that should be shown in the menu, the filters that should be shown directly in the filter bar,
+ * and the filters that should be shown in the search results.
+ */
+export declare const useFiltersMenu: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarDefinition, filterBarConfig, hiddenFilters, allowShowFiltersDirectly, }: UseFiltersMenuProps<TFilterBarDefinition>) => {
+    appliedFilters: import("../types/FilterTypes").FilterDefinition[];
+    hasCustomFields: boolean;
+    showDirectlyFilters: import("../types/FilterTypes").FilterDefinition[];
+    appliedCustomFields: import("../types/FilterTypes").FilterDefinition[];
+    searchText: string;
+    setSearchText: import("react").Dispatch<string>;
+    filtersToShowGrouped: GroupOfFilters[];
+    searchResultsGrouped: GroupOfFilters[];
+    removeCustomFieldsGroup: (groupOfFilters: GroupOfFilters[]) => GroupOfFilters[];
+};
+export {};

package/src/lib/index.d.ts

@@ -3,6 +3,7 @@ export * from "./FilterBar";
 export * from "./hooks/mockFilterBar";
 export * from "./hooks/useFilterBar";
 export * from "./hooks/useFilterBarAsync";
+export * from "./hooks/useFiltersMenu";
 export * from "./hooks/useSearchParamAsFilter";
 export * from "./types/FilterTypes";
 export * from "./utils/FilterEvents";