@trackunit/filters-filter-bar 1.3.190 → 1.3.192

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",
@@ -779,6 +779,99 @@ 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}`)));
 };
 
+/**
+ * TooltipValues component that displays formatted tooltip values based on the provided input.
+ *
+ * @param {TooltipValuesProps} props - The props for the TooltipValues component.
+ * @param {FilterValueType} props.values - The input values to render in the tooltip.
+ * @returns {ReactElement} The rendered TooltipValues component.
+ */
+const TooltipValues = ({ values }) => {
+    return jsxRuntime.jsx("div", { children: renderTooltipValues(values) });
+};
+const renderTooltipValues = (values) => {
+    if (values === undefined) {
+        return null;
+    }
+    // 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))) }));
+    }
+    // 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));
+            }) }));
+    }
+    // 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 }) }));
+    }
+    // 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";
+    }
+    // MinMaxFilterValue
+    if (typeof values === "object" && "min" in values && "max" in values) {
+        const minMax = values;
+        return `Min: ${minMax.min}, Max: ${minMax.max}`;
+    }
+    return null;
+};
+
+/**
+ * Component that displays a tooltip label with filter details.
+ *
+ * @template TFilterBarDefinition - The type of the filter bar definition.
+ * @param {SingleFilterTooltipLabelProps} props - Component properties.
+ * @param {FilterState<TFilterBarDefinition> & FilterMapActions & FilterMapGetter} props.filterBarConfig -
+ *   Configuration object for the filter bar, containing state, actions, and accessors.
+ * @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 })] }));
+};
+
+/**
+ * Component that displays a tooltip for filters.
+ * Differentiates cases with no applied filters, a single filter, or multiple filters.
+ *
+ * @template TFilterBarDefinition The type definition for the FilterBar.
+ * @param {MultipleFilterTooltipLabelProps} props The component's props.
+ * @param {FilterState<TFilterBarDefinition> & FilterMapActions & FilterMapGetter} props.filterBarConfig
+ * The FilterBar configuration, including filter state, actions, and getter methods.
+ * @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 [t] = useTranslation();
+    const appliedFilterKeys = filterKeys
+        ? filterKeys.filter(key => filterBarConfig.appliedFilterKeys().includes(key))
+        : filterBarConfig.appliedFilterKeys();
+    switch (appliedFilterKeys.length) {
+        case 0:
+            return t("filtersBar.appliedFiltersTooltip.none");
+        case 1:
+            return jsxRuntime.jsx(SingleFilterTooltipLabel, { 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;
+                    })] }));
+    }
+};
+
 /**
  * FiltersList is a React component that displays a list of filters within a filter bar.
  *
@@ -847,7 +940,7 @@ const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [],
                         setSearchText("");
                     }
                 }, placement: "bottom-start", children: modalState => {
-                    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { "data-testid": "starred-filters-menu-trigger", id: "starred-filters-menu-trigger", children: jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !compact || modalState.isOpen, label: jsxRuntime.jsx(FilterButtonTooltipLabel, { filterBarConfig: filterBarConfig }), children: jsxRuntime.jsx(reactComponents.Button, { prefix: jsxRuntime.jsx(reactComponents.Icon, { ariaHidden: true, color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Filter", size: "small" }), size: "small", suffix: compact && filterBarConfig.appliedFilterKeys().length > 0 && isSm ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("span", { "aria-hidden": true, children: ["(", filterBarConfig.appliedFilterKeys().length, ")"] }), jsxRuntime.jsxs("span", { className: "sr-only", children: [filterBarConfig.appliedFilterKeys().length, " filters applied"] })] })) : undefined, variant: "secondary", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: title ?? t("filtersBar.filtersHeading") }) }) }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { cellPadding: 100, children: jsxRuntime.jsxs(reactComponents.Card, { className: "max-h-[min(600px,_calc(100dvh-32px))] w-[300px] overflow-y-hidden", dataTestId: "starred-filters-menu-popover", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 p-1", children: [jsxRuntime.jsx(reactFormComponents.Search, { autoFocus: true, dataTestId: "starred-filters-menu-search", fieldSize: "small", id: "search-filters-list", onChange: e => setSearchText(e.currentTarget.value), onClear: () => setSearchText(""), placeholder: t("filtersBar.searchFiltersPlaceholder"), value: searchText }), jsxRuntime.jsxs("div", { className: "flex h-7 items-center justify-between gap-1 px-3", children: [jsxRuntime.jsx(reactComponents.Text, { className: "text-secondary-400", size: "small", children: jsxRuntime.jsx(FiltersAppliedCountLabel, { filterBarConfig: filterBarConfig }) }), filterBarConfig.appliedFilterKeys().length > 0 ? (jsxRuntime.jsx(ResetFiltersButton, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] })] }), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(reactComponents.CardBody, { className: "gap-1 p-1", density: "none", disableGap: true, children: [jsxRuntime.jsx(GroupedFiltersList, { className: "flex flex-col gap-1", filterBarConfig: filterBarConfig, filtersGrouped: searchText
+                    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
@@ -857,21 +950,6 @@ const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [],
                 } }), showDirectlyFilters.length > 0 ? (jsxRuntime.jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, !compact ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [appliedFilters.filter(filter => !filter.showDirectly).length > 0 ? (jsxRuntime.jsx("div", { className: "h-4 w-[1px] bg-slate-300", "data-testid": "applied-filters-buttons" })) : null, jsxRuntime.jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: appliedFilters }), filterBarConfig.appliedFilterKeys().length > 0 ? (jsxRuntime.jsx(ResetFiltersButton, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] })) : null] }));
 };
 const Separator = () => jsxRuntime.jsx("hr", { className: "border-secondary-200", role: "separator" });
-const FilterButtonTooltipLabel = ({ filterBarConfig, }) => {
-    const [t] = useTranslation();
-    switch (filterBarConfig.appliedFilterKeys().length) {
-        case 0:
-            return t("filtersBar.appliedFiltersTooltip.none");
-        case 1:
-            return filterBarConfig.appliedFilterKeys()[0]
-                ? t("filtersBar.appliedFiltersTooltip.singular", {
-                    filterName: filterBarConfig.getFilterTitle(filterBarConfig.appliedFilterKeys()[0]),
-                })
-                : null; // should never happen though
-        default:
-            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [t("filtersBar.appliedFiltersTooltip.plural", { count: filterBarConfig.appliedFilterKeys().length }), jsxRuntime.jsx("ul", { className: "list-inside", children: filterBarConfig.appliedFilterKeys().map((appliedFilterKey, index) => (jsxRuntime.jsx("li", { className: "list-disc", children: filterBarConfig.getFilterTitle(appliedFilterKey) }, index))) })] }));
-    }
-};
 const FiltersAppliedCountLabel = ({ filterBarConfig, }) => {
     const [t] = useTranslation();
     switch (filterBarConfig.appliedFilterKeys().length) {
@@ -906,13 +984,16 @@ const FilterTableComponent = ({ filterKey, filterBarDefinition, filterBarConfig,
         return [];
     }, [filterKey, filterBarDefinition, ensureFilterKey]);
     if (Array.isArray(filterKey)) {
-        return (jsxRuntime.jsx(reactComponents.MoreMenu, { customButton: jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { color: filterKey.some(key => filterBarConfig.appliedFilterKeys().includes(key)) ? "primary" : undefined, name: "Filter", size: "small" }), onClick: event => event.stopPropagation(), size: "extraSmall", variant: "ghost-neutral" }), children: () => (jsxRuntime.jsx(reactComponents.MenuList, { children: filters.map((value, index) => value && (jsxRuntime.jsx(FilterComponent, { filter: value, filterBarActions: filterBarConfig, filterState: filterBarConfig, visualStyle: "list-item" }, index))) })) }));
+        const 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))) }) })] }));
+            } }));
     }
     const filter = filterBarDefinition[ensureFilterKey(filterKey)];
     if (!filter) {
         return null;
     }
-    return (jsxRuntime.jsx("div", { onClick: event => event.stopPropagation(), children: jsxRuntime.jsx(FilterComponent, { asIcon: "Filter", filter: filter, filterBarActions: filterBarConfig, filterState: filterBarConfig, size: "extraSmall" }) }));
+    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" }) }) }));
 };
 
 /**

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, MoreMenu, IconButton, MenuList } from '@trackunit/react-components';
+import { VirtualizedList, Text, Button, useViewportBreakpoints, Popover, PopoverTrigger, Tooltip, Icon, PopoverContent, Card, CardBody, 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",
@@ -777,6 +777,99 @@ 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}`)));
 };
 
