@trackunit/filters-filter-bar 0.0.504 → 0.0.508

package/index.cjs.js

@@ -10,9 +10,7 @@ var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
 var reactComponents = require('@trackunit/react-components');
 var reactFormComponents = require('@trackunit/react-form-components');
 var reactDateAndTimeComponents = require('@trackunit/react-date-and-time-components');
-var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var tailwindMerge = require('tailwind-merge');
-var zod = require('zod');
 var dequal = require('dequal');
 var isEqual = require('lodash/isEqual');
 var reduce = require('lodash/reduce');
@@ -107,12 +105,9 @@ var defaultTranslations = {
 	"auditlog.filter.users": "Users",
 	"filter.more.options.if.you.search.description": "Use search to refine results.",
 	"filter.more.options.if.you.search.title": "Over {{count}} items found.",
-	"filters.shared.clear": "clear",
-	"filters.shared.clearAll": "clear all",
-	"filters.shared.recentSearches": "Recent searches",
 	"filtersBar.appliedFiltersTooltip.none": "No filters applied",
 	"filtersBar.appliedFiltersTooltip.plural": "{{count}} filters applied:",
-	"filtersBar.appliedFiltersTooltip.singular": "{{filterName}} filter applied",
+	"filtersBar.appliedFiltersTooltip.singular": "{{filterName}} filter",
 	"filtersBar.closeFilter": "Close",
 	"filtersBar.defaultAssetFilters.followedFilter.ALL": "All Assets",
 	"filtersBar.defaultAssetFilters.followedFilter.allLabel": "All Assets",
@@ -143,6 +138,9 @@ var defaultTranslations = {
 	"filtersBar.groups.SERVICE": "Service",
 	"filtersBar.groups.SITES": "Sites",
 	"filtersBar.groups.STATUS": "Status",
+	"filtersBar.hiddenFilters.plural": "{{count}} hidden filters",
+	"filtersBar.hiddenFilters.singular": "One hidden filter",
+	"filtersBar.hiddenFilters.toggleFilters": "Toggle filters visibility",
 	"filtersBar.loading": "Loading...",
 	"filtersBar.myNetworkGroup": "My Network",
 	"filtersBar.resetFilter": "Reset",
@@ -602,7 +600,8 @@ const useStarredGroupFilters = (filterDefinitions, hiddenFilters) => {
         const keys = uniqueKeysFromGroups(filterDefinitions);
         return keys
             .map(key => ({
-            key: t(`filtersBar.groups.${key}`),
+            key,
+            title: t(`filtersBar.groups.${key}`),
             filters: filterDefinitions.filter(rawFilter => rawFilter.group === key && hiddenFilters.includes(rawFilter.filterKey) === false),
         }))
             .filter(filter => filter.filters.length > 0);
@@ -686,7 +685,7 @@ const Filter = ({ filter, filterBarActions, filterState, }) => {
             setValue,
             filterBarActions,
             filterState,
-        }) })) : (jsxRuntime.jsx(reactFilterComponents.Filter, { activeLabel: activeFilterText, dataTestId: `${filter.filterKey}-filter-button`, isActive: filterText().length > 0, title: filter.title, withStickyHeader: true, children: filter.component({
+        }) })) : (jsxRuntime.jsx(reactFilterComponents.Filter, { activeLabel: activeFilterText, dataTestId: `${filter.filterKey}-filter-button`, isActive: filterText().length > 0, popoverProps: { placement: "right-start" }, title: filter.title, withStickyHeader: true, children: filter.component({
             filterDefinition: filter,
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             value: values,
@@ -701,88 +700,16 @@ const Filter = ({ filter, filterBarActions, filterState, }) => {
  *
  * @returns {ReactElement | null} The rendered ResetFiltersButton component, or null if no filters have been applied.
  */
-const ResetFiltersButton = ({ filtersHaveBeenApplied, resetFiltersToInitialState, }) => {
+const ResetFiltersButton = ({ filtersHaveBeenApplied, resetFiltersToInitialState, dataTestId, className, }) => {
     const [t] = useTranslation();
     if (!filtersHaveBeenApplied) {
         return null;
     }
-    return (jsxRuntime.jsx(reactComponents.Button, { dataTestId: "reset-filters-button", onClick: () => {
+    return (jsxRuntime.jsx(reactComponents.Button, { className: className, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "reset-filters-button", onClick: () => {
             resetFiltersToInitialState();
         }, size: "small", variant: "ghost-neutral", children: t("filtersBar.resetFilters") }));
 };
 
-const MAX_RECENT_SEARCHES = 20;
-/**
- *
- */
-const SearchFilterInline = ({ filterBarActions, filterState, filter, className, dataTestId, }) => {
-    const { logEvent } = reactCoreHooks.useAnalytics(FilterEvents);
-    const searchElementRef = react.useRef(null);
-    const geometry = reactComponents.useGeometry(searchElementRef);
-    const filterValue = (filter === null || filter === void 0 ? void 0 : filter.filterKey) ? String(filterState.values[filter.filterKey]) : undefined;
-    const [searchString, setSearchString] = react.useState(filterValue !== null && filterValue !== void 0 ? filterValue : "");
-    const previousFilterValue = reactComponents.usePrevious(filterValue);
-    reactComponents.useDebounce(searchString, 500, "both", debouncedSearchString => {
-        if (filterValue === debouncedSearchString) {
-            return;
-        }
-        apply({ value: debouncedSearchString, setRecent: false });
-    });
-    react.useEffect(() => {
-        // Catch a change in filter value from outside the component and update the search string to match
-        if (filterValue === searchString || previousFilterValue === filterValue) {
-            return;
-        }
-        filterValue !== undefined && setSearchString(filterValue);
-    }, [filterValue, previousFilterValue, searchString]);
-    const [t] = useTranslation();
-    const [recentSearches, setRecentSearches] = reactComponents.useLocalStorage({
-        defaultState: [],
-        key: "free-text-filter-recent-searches",
-        schema: zod.z.array(zod.z.string()),
-    });
-    const apply = react.useCallback(({ value, wasPreviousSearch = false, setRecent = true, }) => {
-        if (setRecent !== false) {
-            setRecentSearches(prev => {
-                const noDuplicatesRecent = prev.filter(r => r !== value);
-                const cappedLengthRecent = noDuplicatesRecent.slice(0, MAX_RECENT_SEARCHES - 1);
-                return [value, ...cappedLengthRecent];
-            });
-        }
-        logEvent("Filters Applied - V2", {
-            type: "free-text-search",
-            value,
-            additionalProperties: {
-                wasPreviousSearch: Boolean(wasPreviousSearch),
-            },
-        });
-        (filter === null || filter === void 0 ? void 0 : filter.filterKey) && filterBarActions.setStringValue(filter.filterKey, value);
-    }, [filter === null || filter === void 0 ? void 0 : filter.filterKey, filterBarActions, logEvent, setRecentSearches]);
-    return (jsxRuntime.jsxs(reactComponents.Popover, { activation: defaultActivation => ({ ...defaultActivation, keyboardHandlers: false }), dataTestId: dataTestId ? `${dataTestId}-popover` : undefined, placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactFormComponents.Search
-                //TODO: [Buss] remove height restruction once baseinput sixes matches buttons
-                , { 
-                    //TODO: [Buss] remove height restruction once baseinput sixes matches buttons
-                    className: tailwindMerge.twMerge(className, "h-7"), fieldSize: "small", onChange: e => {
-                        const parsedValue = zod.z.string().safeParse(e.target.value);
-                        parsedValue.success ? setSearchString(parsedValue.data) : setSearchString("");
-                    }, onClear: () => setSearchString(""), onKeyDown: e => {
-                        if (e.key === "Enter") {
-                            apply({ value: searchString });
-                        }
-                    }, ref: searchElementRef, value: searchString }) }), recentSearches.length > 0 ? (jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx("div", { style: { minWidth: geometry.width }, children: jsxRuntime.jsxs(reactComponents.MenuList, { className: "overflow-hidden", children: [jsxRuntime.jsx(reactFilterComponents.FilterBody, { className: "max-w-none p-1", limitSize: true, children: jsxRuntime.jsx("ul", { className: "grid h-full gap-0.5", children: recentSearches.map((option, index) => (jsxRuntime.jsx(reactComponents.MenuItem, { className: "max-h-fit overflow-hidden", id: "free-text-search-filter-inline", label: option, onClick: () => {
-                                            apply({ value: option, wasPreviousSearch: true });
-                                            setRecentSearches(prev => {
-                                                const noDuplicatesRecent = prev.filter(r => r !== option);
-                                                const cappedLengthRecent = noDuplicatesRecent.slice(0, MAX_RECENT_SEARCHES - 1);
-                                                return [option, ...cappedLengthRecent];
-                                            });
-                                            setSearchString(option);
-                                        }, selected: option === filterValue, size: "small", suffix: jsxRuntime.jsx(reactComponents.Tooltip, { label: t("filters.shared.clear"), children: jsxRuntime.jsx(reactComponents.IconButton, { circular: true, icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Trash", size: "small" }), onClick: e => {
-                                                    e.stopPropagation();
-                                                    setRecentSearches(prev => prev.filter(r => r !== option));
-                                                }, size: "small", variant: "ghost-neutral" }) }) }, `${option}-${index}`))) }) }), jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-x-2 border-t-2 border-slate-300 px-2 py-0.5", children: [jsxRuntime.jsx(reactComponents.Text, { className: "py-0.5", size: "small", subtle: true, children: t("filters.shared.recentSearches") }), recentSearches.length > 1 ? (jsxRuntime.jsx(reactComponents.Button, { onClick: () => setRecentSearches([]), size: "small", variant: "ghost", children: t("filters.shared.clearAll") })) : null] })] }) }) })) : null] }));
-};
-
 /**
  * StarredFiltersMenu is a React component that displays a menu of starred filters within a filter bar.
  *
@@ -791,12 +718,13 @@ const SearchFilterInline = ({ filterBarActions, filterState, filter, className,
 const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starredFilterKeys, hiddenFilters = [], className, dataTestId, }) => {
     const [t] = useTranslation();
     const { logEvent } = reactCoreHooks.useAnalytics(FilterEvents);
+    const numberOfShowDirectlyFilters = sharedUtils.objectValues(filterBarDefinition).filter(filter => filter.showDirectly).length; //TODO: this is a bit of a silly workaround to get the count to match without changing any other logic as I am pressed for time...but it works for now.🙈
     const hideInStarredMenu = react.useMemo(() => {
         return sharedUtils.objectValues(filterBarDefinition)
             .map(filter => {
             const showInStarredMenu = filter.showInStarredMenu ? filter.showInStarredMenu() : true;
             const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
-            return !showInStarredMenu || !showInFilterBar ? filter.filterKey : null;
+            return filter.showDirectly || !showInStarredMenu || !showInFilterBar ? filter.filterKey : null;
         })
             .filter(sharedUtils.truthy);
     }, [filterBarDefinition]);
@@ -804,23 +732,32 @@ const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starred
         ...hideInStarredMenu,
         ...hiddenFilters,
     ]);
-    return (jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.IconButton, { className: className, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "starred-filters-menu", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Star", size: "small" }), size: "small", title: t("filtersBar.starredFiltersTitle"), variant: "secondary" }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(reactComponents.MenuList, { className: "overflow-hidden", dataTestId: "starred-filters-menu-popover", children: jsxRuntime.jsx("div", { className: "max-h-[55vh] w-72 overflow-y-auto", children: filtersGrouped.map((group, idx) => {
+    const hiddenFiltersCount = filtersGrouped.map(group => group.filters).flat().length - starredFilterKeys.length + numberOfShowDirectlyFilters;
+    const getHiddenFiltersLabel = () => {
+        switch (hiddenFiltersCount) {
+            case 0:
+                return t("filtersBar.hiddenFilters.toggleFilters");
+            case 1:
+                return t("filtersBar.hiddenFilters.singular");
+            default:
+                return t("filtersBar.hiddenFilters.plural", { count: hiddenFiltersCount });
+        }
+    };
+    return (jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { className: className, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "starred-filters-menu", size: "small", variant: "ghost", children: getHiddenFiltersLabel() }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(reactComponents.MenuList, { className: "overflow-hidden", dataTestId: "starred-filters-menu-popover", children: jsxRuntime.jsx("div", { className: "max-h-[55dvh] w-72 overflow-y-auto px-3 pb-2", children: filtersGrouped.map((group, idx) => {
                             const isLast = idx === filtersGrouped.length - 1;
-                            return (jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsx("div", { className: "mb-1 mt-2 flex px-2", children: jsxRuntime.jsx(reactComponents.Text, { dataTestId: "starred-filters-group-title", size: "small", subtle: true, uppercase: true, weight: "bold", children: group.key }) }), group.filters.map(filter => {
-                                        return (jsxRuntime.jsxs("div", { className: "flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-0 transition hover:bg-neutral-50", "data-testid": `${filter.filterKey}-star-filter`, onClick: () => {
-                                                updateStarredFilters(filter.filterKey);
-                                                logEvent("Starring Filter - Toggled", {
-                                                    type: filter.filterKey,
-                                                });
-                                            }, children: [jsxRuntime.jsx(reactComponents.Text, { weight: "thick", children: filter.title }), jsxRuntime.jsx(reactComponents.StarButton, { onClick: e => {
-                                                        e.preventDefault();
-                                                        e.stopPropagation();
-                                                        updateStarredFilters(filter.filterKey);
-                                                        logEvent("Starring Filter - Toggled", {
-                                                            type: filter.filterKey,
-                                                        });
-                                                    }, starred: starredFilterKeys.includes(filter.filterKey) })] }, filter.filterKey));
-                                    }), !isLast && jsxRuntime.jsx("div", { className: "mt-2 h-[1px] w-full bg-neutral-300" })] }, group.key));
+                            return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Text, { className: "pb-1 pt-2", dataTestId: "starred-filters-group-title", size: "small", subtle: true, uppercase: true, children: group.title }), jsxRuntime.jsx("div", { className: "grid gap-2", children: group.filters.map(filter => {
+                                            return !filter.isHidden ? (jsxRuntime.jsxs("div", { className: "grid-cols-min-fr grid cursor-pointer items-center gap-2 rounded-sm transition hover:bg-neutral-50", "data-testid": `${filter.filterKey}-star-filter`, onClick: () => {
+                                                    updateStarredFilters(filter.filterKey);
+                                                    logEvent("Starring Filter - Toggled", {
+                                                        type: filter.filterKey,
+                                                    });
+                                                }, children: [jsxRuntime.jsx(reactFormComponents.Toggle, { id: "visible-filters-toggle", onChange: () => {
+                                                            updateStarredFilters(filter.filterKey);
+                                                            logEvent("Starring Filter - Toggled", {
+                                                                type: filter.filterKey,
+                                                            });
+                                                        }, size: "medium", toggled: starredFilterKeys.includes(filter.filterKey) }), jsxRuntime.jsx(reactComponents.Text, { children: filter.title })] }, filter.filterKey)) : null;
+                                        }) }), !isLast && jsxRuntime.jsx("div", { className: "mt-2 h-[1px] w-full bg-neutral-300" })] }, group.key));
                         }) }) }) })] }));
 };
 
@@ -833,9 +770,6 @@ const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starred
 const StarredFilters = ({ filterBarDefinition, filterBarConfig, disableCollapse, hiddenFilters = [], }) => {
     const [t] = useTranslation();
     const { isLg } = reactComponents.useViewportSize();
-    return (jsxRuntime.jsxs("div", { className: cvaFiltersAndSearchContainer({ collapsed: !(isLg || disableCollapse) }), children: [isLg || disableCollapse ? (jsxRuntime.jsx(FilterSelection, { filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters })) : (jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(reactComponents.Tooltip, { label: jsxRuntime.jsx(FilterButtonTooltipLabel, { filterBarConfig: filterBarConfig }), children: [jsxRuntime.jsx(reactComponents.Button, { className: "@xs:flex hidden", prefix: jsxRuntime.jsx(reactComponents.Icon, { color: filterBarConfig.appliedFilters.length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", variant: "secondary", children: t("filtersBar.filtersHeading") }), jsxRuntime.jsx(reactComponents.IconButton, { className: "@xs:hidden", icon: jsxRuntime.jsx(reactComponents.Icon, { color: filterBarConfig.appliedFilters.length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", variant: "secondary" })] }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { cellPadding: 100, children: jsxRuntime.jsx(reactComponents.Card, { children: jsxRuntime.jsx(reactComponents.CardBody, { children: jsxRuntime.jsx(FilterSelection, { filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters }) }) }) })] })), filterBarDefinition.search ? (jsxRuntime.jsx("div", { className: "flex w-full", children: jsxRuntime.jsx(SearchFilterInline, { className: "w-full max-w-80", filter: filterBarDefinition.search, filterBarActions: filterBarConfig, filterState: { values: filterBarConfig.values, setters: filterBarConfig.setters } }, "filter-search") })) : null] }));
-};
-const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], className, }) => {
     const hideInFilterBar = react.useMemo(() => {
         return sharedUtils.objectValues(filterBarDefinition)
             .map(filter => {
@@ -848,44 +782,42 @@ const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
         ...hideInFilterBar,
         ...hiddenFilters,
     ]);
-    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge([className, "flex-wrap", "items-center", "gap-3", "flex"]), "data-testid": "starred-filters", children: [jsxRuntime.jsx(StarredFiltersMenu, { filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, starredFilterKeys: filterBarConfig.starredFilterKeys, updateStarredFilters: filterBarConfig.updateStarredFilters }), filterBarConfig.starredFilterKeys.length > 0 ? jsxRuntime.jsx("div", { className: "h-4 w-[1px] bg-slate-300" }) : null, filtersGrouped.map(group => group.filters
-                .filter(filter => !hiddenFilters.includes(filter.filterKey))
-                .map(filter => {
-                const showMenuAnyway = filterBarConfig.filterHasChanged(filter.filterKey) &&
-                    filter.showInStarredMenu &&
-                    !filter.showInStarredMenu();
-                if (filter.filterKey !== "search" &&
-                    (filterBarConfig.starredFilterKeys.includes(filter.filterKey) ||
-                        showMenuAnyway)) {
-                    return (jsxRuntime.jsx(react.Fragment, { children: jsxRuntime.jsx(Filter, { filter: filter, filterBarActions: filterBarConfig, filterState: { values: filterBarConfig.values, setters: filterBarConfig.setters } }, `filter-${filter.filterKey}`) }, filter.filterKey));
-                }
-                return null;
-            })), jsxRuntime.jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilters.length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })] }));
+    const allFilters = filtersGrouped.map(group => group.filters).flat();
+    const starredFilters = allFilters.filter(filter => {
+        const showMenuAnyway = filterBarConfig.filterHasChanged(filter.filterKey) && filter.showInStarredMenu && !filter.showInStarredMenu();
+        return (filterBarConfig.starredFilterKeys.includes(filter.filterKey) &&
+            (showMenuAnyway || !filter.showDirectly));
+    });
+    const nonAppliedFilters = starredFilters.filter(filter => !filterBarConfig.appliedFilterKeys.includes(filter.filterKey));
+    const appliedFilters = starredFilters.filter(filter => filterBarConfig.appliedFilterKeys.includes(filter.filterKey));
+    const filtersInPopover = isLg
+        ? nonAppliedFilters.filter(filter => !filter.showDirectly)
+        : starredFilters.filter(filter => !filter.showDirectly);
+    const showDirectlyFilters = allFilters.filter(filter => filter.showDirectly);
+    return (jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [jsxRuntime.jsx(reactComponents.Popover, { placement: "bottom-start", children: modalState => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { "data-testid": "starred-filters-menu-trigger", children: jsxRuntime.jsxs(reactComponents.Tooltip, { disabled: isLg || modalState.isOpen, label: jsxRuntime.jsx(FilterButtonTooltipLabel, { filterBarConfig: filterBarConfig }), children: [jsxRuntime.jsx(reactComponents.Button, { className: "@xs:flex hidden", prefix: jsxRuntime.jsx(reactComponents.Icon, { color: filterBarConfig.appliedFilterKeys.length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", suffix: !isLg && filterBarConfig.appliedFilterKeys.length > 0
+                                                ? `(${filterBarConfig.appliedFilterKeys.length})`
+                                                : undefined, variant: "secondary", children: t("filtersBar.filtersHeading") }), jsxRuntime.jsx(reactComponents.IconButton, { className: "@xs:hidden", icon: jsxRuntime.jsx(reactComponents.Icon, { color: filterBarConfig.appliedFilterKeys.length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", variant: "secondary" })] }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { cellPadding: 100, children: jsxRuntime.jsxs(reactComponents.Card, { className: "max-h-[min(600px,_calc(100dvh-32px))] overflow-hidden", children: [filtersInPopover.length > 0 ? (jsxRuntime.jsx(reactComponents.CardBody, { density: "dense", children: jsxRuntime.jsx("div", { className: "flex h-full min-w-min flex-col gap-2", children: jsxRuntime.jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: filtersInPopover }) }) })) : null, jsxRuntime.jsxs(reactComponents.CardFooter, { className: filtersInPopover.length === 0 ? "border-none" : undefined, density: "dense", children: [jsxRuntime.jsx(StarredFiltersMenu, { className: "mr-auto", filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, starredFilterKeys: filterBarConfig.starredFilterKeys, updateStarredFilters: filterBarConfig.updateStarredFilters }), isLg ? null : (jsxRuntime.jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys.length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState }))] })] }) })] })) }), showDirectlyFilters.length > 0 ? (jsxRuntime.jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, isLg ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [appliedFilters.filter(filter => !filter.showDirectly).length > 0 ? (jsxRuntime.jsx("div", { className: "h-4 w-[1px] bg-slate-300" })) : null, jsxRuntime.jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: appliedFilters }), jsxRuntime.jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys.length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })] })) : null] }));
+};
+const FiltersList = ({ filters, filterBarConfig }) => {
+    return filters.length === 0
+        ? null
+        : filters.map(filter => {
+            return (jsxRuntime.jsx(Filter, { filter: filter, filterBarActions: filterBarConfig, filterState: { values: filterBarConfig.values, setters: filterBarConfig.setters } }, `filter-${filter.filterKey}`));
+        });
 };
-const cvaFiltersAndSearchContainer = cssClassVarianceUtilities.cvaMerge(["grid", "gap-2", "w-full"], {
-    variants: {
-        collapsed: {
-            true: ["grid-cols-min-fr"],
-            false: ["grid-cols-[minmax(0,1fr)_300px]"],
-        },
-    },
-    defaultVariants: {
-        collapsed: false,
-    },
-});
 const FilterButtonTooltipLabel = ({ filterBarConfig, }) => {
     const [t] = useTranslation();
-    switch (filterBarConfig.appliedFilters.length) {
+    switch (filterBarConfig.appliedFilterKeys.length) {
         case 0:
-            return t("filtersBar.filtersHeading");
+            return t("filtersBar.appliedFiltersTooltip.none");
         case 1:
-            return filterBarConfig.appliedFilters[0]
+            return filterBarConfig.appliedFilterKeys[0]
                 ? t("filtersBar.appliedFiltersTooltip.singular", {
-                    filterName: filterBarConfig.getFilterTitle(filterBarConfig.appliedFilters[0]),
+                    filterName: filterBarConfig.getFilterTitle(filterBarConfig.appliedFilterKeys[0]),
                 })
                 : null; // should never happen though
         default:
-            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [t("filtersBar.appliedFiltersTooltip.plural", { count: filterBarConfig.appliedFilters.length }), jsxRuntime.jsx("ul", { className: "list-inside", children: filterBarConfig.appliedFilters.map((appliedFilterKey, index) => (jsxRuntime.jsx("li", { className: "list-disc", children: filterBarConfig.getFilterTitle(appliedFilterKey) }, index))) })] }));
+            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))) })] }));
     }
 };
 
@@ -902,7 +834,7 @@ const doNothing = (args) => { };
 const mockFilterBar = {
     filterBarConfig: {
         isFilterIncludedByKey: doNothing,
-        appliedFilters: [],
+        appliedFilterKeys: [],
         arrayIncludesValue: doNothing,
         getFilterTitle: doNothing,
         getFilterBarName: doNothing,
@@ -1200,7 +1132,7 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
                 const values = filterBarConfig.values[key];
                 return Boolean(values);
             },
-            get appliedFilters() {
+            get appliedFilterKeys() {
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                 const initialStateValues = filterBarConfig.initialState || {};
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition