@allxsmith/bestax-bulma 5.37.0 → 5.38.0

package/dist/esm/helpers/useComboboxEngine.js

@@ -0,0 +1,331 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { useId, useCallback, useRef, useState, useReducer, useEffect } from 'react';
+import { useClientLayoutEffect } from './useClientLayoutEffect.js';
+import { isEventInside, getActiveElementInTree } from './shadowDom.js';
+
+// INTERNAL: deliberately not exported from src/index.ts.
+/** An IME is composing, so the key belongs to it (`keyCode` 229 is Safari's word for it). */
+const isComposing$1 = (event) => event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229;
+const sameValues = (a, b) => a.length === b.length && a.every((value, i) => value === b[i]);
+/**
+ * The keys, the open state, the highlight and the ARIA of an editable
+ * combobox whose list the app renders and filters (#1083). DOM focus stays
+ * in the field the whole time: the highlight is `aria-activedescendant`, as
+ * the ARIA Authoring Practices ask of a combobox, where `useMenuKeys` moves
+ * real focus, as a menu should.
+ *
+ * The options are read from the listbox in document order whenever they're
+ * needed, so options in groups and options that come and go are found, and
+ * the highlight is remembered by value, so it survives a re-render. The text
+ * in the field and any value are the app's: a pick only calls
+ * `onSelect`.
+ *
+ * @function useComboboxEngine
+ * @param options - The open state, the pick callback and the shape.
+ * @returns The state and handlers the parts wire up.
+ */
+function useComboboxEngine({ open: controlledOpen, defaultOpen, onOpenChange, onSelect, onSettle, keepFirst, multiple, inline, deferred, }) {
+    const baseId = useId();
+    const listboxId = `${baseId}-listbox`;
+    const itemPrefix = `${baseId}-item-`;
+    // The value goes into the id encoded, so a value with a space in it still
+    // makes one id, not two.
+    const itemId = useCallback((value) => itemPrefix + encodeURIComponent(value), [itemPrefix]);
+    const rootRef = useRef(null);
+    const inputRef = useRef(null);
+    const listboxRef = useRef(null);
+    const popupRef = useRef(null);
+    const insidePressRef = useRef(null);
+    const optionsRef = useRef(new Map());
+    const landingRef = useRef(null);
+    const wasOpenRef = useRef(false);
+    const shownValuesRef = useRef([]);
+    // Whether the next highlight change is one to scroll to: a key's or a
+    // landing's. The pointer's isn't, since the pointer is already on that
+    // option, and scrolling would move the list out from under it.
+    const scrollToHighlightRef = useRef(false);
+    const isControlled = controlledOpen !== undefined;
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const open = inline || (controlledOpen ?? internalOpen);
+    const [highlighted, setHighlighted] = useState(null);
+    const [typed, setTyped] = useState(false);
+    // Whether a listbox with an option in it is on the page, which only the
+    // page can say, so it's read once the open list has rendered.
+    const [listShown, setListShown] = useState(null);
+    // Options register from their own effects, which needn't render the
+    // component that holds this hook, so they ask for a render to be read.
+    const [, refresh] = useReducer((n) => n + 1, 0);
+    // Closing forgets the highlight, the typing and what was on the page,
+    // during render, React's pattern for adjusting state when other state
+    // changes.
+    if (!open) {
+        if (highlighted !== null)
+            setHighlighted(null);
+        if (typed)
+            setTyped(false);
+        if (listShown !== null)
+            setListShown(null);
+    }
+    const expanded = open && (listShown ?? !deferred);
+    /** The options on the page, in document order, groups included. */
+    const shownOptions = useCallback(() => {
+        const listbox = listboxRef.current;
+        if (!listbox)
+            return [];
+        const shown = [];
+        listbox
+            .querySelectorAll('[role="option"]')
+            .forEach(element => {
+            // Only the Combobox's own options: an element given the role by
+            // hand isn't one.
+            const state = optionsRef.current.get(element);
+            if (state)
+                shown.push({ element, ...state });
+        });
+        return shown;
+    }, []);
+    const requestOpen = useCallback((next, landing = 'open') => {
+        if (inline || next === open)
+            return;
+        landingRef.current = next ? landing : null;
+        onOpenChange?.(next);
+        if (!isControlled)
+            setInternalOpen(next);
+    }, [inline, open, onOpenChange, isControlled]);
+    const close = useCallback(() => requestOpen(false), [requestOpen]);
+    // After every render, read the list: whether it has options, and where
+    // the highlight goes now. A highlighted option that has left takes the
+    // highlight with it, or hands it to the first enabled one under
+    // `keepFirst`, which also moves it there whenever the options change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- after every render on purpose
+    useClientLayoutEffect(() => {
+        const opened = open && !wasOpenRef.current;
+        wasOpenRef.current = open;
+        if (!open) {
+            landingRef.current = null;
+            shownValuesRef.current = [];
+            return;
+        }
+        const options = shownOptions();
+        const values = options.map(option => option.value);
+        const changed = !sameValues(values, shownValuesRef.current);
+        shownValuesRef.current = values;
+        setListShown(values.length > 0);
+        const landing = landingRef.current ?? (opened ? 'open' : null);
+        landingRef.current = null;
+        const enabled = options.filter(option => !option.disabled);
+        const checked = enabled.find(option => option.checked)?.value;
+        const first = enabled.length > 0 ? enabled[0].value : null;
+        const last = enabled.length > 0 ? enabled[enabled.length - 1].value : null;
+        let next = highlighted;
+        if (landing === 'first')
+            next = checked ?? first;
+        else if (landing === 'last')
+            next = checked ?? last;
+        else if (landing === 'open')
+            next = checked ?? (keepFirst ? first : null);
+        else if (landing === 'typed')
+            next = keepFirst ? first : null;
+        else if (landing === 'none')
+            next = null;
+        else if (keepFirst && changed)
+            next = first;
+        // Without `keepFirst`, which moved it above, a highlighted option
+        // that left takes the highlight with it.
+        else if (next !== null && !values.includes(next))
+            next = null;
+        // Only a change is set. StrictMode runs this twice on mount, and the
+        // second run, with the landing used up, works out the rendered highlight
+        // again, so it leaves the first run's landing in place.
+        if (next !== highlighted) {
+            scrollToHighlightRef.current = true;
+            setHighlighted(next);
+        }
+    });
+    // A browser scrolls to what has focus, not to an active descendant, so
+    // the highlighted option is brought into view here, when a key or a
+    // landing moved it there.
+    useClientLayoutEffect(() => {
+        if (highlighted === null || !scrollToHighlightRef.current)
+            return;
+        scrollToHighlightRef.current = false;
+        const option = shownOptions().find(shown => shown.value === highlighted);
+        option?.element.scrollIntoView?.({ block: 'nearest' });
+    }, [highlighted, shownOptions]);
+    // A press outside the field and the list closes it. The path is checked
+    // rather than the target, so it works in a shadow root.
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!open || inline || !root)
+            return undefined;
+        const onPress = (event) => {
+            if (event === insidePressRef.current ||
+                isEventInside(event, rootRef.current) ||
+                isEventInside(event, popupRef.current)) {
+                return;
+            }
+            close();
+        };
+        // Its document, an iframe's when the tree renders into one.
+        const doc = root.ownerDocument;
+        doc.addEventListener('pointerdown', onPress);
+        return () => doc.removeEventListener('pointerdown', onPress);
+    }, [open, inline, close]);
+    const submit = useCallback((value) => {
+        onSelect?.(value);
+        if (!multiple)
+            close();
+    }, [onSelect, multiple, close]);
+    const onKeyDown = (event) => {
+        // The caller's handler ran first and can keep a key, and an IME that's
+        // composing owns every key.
+        if (event.defaultPrevented || isComposing$1(event))
+            return;
+        const { key, altKey } = event;
+        if (!open) {
+            if (key === 'ArrowDown' || (key === 'ArrowUp' && !altKey)) {
+                event.preventDefault();
+                requestOpen(true, altKey ? 'none' : key === 'ArrowDown' ? 'first' : 'last');
+            }
+            return;
+        }
+        switch (key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                if (altKey) {
+                    if (key === 'ArrowUp' && !inline) {
+                        event.preventDefault();
+                        close();
+                    }
+                    return;
+                }
+                event.preventDefault();
+                // Disabled options too, so a screen reader user finds them.
+                const options = shownOptions();
+                if (options.length === 0)
+                    return;
+                const at = options.findIndex(option => option.value === highlighted);
+                const step = key === 'ArrowDown' ? 1 : -1;
+                const index = at === -1
+                    ? step === 1
+                        ? 0
+                        : options.length - 1
+                    : (at + step + options.length) % options.length;
+                scrollToHighlightRef.current = true;
+                setHighlighted(options[index].value);
+                return;
+            }
+            case 'Enter': {
+                const option = shownOptions().find(shown => shown.value === highlighted);
+                if (option) {
+                    event.preventDefault();
+                    if (!option.disabled)
+                        submit(option.value);
+                    return;
+                }
+                // Nothing to pick: the key goes on, so a form submits.
+                onSettle?.();
+                close();
+                return;
+            }
+            case 'Escape':
+                if (inline)
+                    return;
+                // It stops here only when there was something to close, so a
+                // Popover or Modal around it keeps its own Escape otherwise. Nothing
+                // stops it going on: a handler further out reads `defaultPrevented`.
+                if (popupRef.current)
+                    event.preventDefault();
+                close();
+                return;
+            case 'Tab':
+                close();
+                return;
+            case 'Home':
+            case 'End':
+            case 'ArrowLeft':
+            case 'ArrowRight':
+                // The field's own keys, which take the field back from the list.
+                setHighlighted(null);
+                return;
+        }
+    };
+    const onChange = () => {
+        setTyped(true);
+        if (open) {
+            landingRef.current = 'typed';
+            setHighlighted(null);
+            refresh();
+        }
+        else {
+            requestOpen(true, 'typed');
+        }
+    };
+    const onClick = () => {
+        requestOpen(true, 'open');
+    };
+    const onBlur = (event) => {
+        const next = event.relatedTarget;
+        if (next &&
+            (rootRef.current?.contains(next) || popupRef.current?.contains(next))) {
+            return;
+        }
+        close();
+    };
+    const hover = (value) => {
+        scrollToHighlightRef.current = false;
+        setHighlighted(value);
+    };
+    const pick = (value) => {
+        submit(value);
+        // A press in the list keeps focus in the field, but a browser that
+        // ignores that, or a tap, can leave it elsewhere.
+        const input = inputRef.current;
+        if (input && input.isConnected && getActiveElementInTree(input) !== input) {
+            input.focus();
+        }
+    };
+    const keepFocus = (event) => event.preventDefault();
+    const markInside = (event) => {
+        insidePressRef.current = event.nativeEvent;
+    };
+    const registerPopup = useCallback((element) => {
+        popupRef.current = element;
+        return () => {
+            popupRef.current = null;
+        };
+    }, []);
+    const registerItem = useCallback((element, state) => {
+        const options = optionsRef.current;
+        options.set(element, state);
+        refresh();
+        return () => {
+            options.delete(element);
+            refresh();
+        };
+    }, []);
+    return {
+        open,
+        expanded,
+        highlighted,
+        typed,
+        listboxId,
+        itemId,
+        rootRef,
+        inputRef,
+        listboxRef,
+        registerPopup,
+        registerItem,
+        onKeyDown,
+        onChange,
+        onClick,
+        onBlur,
+        hover,
+        pick,
+        keepFocus,
+        markInside,
+    };
+}
+
+export { useComboboxEngine };
+//# sourceMappingURL=useComboboxEngine.js.map

