@trackunit/filters-filter-bar 1.3.201 → 1.3.202

package/index.cjs.js

@@ -110,7 +110,7 @@ var defaultTranslations = {
 	"filter.more.options.if.you.search.title": "Over {{count}} items found.",
 	"filtersBar.appliedFiltersTooltip.none": "No filters applied",
 	"filtersBar.appliedFiltersTooltip.plural": "{{count}} filters applied:",
-	"filtersBar.appliedFiltersTooltip.singular": "{{filterName}} filter applied:",
+	"filtersBar.appliedFiltersTooltip.singular": "{{filterName}} filter applied",
 	"filtersBar.defaultAssetFilters.followedFilter.ALL": "All Assets",
 	"filtersBar.defaultAssetFilters.followedFilter.allLabel": "All Assets",
 	"filtersBar.defaultAssetFilters.followedFilter.FOLLOWED": "Followed Only",
@@ -919,40 +919,28 @@ const CustomFieldsHiddenGroup = ({ appliedCustomFields, filterBarConfig, onShow,
  * @returns {ReactElement} The rendered TooltipValues component.
  */
 const TooltipValues = ({ values }) => {
-    return jsxRuntime.jsx("div", { children: renderTooltipValues(values) });
-};
-const renderTooltipValues = (values) => {
     if (values === undefined) {
-        return null;
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
     // Array of objects ValueName[]
     if (Array.isArray(values) && typeof values[0] === "object") {
-        return (jsxRuntime.jsx("ul", { className: "list-inside", children: values.map((value, index) => (jsxRuntime.jsx("li", { className: "list-disc", children: value.name }, index))) }));
+        return (jsxRuntime.jsx("ul", { className: "list-inside pl-2", children: values.map((value, index) => (jsxRuntime.jsx("li", { className: "list-disc text-xs font-normal", children: value.name }, index))) }));
     }
     // Array of strings
-    if (Array.isArray(values)) {
-        return (jsxRuntime.jsx("ul", { className: "list-inside", children: values.map((value, index) => {
-                return (jsxRuntime.jsx("li", { className: "list-disc", children: typeof value === "string" ? value : value.name }, index));
+    if (Array.isArray(values) && typeof values[0] === "string") {
+        return (jsxRuntime.jsx("ul", { className: "list-inside pl-2", children: values.map((value, index) => {
+                return (jsxRuntime.jsx("li", { className: "list-disc text-xs font-normal", children: typeof value === "string" ? value : value.name }, index));
             }) }));
     }
     // single object ValueName
     if (typeof values === "object" && values.name) {
-        return (jsxRuntime.jsx("ul", { className: "list-inside", children: jsxRuntime.jsx("li", { className: "list-disc", children: values.name }) }));
+        return (jsxRuntime.jsx("ul", { className: "list-inside pl-2", children: jsxRuntime.jsx("li", { className: "list-disc text-xs font-normal", children: values.name }) }));
     }
     // String or number
     if (typeof values === "string" || typeof values === "number") {
-        return (jsxRuntime.jsx("ul", { className: "list-inside", children: jsxRuntime.jsx("li", { className: "list-disc", children: values.toString() }) }));
-    }
-    // BooleanValue
-    if (typeof values === "object" && values.booleanValue !== undefined) {
-        return values.booleanValue ? "Yes" : "No";
+        return (jsxRuntime.jsx("ul", { className: "list-inside pl-2", children: jsxRuntime.jsx("li", { className: "list-disc text-xs font-normal", children: values.toString() }) }));
     }
-    // MinMaxFilterValue
-    if (typeof values === "object" && "min" in values && "max" in values) {
-        const minMax = values;
-        return `Min: ${minMax.min}, Max: ${minMax.max}`;
-    }
-    return null;
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
 };
 
 /**
@@ -965,13 +953,16 @@ const renderTooltipValues = (values) => {
  * @param {string} props.filterKey - The key identifying the filter.
  * @returns {ReactElement} The rendered tooltip label and applied filter values.
  */
-const SingleFilterTooltipLabel = ({ filterBarConfig, filterKey, }) => {
-    const title = filterBarConfig.getFilterTitle(filterKey);
-    const values = filterBarConfig.getValuesByKey(filterKey);
-    const [t] = useTranslation();
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [t("filtersBar.appliedFiltersTooltip.singular", {
-                filterName: title,
-            }), jsxRuntime.jsx(TooltipValues, { values: values })] }));
+const SingleFilterTooltipLabel = ({ filterBarConfig, filter, filterKey, }) => {
+    const title = react.useMemo(() => filterBarConfig.getFilterTitle(filterKey), [filterBarConfig, filterKey]);
+    const values = react.useMemo(() => filterBarConfig.getValuesByKey(filterKey), [filterBarConfig, filterKey]);
+    const displayValues = react.useMemo(() => {
+        if (filter?.valueAsText) {
+            return filter.valueAsText(values);
+        }
+        return values;
+    }, [filter, values]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "text-xs font-medium", children: title }), jsxRuntime.jsx(TooltipValues, { values: displayValues })] }));
 };
 
 /**
@@ -985,22 +976,23 @@ const SingleFilterTooltipLabel = ({ filterBarConfig, filterKey, }) => {
  * @param {string[]} [props.filterKeys] An optional list of filter keys to filter the currently applied filters.
  * @returns {ReactElement | string} Returns a element or string for the tooltip displaying applied filters.
  */
-const MultipleFilterTooltipLabel = ({ filterBarConfig, filterKeys, }) => {
+const MultipleFilterTooltipLabel = ({ filterBarConfig, filterKeys, filters, }) => {
     const [t] = useTranslation();
-    const appliedFilterKeys = filterKeys
-        ? filterKeys.filter(key => filterBarConfig.appliedFilterKeys().includes(key))
-        : filterBarConfig.appliedFilterKeys();
+    const appliedKeys = filterBarConfig.appliedFilterKeys();
+    const appliedFilterKeys = filterKeys ? filterKeys.filter(key => appliedKeys.includes(key)) : appliedKeys;
+    const filtersMap = filters.reduce((acc, filter) => {
+        if (filter.filterKey) {
+            acc[filter.filterKey] = filter;
+        }
+        return acc;
+    }, {});
     switch (appliedFilterKeys.length) {
         case 0:
             return t("filtersBar.appliedFiltersTooltip.none");
         case 1:
-            return jsxRuntime.jsx(SingleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKey: appliedFilterKeys[0] });
+            return (jsxRuntime.jsx(SingleFilterTooltipLabel, { filter: filtersMap[appliedFilterKeys[0]], filterBarConfig: filterBarConfig, filterKey: appliedFilterKeys[0] }));
         default:
-            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [t("filtersBar.appliedFiltersTooltip.plural", { count: appliedFilterKeys.length }), appliedFilterKeys.map(filterKey => {
-                        const title = filterBarConfig.getFilterTitle(filterKey);
-                        const values = filterBarConfig.getValuesByKey(filterKey);
-                        return filterBarConfig.appliedFilterKeys().includes(filterKey) ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { children: [title, ":"] }), jsxRuntime.jsx(TooltipValues, { values: values })] }, filterKey)) : null;
-                    })] }));
+            return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: appliedFilterKeys.map(filterKey => (jsxRuntime.jsx(SingleFilterTooltipLabel, { filter: filtersMap[filterKey], filterBarConfig: filterBarConfig, filterKey: filterKey }, filterKey))) }));
     }
 };
 
