se-design 1.0.90-dev.0 → 1.0.90

package/dist/index68.js

@@ -1,116 +1,58 @@
-import { useRef as l, useState as M, useCallback as y, useEffect as U } from "react";
-import { useComboboxNavigation as E } from "./index79.js";
-import { useDismissOnFocusOut as H } from "./index80.js";
-function L({
-  items: a,
-  isOpen: r,
-  onOpenChange: c,
-  onSelect: x,
-  listboxId: n,
-  loop: C = !0,
-  disabled: D = !1,
-  optionSelector: v = '[role="option"]',
-  hasItems: g,
-  keepHighlightOnSelect: P = !1,
-  closeOnTab: k = !0,
-  isItemDisabled: f
-}) {
-  const h = l(null), s = l(!1), d = l(!1), u = l(!1), [w, t] = M(!1), F = g !== void 0 ? g : a.length > 0, p = y(() => {
-    c(!1);
-  }, [c]);
-  U(() => {
-    r || (s.current = !1, u.current = !1);
-  }, [r]);
-  const o = E({
-    items: a,
-    isOpen: r,
-    onSelect: x,
-    onClose: p,
-    onOpen: () => c(!0),
-    loop: C,
-    disabled: D,
-    listboxRef: h,
-    optionSelector: v,
-    keepHighlightOnSelect: P,
-    closeOnTab: k,
-    isItemDisabled: f
-  }), i = H({
-    onFocusOut: p,
-    onEscape: p,
-    disabled: !r
-  }), K = {
-    ...i,
-    onPointerMove: () => {
-      w && t(!1);
-    },
-    onPointerDown: () => {
-      u.current = !0, t(!1);
-    },
-    onPointerUp: () => {
-    },
-    onFocusCapture: (e) => {
-      i.onFocusCapture(e), u.current ? t(!1) : t(!0);
-    },
-    onKeyDownCapture: (e) => {
-      i.onKeyDownCapture(e), (e.key === "Tab" || e.key === "ArrowDown" || e.key === "ArrowUp") && (u.current = !1), (e.key === "ArrowDown" || e.key === "ArrowUp") && t(!0);
-    },
-    onBlurCapture: (e) => {
-      if (t(!1), !s.current) {
-        if (d.current) {
-          d.current = !1;
-          return;
-        }
-        i.onBlurCapture(e);
-      }
+import * as s from "react";
+import { isVirtualClick as x } from "./index79.js";
+function I({
+  disabled: v = !1,
+  loading: l = !1,
+  onClick: u,
+  onKeyboardActivate: n,
+  isNative: o = !0,
+  role: y = "button",
+  tabIndex: C = 0,
+  stopPropagation: c = !1,
+  preventDefault: f = !1,
+  pressed: P,
+  onPointerDown: k,
+  onMouseDown: b,
+  onTouchStart: p
+} = {}) {
+  const e = v || l, a = s.useRef(!1), t = s.useCallback(() => {
+    a.current = !0;
+  }, []), D = s.useCallback((r) => {
+    if (e) return;
+    c && r.stopPropagation(), f && r.preventDefault();
+    const h = x(r.nativeEvent), w = a.current;
+    a.current = !1;
+    const m = h ? "virtual" : w ? "pointer" : "keyboard";
+    if ((m === "keyboard" || m === "virtual") && n) {
+      n(r);
+      return;
     }
-  }, m = {
-    role: "combobox",
-    "aria-expanded": r && F,
-    "aria-haspopup": "listbox",
-    "aria-controls": r ? n : void 0,
-    "aria-autocomplete": "list",
-    "aria-activedescendant": o.highlightedIndex >= 0 ? o.getOptionId(n, o.highlightedIndex) : void 0,
-    onKeyDown: (e) => {
-      e.key === "Tab" && (d.current = !0), o.handleKeyDown(e);
-    }
-  }, I = {
-    id: n,
-    role: "listbox",
-    ref: h,
-    onMouseDownCapture: (e) => {
-      s.current = !0;
-    },
-    onMouseUpCapture: (e) => {
-      s.current = !1;
-    },
-    onMouseLeave: (e) => {
-      s.current = !1;
-    }
-  }, R = y((e, A = !1) => {
-    const b = f?.(a[e], e);
-    return {
-      id: o.getOptionId(n, e),
-      role: "option",
-      ...b ? {} : {
-        "aria-selected": A
-      },
-      ...b ? {
-        "aria-disabled": !0
-      } : {}
-    };
-  }, [o.getOptionId, n, f, a]);
-  return {
-    containerProps: K,
-    inputProps: m,
-    listboxProps: I,
-    getOptionProps: R,
-    highlightedIndex: o.highlightedIndex,
-    setHighlightedIndex: o.setHighlightedIndex,
-    getOptionId: o.getOptionId,
-    isKeyboardFocused: w
+    u?.(r);
+  }, [e, u, n, c, f]), R = s.useCallback((r) => {
+    e || (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.currentTarget.click());
+  }, [e]), d = {
+    onPointerDown: k ? (r) => {
+      t(), k(r);
+    } : t,
+    onMouseDown: b ? (r) => {
+      t(), b(r);
+    } : t,
+    onTouchStart: p ? (r) => {
+      t(), p(r);
+    } : t,
+    onClick: D,
+    "aria-disabled": e ? "true" : void 0,
+    "aria-busy": l ? "true" : void 0,
+    "aria-pressed": P
+  };
+  o || (d.onKeyDown = R);
+  const i = {
+    pressProps: d,
+    isDisabled: e
   };
+  return o || (i.role = y, i.tabIndex = e ? -1 : C), i;
 }
 export {
-  L as useCombobox
+  I as useAccessiblePress
 };
 //# sourceMappingURL=index68.js.map

package/dist/index68.js.map

@@ -1 +1 @@
-{"version":3,"file":"index68.js","sources":["../src/utils/a11y/useCombobox.ts"],"sourcesContent":["import { useRef, useCallback, useEffect, useState } from 'react';\nimport type { RefObject } from 'react';\nimport { useComboboxNavigation } from './useComboboxNavigation';\nimport { useDismissOnFocusOut } from './useDismissOnFocusOut';\nimport type { UseDismissOnFocusOutReturn } from './useDismissOnFocusOut';\n\nexport interface UseComboboxOptions<T = any> {\n  /**\n   * Array of items to navigate through\n   */\n  items: T[];\n  \n  /**\n   * Whether the dropdown is currently open\n   */\n  isOpen: boolean;\n  \n  /**\n   * Callback to change the open state\n   */\n  onOpenChange: (open: boolean) => void;\n  \n  /**\n   * Callback when an item is selected (Enter key)\n   */\n  onSelect: (item: T, index: number) => void;\n  \n  /**\n   * Stable ID for the listbox element\n   */\n  listboxId: string;\n  \n  /**\n   * Whether to wrap around at the ends of the list.\n   * Default: true\n   */\n  loop?: boolean;\n  \n  /**\n   * Whether keyboard navigation is disabled\n   * (e.g., for custom rendered content)\n   */\n  disabled?: boolean;\n  \n  /**\n   * CSS selector for option elements (default: '[role=\"option\"]')\n   */\n  optionSelector?: string;\n  \n  /**\n   * Whether the listbox has any items to show\n   * Used for aria-expanded logic\n   * Default: items.length > 0\n   */\n  hasItems?: boolean;\n\n  /**\n   * Whether to keep the highlighted index after selecting an item.\n   * Useful for multi-select where the dropdown stays open after selection.\n   * Default: false\n   */\n  keepHighlightOnSelect?: boolean;\n\n  /**\n   * Whether Tab should close the dropdown.\n   * Set to false when Tab should move focus to elements within the popup (e.g. CTAs).\n   * Default: true\n   */\n  closeOnTab?: boolean;\n\n  /**\n   * Predicate to mark items as disabled. Disabled items are reachable via arrow keys\n   * (so screen readers can announce them) but Enter/Space selection is blocked.\n   */\n  isItemDisabled?: (item: T, index: number) => boolean;\n}\n\nexport interface UseComboboxReturn {\n  /**\n   * Props to spread on the container element (handles dismiss on focus out + keyboard focus tracking)\n   */\n  containerProps: UseDismissOnFocusOutReturn<HTMLElement> & {\n    onPointerMove: () => void;\n    onPointerDown: () => void;\n    onPointerUp: () => void;\n  };\n  \n  /**\n   * Props to spread on the combobox input element\n   */\n  inputProps: {\n    role: 'combobox';\n    'aria-expanded': boolean;\n    'aria-haspopup': 'listbox';\n    'aria-controls': string | undefined;\n    'aria-autocomplete': 'list';\n    'aria-activedescendant': string | undefined;\n    onKeyDown: (e: React.KeyboardEvent) => void;\n  };\n  \n  /**\n   * Props to spread on the listbox element\n   */\n  listboxProps: {\n    id: string;\n    role: 'listbox';\n    ref: RefObject<HTMLDivElement | null>;\n    onMouseDownCapture: (e: React.MouseEvent) => void;\n    onMouseUpCapture: (e: React.MouseEvent) => void;\n    onMouseLeave: (e: React.MouseEvent) => void;\n  };\n  \n  /**\n   * Generate props for an option element at the given index\n   * @param selected - Whether this option is the currently selected/chosen value (not keyboard highlight)\n   */\n  getOptionProps: (index: number, selected?: boolean) => {\n    id: string;\n    role: 'option';\n    'aria-selected'?: boolean;\n    'aria-disabled'?: true;\n  };\n  \n  /**\n   * Currently highlighted index (-1 if none)\n   */\n  highlightedIndex: number;\n  \n  /**\n   * Set the highlighted index manually\n   */\n  setHighlightedIndex: (index: number | ((prev: number) => number)) => void;\n  \n  /**\n   * Generate stable ID for an option\n   */\n  getOptionId: (listboxId: string, index: number) => string;\n\n  /**\n   * Whether the combobox input was focused via keyboard (Tab) rather than pointer.\n   * Use to conditionally show focus ring only on keyboard interaction.\n   */\n  isKeyboardFocused: boolean;\n}\n\n/**\n * Comprehensive hook for implementing WAI-ARIA combobox pattern.\n * \n * Combines:\n * - Keyboard navigation (Arrow Up/Down, Enter, Escape, Tab)\n * - Focus management and dismissal\n * - ARIA attributes for accessibility\n * - Auto-scroll highlighted item into view\n * \n * This hook provides a complete, batteries-included solution for building\n * accessible combobox components (autocomplete, select, search with suggestions, etc.)\n * \n * @example Basic usage\n * ```tsx\n * const MyCombobox = () => {\n *   const [isOpen, setIsOpen] = useState(false);\n *   const [items, setItems] = useState(['Apple', 'Banana', 'Cherry']);\n *   \n *   const {\n *     containerProps,\n *     inputProps,\n *     listboxProps,\n *     getOptionProps,\n *     highlightedIndex\n *   } = useCombobox({\n *     items,\n *     isOpen,\n *     onOpenChange: setIsOpen,\n *     onSelect: (item) => console.log('Selected:', item),\n *     listboxId: 'my-listbox'\n *   });\n *   \n *   return (\n *     <div {...containerProps}>\n *       <input {...inputProps} />\n *       {isOpen && (\n *         <div {...listboxProps}>\n *           {items.map((item, i) => (\n *             <div key={i} {...getOptionProps(i)}>\n *               {item}\n *             </div>\n *           ))}\n *         </div>\n *       )}\n *     </div>\n *   );\n * };\n * ```\n * \n * @example With custom ARIA labels and handlers\n * ```tsx\n * const MySearchBox = () => {\n *   const [query, setQuery] = useState('');\n *   const [suggestions, setSuggestions] = useState([]);\n *   const [isOpen, setIsOpen] = useState(false);\n *   \n *   const { containerProps, inputProps, listboxProps, getOptionProps } = useCombobox({\n *     items: suggestions,\n *     isOpen,\n *     onOpenChange: setIsOpen,\n *     onSelect: (suggestion) => {\n *       setQuery(suggestion);\n *       setIsOpen(false);\n *     },\n *     listboxId: 'search-suggestions'\n *   });\n *   \n *   return (\n *     <div {...containerProps}>\n *       <input\n *         {...inputProps}\n *         value={query}\n *         onChange={(e) => setQuery(e.target.value)}\n *         aria-label=\"Search\"\n *       />\n *       {isOpen && suggestions.length > 0 && (\n *         <div {...listboxProps} aria-label=\"Search suggestions\">\n *           {suggestions.map((suggestion, i) => (\n *             <div\n *               key={i}\n *               {...getOptionProps(i)}\n *               onClick={() => {\n *                 setQuery(suggestion);\n *                 setIsOpen(false);\n *               }}\n *             >\n *               {suggestion}\n *             </div>\n *           ))}\n *         </div>\n *       )}\n *     </div>\n *   );\n * };\n * ```\n */\nexport function useCombobox<T = any>({\n  items,\n  isOpen,\n  onOpenChange,\n  onSelect,\n  listboxId,\n  loop = true,\n  disabled = false,\n  optionSelector = '[role=\"option\"]',\n  hasItems,\n  keepHighlightOnSelect = false,\n  closeOnTab = true,\n  isItemDisabled\n}: UseComboboxOptions<T>): UseComboboxReturn {\n  const listboxRef = useRef<HTMLDivElement | null>(null);\n  const pointerDownInListboxRef = useRef(false);\n  const tabKeyPressedRef = useRef(false);\n  const pointerFocusRef = useRef(false);\n  const [isKeyboardFocused, setIsKeyboardFocused] = useState(false);\n  \n  // Determine if we should show as expanded\n  const shouldShowExpanded = hasItems !== undefined ? hasItems : items.length > 0;\n  \n  // Close dropdown callback\n  const closeDropdown = useCallback(() => {\n    onOpenChange(false);\n  }, [onOpenChange]);\n\n  // Ensure pointer state doesn't get stuck when listbox unmounts\n  useEffect(() => {\n    if (!isOpen) {\n      pointerDownInListboxRef.current = false;\n      pointerFocusRef.current = false;\n    }\n  }, [isOpen]);\n  \n  // Keyboard navigation with aria-activedescendant\n  const navigation = useComboboxNavigation<T>({\n    items,\n    isOpen,\n    onSelect,\n    onClose: closeDropdown,\n    onOpen: () => onOpenChange(true),\n    loop,\n    disabled,\n    listboxRef,\n    optionSelector,\n    keepHighlightOnSelect,\n    closeOnTab,\n    isItemDisabled\n  });\n  \n  // Focus out / Escape dismissal\n  const dismissHandlers = useDismissOnFocusOut({\n    onFocusOut: closeDropdown,\n    onEscape: closeDropdown,\n    disabled: !isOpen\n  });\n\n  const containerProps = {\n    ...dismissHandlers,\n    onPointerMove: () => {\n      if (isKeyboardFocused) {\n        setIsKeyboardFocused(false);\n      }\n    },\n    onPointerDown: () => {\n      pointerFocusRef.current = true;\n      setIsKeyboardFocused(false);\n    },\n    onPointerUp: () => {\n      // Don't reset pointerFocusRef here — timing races with programmatic focus\n      // (e.g. focus-on-open via double rAF) cause it to clear before onFocusCapture\n      // fires, incorrectly setting isKeyboardFocused=true.\n      // Instead, pointerFocusRef is reset only when keyboard navigation starts\n      // (Tab/Arrow in onKeyDownCapture), ensuring any programmatic focus after a\n      // click is always treated as pointer context.\n    },\n    onFocusCapture: (e: React.FocusEvent<HTMLElement>) => {\n      dismissHandlers.onFocusCapture(e);\n\n      if (pointerFocusRef.current) {\n        setIsKeyboardFocused(false);\n      } else {\n        setIsKeyboardFocused(true);\n      }\n    },\n    onKeyDownCapture: (e: React.KeyboardEvent<HTMLElement>) => {\n      dismissHandlers.onKeyDownCapture(e);\n\n      // Keyboard interaction starts — clear pointer context so subsequent\n      // focus events are correctly identified as keyboard-initiated.\n      if (e.key === 'Tab' || e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n        pointerFocusRef.current = false;\n      }\n\n      // Arrow keys mean keyboard navigation — show focus outline even if\n      // the combobox was opened with mouse (activedescendant doesn't move\n      // DOM focus, so onFocusCapture alone can't detect the switch).\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n        setIsKeyboardFocused(true);\n      }\n    },\n    onBlurCapture: (e: React.FocusEvent<HTMLElement>) => {\n      setIsKeyboardFocused(false);\n\n      // Clicking inside a listbox option can blur the input (relatedTarget is null),\n      // which would dismiss before the click handler runs. Prevent that.\n      if (pointerDownInListboxRef.current) return;\n\n      // Tab key pressed - let Tab handler close dropdown, skip blur detection\n      if (tabKeyPressedRef.current) {\n        tabKeyPressedRef.current = false;\n        return;\n      }\n\n      dismissHandlers.onBlurCapture(e);\n    }\n  };\n  \n  // Build input props\n  const inputProps = {\n    role: 'combobox' as const,\n    'aria-expanded': isOpen && shouldShowExpanded,\n    'aria-haspopup': 'listbox' as const,\n    'aria-controls': isOpen ? listboxId : undefined,\n    'aria-autocomplete': 'list' as const,\n    'aria-activedescendant': \n      navigation.highlightedIndex >= 0 \n        ? navigation.getOptionId(listboxId, navigation.highlightedIndex) \n        : undefined,\n    onKeyDown: (e: React.KeyboardEvent) => {\n      // Set flag when Tab is pressed (before blur fires)\n      if (e.key === 'Tab') {\n        tabKeyPressedRef.current = true;\n      }\n      navigation.handleKeyDown(e);\n    }\n  };\n  \n  // Build listbox props\n  const listboxProps = {\n    id: listboxId,\n    role: 'listbox' as const,\n    ref: listboxRef,\n    onMouseDownCapture: (_e: React.MouseEvent) => {\n      pointerDownInListboxRef.current = true;\n    },\n    onMouseUpCapture: (_e: React.MouseEvent) => {\n      pointerDownInListboxRef.current = false;\n    },\n    onMouseLeave: (_e: React.MouseEvent) => {\n      pointerDownInListboxRef.current = false;\n    }\n  };\n  \n  // Option props generator\n  const getOptionProps = useCallback(\n    (index: number, selected: boolean = false) => {\n      const disabled = isItemDisabled?.(items[index], index);\n      return {\n        id: navigation.getOptionId(listboxId, index),\n        role: 'option' as const,\n        ...(!disabled ? { 'aria-selected': selected } : {}),\n        ...(disabled ? { 'aria-disabled': true as const } : {})\n      };\n    },\n    [navigation.getOptionId, listboxId, isItemDisabled, items]\n  );\n  \n  return {\n    containerProps,\n    inputProps,\n    listboxProps,\n    getOptionProps,\n    highlightedIndex: navigation.highlightedIndex,\n    setHighlightedIndex: navigation.setHighlightedIndex,\n    getOptionId: navigation.getOptionId,\n    isKeyboardFocused\n  };\n}\n"],"names":["useRef","useState","useCallback","useEffect","useComboboxNavigation","useDismissOnFocusOut","useCombobox","items","isOpen","onOpenChange","onSelect","listboxId","loop","disabled","optionSelector","hasItems","keepHighlightOnSelect","closeOnTab","isItemDisabled","listboxRef","pointerDownInListboxRef","tabKeyPressedRef","pointerFocusRef","isKeyboardFocused","setIsKeyboardFocused","shouldShowExpanded","undefined","length","closeDropdown","current","navigation","onClose","onOpen","dismissHandlers","onFocusOut","onEscape","containerProps","onPointerMove","onPointerDown","onPointerUp","onFocusCapture","e","onKeyDownCapture","key","onBlurCapture","inputProps","role","highlightedIndex","getOptionId","onKeyDown","handleKeyDown","listboxProps","id","ref","onMouseDownCapture","_e","onMouseUpCapture","onMouseLeave","getOptionProps","index","selected","setHighlightedIndex"],"mappings":"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"}
+{"version":3,"file":"index68.js","sources":["../src/utils/a11y/useAccessiblePress.ts"],"sourcesContent":["import * as React from 'react';\nimport { isVirtualClick } from '../virtualClick';\n\n/**\n * Hook for accessible press interactions (pointer vs keyboard vs virtual click).\n *\n * Handles:\n * - Pointer intent tracking (mouse/touch)\n * - Virtual click detection (NVDA browse mode, etc.)\n * - Routing to appropriate handler (onClick vs onKeyboardActivate)\n * - For non-native elements: Enter/Space → activation\n * - Optional stopPropagation and preventDefault\n *\n * @example\n * // Native button (isNative=true, the default)\n * const { pressProps } = useAccessiblePress({ onClick, disabled });\n * <button {...pressProps}>Click me</button>\n *\n * @example\n * // Non-native element (div acting as button)\n * const { pressProps, role, tabIndex } = useAccessiblePress({ onClick, isNative: false });\n * <div role={role} tabIndex={tabIndex} {...pressProps}>Click me</div>\n *\n * @example\n * // Element nested inside clickable parent (prevent event bubbling)\n * const { pressProps, tabIndex } = useAccessiblePress({ \n *   onClick, \n *   isNative: false, \n *   stopPropagation: true \n * });\n * <div role=\"button\" tabIndex={tabIndex} {...pressProps}>Click me</div>\n */\n\ntype InputKind = 'pointer' | 'keyboard' | 'virtual';\n\nexport type UseAccessiblePressOptions = {\n  /**\n   * Whether the element is disabled\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the element is in a loading state (will also disable)\n   */\n  loading?: boolean;\n\n  /**\n   * Handler for pointer/touch activations (or all activations if onKeyboardActivate is not provided)\n   */\n  onClick?: (e: React.MouseEvent<HTMLElement>) => void;\n\n  /**\n   * Handler for keyboard + assistive tech virtual activation.\n   * If omitted, onClick is used for all activations.\n   */\n  onKeyboardActivate?: (e: React.MouseEvent<HTMLElement>) => void;\n\n  /**\n   * If true, this is a native <button> (or other native pressable) and we MUST NOT add Enter/Space handling.\n   * Default: true\n   */\n  isNative?: boolean;\n\n  /**\n   * Only for non-native elements (div/span). Defaults to 'button'.\n   */\n  role?: string;\n\n  /**\n   * Only for non-native elements. Defaults to 0.\n   */\n  tabIndex?: number;\n\n  /**\n   * If true, calls e.stopPropagation() before invoking onClick handler.\n   * Useful when element is nested inside another clickable element.\n   * Default: false\n   */\n  stopPropagation?: boolean;\n\n  /**\n   * If true, calls e.preventDefault() before invoking onClick handler.\n   * Note: For non-native elements, preventDefault is already called on Space/Enter keys.\n   * Default: false\n   */\n  preventDefault?: boolean;\n\n  /**\n   * Toggle/pressed state. When true or false, sets aria-pressed on the element (e.g. selected color swatch).\n   * Omit for non-toggle buttons.\n   */\n  pressed?: boolean;\n\n  /**\n   * User-provided pointer/mouse/touch handlers. When provided, they are chained\n   * after the internal pointer-intent tracking handler (markPointer), so both run.\n   */\n  onPointerDown?: (e: React.PointerEvent<HTMLElement>) => void;\n  onMouseDown?: (e: React.MouseEvent<HTMLElement>) => void;\n  onTouchStart?: (e: React.TouchEvent<HTMLElement>) => void;\n};\n\nexport type UseAccessiblePressReturn = {\n  /**\n   * Props to spread onto the element. Includes event handlers and ARIA attributes.\n   * Does NOT include role/tabIndex — apply those separately.\n   */\n  pressProps: React.HTMLAttributes<HTMLElement> & {\n    'aria-disabled'?: 'true';\n    'aria-busy'?: 'true';\n    'aria-pressed'?: boolean;\n  };\n\n  /**\n   * Combined disabled state (disabled || loading)\n   */\n  isDisabled: boolean;\n\n  /**\n   * Role for non-native elements (e.g., 'button', 'menuitem').\n   * Only returned when isNative=false.\n   */\n  role?: string;\n\n  /**\n   * TabIndex for non-native elements.\n   * Returns -1 when disabled, otherwise the provided tabIndex (default 0).\n   * Only returned when isNative=false.\n   */\n  tabIndex?: number;\n};\n\nexport function useAccessiblePress({\n  disabled = false,\n  loading = false,\n  onClick,\n  onKeyboardActivate,\n  isNative = true,\n  role = 'button',\n  tabIndex = 0,\n  stopPropagation = false,\n  preventDefault = false,\n  pressed,\n  onPointerDown,\n  onMouseDown,\n  onTouchStart\n}: UseAccessiblePressOptions = {}): UseAccessiblePressReturn {\n  const isDisabled = disabled || loading;\n  const lastWasPointerRef = React.useRef(false);\n\n  const markPointer = React.useCallback(() => {\n    lastWasPointerRef.current = true;\n  }, []);\n\n  const handleClick = React.useCallback(\n    (e: React.MouseEvent<HTMLElement>) => {\n      if (isDisabled) return;\n\n      // Handle event control flags\n      if (stopPropagation) e.stopPropagation();\n      if (preventDefault) e.preventDefault();\n\n      const virtual = isVirtualClick(e.nativeEvent as any);\n      const isPointer = lastWasPointerRef.current;\n      lastWasPointerRef.current = false;\n\n      const input: InputKind = virtual ? 'virtual' : isPointer ? 'pointer' : 'keyboard';\n\n      // If we have a keyboard handler, route keyboard + virtual clicks there.\n      if ((input === 'keyboard' || input === 'virtual') && onKeyboardActivate) {\n        onKeyboardActivate(e);\n        return;\n      }\n\n      onClick?.(e);\n    },\n    [isDisabled, onClick, onKeyboardActivate, stopPropagation, preventDefault]\n  );\n\n  // Only used for non-native elements: Enter/Space should trigger click(), reusing the same click routing.\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      if (isDisabled) return;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        // Trigger native click event so all routing goes through handleClick\n        (e.currentTarget as HTMLElement).click();\n      }\n    },\n    [isDisabled]\n  );\n\n  const pressProps: UseAccessiblePressReturn['pressProps'] = {\n    onPointerDown: onPointerDown\n      ? (e: React.PointerEvent<HTMLElement>) => { markPointer(); onPointerDown(e); }\n      : markPointer,\n    onMouseDown: onMouseDown\n      ? (e: React.MouseEvent<HTMLElement>) => { markPointer(); onMouseDown(e); }\n      : markPointer,\n    onTouchStart: onTouchStart\n      ? (e: React.TouchEvent<HTMLElement>) => { markPointer(); onTouchStart(e); }\n      : markPointer,\n    onClick: handleClick,\n    'aria-disabled': isDisabled ? 'true' : undefined,\n    'aria-busy': loading ? 'true' : undefined,\n    'aria-pressed': pressed\n  };\n\n  // For non-native elements, add Enter/Space handling\n  if (!isNative) {\n    pressProps.onKeyDown = handleKeyDown;\n  }\n\n  // Return role/tabIndex separately (only for non-native elements)\n  const result: UseAccessiblePressReturn = { pressProps, isDisabled };\n\n  if (!isNative) {\n    result.role = role;\n    result.tabIndex = isDisabled ? -1 : tabIndex;\n  }\n\n  return result;\n}\n\n"],"names":["React","isVirtualClick","useAccessiblePress","disabled","loading","onClick","onKeyboardActivate","isNative","role","tabIndex","stopPropagation","preventDefault","pressed","onPointerDown","onMouseDown","onTouchStart","isDisabled","lastWasPointerRef","useRef","markPointer","useCallback","current","handleClick","e","virtual","nativeEvent","isPointer","input","handleKeyDown","key","currentTarget","click","pressProps","undefined","onKeyDown","result"],"mappings":"AAoIO,YAAAA,OAAA;AAAA,SAAA,kBAAAC,SAAA;AAAA,SAASC,EAAmB;AAAA,EACjCC,UAAAA,IAAW;AAAA,EACXC,SAAAA,IAAU;AAAA,EACVC,SAAAA;AAAAA,EACAC,oBAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,MAAAA,IAAO;AAAA,EACPC,UAAAA,IAAW;AAAA,EACXC,iBAAAA,IAAkB;AAAA,EAClBC,gBAAAA,IAAiB;AAAA,EACjBC,SAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,cAAAA;AACyB,IAAI,IAA8B;AAC3D,QAAMC,IAAab,KAAYC,GACzBa,IAAoBjB,EAAMkB,OAAO,EAAK,GAEtCC,IAAcnB,EAAMoB,YAAY,MAAM;AAC1CH,IAAAA,EAAkBI,UAAU;AAAA,EAC9B,GAAG,CAAA,CAAE,GAECC,IAActB,EAAMoB,YACxB,CAACG,MAAqC;AACpC,QAAIP,EAAY;AAGhB,IAAIN,OAAmBA,gBAAAA,GACnBC,OAAkBA,eAAAA;AAEtB,UAAMa,IAAUvB,EAAesB,EAAEE,WAAkB,GAC7CC,IAAYT,EAAkBI;AACpCJ,IAAAA,EAAkBI,UAAU;AAE5B,UAAMM,IAAmBH,IAAU,YAAYE,IAAY,YAAY;AAGvE,SAAKC,MAAU,cAAcA,MAAU,cAAcrB,GAAoB;AACvEA,MAAAA,EAAmBiB,CAAC;AACpB;AAAA,IACF;AAEAlB,IAAAA,IAAUkB,CAAC;AAAA,EACb,GACA,CAACP,GAAYX,GAASC,GAAoBI,GAAiBC,CAAc,CAC3E,GAGMiB,IAAgB5B,EAAMoB,YAC1B,CAACG,MAAwC;AACvC,IAAIP,MAEAO,EAAEM,QAAQ,WAAWN,EAAEM,QAAQ,SACjCN,EAAEZ,eAAAA,GAEDY,EAAEO,cAA8BC,MAAAA;AAAAA,EAErC,GACA,CAACf,CAAU,CACb,GAEMgB,IAAqD;AAAA,IACzDnB,eAAeA,IACX,CAACU,MAAuC;AAAEJ,MAAAA,EAAAA,GAAeN,EAAcU,CAAC;AAAA,IAAG,IAC3EJ;AAAAA,IACJL,aAAaA,IACT,CAACS,MAAqC;AAAEJ,MAAAA,EAAAA,GAAeL,EAAYS,CAAC;AAAA,IAAG,IACvEJ;AAAAA,IACJJ,cAAcA,IACV,CAACQ,MAAqC;AAAEJ,MAAAA,EAAAA,GAAeJ,EAAaQ,CAAC;AAAA,IAAG,IACxEJ;AAAAA,IACJd,SAASiB;AAAAA,IACT,iBAAiBN,IAAa,SAASiB;AAAAA,IACvC,aAAa7B,IAAU,SAAS6B;AAAAA,IAChC,gBAAgBrB;AAAAA,EAAAA;AAIlB,EAAKL,MACHyB,EAAWE,YAAYN;AAIzB,QAAMO,IAAmC;AAAA,IAAEH,YAAAA;AAAAA,IAAYhB,YAAAA;AAAAA,EAAAA;AAEvD,SAAKT,MACH4B,EAAO3B,OAAOA,GACd2B,EAAO1B,WAAWO,IAAa,KAAKP,IAG/B0B;AACT;"}

package/dist/index69.js

@@ -1,22 +1,116 @@
-import { useRef as u, useEffect as i } from "react";
-function f(n, {
-  targetSelector: r = "#main-content h1",
-  fallbackId: c = "main-content"
-} = {}) {
-  const t = u(!0);
-  i(() => {
-    if (t.current) {
-      t.current = !1;
-      return;
+import { useRef as l, useState as M, useCallback as y, useEffect as U } from "react";
+import { useComboboxNavigation as E } from "./index80.js";
+import { useDismissOnFocusOut as H } from "./index81.js";
+function L({
+  items: a,
+  isOpen: r,
+  onOpenChange: c,
+  onSelect: x,
+  listboxId: n,
+  loop: C = !0,
+  disabled: D = !1,
+  optionSelector: v = '[role="option"]',
+  hasItems: g,
+  keepHighlightOnSelect: P = !1,
+  closeOnTab: k = !0,
+  isItemDisabled: f
+}) {
+  const h = l(null), s = l(!1), d = l(!1), u = l(!1), [w, t] = M(!1), F = g !== void 0 ? g : a.length > 0, p = y(() => {
+    c(!1);
+  }, [c]);
+  U(() => {
+    r || (s.current = !1, u.current = !1);
+  }, [r]);
+  const o = E({
+    items: a,
+    isOpen: r,
+    onSelect: x,
+    onClose: p,
+    onOpen: () => c(!0),
+    loop: C,
+    disabled: D,
+    listboxRef: h,
+    optionSelector: v,
+    keepHighlightOnSelect: P,
+    closeOnTab: k,
+    isItemDisabled: f
+  }), i = H({
+    onFocusOut: p,
+    onEscape: p,
+    disabled: !r
+  }), K = {
+    ...i,
+    onPointerMove: () => {
+      w && t(!1);
+    },
+    onPointerDown: () => {
+      u.current = !0, t(!1);
+    },
+    onPointerUp: () => {
+    },
+    onFocusCapture: (e) => {
+      i.onFocusCapture(e), u.current ? t(!1) : t(!0);
+    },
+    onKeyDownCapture: (e) => {
+      i.onKeyDownCapture(e), (e.key === "Tab" || e.key === "ArrowDown" || e.key === "ArrowUp") && (u.current = !1), (e.key === "ArrowDown" || e.key === "ArrowUp") && t(!0);
+    },
+    onBlurCapture: (e) => {
+      if (t(!1), !s.current) {
+        if (d.current) {
+          d.current = !1;
+          return;
+        }
+        i.onBlurCapture(e);
+      }
     }
-    const o = requestAnimationFrame(() => {
-      const e = document.querySelector(r) || document.getElementById(c);
-      e && (e.hasAttribute("tabindex") || e.setAttribute("tabindex", "-1"), e.focus());
-    });
-    return () => cancelAnimationFrame(o);
-  }, n);
+  }, m = {
+    role: "combobox",
+    "aria-expanded": r && F,
+    "aria-haspopup": "listbox",
+    "aria-controls": r ? n : void 0,
+    "aria-autocomplete": "list",
+    "aria-activedescendant": o.highlightedIndex >= 0 ? o.getOptionId(n, o.highlightedIndex) : void 0,
+    onKeyDown: (e) => {
+      e.key === "Tab" && (d.current = !0), o.handleKeyDown(e);
+    }
+  }, I = {
+    id: n,
+    role: "listbox",
+    ref: h,
+    onMouseDownCapture: (e) => {
+      s.current = !0;
+    },
+    onMouseUpCapture: (e) => {
+      s.current = !1;
+    },
+    onMouseLeave: (e) => {
+      s.current = !1;
+    }
+  }, R = y((e, A = !1) => {
+    const b = f?.(a[e], e);
+    return {
+      id: o.getOptionId(n, e),
+      role: "option",
+      ...b ? {} : {
+        "aria-selected": A
+      },
+      ...b ? {
+        "aria-disabled": !0
+      } : {}
+    };
+  }, [o.getOptionId, n, f, a]);
+  return {
+    containerProps: K,
+    inputProps: m,
+    listboxProps: I,
+    getOptionProps: R,
+    highlightedIndex: o.highlightedIndex,
+    setHighlightedIndex: o.setHighlightedIndex,
+    getOptionId: o.getOptionId,
+    isKeyboardFocused: w
+  };
 }
 export {
-  f as useFocusManagement
+  L as useCombobox
 };
 //# sourceMappingURL=index69.js.map

package/dist/index69.js.map

@@ -1 +1 @@
-{"version":3,"file":"index69.js","sources":["../src/utils/a11y/useFocusManagement.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { DependencyList } from 'react';\n\nexport interface UseFocusManagementOptions {\n  /**\n   * CSS selector to query the primary focus target.\n   * Default: 'h1'\n   */\n  targetSelector?: string;\n  /**\n   * Fallback element id if selector target is not found.\n   * Default: 'main-content'\n   */\n  fallbackId?: string;\n}\n\n/**\n * Generic focus management hook for route/state driven UI transitions.\n * Useful for both route changes and in-page multi-step wizards.\n * \n * Always skips first render and uses animation frame for safe DOM timing.\n */\nexport function useFocusManagement(\n  dependencies: DependencyList,\n  {\n    targetSelector = '#main-content h1',\n    fallbackId = 'main-content'\n  }: UseFocusManagementOptions = {}\n): void {\n  const isFirstRender = useRef(true);\n\n  useEffect(() => {\n    // Always skip first render\n    if (isFirstRender.current) {\n      isFirstRender.current = false;\n      return;\n    }\n\n    const focusTarget = () => {\n      const el = (document.querySelector(targetSelector) || document.getElementById(fallbackId)) as HTMLElement;\n      if (el) {\n        if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '-1');\n        el.focus();\n      }\n    };\n\n    // Always use animation frame for safe DOM timing\n    const rafId = requestAnimationFrame(focusTarget);\n    return () => cancelAnimationFrame(rafId);\n  }, dependencies);\n}\n"],"names":["useFocusManagement","dependencies","targetSelector","fallbackId","isFirstRender","useRef","useEffect","current","rafId","requestAnimationFrame","focusTarget","el","document","querySelector","getElementById","hasAttribute","setAttribute","focus","cancelAnimationFrame"],"mappings":";AAsBO,SAASA,EACdC,GACA;AAAA,EACEC,gBAAAA,IAAiB;AAAA,EACjBC,YAAAA,IAAa;AACY,IAAI,IACzB;AACN,QAAMC,IAAgBC,EAAO,EAAI;AAEjCC,EAAAA,EAAU,MAAM;AAEd,QAAIF,EAAcG,SAAS;AACzBH,MAAAA,EAAcG,UAAU;AACxB;AAAA,IACF;AAWA,UAAMC,IAAQC,sBATMC,MAAM;AACxB,YAAMC,IAAMC,SAASC,cAAcX,CAAc,KAAKU,SAASE,eAAeX,CAAU;AACxF,MAAIQ,MACGA,EAAGI,aAAa,UAAU,KAAGJ,EAAGK,aAAa,YAAY,IAAI,GAClEL,EAAGM,MAAAA;AAAAA,IAEP,CAG+C;AAC/C,WAAO,MAAMC,qBAAqBV,CAAK;AAAA,EACzC,GAAGP,CAAY;AACjB;"}
+{"version":3,"file":"index69.js","sources":["../src/utils/a11y/useCombobox.ts"],"sourcesContent":["import { useRef, useCallback, useEffect, useState } from 'react';\nimport type { RefObject } from 'react';\nimport { useComboboxNavigation } from './useComboboxNavigation';\nimport { useDismissOnFocusOut } from './useDismissOnFocusOut';\nimport type { UseDismissOnFocusOutReturn } from './useDismissOnFocusOut';\n\nexport interface UseComboboxOptions<T = any> {\n  /**\n   * Array of items to navigate through\n   */\n  items: T[];\n  \n  /**\n   * Whether the dropdown is currently open\n   */\n  isOpen: boolean;\n  \n  /**\n   * Callback to change the open state\n   */\n  onOpenChange: (open: boolean) => void;\n  \n  /**\n   * Callback when an item is selected (Enter key)\n   */\n  onSelect: (item: T, index: number) => void;\n  \n  /**\n   * Stable ID for the listbox element\n   */\n  listboxId: string;\n  \n  /**\n   * Whether to wrap around at the ends of the list.\n   * Default: true\n   */\n  loop?: boolean;\n  \n  /**\n   * Whether keyboard navigation is disabled\n   * (e.g., for custom rendered content)\n   */\n  disabled?: boolean;\n  \n  /**\n   * CSS selector for option elements (default: '[role=\"option\"]')\n   */\n  optionSelector?: string;\n  \n  /**\n   * Whether the listbox has any items to show\n   * Used for aria-expanded logic\n   * Default: items.length > 0\n   */\n  hasItems?: boolean;\n\n  /**\n   * Whether to keep the highlighted index after selecting an item.\n   * Useful for multi-select where the dropdown stays open after selection.\n   * Default: false\n   */\n  keepHighlightOnSelect?: boolean;\n\n  /**\n   * Whether Tab should close the dropdown.\n   * Set to false when Tab should move focus to elements within the popup (e.g. CTAs).\n   * Default: true\n   */\n  closeOnTab?: boolean;\n\n  /**\n   * Predicate to mark items as disabled. Disabled items are reachable via arrow keys\n   * (so screen readers can announce them) but Enter/Space selection is blocked.\n   */\n  isItemDisabled?: (item: T, index: number) => boolean;\n}\n\nexport interface UseComboboxReturn {\n  /**\n   * Props to spread on the container element (handles dismiss on focus out + keyboard focus tracking)\n   */\n  containerProps: UseDismissOnFocusOutReturn<HTMLElement> & {\n    onPointerMove: () => void;\n    onPointerDown: () => void;\n    onPointerUp: () => void;\n  };\n  \n  /**\n   * Props to spread on the combobox input element\n   */\n  inputProps: {\n    role: 'combobox';\n    'aria-expanded': boolean;\n    'aria-haspopup': 'listbox';\n    'aria-controls': string | undefined;\n    'aria-autocomplete': 'list';\n    'aria-activedescendant': string | undefined;\n    onKeyDown: (e: React.KeyboardEvent) => void;\n  };\n  \n  /**\n   * Props to spread on the listbox element\n   */\n  listboxProps: {\n    id: string;\n    role: 'listbox';\n    ref: RefObject<HTMLDivElement | null>;\n    onMouseDownCapture: (e: React.MouseEvent) => void;\n    onMouseUpCapture: (e: React.MouseEvent) => void;\n    onMouseLeave: (e: React.MouseEvent) => void;\n  };\n  \n  /**\n   * Generate props for an option element at the given index\n   * @param selected - Whether this option is the currently selected/chosen value (not keyboard highlight)\n   */\n  getOptionProps: (index: number, selected?: boolean) => {\n    id: string;\n    role: 'option';\n    'aria-selected'?: boolean;\n    'aria-disabled'?: true;\n  };\n  \n  /**\n   * Currently highlighted index (-1 if none)\n   */\n  highlightedIndex: number;\n  \n  /**\n   * Set the highlighted index manually\n   */\n  setHighlightedIndex: (index: number | ((prev: number) => number)) => void;\n  \n  /**\n   * Generate stable ID for an option\n   */\n  getOptionId: (listboxId: string, index: number) => string;\n\n  /**\n   * Whether the combobox input was focused via keyboard (Tab) rather than pointer.\n   * Use to conditionally show focus ring only on keyboard interaction.\n   */\n  isKeyboardFocused: boolean;\n}\n\n/**\n * Comprehensive hook for implementing WAI-ARIA combobox pattern.\n * \n * Combines:\n * - Keyboard navigation (Arrow Up/Down, Enter, Escape, Tab)\n * - Focus management and dismissal\n * - ARIA attributes for accessibility\n * - Auto-scroll highlighted item into view\n * \n * This hook provides a complete, batteries-included solution for building\n * accessible combobox components (autocomplete, select, search with suggestions, etc.)\n * \n * @example Basic usage\n * ```tsx\n * const MyCombobox = () => {\n *   const [isOpen, setIsOpen] = useState(false);\n *   const [items, setItems] = useState(['Apple', 'Banana', 'Cherry']);\n *   \n *   const {\n *     containerProps,\n *     inputProps,\n *     listboxProps,\n *     getOptionProps,\n *     highlightedIndex\n *   } = useCombobox({\n *     items,\n *     isOpen,\n *     onOpenChange: setIsOpen,\n *     onSelect: (item) => console.log('Selected:', item),\n *     listboxId: 'my-listbox'\n *   });\n *   \n *   return (\n *     <div {...containerProps}>\n *       <input {...inputProps} />\n *       {isOpen && (\n *         <div {...listboxProps}>\n *           {items.map((item, i) => (\n *             <div key={i} {...getOptionProps(i)}>\n *               {item}\n *             </div>\n *           ))}\n *         </div>\n *       )}\n *     </div>\n *   );\n * };\n * ```\n * \n * @example With custom ARIA labels and handlers\n * ```tsx\n * const MySearchBox = () => {\n *   const [query, setQuery] = useState('');\n *   const [suggestions, setSuggestions] = useState([]);\n *   const [isOpen, setIsOpen] = useState(false);\n *   \n *   const { containerProps, inputProps, listboxProps, getOptionProps } = useCombobox({\n *     items: suggestions,\n *     isOpen,\n *     onOpenChange: setIsOpen,\n *     onSelect: (suggestion) => {\n *       setQuery(suggestion);\n *       setIsOpen(false);\n *     },\n *     listboxId: 'search-suggestions'\n *   });\n *   \n *   return (\n *     <div {...containerProps}>\n *       <input\n *         {...inputProps}\n *         value={query}\n *         onChange={(e) => setQuery(e.target.value)}\n *         aria-label=\"Search\"\n *       />\n *       {isOpen && suggestions.length > 0 && (\n *         <div {...listboxProps} aria-label=\"Search suggestions\">\n *           {suggestions.map((suggestion, i) => (\n *             <div\n *               key={i}\n *               {...getOptionProps(i)}\n *               onClick={() => {\n *                 setQuery(suggestion);\n *                 setIsOpen(false);\n *               }}\n *             >\n *               {suggestion}\n *             </div>\n *           ))}\n *         </div>\n *       )}\n *     </div>\n *   );\n * };\n * ```\n */\nexport function useCombobox<T = any>({\n  items,\n  isOpen,\n  onOpenChange,\n  onSelect,\n  listboxId,\n  loop = true,\n  disabled = false,\n  optionSelector = '[role=\"option\"]',\n  hasItems,\n  keepHighlightOnSelect = false,\n  closeOnTab = true,\n  isItemDisabled\n}: UseComboboxOptions<T>): UseComboboxReturn {\n  const listboxRef = useRef<HTMLDivElement | null>(null);\n  const pointerDownInListboxRef = useRef(false);\n  const tabKeyPressedRef = useRef(false);\n  const pointerFocusRef = useRef(false);\n  const [isKeyboardFocused, setIsKeyboardFocused] = useState(false);\n  \n  // Determine if we should show as expanded\n  const shouldShowExpanded = hasItems !== undefined ? hasItems : items.length > 0;\n  \n  // Close dropdown callback\n  const closeDropdown = useCallback(() => {\n    onOpenChange(false);\n  }, [onOpenChange]);\n\n  // Ensure pointer state doesn't get stuck when listbox unmounts\n  useEffect(() => {\n    if (!isOpen) {\n      pointerDownInListboxRef.current = false;\n      pointerFocusRef.current = false;\n    }\n  }, [isOpen]);\n  \n  // Keyboard navigation with aria-activedescendant\n  const navigation = useComboboxNavigation<T>({\n    items,\n    isOpen,\n    onSelect,\n    onClose: closeDropdown,\n    onOpen: () => onOpenChange(true),\n    loop,\n    disabled,\n    listboxRef,\n    optionSelector,\n    keepHighlightOnSelect,\n    closeOnTab,\n    isItemDisabled\n  });\n  \n  // Focus out / Escape dismissal\n  const dismissHandlers = useDismissOnFocusOut({\n    onFocusOut: closeDropdown,\n    onEscape: closeDropdown,\n    disabled: !isOpen\n  });\n\n  const containerProps = {\n    ...dismissHandlers,\n    onPointerMove: () => {\n      if (isKeyboardFocused) {\n        setIsKeyboardFocused(false);\n      }\n    },\n    onPointerDown: () => {\n      pointerFocusRef.current = true;\n      setIsKeyboardFocused(false);\n    },\n    onPointerUp: () => {\n      // Don't reset pointerFocusRef here — timing races with programmatic focus\n      // (e.g. focus-on-open via double rAF) cause it to clear before onFocusCapture\n      // fires, incorrectly setting isKeyboardFocused=true.\n      // Instead, pointerFocusRef is reset only when keyboard navigation starts\n      // (Tab/Arrow in onKeyDownCapture), ensuring any programmatic focus after a\n      // click is always treated as pointer context.\n    },\n    onFocusCapture: (e: React.FocusEvent<HTMLElement>) => {\n      dismissHandlers.onFocusCapture(e);\n\n      if (pointerFocusRef.current) {\n        setIsKeyboardFocused(false);\n      } else {\n        setIsKeyboardFocused(true);\n      }\n    },\n    onKeyDownCapture: (e: React.KeyboardEvent<HTMLElement>) => {\n      dismissHandlers.onKeyDownCapture(e);\n\n      // Keyboard interaction starts — clear pointer context so subsequent\n      // focus events are correctly identified as keyboard-initiated.\n      if (e.key === 'Tab' || e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n        pointerFocusRef.current = false;\n      }\n\n      // Arrow keys mean keyboard navigation — show focus outline even if\n      // the combobox was opened with mouse (activedescendant doesn't move\n      // DOM focus, so onFocusCapture alone can't detect the switch).\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n        setIsKeyboardFocused(true);\n      }\n    },\n    onBlurCapture: (e: React.FocusEvent<HTMLElement>) => {\n      setIsKeyboardFocused(false);\n\n      // Clicking inside a listbox option can blur the input (relatedTarget is null),\n      // which would dismiss before the click handler runs. Prevent that.\n      if (pointerDownInListboxRef.current) return;\n\n      // Tab key pressed - let Tab handler close dropdown, skip blur detection\n      if (tabKeyPressedRef.current) {\n        tabKeyPressedRef.current = false;\n        return;\n      }\n\n      dismissHandlers.onBlurCapture(e);\n    }\n  };\n  \n  // Build input props\n  const inputProps = {\n    role: 'combobox' as const,\n    'aria-expanded': isOpen && shouldShowExpanded,\n    'aria-haspopup': 'listbox' as const,\n    'aria-controls': isOpen ? listboxId : undefined,\n    'aria-autocomplete': 'list' as const,\n    'aria-activedescendant': \n      navigation.highlightedIndex >= 0 \n        ? navigation.getOptionId(listboxId, navigation.highlightedIndex) \n        : undefined,\n    onKeyDown: (e: React.KeyboardEvent) => {\n      // Set flag when Tab is pressed (before blur fires)\n      if (e.key === 'Tab') {\n        tabKeyPressedRef.current = true;\n      }\n      navigation.handleKeyDown(e);\n    }\n  };\n  \n  // Build listbox props\n  const listboxProps = {\n    id: listboxId,\n    role: 'listbox' as const,\n    ref: listboxRef,\n    onMouseDownCapture: (_e: React.MouseEvent) => {\n      pointerDownInListboxRef.current = true;\n    },\n    onMouseUpCapture: (_e: React.MouseEvent) => {\n      pointerDownInListboxRef.current = false;\n    },\n    onMouseLeave: (_e: React.MouseEvent) => {\n      pointerDownInListboxRef.current = false;\n    }\n  };\n  \n  // Option props generator\n  const getOptionProps = useCallback(\n    (index: number, selected: boolean = false) => {\n      const disabled = isItemDisabled?.(items[index], index);\n      return {\n        id: navigation.getOptionId(listboxId, index),\n        role: 'option' as const,\n        ...(!disabled ? { 'aria-selected': selected } : {}),\n        ...(disabled ? { 'aria-disabled': true as const } : {})\n      };\n    },\n    [navigation.getOptionId, listboxId, isItemDisabled, items]\n  );\n  \n  return {\n    containerProps,\n    inputProps,\n    listboxProps,\n    getOptionProps,\n    highlightedIndex: navigation.highlightedIndex,\n    setHighlightedIndex: navigation.setHighlightedIndex,\n    getOptionId: navigation.getOptionId,\n    isKeyboardFocused\n  };\n}\n"],"names":["useRef","useState","useCallback","useEffect","useComboboxNavigation","useDismissOnFocusOut","useCombobox","items","isOpen","onOpenChange","onSelect","listboxId","loop","disabled","optionSelector","hasItems","keepHighlightOnSelect","closeOnTab","isItemDisabled","listboxRef","pointerDownInListboxRef","tabKeyPressedRef","pointerFocusRef","isKeyboardFocused","setIsKeyboardFocused","shouldShowExpanded","undefined","length","closeDropdown","current","navigation","onClose","onOpen","dismissHandlers","onFocusOut","onEscape","containerProps","onPointerMove","onPointerDown","onPointerUp","onFocusCapture","e","onKeyDownCapture","key","onBlurCapture","inputProps","role","highlightedIndex","getOptionId","onKeyDown","handleKeyDown","listboxProps","id","ref","onMouseDownCapture","_e","onMouseUpCapture","onMouseLeave","getOptionProps","index","selected","setHighlightedIndex"],"mappings":"AAiPO,SAAA,UAAAA,GAAA,YAAAC,GAAA,eAAAC,GAAA,aAAAC,SAAA;AAAA,SAAA,yBAAAC,SAAA;AAAA,SAAA,wBAAAC,SAAA;AAAA,SAASC,EAAqB;AAAA,EACnCC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,UAAAA,IAAW;AAAA,EACXC,gBAAAA,IAAiB;AAAA,EACjBC,UAAAA;AAAAA,EACAC,uBAAAA,IAAwB;AAAA,EACxBC,YAAAA,IAAa;AAAA,EACbC,gBAAAA;AACqB,GAAsB;AAC3C,QAAMC,IAAanB,EAA8B,IAAI,GAC/CoB,IAA0BpB,EAAO,EAAK,GACtCqB,IAAmBrB,EAAO,EAAK,GAC/BsB,IAAkBtB,EAAO,EAAK,GAC9B,CAACuB,GAAmBC,CAAoB,IAAIvB,EAAS,EAAK,GAG1DwB,IAAqBV,MAAaW,SAAYX,IAAWR,EAAMoB,SAAS,GAGxEC,IAAgB1B,EAAY,MAAM;AACtCO,IAAAA,EAAa,EAAK;AAAA,EACpB,GAAG,CAACA,CAAY,CAAC;AAGjBN,EAAAA,EAAU,MAAM;AACd,IAAKK,MACHY,EAAwBS,UAAU,IAClCP,EAAgBO,UAAU;AAAA,EAE9B,GAAG,CAACrB,CAAM,CAAC;AAGX,QAAMsB,IAAa1B,EAAyB;AAAA,IAC1CG,OAAAA;AAAAA,IACAC,QAAAA;AAAAA,IACAE,UAAAA;AAAAA,IACAqB,SAASH;AAAAA,IACTI,QAAQA,MAAMvB,EAAa,EAAI;AAAA,IAC/BG,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAM,YAAAA;AAAAA,IACAL,gBAAAA;AAAAA,IACAE,uBAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,gBAAAA;AAAAA,EAAAA,CACD,GAGKe,IAAkB5B,EAAqB;AAAA,IAC3C6B,YAAYN;AAAAA,IACZO,UAAUP;AAAAA,IACVf,UAAU,CAACL;AAAAA,EAAAA,CACZ,GAEK4B,IAAiB;AAAA,IACrB,GAAGH;AAAAA,IACHI,eAAeA,MAAM;AACnB,MAAId,KACFC,EAAqB,EAAK;AAAA,IAE9B;AAAA,IACAc,eAAeA,MAAM;AACnBhB,MAAAA,EAAgBO,UAAU,IAC1BL,EAAqB,EAAK;AAAA,IAC5B;AAAA,IACAe,aAAaA,MAAM;AAAA,IAMjB;AAAA,IAEFC,gBAAgBA,CAACC,MAAqC;AACpDR,MAAAA,EAAgBO,eAAeC,CAAC,GAE5BnB,EAAgBO,UAClBL,EAAqB,EAAK,IAE1BA,EAAqB,EAAI;AAAA,IAE7B;AAAA,IACAkB,kBAAkBA,CAACD,MAAwC;AACzDR,MAAAA,EAAgBS,iBAAiBD,CAAC,IAI9BA,EAAEE,QAAQ,SAASF,EAAEE,QAAQ,eAAeF,EAAEE,QAAQ,eACxDrB,EAAgBO,UAAU,MAMxBY,EAAEE,QAAQ,eAAeF,EAAEE,QAAQ,cACrCnB,EAAqB,EAAI;AAAA,IAE7B;AAAA,IACAoB,eAAeA,CAACH,MAAqC;AAKnD,UAJAjB,EAAqB,EAAK,GAItBJ,CAAAA,EAAwBS,SAG5B;AAAA,YAAIR,EAAiBQ,SAAS;AAC5BR,UAAAA,EAAiBQ,UAAU;AAC3B;AAAA,QACF;AAEAI,QAAAA,EAAgBW,cAAcH,CAAC;AAAA;AAAA,IACjC;AAAA,EAAA,GAIII,IAAa;AAAA,IACjBC,MAAM;AAAA,IACN,iBAAiBtC,KAAUiB;AAAAA,IAC3B,iBAAiB;AAAA,IACjB,iBAAiBjB,IAASG,IAAYe;AAAAA,IACtC,qBAAqB;AAAA,IACrB,yBACEI,EAAWiB,oBAAoB,IAC3BjB,EAAWkB,YAAYrC,GAAWmB,EAAWiB,gBAAgB,IAC7DrB;AAAAA,IACNuB,WAAWA,CAACR,MAA2B;AAErC,MAAIA,EAAEE,QAAQ,UACZtB,EAAiBQ,UAAU,KAE7BC,EAAWoB,cAAcT,CAAC;AAAA,IAC5B;AAAA,EAAA,GAIIU,IAAe;AAAA,IACnBC,IAAIzC;AAAAA,IACJmC,MAAM;AAAA,IACNO,KAAKlC;AAAAA,IACLmC,oBAAoBA,CAACC,MAAyB;AAC5CnC,MAAAA,EAAwBS,UAAU;AAAA,IACpC;AAAA,IACA2B,kBAAkBA,CAACD,MAAyB;AAC1CnC,MAAAA,EAAwBS,UAAU;AAAA,IACpC;AAAA,IACA4B,cAAcA,CAACF,MAAyB;AACtCnC,MAAAA,EAAwBS,UAAU;AAAA,IACpC;AAAA,EAAA,GAII6B,IAAiBxD,EACrB,CAACyD,GAAeC,IAAoB,OAAU;AAC5C,UAAM/C,IAAWK,IAAiBX,EAAMoD,CAAK,GAAGA,CAAK;AACrD,WAAO;AAAA,MACLP,IAAItB,EAAWkB,YAAYrC,GAAWgD,CAAK;AAAA,MAC3Cb,MAAM;AAAA,MACN,GAAKjC,IAA2C,CAAA,IAAhC;AAAA,QAAE,iBAAiB+C;AAAAA,MAAAA;AAAAA,MACnC,GAAI/C,IAAW;AAAA,QAAE,iBAAiB;AAAA,MAAA,IAAkB,CAAA;AAAA,IAAC;AAAA,EAEzD,GACA,CAACiB,EAAWkB,aAAarC,GAAWO,GAAgBX,CAAK,CAC3D;AAEA,SAAO;AAAA,IACL6B,gBAAAA;AAAAA,IACAS,YAAAA;AAAAA,IACAM,cAAAA;AAAAA,IACAO,gBAAAA;AAAAA,IACAX,kBAAkBjB,EAAWiB;AAAAA,IAC7Bc,qBAAqB/B,EAAW+B;AAAAA,IAChCb,aAAalB,EAAWkB;AAAAA,IACxBzB,mBAAAA;AAAAA,EAAAA;AAEJ;"}

package/dist/index7.js

@@ -1,6 +1,6 @@
 import c, { useState as h, useCallback as i } from "react";
-import "./index72.js";
-import { isElementVisible as p } from "./index205.js";
+import "./index73.js";
+import { isElementVisible as p } from "./index206.js";
 const x = ({
   skipLinks: n,
   className: r = ""

package/dist/index70.js

@@ -1,69 +1,22 @@
-import * as n from "react";
-import { getA11yNameAttributes as C } from "./index81.js";
-function M({
-  itemIds: r,
-  tabIndex: v = 0,
-  defaultFocusedId: u,
-  orientation: a = "horizontal",
-  cols: i,
-  loop: k = !0,
-  onFocusChange: f,
-  role: h
-}) {
-  const [c, b] = n.useState(u || r[0] || ""), g = n.useRef({});
-  n.useEffect(() => {
-    if (r.length > 0 && !r.includes(c)) {
-      const t = u || r[0] || "";
-      b(t);
+import { useRef as u, useEffect as i } from "react";
+function f(n, {
+  targetSelector: r = "#main-content h1",
+  fallbackId: c = "main-content"
+} = {}) {
+  const t = u(!0);
+  i(() => {
+    if (t.current) {
+      t.current = !1;
+      return;
     }
-  }, [r, c, u]);
-  const x = n.useCallback((t) => {
-    b((e) => e === t ? e : (f?.(t), t));
-  }, [f]), y = n.useCallback((t) => {
-    const e = g.current[t];
-    e ? e.focus() : (b(t), f?.(t));
-  }, [f]), p = n.useCallback((t, e = 1) => {
-    if (r.length === 0) return;
-    const o = r.indexOf(c), l = Math.max(0, o);
-    let s = l;
-    switch (t) {
-      case "first":
-        s = 0;
-        break;
-      case "last":
-        s = r.length - 1;
-        break;
-      case "prev":
-        k ? s = (l - e + r.length) % r.length : s = Math.max(0, l - e);
-        break;
-      case "next":
-        k ? s = (l + e) % r.length : s = Math.min(r.length - 1, l + e);
-        break;
-    }
-    const w = r[s];
-    w && g.current[w]?.focus();
-  }, [r, c, k]), A = n.useCallback((t) => ({
-    ref: (e) => {
-      g.current[t] = e;
-    },
-    tabIndex: c === t ? v : -1,
-    onFocus: () => x(t)
-  }), [c, v, x]), R = n.useCallback((t) => {
-    let e = null, o = 1;
-    t.key === "Home" ? e = "first" : t.key === "End" ? e = "last" : (a !== "vertical" && (t.key === "ArrowLeft" ? e = "prev" : t.key === "ArrowRight" && (e = "next")), !e && a !== "horizontal" && (t.key === "ArrowUp" ? e = "prev" : t.key === "ArrowDown" && (e = "next"), e && i && (o = i))), e && (t.preventDefault(), t.stopPropagation(), p(e, o));
-  }, [a, i, p]), z = n.useCallback((t) => {
-    const e = {};
-    return h && (e.role = h), a === "horizontal" ? e["aria-orientation"] = "horizontal" : a === "vertical" && (e["aria-orientation"] = "vertical"), t && Object.assign(e, C(t)), e;
-  }, [h, a]);
-  return {
-    setFocusedId: x,
-    focusItem: y,
-    handleKeyDown: R,
-    getRovingItemProps: A,
-    getContainerProps: z
-  };
+    const o = requestAnimationFrame(() => {
+      const e = document.querySelector(r) || document.getElementById(c);
+      e && (e.hasAttribute("tabindex") || e.setAttribute("tabindex", "-1"), e.focus());
+    });
+    return () => cancelAnimationFrame(o);
+  }, n);
 }
 export {
-  M as useRovingFocus
+  f as useFocusManagement
 };
 //# sourceMappingURL=index70.js.map

package/dist/index70.js.map

@@ -1 +1 @@
-{"version":3,"file":"index70.js","sources":["../src/utils/a11y/useRovingFocus.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { getA11yNameAttributes, AccessibleNameInput } from './accessibleName';\nexport type { AccessibleNameInput };\n\nexport type RovingDirection = 'prev' | 'next' | 'first' | 'last';\n\nexport interface UseRovingFocusOptions {\n  /**\n   * Array of item IDs in order\n   */\n  itemIds: string[];\n\n  /**\n   * The tabIndex to apply to the currently focused item in the roving group.\n   * Defaults to 0 \n   */\n  tabIndex?: number;\n\n  /**\n   * Initial focused item ID. Defaults to first item.\n   */\n  defaultFocusedId?: string;\n\n  /**\n   * Orientation for arrow key mapping.\n   * - horizontal: ArrowLeft/ArrowRight\n   * - vertical: ArrowUp/ArrowDown\n   * - grid: all four arrow keys (Left/Right move by 1, Up/Down move by `cols`)\n   */\n  orientation?: 'horizontal' | 'vertical' | 'grid';\n\n  /**\n   * Number of columns in the grid. Required when orientation is 'grid'.\n   * ArrowUp/ArrowDown navigate by this many items in the flat itemIds array.\n   */\n  cols?: number;\n\n  /**\n   * Whether navigation wraps around at ends. Defaults to true.\n   */\n  loop?: boolean;\n\n  /**\n   * Callback when focus changes\n   */\n  onFocusChange?: (id: string) => void;\n\n  /**\n   * ARIA role for the container element (e.g. 'grid', 'menu', 'tablist', 'toolbar').\n   * Returned via getContainerProps().\n   */\n  role?: React.AriaRole;\n}\n\nexport interface RovingItemProps {\n  ref: (el: HTMLElement | null) => void;\n  tabIndex: number;\n  onFocus: () => void;\n}\n\nexport interface RovingContainerProps {\n  role?: React.AriaRole;\n  'aria-orientation'?: 'horizontal' | 'vertical';\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n}\n\nexport interface UseRovingFocusReturn {\n  /**\n   * Set focused item ID manually\n   */\n  setFocusedId: (id: string) => void;\n\n  /**\n   * Imperatively focus a DOM element by id.\n   * If the element exists in refs, focus it immediately.\n   * If not yet in DOM, update state so it gets focus once rendered.\n   */\n  focusItem: (id: string) => void;\n\n  /**\n   * Keyboard handler for arrow/Home/End navigation.\n   * Attach to each item's onKeyDown.\n   */\n  handleKeyDown: (e: React.KeyboardEvent) => void;\n\n  /**\n   * Get props for an item in the roving focus group (ref + tabIndex)\n   */\n  getRovingItemProps: (id: string) => RovingItemProps;\n\n  /**\n   * Props to spread on the container element.\n   * Returns role (if provided), aria-orientation (derived from orientation; omitted for grid),\n   * and any accessible name/description attributes passed in.\n   */\n  getContainerProps: (nameInput?: AccessibleNameInput) => RovingContainerProps;\n}\n\n/**\n * Hook for managing roving focus pattern (roving tabindex).\n * Reusable for composite widgets: tabs, toolbars, menus, listboxes, radio groups, grids.\n *\n * @example\n * // 1D (toolbar/tabs):\n * const { getRovingItemProps, handleKeyDown } = useRovingFocus({\n *   itemIds: ['tab1', 'tab2', 'tab3'],\n *   orientation: 'horizontal'\n * });\n *\n * // 2D (grid — flat itemIds, cols for row-jump math):\n * const { getRovingItemProps, handleKeyDown } = useRovingFocus({\n *   itemIds: ['r0c0', 'r0c1', 'r0c2', 'r1c0', 'r1c1', 'r1c2'],\n *   orientation: 'grid',\n *   cols: 3\n * });\n *\n * // In render:\n * <button {...getRovingItemProps('tab1')} onKeyDown={handleKeyDown}>Tab 1</button>\n */\nexport function useRovingFocus({\n  itemIds,\n  tabIndex = 0,\n  defaultFocusedId,\n  orientation = 'horizontal',\n  cols,\n  loop = true,\n  onFocusChange,\n  role\n}: UseRovingFocusOptions): UseRovingFocusReturn {\n  const [focusedId, setFocusedIdState] = React.useState<string>(\n    defaultFocusedId || itemIds[0] || ''\n  );\n\n  const itemRefs = React.useRef<Record<string, HTMLElement | null>>({});\n\n  // Sync focusedId if itemIds change and current focusedId is no longer valid\n  React.useEffect(() => {\n    if (itemIds.length > 0 && !itemIds.includes(focusedId)) {\n      const newFocusedId = defaultFocusedId || itemIds[0] || '';\n      setFocusedIdState(newFocusedId);\n    }\n  }, [itemIds, focusedId, defaultFocusedId]);\n\n  const setFocusedId = React.useCallback(\n    (id: string) => {\n      setFocusedIdState((prev) => {\n        if (prev === id) return prev;\n        onFocusChange?.(id);\n        return id;\n      });\n    },\n    [onFocusChange]\n  );\n\n  const focusItem = React.useCallback(\n    (id: string) => {\n      const el = itemRefs.current[id];\n      if (el) {\n        el.focus();\n      } else {\n        // element not yet in DOM (e.g. month just changed) — update state so it gets focus once rendered\n        setFocusedIdState(id);\n        onFocusChange?.(id);\n      }\n    },\n    [onFocusChange]\n  );\n\n  const moveFocus = React.useCallback(\n    (direction: RovingDirection, step: number = 1) => {\n      if (itemIds.length === 0) return;\n\n      const currentIdx = itemIds.indexOf(focusedId);\n      const safeIdx = Math.max(0, currentIdx);\n      let nextIdx = safeIdx;\n\n      switch (direction) {\n        case 'first':\n          nextIdx = 0;\n          break;\n        case 'last':\n          nextIdx = itemIds.length - 1;\n          break;\n        case 'prev':\n          if (loop) {\n            nextIdx = (safeIdx - step + itemIds.length) % itemIds.length;\n          } else {\n            nextIdx = Math.max(0, safeIdx - step);\n          }\n          break;\n        case 'next':\n          if (loop) {\n            nextIdx = (safeIdx + step) % itemIds.length;\n          } else {\n            nextIdx = Math.min(itemIds.length - 1, safeIdx + step);\n          }\n          break;\n      }\n\n      const nextId = itemIds[nextIdx];\n      if (!nextId) return;\n\n      itemRefs.current[nextId]?.focus();\n    },\n    [itemIds, focusedId, loop]\n  );\n\n  const getRovingItemProps = React.useCallback(\n    (id: string): RovingItemProps => ({\n      ref: (el: HTMLElement | null) => {\n        itemRefs.current[id] = el;\n      },\n      tabIndex: focusedId === id ? tabIndex : -1,\n      onFocus: () => setFocusedId(id)\n    }),\n    [focusedId, tabIndex, setFocusedId]\n  );\n\n  // Keyboard handler for arrow/Home/End navigation\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      let direction: RovingDirection | null = null;\n      let step = 1;\n\n      if (e.key === 'Home') {\n        direction = 'first';\n      } else if (e.key === 'End') {\n        direction = 'last';\n      } else {\n        // Horizontal axis (Left/Right) — active for 'horizontal' and 'grid'\n        if (orientation !== 'vertical') {\n          if (e.key === 'ArrowLeft') direction = 'prev';\n          else if (e.key === 'ArrowRight') direction = 'next';\n        }\n        // Vertical axis (Up/Down) — active for 'vertical' and 'grid'\n        if (!direction && orientation !== 'horizontal') {\n          if (e.key === 'ArrowUp') direction = 'prev';\n          else if (e.key === 'ArrowDown') direction = 'next';\n          if (direction && cols) step = cols;\n        }\n      }\n\n      if (direction) {\n        e.preventDefault();\n        e.stopPropagation();\n        moveFocus(direction, step);\n      }\n    },\n    [orientation, cols, moveFocus]\n  );\n\n  const getContainerProps = React.useCallback((nameInput?: AccessibleNameInput): RovingContainerProps => {\n    const props: RovingContainerProps = {};\n    if (role) props.role = role;\n    if (orientation === 'horizontal') props['aria-orientation'] = 'horizontal';\n    else if (orientation === 'vertical') props['aria-orientation'] = 'vertical';\n    // grid: aria-orientation omitted — not applicable for role=\"grid\"\n    if (nameInput) Object.assign(props, getA11yNameAttributes(nameInput));\n    return props;\n  }, [role, orientation]);\n\n  return {\n    setFocusedId,\n    focusItem,\n    handleKeyDown,\n    getRovingItemProps,\n    getContainerProps\n  };\n}\n"],"names":["React","getA11yNameAttributes","useRovingFocus","itemIds","tabIndex","defaultFocusedId","orientation","cols","loop","onFocusChange","role","focusedId","setFocusedIdState","useState","itemRefs","useRef","useEffect","length","includes","newFocusedId","setFocusedId","useCallback","id","prev","focusItem","el","current","focus","moveFocus","direction","step","currentIdx","indexOf","safeIdx","Math","max","nextIdx","min","nextId","getRovingItemProps","ref","onFocus","handleKeyDown","e","key","preventDefault","stopPropagation","getContainerProps","nameInput","props","Object","assign"],"mappings":"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"}
+{"version":3,"file":"index70.js","sources":["../src/utils/a11y/useFocusManagement.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { DependencyList } from 'react';\n\nexport interface UseFocusManagementOptions {\n  /**\n   * CSS selector to query the primary focus target.\n   * Default: 'h1'\n   */\n  targetSelector?: string;\n  /**\n   * Fallback element id if selector target is not found.\n   * Default: 'main-content'\n   */\n  fallbackId?: string;\n}\n\n/**\n * Generic focus management hook for route/state driven UI transitions.\n * Useful for both route changes and in-page multi-step wizards.\n * \n * Always skips first render and uses animation frame for safe DOM timing.\n */\nexport function useFocusManagement(\n  dependencies: DependencyList,\n  {\n    targetSelector = '#main-content h1',\n    fallbackId = 'main-content'\n  }: UseFocusManagementOptions = {}\n): void {\n  const isFirstRender = useRef(true);\n\n  useEffect(() => {\n    // Always skip first render\n    if (isFirstRender.current) {\n      isFirstRender.current = false;\n      return;\n    }\n\n    const focusTarget = () => {\n      const el = (document.querySelector(targetSelector) || document.getElementById(fallbackId)) as HTMLElement;\n      if (el) {\n        if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '-1');\n        el.focus();\n      }\n    };\n\n    // Always use animation frame for safe DOM timing\n    const rafId = requestAnimationFrame(focusTarget);\n    return () => cancelAnimationFrame(rafId);\n  }, dependencies);\n}\n"],"names":["useFocusManagement","dependencies","targetSelector","fallbackId","isFirstRender","useRef","useEffect","current","rafId","requestAnimationFrame","focusTarget","el","document","querySelector","getElementById","hasAttribute","setAttribute","focus","cancelAnimationFrame"],"mappings":";AAsBO,SAASA,EACdC,GACA;AAAA,EACEC,gBAAAA,IAAiB;AAAA,EACjBC,YAAAA,IAAa;AACY,IAAI,IACzB;AACN,QAAMC,IAAgBC,EAAO,EAAI;AAEjCC,EAAAA,EAAU,MAAM;AAEd,QAAIF,EAAcG,SAAS;AACzBH,MAAAA,EAAcG,UAAU;AACxB;AAAA,IACF;AAWA,UAAMC,IAAQC,sBATMC,MAAM;AACxB,YAAMC,IAAMC,SAASC,cAAcX,CAAc,KAAKU,SAASE,eAAeX,CAAU;AACxF,MAAIQ,MACGA,EAAGI,aAAa,UAAU,KAAGJ,EAAGK,aAAa,YAAY,IAAI,GAClEL,EAAGM,MAAAA;AAAAA,IAEP,CAG+C;AAC/C,WAAO,MAAMC,qBAAqBV,CAAK;AAAA,EACzC,GAAGP,CAAY;AACjB;"}