@trackunit/filters-filter-bar 1.8.4 → 1.8.6

package/index.cjs.js

@@ -451,7 +451,7 @@ const ResetFiltersButtonWithIcon = ({ resetFiltersToInitialState, dataTestId, cl
  */
 const AppliedFiltersRenderer = ({ appliedFilters, filterBarConfig, showResetButton = true, }) => {
     const filtersToRender = react.useMemo(() => appliedFilters.filter(filter => !filter.showDirectly), [appliedFilters]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [filtersToRender.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: filtersToRender }), appliedFilters.length > 0 && showResetButton ? (jsxRuntime.jsx(ResetFiltersButtonWithIcon, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [filtersToRender.length > 0 ? (jsxRuntime.jsx("div", { className: "h-4 w-[1px] bg-neutral-300", "data-testid": "applied-filters-buttons" })) : null, jsxRuntime.jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: filtersToRender }), appliedFilters.length > 0 && showResetButton ? (jsxRuntime.jsx(ResetFiltersButtonWithIcon, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] }));
 };
 
 /**
@@ -926,13 +926,23 @@ const FiltersMenuContent = ({ filterBarConfig, setShowCustomFilters, setSearchTe
 const Separator = () => jsxRuntime.jsx("hr", { className: "border-secondary-200", role: "separator" });
 const FiltersAppliedCountLabel = ({ filterBarConfig, }) => {
     const [t] = useTranslation();
-    switch (filterBarConfig.appliedFilterKeys().length) {
+    // Count actual applied values, not just filter keys - same logic as badge
+    const appliedValuesCount = react.useMemo(() => {
+        return filterBarConfig.appliedFilterKeys().reduce((total, key) => {
+            const values = filterBarConfig.getValuesByKey(key);
+            if (Array.isArray(values)) {
+                return total + values.length;
+            }
+            return total + (values !== undefined ? 1 : 0);
+        }, 0);
+    }, [filterBarConfig]);
+    switch (appliedValuesCount) {
         case 0:
             return t("filtersBar.appliedFiltersTooltip.none");
         case 1:
-            return filterBarConfig.appliedFilterKeys()[0] ? t("filtersMenu.appliedFiltersLabel.singular") : null;
+            return t("filtersMenu.appliedFiltersLabel.singular");
         default:
-            return jsxRuntime.jsx(jsxRuntime.Fragment, { children: t("filtersMenu.appliedFiltersLabel.plural", { count: filterBarConfig.appliedFilterKeys().length }) });
+            return jsxRuntime.jsx(jsxRuntime.Fragment, { children: t("filtersMenu.appliedFiltersLabel.plural", { count: appliedValuesCount }) });
     }
 };
 const CustomFieldsHiddenGroup = ({ appliedCustomFields, filterBarConfig, onShow, }) => {
@@ -1029,7 +1039,7 @@ const MultipleFilterTooltipLabel = ({ filterBarConfig, filterKeys, filters, }) =
     }, {});
     switch (appliedFilterKeys.length) {
         case 0:
-            return jsxRuntime.jsx("div", { className: "text-xs font-medium", children: t("filtersBar.appliedFiltersTooltip.none") });
+            return jsxRuntime.jsx("div", { className: "text-xs", children: t("filtersBar.appliedFiltersTooltip.none") });
         case 1:
             return (jsxRuntime.jsx(SingleFilterTooltipLabel, { filter: filtersMap[appliedFilterKeys[0]], filterBarConfig: filterBarConfig, filterKey: appliedFilterKeys[0] }));
         default:
@@ -1043,11 +1053,21 @@ const MultipleFilterTooltipLabel = ({ filterBarConfig, filterKeys, filters, }) =
  * @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, showAppliedFiltersCount = true, buttonProps, allowShowFiltersDirectly = true, includeFilterKeys, }) => {
+const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], compact = false, title, dataTestId = "filters-menu", className, buttonProps, allowShowFiltersDirectly = true, includeFilterKeys, }) => {
     const [t] = useTranslation();
-    const { isSm } = reactComponents.useViewportBreakpoints();
     const [showCustomFilters, setShowCustomFilters] = react.useState(false);
+    const { isSm } = reactComponents.useViewportBreakpoints();
     const filterBarDefinitionCount = react.useMemo(() => sharedUtils.objectValues(filterBarDefinition).length, [filterBarDefinition]);
+    const totalAppliedValuesCount = react.useMemo(() => {
+        const appliedKeys = filterBarConfig.appliedFilterKeys();
+        return appliedKeys.reduce((total, key) => {
+            const values = filterBarConfig.getValuesByKey(key);
+            if (Array.isArray(values)) {
+                return total + values.length;
+            }
+            return total + (Boolean(values) ? 1 : 0);
+        }, 0);
+    }, [filterBarConfig]);
     const { appliedFilters, showDirectlyFilters, hasCustomFields, filtersToShowGrouped, searchResultsGrouped, searchText, appliedCustomFields, removeCustomFieldsGroup, setSearchText, } = useFiltersMenu({
         filterBarDefinition,
         filterBarConfig,
@@ -1055,14 +1075,14 @@ const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [],
         includeFilterKeys,
         allowShowFiltersDirectly,
     });
-    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex items-center gap-2", className), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Popover, { onOpenStateChange: open => {
+    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex items-start 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, filters: appliedFilters }), children: !isSm ? (jsxRuntime.jsx(reactComponents.IconButton, { "aria-label": title ?? t("filtersBar.filtersHeading"), icon: jsxRuntime.jsx(reactComponents.Icon, { ariaHidden: true, color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Filter", size: "small" }), size: "small", variant: "secondary", ...buttonProps })) : (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 ? (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 !== "" ? (title ?? t("filtersBar.filtersHeading")) : null })) }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { cellPadding: 100, children: jsxRuntime.jsx(FiltersMenuContent, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, filterBarDefinitionCount: filterBarDefinitionCount, 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.jsx(AppliedFiltersRenderer, { appliedFilters: appliedFilters, filterBarConfig: filterBarConfig }) : 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: modalState.isOpen, label: jsxRuntime.jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filters: appliedFilters }), placement: "bottom", children: !isSm ? (jsxRuntime.jsx(reactComponents.Button, { "aria-label": title ?? t("filtersBar.filtersHeading"), prefix: jsxRuntime.jsx(reactComponents.Icon, { ariaHidden: true, color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", suffix: totalAppliedValuesCount > 0 ? (jsxRuntime.jsx(reactComponents.Badge, { color: "primary", count: totalAppliedValuesCount, hideZero: true, size: "condensed" })) : null, variant: "secondary", ...buttonProps })) : (jsxRuntime.jsx(reactComponents.Button, { prefix: jsxRuntime.jsx(reactComponents.Icon, { ariaHidden: true, color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", suffix: totalAppliedValuesCount > 0 ? (jsxRuntime.jsx(reactComponents.Badge, { color: "primary", count: totalAppliedValuesCount, hideZero: true, size: "condensed" })) : null, variant: "secondary", ...buttonProps, children: title !== "" ? (title ?? t("filtersBar.filtersHeading")) : null })) }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { cellPadding: 100, children: jsxRuntime.jsx(FiltersMenuContent, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, filterBarDefinitionCount: filterBarDefinitionCount, 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 === false ? (jsxRuntime.jsx(AppliedFiltersRenderer, { appliedFilters: appliedFilters, filterBarConfig: filterBarConfig })) : null] }));
 };
 
 /**
@@ -1080,17 +1100,35 @@ const FilterTableComponent = ({ filterKey, filterBarDefinition, filterBarConfig,
         }
         return [];
     }, [filterKey, filterBarDefinition, ensureFilterKey]);
+    // Helper function to get manually applied filter count (excluding default values)
+    const getManuallyAppliedFilterCount = react.useCallback((keys) => {
+        return keys.reduce((total, key) => {
+            const filterValues = filterBarConfig.getValuesByKey(key);
+            const isDefaultValue = filterBarConfig.isDefaultValue(key, filterValues);
+            if (isDefaultValue) {
+                return total; // Don't count default values
+            }
+            if (Array.isArray(filterValues)) {
+                return total + filterValues.length;
+            }
+            return total + (filterValues ? 1 : 0);
+        }, 0);
+    }, [filterBarConfig]);
     if (Array.isArray(filterKey)) {
-        const isActive = filterKey.some(key => filterBarConfig.appliedFilterKeys().includes(key));
+        const appliedFilterKeys = filterBarConfig.appliedFilterKeys();
+        const activeFilterKeys = filterKey.filter(key => appliedFilterKeys.includes(key));
+        const multipleFiltersAppliedCount = getManuallyAppliedFilterCount(activeFilterKeys);
+        const multipleFiltersIsActive = multipleFiltersAppliedCount > 0;
         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, 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))) }) })] }));
+                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx(reactComponents.Tooltip, { disabled: modalState.isOpen || !multipleFiltersIsActive, label: jsxRuntime.jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKeys: filterKey, filters: filters }), placement: "bottom", children: jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Funnel", size: "small" }), size: "extraSmall", variant: multipleFiltersIsActive ? "ghost" : "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, { filter: filter, filterBarConfig: filterBarConfig, filterKey: filterKey }), placement: "bottom", children: jsxRuntime.jsx(FilterComponent, { asIcon: "Filter", filter: filter, filterBarActions: filterBarConfig, filterState: filterBarConfig, size: "extraSmall" }) }) }));
+    const isActive = filterBarConfig.appliedFilterKeys().includes(filterKey);
+    return (jsxRuntime.jsx("div", { onClick: event => event.stopPropagation(), children: jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !isActive, label: jsxRuntime.jsx(SingleFilterTooltipLabel, { filter: filter, filterBarConfig: filterBarConfig, filterKey: filterKey }), placement: "bottom", children: jsxRuntime.jsx(FilterComponent, { asIcon: "Funnel", filter: filter, filterBarActions: filterBarConfig, filterState: filterBarConfig, size: "extraSmall" }) }) }) }));
 };
 
 /**

package/index.esm.js

@@ -2,7 +2,7 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { useMemo, useRef, useState, useEffect, useCallback, Fragment as Fragment$1 } from 'react';
 import { Filter, FilterBody, RadioFilterItem, CheckBoxFilterItem, FilterHeader as FilterHeader$1, FilterFooter } from '@trackunit/react-filter-components';
-import { Button, Icon, List, Text, Card, CardBody, useViewportBreakpoints, Popover, PopoverTrigger, Tooltip, IconButton, PopoverContent, MenuList } from '@trackunit/react-components';
+import { Button, Icon, List, Text, Card, CardBody, useViewportBreakpoints, Popover, PopoverTrigger, Tooltip, Badge, PopoverContent, IconButton, MenuList } from '@trackunit/react-components';
 import { useAnalytics, useTextSearch, useCurrentUser, useCustomEncoding } from '@trackunit/react-core-hooks';
 import { capitalize } from 'string-ts';
 import { createEvent } from '@trackunit/react-core-contexts-api';
@@ -449,7 +449,7 @@ const ResetFiltersButtonWithIcon = ({ resetFiltersToInitialState, dataTestId, cl
  */
 const AppliedFiltersRenderer = ({ appliedFilters, filterBarConfig, showResetButton = true, }) => {
     const filtersToRender = useMemo(() => appliedFilters.filter(filter => !filter.showDirectly), [appliedFilters]);
-    return (jsxs(Fragment, { children: [filtersToRender.length > 0 ? (jsx("div", { className: "h-4 w-[1px] bg-slate-300", "data-testid": "applied-filters-buttons" })) : null, jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: filtersToRender }), appliedFilters.length > 0 && showResetButton ? (jsx(ResetFiltersButtonWithIcon, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] }));
+    return (jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [filtersToRender.length > 0 ? (jsx("div", { className: "h-4 w-[1px] bg-neutral-300", "data-testid": "applied-filters-buttons" })) : null, jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: filtersToRender }), appliedFilters.length > 0 && showResetButton ? (jsx(ResetFiltersButtonWithIcon, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] }));
 };
 
 /**
@@ -924,13 +924,23 @@ const FiltersMenuContent = ({ filterBarConfig, setShowCustomFilters, setSearchTe
 const Separator = () => jsx("hr", { className: "border-secondary-200", role: "separator" });
 const FiltersAppliedCountLabel = ({ filterBarConfig, }) => {
     const [t] = useTranslation();
-    switch (filterBarConfig.appliedFilterKeys().length) {
+    // Count actual applied values, not just filter keys - same logic as badge
+    const appliedValuesCount = useMemo(() => {
+        return filterBarConfig.appliedFilterKeys().reduce((total, key) => {
+            const values = filterBarConfig.getValuesByKey(key);
+            if (Array.isArray(values)) {
+                return total + values.length;
+            }
+            return total + (values !== undefined ? 1 : 0);
+        }, 0);
+    }, [filterBarConfig]);
+    switch (appliedValuesCount) {
         case 0:
             return t("filtersBar.appliedFiltersTooltip.none");
         case 1:
-            return filterBarConfig.appliedFilterKeys()[0] ? t("filtersMenu.appliedFiltersLabel.singular") : null;
+            return t("filtersMenu.appliedFiltersLabel.singular");
         default:
-            return jsx(Fragment, { children: t("filtersMenu.appliedFiltersLabel.plural", { count: filterBarConfig.appliedFilterKeys().length }) });
+            return jsx(Fragment, { children: t("filtersMenu.appliedFiltersLabel.plural", { count: appliedValuesCount }) });
     }
 };
 const CustomFieldsHiddenGroup = ({ appliedCustomFields, filterBarConfig, onShow, }) => {
@@ -1027,7 +1037,7 @@ const MultipleFilterTooltipLabel = ({ filterBarConfig, filterKeys, filters, }) =
     }, {});
     switch (appliedFilterKeys.length) {
         case 0:
-            return jsx("div", { className: "text-xs font-medium", children: t("filtersBar.appliedFiltersTooltip.none") });
+            return jsx("div", { className: "text-xs", children: t("filtersBar.appliedFiltersTooltip.none") });
         case 1:
             return (jsx(SingleFilterTooltipLabel, { filter: filtersMap[appliedFilterKeys[0]], filterBarConfig: filterBarConfig, filterKey: appliedFilterKeys[0] }));
         default:
@@ -1041,11 +1051,21 @@ const MultipleFilterTooltipLabel = ({ filterBarConfig, filterKeys, filters, }) =
  * @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, showAppliedFiltersCount = true, buttonProps, allowShowFiltersDirectly = true, includeFilterKeys, }) => {
+const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], compact = false, title, dataTestId = "filters-menu", className, buttonProps, allowShowFiltersDirectly = true, includeFilterKeys, }) => {
     const [t] = useTranslation();
-    const { isSm } = useViewportBreakpoints();
     const [showCustomFilters, setShowCustomFilters] = useState(false);
+    const { isSm } = useViewportBreakpoints();
     const filterBarDefinitionCount = useMemo(() => objectValues(filterBarDefinition).length, [filterBarDefinition]);
+    const totalAppliedValuesCount = useMemo(() => {
+        const appliedKeys = filterBarConfig.appliedFilterKeys();
+        return appliedKeys.reduce((total, key) => {
+            const values = filterBarConfig.getValuesByKey(key);
+            if (Array.isArray(values)) {
+                return total + values.length;
+            }
+            return total + (Boolean(values) ? 1 : 0);
+        }, 0);
+    }, [filterBarConfig]);
     const { appliedFilters, showDirectlyFilters, hasCustomFields, filtersToShowGrouped, searchResultsGrouped, searchText, appliedCustomFields, removeCustomFieldsGroup, setSearchText, } = useFiltersMenu({
         filterBarDefinition,
         filterBarConfig,
@@ -1053,14 +1073,14 @@ const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [],
         includeFilterKeys,
         allowShowFiltersDirectly,
     });
-    return (jsxs("div", { className: twMerge("flex items-center gap-2", className), "data-testid": dataTestId, children: [jsx(Popover, { onOpenStateChange: open => {
+    return (jsxs("div", { className: twMerge("flex items-start 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, filters: appliedFilters }), children: !isSm ? (jsx(IconButton, { "aria-label": title ?? t("filtersBar.filtersHeading"), icon: jsx(Icon, { ariaHidden: true, color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Filter", size: "small" }), size: "small", variant: "secondary", ...buttonProps })) : (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 ? (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 !== "" ? (title ?? t("filtersBar.filtersHeading")) : null })) }) }) }), jsx(PopoverContent, { cellPadding: 100, children: jsx(FiltersMenuContent, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, filterBarDefinitionCount: filterBarDefinitionCount, 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 ? jsx(AppliedFiltersRenderer, { appliedFilters: appliedFilters, filterBarConfig: filterBarConfig }) : 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: modalState.isOpen, label: jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filters: appliedFilters }), placement: "bottom", children: !isSm ? (jsx(Button, { "aria-label": title ?? t("filtersBar.filtersHeading"), prefix: jsx(Icon, { ariaHidden: true, color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", suffix: totalAppliedValuesCount > 0 ? (jsx(Badge, { color: "primary", count: totalAppliedValuesCount, hideZero: true, size: "condensed" })) : null, variant: "secondary", ...buttonProps })) : (jsx(Button, { prefix: jsx(Icon, { ariaHidden: true, color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", suffix: totalAppliedValuesCount > 0 ? (jsx(Badge, { color: "primary", count: totalAppliedValuesCount, hideZero: true, size: "condensed" })) : null, variant: "secondary", ...buttonProps, children: title !== "" ? (title ?? t("filtersBar.filtersHeading")) : null })) }) }) }), jsx(PopoverContent, { cellPadding: 100, children: jsx(FiltersMenuContent, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, filterBarDefinitionCount: filterBarDefinitionCount, 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 === false ? (jsx(AppliedFiltersRenderer, { appliedFilters: appliedFilters, filterBarConfig: filterBarConfig })) : null] }));
 };
 
 /**
@@ -1078,17 +1098,35 @@ const FilterTableComponent = ({ filterKey, filterBarDefinition, filterBarConfig,
         }
         return [];
     }, [filterKey, filterBarDefinition, ensureFilterKey]);
+    // Helper function to get manually applied filter count (excluding default values)
+    const getManuallyAppliedFilterCount = useCallback((keys) => {
+        return keys.reduce((total, key) => {
+            const filterValues = filterBarConfig.getValuesByKey(key);
+            const isDefaultValue = filterBarConfig.isDefaultValue(key, filterValues);
+            if (isDefaultValue) {
+                return total; // Don't count default values
+            }
+            if (Array.isArray(filterValues)) {
+                return total + filterValues.length;
+            }
+            return total + (filterValues ? 1 : 0);
+        }, 0);
+    }, [filterBarConfig]);
     if (Array.isArray(filterKey)) {
-        const isActive = filterKey.some(key => filterBarConfig.appliedFilterKeys().includes(key));
+        const appliedFilterKeys = filterBarConfig.appliedFilterKeys();
+        const activeFilterKeys = filterKey.filter(key => appliedFilterKeys.includes(key));
+        const multipleFiltersAppliedCount = getManuallyAppliedFilterCount(activeFilterKeys);
+        const multipleFiltersIsActive = multipleFiltersAppliedCount > 0;
         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, 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))) }) })] }));
+                return (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: jsx("div", { className: "relative", children: jsx(Tooltip, { disabled: modalState.isOpen || !multipleFiltersIsActive, label: jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKeys: filterKey, filters: filters }), placement: "bottom", children: jsx(IconButton, { icon: jsx(Icon, { name: "Funnel", size: "small" }), size: "extraSmall", variant: multipleFiltersIsActive ? "ghost" : "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, { filter: filter, filterBarConfig: filterBarConfig, filterKey: filterKey }), placement: "bottom", children: jsx(FilterComponent, { asIcon: "Filter", filter: filter, filterBarActions: filterBarConfig, filterState: filterBarConfig, size: "extraSmall" }) }) }));
+    const isActive = filterBarConfig.appliedFilterKeys().includes(filterKey);
+    return (jsx("div", { onClick: event => event.stopPropagation(), children: jsx("div", { className: "relative", children: jsx(Tooltip, { disabled: !isActive, label: jsx(SingleFilterTooltipLabel, { filter: filter, filterBarConfig: filterBarConfig, filterKey: filterKey }), placement: "bottom", children: jsx(FilterComponent, { asIcon: "Funnel", filter: filter, filterBarActions: filterBarConfig, filterState: filterBarConfig, size: "extraSmall" }) }) }) }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "1.8.4",
+  "version": "1.8.6",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,16 +14,16 @@
     "string-ts": "^2.0.0",
     "zod": "^3.23.8",
     "@trackunit/iris-app-api": "1.7.4",
-    "@trackunit/react-core-hooks": "1.7.4",
-    "@trackunit/react-filter-components": "1.7.4",
-    "@trackunit/react-date-and-time-components": "1.10.4",
+    "@trackunit/react-core-hooks": "1.7.5",
+    "@trackunit/react-filter-components": "1.7.6",
+    "@trackunit/react-date-and-time-components": "1.10.6",
     "@trackunit/shared-utils": "1.9.4",
-    "@trackunit/react-form-components": "1.8.4",
-    "@trackunit/react-core-contexts-api": "1.8.4",
+    "@trackunit/react-form-components": "1.8.6",
+    "@trackunit/react-core-contexts-api": "1.8.5",
     "@trackunit/geo-json-utils": "1.7.4",
-    "@trackunit/i18n-library-translation": "1.7.4",
+    "@trackunit/i18n-library-translation": "1.7.5",
     "@trackunit/css-class-variance-utilities": "1.7.4",
-    "@trackunit/react-components": "1.9.4",
+    "@trackunit/react-components": "1.9.6",
     "@trackunit/react-test-setup": "1.4.4",
     "@tanstack/react-router": "1.114.29"
   },

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

@@ -22,10 +22,6 @@ 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)
      */
@@ -45,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, showAppliedFiltersCount, buttonProps, allowShowFiltersDirectly, includeFilterKeys, }: FiltersMenuProps<TFilterBarDefinition>) => ReactElement;
+export declare const FiltersMenu: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarDefinition, filterBarConfig, hiddenFilters, compact, title, dataTestId, className, buttonProps, allowShowFiltersDirectly, includeFilterKeys, }: FiltersMenuProps<TFilterBarDefinition>) => ReactElement;
 export {};