@trackunit/filters-filter-bar 2.6.41 → 2.6.45

package/index.cjs.js

@@ -706,6 +706,24 @@ const useFiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
     ]);
 };
 
+/**
+ * The filters menu's search box, registered as the menu's first keyboard stop so ArrowDown enters
+ * the filter rows and ArrowUp from the first row comes back here.
+ *
+ * It is a component rather than a few lines in `FiltersMenuContent` because `useMenuSearchField`
+ * registers through Floating UI's `FloatingList`, whose context `MenuContent` opens around its
+ * children -- a caller that also renders the `MenuContent` sits outside that context and registers
+ * nothing.
+ *
+ * @param {FiltersMenuSearchFieldProps} props The current query, its setter, and the id of the list this field filters
+ * @returns {ReactElement} The registered search input
+ */
+const FiltersMenuSearchField = ({ searchText, setSearchText, filtersListId, }) => {
+    const [t] = useTranslation();
+    const { getSearchFieldProps } = reactComponents.useMenuSearchField();
+    return (jsxRuntime.jsx(reactFormComponents.Search, { "aria-controls": filtersListId, "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, ...getSearchFieldProps() }));
+};
+
 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] }));
@@ -732,75 +750,6 @@ 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]);
-};
-
 /**
  *
  */
@@ -808,25 +757,13 @@ const FiltersMenuContent = ({ filterBarConfig, setShowCustomFilters, setSearchTe
     const [t] = useTranslation();
     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: () => {
+    return (jsxRuntime.jsxs(reactComponents.MenuContent, { "aria-label": t("filtersBar.filtersHeading"), autoFocus: true, 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: ref, style: style, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 p-1", children: [showSearch ? (jsxRuntime.jsx(FiltersMenuSearchField, { filtersListId: filtersListId, searchText: searchText, setSearchText: setSearchText })) : 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", "data-testid": "starred-filters-menu-list", 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] })] }));
 };

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, useId, useRef, Fragment as Fragment$1 } from 'react';
+import { useMemo, useState, useEffect, useCallback, useId, Fragment as Fragment$1, useRef } 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, MenuDivider, MenuContent, ZStack, IconButton, Badge, useViewportBreakpoints, MenuTree, Popover, PopoverTrigger, Tooltip, PopoverContent, useCustomEncoding, useSearchParamSync, useStorageKey, useWatch } from '@trackunit/react-components';
+import { Button, Icon, useList, List, Text, useTextSearch, useMenuSearchField, 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';
@@ -704,6 +704,24 @@ const useFiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
     ]);
 };
 
+/**
+ * The filters menu's search box, registered as the menu's first keyboard stop so ArrowDown enters
+ * the filter rows and ArrowUp from the first row comes back here.
+ *
+ * It is a component rather than a few lines in `FiltersMenuContent` because `useMenuSearchField`
+ * registers through Floating UI's `FloatingList`, whose context `MenuContent` opens around its
+ * children -- a caller that also renders the `MenuContent` sits outside that context and registers
+ * nothing.
+ *
+ * @param {FiltersMenuSearchFieldProps} props The current query, its setter, and the id of the list this field filters
+ * @returns {ReactElement} The registered search input
+ */
+const FiltersMenuSearchField = ({ searchText, setSearchText, filtersListId, }) => {
+    const [t] = useTranslation();
+    const { getSearchFieldProps } = useMenuSearchField();
+    return (jsx(Search, { "aria-controls": filtersListId, "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, ...getSearchFieldProps() }));
+};
+
 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] }));
@@ -730,75 +748,6 @@ 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]);
-};
-
 /**
  *
  */
