@trackunit/filters-filter-bar 2.6.33 → 2.6.35

package/index.cjs.js

@@ -55,6 +55,7 @@ var defaultTranslations = {
 	"filtersBar.searchPlaceholder": "Search...",
 	"filtersBar.selectAll": "Select All",
 	"filtersBar.showAll": "Show all",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} filters applied",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filter applied"
 };
@@ -705,16 +706,18 @@ const useFiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
     ]);
 };
 
+const FilterGroupSection = ({ filterBarConfig, group, showSeparator, showTitle, }) => {
+    const titleId = react.useId();
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("div", { children: [showTitle ? (jsxRuntime.jsx(reactComponents.Text, { className: "h-7 p-2 text-neutral-400", "data-testid": `${group.key}-group-title`, id: titleId, size: "small", uppercase: true, weight: "bold", children: group.title })) : null, jsxRuntime.jsx("div", { "aria-labelledby": showTitle ? titleId : undefined, className: "grid", "data-testid": `${group.key}-group-list`, role: "group", children: jsxRuntime.jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: group.filters, visualStyle: "list-item" }) })] }), showSeparator ? jsxRuntime.jsx(reactComponents.MenuDivider, {}) : null] }));
+};
 /**
  * FiltersList is a React component that displays a list of filters within a filter bar.
  *
  * @returns {ReactElement} - Returns the FiltersList component.
  */
 const GroupedFiltersList = ({ filterBarConfig, filtersGrouped, className, ref, style, "data-testid": dataTestId = "grouped-filters-list", }) => {
-    return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, ref: ref, style: style, children: filtersGrouped.map((group, idx) => {
-            const isLastGroup = idx === filtersGrouped.length - 1;
-            return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("div", { children: [filtersGrouped.length > 1 && (jsxRuntime.jsx(reactComponents.Text, { className: "h-7 p-2 text-neutral-400", "data-testid": `${group.key}-group-title`, size: "small", uppercase: true, weight: "bold", children: group.title })), jsxRuntime.jsx("ul", { "aria-labelledby": `${group.key}-group-title`, className: "grid", "data-testid": `${group.key}-group-list`, children: jsxRuntime.jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: group.filters, visualStyle: "list-item" }) })] }), isLastGroup ? null : jsxRuntime.jsx("div", { className: "h-[1px] w-full bg-neutral-200", role: "separator" })] }, group.key));
-        }) }));
+    const showTitle = filtersGrouped.length > 1;
+    return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, ref: ref, style: style, children: filtersGrouped.map((group, idx) => (jsxRuntime.jsx(FilterGroupSection, { filterBarConfig: filterBarConfig, group: group, showSeparator: idx !== filtersGrouped.length - 1, showTitle: showTitle }, group.key))) }));
 };
 
 /**
@@ -729,33 +732,104 @@ const ResetFiltersButton = ({ resetFiltersToInitialState, "data-testid": dataTes
         }, ref: ref, size: "small", style: style, variant: "ghost", children: [t("filtersBar.resetFilters"), jsxRuntime.jsx("span", { className: "sr-only", children: t("filtersBar.resetFiltersSR") })] }));
 };
 
+const firstEnabledMenuItem = (root) => root?.querySelector('[role="menuitem"]:not([aria-disabled="true"])') ?? null;
+/**
+ * Bridges Search and the registered FilterBar rows: Down from Search enters the first matching
+ * item; Up from that item returns to Search. Initial focus lands on Search when it is shown,
+ * otherwise on the first enabled row.
+ *
+ * @returns {UseFiltersMenuSearchNavigationResult} Search ref, panel-node callback, and Search ArrowDown handler
+ */
+const useFiltersMenuSearchNavigation = ({ showSearch, }) => {
+    const searchInputRef = react.useRef(null);
+    const panelRef = react.useRef(null);
+    const onPanelArrowUp = react.useCallback((event) => {
+        if (event.key !== "ArrowUp") {
+            return;
+        }
+        const firstItem = firstEnabledMenuItem(panelRef.current);
+        const active = document.activeElement;
+        if (firstItem && active && (active === firstItem || firstItem.contains(active))) {
+            // Capture on the menu root so this wins over useListNavigation's
+            // loop:true wrap (React onKeyDown on the floating element).
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            searchInputRef.current?.focus();
+        }
+    }, []);
+    const setPanelNode = react.useCallback((node) => {
+        if (panelRef.current) {
+            panelRef.current.removeEventListener("keydown", onPanelArrowUp, true);
+        }
+        panelRef.current = node;
+        if (node && showSearch) {
+            // Attach here, not in an effect: MenuContent's ref is set after the
+            // first paint, and a [showSearch]-only effect can snapshot a null panel.
+            node.addEventListener("keydown", onPanelArrowUp, true);
+        }
+    }, [onPanelArrowUp, showSearch]);
+    react.useEffect(() => {
+        const focusInitialTarget = () => {
+            if (showSearch) {
+                searchInputRef.current?.focus();
+                return;
+            }
+            firstEnabledMenuItem(panelRef.current)?.focus();
+        };
+        // Floating UI's default initialFocus is 0 (the trigger). FilterBar cannot
+        // use initialFocus={1}: that would land on Reset when Search is hidden.
+        const frame = requestAnimationFrame(focusInitialTarget);
+        return () => cancelAnimationFrame(frame);
+    }, [showSearch]);
+    const handleSearchKeyDown = react.useCallback((event) => {
+        if (event.key !== "ArrowDown") {
+            return;
+        }
+        const firstItem = firstEnabledMenuItem(panelRef.current);
+        if (firstItem) {
+            // Stop list-navigation from owning this ArrowDown so activeIndex stays
+            // unset and ArrowUp from the first row can return to Search.
+            event.preventDefault();
+            event.stopPropagation();
+            firstItem.focus();
+        }
+    }, []);
+    return react.useMemo(() => ({
+        searchInputRef,
+        setPanelNode,
+        handleSearchKeyDown,
+    }), [setPanelNode, handleSearchKeyDown]);
+};
+
 /**
  *
  */
 const FiltersMenuContent = ({ filterBarConfig, setShowCustomFilters, setSearchText, searchText, searchResultsGrouped, filtersToShowGrouped, removeCustomFieldsGroup, hasCustomFields, appliedCustomFields, showCustomFilters, filterBarDefinitionCount, className, "data-testid": dataTestId = "starred-filters-menu-popover", ref, style, }) => {
     const [t] = useTranslation();
-    // Chrome-only shell (not `MenuContent`): filter rows are wrapped (`GroupedFiltersList` →
-    // `FilterComponent` → `Filter` → `MenuItem`), so `MenuContent`'s direct-child registration would
-    // never attach keyboard nav — leaving a `role="menu"` with no owned menuitems. Shadow/layout come
-    // from `cvaMenu`/`cvaMenuList`; keyboard ownership returns when MenuItem self-registers (GLU-1644).
-    return (jsxRuntime.jsx("div", { className: reactComponents.cvaMenu({
-            className: tailwindMerge.twMerge("max-h-[min(600px,calc(100dvh-32px))] grid-rows-[minmax(0,1fr)] overflow-y-hidden p-0", className),
-            limitWidth: true,
-        }), "data-testid": dataTestId, ref: ref, style: style, children: jsxRuntime.jsxs("div", { 
-            // `gap-y-0` cancels `cvaMenuList`'s default inter-item gap, which here would otherwise land
-            // between the header block (search/count + separator) and the scrollable list below it,
-            // showing as a sliver of whitespace above the list's own scrollbar.
-            className: reactComponents.cvaMenuList({
-                className: "grid-rows-min-fr !max-h-none min-h-0 gap-y-0 !overflow-y-hidden p-0",
-            }), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 p-1", children: [filterBarDefinitionCount > 5 && (jsxRuntime.jsx(reactFormComponents.Search, { autoFocus: true, "data-testid": "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 pl-3", children: [jsxRuntime.jsx(reactComponents.Text, { className: "text-neutral-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("div", { className: "flex min-h-0 flex-col gap-1 overflow-auto p-1", children: [jsxRuntime.jsx(GroupedFiltersList, { className: "flex flex-col gap-1", filterBarConfig: filterBarConfig, filtersGrouped: searchText
-                                ? searchResultsGrouped
-                                : showCustomFilters
-                                    ? filtersToShowGrouped
-                                    : removeCustomFieldsGroup(filtersToShowGrouped) }), hasCustomFields && !showCustomFilters && !searchText ? (jsxRuntime.jsx(CustomFieldsHiddenGroup, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, onClickShow: () => {
-                                setShowCustomFilters(true);
-                            } })) : null] })] }) }));
-};
-const Separator = () => jsxRuntime.jsx("hr", { className: "border-neutral-200", role: "separator" });
+    const filtersListId = react.useId();
+    const showSearch = filterBarDefinitionCount > 5;
+    const { searchInputRef, setPanelNode, handleSearchKeyDown } = useFiltersMenuSearchNavigation({
+        showSearch,
+    });
+    const setPanelRef = react.useCallback((node) => {
+        setPanelNode(node);
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [setPanelNode, ref]);
+    const visibleGroups = searchText
+        ? searchResultsGrouped
+        : showCustomFilters
+            ? filtersToShowGrouped
+            : removeCustomFieldsGroup(filtersToShowGrouped);
+    const hasVisibleFilters = visibleGroups.some(group => group.filters.length > 0);
+    return (jsxRuntime.jsxs(reactComponents.MenuContent, { "aria-label": t("filtersBar.filtersHeading"), className: tailwindMerge.twMerge("max-h-[min(600px,calc(100dvh-32px))] grid-rows-[minmax(0,1fr)] overflow-y-hidden p-0", className), "data-testid": dataTestId, listClassName: "grid-rows-min-fr !max-h-none min-h-0 gap-y-0 !overflow-y-hidden p-0", ref: setPanelRef, style: style, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 p-1", children: [showSearch ? (jsxRuntime.jsx(reactFormComponents.Search, { "data-testid": "starred-filters-menu-search", fieldSize: "small", id: "search-filters-list", onChange: e => setSearchText(e.currentTarget.value), onClear: () => setSearchText(""), onKeyDown: handleSearchKeyDown, placeholder: t("filtersBar.searchFiltersPlaceholder"), ref: searchInputRef, value: searchText })) : null, jsxRuntime.jsxs("div", { className: "flex h-7 items-center justify-between gap-1 pl-3", children: [jsxRuntime.jsx(reactComponents.Text, { className: "text-neutral-400", size: "small", children: jsxRuntime.jsx(FiltersAppliedCountLabel, { filterBarConfig: filterBarConfig }) }), filterBarConfig.appliedFilterKeys().length > 0 ? (jsxRuntime.jsx(ResetFiltersButton, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] })] }), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }), jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-col gap-1 overflow-auto p-1", id: filtersListId, children: [searchText && !hasVisibleFilters ? (jsxRuntime.jsx("div", { "aria-live": "polite", role: "status", children: jsxRuntime.jsx(reactComponents.Text, { className: "p-2 text-neutral-400", size: "small", children: t("filtersBar.emptyResults") }) })) : (jsxRuntime.jsx(GroupedFiltersList, { className: "flex flex-col gap-1", filterBarConfig: filterBarConfig, filtersGrouped: visibleGroups })), hasCustomFields && !showCustomFilters && !searchText ? (jsxRuntime.jsx(CustomFieldsHiddenGroup, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, filtersListId: filtersListId, onClickShow: () => {
+                            setShowCustomFilters(true);
+                        } })) : null] })] }));
+};
 const FiltersAppliedCountLabel = ({ filterBarConfig, }) => {
     const [t] = useTranslation();
     // Count actual applied values, not just filter keys - same logic as badge
@@ -777,9 +851,9 @@ const FiltersAppliedCountLabel = ({ filterBarConfig, }) => {
             return jsxRuntime.jsx(jsxRuntime.Fragment, { children: t("filtersMenu.appliedFiltersLabel.plural", { count: appliedValuesCount }) });
     }
 };
