se-design 1.0.71 → 1.0.73-dev1

package/dist/index22.js

@@ -1,68 +1,68 @@
-import s, { useState as S, useEffect as _ } from "react";
-import { useStableId as $ } from "./index189.js";
-import { getA11yNameAttributes as j } from "./index70.js";
-import { mergeIds as B } from "./index190.js";
+import s, { useState as O, useEffect as S } from "react";
+import { useStableId as _ } from "./index190.js";
+import { getA11yNameAttributes as j } from "./index71.js";
+import { mergeIds as B } from "./index191.js";
 /* empty css         */
-function d() {
-  return d = Object.assign ? Object.assign.bind() : function(l) {
+function h() {
+  return h = Object.assign ? Object.assign.bind() : function(u) {
     for (var c = 1; c < arguments.length; c++) {
       var r = arguments[c];
-      for (var e in r) ({}).hasOwnProperty.call(r, e) && (l[e] = r[e]);
+      for (var e in r) ({}).hasOwnProperty.call(r, e) && (u[e] = r[e]);
     }
-    return l;
-  }, d.apply(null, arguments);
+    return u;
+  }, h.apply(null, arguments);
 }
 const z = ({
-  className: l = "",
+  className: u = "",
   automationId: c = "",
   defaultChecked: r = !1,
   checked: e,
   disabled: n = !1,
-  onChange: h,
+  onChange: x,
   checkMarkType: i = "",
-  label: x = "",
+  label: l = "",
   disabledLabel: g = "",
   containerAutomationId: v = "",
   ariaLabel: E,
   ariaLabelledBy: y,
   ariaDescribedBy: C
 }) => {
-  const o = e !== void 0, [t, u] = S(o ? e : r);
-  _(() => {
-    u(o ? e : r);
+  const o = e !== void 0, [t, m] = O(o ? e : r);
+  S(() => {
+    m(o ? e : r);
   }, [e, r]);
   const N = (a) => {
-    n || (o || u((m) => !m), h?.(o ? !e : !t, a));
+    n || (o || m((b) => !b), x?.(o ? !e : !t, a));
   }, I = (a) => {
     if (!n && (a.key === "Enter" || a.key === " ")) {
       a.preventDefault(), a.stopPropagation();
-      const m = o ? !e : !t;
-      o || u(m);
-      const f = a.currentTarget.closest("label")?.querySelector("input");
-      f && h?.(m, {
-        target: f,
-        currentTarget: f
+      const b = o ? !e : !t;
+      o || m(b);
+      const d = a.currentTarget.closest("label")?.querySelector("input");
+      d && x?.(b, {
+        target: d,
+        currentTarget: d
       });
     }
-  }, w = () => n ? t && i === "tick" ? "disabled-tick" : t && i === "minus-checkbox" ? "disabled-minus-checkbox" : t && !i ? "disabled-tick" : "disabled-default" : i === "minus-checkbox" && t ? "minus-checkbox" : t ? "checked" : "unchecked", A = () => n ? "checkbox-label-disabled" : "checkbox-label", k = () => n && g ? g : x, b = $(void 0, "checkbox-input"), p = x ? `${b}-label` : void 0, D = j({
+  }, w = () => n ? t && i === "tick" ? "disabled-tick" : t && i === "minus-checkbox" ? "disabled-minus-checkbox" : t && !i ? "disabled-tick" : "disabled-default" : i === "minus-checkbox" && t ? "minus-checkbox" : t ? "checked" : "unchecked", A = () => n ? "checkbox-label-disabled" : "checkbox-label", k = () => n && g ? g : l, f = _(void 0, "checkbox-input"), p = l ? `${f}-label` : void 0, $ = j({
     ariaLabelledBy: B(p, y),
     ariaLabel: E,
     ariaDescribedBy: C
-  }), O = () => i === "minus-checkbox" && t ? "mixed" : t ? "true" : "false";
+  }), D = () => i === "minus-checkbox" && t ? "mixed" : t ? "true" : "false";
   return /* @__PURE__ */ s.createElement("div", {
     className: "se-design-checkbox-ctn"
-  }, /* @__PURE__ */ s.createElement("label", d({
+  }, /* @__PURE__ */ s.createElement("label", h({
     role: "checkbox",
-    htmlFor: b,
-    className: `se-design-checkbox ${l} ${w()}`,
+    htmlFor: f,
+    className: `se-design-checkbox ${u} ${w()}`,
     "data-automation-id": v || "checkbox-container",
     tabIndex: n ? -1 : 0,
-    "aria-checked": O(),
+    "aria-checked": D(),
     "aria-disabled": n ? "true" : "false"
-  }, D, {
+  }, $, {
     onKeyDown: I
   }), /* @__PURE__ */ s.createElement("input", {
-    id: b,
+    id: f,
     type: "checkbox",
     checked: t,
     onChange: N,
@@ -74,7 +74,7 @@ const z = ({
   }), k()?.length > 0 && /* @__PURE__ */ s.createElement("span", {
     id: p,
     className: A(),
-    "data-automation-id": "checkbox-label"
+    "data-automation-id": c || (l ? `checkbox-label-${l}` : "checkbox-label")
   }, k())));
 };
 export {

package/dist/index22.js.map

@@ -1 +1 @@
-{"version":3,"file":"index22.js","sources":["../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect } from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport { mergeIds } from '../../utils/mergeIds';\nimport './style.scss';\n\nexport interface CheckboxProps {\n  className?: string;\n  automationId?: string;\n  defaultChecked?: boolean;\n  /**\n   * Controlled checked value. When provided, the checkbox is controlled by the parent\n   * and its visual state always reflects this prop. Use `onChange` to update the parent state.\n   */\n  checked?: boolean;\n  onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;\n  disabled?: boolean;\n  checkMarkType?: 'tick' | 'minus-checkbox' | '';\n  label?: string;\n  disabledLabel?: string;\n  containerAutomationId?: string;\n  /**\n   * Explicit accessible name for the checkbox.\n   * Used as fallback when ariaLabelledBy is not provided and no internal label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this checkbox (for screen reader association).\n   * Typically used when checkbox is part of a larger labelled context.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this checkbox (provides additional context).\n   * Often used for help text or instructions.\n   */\n  ariaDescribedBy?: string;\n}\n\nexport const Checkbox: FC<CheckboxProps> = ({\n  className = '',\n  automationId = '',\n  defaultChecked = false,\n  checked,\n  disabled = false,\n  onChange,\n  checkMarkType = '',\n  label = '',\n  disabledLabel = '',\n  containerAutomationId = '',\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy\n}) => {\n  const isControlled = checked !== undefined;\n  const [isChecked, setIsChecked] = useState(isControlled ? checked : defaultChecked);\n\n  useEffect(() => {\n    if (isControlled) {\n      setIsChecked(checked!);\n    } else {\n      setIsChecked(defaultChecked);\n    }\n  }, [checked, defaultChecked]);\n\n  const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n    if (!isControlled) {\n      setIsChecked((prev) => !prev);\n    }\n    onChange?.(isControlled ? !checked : !isChecked, e);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLLabelElement | HTMLSpanElement>) => {\n    if (disabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      e.stopPropagation();\n      const newChecked = isControlled ? !checked : !isChecked;\n      if (!isControlled) {\n        setIsChecked(newChecked);\n      }\n\n      // Create a proper synthetic event for the onChange callback\n      const inputElement = e.currentTarget.closest('label')?.querySelector('input');\n      if (inputElement) {\n        const syntheticEvent = {\n          target: inputElement,\n          currentTarget: inputElement,\n        } as React.ChangeEvent<HTMLInputElement>;\n        onChange?.(newChecked, syntheticEvent);\n      }\n    }\n  };\n\n  const getCheckBoxClassName = () => {\n    // Handle disabled states with proper checked status\n    if (disabled) {\n      if (isChecked && checkMarkType === 'tick') return 'disabled-tick';\n      if (isChecked && checkMarkType === 'minus-checkbox') return 'disabled-minus-checkbox';\n      if (isChecked && !checkMarkType) return 'disabled-tick'; // Default to tick for checked disabled\n      return 'disabled-default'; // Unchecked disabled\n    }\n\n    // Handle enabled states\n    if (checkMarkType === 'minus-checkbox' && isChecked) return 'minus-checkbox';\n    return isChecked ? 'checked' : 'unchecked';\n  };\n\n  const getLabelClassName = () => {\n    return disabled ? 'checkbox-label-disabled' : 'checkbox-label';\n  };\n\n  const getLabelText = () => {\n    if (disabled && disabledLabel) {\n      return disabledLabel;\n    }\n    return label;\n  };\n  \n  // Generate stable IDs (persists across renders)\n  const inputId = useStableId(undefined, 'checkbox-input');\n  const labelId = label ? `${inputId}-label` : undefined;\n\n  const a11yNameAttributes = getA11yNameAttributes({\n    ariaLabelledBy: mergeIds(labelId, ariaLabelledBy),\n    ariaLabel,\n    ariaDescribedBy\n  });\n\n  // Determine aria-checked value: \"mixed\" for indeterminate, \"true\" for checked, \"false\" for unchecked\n  const getAriaChecked = () => {\n    if (checkMarkType === 'minus-checkbox' && isChecked) {\n      return 'mixed'; // Indeterminate/half-checked state\n    }\n    return isChecked ? 'true' : 'false';\n  };\n\n  return (\n    <div className=\"se-design-checkbox-ctn\">\n      <label\n        role=\"checkbox\"\n        htmlFor={inputId}\n        className={`se-design-checkbox ${className} ${getCheckBoxClassName()}`}\n        data-automation-id={containerAutomationId || 'checkbox-container'}\n        tabIndex={disabled ? -1 : 0}\n        aria-checked={getAriaChecked()}\n        aria-disabled={disabled ? 'true' : 'false'}\n        {...a11yNameAttributes}\n        onKeyDown={handleKeyDown}\n      >\n        <input\n          id={inputId}\n          type=\"checkbox\"\n          checked={isChecked}\n          onChange={handleClick}\n          disabled={disabled}\n          aria-hidden=\"true\"\n        />\n        <span className=\"checkbox-item\" data-automation-id={automationId}></span>\n        {getLabelText()?.length > 0 && (\n          <span id={labelId} className={getLabelClassName()} data-automation-id=\"checkbox-label\">\n            {getLabelText()}\n          </span>\n        )}\n      </label>\n    </div>\n  );\n};\n"],"names":["Checkbox","className","automationId","defaultChecked","checked","disabled","onChange","checkMarkType","label","disabledLabel","containerAutomationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","isControlled","undefined","isChecked","setIsChecked","useState","useEffect","handleClick","e","prev","handleKeyDown","key","preventDefault","stopPropagation","newChecked","inputElement","currentTarget","closest","querySelector","target","getCheckBoxClassName","getLabelClassName","getLabelText","inputId","useStableId","labelId","a11yNameAttributes","getA11yNameAttributes","mergeIds","getAriaChecked","React","createElement","_extends","role","htmlFor","tabIndex","onKeyDown","id","type","length"],"mappings":"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"}
+{"version":3,"file":"index22.js","sources":["../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect } from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport { mergeIds } from '../../utils/mergeIds';\nimport './style.scss';\n\nexport interface CheckboxProps {\n  className?: string;\n  automationId?: string;\n  defaultChecked?: boolean;\n  /**\n   * Controlled checked value. When provided, the checkbox is controlled by the parent\n   * and its visual state always reflects this prop. Use `onChange` to update the parent state.\n   */\n  checked?: boolean;\n  onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;\n  disabled?: boolean;\n  checkMarkType?: 'tick' | 'minus-checkbox' | '';\n  label?: string;\n  disabledLabel?: string;\n  containerAutomationId?: string;\n  /**\n   * Explicit accessible name for the checkbox.\n   * Used as fallback when ariaLabelledBy is not provided and no internal label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this checkbox (for screen reader association).\n   * Typically used when checkbox is part of a larger labelled context.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this checkbox (provides additional context).\n   * Often used for help text or instructions.\n   */\n  ariaDescribedBy?: string;\n}\n\nexport const Checkbox: FC<CheckboxProps> = ({\n  className = '',\n  automationId = '',\n  defaultChecked = false,\n  checked,\n  disabled = false,\n  onChange,\n  checkMarkType = '',\n  label = '',\n  disabledLabel = '',\n  containerAutomationId = '',\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy\n}) => {\n  const isControlled = checked !== undefined;\n  const [isChecked, setIsChecked] = useState(isControlled ? checked : defaultChecked);\n\n  useEffect(() => {\n    if (isControlled) {\n      setIsChecked(checked!);\n    } else {\n      setIsChecked(defaultChecked);\n    }\n  }, [checked, defaultChecked]);\n\n  const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n    if (!isControlled) {\n      setIsChecked((prev) => !prev);\n    }\n    onChange?.(isControlled ? !checked : !isChecked, e);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLLabelElement | HTMLSpanElement>) => {\n    if (disabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      e.stopPropagation();\n      const newChecked = isControlled ? !checked : !isChecked;\n      if (!isControlled) {\n        setIsChecked(newChecked);\n      }\n\n      // Create a proper synthetic event for the onChange callback\n      const inputElement = e.currentTarget.closest('label')?.querySelector('input');\n      if (inputElement) {\n        const syntheticEvent = {\n          target: inputElement,\n          currentTarget: inputElement\n        } as React.ChangeEvent<HTMLInputElement>;\n        onChange?.(newChecked, syntheticEvent);\n      }\n    }\n  };\n\n  const getCheckBoxClassName = () => {\n    // Handle disabled states with proper checked status\n    if (disabled) {\n      if (isChecked && checkMarkType === 'tick') return 'disabled-tick';\n      if (isChecked && checkMarkType === 'minus-checkbox') return 'disabled-minus-checkbox';\n      if (isChecked && !checkMarkType) return 'disabled-tick'; // Default to tick for checked disabled\n      return 'disabled-default'; // Unchecked disabled\n    }\n\n    // Handle enabled states\n    if (checkMarkType === 'minus-checkbox' && isChecked) return 'minus-checkbox';\n    return isChecked ? 'checked' : 'unchecked';\n  };\n\n  const getLabelClassName = () => {\n    return disabled ? 'checkbox-label-disabled' : 'checkbox-label';\n  };\n\n  const getLabelText = () => {\n    if (disabled && disabledLabel) {\n      return disabledLabel;\n    }\n    return label;\n  };\n\n  // Generate stable IDs (persists across renders)\n  const inputId = useStableId(undefined, 'checkbox-input');\n  const labelId = label ? `${inputId}-label` : undefined;\n\n  const a11yNameAttributes = getA11yNameAttributes({\n    ariaLabelledBy: mergeIds(labelId, ariaLabelledBy),\n    ariaLabel,\n    ariaDescribedBy\n  });\n\n  // Determine aria-checked value: \"mixed\" for indeterminate, \"true\" for checked, \"false\" for unchecked\n  const getAriaChecked = () => {\n    if (checkMarkType === 'minus-checkbox' && isChecked) {\n      return 'mixed'; // Indeterminate/half-checked state\n    }\n    return isChecked ? 'true' : 'false';\n  };\n\n  return (\n    <div className=\"se-design-checkbox-ctn\">\n      <label\n        role=\"checkbox\"\n        htmlFor={inputId}\n        className={`se-design-checkbox ${className} ${getCheckBoxClassName()}`}\n        data-automation-id={containerAutomationId || 'checkbox-container'}\n        tabIndex={disabled ? -1 : 0}\n        aria-checked={getAriaChecked()}\n        aria-disabled={disabled ? 'true' : 'false'}\n        {...a11yNameAttributes}\n        onKeyDown={handleKeyDown}\n      >\n        <input\n          id={inputId}\n          type=\"checkbox\"\n          checked={isChecked}\n          onChange={handleClick}\n          disabled={disabled}\n          aria-hidden=\"true\"\n        />\n        <span className=\"checkbox-item\" data-automation-id={automationId}></span>\n        {getLabelText()?.length > 0 && (\n          <span\n            id={labelId}\n            className={getLabelClassName()}\n            data-automation-id={automationId || (label ? `checkbox-label-${label}` : 'checkbox-label')}\n          >\n            {getLabelText()}\n          </span>\n        )}\n      </label>\n    </div>\n  );\n};\n"],"names":["Checkbox","className","automationId","defaultChecked","checked","disabled","onChange","checkMarkType","label","disabledLabel","containerAutomationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","isControlled","undefined","isChecked","setIsChecked","useState","useEffect","handleClick","e","prev","handleKeyDown","key","preventDefault","stopPropagation","newChecked","inputElement","currentTarget","closest","querySelector","target","getCheckBoxClassName","getLabelClassName","getLabelText","inputId","useStableId","labelId","a11yNameAttributes","getA11yNameAttributes","mergeIds","getAriaChecked","React","createElement","_extends","role","htmlFor","tabIndex","onKeyDown","id","type","length"],"mappings":"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"}

package/dist/index228.js

@@ -1,5 +1,5 @@
 import { useRef as E, useLayoutEffect as f } from "react";
-import { getFirstFocusableElement as d, getFocusableElements as g } from "./index235.js";
+import { getFirstFocusableElement as d, getFocusableElements as g } from "./index229.js";
 function y(e, t) {
   return t === "first" ? d({
     container: e

package/dist/index229.js

@@ -1,57 +1,25 @@
-import { useState as m, useEffect as w, useCallback as b } from "react";
-import { useScrollActiveIntoView as x } from "./index236.js";
-function E({
-  items: u,
-  isOpen: t,
-  onSelect: o,
-  onClose: c,
-  onOpen: l,
-  loop: i = !0,
-  disabled: h = !1,
-  listboxRef: k,
-  optionSelector: g = '[role="option"]'
+const l = ["button:not([disabled])", "[href]", "input:not([disabled])", "select:not([disabled])", "textarea:not([disabled])", '[tabindex]:not([tabindex="-1"]):not([disabled])', '[contenteditable="true"]'].join(", "), a = [l, '[role="menuitem"]', '[role="option"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'].join(", ");
+function u({
+  container: e,
+  includeRoles: t = !1,
+  additionalSelectors: r = [],
+  filterHidden: s = !1
 }) {
-  const [f, a] = m(-1);
-  w(() => {
-    t || a(-1);
-  }, [t]), x({
-    containerRef: k,
-    activeIndex: f,
-    itemSelector: g,
-    enabled: t
-  });
-  const D = b((r) => {
-    if (h) {
-      r.key === "Escape" && t && (r.preventDefault(), c());
-      return;
-    }
-    const e = u.length;
-    switch (r.key) {
-      case "ArrowDown":
-        r.preventDefault(), !t && e > 0 ? (l?.(), a(0)) : t && e > 0 && a((n) => i ? (n + 1) % e : Math.min(n + 1, e - 1));
-        break;
-      case "ArrowUp":
-        r.preventDefault(), t && e > 0 && a((n) => n === -1 ? e - 1 : i ? (n - 1 + e) % e : Math.max(n - 1, 0));
-        break;
-      case "Enter":
-        t && f >= 0 && u[f] && (r.preventDefault(), o(u[f], f), a(-1));
-        break;
-      case "Escape":
-        t && (r.preventDefault(), c(), a(-1));
-        break;
-      case "Tab":
-        t && (c(), a(-1));
-        break;
-    }
-  }, [h, u, t, f, o, c, l, i]), d = b((r, e) => `${r}-option-${e}`, []);
-  return {
-    highlightedIndex: f,
-    setHighlightedIndex: a,
-    handleKeyDown: D,
-    getOptionId: d
-  };
+  if (!e) return [];
+  const d = [t ? a : l, ...r].filter(Boolean).join(", "), i = Array.from(e.querySelectorAll(d));
+  return s ? i.filter((n) => {
+    const o = window.getComputedStyle(n);
+    return o.display !== "none" && o.visibility !== "hidden" && o.opacity !== "0" && !n.hasAttribute("hidden") && n.offsetWidth > 0 && n.offsetHeight > 0;
+  }) : i;
+}
+function c(e) {
+  const t = u(e);
+  return t.length > 0 ? t[0] : null;
 }
 export {
-  E as useComboboxNavigation
+  l as FOCUSABLE_SELECTOR,
+  a as FOCUSABLE_WITH_ROLES_SELECTOR,
+  c as getFirstFocusableElement,
+  u as getFocusableElements
 };
 //# sourceMappingURL=index229.js.map

package/dist/index229.js.map

@@ -1 +1 @@
-{"version":3,"file":"index229.js","sources":["../src/utils/a11y/useComboboxNavigation.ts"],"sourcesContent":["import { useCallback, useState, useEffect } from 'react';\nimport type { RefObject } from 'react';\nimport { useScrollActiveIntoView } from './useScrollActiveIntoView';\n\nexport interface UseComboboxNavigationOptions<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 when an item is selected (Enter key)\n   */\n  onSelect: (item: T, index: number) => void;\n  \n  /**\n   * Callback to close the dropdown\n   */\n  onClose: () => void;\n  \n  /**\n   * Optional: Callback to open the dropdown\n   */\n  onOpen?: () => void;\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   * Ref to the listbox container for scroll management\n   */\n  listboxRef?: RefObject<HTMLElement | null>;\n  \n  /**\n   * CSS selector for option elements (default: '[role=\"option\"]')\n   */\n  optionSelector?: string;\n}\n\nexport interface UseComboboxNavigationReturn {\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   * Keyboard event handler for the combobox input\n   */\n  handleKeyDown: (e: React.KeyboardEvent) => void;\n  \n  /**\n   * Generate stable ID for an option\n   */\n  getOptionId: (listboxId: string, index: number) => string;\n  \n}\n\n/**\n * Hook for managing combobox keyboard navigation with aria-activedescendant.\n * \n * Implements WAI-ARIA 1.2 Combobox pattern:\n * - Arrow Up/Down to navigate options\n * - Enter to select highlighted option\n * - Escape to close dropdown\n * - Tab to close and move focus\n * - Auto-scrolls highlighted option into view\n * \n * @example\n * ```tsx\n * const { \n *   highlightedIndex, \n *   handleKeyDown, \n *   getOptionId \n * } = useComboboxNavigation({\n *   items: suggestions,\n *   isOpen: isDropdownOpen,\n *   onSelect: (item, idx) => handleSelect(item),\n *   onClose: () => setIsOpen(false),\n *   listboxRef\n * });\n * \n * <input\n *   role=\"combobox\"\n *   onKeyDown={handleKeyDown}\n *   aria-activedescendant={highlightedIndex >= 0 ? getOptionId(listboxId, highlightedIndex) : undefined}\n * />\n * ```\n */\nexport function useComboboxNavigation<T = any>({\n  items,\n  isOpen,\n  onSelect,\n  onClose,\n  onOpen,\n  loop = true,\n  disabled = false,\n  listboxRef,\n  optionSelector = '[role=\"option\"]'\n}: UseComboboxNavigationOptions<T>): UseComboboxNavigationReturn {\n  const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);\n  \n  // Reset highlighted index when dropdown closes\n  useEffect(() => {\n    if (!isOpen) {\n      setHighlightedIndex(-1);\n    }\n  }, [isOpen]);\n  \n  // Auto-scroll highlighted item into view\n  useScrollActiveIntoView({\n    containerRef: listboxRef,\n    activeIndex: highlightedIndex,\n    itemSelector: optionSelector,\n    enabled: isOpen\n  });\n  \n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) {\n        // For disabled navigation, still handle Escape\n        if (e.key === 'Escape' && isOpen) {\n          e.preventDefault();\n          onClose();\n        }\n        return;\n      }\n      \n      const itemCount = items.length;\n      \n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          if (!isOpen && itemCount > 0) {\n            // Open dropdown and highlight first item\n            onOpen?.();\n            setHighlightedIndex(0);\n          } else if (isOpen && itemCount > 0) {\n            // Navigate down\n            setHighlightedIndex((prev) => {\n              if (loop) {\n                return (prev + 1) % itemCount;\n              }\n              return Math.min(prev + 1, itemCount - 1);\n            });\n          }\n          break;\n          \n        case 'ArrowUp':\n          e.preventDefault();\n          if (isOpen && itemCount > 0) {\n            // Navigate up\n            setHighlightedIndex((prev) => {\n              // If nothing highlighted, go to last item\n              if (prev === -1) {\n                return itemCount - 1;\n              }\n              if (loop) {\n                return (prev - 1 + itemCount) % itemCount;\n              }\n              return Math.max(prev - 1, 0);\n            });\n          }\n          break;\n          \n        case 'Enter':\n          if (isOpen && highlightedIndex >= 0 && items[highlightedIndex]) {\n            e.preventDefault();\n            onSelect(items[highlightedIndex], highlightedIndex);\n            setHighlightedIndex(-1);\n          }\n          break;\n          \n        case 'Escape':\n          if (isOpen) {\n            e.preventDefault();\n            onClose();\n            setHighlightedIndex(-1);\n          }\n          break;\n          \n        case 'Tab':\n          // Close dropdown on Tab (don't preventDefault - let focus move naturally)\n          if (isOpen) {\n            onClose();\n            setHighlightedIndex(-1);\n          }\n          break;\n      }\n    },\n    [disabled, items, isOpen, highlightedIndex, onSelect, onClose, onOpen, loop]\n  );\n  \n  const getOptionId = useCallback(\n    (listboxId: string, index: number) => `${listboxId}-option-${index}`,\n    []\n  );\n  \n  return {\n    highlightedIndex,\n    setHighlightedIndex,\n    handleKeyDown,\n    getOptionId\n  };\n}\n"],"names":["useState","useEffect","useCallback","useScrollActiveIntoView","useComboboxNavigation","items","isOpen","onSelect","onClose","onOpen","loop","disabled","listboxRef","optionSelector","highlightedIndex","setHighlightedIndex","containerRef","activeIndex","itemSelector","enabled","handleKeyDown","e","key","preventDefault","itemCount","length","prev","Math","min","max","getOptionId","listboxId","index"],"mappings":"AA2GO,SAAA,YAAAA,GAAA,aAAAC,GAAA,eAAAC,SAAA;AAAA,SAAA,2BAAAC,SAAA;AAAA,SAASC,EAA+B;AAAA,EAC7CC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,UAAAA,IAAW;AAAA,EACXC,YAAAA;AAAAA,EACAC,gBAAAA,IAAiB;AACc,GAAgC;AAC/D,QAAM,CAACC,GAAkBC,CAAmB,IAAIf,EAAiB,EAAE;AAGnEC,EAAAA,EAAU,MAAM;AACd,IAAKK,KACHS,EAAoB,EAAE;AAAA,EAE1B,GAAG,CAACT,CAAM,CAAC,GAGXH,EAAwB;AAAA,IACtBa,cAAcJ;AAAAA,IACdK,aAAaH;AAAAA,IACbI,cAAcL;AAAAA,IACdM,SAASb;AAAAA,EAAAA,CACV;AAED,QAAMc,IAAgBlB,EACpB,CAACmB,MAA2B;AAC1B,QAAIV,GAAU;AAEZ,MAAIU,EAAEC,QAAQ,YAAYhB,MACxBe,EAAEE,eAAAA,GACFf,EAAAA;AAEF;AAAA,IACF;AAEA,UAAMgB,IAAYnB,EAAMoB;AAExB,YAAQJ,EAAEC,KAAAA;AAAAA,MACR,KAAK;AACHD,QAAAA,EAAEE,eAAAA,GACE,CAACjB,KAAUkB,IAAY,KAEzBf,IAAAA,GACAM,EAAoB,CAAC,KACZT,KAAUkB,IAAY,KAE/BT,EAAqBW,CAAAA,MACfhB,KACMgB,IAAO,KAAKF,IAEfG,KAAKC,IAAIF,IAAO,GAAGF,IAAY,CAAC,CACxC;AAEH;AAAA,MAEF,KAAK;AACHH,QAAAA,EAAEE,eAAAA,GACEjB,KAAUkB,IAAY,KAExBT,EAAqBW,CAAAA,MAEfA,MAAS,KACJF,IAAY,IAEjBd,KACMgB,IAAO,IAAIF,KAAaA,IAE3BG,KAAKE,IAAIH,IAAO,GAAG,CAAC,CAC5B;AAEH;AAAA,MAEF,KAAK;AACH,QAAIpB,KAAUQ,KAAoB,KAAKT,EAAMS,CAAgB,MAC3DO,EAAEE,eAAAA,GACFhB,EAASF,EAAMS,CAAgB,GAAGA,CAAgB,GAClDC,EAAoB,EAAE;AAExB;AAAA,MAEF,KAAK;AACH,QAAIT,MACFe,EAAEE,eAAAA,GACFf,EAAAA,GACAO,EAAoB,EAAE;AAExB;AAAA,MAEF,KAAK;AAEH,QAAIT,MACFE,EAAAA,GACAO,EAAoB,EAAE;AAExB;AAAA,IAAA;AAAA,EAEN,GACA,CAACJ,GAAUN,GAAOC,GAAQQ,GAAkBP,GAAUC,GAASC,GAAQC,CAAI,CAC7E,GAEMoB,IAAc5B,EAClB,CAAC6B,GAAmBC,MAAkB,GAAGD,CAAS,WAAWC,CAAK,IAClE,CAAA,CACF;AAEA,SAAO;AAAA,IACLlB,kBAAAA;AAAAA,IACAC,qBAAAA;AAAAA,IACAK,eAAAA;AAAAA,IACAU,aAAAA;AAAAA,EAAAA;AAEJ;"}
+{"version":3,"file":"index229.js","sources":["../src/utils/a11y/focusableElements.ts"],"sourcesContent":["/**\n * Utilities for finding focusable elements within a container.\n * \n * Used for focus management in modals, popovers, and other interactive overlays.\n */\n\n/**\n * Base selector for standard focusable elements.\n * Matches: buttons, links, inputs, selects, textareas, elements with tabindex >= 0, contenteditable.\n */\nexport const FOCUSABLE_SELECTOR = [\n  'button:not([disabled])',\n  '[href]',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n  '[contenteditable=\"true\"]'\n].join(', ');\n\n/**\n * Extended selector that includes ARIA role-based focusable elements.\n * Useful for composite widgets like menus, listboxes, etc.\n */\nexport const FOCUSABLE_WITH_ROLES_SELECTOR = [\n  FOCUSABLE_SELECTOR,\n  '[role=\"menuitem\"]',\n  '[role=\"option\"]',\n  '[role=\"menuitemcheckbox\"]',\n  '[role=\"menuitemradio\"]'\n].join(', ');\n\n/**\n * Options for getFocusableElements\n */\nexport interface GetFocusableElementsOptions {\n  /**\n   * Container element to search within. If null/undefined, returns empty array.\n   */\n  container: HTMLElement | null;\n  /**\n   * Whether to include role-based focusable elements (menuitem, option, etc.).\n   * Default: false (uses base selector only)\n   */\n  includeRoles?: boolean;\n  /**\n   * Additional custom selectors to include.\n   */\n  additionalSelectors?: string[];\n  /**\n   * Whether to filter out hidden/invisible elements.\n   * Default: false (returns all matching elements regardless of visibility)\n   */\n  filterHidden?: boolean;\n}\n\n/**\n * Get all focusable elements within a container.\n * \n * @example Basic usage (standard focusable elements)\n * ```ts\n * const focusables = getFocusableElements({ container: dialogRef.current });\n * focusables[0]?.focus(); // Focus first element\n * ```\n * \n * @example With role-based elements (for menus/listboxes)\n * ```ts\n * const focusables = getFocusableElements({ \n *   container: menuRef.current,\n *   includeRoles: true \n * });\n * ```\n * \n * @example With custom selectors\n * ```ts\n * const focusables = getFocusableElements({ \n *   container: customWidgetRef.current,\n *   additionalSelectors: ['[data-focusable=\"true\"]']\n * });\n * ```\n */\nexport function getFocusableElements({\n  container,\n  includeRoles = false,\n  additionalSelectors = [],\n  filterHidden = false\n}: GetFocusableElementsOptions): HTMLElement[] {\n  if (!container) return [];\n\n  const selector = [\n    includeRoles ? FOCUSABLE_WITH_ROLES_SELECTOR : FOCUSABLE_SELECTOR,\n    ...additionalSelectors\n  ].filter(Boolean).join(', ');\n\n  const elements = Array.from(container.querySelectorAll<HTMLElement>(selector));\n\n  if (!filterHidden) return elements;\n\n  // Filter out hidden/invisible elements\n  return elements.filter((el) => {\n    const style = window.getComputedStyle(el);\n    return (\n      style.display !== 'none' &&\n      style.visibility !== 'hidden' &&\n      style.opacity !== '0' &&\n      !el.hasAttribute('hidden') &&\n      el.offsetWidth > 0 &&\n      el.offsetHeight > 0\n    );\n  });\n}\n\n/**\n * Get the first focusable element in a container.\n * Returns null if none found.\n */\nexport function getFirstFocusableElement(\n  options: GetFocusableElementsOptions\n): HTMLElement | null {\n  const focusables = getFocusableElements(options);\n  return focusables.length > 0 ? focusables[0] : null;\n}\n\n/**\n * Get the last focusable element in a container.\n * Returns null if none found.\n */\nexport function getLastFocusableElement(\n  options: GetFocusableElementsOptions\n): HTMLElement | null {\n  const focusables = getFocusableElements(options);\n  return focusables.length > 0 ? focusables[focusables.length - 1] : null;\n}\n"],"names":["FOCUSABLE_SELECTOR","join","FOCUSABLE_WITH_ROLES_SELECTOR","getFocusableElements","container","includeRoles","additionalSelectors","filterHidden","selector","filter","Boolean","elements","Array","from","querySelectorAll","el","style","window","getComputedStyle","display","visibility","opacity","hasAttribute","offsetWidth","offsetHeight","getFirstFocusableElement","options","focusables","length"],"mappings":"AAUO,MAAMA,IAAqB,CAChC,0BACA,UACA,yBACA,0BACA,4BACA,mDACA,0BAA0B,EAC1BC,KAAK,IAAI,GAMEC,IAAgC,CAC3CF,GACA,qBACA,mBACA,6BACA,wBAAwB,EACxBC,KAAK,IAAI;AAmDJ,SAASE,EAAqB;AAAA,EACnCC,WAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,qBAAAA,IAAsB,CAAA;AAAA,EACtBC,cAAAA,IAAe;AACY,GAAkB;AAC7C,MAAI,CAACH,EAAW,QAAO,CAAA;AAEvB,QAAMI,IAAW,CACfH,IAAeH,IAAgCF,GAC/C,GAAGM,CAAmB,EACtBG,OAAOC,OAAO,EAAET,KAAK,IAAI,GAErBU,IAAWC,MAAMC,KAAKT,EAAUU,iBAA8BN,CAAQ,CAAC;AAE7E,SAAKD,IAGEI,EAASF,OAAQM,CAAAA,MAAO;AAC7B,UAAMC,IAAQC,OAAOC,iBAAiBH,CAAE;AACxC,WACEC,EAAMG,YAAY,UAClBH,EAAMI,eAAe,YACrBJ,EAAMK,YAAY,OAClB,CAACN,EAAGO,aAAa,QAAQ,KACzBP,EAAGQ,cAAc,KACjBR,EAAGS,eAAe;AAAA,EAEtB,CAAC,IAbyBb;AAc5B;AAMO,SAASc,EACdC,GACoB;AACpB,QAAMC,IAAaxB,EAAqBuB,CAAO;AAC/C,SAAOC,EAAWC,SAAS,IAAID,EAAW,CAAC,IAAI;AACjD;"}

package/dist/index230.js

@@ -1,13 +1,57 @@
-function r(t, i) {
-  if (t == null) return {};
-  var o = {};
-  for (var e in t) if ({}.hasOwnProperty.call(t, e)) {
-    if (i.indexOf(e) !== -1) continue;
-    o[e] = t[e];
-  }
-  return o;
+import { useState as m, useEffect as w, useCallback as b } from "react";
+import { useScrollActiveIntoView as x } from "./index231.js";
+function E({
+  items: u,
+  isOpen: t,
+  onSelect: o,
+  onClose: c,
+  onOpen: l,
+  loop: i = !0,
+  disabled: h = !1,
+  listboxRef: k,
+  optionSelector: g = '[role="option"]'
+}) {
+  const [f, a] = m(-1);
+  w(() => {
+    t || a(-1);
+  }, [t]), x({
+    containerRef: k,
+    activeIndex: f,
+    itemSelector: g,
+    enabled: t
+  });
+  const D = b((r) => {
+    if (h) {
+      r.key === "Escape" && t && (r.preventDefault(), c());
+      return;
+    }
+    const e = u.length;
+    switch (r.key) {
+      case "ArrowDown":
+        r.preventDefault(), !t && e > 0 ? (l?.(), a(0)) : t && e > 0 && a((n) => i ? (n + 1) % e : Math.min(n + 1, e - 1));
+        break;
+      case "ArrowUp":
+        r.preventDefault(), t && e > 0 && a((n) => n === -1 ? e - 1 : i ? (n - 1 + e) % e : Math.max(n - 1, 0));
+        break;
+      case "Enter":
+        t && f >= 0 && u[f] && (r.preventDefault(), o(u[f], f), a(-1));
+        break;
+      case "Escape":
+        t && (r.preventDefault(), c(), a(-1));
+        break;
+      case "Tab":
+        t && (c(), a(-1));
+        break;
+    }
+  }, [h, u, t, f, o, c, l, i]), d = b((r, e) => `${r}-option-${e}`, []);
+  return {
+    highlightedIndex: f,
+    setHighlightedIndex: a,
+    handleKeyDown: D,
+    getOptionId: d
+  };
 }
 export {
-  r as default
+  E as useComboboxNavigation
 };
 //# sourceMappingURL=index230.js.map

package/dist/index230.js.map

@@ -1 +1 @@
-{"version":3,"file":"index230.js","sources":["../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js"],"sourcesContent":["function _objectWithoutPropertiesLoose(r, e) {\n  if (null == r) return {};\n  var t = {};\n  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {\n    if (-1 !== e.indexOf(n)) continue;\n    t[n] = r[n];\n  }\n  return t;\n}\nexport { _objectWithoutPropertiesLoose as default };"],"names":["_objectWithoutPropertiesLoose","r","e","t","n"],"mappings":"AAAA,SAASA,EAA8BC,GAAGC,GAAG;AAC3C,MAAYD,KAAR,KAAW,QAAO,CAAA;AACtB,MAAIE,IAAI,CAAA;AACR,WAASC,KAAKH,EAAG,KAAI,CAAA,EAAG,eAAe,KAAKA,GAAGG,CAAC,GAAG;AACjD,QAAWF,EAAE,QAAQE,CAAC,MAAlB,GAAqB;AACzB,IAAAD,EAAEC,CAAC,IAAIH,EAAEG,CAAC;AAAA,EACZ;AACA,SAAOD;AACT;","x_google_ignoreList":[0]}
+{"version":3,"file":"index230.js","sources":["../src/utils/a11y/useComboboxNavigation.ts"],"sourcesContent":["import { useCallback, useState, useEffect } from 'react';\nimport type { RefObject } from 'react';\nimport { useScrollActiveIntoView } from './useScrollActiveIntoView';\n\nexport interface UseComboboxNavigationOptions<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 when an item is selected (Enter key)\n   */\n  onSelect: (item: T, index: number) => void;\n  \n  /**\n   * Callback to close the dropdown\n   */\n  onClose: () => void;\n  \n  /**\n   * Optional: Callback to open the dropdown\n   */\n  onOpen?: () => void;\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   * Ref to the listbox container for scroll management\n   */\n  listboxRef?: RefObject<HTMLElement | null>;\n  \n  /**\n   * CSS selector for option elements (default: '[role=\"option\"]')\n   */\n  optionSelector?: string;\n}\n\nexport interface UseComboboxNavigationReturn {\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   * Keyboard event handler for the combobox input\n   */\n  handleKeyDown: (e: React.KeyboardEvent) => void;\n  \n  /**\n   * Generate stable ID for an option\n   */\n  getOptionId: (listboxId: string, index: number) => string;\n  \n}\n\n/**\n * Hook for managing combobox keyboard navigation with aria-activedescendant.\n * \n * Implements WAI-ARIA 1.2 Combobox pattern:\n * - Arrow Up/Down to navigate options\n * - Enter to select highlighted option\n * - Escape to close dropdown\n * - Tab to close and move focus\n * - Auto-scrolls highlighted option into view\n * \n * @example\n * ```tsx\n * const { \n *   highlightedIndex, \n *   handleKeyDown, \n *   getOptionId \n * } = useComboboxNavigation({\n *   items: suggestions,\n *   isOpen: isDropdownOpen,\n *   onSelect: (item, idx) => handleSelect(item),\n *   onClose: () => setIsOpen(false),\n *   listboxRef\n * });\n * \n * <input\n *   role=\"combobox\"\n *   onKeyDown={handleKeyDown}\n *   aria-activedescendant={highlightedIndex >= 0 ? getOptionId(listboxId, highlightedIndex) : undefined}\n * />\n * ```\n */\nexport function useComboboxNavigation<T = any>({\n  items,\n  isOpen,\n  onSelect,\n  onClose,\n  onOpen,\n  loop = true,\n  disabled = false,\n  listboxRef,\n  optionSelector = '[role=\"option\"]'\n}: UseComboboxNavigationOptions<T>): UseComboboxNavigationReturn {\n  const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);\n  \n  // Reset highlighted index when dropdown closes\n  useEffect(() => {\n    if (!isOpen) {\n      setHighlightedIndex(-1);\n    }\n  }, [isOpen]);\n  \n  // Auto-scroll highlighted item into view\n  useScrollActiveIntoView({\n    containerRef: listboxRef,\n    activeIndex: highlightedIndex,\n    itemSelector: optionSelector,\n    enabled: isOpen\n  });\n  \n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) {\n        // For disabled navigation, still handle Escape\n        if (e.key === 'Escape' && isOpen) {\n          e.preventDefault();\n          onClose();\n        }\n        return;\n      }\n      \n      const itemCount = items.length;\n      \n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          if (!isOpen && itemCount > 0) {\n            // Open dropdown and highlight first item\n            onOpen?.();\n            setHighlightedIndex(0);\n          } else if (isOpen && itemCount > 0) {\n            // Navigate down\n            setHighlightedIndex((prev) => {\n              if (loop) {\n                return (prev + 1) % itemCount;\n              }\n              return Math.min(prev + 1, itemCount - 1);\n            });\n          }\n          break;\n          \n        case 'ArrowUp':\n          e.preventDefault();\n          if (isOpen && itemCount > 0) {\n            // Navigate up\n            setHighlightedIndex((prev) => {\n              // If nothing highlighted, go to last item\n              if (prev === -1) {\n                return itemCount - 1;\n              }\n              if (loop) {\n                return (prev - 1 + itemCount) % itemCount;\n              }\n              return Math.max(prev - 1, 0);\n            });\n          }\n          break;\n          \n        case 'Enter':\n          if (isOpen && highlightedIndex >= 0 && items[highlightedIndex]) {\n            e.preventDefault();\n            onSelect(items[highlightedIndex], highlightedIndex);\n            setHighlightedIndex(-1);\n          }\n          break;\n          \n        case 'Escape':\n          if (isOpen) {\n            e.preventDefault();\n            onClose();\n            setHighlightedIndex(-1);\n          }\n          break;\n          \n        case 'Tab':\n          // Close dropdown on Tab (don't preventDefault - let focus move naturally)\n          if (isOpen) {\n            onClose();\n            setHighlightedIndex(-1);\n          }\n          break;\n      }\n    },\n    [disabled, items, isOpen, highlightedIndex, onSelect, onClose, onOpen, loop]\n  );\n  \n  const getOptionId = useCallback(\n    (listboxId: string, index: number) => `${listboxId}-option-${index}`,\n    []\n  );\n  \n  return {\n    highlightedIndex,\n    setHighlightedIndex,\n    handleKeyDown,\n    getOptionId\n  };\n}\n"],"names":["useState","useEffect","useCallback","useScrollActiveIntoView","useComboboxNavigation","items","isOpen","onSelect","onClose","onOpen","loop","disabled","listboxRef","optionSelector","highlightedIndex","setHighlightedIndex","containerRef","activeIndex","itemSelector","enabled","handleKeyDown","e","key","preventDefault","itemCount","length","prev","Math","min","max","getOptionId","listboxId","index"],"mappings":"AA2GO,SAAA,YAAAA,GAAA,aAAAC,GAAA,eAAAC,SAAA;AAAA,SAAA,2BAAAC,SAAA;AAAA,SAASC,EAA+B;AAAA,EAC7CC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,UAAAA,IAAW;AAAA,EACXC,YAAAA;AAAAA,EACAC,gBAAAA,IAAiB;AACc,GAAgC;AAC/D,QAAM,CAACC,GAAkBC,CAAmB,IAAIf,EAAiB,EAAE;AAGnEC,EAAAA,EAAU,MAAM;AACd,IAAKK,KACHS,EAAoB,EAAE;AAAA,EAE1B,GAAG,CAACT,CAAM,CAAC,GAGXH,EAAwB;AAAA,IACtBa,cAAcJ;AAAAA,IACdK,aAAaH;AAAAA,IACbI,cAAcL;AAAAA,IACdM,SAASb;AAAAA,EAAAA,CACV;AAED,QAAMc,IAAgBlB,EACpB,CAACmB,MAA2B;AAC1B,QAAIV,GAAU;AAEZ,MAAIU,EAAEC,QAAQ,YAAYhB,MACxBe,EAAEE,eAAAA,GACFf,EAAAA;AAEF;AAAA,IACF;AAEA,UAAMgB,IAAYnB,EAAMoB;AAExB,YAAQJ,EAAEC,KAAAA;AAAAA,MACR,KAAK;AACHD,QAAAA,EAAEE,eAAAA,GACE,CAACjB,KAAUkB,IAAY,KAEzBf,IAAAA,GACAM,EAAoB,CAAC,KACZT,KAAUkB,IAAY,KAE/BT,EAAqBW,CAAAA,MACfhB,KACMgB,IAAO,KAAKF,IAEfG,KAAKC,IAAIF,IAAO,GAAGF,IAAY,CAAC,CACxC;AAEH;AAAA,MAEF,KAAK;AACHH,QAAAA,EAAEE,eAAAA,GACEjB,KAAUkB,IAAY,KAExBT,EAAqBW,CAAAA,MAEfA,MAAS,KACJF,IAAY,IAEjBd,KACMgB,IAAO,IAAIF,KAAaA,IAE3BG,KAAKE,IAAIH,IAAO,GAAG,CAAC,CAC5B;AAEH;AAAA,MAEF,KAAK;AACH,QAAIpB,KAAUQ,KAAoB,KAAKT,EAAMS,CAAgB,MAC3DO,EAAEE,eAAAA,GACFhB,EAASF,EAAMS,CAAgB,GAAGA,CAAgB,GAClDC,EAAoB,EAAE;AAExB;AAAA,MAEF,KAAK;AACH,QAAIT,MACFe,EAAEE,eAAAA,GACFf,EAAAA,GACAO,EAAoB,EAAE;AAExB;AAAA,MAEF,KAAK;AAEH,QAAIT,MACFE,EAAAA,GACAO,EAAoB,EAAE;AAExB;AAAA,IAAA;AAAA,EAEN,GACA,CAACJ,GAAUN,GAAOC,GAAQQ,GAAkBP,GAAUC,GAASC,GAAQC,CAAI,CAC7E,GAEMoB,IAAc5B,EAClB,CAAC6B,GAAmBC,MAAkB,GAAGD,CAAS,WAAWC,CAAK,IAClE,CAAA,CACF;AAEA,SAAO;AAAA,IACLlB,kBAAAA;AAAAA,IACAC,qBAAAA;AAAAA,IACAK,eAAAA;AAAAA,IACAU,aAAAA;AAAAA,EAAAA;AAEJ;"}

package/dist/index231.js

@@ -1,13 +1,22 @@
-function e() {
-  return e = Object.assign ? Object.assign.bind() : function(t) {
-    for (var n = 1; n < arguments.length; n++) {
-      var a = arguments[n];
-      for (var r in a) ({}).hasOwnProperty.call(a, r) && (t[r] = a[r]);
-    }
-    return t;
-  }, e.apply(null, arguments);
+import { useEffect as s } from "react";
+const u = {
+  block: "nearest"
+};
+function m({
+  containerRef: t,
+  activeIndex: o,
+  itemSelector: r = '[role="option"]',
+  enabled: c = !0,
+  scrollOptions: e = u
+}) {
+  s(() => {
+    if (!c || o < 0 || !t?.current)
+      return;
+    const n = t.current.querySelectorAll(r)[o];
+    n && n.scrollIntoView(e);
+  }, [o, t, r, c, e]);
 }
 export {
-  e as default
+  m as useScrollActiveIntoView
 };
 //# sourceMappingURL=index231.js.map

package/dist/index231.js.map

@@ -1 +1 @@
-{"version":3,"file":"index231.js","sources":["../node_modules/@babel/runtime/helpers/esm/extends.js"],"sourcesContent":["function _extends() {\n  return _extends = Object.assign ? Object.assign.bind() : function (n) {\n    for (var e = 1; e < arguments.length; e++) {\n      var t = arguments[e];\n      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);\n    }\n    return n;\n  }, _extends.apply(null, arguments);\n}\nexport { _extends as default };"],"names":["_extends","n","e","t"],"mappings":"AAAA,SAASA,IAAW;AAClB,SAAOA,IAAW,OAAO,SAAS,OAAO,OAAO,KAAI,IAAK,SAAUC,GAAG;AACpE,aAASC,IAAI,GAAGA,IAAI,UAAU,QAAQA,KAAK;AACzC,UAAIC,IAAI,UAAUD,CAAC;AACnB,eAAS,KAAKC,EAAG,EAAC,CAAA,GAAI,eAAe,KAAKA,GAAG,CAAC,MAAMF,EAAE,CAAC,IAAIE,EAAE,CAAC;AAAA,IAChE;AACA,WAAOF;AAAA,EACT,GAAGD,EAAS,MAAM,MAAM,SAAS;AACnC;","x_google_ignoreList":[0]}
+{"version":3,"file":"index231.js","sources":["../src/utils/a11y/useScrollActiveIntoView.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type { RefObject } from 'react';\n\nconst DEFAULT_SCROLL_OPTIONS: ScrollIntoViewOptions = { block: 'nearest' };\n\nexport interface UseScrollActiveIntoViewOptions {\n  /**\n   * Ref to the container element\n   */\n  containerRef?: RefObject<HTMLElement | null>;\n  \n  /**\n   * Index of the currently active/highlighted item (-1 if none)\n   */\n  activeIndex: number;\n  \n  /**\n   * CSS selector for item elements\n   * Default: '[role=\"option\"]'\n   */\n  itemSelector?: string;\n  \n  /**\n   * Whether scrolling is enabled\n   * Default: true\n   */\n  enabled?: boolean;\n  \n  /**\n   * ScrollIntoView options\n   * Default: { block: 'nearest' }\n   */\n  scrollOptions?: ScrollIntoViewOptions;\n}\n\n/**\n * Hook to automatically scroll the active item into view.\n * \n * Useful for aria-activedescendant patterns where DOM focus stays\n * on the container (e.g., input field) but we need to visually show\n * which descendant option is logically active.\n * \n * Common use cases:\n * - Combobox dropdown options\n * - Menu items with virtual focus\n * - Grid cells with keyboard navigation\n * - Tree view items\n * - Listbox options\n * \n * @example\n * ```tsx\n * const [highlightedIndex, setHighlightedIndex] = useState(-1);\n * const listboxRef = useRef<HTMLDivElement>(null);\n * \n * useScrollActiveIntoView({\n *   containerRef: listboxRef,\n *   activeIndex: highlightedIndex,\n *   itemSelector: '[role=\"option\"]'\n * });\n * \n * // Now when highlightedIndex changes, the item scrolls into view\n * ```\n * \n * @example Custom scroll behavior\n * ```tsx\n * useScrollActiveIntoView({\n *   containerRef: menuRef,\n *   activeIndex: activeMenuIndex,\n *   itemSelector: '[role=\"menuitem\"]',\n *   scrollOptions: { block: 'center', behavior: 'smooth' }\n * });\n * ```\n */\nexport function useScrollActiveIntoView({\n  containerRef,\n  activeIndex,\n  itemSelector = '[role=\"option\"]',\n  enabled = true,\n  scrollOptions = DEFAULT_SCROLL_OPTIONS\n}: UseScrollActiveIntoViewOptions): void {\n  useEffect(() => {\n    // Early returns for disabled states\n    if (!enabled || activeIndex < 0 || !containerRef?.current) {\n      return;\n    }\n    \n    const container = containerRef.current;\n    const items = container.querySelectorAll(itemSelector);\n    const activeItem = items[activeIndex] as HTMLElement;\n    \n    if (activeItem) {\n      activeItem.scrollIntoView(scrollOptions);\n    }\n  }, [activeIndex, containerRef, itemSelector, enabled, scrollOptions]);\n}\n"],"names":["useEffect","DEFAULT_SCROLL_OPTIONS","block","useScrollActiveIntoView","containerRef","activeIndex","itemSelector","enabled","scrollOptions","current","activeItem","querySelectorAll","scrollIntoView"],"mappings":"AAGA,SAAA,aAAAA,SAAA;AAAA,MAAMC,IAAgD;AAAA,EAAEC,OAAO;AAAU;AAsElE,SAASC,EAAwB;AAAA,EACtCC,cAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,SAAAA,IAAU;AAAA,EACVC,eAAAA,IAAgBP;AACc,GAAS;AACvCD,EAAAA,EAAU,MAAM;AAEd,QAAI,CAACO,KAAWF,IAAc,KAAK,CAACD,GAAcK;AAChD;AAKF,UAAMC,IAFYN,EAAaK,QACPE,iBAAiBL,CAAY,EAC5BD,CAAW;AAEpC,IAAIK,KACFA,EAAWE,eAAeJ,CAAa;AAAA,EAE3C,GAAG,CAACH,GAAaD,GAAcE,GAAcC,GAASC,CAAa,CAAC;AACtE;"}

package/dist/index232.js

@@ -1,8 +1,13 @@
-import e from "./index237.js";
-function p(o, t) {
-  o.prototype = Object.create(t.prototype), o.prototype.constructor = o, e(o, t);
+function r(t, i) {
+  if (t == null) return {};
+  var o = {};
+  for (var e in t) if ({}.hasOwnProperty.call(t, e)) {
+    if (i.indexOf(e) !== -1) continue;
+    o[e] = t[e];
+  }
+  return o;
 }
 export {
-  p as default
+  r as default
 };
 //# sourceMappingURL=index232.js.map

package/dist/index232.js.map

@@ -1 +1 @@
-{"version":3,"file":"index232.js","sources":["../node_modules/@babel/runtime/helpers/esm/inheritsLoose.js"],"sourcesContent":["import setPrototypeOf from \"./setPrototypeOf.js\";\nfunction _inheritsLoose(t, o) {\n  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, setPrototypeOf(t, o);\n}\nexport { _inheritsLoose as default };"],"names":["_setPrototypeOf","_inheritsLoose","t","o","setPrototypeOf"],"mappings":"AACA,OAAAA,OAAA;AAAA,SAASC,EAAeC,GAAGC,GAAG;AAC5B,EAAAD,EAAE,YAAY,OAAO,OAAOC,EAAE,SAAS,GAAGD,EAAE,UAAU,cAAcA,GAAGE,EAAeF,GAAGC,CAAC;AAC5F;","x_google_ignoreList":[0]}
+{"version":3,"file":"index232.js","sources":["../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js"],"sourcesContent":["function _objectWithoutPropertiesLoose(r, e) {\n  if (null == r) return {};\n  var t = {};\n  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {\n    if (-1 !== e.indexOf(n)) continue;\n    t[n] = r[n];\n  }\n  return t;\n}\nexport { _objectWithoutPropertiesLoose as default };"],"names":["_objectWithoutPropertiesLoose","r","e","t","n"],"mappings":"AAAA,SAASA,EAA8BC,GAAGC,GAAG;AAC3C,MAAYD,KAAR,KAAW,QAAO,CAAA;AACtB,MAAIE,IAAI,CAAA;AACR,WAASC,KAAKH,EAAG,KAAI,CAAA,EAAG,eAAe,KAAKA,GAAGG,CAAC,GAAG;AACjD,QAAWF,EAAE,QAAQE,CAAC,MAAlB,GAAqB;AACzB,IAAAD,EAAEC,CAAC,IAAIH,EAAEG,CAAC;AAAA,EACZ;AACA,SAAOD;AACT;","x_google_ignoreList":[0]}