+/**
+ * TooltipValues component that displays formatted tooltip values based on the provided input.
+ *
+ * @param {TooltipValuesProps} props - The props for the TooltipValues component.
+ * @param {FilterValueType} props.values - The input values to render in the tooltip.
+ * @returns {ReactElement} The rendered TooltipValues component.
+ */
+const TooltipValues = ({ values }) => {
+    return jsx("div", { children: renderTooltipValues(values) });
+};
+const renderTooltipValues = (values) => {
+    if (values === undefined) {
+        return null;
+    }
+    // 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))) }));
+    }
+    // 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));
+            }) }));
+    }
+    // single object ValueName
+    if (typeof values === "object" && values.name) {
+        return (jsx("ul", { className: "list-inside", children: jsx("li", { className: "list-disc", 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";
+    }
+    // MinMaxFilterValue
+    if (typeof values === "object" && "min" in values && "max" in values) {
+        const minMax = values;
+        return `Min: ${minMax.min}, Max: ${minMax.max}`;
+    }
+    return null;
+};
+
+/**
+ * Component that displays a tooltip label with filter details.
+ *
+ * @template TFilterBarDefinition - The type of the filter bar definition.
+ * @param {SingleFilterTooltipLabelProps} props - Component properties.
+ * @param {FilterState<TFilterBarDefinition> & FilterMapActions & FilterMapGetter} props.filterBarConfig -
+ *   Configuration object for the filter bar, containing state, actions, and accessors.
+ * @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 })] }));
+};
+
+/**
+ * Component that displays a tooltip for filters.
+ * Differentiates cases with no applied filters, a single filter, or multiple filters.
+ *
+ * @template TFilterBarDefinition The type definition for the FilterBar.
+ * @param {MultipleFilterTooltipLabelProps} props The component's props.
+ * @param {FilterState<TFilterBarDefinition> & FilterMapActions & FilterMapGetter} props.filterBarConfig
+ * The FilterBar configuration, including filter state, actions, and getter methods.
+ * @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 [t] = useTranslation();
+    const appliedFilterKeys = filterKeys
+        ? filterKeys.filter(key => filterBarConfig.appliedFilterKeys().includes(key))
+        : filterBarConfig.appliedFilterKeys();
+    switch (appliedFilterKeys.length) {
+        case 0:
+            return t("filtersBar.appliedFiltersTooltip.none");
+        case 1:
+            return jsx(SingleFilterTooltipLabel, { 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;
+                    })] }));
+    }
+};
+
 /**
  * FiltersList is a React component that displays a list of filters within a filter bar.
  *
@@ -845,7 +938,7 @@ const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [],
                         setSearchText("");
                     }
                 }, placement: "bottom-start", children: modalState => {
-                    return (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: jsx("div", { "data-testid": "starred-filters-menu-trigger", id: "starred-filters-menu-trigger", children: jsx(Tooltip, { disabled: !compact || modalState.isOpen, label: jsx(FilterButtonTooltipLabel, { filterBarConfig: filterBarConfig }), children: jsx(Button, { prefix: jsx(Icon, { ariaHidden: true, color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Filter", size: "small" }), size: "small", suffix: compact && filterBarConfig.appliedFilterKeys().length > 0 && isSm ? (jsxs("div", { children: [jsxs("span", { "aria-hidden": true, children: ["(", filterBarConfig.appliedFilterKeys().length, ")"] }), jsxs("span", { className: "sr-only", children: [filterBarConfig.appliedFilterKeys().length, " filters applied"] })] })) : undefined, variant: "secondary", children: jsx("span", { className: "hidden sm:block", children: title ?? t("filtersBar.filtersHeading") }) }) }) }) }), jsx(PopoverContent, { cellPadding: 100, children: jsxs(Card, { className: "max-h-[min(600px,_calc(100dvh-32px))] w-[300px] overflow-y-hidden", dataTestId: "starred-filters-menu-popover", children: [jsxs("div", { className: "flex flex-col gap-1 p-1", children: [jsx(Search, { autoFocus: true, dataTestId: "starred-filters-menu-search", fieldSize: "small", id: "search-filters-list", onChange: e => setSearchText(e.currentTarget.value), onClear: () => setSearchText(""), placeholder: t("filtersBar.searchFiltersPlaceholder"), value: searchText }), jsxs("div", { className: "flex h-7 items-center justify-between gap-1 px-3", children: [jsx(Text, { className: "text-secondary-400", size: "small", children: jsx(FiltersAppliedCountLabel, { filterBarConfig: filterBarConfig }) }), filterBarConfig.appliedFilterKeys().length > 0 ? (jsx(ResetFiltersButton, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] })] }), jsx(Separator, {}), jsxs(CardBody, { className: "gap-1 p-1", density: "none", disableGap: true, children: [jsx(GroupedFiltersList, { className: "flex flex-col gap-1", filterBarConfig: filterBarConfig, filtersGrouped: searchText
+                    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
@@ -855,21 +948,6 @@ const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [],
                 } }), showDirectlyFilters.length > 0 ? (jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, !compact ? (jsxs(Fragment, { children: [appliedFilters.filter(filter => !filter.showDirectly).length > 0 ? (jsx("div", { className: "h-4 w-[1px] bg-slate-300", "data-testid": "applied-filters-buttons" })) : null, jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: appliedFilters }), filterBarConfig.appliedFilterKeys().length > 0 ? (jsx(ResetFiltersButton, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] })) : null] }));
 };
 const Separator = () => jsx("hr", { className: "border-secondary-200", role: "separator" });
-const FilterButtonTooltipLabel = ({ filterBarConfig, }) => {
-    const [t] = useTranslation();
-    switch (filterBarConfig.appliedFilterKeys().length) {
-        case 0:
-            return t("filtersBar.appliedFiltersTooltip.none");
-        case 1:
-            return filterBarConfig.appliedFilterKeys()[0]
-                ? t("filtersBar.appliedFiltersTooltip.singular", {
-                    filterName: filterBarConfig.getFilterTitle(filterBarConfig.appliedFilterKeys()[0]),
-                })
-                : null; // should never happen though
-        default:
-            return (jsxs(Fragment, { children: [t("filtersBar.appliedFiltersTooltip.plural", { count: filterBarConfig.appliedFilterKeys().length }), jsx("ul", { className: "list-inside", children: filterBarConfig.appliedFilterKeys().map((appliedFilterKey, index) => (jsx("li", { className: "list-disc", children: filterBarConfig.getFilterTitle(appliedFilterKey) }, index))) })] }));
-    }
-};
 const FiltersAppliedCountLabel = ({ filterBarConfig, }) => {
     const [t] = useTranslation();
     switch (filterBarConfig.appliedFilterKeys().length) {
@@ -904,13 +982,16 @@ const FilterTableComponent = ({ filterKey, filterBarDefinition, filterBarConfig,
         return [];
     }, [filterKey, filterBarDefinition, ensureFilterKey]);
     if (Array.isArray(filterKey)) {
-        return (jsx(MoreMenu, { customButton: jsx(IconButton, { icon: jsx(Icon, { color: filterKey.some(key => filterBarConfig.appliedFilterKeys().includes(key)) ? "primary" : undefined, name: "Filter", size: "small" }), onClick: event => event.stopPropagation(), size: "extraSmall", variant: "ghost-neutral" }), children: () => (jsx(MenuList, { children: filters.map((value, index) => value && (jsx(FilterComponent, { filter: value, filterBarActions: filterBarConfig, filterState: filterBarConfig, visualStyle: "list-item" }, index))) })) }));
+        const 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))) }) })] }));
+            } }));
     }
     const filter = filterBarDefinition[ensureFilterKey(filterKey)];
     if (!filter) {
         return null;
     }
-    return (jsx("div", { onClick: event => event.stopPropagation(), children: jsx(FilterComponent, { asIcon: "Filter", filter: filter, filterBarActions: filterBarConfig, filterState: filterBarConfig, size: "extraSmall" }) }));
+    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" }) }) }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "1.3.190",
+  "version": "1.3.192",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -13,19 +13,19 @@
     "jest-fetch-mock": "^3.0.3",
     "tailwind-merge": "^2.0.0",
     "string-ts": "^2.0.0",
-    "@trackunit/iris-app-api": "1.3.123",
-    "@trackunit/react-core-hooks": "1.3.128",
-    "@trackunit/react-filter-components": "1.3.159",
-    "@trackunit/react-date-and-time-components": "1.3.162",
     "zod": "3.23.4",
-    "@trackunit/shared-utils": "1.5.118",
-    "@trackunit/react-form-components": "1.3.159",
-    "@trackunit/react-core-contexts-api": "1.4.124",
-    "@trackunit/geo-json-utils": "1.3.118",
-    "@trackunit/i18n-library-translation": "1.3.132",
-    "@trackunit/css-class-variance-utilities": "1.3.118",
-    "@trackunit/react-components": "1.4.141",
-    "@trackunit/react-test-setup": "1.0.8"
+    "@trackunit/iris-app-api": "1.3.124",
+    "@trackunit/react-core-hooks": "1.3.129",
+    "@trackunit/react-filter-components": "1.3.161",
+    "@trackunit/react-date-and-time-components": "1.3.164",
+    "@trackunit/shared-utils": "1.5.119",
+    "@trackunit/react-form-components": "1.3.161",
+    "@trackunit/react-core-contexts-api": "1.4.125",
+    "@trackunit/geo-json-utils": "1.3.119",
+    "@trackunit/i18n-library-translation": "1.3.133",
+    "@trackunit/css-class-variance-utilities": "1.3.119",
+    "@trackunit/react-components": "1.4.143",
+    "@trackunit/react-test-setup": "1.0.9"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

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

@@ -0,0 +1,19 @@
+import { ReactElement } from "react";
+import { FilterBarDefinition, FilterMapActions, FilterMapGetter, FilterState } from "../../types/FilterTypes";
+interface MultipleFilterTooltipLabelProps<TFilterBarDefinition extends FilterBarDefinition> {
+    filterBarConfig: FilterState<TFilterBarDefinition> & FilterMapActions & FilterMapGetter;
+    filterKeys?: string[];
+}
+/**
+ * Component that displays a tooltip for filters.
+ * Differentiates cases with no applied filters, a single filter, or multiple filters.
+ *
+ * @template TFilterBarDefinition The type definition for the FilterBar.
+ * @param {MultipleFilterTooltipLabelProps} props The component's props.
+ * @param {FilterState<TFilterBarDefinition> & FilterMapActions & FilterMapGetter} props.filterBarConfig
+ * The FilterBar configuration, including filter state, actions, and getter methods.
+ * @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;
+export default MultipleFilterTooltipLabel;

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

@@ -0,0 +1,18 @@
+import { ReactElement } from "react";
+import { FilterBarDefinition, FilterMapActions, FilterMapGetter, FilterState } from "../../types/FilterTypes";
+interface SingleFilterTooltipLabelProps<TFilterBarDefinition extends FilterBarDefinition> {
+    filterBarConfig: FilterState<TFilterBarDefinition> & FilterMapActions & FilterMapGetter;
+    filterKey: string;
+}
+/**
+ * Component that displays a tooltip label with filter details.
+ *
+ * @template TFilterBarDefinition - The type of the filter bar definition.
+ * @param {SingleFilterTooltipLabelProps} props - Component properties.
+ * @param {FilterState<TFilterBarDefinition> & FilterMapActions & FilterMapGetter} props.filterBarConfig -
+ *   Configuration object for the filter bar, containing state, actions, and accessors.
+ * @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;
+export default SingleFilterTooltipLabel;

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

@@ -0,0 +1,14 @@
+import { ReactElement } from "react";
+import { FilterValueType } from "../../types/FilterTypes";
+type TooltipValuesProps = {
+    values: FilterValueType;
+};
+/**
+ * TooltipValues component that displays formatted tooltip values based on the provided input.
+ *
+ * @param {TooltipValuesProps} props - The props for the TooltipValues component.
+ * @param {FilterValueType} props.values - The input values to render in the tooltip.
+ * @returns {ReactElement} The rendered TooltipValues component.
+ */
+declare const TooltipValues: ({ values }: TooltipValuesProps) => ReactElement;
+export default TooltipValues;