-const CustomFieldsHiddenGroup = ({ appliedCustomFields, filterBarConfig, onClickShow, }) => {
+const CustomFieldsHiddenGroup = ({ appliedCustomFields, filterBarConfig, filtersListId, onClickShow, }) => {
     const [t] = useTranslation();
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Button, { "aria-controls": "filters-list", className: "text-primary-600 w-full justify-between px-3", onClick: onClickShow, prefix: jsxRuntime.jsx(reactComponents.Text, { className: "text-neutral-400", size: "small", uppercase: true, weight: "bold", children: t("filtersBar.groups.CUSTOM_FIELDS") }), size: "small", variant: "ghost-neutral", children: t("filtersBar.showAll") }), appliedCustomFields.length > 0 ? (jsxRuntime.jsx("ul", { "aria-label": "Visible custom fields", "data-testid": "applied-custom-fields-list", children: jsxRuntime.jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: appliedCustomFields, visualStyle: "list-item" }) })) : null] })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.MenuDivider, {}), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Button, { "aria-controls": filtersListId, className: "text-primary-600 w-full justify-between px-3", onClick: onClickShow, prefix: jsxRuntime.jsx(reactComponents.Text, { className: "text-neutral-400", size: "small", uppercase: true, weight: "bold", children: t("filtersBar.groups.CUSTOM_FIELDS") }), size: "small", variant: "ghost-neutral", children: t("filtersBar.showAll") }), appliedCustomFields.length > 0 ? (jsxRuntime.jsx("div", { "aria-label": t("filtersBar.visibleCustomFields"), "data-testid": "applied-custom-fields-list", role: "group", children: jsxRuntime.jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: appliedCustomFields, visualStyle: "list-item" }) })) : null] })] }));
 };
 
 const sharedButtonProps = {
@@ -972,7 +1046,7 @@ const FilterTableComponent = ({ filterKey, filterBarDefinition, filterBarConfig,
         const multipleFiltersAppliedCount = getManuallyAppliedFilterCount(activeFilterKeys);
         const multipleFiltersIsActive = multipleFiltersAppliedCount > 0;
         return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, ref: ref, style: style, children: jsxRuntime.jsx(reactComponents.MenuTree, { children: jsxRuntime.jsx(reactComponents.Popover, { placement: "bottom-start", children: modalState => {
-                        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx(reactComponents.Tooltip, { disabled: modalState.isOpen || !multipleFiltersIsActive, label: jsxRuntime.jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKeys: filterKey, filters: filters }), placement: "bottom", children: jsxRuntime.jsx(reactComponents.IconButton, { ariaLabel: t("filtersBar.filtersHeading"), className: "h-8 w-5 p-0", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Funnel", size: "small" }), variant: multipleFiltersIsActive ? "ghost" : "ghost-neutral" }) }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx("div", { className: reactComponents.cvaMenu({ limitWidth: true }), children: jsxRuntime.jsx("div", { className: reactComponents.cvaMenuList(), children: filters.map((value, index) => value && (jsxRuntime.jsx(FilterComponent, { filter: value, filterBarActions: filterBarConfig, filterState: filterBarConfig, visualStyle: "list-item" }, index))) }) }) })] }));
+                        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx(reactComponents.Tooltip, { disabled: modalState.isOpen || !multipleFiltersIsActive, label: jsxRuntime.jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKeys: filterKey, filters: filters }), placement: "bottom", children: jsxRuntime.jsx(reactComponents.IconButton, { ariaLabel: t("filtersBar.filtersHeading"), className: "h-8 w-5 p-0", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Funnel", size: "small" }), variant: multipleFiltersIsActive ? "ghost" : "ghost-neutral" }) }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { initialFocus: 1, children: jsxRuntime.jsx(reactComponents.MenuContent, { "aria-label": t("filtersBar.filtersHeading"), "data-testid": "filter-table-menu", children: filters.map((value, index) => value && (jsxRuntime.jsx(FilterComponent, { filter: value, filterBarActions: filterBarConfig, filterState: filterBarConfig, visualStyle: "list-item" }, index))) }) })] }));
                     } }) }) }));
     }
     const filter = filterBarDefinition[ensureFilterKey(filterKey)];

package/index.esm.js

@@ -1,9 +1,9 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { useMemo, useState, useEffect, useCallback, Fragment as Fragment$1, useRef } from 'react';
+import { useMemo, useState, useEffect, useCallback, useId, useRef, Fragment as Fragment$1 } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { Filter, FilterBody, RadioFilterItem, CheckBoxFilterItem, FilterHeader as FilterHeader$1, FilterFooter } from '@trackunit/react-filter-components';
-import { Button, Icon, useList, List, Text, useTextSearch, cvaMenuList, cvaMenu, ZStack, IconButton, Badge, useViewportBreakpoints, MenuTree, Popover, PopoverTrigger, Tooltip, PopoverContent, useCustomEncoding, useSearchParamSync, useStorageKey, useWatch } from '@trackunit/react-components';
+import { Button, Icon, useList, List, Text, useTextSearch, MenuDivider, MenuContent, ZStack, IconButton, Badge, useViewportBreakpoints, MenuTree, Popover, PopoverTrigger, Tooltip, PopoverContent, useCustomEncoding, useSearchParamSync, useStorageKey, useWatch } from '@trackunit/react-components';
 import { useAnalytics, useCurrentUser } from '@trackunit/react-core-hooks';
 import { capitalize } from 'string-ts';
 import { createEvent } from '@trackunit/iris-app-runtime-core-api';
@@ -53,6 +53,7 @@ var defaultTranslations = {
 	"filtersBar.searchPlaceholder": "Search...",
 	"filtersBar.selectAll": "Select All",
 	"filtersBar.showAll": "Show all",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} filters applied",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filter applied"
 };
@@ -703,16 +704,18 @@ const useFiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
     ]);
 };
 