@@ -1026,7 +1018,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(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 }) })] }));
+                    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { "data-testid": "starred-filters-menu-trigger", id: "starred-filters-menu-trigger", children: jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !compact || modalState.isOpen, label: jsxRuntime.jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filters: appliedFilters }), children: jsxRuntime.jsx(reactComponents.Button, { prefix: jsxRuntime.jsx(reactComponents.Icon, { ariaHidden: true, color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Filter", size: "small" }), size: "small", suffix: compact && showAppliedFiltersCount && filterBarConfig.appliedFilterKeys().length > 0 && isSm ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("span", { "aria-hidden": true, children: ["(", filterBarConfig.appliedFilterKeys().length, ")"] }), jsxRuntime.jsxs("span", { className: "sr-only", children: [filterBarConfig.appliedFilterKeys().length, " filters applied"] })] })) : undefined, variant: "secondary", ...buttonProps, children: title !== "" ? (jsxRuntime.jsx("span", { className: "hidden sm:block", children: title ?? t("filtersBar.filtersHeading") })) : null }) }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { cellPadding: 100, children: jsxRuntime.jsx(FiltersMenuContent, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, filtersToShowGrouped: filtersToShowGrouped, hasCustomFields: hasCustomFields, removeCustomFieldsGroup: removeCustomFieldsGroup, searchResultsGrouped: searchResultsGrouped, searchText: searchText, setSearchText: setSearchText, setShowCustomFilters: setShowCustomFilters, showCustomFilters: showCustomFilters }) })] }));
                 } }), showDirectlyFilters.length > 0 ? (jsxRuntime.jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, !compact ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [appliedFilters.filter(filter => !filter.showDirectly).length > 0 ? (jsxRuntime.jsx("div", { className: "h-4 w-[1px] bg-slate-300", "data-testid": "applied-filters-buttons" })) : null, jsxRuntime.jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: appliedFilters }), filterBarConfig.appliedFilterKeys().length > 0 ? (jsxRuntime.jsx(ResetFiltersButton, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] })) : null] }));
 };
 
