@trackunit/filters-filter-bar 1.3.198 → 1.3.201

package/index.cjs.js

@@ -132,6 +132,7 @@ var defaultTranslations = {
 	"filtersBar.groups.ASSET": "Asset",
 	"filtersBar.groups.CUSTOM_FIELDS": "Custom Fields",
 	"filtersBar.groups.CUSTOMERS": "Customers",
+	"filtersBar.groups.FLEET_HEALTH": "Fleet Health",
 	"filtersBar.groups.INTEGRATION": "Integration",
 	"filtersBar.groups.METADATA": "Metadata",
 	"filtersBar.groups.MY_NETWORK": "My Network",
@@ -644,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.
  *
@@ -759,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.
@@ -779,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.
  *
@@ -872,100 +1004,31 @@ const MultipleFilterTooltipLabel = ({ filterBarConfig, filterKeys, }) => {
     }
 };
 
-/**
- * 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 }), 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.
@@ -1224,8 +1287,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
@@ -1887,8 +1950,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 {
@@ -2047,12 +2110,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;
@@ -2071,5 +2136,6 @@ exports.mockFilterBar = mockFilterBar;
 exports.toggleFilterValue = toggleFilterValue;
 exports.useFilterBar = useFilterBar;
 exports.useFilterBarAsync = useFilterBarAsync;
+exports.useFiltersMenu = useFiltersMenu;
 exports.useSearchParamAsFilter = useSearchParamAsFilter;
 exports.validateFilter = validateFilter;