+const FilterGroupSection = ({ filterBarConfig, group, showSeparator, showTitle, }) => {
+    const titleId = useId();
+    return (jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { children: [showTitle ? (jsx(Text, { className: "h-7 p-2 text-neutral-400", "data-testid": `${group.key}-group-title`, id: titleId, size: "small", uppercase: true, weight: "bold", children: group.title })) : null, jsx("div", { "aria-labelledby": showTitle ? titleId : undefined, className: "grid", "data-testid": `${group.key}-group-list`, role: "group", children: jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: group.filters, visualStyle: "list-item" }) })] }), showSeparator ? jsx(MenuDivider, {}) : null] }));
+};
 /**
  * FiltersList is a React component that displays a list of filters within a filter bar.
  *
  * @returns {ReactElement} - Returns the FiltersList component.
  */
 const GroupedFiltersList = ({ filterBarConfig, filtersGrouped, className, ref, style, "data-testid": dataTestId = "grouped-filters-list", }) => {
-    return (jsx("div", { className: className, "data-testid": dataTestId, ref: ref, style: style, children: filtersGrouped.map((group, idx) => {
-            const isLastGroup = idx === filtersGrouped.length - 1;
-            return (jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { children: [filtersGrouped.length > 1 && (jsx(Text, { className: "h-7 p-2 text-neutral-400", "data-testid": `${group.key}-group-title`, size: "small", uppercase: true, weight: "bold", children: group.title })), jsx("ul", { "aria-labelledby": `${group.key}-group-title`, className: "grid", "data-testid": `${group.key}-group-list`, children: jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: group.filters, visualStyle: "list-item" }) })] }), isLastGroup ? null : jsx("div", { className: "h-[1px] w-full bg-neutral-200", role: "separator" })] }, group.key));
-        }) }));
+    const showTitle = filtersGrouped.length > 1;
+    return (jsx("div", { className: className, "data-testid": dataTestId, ref: ref, style: style, children: filtersGrouped.map((group, idx) => (jsx(FilterGroupSection, { filterBarConfig: filterBarConfig, group: group, showSeparator: idx !== filtersGrouped.length - 1, showTitle: showTitle }, group.key))) }));
 };
 
 /**
@@ -727,33 +730,104 @@ const ResetFiltersButton = ({ resetFiltersToInitialState, "data-testid": dataTes
         }, ref: ref, size: "small", style: style, variant: "ghost", children: [t("filtersBar.resetFilters"), jsx("span", { className: "sr-only", children: t("filtersBar.resetFiltersSR") })] }));
 };
 
+const firstEnabledMenuItem = (root) => root?.querySelector('[role="menuitem"]:not([aria-disabled="true"])') ?? null;
+/**
+ * Bridges Search and the registered FilterBar rows: Down from Search enters the first matching
+ * item; Up from that item returns to Search. Initial focus lands on Search when it is shown,
+ * otherwise on the first enabled row.
+ *
+ * @returns {UseFiltersMenuSearchNavigationResult} Search ref, panel-node callback, and Search ArrowDown handler
+ */
+const useFiltersMenuSearchNavigation = ({ showSearch, }) => {
+    const searchInputRef = useRef(null);
+    const panelRef = useRef(null);
+    const onPanelArrowUp = useCallback((event) => {
+        if (event.key !== "ArrowUp") {
+            return;
+        }
+        const firstItem = firstEnabledMenuItem(panelRef.current);
+        const active = document.activeElement;
+        if (firstItem && active && (active === firstItem || firstItem.contains(active))) {
+            // Capture on the menu root so this wins over useListNavigation's
+            // loop:true wrap (React onKeyDown on the floating element).
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            searchInputRef.current?.focus();
+        }
+    }, []);
+    const setPanelNode = useCallback((node) => {
+        if (panelRef.current) {
+            panelRef.current.removeEventListener("keydown", onPanelArrowUp, true);
+        }
+        panelRef.current = node;
+        if (node && showSearch) {
+            // Attach here, not in an effect: MenuContent's ref is set after the
+            // first paint, and a [showSearch]-only effect can snapshot a null panel.
+            node.addEventListener("keydown", onPanelArrowUp, true);
+        }
+    }, [onPanelArrowUp, showSearch]);
+    useEffect(() => {
+        const focusInitialTarget = () => {
+            if (showSearch) {
+                searchInputRef.current?.focus();
+                return;
+            }
+            firstEnabledMenuItem(panelRef.current)?.focus();
+        };
+        // Floating UI's default initialFocus is 0 (the trigger). FilterBar cannot
+        // use initialFocus={1}: that would land on Reset when Search is hidden.
+        const frame = requestAnimationFrame(focusInitialTarget);
+        return () => cancelAnimationFrame(frame);
+    }, [showSearch]);
+    const handleSearchKeyDown = useCallback((event) => {
+        if (event.key !== "ArrowDown") {
+            return;
+        }
+        const firstItem = firstEnabledMenuItem(panelRef.current);
+        if (firstItem) {
+            // Stop list-navigation from owning this ArrowDown so activeIndex stays
+            // unset and ArrowUp from the first row can return to Search.
+            event.preventDefault();
+            event.stopPropagation();
+            firstItem.focus();
+        }
+    }, []);
+    return useMemo(() => ({
+        searchInputRef,
+        setPanelNode,
+        handleSearchKeyDown,
+    }), [setPanelNode, handleSearchKeyDown]);
+};
+
 /**
  *
  */
 const FiltersMenuContent = ({ filterBarConfig, setShowCustomFilters, setSearchText, searchText, searchResultsGrouped, filtersToShowGrouped, removeCustomFieldsGroup, hasCustomFields, appliedCustomFields, showCustomFilters, filterBarDefinitionCount, className, "data-testid": dataTestId = "starred-filters-menu-popover", ref, style, }) => {
     const [t] = useTranslation();
-    // Chrome-only shell (not `MenuContent`): filter rows are wrapped (`GroupedFiltersList` →
-    // `FilterComponent` → `Filter` → `MenuItem`), so `MenuContent`'s direct-child registration would
-    // never attach keyboard nav — leaving a `role="menu"` with no owned menuitems. Shadow/layout come
-    // from `cvaMenu`/`cvaMenuList`; keyboard ownership returns when MenuItem self-registers (GLU-1644).
-    return (jsx("div", { className: cvaMenu({
-            className: twMerge("max-h-[min(600px,calc(100dvh-32px))] grid-rows-[minmax(0,1fr)] overflow-y-hidden p-0", className),
-            limitWidth: true,
-        }), "data-testid": dataTestId, ref: ref, style: style, children: jsxs("div", { 
-            // `gap-y-0` cancels `cvaMenuList`'s default inter-item gap, which here would otherwise land
-            // between the header block (search/count + separator) and the scrollable list below it,
-            // showing as a sliver of whitespace above the list's own scrollbar.
-            className: cvaMenuList({
-                className: "grid-rows-min-fr !max-h-none min-h-0 gap-y-0 !overflow-y-hidden p-0",
-            }), children: [jsxs("div", { children: [jsxs("div", { className: "flex flex-col gap-1 p-1", children: [filterBarDefinitionCount > 5 && (jsx(Search, { autoFocus: true, "data-testid": "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 pl-3", children: [jsx(Text, { className: "text-neutral-400", size: "small", children: jsx(FiltersAppliedCountLabel, { filterBarConfig: filterBarConfig }) }), filterBarConfig.appliedFilterKeys().length > 0 ? (jsx(ResetFiltersButton, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] })] }), jsx(Separator, {})] }), jsxs("div", { className: "flex min-h-0 flex-col gap-1 overflow-auto p-1", children: [jsx(GroupedFiltersList, { className: "flex flex-col gap-1", filterBarConfig: filterBarConfig, filtersGrouped: searchText
-                                ? searchResultsGrouped
-                                : showCustomFilters
-                                    ? filtersToShowGrouped
-                                    : removeCustomFieldsGroup(filtersToShowGrouped) }), hasCustomFields && !showCustomFilters && !searchText ? (jsx(CustomFieldsHiddenGroup, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, onClickShow: () => {
-                                setShowCustomFilters(true);
-                            } })) : null] })] }) }));
-};
-const Separator = () => jsx("hr", { className: "border-neutral-200", role: "separator" });
+    const filtersListId = useId();
+    const showSearch = filterBarDefinitionCount > 5;
+    const { searchInputRef, setPanelNode, handleSearchKeyDown } = useFiltersMenuSearchNavigation({
+        showSearch,
+    });
+    const setPanelRef = useCallback((node) => {
+        setPanelNode(node);
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [setPanelNode, ref]);
+    const visibleGroups = searchText
+        ? searchResultsGrouped
+        : showCustomFilters
+            ? filtersToShowGrouped
+            : removeCustomFieldsGroup(filtersToShowGrouped);
+    const hasVisibleFilters = visibleGroups.some(group => group.filters.length > 0);
+    return (jsxs(MenuContent, { "aria-label": t("filtersBar.filtersHeading"), className: twMerge("max-h-[min(600px,calc(100dvh-32px))] grid-rows-[minmax(0,1fr)] overflow-y-hidden p-0", className), "data-testid": dataTestId, listClassName: "grid-rows-min-fr !max-h-none min-h-0 gap-y-0 !overflow-y-hidden p-0", ref: setPanelRef, style: style, children: [jsxs("div", { children: [jsxs("div", { className: "flex flex-col gap-1 p-1", children: [showSearch ? (jsx(Search, { "data-testid": "starred-filters-menu-search", fieldSize: "small", id: "search-filters-list", onChange: e => setSearchText(e.currentTarget.value), onClear: () => setSearchText(""), onKeyDown: handleSearchKeyDown, placeholder: t("filtersBar.searchFiltersPlaceholder"), ref: searchInputRef, value: searchText })) : null, jsxs("div", { className: "flex h-7 items-center justify-between gap-1 pl-3", children: [jsx(Text, { className: "text-neutral-400", size: "small", children: jsx(FiltersAppliedCountLabel, { filterBarConfig: filterBarConfig }) }), filterBarConfig.appliedFilterKeys().length > 0 ? (jsx(ResetFiltersButton, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] })] }), jsx(MenuDivider, {})] }), jsxs("div", { className: "flex min-h-0 flex-col gap-1 overflow-auto p-1", id: filtersListId, children: [searchText && !hasVisibleFilters ? (jsx("div", { "aria-live": "polite", role: "status", children: jsx(Text, { className: "p-2 text-neutral-400", size: "small", children: t("filtersBar.emptyResults") }) })) : (jsx(GroupedFiltersList, { className: "flex flex-col gap-1", filterBarConfig: filterBarConfig, filtersGrouped: visibleGroups })), hasCustomFields && !showCustomFilters && !searchText ? (jsx(CustomFieldsHiddenGroup, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, filtersListId: filtersListId, onClickShow: () => {
+                            setShowCustomFilters(true);
+                        } })) : null] })] }));
+};
 const FiltersAppliedCountLabel = ({ filterBarConfig, }) => {
     const [t] = useTranslation();
     // Count actual applied values, not just filter keys - same logic as badge
@@ -775,9 +849,9 @@ const FiltersAppliedCountLabel = ({ filterBarConfig, }) => {
             return jsx(Fragment, { children: t("filtersMenu.appliedFiltersLabel.plural", { count: appliedValuesCount }) });
     }
 };
-const CustomFieldsHiddenGroup = ({ appliedCustomFields, filterBarConfig, onClickShow, }) => {
+const CustomFieldsHiddenGroup = ({ appliedCustomFields, filterBarConfig, filtersListId, onClickShow, }) => {
     const [t] = useTranslation();
-    return (jsxs(Fragment, { children: [jsx(Separator, {}), jsxs("div", { children: [jsx(Button, { "aria-controls": "filters-list", className: "text-primary-600 w-full justify-between px-3", onClick: onClickShow, prefix: jsx(Text, { className: "text-neutral-400", size: "small", uppercase: true, weight: "bold", children: t("filtersBar.groups.CUSTOM_FIELDS") }), size: "small", variant: "ghost-neutral", children: t("filtersBar.showAll") }), appliedCustomFields.length > 0 ? (jsx("ul", { "aria-label": "Visible custom fields", "data-testid": "applied-custom-fields-list", children: jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: appliedCustomFields, visualStyle: "list-item" }) })) : null] })] }));
+    return (jsxs(Fragment, { children: [jsx(MenuDivider, {}), jsxs("div", { children: [jsx(Button, { "aria-controls": filtersListId, className: "text-primary-600 w-full justify-between px-3", onClick: onClickShow, prefix: jsx(Text, { className: "text-neutral-400", size: "small", uppercase: true, weight: "bold", children: t("filtersBar.groups.CUSTOM_FIELDS") }), size: "small", variant: "ghost-neutral", children: t("filtersBar.showAll") }), appliedCustomFields.length > 0 ? (jsx("div", { "aria-label": t("filtersBar.visibleCustomFields"), "data-testid": "applied-custom-fields-list", role: "group", children: jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: appliedCustomFields, visualStyle: "list-item" }) })) : null] })] }));
 };
 
 const sharedButtonProps = {
@@ -970,7 +1044,7 @@ const FilterTableComponent = ({ filterKey, filterBarDefinition, filterBarConfig,
         const multipleFiltersAppliedCount = getManuallyAppliedFilterCount(activeFilterKeys);
         const multipleFiltersIsActive = multipleFiltersAppliedCount > 0;
         return (jsx("div", { className: className, "data-testid": dataTestId, ref: ref, style: style, children: jsx(MenuTree, { children: jsx(Popover, { placement: "bottom-start", children: modalState => {
-                        return (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: jsx("div", { className: "relative", children: jsx(Tooltip, { disabled: modalState.isOpen || !multipleFiltersIsActive, label: jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKeys: filterKey, filters: filters }), placement: "bottom", children: jsx(IconButton, { ariaLabel: t("filtersBar.filtersHeading"), className: "h-8 w-5 p-0", icon: jsx(Icon, { name: "Funnel", size: "small" }), variant: multipleFiltersIsActive ? "ghost" : "ghost-neutral" }) }) }) }), jsx(PopoverContent, { children: jsx("div", { className: cvaMenu({ limitWidth: true }), children: jsx("div", { className: cvaMenuList(), children: filters.map((value, index) => value && (jsx(FilterComponent, { filter: value, filterBarActions: filterBarConfig, filterState: filterBarConfig, visualStyle: "list-item" }, index))) }) }) })] }));
+                        return (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: jsx("div", { className: "relative", children: jsx(Tooltip, { disabled: modalState.isOpen || !multipleFiltersIsActive, label: jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filterKeys: filterKey, filters: filters }), placement: "bottom", children: jsx(IconButton, { ariaLabel: t("filtersBar.filtersHeading"), className: "h-8 w-5 p-0", icon: jsx(Icon, { name: "Funnel", size: "small" }), variant: multipleFiltersIsActive ? "ghost" : "ghost-neutral" }) }) }) }), jsx(PopoverContent, { initialFocus: 1, children: jsx(MenuContent, { "aria-label": t("filtersBar.filtersHeading"), "data-testid": "filter-table-menu", children: filters.map((value, index) => value && (jsx(FilterComponent, { filter: value, filterBarActions: filterBarConfig, filterState: filterBarConfig, visualStyle: "list-item" }, index))) }) })] }));
                     } }) }) }));
     }
     const filter = filterBarDefinition[ensureFilterKey(filterKey)];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "2.6.33",
