se-design 1.0.73-dev3 → 1.0.73-dev7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/dist/components/CustomModal/index.d.ts +4 -6
  2. package/dist/components/MenuList/index.d.ts +3 -2
  3. package/dist/components/Popover/index.d.ts +2 -2
  4. package/dist/index12.js +30 -18
  5. package/dist/index12.js.map +1 -1
  6. package/dist/index15.js +1 -1
  7. package/dist/index17.js +36 -33
  8. package/dist/index17.js.map +1 -1
  9. package/dist/index18.js +129 -124
  10. package/dist/index18.js.map +1 -1
  11. package/dist/index192.js +2 -2
  12. package/dist/{index229.js → index193.js} +1 -1
  13. package/dist/{index229.js.map → index193.js.map} +1 -1
  14. package/dist/index194.js +26 -0
  15. package/dist/index194.js.map +1 -0
  16. package/dist/index197.js +20 -80
  17. package/dist/index197.js.map +1 -1
  18. package/dist/index199.js +82 -21
  19. package/dist/index199.js.map +1 -1
  20. package/dist/{index207.js → index208.js} +1 -1
  21. package/dist/{index207.js.map → index208.js.map} +1 -1
  22. package/dist/{index215.js → index216.js} +1 -1
  23. package/dist/{index215.js.map → index216.js.map} +1 -1
  24. package/dist/{index218.js → index219.js} +1 -1
  25. package/dist/{index218.js.map → index219.js.map} +1 -1
  26. package/dist/{index227.js → index228.js} +1 -1
  27. package/dist/{index227.js.map → index228.js.map} +1 -1
  28. package/dist/index24.js +1 -1
  29. package/dist/index27.js +1 -1
  30. package/dist/index28.js +94 -90
  31. package/dist/index28.js.map +1 -1
  32. package/dist/index32.js +42 -44
  33. package/dist/index32.js.map +1 -1
  34. package/dist/index37.js +1 -1
  35. package/dist/index39.js +1 -1
  36. package/dist/index44.js +1 -1
  37. package/dist/index45.js +2 -2
  38. package/dist/index48.js +1 -1
  39. package/dist/index52.js +1 -1
  40. package/dist/index62.js +1 -1
  41. package/dist/index64.js +52 -60
  42. package/dist/index64.js.map +1 -1
  43. package/package.json +1 -1
  44. package/dist/index195.js +0 -27
  45. package/dist/index195.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"index229.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 * - 'none': Skip initial focus — browser handles it (e.g. autofocus attribute)\n * - CSS selector: Focus element matching selector\n * - HTMLElement: Focus this specific element\n */\n initialFocus?: 'first' | 'container' | 'none' | 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' | 'none' | string | HTMLElement\n): HTMLElement | null {\n if (initialFocus === 'none') return 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":"AA+EA,SAAA,UAAAA,GAAA,mBAAAC,SAAA;AAAA,SAAA,4BAAAC,GAAA,wBAAAC,SAAA;AAAA,SAASC,EACPC,GACAC,GACoB;AACpB,SAAIA,MAAiB,SAAe,OAChCA,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;"}
1
+ {"version":3,"file":"index193.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 * - 'none': Skip initial focus — browser handles it (e.g. autofocus attribute)\n * - CSS selector: Focus element matching selector\n * - HTMLElement: Focus this specific element\n */\n initialFocus?: 'first' | 'container' | 'none' | 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' | 'none' | string | HTMLElement\n): HTMLElement | null {\n if (initialFocus === 'none') return 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":"AA+EA,SAAA,UAAAA,GAAA,mBAAAC,SAAA;AAAA,SAAA,4BAAAC,GAAA,wBAAAC,SAAA;AAAA,SAASC,EACPC,GACAC,GACoB;AACpB,SAAIA,MAAiB,SAAe,OAChCA,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;"}
@@ -0,0 +1,26 @@
1
+ import { useEffect as d } from "react";
2
+ function p({
3
+ containerRef: r,
4
+ onDismiss: e,
5
+ enabled: n = !0,
6
+ preventDefault: u = !0,
7
+ stopPropagation: c = !0
8
+ }) {
9
+ d(() => {
10
+ if (!n || !e) return;
11
+ const o = r.current;
12
+ if (!o) return;
13
+ const a = (t) => {
14
+ t.key === "Escape" && o.contains(document.activeElement) && (u && t.preventDefault(), c && t.stopPropagation(), e());
15
+ };
16
+ return document.addEventListener("keydown", a, {
17
+ capture: !0
18
+ }), () => document.removeEventListener("keydown", a, {
19
+ capture: !0
20
+ });
21
+ }, [n, e, r, u, c]);
22
+ }
23
+ export {
24
+ p as useDismissOnEscape
25
+ };
26
+ //# sourceMappingURL=index194.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index194.js","sources":["../src/utils/a11y/useDismissOnEscape.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type { RefObject } from 'react';\n\nexport interface UseDismissOnEscapeOptions<T extends HTMLElement = HTMLElement> {\n /**\n * Container element ref to check if focus is within.\n * Escape will only trigger if focus is within this container.\n */\n containerRef: RefObject<T | null>;\n /**\n * Callback when Escape key is pressed and focus is within container.\n */\n onDismiss?: () => void;\n /**\n * Whether the Escape handler is active.\n * Default: true\n */\n enabled?: boolean;\n /**\n * Whether to call preventDefault() when handling Escape.\n * Default: true\n */\n preventDefault?: boolean;\n /**\n * Whether to call stopPropagation() when handling Escape.\n * Default: true\n */\n stopPropagation?: boolean;\n}\n\n/**\n * Hook to handle Escape key dismissal when focus is within a container.\n * \n * This is a UX pattern: if user is interacting with an overlay/sidebar\n * (indicated by focus being within it), Escape should close it.\n * \n * @example\n * ```tsx\n * const MySidebar = ({ isOpen, onClose }) => {\n * const containerRef = useRef<HTMLDivElement>(null);\n * \n * useDismissOnEscape({\n * containerRef,\n * onDismiss: onClose,\n * enabled: isOpen\n * });\n * \n * return <div ref={containerRef}>...</div>;\n * };\n * ```\n */\nexport function useDismissOnEscape<T extends HTMLElement = HTMLElement>({\n containerRef,\n onDismiss,\n enabled = true,\n preventDefault = true,\n stopPropagation = true\n}: UseDismissOnEscapeOptions<T>): void {\n useEffect(() => {\n if (!enabled || !onDismiss) return;\n \n const container = containerRef.current;\n if (!container) return;\n\n const handleEscape = (e: KeyboardEvent) => {\n if (e.key === 'Escape' && container.contains(document.activeElement)) {\n preventDefault && e.preventDefault();\n stopPropagation && e.stopPropagation();\n onDismiss();\n }\n };\n\n document.addEventListener('keydown', handleEscape, { capture: true });\n return () => document.removeEventListener('keydown', handleEscape, { capture: true });\n }, [enabled, onDismiss, containerRef, preventDefault, stopPropagation]);\n}\n"],"names":["useEffect","useDismissOnEscape","containerRef","onDismiss","enabled","preventDefault","stopPropagation","container","current","handleEscape","e","key","contains","document","activeElement","addEventListener","capture","removeEventListener"],"mappings":"AAmDO,SAAA,aAAAA,SAAA;AAAA,SAASC,EAAwD;AAAA,EACtEC,cAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,gBAAAA,IAAiB;AAAA,EACjBC,iBAAAA,IAAkB;AACU,GAAS;AACrCN,EAAAA,EAAU,MAAM;AACd,QAAI,CAACI,KAAW,CAACD,EAAW;AAE5B,UAAMI,IAAYL,EAAaM;AAC/B,QAAI,CAACD,EAAW;AAEhB,UAAME,IAAeA,CAACC,MAAqB;AACzC,MAAIA,EAAEC,QAAQ,YAAYJ,EAAUK,SAASC,SAASC,aAAa,MACjET,KAAkBK,EAAEL,eAAAA,GACpBC,KAAmBI,EAAEJ,gBAAAA,GACrBH,EAAAA;AAAAA,IAEJ;AAEAU,oBAASE,iBAAiB,WAAWN,GAAc;AAAA,MAAEO,SAAS;AAAA,IAAA,CAAM,GAC7D,MAAMH,SAASI,oBAAoB,WAAWR,GAAc;AAAA,MAAEO,SAAS;AAAA,IAAA,CAAM;AAAA,EACtF,GAAG,CAACZ,GAASD,GAAWD,GAAcG,GAAgBC,CAAe,CAAC;AACxE;"}
package/dist/index197.js CHANGED
@@ -1,87 +1,27 @@
1
- import { useRef as u, useCallback as f, useEffect as P } from "react";
2
- import { useComboboxNavigation as y } from "./index231.js";
3
- import { useDismissOnFocusOut as R } from "./index195.js";
4
- function M({
5
- items: l,
6
- isOpen: t,
7
- onOpenChange: s,
8
- onSelect: g,
9
- listboxId: n,
10
- loop: h = !0,
11
- disabled: x = !1,
12
- optionSelector: b = '[role="option"]',
13
- hasItems: c
1
+ import * as e from "react";
2
+ function p({
3
+ disabled: t = !1,
4
+ onFocusIn: u,
5
+ onFocusOut: n,
6
+ onEscape: a,
7
+ closeOnEscape: c = !0
14
8
  }) {
15
- const d = u(null), r = u(!1), i = u(!1), m = c !== void 0 ? c : l.length > 0, a = f(() => {
16
- s(!1);
17
- }, [s]);
18
- P(() => {
19
- t || (r.current = !1);
20
- }, [t]);
21
- const e = y({
22
- items: l,
23
- isOpen: t,
24
- onSelect: g,
25
- onClose: a,
26
- onOpen: () => s(!0),
27
- loop: h,
28
- disabled: x,
29
- listboxRef: d,
30
- optionSelector: b
31
- }), p = R({
32
- onFocusOut: a,
33
- onEscape: a,
34
- disabled: !t
35
- }), v = {
36
- ...p,
37
- onBlurCapture: (o) => {
38
- if (!r.current) {
39
- if (i.current) {
40
- i.current = !1;
41
- return;
42
- }
43
- p.onBlurCapture(o);
44
- }
45
- }
46
- }, I = {
47
- role: "combobox",
48
- "aria-expanded": t && m,
49
- "aria-haspopup": "listbox",
50
- "aria-controls": t ? n : void 0,
51
- "aria-autocomplete": "list",
52
- "aria-activedescendant": e.highlightedIndex >= 0 ? e.getOptionId(n, e.highlightedIndex) : void 0,
53
- onKeyDown: (o) => {
54
- o.key === "Tab" && (i.current = !0), e.handleKeyDown(o);
55
- }
56
- }, w = {
57
- id: n,
58
- role: "listbox",
59
- ref: d,
60
- onMouseDownCapture: (o) => {
61
- r.current = !0;
62
- },
63
- onMouseUpCapture: (o) => {
64
- r.current = !1;
65
- },
66
- onMouseLeave: (o) => {
67
- r.current = !1;
68
- }
69
- }, C = f((o, D = !1) => ({
70
- id: e.getOptionId(n, o),
71
- role: "option",
72
- "aria-selected": D
73
- }), [e.getOptionId, n]);
9
+ const f = e.useCallback((r) => {
10
+ t || u?.();
11
+ }, [t, u]), s = e.useCallback((r) => {
12
+ if (t) return;
13
+ const o = r.relatedTarget;
14
+ o && r.currentTarget.contains(o) || n?.();
15
+ }, [t, n]), C = e.useCallback((r) => {
16
+ t || !c || r.key !== "Escape" || (r.preventDefault(), a?.());
17
+ }, [t, c, a]);
74
18
  return {
75
- containerProps: v,
76
- inputProps: I,
77
- listboxProps: w,
78
- getOptionProps: C,
79
- highlightedIndex: e.highlightedIndex,
80
- setHighlightedIndex: e.setHighlightedIndex,
81
- getOptionId: e.getOptionId
19
+ onFocusCapture: f,
20
+ onBlurCapture: s,
21
+ onKeyDownCapture: C
82
22
  };
83
23
  }
84
24
  export {
85
- M as useCombobox
25
+ p as useDismissOnFocusOut
86
26
  };
87
27
  //# sourceMappingURL=index197.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index197.js","sources":["../src/utils/a11y/useCombobox.ts"],"sourcesContent":["import { useRef, useCallback, useEffect } from 'react';\nimport type { RefObject } from 'react';\nimport { useComboboxNavigation } from './useComboboxNavigation';\nimport { useDismissOnFocusOut } from './useDismissOnFocusOut';\nimport type { UseDismissOnFocusOutReturn } from './useDismissOnFocusOut';\n\nexport interface UseComboboxOptions<T = any> {\n /**\n * Array of items to navigate through\n */\n items: T[];\n \n /**\n * Whether the dropdown is currently open\n */\n isOpen: boolean;\n \n /**\n * Callback to change the open state\n */\n onOpenChange: (open: boolean) => void;\n \n /**\n * Callback when an item is selected (Enter key)\n */\n onSelect: (item: T, index: number) => void;\n \n /**\n * Stable ID for the listbox element\n */\n listboxId: string;\n \n /**\n * Whether to wrap around at the ends of the list.\n * Default: true\n */\n loop?: boolean;\n \n /**\n * Whether keyboard navigation is disabled\n * (e.g., for custom rendered content)\n */\n disabled?: boolean;\n \n /**\n * CSS selector for option elements (default: '[role=\"option\"]')\n */\n optionSelector?: string;\n \n /**\n * Whether the listbox has any items to show\n * Used for aria-expanded logic\n * Default: items.length > 0\n */\n hasItems?: boolean;\n}\n\nexport interface UseComboboxReturn {\n /**\n * Props to spread on the container element (handles dismiss on focus out)\n */\n containerProps: UseDismissOnFocusOutReturn<HTMLElement>;\n \n /**\n * Props to spread on the combobox input element\n */\n inputProps: {\n role: 'combobox';\n 'aria-expanded': boolean;\n 'aria-haspopup': 'listbox';\n 'aria-controls': string | undefined;\n 'aria-autocomplete': 'list';\n 'aria-activedescendant': string | undefined;\n onKeyDown: (e: React.KeyboardEvent) => void;\n };\n \n /**\n * Props to spread on the listbox element\n */\n listboxProps: {\n id: string;\n role: 'listbox';\n ref: RefObject<HTMLDivElement | null>;\n onMouseDownCapture: (e: React.MouseEvent) => void;\n onMouseUpCapture: (e: React.MouseEvent) => void;\n onMouseLeave: (e: React.MouseEvent) => void;\n };\n \n /**\n * Generate props for an option element at the given index\n * @param selected - Whether this option is the currently selected/chosen value (not keyboard highlight)\n */\n getOptionProps: (index: number, selected?: boolean) => {\n id: string;\n role: 'option';\n 'aria-selected': boolean;\n };\n \n /**\n * Currently highlighted index (-1 if none)\n */\n highlightedIndex: number;\n \n /**\n * Set the highlighted index manually\n */\n setHighlightedIndex: (index: number | ((prev: number) => number)) => void;\n \n /**\n * Generate stable ID for an option\n */\n getOptionId: (listboxId: string, index: number) => string;\n}\n\n/**\n * Comprehensive hook for implementing WAI-ARIA combobox pattern.\n * \n * Combines:\n * - Keyboard navigation (Arrow Up/Down, Enter, Escape, Tab)\n * - Focus management and dismissal\n * - ARIA attributes for accessibility\n * - Auto-scroll highlighted item into view\n * \n * This hook provides a complete, batteries-included solution for building\n * accessible combobox components (autocomplete, select, search with suggestions, etc.)\n * \n * @example Basic usage\n * ```tsx\n * const MyCombobox = () => {\n * const [isOpen, setIsOpen] = useState(false);\n * const [items, setItems] = useState(['Apple', 'Banana', 'Cherry']);\n * \n * const {\n * containerProps,\n * inputProps,\n * listboxProps,\n * getOptionProps,\n * highlightedIndex\n * } = useCombobox({\n * items,\n * isOpen,\n * onOpenChange: setIsOpen,\n * onSelect: (item) => console.log('Selected:', item),\n * listboxId: 'my-listbox'\n * });\n * \n * return (\n * <div {...containerProps}>\n * <input {...inputProps} />\n * {isOpen && (\n * <div {...listboxProps}>\n * {items.map((item, i) => (\n * <div key={i} {...getOptionProps(i)}>\n * {item}\n * </div>\n * ))}\n * </div>\n * )}\n * </div>\n * );\n * };\n * ```\n * \n * @example With custom ARIA labels and handlers\n * ```tsx\n * const MySearchBox = () => {\n * const [query, setQuery] = useState('');\n * const [suggestions, setSuggestions] = useState([]);\n * const [isOpen, setIsOpen] = useState(false);\n * \n * const { containerProps, inputProps, listboxProps, getOptionProps } = useCombobox({\n * items: suggestions,\n * isOpen,\n * onOpenChange: setIsOpen,\n * onSelect: (suggestion) => {\n * setQuery(suggestion);\n * setIsOpen(false);\n * },\n * listboxId: 'search-suggestions'\n * });\n * \n * return (\n * <div {...containerProps}>\n * <input\n * {...inputProps}\n * value={query}\n * onChange={(e) => setQuery(e.target.value)}\n * aria-label=\"Search\"\n * />\n * {isOpen && suggestions.length > 0 && (\n * <div {...listboxProps} aria-label=\"Search suggestions\">\n * {suggestions.map((suggestion, i) => (\n * <div\n * key={i}\n * {...getOptionProps(i)}\n * onClick={() => {\n * setQuery(suggestion);\n * setIsOpen(false);\n * }}\n * >\n * {suggestion}\n * </div>\n * ))}\n * </div>\n * )}\n * </div>\n * );\n * };\n * ```\n */\nexport function useCombobox<T = any>({\n items,\n isOpen,\n onOpenChange,\n onSelect,\n listboxId,\n loop = true,\n disabled = false,\n optionSelector = '[role=\"option\"]',\n hasItems\n}: UseComboboxOptions<T>): UseComboboxReturn {\n const listboxRef = useRef<HTMLDivElement | null>(null);\n const pointerDownInListboxRef = useRef(false);\n const tabKeyPressedRef = useRef(false);\n \n // Determine if we should show as expanded\n const shouldShowExpanded = hasItems !== undefined ? hasItems : items.length > 0;\n \n // Close dropdown callback\n const closeDropdown = useCallback(() => {\n onOpenChange(false);\n }, [onOpenChange]);\n\n // Ensure pointer state doesn't get stuck when listbox unmounts\n useEffect(() => {\n if (!isOpen) {\n pointerDownInListboxRef.current = false;\n }\n }, [isOpen]);\n \n // Keyboard navigation with aria-activedescendant\n const navigation = useComboboxNavigation<T>({\n items,\n isOpen,\n onSelect,\n onClose: closeDropdown,\n onOpen: () => onOpenChange(true),\n loop,\n disabled,\n listboxRef,\n optionSelector\n });\n \n // Focus out / Escape dismissal\n const dismissHandlers = useDismissOnFocusOut({\n onFocusOut: closeDropdown,\n onEscape: closeDropdown,\n disabled: !isOpen\n });\n\n const containerProps: UseDismissOnFocusOutReturn<HTMLElement> = {\n ...dismissHandlers,\n onBlurCapture: (e) => {\n // Clicking inside a listbox option can blur the input (relatedTarget is null),\n // which would dismiss before the click handler runs. Prevent that.\n if (pointerDownInListboxRef.current) return;\n \n // Tab key pressed - let Tab handler close dropdown, skip blur detection\n if (tabKeyPressedRef.current) {\n tabKeyPressedRef.current = false;\n return;\n }\n \n dismissHandlers.onBlurCapture(e);\n }\n };\n \n // Build input props\n const inputProps = {\n role: 'combobox' as const,\n 'aria-expanded': isOpen && shouldShowExpanded,\n 'aria-haspopup': 'listbox' as const,\n 'aria-controls': isOpen ? listboxId : undefined,\n 'aria-autocomplete': 'list' as const,\n 'aria-activedescendant': \n navigation.highlightedIndex >= 0 \n ? navigation.getOptionId(listboxId, navigation.highlightedIndex) \n : undefined,\n onKeyDown: (e: React.KeyboardEvent) => {\n // Set flag when Tab is pressed (before blur fires)\n if (e.key === 'Tab') {\n tabKeyPressedRef.current = true;\n }\n navigation.handleKeyDown(e);\n }\n };\n \n // Build listbox props\n const listboxProps = {\n id: listboxId,\n role: 'listbox' as const,\n ref: listboxRef,\n onMouseDownCapture: (_e: React.MouseEvent) => {\n pointerDownInListboxRef.current = true;\n },\n onMouseUpCapture: (_e: React.MouseEvent) => {\n pointerDownInListboxRef.current = false;\n },\n onMouseLeave: (_e: React.MouseEvent) => {\n pointerDownInListboxRef.current = false;\n }\n };\n \n // Option props generator\n const getOptionProps = useCallback(\n (index: number, selected: boolean = false) => ({\n id: navigation.getOptionId(listboxId, index),\n role: 'option' as const,\n 'aria-selected': selected\n }),\n [navigation.getOptionId, listboxId]\n );\n \n return {\n containerProps,\n inputProps,\n listboxProps,\n getOptionProps,\n highlightedIndex: navigation.highlightedIndex,\n setHighlightedIndex: navigation.setHighlightedIndex,\n getOptionId: navigation.getOptionId\n };\n}\n"],"names":["useRef","useCallback","useEffect","useComboboxNavigation","useDismissOnFocusOut","useCombobox","items","isOpen","onOpenChange","onSelect","listboxId","loop","disabled","optionSelector","hasItems","listboxRef","pointerDownInListboxRef","tabKeyPressedRef","shouldShowExpanded","undefined","length","closeDropdown","current","navigation","onClose","onOpen","dismissHandlers","onFocusOut","onEscape","containerProps","onBlurCapture","e","inputProps","role","highlightedIndex","getOptionId","onKeyDown","key","handleKeyDown","listboxProps","id","ref","onMouseDownCapture","_e","onMouseUpCapture","onMouseLeave","getOptionProps","index","selected","setHighlightedIndex"],"mappings":"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"}
1
+ {"version":3,"file":"index197.js","sources":["../src/utils/a11y/useDismissOnFocusOut.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type UseDismissOnFocusOutOptions = {\n /**\n * Disable all handlers (no-ops). Useful when a component provides alternate\n * focus/keyboard behavior (e.g., disabled-trigger tooltip wrapper).\n */\n disabled?: boolean;\n /**\n * Called when focus enters anywhere within the target.\n */\n onFocusIn?: () => void;\n /**\n * Called when focus leaves the target (i.e., focus moves to an element\n * outside the currentTarget).\n */\n onFocusOut?: () => void;\n /**\n * Called when Escape is pressed while focus is within the target.\n */\n onEscape?: () => void;\n /**\n * Whether Escape should trigger dismissal. Default: true.\n */\n closeOnEscape?: boolean;\n};\n\nexport type UseDismissOnFocusOutReturn<T extends HTMLElement = HTMLElement> = {\n onFocusCapture: (e: React.FocusEvent<T>) => void;\n onBlurCapture: (e: React.FocusEvent<T>) => void;\n onKeyDownCapture: (e: React.KeyboardEvent<T>) => void;\n};\n\n/**\n * Returns capture-phase handlers to \"show on focus within\" and \"dismiss on focus out\",\n * with optional Escape-to-dismiss.\n *\n * Intended for non-interactive surfaces like tooltips where content should remain\n * visible while focus stays within the wrapper.\n */\nexport function useDismissOnFocusOut<T extends HTMLElement = HTMLElement>({\n disabled = false,\n onFocusIn,\n onFocusOut,\n onEscape,\n closeOnEscape = true\n}: UseDismissOnFocusOutOptions): UseDismissOnFocusOutReturn<T> {\n const onFocusCapture = React.useCallback(\n (_e: React.FocusEvent<T>) => {\n if (disabled) return;\n onFocusIn?.();\n },\n [disabled, onFocusIn]\n );\n\n const onBlurCapture = React.useCallback(\n (e: React.FocusEvent<T>) => {\n if (disabled) return;\n\n const nextFocused = e.relatedTarget as Node | null;\n if (nextFocused && e.currentTarget.contains(nextFocused)) return;\n\n onFocusOut?.();\n },\n [disabled, onFocusOut]\n );\n\n const onKeyDownCapture = React.useCallback(\n (e: React.KeyboardEvent<T>) => {\n if (disabled || !closeOnEscape || e.key !== 'Escape') return;\n\n e.preventDefault();\n onEscape?.();\n },\n [disabled, closeOnEscape, onEscape]\n );\n\n return { onFocusCapture, onBlurCapture, onKeyDownCapture };\n}\n\n"],"names":["React","useDismissOnFocusOut","disabled","onFocusIn","onFocusOut","onEscape","closeOnEscape","onFocusCapture","useCallback","_e","onBlurCapture","e","nextFocused","relatedTarget","currentTarget","contains","onKeyDownCapture","key","preventDefault"],"mappings":"AAwCO,YAAAA,OAAA;AAAA,SAASC,EAA0D;AAAA,EACxEC,UAAAA,IAAW;AAAA,EACXC,WAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,eAAAA,IAAgB;AACW,GAAkC;AAC7D,QAAMC,IAAiBP,EAAMQ,YAC3B,CAACC,MAA4B;AAC3B,IAAIP,KACJC,IAAAA;AAAAA,EACF,GACA,CAACD,GAAUC,CAAS,CACtB,GAEMO,IAAgBV,EAAMQ,YAC1B,CAACG,MAA2B;AAC1B,QAAIT,EAAU;AAEd,UAAMU,IAAcD,EAAEE;AACtB,IAAID,KAAeD,EAAEG,cAAcC,SAASH,CAAW,KAEvDR,IAAAA;AAAAA,EACF,GACA,CAACF,GAAUE,CAAU,CACvB,GAEMY,IAAmBhB,EAAMQ,YAC7B,CAACG,MAA8B;AAC7B,IAAIT,KAAY,CAACI,KAAiBK,EAAEM,QAAQ,aAE5CN,EAAEO,eAAAA,GACFb,IAAAA;AAAAA,EACF,GACA,CAACH,GAAUI,GAAeD,CAAQ,CACpC;AAEA,SAAO;AAAA,IAAEE,gBAAAA;AAAAA,IAAgBG,eAAAA;AAAAA,IAAeM,kBAAAA;AAAAA,EAAAA;AAC1C;"}
package/dist/index199.js CHANGED
@@ -1,26 +1,87 @@
1
- import { useEffect as d } from "react";
2
- function p({
3
- containerRef: r,
4
- onDismiss: e,
5
- enabled: n = !0,
6
- preventDefault: u = !0,
7
- stopPropagation: c = !0
1
+ import { useRef as u, useCallback as f, useEffect as P } from "react";
2
+ import { useComboboxNavigation as y } from "./index231.js";
3
+ import { useDismissOnFocusOut as R } from "./index197.js";
4
+ function M({
5
+ items: l,
6
+ isOpen: t,
7
+ onOpenChange: s,
8
+ onSelect: g,
9
+ listboxId: n,
10
+ loop: h = !0,
11
+ disabled: x = !1,
12
+ optionSelector: b = '[role="option"]',
13
+ hasItems: c
8
14
  }) {
9
- d(() => {
10
- if (!n || !e) return;
11
- const o = r.current;
12
- if (!o) return;
13
- const a = (t) => {
14
- t.key === "Escape" && o.contains(document.activeElement) && (u && t.preventDefault(), c && t.stopPropagation(), e());
15
- };
16
- return document.addEventListener("keydown", a, {
17
- capture: !0
18
- }), () => document.removeEventListener("keydown", a, {
19
- capture: !0
20
- });
21
- }, [n, e, r, u, c]);
15
+ const d = u(null), r = u(!1), i = u(!1), m = c !== void 0 ? c : l.length > 0, a = f(() => {
16
+ s(!1);
17
+ }, [s]);
18
+ P(() => {
19
+ t || (r.current = !1);
20
+ }, [t]);
21
+ const e = y({
22
+ items: l,
23
+ isOpen: t,
24
+ onSelect: g,
25
+ onClose: a,
26
+ onOpen: () => s(!0),
27
+ loop: h,
28
+ disabled: x,
29
+ listboxRef: d,
30
+ optionSelector: b
31
+ }), p = R({
32
+ onFocusOut: a,
33
+ onEscape: a,
34
+ disabled: !t
35
+ }), v = {
36
+ ...p,
37
+ onBlurCapture: (o) => {
38
+ if (!r.current) {
39
+ if (i.current) {
40
+ i.current = !1;
41
+ return;
42
+ }
43
+ p.onBlurCapture(o);
44
+ }
45
+ }
46
+ }, I = {
47
+ role: "combobox",
48
+ "aria-expanded": t && m,
49
+ "aria-haspopup": "listbox",
50
+ "aria-controls": t ? n : void 0,
51
+ "aria-autocomplete": "list",
52
+ "aria-activedescendant": e.highlightedIndex >= 0 ? e.getOptionId(n, e.highlightedIndex) : void 0,
53
+ onKeyDown: (o) => {
54
+ o.key === "Tab" && (i.current = !0), e.handleKeyDown(o);
55
+ }
56
+ }, w = {
57
+ id: n,
58
+ role: "listbox",
59
+ ref: d,
60
+ onMouseDownCapture: (o) => {
61
+ r.current = !0;
62
+ },
63
+ onMouseUpCapture: (o) => {
64
+ r.current = !1;
65
+ },
66
+ onMouseLeave: (o) => {
67
+ r.current = !1;
68
+ }
69
+ }, C = f((o, D = !1) => ({
70
+ id: e.getOptionId(n, o),
71
+ role: "option",
72
+ "aria-selected": D
73
+ }), [e.getOptionId, n]);
74
+ return {
75
+ containerProps: v,
76
+ inputProps: I,
77
+ listboxProps: w,
78
+ getOptionProps: C,
79
+ highlightedIndex: e.highlightedIndex,
80
+ setHighlightedIndex: e.setHighlightedIndex,
81
+ getOptionId: e.getOptionId
82
+ };
22
83
  }
23
84
  export {
24
- p as useDismissOnEscape
85
+ M as useCombobox
25
86
  };
26
87
  //# sourceMappingURL=index199.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index199.js","sources":["../src/utils/a11y/useDismissOnEscape.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type { RefObject } from 'react';\n\nexport interface UseDismissOnEscapeOptions<T extends HTMLElement = HTMLElement> {\n /**\n * Container element ref to check if focus is within.\n * Escape will only trigger if focus is within this container.\n */\n containerRef: RefObject<T | null>;\n /**\n * Callback when Escape key is pressed and focus is within container.\n */\n onDismiss?: () => void;\n /**\n * Whether the Escape handler is active.\n * Default: true\n */\n enabled?: boolean;\n /**\n * Whether to call preventDefault() when handling Escape.\n * Default: true\n */\n preventDefault?: boolean;\n /**\n * Whether to call stopPropagation() when handling Escape.\n * Default: true\n */\n stopPropagation?: boolean;\n}\n\n/**\n * Hook to handle Escape key dismissal when focus is within a container.\n * \n * This is a UX pattern: if user is interacting with an overlay/sidebar\n * (indicated by focus being within it), Escape should close it.\n * \n * @example\n * ```tsx\n * const MySidebar = ({ isOpen, onClose }) => {\n * const containerRef = useRef<HTMLDivElement>(null);\n * \n * useDismissOnEscape({\n * containerRef,\n * onDismiss: onClose,\n * enabled: isOpen\n * });\n * \n * return <div ref={containerRef}>...</div>;\n * };\n * ```\n */\nexport function useDismissOnEscape<T extends HTMLElement = HTMLElement>({\n containerRef,\n onDismiss,\n enabled = true,\n preventDefault = true,\n stopPropagation = true\n}: UseDismissOnEscapeOptions<T>): void {\n useEffect(() => {\n if (!enabled || !onDismiss) return;\n \n const container = containerRef.current;\n if (!container) return;\n\n const handleEscape = (e: KeyboardEvent) => {\n if (e.key === 'Escape' && container.contains(document.activeElement)) {\n preventDefault && e.preventDefault();\n stopPropagation && e.stopPropagation();\n onDismiss();\n }\n };\n\n document.addEventListener('keydown', handleEscape, { capture: true });\n return () => document.removeEventListener('keydown', handleEscape, { capture: true });\n }, [enabled, onDismiss, containerRef, preventDefault, stopPropagation]);\n}\n"],"names":["useEffect","useDismissOnEscape","containerRef","onDismiss","enabled","preventDefault","stopPropagation","container","current","handleEscape","e","key","contains","document","activeElement","addEventListener","capture","removeEventListener"],"mappings":"AAmDO,SAAA,aAAAA,SAAA;AAAA,SAASC,EAAwD;AAAA,EACtEC,cAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,gBAAAA,IAAiB;AAAA,EACjBC,iBAAAA,IAAkB;AACU,GAAS;AACrCN,EAAAA,EAAU,MAAM;AACd,QAAI,CAACI,KAAW,CAACD,EAAW;AAE5B,UAAMI,IAAYL,EAAaM;AAC/B,QAAI,CAACD,EAAW;AAEhB,UAAME,IAAeA,CAACC,MAAqB;AACzC,MAAIA,EAAEC,QAAQ,YAAYJ,EAAUK,SAASC,SAASC,aAAa,MACjET,KAAkBK,EAAEL,eAAAA,GACpBC,KAAmBI,EAAEJ,gBAAAA,GACrBH,EAAAA;AAAAA,IAEJ;AAEAU,oBAASE,iBAAiB,WAAWN,GAAc;AAAA,MAAEO,SAAS;AAAA,IAAA,CAAM,GAC7D,MAAMH,SAASI,oBAAoB,WAAWR,GAAc;AAAA,MAAEO,SAAS;AAAA,IAAA,CAAM;AAAA,EACtF,GAAG,CAACZ,GAASD,GAAWD,GAAcG,GAAgBC,CAAe,CAAC;AACxE;"}
1
+ {"version":3,"file":"index199.js","sources":["../src/utils/a11y/useCombobox.ts"],"sourcesContent":["import { useRef, useCallback, useEffect } from 'react';\nimport type { RefObject } from 'react';\nimport { useComboboxNavigation } from './useComboboxNavigation';\nimport { useDismissOnFocusOut } from './useDismissOnFocusOut';\nimport type { UseDismissOnFocusOutReturn } from './useDismissOnFocusOut';\n\nexport interface UseComboboxOptions<T = any> {\n /**\n * Array of items to navigate through\n */\n items: T[];\n \n /**\n * Whether the dropdown is currently open\n */\n isOpen: boolean;\n \n /**\n * Callback to change the open state\n */\n onOpenChange: (open: boolean) => void;\n \n /**\n * Callback when an item is selected (Enter key)\n */\n onSelect: (item: T, index: number) => void;\n \n /**\n * Stable ID for the listbox element\n */\n listboxId: string;\n \n /**\n * Whether to wrap around at the ends of the list.\n * Default: true\n */\n loop?: boolean;\n \n /**\n * Whether keyboard navigation is disabled\n * (e.g., for custom rendered content)\n */\n disabled?: boolean;\n \n /**\n * CSS selector for option elements (default: '[role=\"option\"]')\n */\n optionSelector?: string;\n \n /**\n * Whether the listbox has any items to show\n * Used for aria-expanded logic\n * Default: items.length > 0\n */\n hasItems?: boolean;\n}\n\nexport interface UseComboboxReturn {\n /**\n * Props to spread on the container element (handles dismiss on focus out)\n */\n containerProps: UseDismissOnFocusOutReturn<HTMLElement>;\n \n /**\n * Props to spread on the combobox input element\n */\n inputProps: {\n role: 'combobox';\n 'aria-expanded': boolean;\n 'aria-haspopup': 'listbox';\n 'aria-controls': string | undefined;\n 'aria-autocomplete': 'list';\n 'aria-activedescendant': string | undefined;\n onKeyDown: (e: React.KeyboardEvent) => void;\n };\n \n /**\n * Props to spread on the listbox element\n */\n listboxProps: {\n id: string;\n role: 'listbox';\n ref: RefObject<HTMLDivElement | null>;\n onMouseDownCapture: (e: React.MouseEvent) => void;\n onMouseUpCapture: (e: React.MouseEvent) => void;\n onMouseLeave: (e: React.MouseEvent) => void;\n };\n \n /**\n * Generate props for an option element at the given index\n * @param selected - Whether this option is the currently selected/chosen value (not keyboard highlight)\n */\n getOptionProps: (index: number, selected?: boolean) => {\n id: string;\n role: 'option';\n 'aria-selected': boolean;\n };\n \n /**\n * Currently highlighted index (-1 if none)\n */\n highlightedIndex: number;\n \n /**\n * Set the highlighted index manually\n */\n setHighlightedIndex: (index: number | ((prev: number) => number)) => void;\n \n /**\n * Generate stable ID for an option\n */\n getOptionId: (listboxId: string, index: number) => string;\n}\n\n/**\n * Comprehensive hook for implementing WAI-ARIA combobox pattern.\n * \n * Combines:\n * - Keyboard navigation (Arrow Up/Down, Enter, Escape, Tab)\n * - Focus management and dismissal\n * - ARIA attributes for accessibility\n * - Auto-scroll highlighted item into view\n * \n * This hook provides a complete, batteries-included solution for building\n * accessible combobox components (autocomplete, select, search with suggestions, etc.)\n * \n * @example Basic usage\n * ```tsx\n * const MyCombobox = () => {\n * const [isOpen, setIsOpen] = useState(false);\n * const [items, setItems] = useState(['Apple', 'Banana', 'Cherry']);\n * \n * const {\n * containerProps,\n * inputProps,\n * listboxProps,\n * getOptionProps,\n * highlightedIndex\n * } = useCombobox({\n * items,\n * isOpen,\n * onOpenChange: setIsOpen,\n * onSelect: (item) => console.log('Selected:', item),\n * listboxId: 'my-listbox'\n * });\n * \n * return (\n * <div {...containerProps}>\n * <input {...inputProps} />\n * {isOpen && (\n * <div {...listboxProps}>\n * {items.map((item, i) => (\n * <div key={i} {...getOptionProps(i)}>\n * {item}\n * </div>\n * ))}\n * </div>\n * )}\n * </div>\n * );\n * };\n * ```\n * \n * @example With custom ARIA labels and handlers\n * ```tsx\n * const MySearchBox = () => {\n * const [query, setQuery] = useState('');\n * const [suggestions, setSuggestions] = useState([]);\n * const [isOpen, setIsOpen] = useState(false);\n * \n * const { containerProps, inputProps, listboxProps, getOptionProps } = useCombobox({\n * items: suggestions,\n * isOpen,\n * onOpenChange: setIsOpen,\n * onSelect: (suggestion) => {\n * setQuery(suggestion);\n * setIsOpen(false);\n * },\n * listboxId: 'search-suggestions'\n * });\n * \n * return (\n * <div {...containerProps}>\n * <input\n * {...inputProps}\n * value={query}\n * onChange={(e) => setQuery(e.target.value)}\n * aria-label=\"Search\"\n * />\n * {isOpen && suggestions.length > 0 && (\n * <div {...listboxProps} aria-label=\"Search suggestions\">\n * {suggestions.map((suggestion, i) => (\n * <div\n * key={i}\n * {...getOptionProps(i)}\n * onClick={() => {\n * setQuery(suggestion);\n * setIsOpen(false);\n * }}\n * >\n * {suggestion}\n * </div>\n * ))}\n * </div>\n * )}\n * </div>\n * );\n * };\n * ```\n */\nexport function useCombobox<T = any>({\n items,\n isOpen,\n onOpenChange,\n onSelect,\n listboxId,\n loop = true,\n disabled = false,\n optionSelector = '[role=\"option\"]',\n hasItems\n}: UseComboboxOptions<T>): UseComboboxReturn {\n const listboxRef = useRef<HTMLDivElement | null>(null);\n const pointerDownInListboxRef = useRef(false);\n const tabKeyPressedRef = useRef(false);\n \n // Determine if we should show as expanded\n const shouldShowExpanded = hasItems !== undefined ? hasItems : items.length > 0;\n \n // Close dropdown callback\n const closeDropdown = useCallback(() => {\n onOpenChange(false);\n }, [onOpenChange]);\n\n // Ensure pointer state doesn't get stuck when listbox unmounts\n useEffect(() => {\n if (!isOpen) {\n pointerDownInListboxRef.current = false;\n }\n }, [isOpen]);\n \n // Keyboard navigation with aria-activedescendant\n const navigation = useComboboxNavigation<T>({\n items,\n isOpen,\n onSelect,\n onClose: closeDropdown,\n onOpen: () => onOpenChange(true),\n loop,\n disabled,\n listboxRef,\n optionSelector\n });\n \n // Focus out / Escape dismissal\n const dismissHandlers = useDismissOnFocusOut({\n onFocusOut: closeDropdown,\n onEscape: closeDropdown,\n disabled: !isOpen\n });\n\n const containerProps: UseDismissOnFocusOutReturn<HTMLElement> = {\n ...dismissHandlers,\n onBlurCapture: (e) => {\n // Clicking inside a listbox option can blur the input (relatedTarget is null),\n // which would dismiss before the click handler runs. Prevent that.\n if (pointerDownInListboxRef.current) return;\n \n // Tab key pressed - let Tab handler close dropdown, skip blur detection\n if (tabKeyPressedRef.current) {\n tabKeyPressedRef.current = false;\n return;\n }\n \n dismissHandlers.onBlurCapture(e);\n }\n };\n \n // Build input props\n const inputProps = {\n role: 'combobox' as const,\n 'aria-expanded': isOpen && shouldShowExpanded,\n 'aria-haspopup': 'listbox' as const,\n 'aria-controls': isOpen ? listboxId : undefined,\n 'aria-autocomplete': 'list' as const,\n 'aria-activedescendant': \n navigation.highlightedIndex >= 0 \n ? navigation.getOptionId(listboxId, navigation.highlightedIndex) \n : undefined,\n onKeyDown: (e: React.KeyboardEvent) => {\n // Set flag when Tab is pressed (before blur fires)\n if (e.key === 'Tab') {\n tabKeyPressedRef.current = true;\n }\n navigation.handleKeyDown(e);\n }\n };\n \n // Build listbox props\n const listboxProps = {\n id: listboxId,\n role: 'listbox' as const,\n ref: listboxRef,\n onMouseDownCapture: (_e: React.MouseEvent) => {\n pointerDownInListboxRef.current = true;\n },\n onMouseUpCapture: (_e: React.MouseEvent) => {\n pointerDownInListboxRef.current = false;\n },\n onMouseLeave: (_e: React.MouseEvent) => {\n pointerDownInListboxRef.current = false;\n }\n };\n \n // Option props generator\n const getOptionProps = useCallback(\n (index: number, selected: boolean = false) => ({\n id: navigation.getOptionId(listboxId, index),\n role: 'option' as const,\n 'aria-selected': selected\n }),\n [navigation.getOptionId, listboxId]\n );\n \n return {\n containerProps,\n inputProps,\n listboxProps,\n getOptionProps,\n highlightedIndex: navigation.highlightedIndex,\n setHighlightedIndex: navigation.setHighlightedIndex,\n getOptionId: navigation.getOptionId\n };\n}\n"],"names":["useRef","useCallback","useEffect","useComboboxNavigation","useDismissOnFocusOut","useCombobox","items","isOpen","onOpenChange","onSelect","listboxId","loop","disabled","optionSelector","hasItems","listboxRef","pointerDownInListboxRef","tabKeyPressedRef","shouldShowExpanded","undefined","length","closeDropdown","current","navigation","onClose","onOpen","dismissHandlers","onFocusOut","onEscape","containerProps","onBlurCapture","e","inputProps","role","highlightedIndex","getOptionId","onKeyDown","key","handleKeyDown","listboxProps","id","ref","onMouseDownCapture","_e","onMouseUpCapture","onMouseLeave","getOptionProps","index","selected","setHighlightedIndex"],"mappings":"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"}
@@ -12,4 +12,4 @@ function n(o, u) {
12
12
  export {
13
13
  n as debounce
14
14
  };
15
- //# sourceMappingURL=index207.js.map
15
+ //# sourceMappingURL=index208.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index207.js","sources":["../src/utils/debounce.ts"],"sourcesContent":["export function debounce<T extends (...args: any[]) => void>(func: T, wait: number) {\n let timeout: ReturnType<typeof setTimeout> | null;\n const debounced = (...args: Parameters<T>) => {\n if (timeout) clearTimeout(timeout);\n timeout = setTimeout(() => {\n func(...args);\n }, wait);\n };\n debounced.cancel = () => {\n if (timeout) clearTimeout(timeout);\n timeout = null;\n };\n return debounced as T & { cancel: () => void };\n }"],"names":["debounce","func","wait","timeout","debounced","args","setTimeout","cancel"],"mappings":"AAAO,SAASA,EAA6CC,GAASC,GAAc;AAChF,MAAIC;AACJ,QAAMC,IAAYA,IAAIC,MAAwB;AAC5C,IAAIF,kBAAsBA,CAAO,GACjCA,IAAUG,WAAW,MAAM;AACzBL,MAAAA,EAAK,GAAGI,CAAI;AAAA,IACd,GAAGH,CAAI;AAAA,EACT;AACAE,SAAAA,EAAUG,SAAS,MAAM;AACvB,IAAIJ,kBAAsBA,CAAO,GACjCA,IAAU;AAAA,EACZ,GACOC;AACT;"}
1
+ {"version":3,"file":"index208.js","sources":["../src/utils/debounce.ts"],"sourcesContent":["export function debounce<T extends (...args: any[]) => void>(func: T, wait: number) {\n let timeout: ReturnType<typeof setTimeout> | null;\n const debounced = (...args: Parameters<T>) => {\n if (timeout) clearTimeout(timeout);\n timeout = setTimeout(() => {\n func(...args);\n }, wait);\n };\n debounced.cancel = () => {\n if (timeout) clearTimeout(timeout);\n timeout = null;\n };\n return debounced as T & { cancel: () => void };\n }"],"names":["debounce","func","wait","timeout","debounced","args","setTimeout","cancel"],"mappings":"AAAO,SAASA,EAA6CC,GAASC,GAAc;AAChF,MAAIC;AACJ,QAAMC,IAAYA,IAAIC,MAAwB;AAC5C,IAAIF,kBAAsBA,CAAO,GACjCA,IAAUG,WAAW,MAAM;AACzBL,MAAAA,EAAK,GAAGI,CAAI;AAAA,IACd,GAAGH,CAAI;AAAA,EACT;AACAE,SAAAA,EAAUG,SAAS,MAAM;AACvB,IAAIJ,kBAAsBA,CAAO,GACjCA,IAAU;AAAA,EACZ,GACOC;AACT;"}
@@ -1233,4 +1233,4 @@ const e = [
1233
1233
  export {
1234
1234
  e as default
1235
1235
  };
1236
- //# sourceMappingURL=index215.js.map
1236
+ //# sourceMappingURL=index216.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index215.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index216.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -43,4 +43,4 @@ g.displayName = "TabButton";
43
43
  export {
44
44
  g as TabButton
45
45
  };
46
- //# sourceMappingURL=index218.js.map
46
+ //# sourceMappingURL=index219.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index218.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 {...(panelId ? { 'aria-controls': panelId } : {})}\n tabIndex={tabIndex}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n />\n );\n }\n);\n\nTabButton.displayName = 'TabButton';\n"],"names":["TabButton","id","label","isSelected","isDisabled","panelId","tabIndex","className","automationId","onClick","onFocus","onKeyDown","ref","React","createElement","Button","_extends","type","disabled","role","displayName"],"mappings":";;;;;;;;;;;AAsBO,MAAMA,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,cAACC,GAAMC,EAAA;AAAA,EACLJ,KAAAA;AAAAA,EACAK,MAAK;AAAA,EACLf,OAAAA;AAAAA,EACAgB,UAAUd;AAAAA,EACVK,SAAAA;AAAAA,EACAF,WAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAW,MAAK;AAAA,EACLlB,IAAAA;AAAAA,EACA,iBAAeE;AAAAA,GACVE,IAAU;AAAA,EAAE,iBAAiBA;AAAAA,IAAY,IAAE;AAAA,EAChDC,UAAAA;AAAAA,EACAI,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,CAAqB,CACtB,CAGP;AAEAX,EAAUoB,cAAc;"}
1
+ {"version":3,"file":"index219.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 {...(panelId ? { 'aria-controls': panelId } : {})}\n tabIndex={tabIndex}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n />\n );\n }\n);\n\nTabButton.displayName = 'TabButton';\n"],"names":["TabButton","id","label","isSelected","isDisabled","panelId","tabIndex","className","automationId","onClick","onFocus","onKeyDown","ref","React","createElement","Button","_extends","type","disabled","role","displayName"],"mappings":";;;;;;;;;;;AAsBO,MAAMA,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,cAACC,GAAMC,EAAA;AAAA,EACLJ,KAAAA;AAAAA,EACAK,MAAK;AAAA,EACLf,OAAAA;AAAAA,EACAgB,UAAUd;AAAAA,EACVK,SAAAA;AAAAA,EACAF,WAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAW,MAAK;AAAA,EACLlB,IAAAA;AAAAA,EACA,iBAAeE;AAAAA,GACVE,IAAU;AAAA,EAAE,iBAAiBA;AAAAA,IAAY,IAAE;AAAA,EAChDC,UAAAA;AAAAA,EACAI,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,CAAqB,CACtB,CAGP;AAEAX,EAAUoB,cAAc;"}
@@ -4,4 +4,4 @@ function n(e) {
4
4
  export {
5
5
  n as delay
6
6
  };
7
- //# sourceMappingURL=index227.js.map
7
+ //# sourceMappingURL=index228.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index227.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;"}
1
+ {"version":3,"file":"index228.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/index24.js CHANGED
@@ -5,7 +5,7 @@ import { Checkbox as me } from "./index22.js";
5
5
  import { Button as R } from "./index3.js";
6
6
  import { InputWithIcon as fe } from "./index51.js";
7
7
  import { useStableId as T } from "./index190.js";
8
- import { useCombobox as pe } from "./index197.js";
8
+ import { useCombobox as pe } from "./index199.js";
9
9
  function m() {
10
10
  return m = Object.assign ? Object.assign.bind() : function(t) {
11
11
  for (var a = 1; a < arguments.length; a++) {
package/dist/index27.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import d, { useMemo as S, useRef as D, useEffect as c } from "react";
2
2
  import { Icon as j } from "./index5.js";
3
3
  import { getA11yNameAttributes as B } from "./index71.js";
4
- import { useDismissOnEscape as M } from "./index199.js";
4
+ import { useDismissOnEscape as M } from "./index194.js";
5
5
  /* empty css */
6
6
  function m() {
7
7
  return m = Object.assign ? Object.assign.bind() : function(r) {