@@ -806,25 +755,13 @@ const FiltersMenuContent = ({ filterBarConfig, setShowCustomFilters, setSearchTe
     const [t] = useTranslation();
     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: () => {
+    return (jsxs(MenuContent, { "aria-label": t("filtersBar.filtersHeading"), autoFocus: true, 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: ref, style: style, children: [jsxs("div", { children: [jsxs("div", { className: "flex flex-col gap-1 p-1", children: [showSearch ? (jsx(FiltersMenuSearchField, { filtersListId: filtersListId, searchText: searchText, setSearchText: setSearchText })) : 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", "data-testid": "starred-filters-menu-list", 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] })] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "2.6.41",
+  "version": "2.6.45",
   "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.27",
-    "@trackunit/react-core-hooks": "1.21.36",
-    "@trackunit/react-filter-components": "2.6.40",
-    "@trackunit/react-date-and-time-components": "2.6.40",
-    "@trackunit/shared-utils": "1.16.28",
-    "@trackunit/react-form-components": "2.6.40",
-    "@trackunit/iris-app-runtime-core-api": "1.17.36",
-    "@trackunit/geo-json-utils": "1.15.27",
-    "@trackunit/i18n-library-translation": "2.4.36",
-    "@trackunit/css-class-variance-utilities": "1.14.25",
-    "@trackunit/react-components": "2.11.2"
+    "@trackunit/iris-app-api": "2.4.29",
+    "@trackunit/react-core-hooks": "1.21.38",
+    "@trackunit/react-filter-components": "2.6.44",
+    "@trackunit/react-date-and-time-components": "2.6.44",
+    "@trackunit/shared-utils": "1.16.30",
+    "@trackunit/react-form-components": "2.6.44",
+    "@trackunit/iris-app-runtime-core-api": "1.17.38",
+    "@trackunit/geo-json-utils": "1.15.29",
+    "@trackunit/i18n-library-translation": "2.4.38",
+    "@trackunit/css-class-variance-utilities": "1.14.27",
+    "@trackunit/react-components": "2.11.6"
   },
   "peerDependencies": {
     "@apollo/client": "^3.13.8",

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

@@ -0,0 +1,20 @@
+import { ReactElement } from "react";
+interface FiltersMenuSearchFieldProps {
+    searchText: string;
+    setSearchText: (text: string) => void;
+    filtersListId: string;
+}
+/**
+ * The filters menu's search box, registered as the menu's first keyboard stop so ArrowDown enters
+ * the filter rows and ArrowUp from the first row comes back here.
+ *
+ * It is a component rather than a few lines in `FiltersMenuContent` because `useMenuSearchField`
+ * registers through Floating UI's `FloatingList`, whose context `MenuContent` opens around its
+ * children -- a caller that also renders the `MenuContent` sits outside that context and registers
+ * nothing.
+ *
+ * @param {FiltersMenuSearchFieldProps} props The current query, its setter, and the id of the list this field filters
+ * @returns {ReactElement} The registered search input
+ */
+export declare const FiltersMenuSearchField: ({ searchText, setSearchText, filtersListId, }: FiltersMenuSearchFieldProps) => ReactElement;
+export {};

package/translation.cjs.js

@@ -37,6 +37,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Suchen…",
 	"filtersBar.selectAll": "Alle auswählen",
 	"filtersBar.showAll": "Alle anzeigen",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} Filter angewendet",
 	"filtersMenu.appliedFiltersLabel.singular": "1 Filter angewendet"
 };

package/translation.esm.js

@@ -35,6 +35,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Suchen…",
 	"filtersBar.selectAll": "Alle auswählen",
 	"filtersBar.showAll": "Alle anzeigen",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} Filter angewendet",
 	"filtersMenu.appliedFiltersLabel.singular": "1 Filter angewendet"
 };

package/translation10.cjs.js

@@ -37,6 +37,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Szukaj...",
 	"filtersBar.selectAll": "Wybierz wszystko",
 	"filtersBar.showAll": "Pokaż wszystkie",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "Zastosowane filtry {{count}}",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filtr zastosowany"
 };

package/translation10.esm.js

@@ -35,6 +35,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Szukaj...",
 	"filtersBar.selectAll": "Wybierz wszystko",
 	"filtersBar.showAll": "Pokaż wszystkie",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "Zastosowane filtry {{count}}",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filtr zastosowany"
 };

package/translation11.cjs.js

@@ -37,6 +37,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Pesquisar...",
 	"filtersBar.selectAll": "Selecionar todos",
 	"filtersBar.showAll": "Mostrar tudo",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} filtros aplicados",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filtro aplicado"
 };

package/translation11.esm.js

@@ -35,6 +35,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Pesquisar...",
 	"filtersBar.selectAll": "Selecionar todos",
 	"filtersBar.showAll": "Mostrar tudo",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} filtros aplicados",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filtro aplicado"
 };

package/translation12.cjs.js

@@ -37,6 +37,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Поиск...",
 	"filtersBar.selectAll": "Выбрать все",
 	"filtersBar.showAll": "Показать все",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} фильтров применено",
 	"filtersMenu.appliedFiltersLabel.singular": "1 фильтр применен"
 };

package/translation12.esm.js

@@ -35,6 +35,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Поиск...",
 	"filtersBar.selectAll": "Выбрать все",
 	"filtersBar.showAll": "Показать все",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} фильтров применено",
 	"filtersMenu.appliedFiltersLabel.singular": "1 фильтр применен"
 };