package/dist/esm/helpers/useComboboxEngine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComboboxEngine.js","sources":["../../../src/helpers/useComboboxEngine.ts"],"sourcesContent":["// INTERNAL: deliberately not exported from src/index.ts.\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useReducer,\n  useRef,\n  useState,\n} from 'react';\nimport type React from 'react';\nimport { useClientLayoutEffect } from './useClientLayoutEffect';\nimport { getActiveElementInTree, isEventInside } from './shadowDom';\n\n/** What an item tells the engine about itself. */\nexport interface ComboboxItemState {\n  /** What a pick hands back. Unique within the combobox. */\n  value: string;\n  /** Reachable with the arrows, never picked. */\n  disabled: boolean;\n  /** The value, or one of them. */\n  checked: boolean;\n}\n\n/** An option on the page, with its element. */\ninterface ShownOption extends ComboboxItemState {\n  element: HTMLElement;\n}\n\n/**\n * Where the highlight lands once an opened list has rendered, or once typing\n * has changed what's in it:\n *\n * - `first` and `last` (Down and Up Arrow): the checked option, otherwise the\n *   first or last enabled one;\n * - `open` (a click, or any other way of opening): the checked option,\n *   otherwise the first enabled one with `keepFirst`, otherwise nothing;\n * - `typed`: the first enabled option with `keepFirst`, otherwise nothing;\n * - `none` (Alt+Down Arrow): nothing.\n *\n * Only an enabled option takes it, so a disabled checked one is passed over.\n */\ntype Landing = 'first' | 'last' | 'open' | 'typed' | 'none';\n\n/** Options for `useComboboxEngine`. */\nexport interface ComboboxEngineOptions {\n  /** Controlled open state. When set, opening and closing only report through `onOpenChange`. */\n  open?: boolean;\n  /** Initial open state when uncontrolled. */\n  defaultOpen: boolean;\n  /** Called with the open state asked for, when it differs from the current one. */\n  onOpenChange?: (open: boolean) => void;\n  /** Called with an item's `value` when it's picked. */\n  onSelect?: (value: string) => void;\n  /**\n   * Called when Enter goes on to the form with nothing to pick, before the\n   * list closes, so an owner that shows something other than the typing can\n   * put it back before the form reads the field. An `inline` list doesn't\n   * close, so this is the one word it gets.\n   */\n  onSettle?: () => void;\n  /** Highlights the first enabled item whenever the list opens or its items change. */\n  keepFirst: boolean;\n  /** Several values: a pick keeps the list open. */\n  multiple: boolean;\n  /** The list is always on screen, so nothing opens or closes it. */\n  inline: boolean;\n  /**\n   * The list's panel is portaled, so it has no server markup and shows only\n   * from the commit after hydration. Until it has rendered, an open list\n   * isn't taken to be on the page, so no `aria-controls` names it early.\n   */\n  deferred: boolean;\n}\n\n/** What `useComboboxEngine` hands the parts of a combobox. */\nexport interface ComboboxEngine {\n  /** Whether the list is open. Always, with `inline`. */\n  open: boolean;\n  /**\n   * The field's `aria-expanded`: open, with a listbox that has an option in\n   * it on the page. Until the open list has rendered, it's taken to have\n   * one, so server markup for an open list in place says it's expanded. A\n   * `deferred` list isn't in server markup, so it's taken to have none.\n   */\n  expanded: boolean;\n  /** The highlighted option's value, if any. */\n  highlighted: string | null;\n  /** Whether the user has typed since the list opened. */\n  typed: boolean;\n  /** The listbox's id. */\n  listboxId: string;\n  /** An item's id, which follows from its value. */\n  itemId: (value: string) => string;\n  /** For the element around the field and, unless it's portaled, the list. */\n  rootRef: React.MutableRefObject<HTMLDivElement | null>;\n  /** For the field. */\n  inputRef: React.MutableRefObject<HTMLInputElement | null>;\n  /** For the listbox. */\n  listboxRef: React.MutableRefObject<HTMLDivElement | null>;\n  /**\n   * Records the floating panel while it's on screen, which makes it count as\n   * inside, and makes an Escape that closes it stop there. Returns the\n   * function that forgets it.\n   */\n  registerPopup: (element: HTMLElement) => () => void;\n  /** Records an item's element. Returns the function that forgets it. */\n  registerItem: (element: HTMLElement, state: ComboboxItemState) => () => void;\n  /** The field's keys, to run after the caller's own handler. */\n  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  /** A change to the field's value: the user typed. */\n  onChange: () => void;\n  /** A click in the field. */\n  onClick: () => void;\n  /** Focus leaving the field. */\n  onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;\n  /** The pointer moved over an enabled option. */\n  hover: (value: string) => void;\n  /** A click on an enabled option. Focus ends up in the field. */\n  pick: (value: string) => void;\n  /** For anything in the list: a press there doesn't take focus from the field. */\n  keepFocus: (event: React.MouseEvent) => void;\n  /**\n   * For the floating panel: marks a press as inside, which React reports from\n   * content the panel portals elsewhere as well.\n   */\n  markInside: (event: React.PointerEvent) => void;\n}\n\n/** An IME is composing, so the key belongs to it (`keyCode` 229 is Safari's word for it). */\nconst isComposing = (event: React.KeyboardEvent): boolean =>\n  event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229;\n\nconst sameValues = (a: string[], b: string[]): boolean =>\n  a.length === b.length && a.every((value, i) => value === b[i]);\n\n/**\n * The keys, the open state, the highlight and the ARIA of an editable\n * combobox whose list the app renders and filters (#1083). DOM focus stays\n * in the field the whole time: the highlight is `aria-activedescendant`, as\n * the ARIA Authoring Practices ask of a combobox, where `useMenuKeys` moves\n * real focus, as a menu should.\n *\n * The options are read from the listbox in document order whenever they're\n * needed, so options in groups and options that come and go are found, and\n * the highlight is remembered by value, so it survives a re-render. The text\n * in the field and any value are the app's: a pick only calls\n * `onSelect`.\n *\n * @function useComboboxEngine\n * @param options - The open state, the pick callback and the shape.\n * @returns The state and handlers the parts wire up.\n */\nexport function useComboboxEngine({\n  open: controlledOpen,\n  defaultOpen,\n  onOpenChange,\n  onSelect,\n  onSettle,\n  keepFirst,\n  multiple,\n  inline,\n  deferred,\n}: ComboboxEngineOptions): ComboboxEngine {\n  const baseId = useId();\n  const listboxId = `${baseId}-listbox`;\n  const itemPrefix = `${baseId}-item-`;\n  // The value goes into the id encoded, so a value with a space in it still\n  // makes one id, not two.\n  const itemId = useCallback(\n    (value: string) => itemPrefix + encodeURIComponent(value),\n    [itemPrefix]\n  );\n\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const listboxRef = useRef<HTMLDivElement | null>(null);\n  const popupRef = useRef<HTMLElement | null>(null);\n  const insidePressRef = useRef<Event | null>(null);\n  const optionsRef = useRef(new Map<HTMLElement, ComboboxItemState>());\n  const landingRef = useRef<Landing | null>(null);\n  const wasOpenRef = useRef(false);\n  const shownValuesRef = useRef<string[]>([]);\n  // Whether the next highlight change is one to scroll to: a key's or a\n  // landing's. The pointer's isn't, since the pointer is already on that\n  // option, and scrolling would move the list out from under it.\n  const scrollToHighlightRef = useRef(false);\n\n  const isControlled = controlledOpen !== undefined;\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const open = inline || (controlledOpen ?? internalOpen);\n\n  const [highlighted, setHighlighted] = useState<string | null>(null);\n  const [typed, setTyped] = useState(false);\n  // Whether a listbox with an option in it is on the page, which only the\n  // page can say, so it's read once the open list has rendered.\n  const [listShown, setListShown] = useState<boolean | null>(null);\n  // Options register from their own effects, which needn't render the\n  // component that holds this hook, so they ask for a render to be read.\n  const [, refresh] = useReducer((n: number) => n + 1, 0);\n\n  // Closing forgets the highlight, the typing and what was on the page,\n  // during render, React's pattern for adjusting state when other state\n  // changes.\n  if (!open) {\n    if (highlighted !== null) setHighlighted(null);\n    if (typed) setTyped(false);\n    if (listShown !== null) setListShown(null);\n  }\n  const expanded = open && (listShown ?? !deferred);\n\n  /** The options on the page, in document order, groups included. */\n  const shownOptions = useCallback((): ShownOption[] => {\n    const listbox = listboxRef.current;\n    if (!listbox) return [];\n    const shown: ShownOption[] = [];\n    listbox\n      .querySelectorAll<HTMLElement>('[role=\"option\"]')\n      .forEach(element => {\n        // Only the Combobox's own options: an element given the role by\n        // hand isn't one.\n        const state = optionsRef.current.get(element);\n        if (state) shown.push({ element, ...state });\n      });\n    return shown;\n  }, []);\n\n  const requestOpen = useCallback(\n    (next: boolean, landing: Landing = 'open') => {\n      if (inline || next === open) return;\n      landingRef.current = next ? landing : null;\n      onOpenChange?.(next);\n      if (!isControlled) setInternalOpen(next);\n    },\n    [inline, open, onOpenChange, isControlled]\n  );\n  const close = useCallback(() => requestOpen(false), [requestOpen]);\n\n  // After every render, read the list: whether it has options, and where\n  // the highlight goes now. A highlighted option that has left takes the\n  // highlight with it, or hands it to the first enabled one under\n  // `keepFirst`, which also moves it there whenever the options change.\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- after every render on purpose\n  useClientLayoutEffect(() => {\n    const opened = open && !wasOpenRef.current;\n    wasOpenRef.current = open;\n    if (!open) {\n      landingRef.current = null;\n      shownValuesRef.current = [];\n      return;\n    }\n    const options = shownOptions();\n    const values = options.map(option => option.value);\n    const changed = !sameValues(values, shownValuesRef.current);\n    shownValuesRef.current = values;\n    setListShown(values.length > 0);\n\n    const landing = landingRef.current ?? (opened ? 'open' : null);\n    landingRef.current = null;\n    const enabled = options.filter(option => !option.disabled);\n    const checked = enabled.find(option => option.checked)?.value;\n    const first = enabled.length > 0 ? enabled[0].value : null;\n    const last = enabled.length > 0 ? enabled[enabled.length - 1].value : null;\n    let next = highlighted;\n    if (landing === 'first') next = checked ?? first;\n    else if (landing === 'last') next = checked ?? last;\n    else if (landing === 'open') next = checked ?? (keepFirst ? first : null);\n    else if (landing === 'typed') next = keepFirst ? first : null;\n    else if (landing === 'none') next = null;\n    else if (keepFirst && changed) next = first;\n    // Without `keepFirst`, which moved it above, a highlighted option\n    // that left takes the highlight with it.\n    else if (next !== null && !values.includes(next)) next = null;\n    // Only a change is set. StrictMode runs this twice on mount, and the\n    // second run, with the landing used up, works out the rendered highlight\n    // again, so it leaves the first run's landing in place.\n    if (next !== highlighted) {\n      scrollToHighlightRef.current = true;\n      setHighlighted(next);\n    }\n  });\n\n  // A browser scrolls to what has focus, not to an active descendant, so\n  // the highlighted option is brought into view here, when a key or a\n  // landing moved it there.\n  useClientLayoutEffect(() => {\n    if (highlighted === null || !scrollToHighlightRef.current) return;\n    scrollToHighlightRef.current = false;\n    const option = shownOptions().find(shown => shown.value === highlighted);\n    option?.element.scrollIntoView?.({ block: 'nearest' });\n  }, [highlighted, shownOptions]);\n\n  // A press outside the field and the list closes it. The path is checked\n  // rather than the target, so it works in a shadow root.\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!open || inline || !root) return undefined;\n    const onPress = (event: PointerEvent) => {\n      if (\n        event === insidePressRef.current ||\n        isEventInside(event, rootRef.current) ||\n        isEventInside(event, popupRef.current)\n      ) {\n        return;\n      }\n      close();\n    };\n    // Its document, an iframe's when the tree renders into one.\n    const doc = root.ownerDocument;\n    doc.addEventListener('pointerdown', onPress);\n    return () => doc.removeEventListener('pointerdown', onPress);\n  }, [open, inline, close]);\n\n  const submit = useCallback(\n    (value: string) => {\n      onSelect?.(value);\n      if (!multiple) close();\n    },\n    [onSelect, multiple, close]\n  );\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    // The caller's handler ran first and can keep a key, and an IME that's\n    // composing owns every key.\n    if (event.defaultPrevented || isComposing(event)) return;\n    const { key, altKey } = event;\n\n    if (!open) {\n      if (key === 'ArrowDown' || (key === 'ArrowUp' && !altKey)) {\n        event.preventDefault();\n        requestOpen(\n          true,\n          altKey ? 'none' : key === 'ArrowDown' ? 'first' : 'last'\n        );\n      }\n      return;\n    }\n\n    switch (key) {\n      case 'ArrowDown':\n      case 'ArrowUp': {\n        if (altKey) {\n          if (key === 'ArrowUp' && !inline) {\n            event.preventDefault();\n            close();\n          }\n          return;\n        }\n        event.preventDefault();\n        // Disabled options too, so a screen reader user finds them.\n        const options = shownOptions();\n        if (options.length === 0) return;\n        const at = options.findIndex(option => option.value === highlighted);\n        const step = key === 'ArrowDown' ? 1 : -1;\n        const index =\n          at === -1\n            ? step === 1\n              ? 0\n              : options.length - 1\n            : (at + step + options.length) % options.length;\n        scrollToHighlightRef.current = true;\n        setHighlighted(options[index].value);\n        return;\n      }\n      case 'Enter': {\n        const option = shownOptions().find(\n          shown => shown.value === highlighted\n        );\n        if (option) {\n          event.preventDefault();\n          if (!option.disabled) submit(option.value);\n          return;\n        }\n        // Nothing to pick: the key goes on, so a form submits.\n        onSettle?.();\n        close();\n        return;\n      }\n      case 'Escape':\n        if (inline) return;\n        // It stops here only when there was something to close, so a\n        // Popover or Modal around it keeps its own Escape otherwise. Nothing\n        // stops it going on: a handler further out reads `defaultPrevented`.\n        if (popupRef.current) event.preventDefault();\n        close();\n        return;\n      case 'Tab':\n        close();\n        return;\n      case 'Home':\n      case 'End':\n      case 'ArrowLeft':\n      case 'ArrowRight':\n        // The field's own keys, which take the field back from the list.\n        setHighlighted(null);\n        return;\n      default:\n    }\n  };\n\n  const onChange = () => {\n    setTyped(true);\n    if (open) {\n      landingRef.current = 'typed';\n      setHighlighted(null);\n      refresh();\n    } else {\n      requestOpen(true, 'typed');\n    }\n  };\n\n  const onClick = () => {\n    requestOpen(true, 'open');\n  };\n\n  const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    const next = event.relatedTarget as Node | null;\n    if (\n      next &&\n      (rootRef.current?.contains(next) || popupRef.current?.contains(next))\n    ) {\n      return;\n    }\n    close();\n  };\n\n  const hover = (value: string) => {\n    scrollToHighlightRef.current = false;\n    setHighlighted(value);\n  };\n\n  const pick = (value: string) => {\n    submit(value);\n    // A press in the list keeps focus in the field, but a browser that\n    // ignores that, or a tap, can leave it elsewhere.\n    const input = inputRef.current;\n    if (input && input.isConnected && getActiveElementInTree(input) !== input) {\n      input.focus();\n    }\n  };\n\n  const keepFocus = (event: React.MouseEvent) => event.preventDefault();\n\n  const markInside = (event: React.PointerEvent) => {\n    insidePressRef.current = event.nativeEvent;\n  };\n\n  const registerPopup = useCallback((element: HTMLElement) => {\n    popupRef.current = element;\n    return () => {\n      popupRef.current = null;\n    };\n  }, []);\n\n  const registerItem = useCallback(\n    (element: HTMLElement, state: ComboboxItemState) => {\n      const options = optionsRef.current;\n      options.set(element, state);\n      refresh();\n      return () => {\n        options.delete(element);\n        refresh();\n      };\n    },\n    []\n  );\n\n  return {\n    open,\n    expanded,\n    highlighted,\n    typed,\n    listboxId,\n    itemId,\n    rootRef,\n    inputRef,\n    listboxRef,\n    registerPopup,\n    registerItem,\n    onKeyDown,\n    onChange,\n    onClick,\n    onBlur,\n    hover,\n    pick,\n    keepFocus,\n    markInside,\n  };\n}\n"],"names":["isComposing"],"mappings":"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"}

