se-design 1.0.63-dev → 1.0.64

package/dist/index212.js.map

@@ -1 +1 @@
-{"version":3,"file":"index212.js","sources":["../src/components/NavigationBar/useTabsA11y.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useRovingFocus } from '../../utils/a11y';\n\nconst getTabId = (itemId: string, idBase: string) => {\n  const suffix = idBase ? `-${idBase}` : '';\n  return `tab${suffix}-${itemId}`;\n};\n\nconst getPanelId = (itemId: string, idBase: string) => {\n  const suffix = idBase ? `-${idBase}` : '';\n  return `panel${suffix}-${itemId}`;\n};\n\ninterface UseTabsA11yProps {\n  itemIds: string[];\n  orientation?: 'horizontal' | 'vertical';\n  activeNavigationItem: string;\n  idBase?: string;\n}\n\ninterface TabA11yProps {\n  ref: (el: HTMLElement | null) => void;\n  tabIndex: number;\n  id: string;\n  'aria-controls': string;\n  'aria-selected': boolean;\n  role: 'tab';\n}\n\n/**\n * Hook for managing Tabs (NavigationBar) focus and ARIA props.\n * Handles roving tabindex pattern and generates tab-specific ARIA attributes.\n * \n * @example\n * const itemIds = useMemo(() => navigationItems.map(item => item.id), [navigationItems]);\n * const { getTabProps, setFocusedTabId, handleKeyDown } = useTabsA11y({\n *   itemIds,\n *   activeNavigationItem: 'tab-1',\n *   orientation: 'horizontal',\n *   idBase: 'settings'\n * });\n */\nexport function useTabsA11y({\n  itemIds,\n  orientation = 'horizontal',\n  activeNavigationItem,\n  idBase = ''\n}: UseTabsA11yProps) {\n  const {\n    setFocusedId: setFocusedTabId,\n    handleKeyDown,\n    getRovingItemProps\n  } = useRovingFocus({\n    itemIds,\n    defaultFocusedId: activeNavigationItem,\n    orientation,\n    loop: true\n  });\n\n  /**\n   * Get all props needed for a tab button.\n   * Combines roving focus props (ref, tabIndex) with tab-specific ARIA attributes.\n   */\n  const getTabProps = useCallback((itemId: string): TabA11yProps => {\n    const { ref, tabIndex } = getRovingItemProps(itemId);\n    const isSelected = activeNavigationItem === itemId;\n\n    return {\n      ref,\n      tabIndex,\n      id: getTabId(itemId, idBase),\n      'aria-controls': getPanelId(itemId, idBase),\n      'aria-selected': isSelected,\n      role: 'tab'\n    };\n  }, [activeNavigationItem, getRovingItemProps, idBase]);\n\n  return {\n    getTabProps,\n    setFocusedTabId,\n    handleKeyDown,\n    getPanelId: (itemId: string) => getPanelId(itemId, idBase),\n    getTabId: (itemId: string) => getTabId(itemId, idBase)\n  };\n}\n\n"],"names":["useCallback","useRovingFocus","getTabId","itemId","idBase","getPanelId","useTabsA11y","itemIds","orientation","activeNavigationItem","setFocusedId","setFocusedTabId","handleKeyDown","getRovingItemProps","defaultFocusedId","loop","getTabProps","ref","tabIndex","isSelected","id","role"],"mappings":"AAGA,SAAA,eAAAA,SAAA;AAAA,SAAA,kBAAAC,SAAA;AAAA,MAAMC,IAAWA,CAACC,GAAgBC,MAEzB,MADQA,IAAS,IAAIA,CAAM,KAAK,EACpB,IAAID,CAAM,IAGzBE,IAAaA,CAACF,GAAgBC,MAE3B,QADQA,IAAS,IAAIA,CAAM,KAAK,EAClB,IAAID,CAAM;AAgC1B,SAASG,EAAY;AAAA,EAC1BC,SAAAA;AAAAA,EACAC,aAAAA,IAAc;AAAA,EACdC,sBAAAA;AAAAA,EACAL,QAAAA,IAAS;AACO,GAAG;AACnB,QAAM;AAAA,IACJM,cAAcC;AAAAA,IACdC,eAAAA;AAAAA,IACAC,oBAAAA;AAAAA,EAAAA,IACEZ,EAAe;AAAA,IACjBM,SAAAA;AAAAA,IACAO,kBAAkBL;AAAAA,IAClBD,aAAAA;AAAAA,IACAO,MAAM;AAAA,EAAA,CACP;AAoBD,SAAO;AAAA,IACLC,aAfkBhB,EAAY,CAACG,MAAiC;AAChE,YAAM;AAAA,QAAEc,KAAAA;AAAAA,QAAKC,UAAAA;AAAAA,MAAAA,IAAaL,EAAmBV,CAAM,GAC7CgB,IAAaV,MAAyBN;AAE5C,aAAO;AAAA,QACLc,KAAAA;AAAAA,QACAC,UAAAA;AAAAA,QACAE,IAAIlB,EAASC,GAAQC,CAAM;AAAA,QAC3B,iBAAiBC,EAAWF,GAAQC,CAAM;AAAA,QAC1C,iBAAiBe;AAAAA,QACjBE,MAAM;AAAA,MAAA;AAAA,IAEV,GAAG,CAACZ,GAAsBI,GAAoBT,CAAM,CAAC;AAAA,IAInDO,iBAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAP,YAAYA,CAACF,MAAmBE,EAAWF,GAAQC,CAAM;AAAA,IACzDF,UAAUA,CAACC,MAAmBD,EAASC,GAAQC,CAAM;AAAA,EAAA;AAEzD;"}
+{"version":3,"file":"index212.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/{index211.js → index214.js}

@@ -32,4 +32,4 @@ b.displayName = "TabButton";
 export {
   b as TabButton
 };
-//# sourceMappingURL=index211.js.map
+//# sourceMappingURL=index214.js.map

package/dist/{index211.js.map → index214.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index211.js","sources":["../src/components/NavigationBar/TabButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button } from '../Button';\n\nexport interface TabButtonProps {\n  id: string;\n  label: string;\n  isSelected: boolean;\n  isDisabled?: boolean;\n  panelId: string;\n  tabIndex: number;\n  className?: string;\n  automationId?: string;\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  onFocus: () => void;\n  onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n}\n\n/**\n * Internal TabButton component for NavigationBar.\n * Uses Button (unstyled) internally for consistent activation handling.\n * Supports forwardRef for focus management (roving tabindex).\n */\nexport const TabButton = forwardRef<HTMLButtonElement, TabButtonProps>(\n  (\n    {\n      id,\n      label,\n      isSelected,\n      isDisabled = false,\n      panelId,\n      tabIndex,\n      className = '',\n      automationId,\n      onClick,\n      onFocus,\n      onKeyDown\n    },\n    ref\n  ) => {\n    return (\n      <Button\n        ref={ref}\n        type=\"unstyled\"\n        label={label}\n        disabled={isDisabled}\n        onClick={onClick}\n        className={className}\n        automationId={automationId}\n        role=\"tab\"\n        id={id}\n        aria-selected={isSelected}\n        aria-controls={panelId}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n      />\n    );\n  }\n);\n\nTabButton.displayName = 'TabButton';\n"],"names":["React__default","forwardRef","Button","TabButton","id","label","isSelected","isDisabled","panelId","tabIndex","className","automationId","onClick","onFocus","onKeyDown","ref","React","createElement","type","disabled","role","displayName"],"mappings":"AAsBO,OAAAA,KAAA,cAAAC,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,MAAMC,sBACX,CACE;AAAA,EACEC,IAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,cAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,WAAAA;AACF,GACAC,MAGEC,gBAAAA,EAAAC,cAACf,GAAM;AAAA,EACLa,KAAAA;AAAAA,EACAG,MAAK;AAAA,EACLb,OAAAA;AAAAA,EACAc,UAAUZ;AAAAA,EACVK,SAAAA;AAAAA,EACAF,WAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAS,MAAK;AAAA,EACLhB,IAAAA;AAAAA,EACA,iBAAeE;AAAAA,EACf,iBAAeE;AAAAA,EACfC,UAAAA;AAAAA,EACAI,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,CACD,CAGP;AAEAX,EAAUkB,cAAc;"}
+{"version":3,"file":"index214.js","sources":["../src/components/NavigationBar/TabButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button } from '../Button';\n\nexport interface TabButtonProps {\n  id: string;\n  label: string;\n  isSelected: boolean;\n  isDisabled?: boolean;\n  panelId: string;\n  tabIndex: number;\n  className?: string;\n  automationId?: string;\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  onFocus: () => void;\n  onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n}\n\n/**\n * Internal TabButton component for NavigationBar.\n * Uses Button (unstyled) internally for consistent activation handling.\n * Supports forwardRef for focus management (roving tabindex).\n */\nexport const TabButton = forwardRef<HTMLButtonElement, TabButtonProps>(\n  (\n    {\n      id,\n      label,\n      isSelected,\n      isDisabled = false,\n      panelId,\n      tabIndex,\n      className = '',\n      automationId,\n      onClick,\n      onFocus,\n      onKeyDown\n    },\n    ref\n  ) => {\n    return (\n      <Button\n        ref={ref}\n        type=\"unstyled\"\n        label={label}\n        disabled={isDisabled}\n        onClick={onClick}\n        className={className}\n        automationId={automationId}\n        role=\"tab\"\n        id={id}\n        aria-selected={isSelected}\n        aria-controls={panelId}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n      />\n    );\n  }\n);\n\nTabButton.displayName = 'TabButton';\n"],"names":["React__default","forwardRef","Button","TabButton","id","label","isSelected","isDisabled","panelId","tabIndex","className","automationId","onClick","onFocus","onKeyDown","ref","React","createElement","type","disabled","role","displayName"],"mappings":"AAsBO,OAAAA,KAAA,cAAAC,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,MAAMC,sBACX,CACE;AAAA,EACEC,IAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,cAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,WAAAA;AACF,GACAC,MAGEC,gBAAAA,EAAAC,cAACf,GAAM;AAAA,EACLa,KAAAA;AAAAA,EACAG,MAAK;AAAA,EACLb,OAAAA;AAAAA,EACAc,UAAUZ;AAAAA,EACVK,SAAAA;AAAAA,EACAF,WAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAS,MAAK;AAAA,EACLhB,IAAAA;AAAAA,EACA,iBAAeE;AAAAA,EACf,iBAAeE;AAAAA,EACfC,UAAAA;AAAAA,EACAI,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,CACD,CAGP;AAEAX,EAAUkB,cAAc;"}

package/dist/index215.js

@@ -0,0 +1,44 @@
+import { useCallback as d } from "react";
+import { useRovingFocus as g } from "./index68.js";
+const u = (e, t) => `tab${t ? `-${t}` : ""}-${e}`, c = (e, t) => `panel${t ? `-${t}` : ""}-${e}`;
+function P({
+  itemIds: e,
+  orientation: t = "horizontal",
+  activeNavigationItem: r,
+  idBase: n = ""
+}) {
+  const {
+    setFocusedId: f,
+    handleKeyDown: l,
+    getRovingItemProps: s
+  } = g({
+    itemIds: e,
+    defaultFocusedId: r,
+    orientation: t,
+    loop: !0
+  });
+  return {
+    getTabProps: d((o) => {
+      const {
+        ref: b,
+        tabIndex: a
+      } = s(o), p = r === o;
+      return {
+        ref: b,
+        tabIndex: a,
+        id: u(o, n),
+        "aria-controls": c(o, n),
+        "aria-selected": p,
+        role: "tab"
+      };
+    }, [r, s, n]),
+    setFocusedTabId: f,
+    handleKeyDown: l,
+    getPanelId: (o) => c(o, n),
+    getTabId: (o) => u(o, n)
+  };
+}
+export {
+  P as useTabsA11y
+};
+//# sourceMappingURL=index215.js.map

package/dist/index215.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index215.js","sources":["../src/components/NavigationBar/useTabsA11y.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useRovingFocus } from '../../utils/a11y';\n\nconst getTabId = (itemId: string, idBase: string) => {\n  const suffix = idBase ? `-${idBase}` : '';\n  return `tab${suffix}-${itemId}`;\n};\n\nconst getPanelId = (itemId: string, idBase: string) => {\n  const suffix = idBase ? `-${idBase}` : '';\n  return `panel${suffix}-${itemId}`;\n};\n\ninterface UseTabsA11yProps {\n  itemIds: string[];\n  orientation?: 'horizontal' | 'vertical';\n  activeNavigationItem: string;\n  idBase?: string;\n}\n\ninterface TabA11yProps {\n  ref: (el: HTMLElement | null) => void;\n  tabIndex: number;\n  id: string;\n  'aria-controls': string;\n  'aria-selected': boolean;\n  role: 'tab';\n}\n\n/**\n * Hook for managing Tabs (NavigationBar) focus and ARIA props.\n * Handles roving tabindex pattern and generates tab-specific ARIA attributes.\n * \n * @example\n * const itemIds = useMemo(() => navigationItems.map(item => item.id), [navigationItems]);\n * const { getTabProps, setFocusedTabId, handleKeyDown } = useTabsA11y({\n *   itemIds,\n *   activeNavigationItem: 'tab-1',\n *   orientation: 'horizontal',\n *   idBase: 'settings'\n * });\n */\nexport function useTabsA11y({\n  itemIds,\n  orientation = 'horizontal',\n  activeNavigationItem,\n  idBase = ''\n}: UseTabsA11yProps) {\n  const {\n    setFocusedId: setFocusedTabId,\n    handleKeyDown,\n    getRovingItemProps\n  } = useRovingFocus({\n    itemIds,\n    defaultFocusedId: activeNavigationItem,\n    orientation,\n    loop: true\n  });\n\n  /**\n   * Get all props needed for a tab button.\n   * Combines roving focus props (ref, tabIndex) with tab-specific ARIA attributes.\n   */\n  const getTabProps = useCallback((itemId: string): TabA11yProps => {\n    const { ref, tabIndex } = getRovingItemProps(itemId);\n    const isSelected = activeNavigationItem === itemId;\n\n    return {\n      ref,\n      tabIndex,\n      id: getTabId(itemId, idBase),\n      'aria-controls': getPanelId(itemId, idBase),\n      'aria-selected': isSelected,\n      role: 'tab'\n    };\n  }, [activeNavigationItem, getRovingItemProps, idBase]);\n\n  return {\n    getTabProps,\n    setFocusedTabId,\n    handleKeyDown,\n    getPanelId: (itemId: string) => getPanelId(itemId, idBase),\n    getTabId: (itemId: string) => getTabId(itemId, idBase)\n  };\n}\n\n"],"names":["useCallback","useRovingFocus","getTabId","itemId","idBase","getPanelId","useTabsA11y","itemIds","orientation","activeNavigationItem","setFocusedId","setFocusedTabId","handleKeyDown","getRovingItemProps","defaultFocusedId","loop","getTabProps","ref","tabIndex","isSelected","id","role"],"mappings":"AAGA,SAAA,eAAAA,SAAA;AAAA,SAAA,kBAAAC,SAAA;AAAA,MAAMC,IAAWA,CAACC,GAAgBC,MAEzB,MADQA,IAAS,IAAIA,CAAM,KAAK,EACpB,IAAID,CAAM,IAGzBE,IAAaA,CAACF,GAAgBC,MAE3B,QADQA,IAAS,IAAIA,CAAM,KAAK,EAClB,IAAID,CAAM;AAgC1B,SAASG,EAAY;AAAA,EAC1BC,SAAAA;AAAAA,EACAC,aAAAA,IAAc;AAAA,EACdC,sBAAAA;AAAAA,EACAL,QAAAA,IAAS;AACO,GAAG;AACnB,QAAM;AAAA,IACJM,cAAcC;AAAAA,IACdC,eAAAA;AAAAA,IACAC,oBAAAA;AAAAA,EAAAA,IACEZ,EAAe;AAAA,IACjBM,SAAAA;AAAAA,IACAO,kBAAkBL;AAAAA,IAClBD,aAAAA;AAAAA,IACAO,MAAM;AAAA,EAAA,CACP;AAoBD,SAAO;AAAA,IACLC,aAfkBhB,EAAY,CAACG,MAAiC;AAChE,YAAM;AAAA,QAAEc,KAAAA;AAAAA,QAAKC,UAAAA;AAAAA,MAAAA,IAAaL,EAAmBV,CAAM,GAC7CgB,IAAaV,MAAyBN;AAE5C,aAAO;AAAA,QACLc,KAAAA;AAAAA,QACAC,UAAAA;AAAAA,QACAE,IAAIlB,EAASC,GAAQC,CAAM;AAAA,QAC3B,iBAAiBC,EAAWF,GAAQC,CAAM;AAAA,QAC1C,iBAAiBe;AAAAA,QACjBE,MAAM;AAAA,MAAA;AAAA,IAEV,GAAG,CAACZ,GAAsBI,GAAoBT,CAAM,CAAC;AAAA,IAInDO,iBAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAP,YAAYA,CAACF,MAAmBE,EAAWF,GAAQC,CAAM;AAAA,IACzDF,UAAUA,CAACC,MAAmBD,EAASC,GAAQC,CAAM;AAAA,EAAA;AAEzD;"}

package/dist/index22.js

@@ -1,7 +1,7 @@
 import s, { useState as S, useEffect as _ } from "react";
-import { useStableId as $ } from "./index184.js";
-import { getA11yNameAttributes as j } from "./index69.js";
-import { mergeIds as B } from "./index185.js";
+import { useStableId as $ } from "./index188.js";
+import { getA11yNameAttributes as j } from "./index70.js";
+import { mergeIds as B } from "./index189.js";
 /* empty css         */
 function d() {
   return d = Object.assign ? Object.assign.bind() : function(l) {

package/dist/index225.js

@@ -1,57 +1,7 @@
-import { useState as m, useEffect as w, useCallback as b } from "react";
-import { useScrollActiveIntoView as x } from "./index227.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
-  };
+function n(e) {
+  return new Promise((t) => setTimeout(t, e));
 }
 export {
-  E as useComboboxNavigation
+  n as delay
 };
 //# sourceMappingURL=index225.js.map

package/dist/index225.js.map

@@ -1 +1 @@
-{"version":3,"file":"index225.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":"index225.js","sources":["../src/utils/delay.ts"],"sourcesContent":["/**\n * Delays execution by the specified number of milliseconds\n * @param ms - The number of milliseconds to delay\n * @returns A Promise that resolves after the specified delay\n */\nexport function delay(ms: number): Promise<void> {\n    return new Promise(resolve => setTimeout(resolve, ms));\n} "],"names":["delay","ms","Promise","resolve","setTimeout"],"mappings":"AAKO,SAASA,EAAMC,GAA2B;AAC7C,SAAO,IAAIC,QAAQC,CAAAA,MAAWC,WAAWD,GAASF,CAAE,CAAC;AACzD;"}

package/dist/index227.js

@@ -1,22 +1,62 @@
-import { useEffect as s } from "react";
-const u = {
-  block: "nearest"
-};
-function m({
+import { useRef as E, useLayoutEffect as f } from "react";
+import { getFirstFocusableElement as d, getFocusableElements as g } from "./index229.js";
+function y(e, t) {
+  return t === "first" ? d({
+    container: e
+  }) || e : t === "container" ? e : typeof t == "string" ? e.querySelector(t) : t instanceof HTMLElement ? t : null;
+}
+function L({
+  enabled: e,
   containerRef: t,
-  activeIndex: o,
-  itemSelector: r = '[role="option"]',
-  enabled: c = !0,
-  scrollOptions: e = u
+  restoreFocus: i = !0,
+  initialFocus: l = "first"
 }) {
-  s(() => {
-    if (!c || o < 0 || !t?.current)
+  const s = E(null), m = E(null);
+  return f(() => {
+    if (!e) {
+      i && s.current && requestAnimationFrame(() => {
+        s.current?.focus(), s.current = null;
+      });
       return;
-    const n = t.current.querySelectorAll(r)[o];
-    n && n.scrollIntoView(e);
-  }, [o, t, r, c, e]);
+    }
+    const r = t.current;
+    r && (s.current = document.activeElement, requestAnimationFrame(() => {
+      y(r, l)?.focus();
+    }));
+  }, [e, t, i, l]), f(() => {
+    if (!e) return;
+    const r = t.current;
+    if (!r) return;
+    const c = (n) => {
+      if (n.key === "Tab") {
+        const u = g({
+          container: r
+        });
+        if (u.length === 0) {
+          n.preventDefault(), r.focus();
+          return;
+        }
+        const o = u[0], a = u[u.length - 1], v = document.activeElement;
+        n.shiftKey && v === o ? (n.preventDefault(), a.focus()) : !n.shiftKey && v === a && (n.preventDefault(), o.focus());
+      }
+    };
+    return document.addEventListener("keydown", c, !0), () => document.removeEventListener("keydown", c, !0);
+  }, [e, t]), f(() => {
+    if (!e) return;
+    const r = t.current;
+    if (!r) return;
+    const c = (n) => {
+      const u = n.target;
+      r.contains(u) ? m.current = u : (m.current || d({
+        container: r
+      }) || r).focus();
+    };
+    return document.addEventListener("focusin", c, !0), () => document.removeEventListener("focusin", c, !0);
+  }, [e, t]), {
+    triggerRef: s
+  };
 }
 export {
-  m as useScrollActiveIntoView
+  L as useFocusTrap
 };
 //# sourceMappingURL=index227.js.map

package/dist/index227.js.map

@@ -1 +1 @@
-{"version":3,"file":"index227.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;"}
+{"version":3,"file":"index227.js","sources":["../src/utils/a11y/useFocusTrap.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react';\nimport { getFocusableElements, getFirstFocusableElement } from './focusableElements';\n\nexport interface UseFocusTrapOptions<T extends HTMLElement = HTMLElement> {\n  /**\n   * Whether the focus trap is active.\n   */\n  enabled: boolean;\n  /**\n   * Container element ref to trap focus within.\n   */\n  containerRef: React.RefObject<T | null>;\n  /**\n   * Whether to restore focus to the element that had focus before trap activated.\n   * Default: true\n   */\n  restoreFocus?: boolean;\n  /**\n   * Initial focus target when trap activates.\n   * - 'first': Focus first focusable element (default)\n   * - 'container': Focus the container itself\n   * - CSS selector: Focus element matching selector\n   * - HTMLElement: Focus this specific element\n   */\n  initialFocus?: 'first' | 'container' | string | HTMLElement;\n}\n\nexport interface UseFocusTrapReturn {\n  /**\n   * Ref to the element that had focus before trap activated.\n   * Useful for manual focus restoration if needed.\n   */\n  triggerRef: React.MutableRefObject<HTMLElement | null>;\n}\n\n/**\n * Hook to trap focus within a container (for modals, dialogs, drawers).\n * \n * Implements WCAG 2.1 focus trap pattern:\n * - Moves focus into container on activation\n * - Wraps Tab/Shift+Tab navigation within container\n * - Restores focus to trigger element on deactivation\n * - Safety net: catches focus escaping via other means\n * \n * Note: For Escape key handling, use `useDismissOnEscape` hook separately.\n * This keeps focus trap (accessibility) separate from Escape handling (UX).\n * \n * @example\n * ```tsx\n * const MyModal = ({ isOpen, onClose }) => {\n *   const containerRef = useRef<HTMLDivElement>(null);\n *   \n *   // Escape handling (UX)\n *   useDismissOnEscape({\n *     containerRef,\n *     onDismiss: onClose,\n *     enabled: isOpen\n *   });\n *   \n *   // Focus trap (accessibility)\n *   const { triggerRef } = useFocusTrap({\n *     enabled: isOpen,\n *     containerRef,\n *     restoreFocus: true\n *   });\n *   \n *   return (\n *     <div ref={containerRef}>\n *       <button>First</button>\n *       <button>Second</button>\n *     </div>\n *   );\n * };\n * ```\n */\n/**\n * Resolve the initial focus target based on the initialFocus option.\n */\nfunction resolveInitialFocusTarget(\n  container: HTMLElement,\n  initialFocus: 'first' | 'container' | string | HTMLElement\n): HTMLElement | null {\n  if (initialFocus === 'first') {\n    return getFirstFocusableElement({ container }) || container;\n  }\n  if (initialFocus === 'container') {\n    return container;\n  }\n  if (typeof initialFocus === 'string') {\n    return container.querySelector<HTMLElement>(initialFocus);\n  }\n  if (initialFocus instanceof HTMLElement) {\n    return initialFocus;\n  }\n  return null;\n}\n\nexport function useFocusTrap<T extends HTMLElement = HTMLElement>({\n  enabled,\n  containerRef,\n  restoreFocus = true,\n  initialFocus = 'first'\n}: UseFocusTrapOptions<T>): UseFocusTrapReturn {\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const lastFocusedInContainer = useRef<HTMLElement | null>(null);\n\n  // Focus management: save trigger, move focus into container on activate, restore on deactivate\n  useLayoutEffect(() => {\n    if (!enabled) {\n      // Restore focus to trigger when trap deactivates\n      if (restoreFocus && triggerRef.current) {\n        requestAnimationFrame(() => {\n          triggerRef.current?.focus();\n          triggerRef.current = null;\n        });\n      }\n      return;\n    }\n\n    const container = containerRef.current;\n    if (!container) return;\n\n    // Save the element that had focus before trap activated\n    triggerRef.current = document.activeElement as HTMLElement;\n\n    // Focus initial target\n    requestAnimationFrame(() => {\n      resolveInitialFocusTarget(container, initialFocus)?.focus();\n    });\n  }, [enabled, containerRef, restoreFocus, initialFocus]);\n\n  // Focus trap: Tab wrapping (only when enabled)\n  useLayoutEffect(() => {\n    if (!enabled) return;\n    \n    const container = containerRef.current;\n    if (!container) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      // Tab wrapping\n      if (e.key === 'Tab') {\n        const focusables = getFocusableElements({ container });\n\n        if (focusables.length === 0) {\n          e.preventDefault();\n          container.focus();\n          return;\n        }\n\n        const first = focusables[0];\n        const last = focusables[focusables.length - 1];\n        const activeElement = document.activeElement;\n\n        if (e.shiftKey && activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        } else if (!e.shiftKey && activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown, true);\n    return () => document.removeEventListener('keydown', handleKeyDown, true);\n  }, [enabled, containerRef]);\n\n  // Focus trap safety net: catch focus escaping\n  useLayoutEffect(() => {\n    if (!enabled) return;\n    \n    const container = containerRef.current;\n    if (!container) return;\n\n    const handleFocusIn = (e: FocusEvent) => {\n      const target = e.target as Node;\n      \n      if (container.contains(target)) {\n        lastFocusedInContainer.current = target as HTMLElement;\n      } else {\n        // Focus escaped - redirect back\n        const fallback = lastFocusedInContainer.current \n          || getFirstFocusableElement({ container }) \n          || container;\n        fallback.focus();\n      }\n    };\n\n    document.addEventListener('focusin', handleFocusIn, true);\n    return () => document.removeEventListener('focusin', handleFocusIn, true);\n  }, [enabled, containerRef]);\n\n  return { triggerRef };\n}\n"],"names":["useRef","useLayoutEffect","getFirstFocusableElement","getFocusableElements","resolveInitialFocusTarget","container","initialFocus","querySelector","HTMLElement","useFocusTrap","enabled","containerRef","restoreFocus","triggerRef","lastFocusedInContainer","current","requestAnimationFrame","focus","document","activeElement","handleKeyDown","e","key","focusables","length","preventDefault","first","last","shiftKey","addEventListener","removeEventListener","handleFocusIn","target","contains"],"mappings":"AA8EA,SAAA,UAAAA,GAAA,mBAAAC,SAAA;AAAA,SAAA,4BAAAC,GAAA,wBAAAC,SAAA;AAAA,SAASC,EACPC,GACAC,GACoB;AACpB,SAAIA,MAAiB,UACZJ,EAAyB;AAAA,IAAEG,WAAAA;AAAAA,EAAAA,CAAW,KAAKA,IAEhDC,MAAiB,cACZD,IAEL,OAAOC,KAAiB,WACnBD,EAAUE,cAA2BD,CAAY,IAEtDA,aAAwBE,cACnBF,IAEF;AACT;AAEO,SAASG,EAAkD;AAAA,EAChEC,SAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfN,cAAAA,IAAe;AACO,GAAuB;AAC7C,QAAMO,IAAab,EAA2B,IAAI,GAC5Cc,IAAyBd,EAA2B,IAAI;AAG9DC,SAAAA,EAAgB,MAAM;AACpB,QAAI,CAACS,GAAS;AAEZ,MAAIE,KAAgBC,EAAWE,WAC7BC,sBAAsB,MAAM;AAC1BH,QAAAA,EAAWE,SAASE,MAAAA,GACpBJ,EAAWE,UAAU;AAAA,MACvB,CAAC;AAEH;AAAA,IACF;AAEA,UAAMV,IAAYM,EAAaI;AAC/B,IAAKV,MAGLQ,EAAWE,UAAUG,SAASC,eAG9BH,sBAAsB,MAAM;AAC1BZ,MAAAA,EAA0BC,GAAWC,CAAY,GAAGW,MAAAA;AAAAA,IACtD,CAAC;AAAA,EACH,GAAG,CAACP,GAASC,GAAcC,GAAcN,CAAY,CAAC,GAGtDL,EAAgB,MAAM;AACpB,QAAI,CAACS,EAAS;AAEd,UAAML,IAAYM,EAAaI;AAC/B,QAAI,CAACV,EAAW;AAEhB,UAAMe,IAAgBA,CAACC,MAAqB;AAE1C,UAAIA,EAAEC,QAAQ,OAAO;AACnB,cAAMC,IAAapB,EAAqB;AAAA,UAAEE,WAAAA;AAAAA,QAAAA,CAAW;AAErD,YAAIkB,EAAWC,WAAW,GAAG;AAC3BH,UAAAA,EAAEI,eAAAA,GACFpB,EAAUY,MAAAA;AACV;AAAA,QACF;AAEA,cAAMS,IAAQH,EAAW,CAAC,GACpBI,IAAOJ,EAAWA,EAAWC,SAAS,CAAC,GACvCL,IAAgBD,SAASC;AAE/B,QAAIE,EAAEO,YAAYT,MAAkBO,KAClCL,EAAEI,eAAAA,GACFE,EAAKV,MAAAA,KACI,CAACI,EAAEO,YAAYT,MAAkBQ,MAC1CN,EAAEI,eAAAA,GACFC,EAAMT,MAAAA;AAAAA,MAEV;AAAA,IACF;AAEAC,oBAASW,iBAAiB,WAAWT,GAAe,EAAI,GACjD,MAAMF,SAASY,oBAAoB,WAAWV,GAAe,EAAI;AAAA,EAC1E,GAAG,CAACV,GAASC,CAAY,CAAC,GAG1BV,EAAgB,MAAM;AACpB,QAAI,CAACS,EAAS;AAEd,UAAML,IAAYM,EAAaI;AAC/B,QAAI,CAACV,EAAW;AAEhB,UAAM0B,IAAgBA,CAACV,MAAkB;AACvC,YAAMW,IAASX,EAAEW;AAEjB,MAAI3B,EAAU4B,SAASD,CAAM,IAC3BlB,EAAuBC,UAAUiB,KAGhBlB,EAAuBC,WACnCb,EAAyB;AAAA,QAAEG,WAAAA;AAAAA,MAAAA,CAAW,KACtCA,GACIY,MAAAA;AAAAA,IAEb;AAEAC,oBAASW,iBAAiB,WAAWE,GAAe,EAAI,GACjD,MAAMb,SAASY,oBAAoB,WAAWC,GAAe,EAAI;AAAA,EAC1E,GAAG,CAACrB,GAASC,CAAY,CAAC,GAEnB;AAAA,IAAEE,YAAAA;AAAAA,EAAAA;AACX;"}

package/dist/index228.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 "./index230.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=index228.js.map

package/dist/index228.js.map

@@ -1 +1 @@
-{"version":3,"file":"index228.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":"index228.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/index229.js

@@ -1,13 +1,25 @@
-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);
+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
+}) {
+  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 default
+  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":["../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":"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,8 +1,22 @@
-import e from "./index233.js";
-function p(o, t) {
-  o.prototype = Object.create(t.prototype), o.prototype.constructor = o, e(o, t);
+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 {
-  p as default
+  m as useScrollActiveIntoView
 };
 //# sourceMappingURL=index230.js.map

package/dist/index230.js.map

@@ -1 +1 @@
-{"version":3,"file":"index230.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":"index230.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;"}