@@ -1049,14 +1041,14 @@ const FilterTableComponent = ({ filterKey, filterBarDefinition, filterBarConfig,
     if (Array.isArray(filterKey)) {
         const isActive = filterKey.some(key => filterBarConfig.appliedFilterKeys().includes(key));
         return (jsxRuntime.jsx(reactComponents.Popover, { placement: "bottom-start", children: modalState => {
-                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(reactComponents.Tooltip, { disabled: modalState.isOpen || !isActive, label: jsxRuntime.jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKeys: filterKey }), children: jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Filter", size: "small" }), size: "extraSmall", variant: isActive ? "filled" : "ghost-neutral" }) }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(reactComponents.MenuList, { children: filters.map((value, index) => value && (jsxRuntime.jsx(FilterComponent, { filter: value, filterBarActions: filterBarConfig, filterState: filterBarConfig, visualStyle: "list-item" }, index))) }) })] }));
+                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(reactComponents.Tooltip, { disabled: modalState.isOpen || !isActive, label: jsxRuntime.jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKeys: filterKey, filters: filters }), placement: "bottom", children: jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Filter", size: "small" }), size: "extraSmall", variant: isActive ? "filled" : "ghost-neutral" }) }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(reactComponents.MenuList, { children: filters.map((value, index) => value && (jsxRuntime.jsx(FilterComponent, { filter: value, filterBarActions: filterBarConfig, filterState: filterBarConfig, visualStyle: "list-item" }, index))) }) })] }));
             } }));
     }
     const filter = filterBarDefinition[ensureFilterKey(filterKey)];
     if (!filter) {
         return null;
     }
-    return (jsxRuntime.jsx("div", { onClick: event => event.stopPropagation(), children: jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !filterBarConfig.appliedFilterKeys().includes(filterKey), label: jsxRuntime.jsx(SingleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKey: filterKey }), children: jsxRuntime.jsx(FilterComponent, { asIcon: "Filter", filter: filter, filterBarActions: filterBarConfig, filterState: filterBarConfig, size: "extraSmall" }) }) }));
+    return (jsxRuntime.jsx("div", { onClick: event => event.stopPropagation(), children: jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !filterBarConfig.appliedFilterKeys().includes(filterKey), label: jsxRuntime.jsx(SingleFilterTooltipLabel, { filter: filter, filterBarConfig: filterBarConfig, filterKey: filterKey }), placement: "bottom", children: jsxRuntime.jsx(FilterComponent, { asIcon: "Filter", filter: filter, filterBarActions: filterBarConfig, filterState: filterBarConfig, size: "extraSmall" }) }) }));
 };
 
 /**

package/index.esm.js

@@ -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",
@@ -917,40 +917,28 @@ const CustomFieldsHiddenGroup = ({ appliedCustomFields, filterBarConfig, onShow,
  * @returns {ReactElement} The rendered TooltipValues component.
  */
 const TooltipValues = ({ values }) => {
-    return jsx("div", { children: renderTooltipValues(values) });
-};
-const renderTooltipValues = (values) => {
     if (values === undefined) {
-        return null;
+        return jsx(Fragment, {});
     }
     // Array of objects ValueName[]
     if (Array.isArray(values) && typeof values[0] === "object") {
-        return (jsx("ul", { className: "list-inside", children: values.map((value, index) => (jsx("li", { className: "list-disc", children: value.name }, index))) }));
+        return (jsx("ul", { className: "list-inside pl-2", children: values.map((value, index) => (jsx("li", { className: "list-disc text-xs font-normal", children: value.name }, index))) }));
     }
     // Array of strings
-    if (Array.isArray(values)) {
-        return (jsx("ul", { className: "list-inside", children: values.map((value, index) => {
-                return (jsx("li", { className: "list-disc", children: typeof value === "string" ? value : value.name }, index));
+    if (Array.isArray(values) && typeof values[0] === "string") {
+        return (jsx("ul", { className: "list-inside pl-2", children: values.map((value, index) => {
+                return (jsx("li", { className: "list-disc text-xs font-normal", children: typeof value === "string" ? value : value.name }, index));
             }) }));
     }
     // single object ValueName
     if (typeof values === "object" && values.name) {
-        return (jsx("ul", { className: "list-inside", children: jsx("li", { className: "list-disc", children: values.name }) }));
+        return (jsx("ul", { className: "list-inside pl-2", children: jsx("li", { className: "list-disc text-xs font-normal", children: values.name }) }));
     }
     // String or number
     if (typeof values === "string" || typeof values === "number") {
-        return (jsx("ul", { className: "list-inside", children: jsx("li", { className: "list-disc", children: values.toString() }) }));
-    }
-    // BooleanValue
-    if (typeof values === "object" && values.booleanValue !== undefined) {
-        return values.booleanValue ? "Yes" : "No";
+        return (jsx("ul", { className: "list-inside pl-2", children: jsx("li", { className: "list-disc text-xs font-normal", children: values.toString() }) }));
     }
-    // MinMaxFilterValue
-    if (typeof values === "object" && "min" in values && "max" in values) {
-        const minMax = values;
-        return `Min: ${minMax.min}, Max: ${minMax.max}`;
-    }
-    return null;
+    return jsx(Fragment, {});
 };
 
 /**
@@ -963,13 +951,16 @@ const renderTooltipValues = (values) => {
  * @param {string} props.filterKey - The key identifying the filter.
  * @returns {ReactElement} The rendered tooltip label and applied filter values.
  */
-const SingleFilterTooltipLabel = ({ filterBarConfig, filterKey, }) => {
-    const title = filterBarConfig.getFilterTitle(filterKey);
-    const values = filterBarConfig.getValuesByKey(filterKey);
-    const [t] = useTranslation();
-    return (jsxs(Fragment, { children: [t("filtersBar.appliedFiltersTooltip.singular", {
-                filterName: title,
-            }), jsx(TooltipValues, { values: values })] }));
+const SingleFilterTooltipLabel = ({ filterBarConfig, filter, filterKey, }) => {
+    const title = useMemo(() => filterBarConfig.getFilterTitle(filterKey), [filterBarConfig, filterKey]);
+    const values = useMemo(() => filterBarConfig.getValuesByKey(filterKey), [filterBarConfig, filterKey]);
+    const displayValues = useMemo(() => {
+        if (filter?.valueAsText) {
+            return filter.valueAsText(values);
+        }
+        return values;
+    }, [filter, values]);
+    return (jsxs(Fragment, { children: [jsx("div", { className: "text-xs font-medium", children: title }), jsx(TooltipValues, { values: displayValues })] }));
 };
 
 /**
@@ -983,22 +974,23 @@ const SingleFilterTooltipLabel = ({ filterBarConfig, filterKey, }) => {
  * @param {string[]} [props.filterKeys] An optional list of filter keys to filter the currently applied filters.
  * @returns {ReactElement | string} Returns a element or string for the tooltip displaying applied filters.
  */
-const MultipleFilterTooltipLabel = ({ filterBarConfig, filterKeys, }) => {
+const MultipleFilterTooltipLabel = ({ filterBarConfig, filterKeys, filters, }) => {
     const [t] = useTranslation();
-    const appliedFilterKeys = filterKeys
-        ? filterKeys.filter(key => filterBarConfig.appliedFilterKeys().includes(key))
-        : filterBarConfig.appliedFilterKeys();
+    const appliedKeys = filterBarConfig.appliedFilterKeys();
+    const appliedFilterKeys = filterKeys ? filterKeys.filter(key => appliedKeys.includes(key)) : appliedKeys;
+    const filtersMap = filters.reduce((acc, filter) => {
+        if (filter.filterKey) {
+            acc[filter.filterKey] = filter;
+        }
+        return acc;
+    }, {});
     switch (appliedFilterKeys.length) {
         case 0:
             return t("filtersBar.appliedFiltersTooltip.none");
         case 1:
-            return jsx(SingleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKey: appliedFilterKeys[0] });
+            return (jsx(SingleFilterTooltipLabel, { filter: filtersMap[appliedFilterKeys[0]], filterBarConfig: filterBarConfig, filterKey: appliedFilterKeys[0] }));
         default:
-            return (jsxs(Fragment, { children: [t("filtersBar.appliedFiltersTooltip.plural", { count: appliedFilterKeys.length }), appliedFilterKeys.map(filterKey => {
-                        const title = filterBarConfig.getFilterTitle(filterKey);
-                        const values = filterBarConfig.getValuesByKey(filterKey);
-                        return filterBarConfig.appliedFilterKeys().includes(filterKey) ? (jsxs("div", { children: [jsxs("div", { children: [title, ":"] }), jsx(TooltipValues, { values: values })] }, filterKey)) : null;
-                    })] }));
+            return (jsx(Fragment, { children: appliedFilterKeys.map(filterKey => (jsx(SingleFilterTooltipLabel, { filter: filtersMap[filterKey], filterBarConfig: filterBarConfig, filterKey: filterKey }, filterKey))) }));
     }
 };
 
@@ -1024,7 +1016,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(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 && showAppliedFiltersCount && filterBarConfig.appliedFilterKeys().length > 0 && isSm ? (jsxs("div", { children: [jsxs("span", { "aria-hidden": true, children: ["(", filterBarConfig.appliedFilterKeys().length, ")"] }), jsxs("span", { className: "sr-only", children: [filterBarConfig.appliedFilterKeys().length, " filters applied"] })] })) : undefined, variant: "secondary", ...buttonProps, children: title !== "" ? (jsx("span", { className: "hidden sm:block", children: title ?? t("filtersBar.filtersHeading") })) : null }) }) }) }), jsx(PopoverContent, { cellPadding: 100, children: jsx(FiltersMenuContent, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, filtersToShowGrouped: filtersToShowGrouped, hasCustomFields: hasCustomFields, removeCustomFieldsGroup: removeCustomFieldsGroup, searchResultsGrouped: searchResultsGrouped, searchText: searchText, setSearchText: setSearchText, setShowCustomFilters: setShowCustomFilters, showCustomFilters: showCustomFilters }) })] }));
+                    return (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: jsx("div", { "data-testid": "starred-filters-menu-trigger", id: "starred-filters-menu-trigger", children: jsx(Tooltip, { disabled: !compact || modalState.isOpen, label: jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filters: appliedFilters }), children: jsx(Button, { prefix: jsx(Icon, { ariaHidden: true, color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Filter", size: "small" }), size: "small", suffix: compact && showAppliedFiltersCount && filterBarConfig.appliedFilterKeys().length > 0 && isSm ? (jsxs("div", { children: [jsxs("span", { "aria-hidden": true, children: ["(", filterBarConfig.appliedFilterKeys().length, ")"] }), jsxs("span", { className: "sr-only", children: [filterBarConfig.appliedFilterKeys().length, " filters applied"] })] })) : undefined, variant: "secondary", ...buttonProps, children: title !== "" ? (jsx("span", { className: "hidden sm:block", children: title ?? t("filtersBar.filtersHeading") })) : null }) }) }) }), jsx(PopoverContent, { cellPadding: 100, children: jsx(FiltersMenuContent, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, filtersToShowGrouped: filtersToShowGrouped, hasCustomFields: hasCustomFields, removeCustomFieldsGroup: removeCustomFieldsGroup, searchResultsGrouped: searchResultsGrouped, searchText: searchText, setSearchText: setSearchText, setShowCustomFilters: setShowCustomFilters, showCustomFilters: showCustomFilters }) })] }));
                 } }), showDirectlyFilters.length > 0 ? (jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, !compact ? (jsxs(Fragment, { children: [appliedFilters.filter(filter => !filter.showDirectly).length > 0 ? (jsx("div", { className: "h-4 w-[1px] bg-slate-300", "data-testid": "applied-filters-buttons" })) : null, jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: appliedFilters }), filterBarConfig.appliedFilterKeys().length > 0 ? (jsx(ResetFiltersButton, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] })) : null] }));
 };
 