package/dist/esm/helpers/useFocusTrap.js

@@ -288,8 +288,8 @@ function findTabStops(container) {
 /**
  * The first tab stop inside `container`, found the way the trap finds it, or
  * `null` when there is none. For a component that moves focus into a panel
- * without trapping it there. `src/index.ts` names its exports from this
- * module, so this one stays internal.
+ * itself rather than through the hook. `src/index.ts` names its exports from
+ * this module, so this one stays internal.
  */
 function firstTabStop(container) {
     return findTabStops(container)?.first ?? null;
@@ -303,6 +303,88 @@ function firstTabStop(container) {
  * was inside a shadow root that was removed, so this falls back for it.
  */
 const focusedElement = (doc) => getDeepestActiveElement(doc) ?? doc.body;
+/**
+ * Handles a Tab for a trap on `container`. When the browser has no tab stop
+ * left in that direction inside the container, focus goes to the stop at the
+ * other end and the key is marked used, and with no stops at all the
+ * container takes focus. Focus outside the container goes in at that end
+ * too. Otherwise the browser moves focus, and this returns the end to send it
+ * to should that Tab take it out anyway.
+ */
+function wrapTab(e, container) {
+    const stops = findTabStops(container);
+    if (!stops) {
+        e.preventDefault();
+        container.focus();
+        return null;
+    }
+    const focused = focusedElement(container.ownerDocument);
+    const current = stops.stopFor(focused);
+    const end = e.shiftKey ? stops.last : stops.first;
+    // Wrap whenever the browser has no stop left in that direction inside the
+    // container. Comparing positions rather than testing `=== first` also
+    // covers focus resting on the container or on an element outside the tab
+    // order, which the browser would otherwise walk straight out of.
+    if (!inside(container, focused) ||
+        (e.shiftKey
+            ? !follows(container, stops.first, current)
+            : !follows(container, current, stops.last))) {
+        e.preventDefault();
+        end.focus();
+        return null;
+    }
+    return end;
+}
+/**
+ * Holds Tab inside `container` until the returned function is called. Tab
+ * and Shift+Tab heard on `keyTarget` wrap at the ends, unless something
+ * already marked the key used, and if a Tab the trap let through still takes
+ * focus out, it sends focus back to the other end.
+ *
+ * `holds` is asked on every Tab, and the trap leaves the key alone while it
+ * says no. Internal like `firstTabStop`. It's for an overlay that holds Tab
+ * from a listener of its own on `window` and asks the overlay stack first,
+ * so it stands aside while another overlay is open over it, which a trap
+ * listening on the container can't do.
+ */
+function trapTab(container, keyTarget = container, holds = () => true) {
+    const doc = container.ownerDocument;
+    // Where focus goes if a Tab the trap let the browser handle takes it out,
+    // held until that Tab has finished moving focus.
+    let wrapTo = null;
+    let wrapTimer;
+    // `keyTarget` is any target, so the listener takes the base event type.
+    const handleKeyDown = (event) => {
+        const e = event;
+        // A trap nested inside this one has already wrapped focus.
+        if (e.key !== 'Tab' || e.defaultPrevented || !holds())
+            return;
+        const end = wrapTab(e, container);
+        if (!end)
+            return;
+        wrapTo = end;
+        clearTimeout(wrapTimer);
+        wrapTimer = setTimeout(() => {
+            wrapTo = null;
+        });
+    };
+    // The browser moves focus as soon as the keydown is over, so focus that
+    // lands outside while `wrapTo` is set got there by that Tab.
+    const handleFocusIn = (e) => {
+        if (!wrapTo || inside(container, e.composedPath()[0]))
+            return;
+        const target = wrapTo;
+        wrapTo = null;
+        target.focus();
+    };
+    keyTarget.addEventListener('keydown', handleKeyDown);
+    doc.addEventListener('focusin', handleFocusIn, true);
+    return () => {
+        keyTarget.removeEventListener('keydown', handleKeyDown);
+        doc.removeEventListener('focusin', handleFocusIn, true);
+        clearTimeout(wrapTimer);
+    };
+}
 /**
  * Keeps keyboard focus inside a container while it is active: focus moves in
  * when the trap turns on, Tab and Shift+Tab wrap between the first and last
@@ -381,53 +463,9 @@ function useFocusTrap(containerRef, options = {}) {
         if (!inTrap || !inside(container, focusedElement(doc))) {
             (findTabStops(container)?.first ?? container).focus();
         }
-        // Where focus goes if a Tab the trap let the browser handle takes it out,
-        // held until that Tab has finished moving focus.
-        let wrapTo = null;
-        let wrapTimer;
-        const handleKeyDown = (e) => {
-            // A trap nested inside this one has already wrapped focus.
-            if (e.key !== 'Tab' || e.defaultPrevented)
-                return;
-            const stops = findTabStops(container);
-            if (!stops) {
-                e.preventDefault();
-                container.focus();
-                return;
-            }
-            const current = stops.stopFor(focusedElement(doc));
-            // Wrap whenever the browser has no stop left in that direction inside
-            // the container. Comparing positions rather than testing `=== first`
-            // also covers focus resting on the container or on an element outside
-            // the tab order, which the browser would otherwise walk straight out of.
-            if (e.shiftKey
-                ? !follows(container, stops.first, current)
-                : !follows(container, current, stops.last)) {
-                e.preventDefault();
-                (e.shiftKey ? stops.last : stops.first).focus();
-                return;
-            }
-            wrapTo = e.shiftKey ? stops.last : stops.first;
-            clearTimeout(wrapTimer);
-            wrapTimer = setTimeout(() => {
-                wrapTo = null;
-            });
-        };
-        // The browser moves focus as soon as the keydown is over, so focus that
-        // lands outside while `wrapTo` is set got there by that Tab.
-        const handleFocusIn = (e) => {
-            if (!wrapTo || inside(container, e.composedPath()[0]))
-                return;
-            const target = wrapTo;
-            wrapTo = null;
-            target.focus();
-        };
-        container.addEventListener('keydown', handleKeyDown);
-        doc.addEventListener('focusin', handleFocusIn, true);
+        const releaseTab = trapTab(container);
         return () => {
-            container.removeEventListener('keydown', handleKeyDown);
-            doc.removeEventListener('focusin', handleFocusIn, true);
-            clearTimeout(wrapTimer);
+            releaseTab();
             let target = restoreFocus ? opener : null;
             // `null` is an object too, and a caller without types can pass it.
             if (restoreFocus && typeof restoreFocus === 'object') {
@@ -467,5 +505,5 @@ function useFocusTrap(containerRef, options = {}) {
     });
 }
 
-export { firstTabStop, isTabbableKind, useFocusTrap };
+export { firstTabStop, isTabbableKind, trapTab, useFocusTrap };
 //# sourceMappingURL=useFocusTrap.js.map