@trackunit/react-components 2.11.2 → 2.11.6

package/index.cjs.js

@@ -7364,15 +7364,16 @@ const compactFloatingListRefs = (elementsRef, labelsRef) => {
     labels.length = lastLive + 1;
 };
 /**
- * Index of the first registered item that is not `aria-disabled`. Used as the initial tab stop
+ * Index of the first registered entry that is not `aria-disabled`. Used as the initial tab stop
  * when `activeIndex` is still null.
  *
  * @param elementsRef The FloatingList elements array
- * @returns {number} The first enabled index, or `0` when the list has no enabled item
+ * @param skipIndex Registered index to ignore, used to look past a search field to the first real item
+ * @returns {number} The first enabled index, or `0` when the list has no enabled entry
  */
-const firstEnabledListIndex = (elementsRef) => {
-    const index = elementsRef.current.findIndex(element => {
-        if (!element) {
+const firstEnabledListIndex = (elementsRef, skipIndex) => {
+    const index = elementsRef.current.findIndex((element, elementIndex) => {
+        if (!element || elementIndex === skipIndex) {
             return false;
         }
         return element.getAttribute("aria-disabled") !== "true";
@@ -7385,7 +7386,7 @@ const UNMANAGED_SELECTION = [];
  * Owns MenuContent's list registration, selection, and typeable-child key handling so the
  * component file stays the shell + JSX.
  */
-const useMenuContentState = ({ children, isMulti, selectedItems: controlledSelectedItems, onSelectionChange, ref, }) => {
+const useMenuContentState = ({ children, isMulti, autoFocus, selectedItems: controlledSelectedItems, onSelectionChange, ref, }) => {
     const selectionManaged = controlledSelectedItems !== undefined || onSelectionChange !== undefined;
     const [internalSelectedItems, setInternalSelectedItems] = react.useState(controlledSelectedItems ?? []);
     const selectedItems = selectionManaged ? (controlledSelectedItems ?? internalSelectedItems) : UNMANAGED_SELECTION;
@@ -7393,6 +7394,10 @@ const useMenuContentState = ({ children, isMulti, selectedItems: controlledSelec
     const [firstEnabledIndex, setFirstEnabledIndex] = react.useState(0);
     const listRef = react.useRef([]);
     const labelsRef = react.useRef([]);
+    const searchFieldIndexRef = react.useRef(null);
+    const registerSearchField = react.useCallback((index) => {
+        searchFieldIndexRef.current = index;
+    }, []);
     const ambientPopover = useOptionalPopoverContext();
     // Falls back to a local, always-open floating context when there is no ambient `Popover` (e.g. `MenuContent`
     // rendered standalone inside a `Collapse`) -- `useFloating` must still be called unconditionally per the
@@ -7416,6 +7421,10 @@ const useMenuContentState = ({ children, isMulti, selectedItems: controlledSelec
         onNavigate: setActiveIndex,
         loop: true,
         nested: isNested,
+        // Floating UI's own entry focus, which waits for the list to finish registering before it
+        // picks the first enabled index. Off by default: most menus open from a trigger the user
+        // should stay on.
+        focusItemOnOpen: autoFocus,
     });
     const typeahead = react$1.useTypeahead(context, {
         listRef: labelsRef,
@@ -7426,6 +7435,10 @@ const useMenuContentState = ({ children, isMulti, selectedItems: controlledSelec
     const { getFloatingProps, getItemProps } = react$1.useInteractions([listNavigation, typeahead]);
     const syncRegisteredList = react.useCallback(() => {
         compactFloatingListRefs(listRef, labelsRef);
+        // Deliberately *not* skipping the search field. `firstEnabledIndex` is the menu's single
+        // roving tab stop, and a registered field should hold it: that is what keeps every row's
+        // `tabIndex` at -1 while the user is typing, so Tab leaves for the menu's chrome instead of
+        // stopping on a row. Only Home (below) looks past the field, because Home addresses items.
         const nextFirstEnabled = firstEnabledListIndex(listRef);
         setFirstEnabledIndex(current => (current === nextFirstEnabled ? current : nextFirstEnabled));
         setActiveIndex(current => {
@@ -7471,24 +7484,62 @@ const useMenuContentState = ({ children, isMulti, selectedItems: controlledSelec
         selectedItems,
         handleItemClick,
         syncRegisteredList,
-    }), [activeIndex, firstEnabledIndex, getItemProps, isMulti, selectedItems, handleItemClick, syncRegisteredList]);
+        setActiveIndex,
+        registerSearchField,
+    }), [
+        activeIndex,
+        firstEnabledIndex,
+        getItemProps,
+        isMulti,
+        selectedItems,
+        handleItemClick,
+        syncRegisteredList,
+        registerSearchField,
+    ]);
     // Printable characters and Home/End/Left/Right stay native in nested inputs (e.g. FilterBar
     // Search). ArrowDown is left alone so a typeable child can enter the registered list.
     const handleKeyDownCapture = react.useCallback((event) => {
         if (!utils.isTypeableElement(event.target)) {
+            // Home/End address the *items*. A registered search field is a navigation stop but not an
+            // item, and it renders above them, so Floating UI's Home -- the list's minimum index -- would
+            // land in the input. Redirect to the first item instead, by moving `activeIndex` rather than
+            // calling `focus()`, so list navigation stays the only thing that moves focus. End needs no
+            // counterpart: the field is never the maximum index.
+            //
+            // The containment check is not redundant: a `MenuItem` submenu renders its own `MenuContent`
+            // into a portal, and React still routes that subtree's synthetic events through the React
+            // tree, so this handler sees a submenu's Home first and would claim it before the submenu
+            // ever ran its own.
+            if (event.key === "Home" &&
+                searchFieldIndexRef.current !== null &&
+                event.target instanceof Node &&
+                event.currentTarget.contains(event.target)) {
+                event.preventDefault();
+                event.stopPropagation();
+                const firstItemIndex = firstEnabledListIndex(listRef, searchFieldIndexRef.current);
+                // `firstEnabledListIndex` falls back to 0 when nothing qualifies, which is the field's own
+                // index once a query has filtered every row away. Leave the highlight alone rather than
+                // pulling it into the input.
+                if (firstItemIndex !== searchFieldIndexRef.current) {
+                    setActiveIndex(firstItemIndex);
+                }
+            }
             return;
         }
         if (event.key === "ArrowDown") {
             return;
         }
-        // ArrowUp is stopped so wrapping does not jump to the last item while the user is in Search.
-        // Phase 2 (FilterBar) adds the reverse path: ArrowUp on the first row returns to Search.
+        // ArrowUp is swallowed only for an *unregistered* typeable child, where a wrap has no sensible
+        // destination: the input is not in the list, so list navigation would move the menu's roving
+        // tab stop to the last item behind the user's back. A field registered via `useMenuSearchField`
+        // *is* in the list, at the index above the first row, so its ArrowUp is an ordinary wrap to the
+        // last item -- symmetric with the ArrowDown wrap that already lands back in the field.
         if (event.key.length === 1 ||
             event.key === "Home" ||
             event.key === "End" ||
             event.key === "ArrowLeft" ||
             event.key === "ArrowRight" ||
-            event.key === "ArrowUp") {
+            (event.key === "ArrowUp" && searchFieldIndexRef.current === null)) {
             event.stopPropagation();
         }
     }, []);
@@ -7568,10 +7619,11 @@ const useMenuContentState = ({ children, isMulti, selectedItems: controlledSelec
  * @param {MenuContentProps} props - The props for the MenuContent component
  * @returns {ReactElement} MenuContent component
  */
-const MenuContent = ({ "data-testid": dataTestId, className, listClassName, children, isMulti = false, selectedItems, onSelectionChange, style, ref, "aria-label": ariaLabel, ...args }) => {
+const MenuContent = ({ "data-testid": dataTestId, className, listClassName, children, isMulti = false, autoFocus = false, selectedItems, onSelectionChange, style, ref, "aria-label": ariaLabel, ...args }) => {
     const { floatingRef, getFloatingProps, handleKeyDownCapture, listRef, labelsRef, menuContext } = useMenuContentState({
         children,
         isMulti,
+        autoFocus,
         selectedItems,
         onSelectionChange,
         ref,
@@ -7579,6 +7631,94 @@ const MenuContent = ({ "data-testid": dataTestId, className, listClassName, chil
     return (jsxRuntime.jsx("div", { "aria-label": ariaLabel, className: cvaMenu({ className, limitWidth: true }), "data-testid": dataTestId ? `${dataTestId}-menu-list` : "menu-list", onKeyDownCapture: handleKeyDownCapture, ref: floatingRef, role: "menu", style: style, tabIndex: -1, ...getFloatingProps({ onClick: args.onClick }), children: jsxRuntime.jsx("div", { className: cvaMenuList({ className: listClassName }), children: jsxRuntime.jsx(MenuContentContext.Provider, { value: menuContext, children: jsxRuntime.jsx(react$1.FloatingList, { elementsRef: listRef, labelsRef: labelsRef, children: children }) }) }) }));
 };
 
+/**
+ * Joins a search input to the nearest `MenuContent` as the stop *above* the first item, so Floating
+ * UI's list navigation moves focus in and out of the list on its own: ArrowDown from the field enters
+ * the list, and ArrowUp from the first item comes back to the field. The field is a full member of
+ * the loop, so ArrowUp from it wraps to the last item and ArrowDown from the last item wraps back.
+ *
+ * Focus then has a single owner. Moving between an unregistered field and the list means calling
+ * `.focus()` from a key handler, which races the `requestAnimationFrame` Floating UI asserts item
+ * focus from: the field wins or loses depending on how far apart the two key presses land. That is
+ * a flake rather than a behaviour, and it cannot be fixed from the outside (ADR-0005).
+ *
+ * Registering also keeps the rows off the sequential Tab path while the field holds focus: the menu's
+ * single roving tab stop is the field itself, so Tab continues to the menu's chrome (reset buttons,
+ * footers) instead of stopping on a row.
+ *
+ * Call it from a component rendered *inside* `MenuContent`: registration goes through the
+ * `FloatingList` context that `MenuContent` opens around its children, so a caller that also renders
+ * the `MenuContent` sits outside that context and registers nothing.
+ *
+ * Product code should render `Search` from `@trackunit/react-form-components` here, as
+ * `FiltersMenuSearchField` does -- the native `<input>` below (and in this package's story and specs)
+ * is only there because `@trackunit/react-components` cannot depend on `@trackunit/react-form-components`
+ * without a dependency cycle.
+ *
+ * @returns {UseMenuSearchFieldResult} A getter for the search input's props
+ * @example
+ * ```tsx
+ * const MenuSearch = () => {
+ *   const { getSearchFieldProps } = useMenuSearchField();
+ *   return <input aria-label="Search" type="text" {...getSearchFieldProps()} />;
+ * };
+ *
+ * const MenuWithSearch = () => (
+ *   <MenuContent autoFocus>
+ *     <MenuSearch />
+ *     <MenuItem id="alpha" label="Alpha" />
+ *   </MenuContent>
+ * );
+ * ```
+ */
+const useMenuSearchField = () => {
+    const menu = useOptionalMenuContentContext();
+    // `label: null` keeps the field out of typeahead: it is a navigation stop, not a match target.
+    const { ref: listItemRef, index } = react$1.useListItem({ label: null });
+    const syncRegisteredList = menu?.syncRegisteredList;
+    const registerSearchField = menu?.registerSearchField;
+    const setActiveIndex = menu?.setActiveIndex;
+    react.useLayoutEffect(() => {
+        if (index < 0 || registerSearchField === undefined) {
+            return;
+        }
+        registerSearchField(index);
+        syncRegisteredList?.();
+        return () => {
+            registerSearchField(null);
+        };
+    }, [index, registerSearchField, syncRegisteredList]);
+    // A consumer's ref only arrives when the getter is called, so it is held here and forwarded
+    // through one callback whose identity never changes. Floating UI's `useMergeRefs` memoizes on the
+    // refs themselves, which matters: `useListItem`'s ref changes identity when it learns its index,
+    // and only re-running it writes the input into `elementsRef` at that index.
+    const userRef = react.useRef(undefined);
+    const forwardUserRef = react.useCallback(node => {
+        const target = userRef.current;
+        if (typeof target === "function") {
+            target(node);
+            return;
+        }
+        if (target !== null && target !== undefined) {
+            target.current = node;
+        }
+    }, []);
+    const ref = react$1.useMergeRefs([listItemRef, forwardUserRef]);
+    const getSearchFieldProps = react.useCallback((userProps) => {
+        userRef.current = userProps?.ref;
+        return {
+            ref,
+            onFocus: (event) => {
+                if (index >= 0) {
+                    setActiveIndex?.(index);
+                }
+                userProps?.onFocus?.(event);
+            },
+        };
+    }, [index, ref, setActiveIndex]);
+    return react.useMemo(() => ({ getSearchFieldProps }), [getSearchFieldProps]);
+};
+
 /**
  * MenuDivider renders a horizontal line to visually separate groups of items within a MenuContent.
  *
@@ -14922,6 +15062,7 @@ exports.useListItemHeight = useListItemHeight;
 exports.useLocalStorage = useLocalStorage;
 exports.useLocalStorageReducer = useLocalStorageReducer;
 exports.useMeasure = useMeasure;
+exports.useMenuSearchField = useMenuSearchField;
 exports.useMenuTree = useMenuTree;
 exports.useMergeRefs = useMergeRefs;
 exports.useModifierKey = useModifierKey;

package/index.esm.js

@@ -7363,15 +7363,16 @@ const compactFloatingListRefs = (elementsRef, labelsRef) => {
     labels.length = lastLive + 1;
 };
 /**
- * Index of the first registered item that is not `aria-disabled`. Used as the initial tab stop
+ * Index of the first registered entry that is not `aria-disabled`. Used as the initial tab stop
  * when `activeIndex` is still null.
  *
  * @param elementsRef The FloatingList elements array
- * @returns {number} The first enabled index, or `0` when the list has no enabled item
+ * @param skipIndex Registered index to ignore, used to look past a search field to the first real item
+ * @returns {number} The first enabled index, or `0` when the list has no enabled entry
  */
-const firstEnabledListIndex = (elementsRef) => {
-    const index = elementsRef.current.findIndex(element => {
-        if (!element) {
+const firstEnabledListIndex = (elementsRef, skipIndex) => {
+    const index = elementsRef.current.findIndex((element, elementIndex) => {
+        if (!element || elementIndex === skipIndex) {
             return false;
         }
         return element.getAttribute("aria-disabled") !== "true";
@@ -7384,7 +7385,7 @@ const UNMANAGED_SELECTION = [];
  * Owns MenuContent's list registration, selection, and typeable-child key handling so the
  * component file stays the shell + JSX.
  */
-const useMenuContentState = ({ children, isMulti, selectedItems: controlledSelectedItems, onSelectionChange, ref, }) => {
+const useMenuContentState = ({ children, isMulti, autoFocus, selectedItems: controlledSelectedItems, onSelectionChange, ref, }) => {
     const selectionManaged = controlledSelectedItems !== undefined || onSelectionChange !== undefined;
     const [internalSelectedItems, setInternalSelectedItems] = useState(controlledSelectedItems ?? []);
     const selectedItems = selectionManaged ? (controlledSelectedItems ?? internalSelectedItems) : UNMANAGED_SELECTION;
@@ -7392,6 +7393,10 @@ const useMenuContentState = ({ children, isMulti, selectedItems: controlledSelec
     const [firstEnabledIndex, setFirstEnabledIndex] = useState(0);
     const listRef = useRef([]);
     const labelsRef = useRef([]);
+    const searchFieldIndexRef = useRef(null);
+    const registerSearchField = useCallback((index) => {
+        searchFieldIndexRef.current = index;
+    }, []);
     const ambientPopover = useOptionalPopoverContext();
     // Falls back to a local, always-open floating context when there is no ambient `Popover` (e.g. `MenuContent`
     // rendered standalone inside a `Collapse`) -- `useFloating` must still be called unconditionally per the
@@ -7415,6 +7420,10 @@ const useMenuContentState = ({ children, isMulti, selectedItems: controlledSelec
         onNavigate: setActiveIndex,
         loop: true,
         nested: isNested,
+        // Floating UI's own entry focus, which waits for the list to finish registering before it
+        // picks the first enabled index. Off by default: most menus open from a trigger the user
+        // should stay on.
+        focusItemOnOpen: autoFocus,
     });
     const typeahead = useTypeahead(context, {
         listRef: labelsRef,
@@ -7425,6 +7434,10 @@ const useMenuContentState = ({ children, isMulti, selectedItems: controlledSelec
     const { getFloatingProps, getItemProps } = useInteractions([listNavigation, typeahead]);
     const syncRegisteredList = useCallback(() => {
         compactFloatingListRefs(listRef, labelsRef);
+        // Deliberately *not* skipping the search field. `firstEnabledIndex` is the menu's single
+        // roving tab stop, and a registered field should hold it: that is what keeps every row's
+        // `tabIndex` at -1 while the user is typing, so Tab leaves for the menu's chrome instead of
+        // stopping on a row. Only Home (below) looks past the field, because Home addresses items.
         const nextFirstEnabled = firstEnabledListIndex(listRef);
         setFirstEnabledIndex(current => (current === nextFirstEnabled ? current : nextFirstEnabled));
         setActiveIndex(current => {
@@ -7470,24 +7483,62 @@ const useMenuContentState = ({ children, isMulti, selectedItems: controlledSelec
         selectedItems,
         handleItemClick,
         syncRegisteredList,
-    }), [activeIndex, firstEnabledIndex, getItemProps, isMulti, selectedItems, handleItemClick, syncRegisteredList]);
+        setActiveIndex,
+        registerSearchField,
+    }), [
+        activeIndex,
+        firstEnabledIndex,
+        getItemProps,
+        isMulti,
+        selectedItems,
+        handleItemClick,
+        syncRegisteredList,
+        registerSearchField,
+    ]);
     // Printable characters and Home/End/Left/Right stay native in nested inputs (e.g. FilterBar
     // Search). ArrowDown is left alone so a typeable child can enter the registered list.
     const handleKeyDownCapture = useCallback((event) => {
         if (!isTypeableElement(event.target)) {
+            // Home/End address the *items*. A registered search field is a navigation stop but not an
+            // item, and it renders above them, so Floating UI's Home -- the list's minimum index -- would
+            // land in the input. Redirect to the first item instead, by moving `activeIndex` rather than
+            // calling `focus()`, so list navigation stays the only thing that moves focus. End needs no
+            // counterpart: the field is never the maximum index.
+            //
+            // The containment check is not redundant: a `MenuItem` submenu renders its own `MenuContent`
+            // into a portal, and React still routes that subtree's synthetic events through the React
+            // tree, so this handler sees a submenu's Home first and would claim it before the submenu
+            // ever ran its own.
+            if (event.key === "Home" &&
+                searchFieldIndexRef.current !== null &&
+                event.target instanceof Node &&
+                event.currentTarget.contains(event.target)) {
+                event.preventDefault();
+                event.stopPropagation();
+                const firstItemIndex = firstEnabledListIndex(listRef, searchFieldIndexRef.current);
+                // `firstEnabledListIndex` falls back to 0 when nothing qualifies, which is the field's own
+                // index once a query has filtered every row away. Leave the highlight alone rather than
+                // pulling it into the input.
+                if (firstItemIndex !== searchFieldIndexRef.current) {
+                    setActiveIndex(firstItemIndex);
+                }
+            }
             return;
         }
         if (event.key === "ArrowDown") {
             return;
         }
-        // ArrowUp is stopped so wrapping does not jump to the last item while the user is in Search.
-        // Phase 2 (FilterBar) adds the reverse path: ArrowUp on the first row returns to Search.
+        // ArrowUp is swallowed only for an *unregistered* typeable child, where a wrap has no sensible
+        // destination: the input is not in the list, so list navigation would move the menu's roving
+        // tab stop to the last item behind the user's back. A field registered via `useMenuSearchField`
+        // *is* in the list, at the index above the first row, so its ArrowUp is an ordinary wrap to the
+        // last item -- symmetric with the ArrowDown wrap that already lands back in the field.
         if (event.key.length === 1 ||
             event.key === "Home" ||
             event.key === "End" ||
             event.key === "ArrowLeft" ||
             event.key === "ArrowRight" ||
-            event.key === "ArrowUp") {
+            (event.key === "ArrowUp" && searchFieldIndexRef.current === null)) {
             event.stopPropagation();
         }
     }, []);
@@ -7567,10 +7618,11 @@ const useMenuContentState = ({ children, isMulti, selectedItems: controlledSelec
  * @param {MenuContentProps} props - The props for the MenuContent component
  * @returns {ReactElement} MenuContent component
  */
-const MenuContent = ({ "data-testid": dataTestId, className, listClassName, children, isMulti = false, selectedItems, onSelectionChange, style, ref, "aria-label": ariaLabel, ...args }) => {
+const MenuContent = ({ "data-testid": dataTestId, className, listClassName, children, isMulti = false, autoFocus = false, selectedItems, onSelectionChange, style, ref, "aria-label": ariaLabel, ...args }) => {
     const { floatingRef, getFloatingProps, handleKeyDownCapture, listRef, labelsRef, menuContext } = useMenuContentState({
         children,
         isMulti,
+        autoFocus,
         selectedItems,
         onSelectionChange,
         ref,
@@ -7578,6 +7630,94 @@ const MenuContent = ({ "data-testid": dataTestId, className, listClassName, chil
     return (jsx("div", { "aria-label": ariaLabel, className: cvaMenu({ className, limitWidth: true }), "data-testid": dataTestId ? `${dataTestId}-menu-list` : "menu-list", onKeyDownCapture: handleKeyDownCapture, ref: floatingRef, role: "menu", style: style, tabIndex: -1, ...getFloatingProps({ onClick: args.onClick }), children: jsx("div", { className: cvaMenuList({ className: listClassName }), children: jsx(MenuContentContext.Provider, { value: menuContext, children: jsx(FloatingList, { elementsRef: listRef, labelsRef: labelsRef, children: children }) }) }) }));
 };
 
+/**
+ * Joins a search input to the nearest `MenuContent` as the stop *above* the first item, so Floating
+ * UI's list navigation moves focus in and out of the list on its own: ArrowDown from the field enters
+ * the list, and ArrowUp from the first item comes back to the field. The field is a full member of
+ * the loop, so ArrowUp from it wraps to the last item and ArrowDown from the last item wraps back.
+ *
+ * Focus then has a single owner. Moving between an unregistered field and the list means calling
+ * `.focus()` from a key handler, which races the `requestAnimationFrame` Floating UI asserts item
+ * focus from: the field wins or loses depending on how far apart the two key presses land. That is
+ * a flake rather than a behaviour, and it cannot be fixed from the outside (ADR-0005).
+ *
+ * Registering also keeps the rows off the sequential Tab path while the field holds focus: the menu's
+ * single roving tab stop is the field itself, so Tab continues to the menu's chrome (reset buttons,
+ * footers) instead of stopping on a row.
+ *
+ * Call it from a component rendered *inside* `MenuContent`: registration goes through the
+ * `FloatingList` context that `MenuContent` opens around its children, so a caller that also renders
+ * the `MenuContent` sits outside that context and registers nothing.
+ *
+ * Product code should render `Search` from `@trackunit/react-form-components` here, as
+ * `FiltersMenuSearchField` does -- the native `<input>` below (and in this package's story and specs)
+ * is only there because `@trackunit/react-components` cannot depend on `@trackunit/react-form-components`
+ * without a dependency cycle.
+ *
+ * @returns {UseMenuSearchFieldResult} A getter for the search input's props
+ * @example
+ * ```tsx
+ * const MenuSearch = () => {
+ *   const { getSearchFieldProps } = useMenuSearchField();
+ *   return <input aria-label="Search" type="text" {...getSearchFieldProps()} />;
+ * };
+ *
+ * const MenuWithSearch = () => (
+ *   <MenuContent autoFocus>
+ *     <MenuSearch />
+ *     <MenuItem id="alpha" label="Alpha" />
+ *   </MenuContent>
+ * );
+ * ```
+ */
+const useMenuSearchField = () => {
+    const menu = useOptionalMenuContentContext();
+    // `label: null` keeps the field out of typeahead: it is a navigation stop, not a match target.
+    const { ref: listItemRef, index } = useListItem({ label: null });
+    const syncRegisteredList = menu?.syncRegisteredList;
+    const registerSearchField = menu?.registerSearchField;
+    const setActiveIndex = menu?.setActiveIndex;
+    useLayoutEffect(() => {
+        if (index < 0 || registerSearchField === undefined) {
+            return;
+        }
+        registerSearchField(index);
+        syncRegisteredList?.();
+        return () => {
+            registerSearchField(null);
+        };
+    }, [index, registerSearchField, syncRegisteredList]);
+    // A consumer's ref only arrives when the getter is called, so it is held here and forwarded
+    // through one callback whose identity never changes. Floating UI's `useMergeRefs` memoizes on the
+    // refs themselves, which matters: `useListItem`'s ref changes identity when it learns its index,
+    // and only re-running it writes the input into `elementsRef` at that index.
+    const userRef = useRef(undefined);
+    const forwardUserRef = useCallback(node => {
+        const target = userRef.current;
+        if (typeof target === "function") {
+            target(node);
+            return;
+        }
+        if (target !== null && target !== undefined) {
+            target.current = node;
+        }
+    }, []);
+    const ref = useMergeRefs$1([listItemRef, forwardUserRef]);
+    const getSearchFieldProps = useCallback((userProps) => {
+        userRef.current = userProps?.ref;
+        return {
+            ref,
+            onFocus: (event) => {
+                if (index >= 0) {
+                    setActiveIndex?.(index);
+                }
+                userProps?.onFocus?.(event);
+            },
+        };
+    }, [index, ref, setActiveIndex]);
+    return useMemo(() => ({ getSearchFieldProps }), [getSearchFieldProps]);
+};
+
 /**
  * MenuDivider renders a horizontal line to visually separate groups of items within a MenuContent.
  *
@@ -14756,4 +14896,4 @@ const useWindowActivity = ({ onFocus, onBlur, skip = false } = { onBlur: undefin
  */
 setupLibraryTranslations();
 
-export { Alert, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyButton, CopyableText, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, LabeledValue, LabeledValueList, List, ListItem, MAX_HASH_LENGTH, MAX_URL_LENGTH, MenuContent, MenuDivider, MenuItem, MenuTree, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SHEET_TRANSITION_DURATION, SHEET_TRANSITION_DURATION_MS, SHEET_TRANSITION_EASING, SectionHeader, SegmentedValueBar, Sheet, Sidebar, SidebarContentLayout, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useBidirectionalScroll, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCursorUrlSync, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHashParamSync, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMenuTree, useMergeRefs, useModifierKey, useOptionalPopoverContext, useOverflowBorder, useOverflowItems, usePersistedState, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSearchParamSync, useSelfUpdatingRef, useSessionStorage, useSessionStorageReducer, useSheet, useSheetSnap, useStorageKey, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { Alert, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyButton, CopyableText, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, LabeledValue, LabeledValueList, List, ListItem, MAX_HASH_LENGTH, MAX_URL_LENGTH, MenuContent, MenuDivider, MenuItem, MenuTree, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SHEET_TRANSITION_DURATION, SHEET_TRANSITION_DURATION_MS, SHEET_TRANSITION_EASING, SectionHeader, SegmentedValueBar, Sheet, Sidebar, SidebarContentLayout, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useBidirectionalScroll, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCursorUrlSync, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHashParamSync, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMenuSearchField, useMenuTree, useMergeRefs, useModifierKey, useOptionalPopoverContext, useOverflowBorder, useOverflowItems, usePersistedState, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSearchParamSync, useSelfUpdatingRef, useSessionStorage, useSessionStorageReducer, useSheet, useSheetSnap, useStorageKey, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "2.11.2",
+  "version": "2.11.6",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -14,16 +14,16 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.15.15",
-    "@trackunit/css-class-variance-utilities": "1.14.25",
-    "@trackunit/shared-utils": "1.16.28",
-    "@trackunit/ui-icons": "1.14.24",
+    "@trackunit/ui-design-tokens": "1.15.17",
+    "@trackunit/css-class-variance-utilities": "1.14.27",
+    "@trackunit/shared-utils": "1.16.30",
+    "@trackunit/ui-icons": "1.14.26",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "^3.14.3",
     "dequal": "^2.0.3",
     "fflate": "^0.8.2",
     "zod": "^3.25.76",
-    "@trackunit/i18n-library-translation": "2.4.36"
+    "@trackunit/i18n-library-translation": "2.4.38"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/Menu/MenuContent/MenuContent.d.ts

@@ -29,6 +29,19 @@ export interface MenuContentProps extends CommonProps, Styleable, Refable<HTMLDi
      * Callback triggered when selected items change.
      */
     onSelectionChange?: (selected: Array<string>) => void;
+    /**
+     * Move focus into the menu as soon as it opens, rather than leaving it on whatever opened it.
+     *
+     * The menu decides where "into the menu" is: a search field registered with `useMenuSearchField`
+     * if there is one, otherwise the first enabled item. Chrome that merely happens to come first in
+     * the DOM -- a reset button, a header link -- is never the entry point.
+     *
+     * Use it for menus the keyboard should land inside immediately (a filter panel the user opened to
+     * type in). Leave it off for action menus opened from a trigger the user should stay on.
+     *
+     * @default false
+     */
+    autoFocus?: boolean;
     /**
      * Accessible name for the `role="menu"` node. Prefer this (or `aria-labelledby` via the trigger)
      * when the menu is not named by surrounding chrome.
@@ -101,4 +114,4 @@ export interface MenuContentProps extends CommonProps, Styleable, Refable<HTMLDi
  * @param {MenuContentProps} props - The props for the MenuContent component
  * @returns {ReactElement} MenuContent component
  */
-export declare const MenuContent: ({ "data-testid": dataTestId, className, listClassName, children, isMulti, selectedItems, onSelectionChange, style, ref, "aria-label": ariaLabel, ...args }: MenuContentProps) => ReactElement;
+export declare const MenuContent: ({ "data-testid": dataTestId, className, listClassName, children, isMulti, autoFocus, selectedItems, onSelectionChange, style, ref, "aria-label": ariaLabel, ...args }: MenuContentProps) => ReactElement;

package/src/components/Menu/MenuContent/MenuContentContext.d.ts

@@ -11,6 +11,17 @@ export interface MenuContentContextValue {
     selectedItems: Array<string>;
     handleItemClick: (id: string) => void;
     syncRegisteredList: () => void;
+    /**
+     * Moves the menu's highlight to a registered index. Rows get this through `getItemProps`;
+     * a registered search field (`useMenuSearchField`) needs it directly, because it must not
+     * take Floating UI's hover props -- those pull focus out of the input on pointer leave.
+     */
+    setActiveIndex: (index: number | null) => void;
+    /**
+     * Reports the registered index of the menu's search field, or `null` when it unregisters. The
+     * field is a navigation stop but not an item, which is the difference Home/End have to respect.
+     */
+    registerSearchField: (index: number | null) => void;
 }
 declare const MenuContentContext: import("react").Context<MenuContentContextValue | null>;
 /**

package/src/components/Menu/MenuContent/compactFloatingListRefs.d.ts

@@ -9,10 +9,11 @@ import { MutableRefObject } from "react";
  */
 export declare const compactFloatingListRefs: (elementsRef: MutableRefObject<Array<HTMLElement | null>>, labelsRef: MutableRefObject<Array<string | null>>) => void;
 /**
- * Index of the first registered item that is not `aria-disabled`. Used as the initial tab stop
+ * Index of the first registered entry that is not `aria-disabled`. Used as the initial tab stop
  * when `activeIndex` is still null.
  *
  * @param elementsRef The FloatingList elements array
- * @returns {number} The first enabled index, or `0` when the list has no enabled item
+ * @param skipIndex Registered index to ignore, used to look past a search field to the first real item
+ * @returns {number} The first enabled index, or `0` when the list has no enabled entry
  */
-export declare const firstEnabledListIndex: (elementsRef: MutableRefObject<Array<HTMLElement | null>>) => number;
+export declare const firstEnabledListIndex: (elementsRef: MutableRefObject<Array<HTMLElement | null>>, skipIndex?: number | null) => number;

package/src/components/Menu/MenuContent/useMenuContentState.d.ts

@@ -4,6 +4,7 @@ import { MenuContentContextValue } from "./MenuContentContext";
 export interface UseMenuContentStateProps {
     children: ReactNode;
     isMulti: boolean;
+    autoFocus: boolean;
     selectedItems?: Array<string>;
     onSelectionChange?: (selected: Array<string>) => void;
     ref?: Ref<HTMLDivElement>;
@@ -20,4 +21,4 @@ export interface UseMenuContentStateResult {
  * Owns MenuContent's list registration, selection, and typeable-child key handling so the
  * component file stays the shell + JSX.
  */
-export declare const useMenuContentState: ({ children, isMulti, selectedItems: controlledSelectedItems, onSelectionChange, ref, }: UseMenuContentStateProps) => UseMenuContentStateResult;
+export declare const useMenuContentState: ({ children, isMulti, autoFocus, selectedItems: controlledSelectedItems, onSelectionChange, ref, }: UseMenuContentStateProps) => UseMenuContentStateResult;

package/src/components/Menu/MenuContent/useMenuSearchField.d.ts

@@ -0,0 +1,61 @@
+import { FocusEventHandler, Ref, RefCallback } from "react";
+export interface MenuSearchFieldUserProps {
+    /** The consumer's own ref, kept alongside the one that registers the input. */
+    ref?: Ref<HTMLElement>;
+    /** The consumer's own focus handler, called after the menu has moved its highlight. */
+    onFocus?: FocusEventHandler<HTMLElement>;
+}
+export interface MenuSearchFieldProps {
+    /** Puts the input in its place in the menu's keyboard order. */
+    ref: RefCallback<HTMLElement> | null;
+    /** Moves the menu's highlight off the items when the input is clicked or tabbed into. */
+    onFocus: FocusEventHandler<HTMLElement>;
+}
+export interface UseMenuSearchFieldResult {
+    /**
+     * Props for the search input. Pass your own `ref` / `onFocus` in and they are merged rather
+     * than replaced, so spread order cannot silently take the menu's registration away.
+     */
+    getSearchFieldProps: (userProps?: MenuSearchFieldUserProps) => MenuSearchFieldProps;
+}
+/**
+ * Joins a search input to the nearest `MenuContent` as the stop *above* the first item, so Floating
+ * UI's list navigation moves focus in and out of the list on its own: ArrowDown from the field enters
+ * the list, and ArrowUp from the first item comes back to the field. The field is a full member of
+ * the loop, so ArrowUp from it wraps to the last item and ArrowDown from the last item wraps back.
+ *
+ * Focus then has a single owner. Moving between an unregistered field and the list means calling
+ * `.focus()` from a key handler, which races the `requestAnimationFrame` Floating UI asserts item
+ * focus from: the field wins or loses depending on how far apart the two key presses land. That is
+ * a flake rather than a behaviour, and it cannot be fixed from the outside (ADR-0005).
+ *
+ * Registering also keeps the rows off the sequential Tab path while the field holds focus: the menu's
+ * single roving tab stop is the field itself, so Tab continues to the menu's chrome (reset buttons,
+ * footers) instead of stopping on a row.
+ *
+ * Call it from a component rendered *inside* `MenuContent`: registration goes through the
+ * `FloatingList` context that `MenuContent` opens around its children, so a caller that also renders
+ * the `MenuContent` sits outside that context and registers nothing.
+ *
+ * Product code should render `Search` from `@trackunit/react-form-components` here, as
+ * `FiltersMenuSearchField` does -- the native `<input>` below (and in this package's story and specs)
+ * is only there because `@trackunit/react-components` cannot depend on `@trackunit/react-form-components`
+ * without a dependency cycle.
+ *
+ * @returns {UseMenuSearchFieldResult} A getter for the search input's props
+ * @example
+ * ```tsx
+ * const MenuSearch = () => {
+ *   const { getSearchFieldProps } = useMenuSearchField();
+ *   return <input aria-label="Search" type="text" {...getSearchFieldProps()} />;
+ * };
+ *
+ * const MenuWithSearch = () => (
+ *   <MenuContent autoFocus>
+ *     <MenuSearch />
+ *     <MenuItem id="alpha" label="Alpha" />
+ *   </MenuContent>
+ * );
+ * ```
+ */
+export declare const useMenuSearchField: () => UseMenuSearchFieldResult;

package/src/index.d.ts

@@ -55,6 +55,7 @@ export * from "./components/ListItem/ListItem";
 export * from "./components/ListItem/useListItemHeight";
 export * from "./components/Menu/MenuContent/MenuContent";
 export * from "./components/Menu/MenuContent/MenuContent.variants";
+export * from "./components/Menu/MenuContent/useMenuSearchField";
 export * from "./components/Menu/MenuDivider/MenuDivider";
 export * from "./components/Menu/MenuItem/MenuItem";
 export * from "./components/Menu/MenuItem/MenuItem.variants";

package/translation.cjs.js

@@ -3,6 +3,8 @@
 var translation = {
 	"breadcrumb.backButton": "zurück",
 	"breadcrumb.expandButton": "ausklappen",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Mehr anzeigen"
 };
 

package/translation.esm.js

@@ -1,6 +1,8 @@
 var translation = {
 	"breadcrumb.backButton": "zurück",
 	"breadcrumb.expandButton": "ausklappen",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Mehr anzeigen"
 };
 

package/translation10.cjs.js

@@ -3,6 +3,8 @@
 var translation = {
 	"breadcrumb.backButton": "powrót",
 	"breadcrumb.expandButton": "rozwiń",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Pokaż więcej"
 };
 

package/translation10.esm.js

@@ -1,6 +1,8 @@
 var translation = {
 	"breadcrumb.backButton": "powrót",
 	"breadcrumb.expandButton": "rozwiń",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Pokaż więcej"
 };
 

package/translation11.cjs.js

@@ -3,6 +3,8 @@
 var translation = {
 	"breadcrumb.backButton": "voltar",
 	"breadcrumb.expandButton": "expandir",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Mostrar mais"
 };
 

package/translation11.esm.js

@@ -1,6 +1,8 @@
 var translation = {
 	"breadcrumb.backButton": "voltar",
 	"breadcrumb.expandButton": "expandir",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Mostrar mais"
 };
 

package/translation12.cjs.js

@@ -3,6 +3,8 @@
 var translation = {
 	"breadcrumb.backButton": "назад",
 	"breadcrumb.expandButton": "развернуть",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Показать больше"
 };
 

package/translation12.esm.js

@@ -1,6 +1,8 @@
 var translation = {
 	"breadcrumb.backButton": "назад",
 	"breadcrumb.expandButton": "развернуть",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Показать больше"
 };
 

package/translation13.cjs.js

@@ -3,6 +3,8 @@
 var translation = {
 	"breadcrumb.backButton": "înapoi",
 	"breadcrumb.expandButton": "extindere",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Afișare mai mult"
 };
 

package/translation13.esm.js

@@ -1,6 +1,8 @@
 var translation = {
 	"breadcrumb.backButton": "înapoi",
 	"breadcrumb.expandButton": "extindere",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Afișare mai mult"
 };
 

package/translation14.cjs.js

@@ -3,6 +3,8 @@
 var translation = {
 	"breadcrumb.backButton": "atrás",
 	"breadcrumb.expandButton": "expandir",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Mostrar más"
 };
 

package/translation14.esm.js

@@ -1,6 +1,8 @@
 var translation = {
 	"breadcrumb.backButton": "atrás",
 	"breadcrumb.expandButton": "expandir",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Mostrar más"
 };
 

package/translation15.cjs.js

@@ -3,6 +3,8 @@
 var translation = {
 	"breadcrumb.backButton": "tillbaka",
 	"breadcrumb.expandButton": "expandera",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Visa mer"
 };
 

package/translation15.esm.js

@@ -1,6 +1,8 @@
 var translation = {
 	"breadcrumb.backButton": "tillbaka",
 	"breadcrumb.expandButton": "expandera",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Visa mer"
 };
 

package/translation16.cjs.js

@@ -3,6 +3,8 @@
 var translation = {
 	"breadcrumb.backButton": "戻る",
 	"breadcrumb.expandButton": "展開",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "さらに表示"
 };
 

package/translation16.esm.js

@@ -1,6 +1,8 @@
 var translation = {
 	"breadcrumb.backButton": "戻る",
 	"breadcrumb.expandButton": "展開",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "さらに表示"
 };
 

package/translation17.cjs.js

@@ -3,6 +3,8 @@
 var translation = {
 	"breadcrumb.backButton": "ย้อนกลับ",
 	"breadcrumb.expandButton": "ขยาย",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "แสดงเพิ่มเติม"
 };
 

package/translation17.esm.js

@@ -1,6 +1,8 @@
 var translation = {
 	"breadcrumb.backButton": "ย้อนกลับ",
 	"breadcrumb.expandButton": "ขยาย",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "แสดงเพิ่มเติม"
 };
 

package/translation2.cjs.js

@@ -3,6 +3,8 @@
 var translation = {
 	"breadcrumb.backButton": "tilbage",
 	"breadcrumb.expandButton": "udvid",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Vis mere"
 };
 

package/translation2.esm.js

@@ -1,6 +1,8 @@
 var translation = {
 	"breadcrumb.backButton": "tilbage",
 	"breadcrumb.expandButton": "udvid",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Vis mere"
 };
 

package/translation3.cjs.js

@@ -3,6 +3,8 @@
 var translation = {
 	"breadcrumb.backButton": "zpět",
 	"breadcrumb.expandButton": "rozbalit",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Zobrazit více"
 };
 

package/translation3.esm.js

@@ -1,6 +1,8 @@
 var translation = {
 	"breadcrumb.backButton": "zpět",
 	"breadcrumb.expandButton": "rozbalit",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Zobrazit více"
 };
 

package/translation4.cjs.js

@@ -3,6 +3,8 @@
 var translation = {
 	"breadcrumb.backButton": "terug",
 	"breadcrumb.expandButton": "uitklappen",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Meer weergeven"
 };
 

package/translation4.esm.js

@@ -1,6 +1,8 @@
 var translation = {
 	"breadcrumb.backButton": "terug",
 	"breadcrumb.expandButton": "uitklappen",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Meer weergeven"
 };
 

package/translation5.cjs.js

@@ -3,6 +3,8 @@
 var translation = {
 	"breadcrumb.backButton": "retour",
 	"breadcrumb.expandButton": "développer",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Afficher plus"
 };
 

package/translation5.esm.js

@@ -1,6 +1,8 @@
 var translation = {
 	"breadcrumb.backButton": "retour",
 	"breadcrumb.expandButton": "développer",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Afficher plus"
 };
 

package/translation6.cjs.js

@@ -3,6 +3,8 @@
 var translation = {
 	"breadcrumb.backButton": "takaisin",
 	"breadcrumb.expandButton": "laajenna",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Näytä lisää"
 };
 

package/translation6.esm.js

@@ -1,6 +1,8 @@
 var translation = {
 	"breadcrumb.backButton": "takaisin",
 	"breadcrumb.expandButton": "laajenna",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Näytä lisää"
 };
 

package/translation7.cjs.js

@@ -3,6 +3,8 @@
 var translation = {
 	"breadcrumb.backButton": "vissza",
 	"breadcrumb.expandButton": "kibontás",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Több megjelenítése"
 };
 

package/translation7.esm.js

@@ -1,6 +1,8 @@
 var translation = {
 	"breadcrumb.backButton": "vissza",
 	"breadcrumb.expandButton": "kibontás",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Több megjelenítése"
 };
 

package/translation8.cjs.js

@@ -3,6 +3,8 @@
 var translation = {
 	"breadcrumb.backButton": "indietro",
 	"breadcrumb.expandButton": "espandi",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Mostra di più"
 };
 

package/translation8.esm.js

@@ -1,6 +1,8 @@
 var translation = {
 	"breadcrumb.backButton": "indietro",
 	"breadcrumb.expandButton": "espandi",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Mostra di più"
 };
 

package/translation9.cjs.js

@@ -3,6 +3,8 @@
 var translation = {
 	"breadcrumb.backButton": "tilbake",
 	"breadcrumb.expandButton": "utvid",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Vis mer"
 };
 

package/translation9.esm.js

@@ -1,6 +1,8 @@
 var translation = {
 	"breadcrumb.backButton": "tilbake",
 	"breadcrumb.expandButton": "utvid",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Vis mer"
 };