package/translation13.cjs.js

@@ -37,6 +37,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Căutare...",
 	"filtersBar.selectAll": "Selectați tot",
 	"filtersBar.showAll": "Afișare toate",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} filtre aplicate",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filtru aplicat"
 };

package/translation13.esm.js

@@ -35,6 +35,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Căutare...",
 	"filtersBar.selectAll": "Selectați tot",
 	"filtersBar.showAll": "Afișare toate",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} filtre aplicate",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filtru aplicat"
 };

package/translation14.cjs.js

@@ -37,6 +37,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Buscar...",
 	"filtersBar.selectAll": "Seleccionar todos",
 	"filtersBar.showAll": "Mostrar todos",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} filtros aplicados",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filtro aplicado"
 };

package/translation14.esm.js

@@ -35,6 +35,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Buscar...",
 	"filtersBar.selectAll": "Seleccionar todos",
 	"filtersBar.showAll": "Mostrar todos",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} filtros aplicados",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filtro aplicado"
 };

package/translation15.cjs.js

@@ -37,6 +37,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Sök...",
 	"filtersBar.selectAll": "Välj alla",
 	"filtersBar.showAll": "Visa alla",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} aktiva filter",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filter är aktivt"
 };

package/translation15.esm.js

@@ -35,6 +35,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Sök...",
 	"filtersBar.selectAll": "Välj alla",
 	"filtersBar.showAll": "Visa alla",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} aktiva filter",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filter är aktivt"
 };

package/translation16.cjs.js

@@ -37,6 +37,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "検索",
 	"filtersBar.selectAll": "すべて選択",
 	"filtersBar.showAll": "すべて表示",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}}のフィルターが適用されています",
 	"filtersMenu.appliedFiltersLabel.singular": "1つのフィルターが適用されています"
 };

package/translation16.esm.js

@@ -35,6 +35,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "検索",
 	"filtersBar.selectAll": "すべて選択",
 	"filtersBar.showAll": "すべて表示",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}}のフィルターが適用されています",
 	"filtersMenu.appliedFiltersLabel.singular": "1つのフィルターが適用されています"
 };

package/translation17.cjs.js

@@ -37,6 +37,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "ค้นหา...",
 	"filtersBar.selectAll": "เลือกทั้งหมด",
 	"filtersBar.showAll": "แสดงทั้งหมด",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "ใช้ตัวกรอง {{count}} รายการ",
 	"filtersMenu.appliedFiltersLabel.singular": "ปรับใช้ 1 ตัวกรองแล้ว"
 };

package/translation17.esm.js

@@ -35,6 +35,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "ค้นหา...",
 	"filtersBar.selectAll": "เลือกทั้งหมด",
 	"filtersBar.showAll": "แสดงทั้งหมด",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "ใช้ตัวกรอง {{count}} รายการ",
 	"filtersMenu.appliedFiltersLabel.singular": "ปรับใช้ 1 ตัวกรองแล้ว"
 };

package/translation2.cjs.js

@@ -37,6 +37,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Søg...",
 	"filtersBar.selectAll": "Vælg alle",
 	"filtersBar.showAll": "Vis alle",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} filtre anvendt",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filter anvendt"
 };

package/translation2.esm.js

@@ -35,6 +35,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Søg...",
 	"filtersBar.selectAll": "Vælg alle",
 	"filtersBar.showAll": "Vis alle",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} filtre anvendt",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filter anvendt"
 };

package/translation3.cjs.js