@@ -1047,14 +1039,14 @@ const FilterTableComponent = ({ filterKey, filterBarDefinition, filterBarConfig,
     if (Array.isArray(filterKey)) {
         const isActive = filterKey.some(key => filterBarConfig.appliedFilterKeys().includes(key));
         return (jsx(Popover, { placement: "bottom-start", children: modalState => {
-                return (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: jsx("div", { children: jsx(Tooltip, { disabled: modalState.isOpen || !isActive, label: jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKeys: filterKey }), children: jsx(IconButton, { icon: jsx(Icon, { name: "Filter", size: "small" }), size: "extraSmall", variant: isActive ? "filled" : "ghost-neutral" }) }) }) }), jsx(PopoverContent, { children: jsx(MenuList, { children: filters.map((value, index) => value && (jsx(FilterComponent, { filter: value, filterBarActions: filterBarConfig, filterState: filterBarConfig, visualStyle: "list-item" }, index))) }) })] }));
+                return (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: jsx("div", { children: jsx(Tooltip, { disabled: modalState.isOpen || !isActive, label: jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKeys: filterKey, filters: filters }), placement: "bottom", children: jsx(IconButton, { icon: jsx(Icon, { name: "Filter", size: "small" }), size: "extraSmall", variant: isActive ? "filled" : "ghost-neutral" }) }) }) }), jsx(PopoverContent, { children: jsx(MenuList, { children: filters.map((value, index) => value && (jsx(FilterComponent, { filter: value, filterBarActions: filterBarConfig, filterState: filterBarConfig, visualStyle: "list-item" }, index))) }) })] }));
             } }));
     }
     const filter = filterBarDefinition[ensureFilterKey(filterKey)];
     if (!filter) {
         return null;
     }
-    return (jsx("div", { onClick: event => event.stopPropagation(), children: jsx(Tooltip, { disabled: !filterBarConfig.appliedFilterKeys().includes(filterKey), label: jsx(SingleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKey: filterKey }), children: jsx(FilterComponent, { asIcon: "Filter", filter: filter, filterBarActions: filterBarConfig, filterState: filterBarConfig, size: "extraSmall" }) }) }));
+    return (jsx("div", { onClick: event => event.stopPropagation(), children: jsx(Tooltip, { disabled: !filterBarConfig.appliedFilterKeys().includes(filterKey), label: jsx(SingleFilterTooltipLabel, { filter: filter, filterBarConfig: filterBarConfig, filterKey: filterKey }), placement: "bottom", children: jsx(FilterComponent, { asIcon: "Filter", filter: filter, filterBarActions: filterBarConfig, filterState: filterBarConfig, size: "extraSmall" }) }) }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "1.3.201",
+  "version": "1.3.202",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,15 +16,15 @@
     "zod": "3.23.4",
     "@trackunit/iris-app-api": "1.3.128",
     "@trackunit/react-core-hooks": "1.3.131",
-    "@trackunit/react-filter-components": "1.3.166",
-    "@trackunit/react-date-and-time-components": "1.3.168",
+    "@trackunit/react-filter-components": "1.3.167",
+    "@trackunit/react-date-and-time-components": "1.3.169",
     "@trackunit/shared-utils": "1.5.121",
-    "@trackunit/react-form-components": "1.3.166",
+    "@trackunit/react-form-components": "1.3.167",
     "@trackunit/react-core-contexts-api": "1.4.127",
     "@trackunit/geo-json-utils": "1.3.121",
     "@trackunit/i18n-library-translation": "1.3.137",
     "@trackunit/css-class-variance-utilities": "1.3.121",
-    "@trackunit/react-components": "1.4.146",
+    "@trackunit/react-components": "1.4.147",
     "@trackunit/react-test-setup": "1.0.11"
   },
   "module": "./index.esm.js",

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

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

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

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