+  "version": "2.6.35",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,17 +11,17 @@
     "tailwind-merge": "^2.0.0",
     "string-ts": "^2.0.0",
     "zod": "^3.25.76",
-    "@trackunit/iris-app-api": "2.4.22",
-    "@trackunit/react-core-hooks": "1.21.30",
-    "@trackunit/react-filter-components": "2.6.32",
-    "@trackunit/react-date-and-time-components": "2.6.32",
-    "@trackunit/shared-utils": "1.16.25",
-    "@trackunit/react-form-components": "2.6.32",
-    "@trackunit/iris-app-runtime-core-api": "1.17.31",
-    "@trackunit/geo-json-utils": "1.15.24",
-    "@trackunit/i18n-library-translation": "2.4.30",
-    "@trackunit/css-class-variance-utilities": "1.14.22",
-    "@trackunit/react-components": "2.10.25"
+    "@trackunit/iris-app-api": "2.4.24",
+    "@trackunit/react-core-hooks": "1.21.32",
+    "@trackunit/react-filter-components": "2.6.34",
+    "@trackunit/react-date-and-time-components": "2.6.34",
+    "@trackunit/shared-utils": "1.16.26",
+    "@trackunit/react-form-components": "2.6.34",
+    "@trackunit/iris-app-runtime-core-api": "1.17.33",
+    "@trackunit/geo-json-utils": "1.15.25",
+    "@trackunit/i18n-library-translation": "2.4.32",
+    "@trackunit/css-class-variance-utilities": "1.14.23",
+    "@trackunit/react-components": "2.10.27"
   },
   "peerDependencies": {
     "@apollo/client": "^3.13.8",

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

@@ -0,0 +1,16 @@
+import { KeyboardEvent, Ref, RefCallback } from "react";
+export interface UseFiltersMenuSearchNavigationResult {
+    searchInputRef: Ref<HTMLInputElement>;
+    setPanelNode: RefCallback<HTMLDivElement>;
+    handleSearchKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+}
+/**
+ * Bridges Search and the registered FilterBar rows: Down from Search enters the first matching
+ * item; Up from that item returns to Search. Initial focus lands on Search when it is shown,
+ * otherwise on the first enabled row.
+ *
+ * @returns {UseFiltersMenuSearchNavigationResult} Search ref, panel-node callback, and Search ArrowDown handler
+ */
+export declare const useFiltersMenuSearchNavigation: ({ showSearch, }: {
+    showSearch: boolean;
+}) => UseFiltersMenuSearchNavigationResult;