@@ -37,6 +37,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Hledat...",
 	"filtersBar.selectAll": "Vybrat vše",
 	"filtersBar.showAll": "Zobrazit vše",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "Jsou použity {{count}} filtry",
 	"filtersMenu.appliedFiltersLabel.singular": "Je použit 1 filtr"
 };

package/translation3.esm.js

@@ -35,6 +35,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Hledat...",
 	"filtersBar.selectAll": "Vybrat vše",
 	"filtersBar.showAll": "Zobrazit vše",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "Jsou použity {{count}} filtry",
 	"filtersMenu.appliedFiltersLabel.singular": "Je použit 1 filtr"
 };

package/translation4.cjs.js

@@ -37,6 +37,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Zoeken...",
 	"filtersBar.selectAll": "Selecteer alles",
 	"filtersBar.showAll": "Alles weergeven",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} filters toegepast",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filter toegepast"
 };

package/translation4.esm.js

@@ -35,6 +35,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Zoeken...",
 	"filtersBar.selectAll": "Selecteer alles",
 	"filtersBar.showAll": "Alles weergeven",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} filters toegepast",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filter toegepast"
 };

package/translation5.cjs.js

@@ -37,6 +37,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Rechercher...",
 	"filtersBar.selectAll": "Tout sélectionner",
 	"filtersBar.showAll": "Tout afficher",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} filtres appliqués",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filtre appliqué"
 };

package/translation5.esm.js

@@ -35,6 +35,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Rechercher...",
 	"filtersBar.selectAll": "Tout sélectionner",
 	"filtersBar.showAll": "Tout afficher",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} filtres appliqués",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filtre appliqué"
 };

package/translation6.cjs.js

@@ -37,6 +37,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Hae...",
 	"filtersBar.selectAll": "Valitse kaikki",
 	"filtersBar.showAll": "Näytä kaikki",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} suodatinta käytetty",
 	"filtersMenu.appliedFiltersLabel.singular": "1 suodatinta käytetty"
 };

package/translation6.esm.js

@@ -35,6 +35,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Hae...",
 	"filtersBar.selectAll": "Valitse kaikki",
 	"filtersBar.showAll": "Näytä kaikki",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} suodatinta käytetty",
 	"filtersMenu.appliedFiltersLabel.singular": "1 suodatinta käytetty"
 };

package/translation7.cjs.js

@@ -37,6 +37,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Keresés...",
 	"filtersBar.selectAll": "Összes kijelölése",
 	"filtersBar.showAll": "Összes megjelenítése",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} alkalmazott szűrő",
 	"filtersMenu.appliedFiltersLabel.singular": "1 alkalmazott szűrő"
 };

package/translation7.esm.js

@@ -35,6 +35,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Keresés...",
 	"filtersBar.selectAll": "Összes kijelölése",
 	"filtersBar.showAll": "Összes megjelenítése",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} alkalmazott szűrő",
 	"filtersMenu.appliedFiltersLabel.singular": "1 alkalmazott szűrő"
 };

package/translation8.cjs.js

@@ -37,6 +37,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Ricerca...",
 	"filtersBar.selectAll": "Seleziona tutto",
 	"filtersBar.showAll": "Mostra tutto",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} filtri applicati",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filtro applicato"
 };

package/translation8.esm.js

@@ -35,6 +35,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Ricerca...",
 	"filtersBar.selectAll": "Seleziona tutto",
 	"filtersBar.showAll": "Mostra tutto",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} filtri applicati",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filtro applicato"
 };

package/translation9.cjs.js

@@ -37,6 +37,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Søk ...",
 	"filtersBar.selectAll": "Velg alle",
 	"filtersBar.showAll": "Vis alle",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} filtre brukt",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filter brukt"
 };

package/translation9.esm.js

@@ -35,6 +35,7 @@ var translation = {
 	"filtersBar.searchPlaceholder": "Søk ...",
 	"filtersBar.selectAll": "Velg alle",
 	"filtersBar.showAll": "Vis alle",
+	"filtersBar.visibleCustomFields": "Visible custom fields",
 	"filtersMenu.appliedFiltersLabel.plural": "{{count}} filtre brukt",
 	"filtersMenu.appliedFiltersLabel.singular": "1 filter brukt"
 };

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

@@ -1,16 +0,0 @@
-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;