se-design 1.0.73-dev2 → 1.0.73-dev6
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.
- package/dist/components/CustomModal/index.d.ts +16 -0
- package/dist/components/MenuList/index.d.ts +3 -2
- package/dist/components/Modal/index.d.ts +1 -0
- package/dist/components/Popover/index.d.ts +2 -2
- package/dist/index11.js +53 -38
- package/dist/index11.js.map +1 -1
- package/dist/index12.js +30 -18
- package/dist/index12.js.map +1 -1
- package/dist/index15.js +1 -1
- package/dist/index17.js +36 -33
- package/dist/index17.js.map +1 -1
- package/dist/index18.js +129 -124
- package/dist/index18.js.map +1 -1
- package/dist/index188.js +5 -5
- package/dist/index192.js +43 -0
- package/dist/index192.js.map +1 -0
- package/dist/index193.js +62 -0
- package/dist/index193.js.map +1 -0
- package/dist/index194.js +20 -21
- package/dist/index194.js.map +1 -1
- package/dist/index197.js +27 -0
- package/dist/index197.js.map +1 -0
- package/dist/{index196.js → index199.js} +3 -3
- package/dist/{index196.js.map → index199.js.map} +1 -1
- package/dist/{index206.js → index208.js} +1 -1
- package/dist/{index206.js.map → index208.js.map} +1 -1
- package/dist/{index214.js → index216.js} +1 -1
- package/dist/{index214.js.map → index216.js.map} +1 -1
- package/dist/{index217.js → index219.js} +1 -1
- package/dist/{index217.js.map → index219.js.map} +1 -1
- package/dist/index228.js +3 -58
- package/dist/index228.js.map +1 -1
- package/dist/index230.js +20 -52
- package/dist/index230.js.map +1 -1
- package/dist/index231.js +51 -16
- package/dist/index231.js.map +1 -1
- package/dist/index232.js +18 -9
- package/dist/index232.js.map +1 -1
- package/dist/index233.js +9 -9
- package/dist/index233.js.map +1 -1
- package/dist/index234.js +9 -4
- package/dist/index234.js.map +1 -1
- package/dist/index235.js +5 -170
- package/dist/index235.js.map +1 -1
- package/dist/index236.js +170 -11
- package/dist/index236.js.map +1 -1
- package/dist/index237.js +11 -6
- package/dist/index237.js.map +1 -1
- package/dist/index238.js +5 -5
- package/dist/index238.js.map +1 -1
- package/dist/index239.js +5 -37
- package/dist/index239.js.map +1 -1
- package/dist/index24.js +1 -1
- package/dist/index240.js +38 -2
- package/dist/index240.js.map +1 -1
- package/dist/index241.js +2 -8
- package/dist/index241.js.map +1 -1
- package/dist/index242.js +7 -326
- package/dist/index242.js.map +1 -1
- package/dist/index243.js +324 -47
- package/dist/index243.js.map +1 -1
- package/dist/index244.js +50 -2
- package/dist/index244.js.map +1 -1
- package/dist/index245.js +2 -76
- package/dist/index245.js.map +1 -1
- package/dist/index246.js +65 -82
- package/dist/index246.js.map +1 -1
- package/dist/index247.js +89 -48
- package/dist/index247.js.map +1 -1
- package/dist/index248.js +51 -7
- package/dist/index248.js.map +1 -1
- package/dist/index249.js +7 -4
- package/dist/index249.js.map +1 -1
- package/dist/index250.js +4 -51
- package/dist/index250.js.map +1 -1
- package/dist/index251.js +52 -2
- package/dist/index251.js.map +1 -1
- package/dist/index252.js +2 -2
- package/dist/index253.js +5 -0
- package/dist/index253.js.map +1 -0
- package/dist/index27.js +1 -1
- package/dist/index28.js +94 -90
- package/dist/index28.js.map +1 -1
- package/dist/index32.js +42 -44
- package/dist/index32.js.map +1 -1
- package/dist/index37.js +1 -1
- package/dist/index39.js +1 -1
- package/dist/index44.js +1 -1
- package/dist/index45.js +2 -2
- package/dist/index48.js +1 -1
- package/dist/index52.js +1 -1
- package/dist/index62.js +1 -1
- package/dist/index64.js +52 -60
- package/dist/index64.js.map +1 -1
- package/package.json +1 -1
- package/dist/index198.js +0 -26
- package/dist/index198.js.map +0 -1
- package/dist/index226.js +0 -7
- package/dist/index226.js.map +0 -1
- package/dist/index229.js +0 -25
- package/dist/index229.js.map +0 -1
package/dist/index192.js
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { useRef as n } from "react";
|
|
2
|
+
import { useFocusTrap as d } from "./index193.js";
|
|
3
|
+
import { useDismissOnEscape as u } from "./index194.js";
|
|
4
|
+
import { getA11yNameAttributes as c } from "./index71.js";
|
|
5
|
+
import { useStableId as f } from "./index190.js";
|
|
6
|
+
function I({
|
|
7
|
+
isOpen: o,
|
|
8
|
+
onDismiss: a,
|
|
9
|
+
title: t,
|
|
10
|
+
ariaLabel: s,
|
|
11
|
+
titleIdPrefix: i = "modal-title",
|
|
12
|
+
initialFocus: m = "first"
|
|
13
|
+
}) {
|
|
14
|
+
const e = n(null), r = f(void 0, i);
|
|
15
|
+
d({
|
|
16
|
+
enabled: o,
|
|
17
|
+
containerRef: e,
|
|
18
|
+
restoreFocus: !0,
|
|
19
|
+
initialFocus: m
|
|
20
|
+
}), u({
|
|
21
|
+
containerRef: e,
|
|
22
|
+
onDismiss: a,
|
|
23
|
+
enabled: o
|
|
24
|
+
});
|
|
25
|
+
const l = {
|
|
26
|
+
role: "dialog",
|
|
27
|
+
"aria-modal": !0,
|
|
28
|
+
tabIndex: -1,
|
|
29
|
+
...c({
|
|
30
|
+
ariaLabelledBy: t ? r : void 0,
|
|
31
|
+
ariaLabel: t ? void 0 : s
|
|
32
|
+
})
|
|
33
|
+
};
|
|
34
|
+
return {
|
|
35
|
+
containerRef: e,
|
|
36
|
+
titleId: r,
|
|
37
|
+
dialogProps: l
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
export {
|
|
41
|
+
I as useModalA11y
|
|
42
|
+
};
|
|
43
|
+
//# sourceMappingURL=index192.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index192.js","sources":["../src/utils/a11y/useModalA11y.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { useFocusTrap } from './useFocusTrap';\nimport { useDismissOnEscape } from './useDismissOnEscape';\nimport { getA11yNameAttributes } from './accessibleName';\nimport { useStableId } from 'src/utils/useStableId';\n\nexport interface UseModalA11yOptions {\n /**\n * Whether the modal is open. Controls focus trap and Escape handler activation.\n */\n isOpen: boolean;\n /**\n * Called when Escape is pressed while focus is within the modal.\n * If undefined, Escape dismissal is disabled.\n */\n onDismiss?: () => void;\n /**\n * Visible title text. When provided, the dialog is labelled via aria-labelledby\n * pointing to the title element (preferred over aria-label when a visible heading exists).\n * Render `<h2 id={titleId}>` inside the modal to complete the association.\n */\n title?: string;\n /**\n * aria-label for modals without a visible title heading.\n * Only used when `title` is not provided.\n */\n ariaLabel?: string;\n /**\n * Prefix for the auto-generated title element id. Default: 'modal-title'.\n */\n titleIdPrefix?: string;\n /**\n * Initial focus target when the modal opens. Forwarded to useFocusTrap.\n * - 'first': Focus first focusable element (default)\n * - 'container': Focus the dialog container itself\n * - 'none': Skip — browser handles it (e.g. autofocus attribute on inner element)\n * - CSS selector string: Focus matching element\n * - HTMLElement: Focus specific element\n */\n initialFocus?: 'first' | 'container' | 'none' | string | HTMLElement;\n}\n\nexport interface UseModalA11yReturn {\n /**\n * Ref to attach to the dialog container element.\n */\n containerRef: React.RefObject<HTMLDivElement | null>;\n /**\n * Stable ID to set on the visible title element: `<h2 id={titleId}>`.\n * Only relevant when `title` is provided.\n */\n titleId: string;\n /**\n * Spread onto the dialog container element.\n * Includes: role=\"dialog\", aria-modal, tabIndex, aria-labelledby or aria-label.\n */\n dialogProps: {\n role: 'dialog';\n 'aria-modal': true;\n tabIndex: number;\n [key: string]: unknown;\n };\n}\n\n/**\n * Bundles all WCAG dialog semantics into a single hook.\n *\n * Handles:\n * - Stable ID for title element (aria-labelledby association)\n * - Focus trap: moves focus into modal on open, wraps Tab, restores focus on close\n * - Escape dismissal: calls onDismiss when Escape is pressed within the modal\n * - dialogProps: role=\"dialog\", aria-modal, tabIndex, aria-labelledby / aria-label\n *\n * @example\n * ```tsx\n * const MyModal = ({ isOpen, onClose, title }) => {\n * const { containerRef, titleId, dialogProps } = useModalA11y({\n * isOpen,\n * onDismiss: onClose,\n * title,\n * });\n *\n * return (\n * <div ref={containerRef} {...dialogProps} className=\"modal-content\">\n * <h2 id={titleId}>{title}</h2>\n * ...\n * </div>\n * );\n * };\n * ```\n *\n * @example Modal without a visible title\n * ```tsx\n * const { containerRef, titleId, dialogProps } = useModalA11y({\n * isOpen,\n * onDismiss: onClose,\n * ariaLabel: 'Upload document',\n * });\n * ```\n *\n * @example Custom initial focus (specific button) or skip (autofocus)\n * ```tsx\n * useModalA11y({ isOpen, onDismiss, title, initialFocus: '.my-cta-btn' });\n * useModalA11y({ isOpen, onDismiss, title, initialFocus: 'none' }); // autofocus on inner element\n * ```\n */\nexport function useModalA11y({\n isOpen,\n onDismiss,\n title,\n ariaLabel,\n titleIdPrefix = 'modal-title',\n initialFocus = 'first',\n}: UseModalA11yOptions): UseModalA11yReturn {\n const containerRef = useRef<HTMLDivElement>(null);\n const titleId = useStableId(undefined, titleIdPrefix);\n\n useFocusTrap({\n enabled: isOpen,\n containerRef,\n restoreFocus: true,\n initialFocus,\n });\n\n useDismissOnEscape({\n containerRef,\n onDismiss,\n enabled: isOpen,\n });\n\n const nameAttrs = getA11yNameAttributes({\n ariaLabelledBy: title ? titleId : undefined,\n ariaLabel: !title ? ariaLabel : undefined,\n });\n\n const dialogProps = {\n role: 'dialog' as const,\n 'aria-modal': true as const,\n tabIndex: -1,\n ...nameAttrs,\n };\n\n return { containerRef, titleId, dialogProps };\n}\n"],"names":["useRef","useFocusTrap","useDismissOnEscape","getA11yNameAttributes","useStableId","useModalA11y","isOpen","onDismiss","title","ariaLabel","titleIdPrefix","initialFocus","containerRef","titleId","undefined","enabled","restoreFocus","dialogProps","role","tabIndex","ariaLabelledBy","nameAttrs"],"mappings":"AA0GO,SAAA,UAAAA,SAAA;AAAA,SAAA,gBAAAC,SAAA;AAAA,SAAA,sBAAAC,SAAA;AAAA,SAAA,yBAAAC,SAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,SAASC,EAAa;AAAA,EAC3BC,QAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,cAAAA,IAAe;AACI,GAAuB;AAC1C,QAAMC,IAAeZ,EAAuB,IAAI,GAC1Ca,IAAUT,EAAYU,QAAWJ,CAAa;AAEpDT,EAAAA,EAAa;AAAA,IACXc,SAAST;AAAAA,IACTM,cAAAA;AAAAA,IACAI,cAAc;AAAA,IACdL,cAAAA;AAAAA,EAAAA,CACD,GAEDT,EAAmB;AAAA,IACjBU,cAAAA;AAAAA,IACAL,WAAAA;AAAAA,IACAQ,SAAST;AAAAA,EAAAA,CACV;AAOD,QAAMW,IAAc;AAAA,IAClBC,MAAM;AAAA,IACN,cAAc;AAAA,IACdC,UAAU;AAAA,IACV,GATgBhB,EAAsB;AAAA,MACtCiB,gBAAgBZ,IAAQK,IAAUC;AAAAA,MAClCL,WAAYD,IAAoBM,SAAZL;AAAAA,IAAYK,CACjC;AAAA,EAMIO;AAGL,SAAO;AAAA,IAAET,cAAAA;AAAAA,IAAcC,SAAAA;AAAAA,IAASI,aAAAA;AAAAA,EAAAA;AAClC;"}
|
package/dist/index193.js
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { useRef as E, useLayoutEffect as f } from "react";
|
|
2
|
+
import { getFirstFocusableElement as d, getFocusableElements as g } from "./index230.js";
|
|
3
|
+
function y(t, e) {
|
|
4
|
+
return e === "none" ? null : e === "first" ? d({
|
|
5
|
+
container: t
|
|
6
|
+
}) || t : e === "container" ? t : typeof e == "string" ? t.querySelector(e) : e instanceof HTMLElement ? e : null;
|
|
7
|
+
}
|
|
8
|
+
function L({
|
|
9
|
+
enabled: t,
|
|
10
|
+
containerRef: e,
|
|
11
|
+
restoreFocus: l = !0,
|
|
12
|
+
initialFocus: i = "first"
|
|
13
|
+
}) {
|
|
14
|
+
const s = E(null), m = E(null);
|
|
15
|
+
return f(() => {
|
|
16
|
+
if (!t) {
|
|
17
|
+
l && s.current && requestAnimationFrame(() => {
|
|
18
|
+
s.current?.focus(), s.current = null;
|
|
19
|
+
});
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
const r = e.current;
|
|
23
|
+
r && (s.current = document.activeElement, requestAnimationFrame(() => {
|
|
24
|
+
y(r, i)?.focus();
|
|
25
|
+
}));
|
|
26
|
+
}, [t, e, l, i]), f(() => {
|
|
27
|
+
if (!t) return;
|
|
28
|
+
const r = e.current;
|
|
29
|
+
if (!r) return;
|
|
30
|
+
const o = (n) => {
|
|
31
|
+
if (n.key === "Tab") {
|
|
32
|
+
const u = g({
|
|
33
|
+
container: r
|
|
34
|
+
});
|
|
35
|
+
if (u.length === 0) {
|
|
36
|
+
n.preventDefault(), r.focus();
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
const c = u[0], a = u[u.length - 1], v = document.activeElement;
|
|
40
|
+
n.shiftKey && v === c ? (n.preventDefault(), a.focus()) : !n.shiftKey && v === a && (n.preventDefault(), c.focus());
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
return document.addEventListener("keydown", o, !0), () => document.removeEventListener("keydown", o, !0);
|
|
44
|
+
}, [t, e]), f(() => {
|
|
45
|
+
if (!t) return;
|
|
46
|
+
const r = e.current;
|
|
47
|
+
if (!r) return;
|
|
48
|
+
const o = (n) => {
|
|
49
|
+
const u = n.target;
|
|
50
|
+
r.contains(u) ? m.current = u : (m.current || d({
|
|
51
|
+
container: r
|
|
52
|
+
}) || r).focus();
|
|
53
|
+
};
|
|
54
|
+
return document.addEventListener("focusin", o, !0), () => document.removeEventListener("focusin", o, !0);
|
|
55
|
+
}, [t, e]), {
|
|
56
|
+
triggerRef: s
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
export {
|
|
60
|
+
L as useFocusTrap
|
|
61
|
+
};
|
|
62
|
+
//# sourceMappingURL=index193.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;"}
|
package/dist/index194.js
CHANGED
|
@@ -1,27 +1,26 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { useEffect as d } from "react";
|
|
2
2
|
function p({
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
containerRef: r,
|
|
4
|
+
onDismiss: e,
|
|
5
|
+
enabled: n = !0,
|
|
6
|
+
preventDefault: u = !0,
|
|
7
|
+
stopPropagation: c = !0
|
|
8
8
|
}) {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
if (
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
};
|
|
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]);
|
|
23
22
|
}
|
|
24
23
|
export {
|
|
25
|
-
p as
|
|
24
|
+
p as useDismissOnEscape
|
|
26
25
|
};
|
|
27
26
|
//# sourceMappingURL=index194.js.map
|
package/dist/index194.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index194.js","sources":["../src/utils/a11y/
|
|
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
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
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
|
|
8
|
+
}) {
|
|
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]);
|
|
18
|
+
return {
|
|
19
|
+
onFocusCapture: f,
|
|
20
|
+
onBlurCapture: s,
|
|
21
|
+
onKeyDownCapture: C
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
export {
|
|
25
|
+
p as useDismissOnFocusOut
|
|
26
|
+
};
|
|
27
|
+
//# sourceMappingURL=index197.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useRef as u, useCallback as f, useEffect as P } from "react";
|
|
2
|
-
import { useComboboxNavigation as y } from "./
|
|
3
|
-
import { useDismissOnFocusOut as R } from "./
|
|
2
|
+
import { useComboboxNavigation as y } from "./index231.js";
|
|
3
|
+
import { useDismissOnFocusOut as R } from "./index197.js";
|
|
4
4
|
function M({
|
|
5
5
|
items: l,
|
|
6
6
|
isOpen: t,
|
|
@@ -84,4 +84,4 @@ function M({
|
|
|
84
84
|
export {
|
|
85
85
|
M as useCombobox
|
|
86
86
|
};
|
|
87
|
-
//# sourceMappingURL=
|
|
87
|
+
//# sourceMappingURL=index199.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index196.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":"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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
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;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"index216.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
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;"}
|
package/dist/index228.js
CHANGED
|
@@ -1,62 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
function y(e, t) {
|
|
4
|
-
return t === "first" ? d({
|
|
5
|
-
container: e
|
|
6
|
-
}) || e : t === "container" ? e : typeof t == "string" ? e.querySelector(t) : t instanceof HTMLElement ? t : null;
|
|
7
|
-
}
|
|
8
|
-
function L({
|
|
9
|
-
enabled: e,
|
|
10
|
-
containerRef: t,
|
|
11
|
-
restoreFocus: i = !0,
|
|
12
|
-
initialFocus: l = "first"
|
|
13
|
-
}) {
|
|
14
|
-
const s = E(null), m = E(null);
|
|
15
|
-
return f(() => {
|
|
16
|
-
if (!e) {
|
|
17
|
-
i && s.current && requestAnimationFrame(() => {
|
|
18
|
-
s.current?.focus(), s.current = null;
|
|
19
|
-
});
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
const r = t.current;
|
|
23
|
-
r && (s.current = document.activeElement, requestAnimationFrame(() => {
|
|
24
|
-
y(r, l)?.focus();
|
|
25
|
-
}));
|
|
26
|
-
}, [e, t, i, l]), f(() => {
|
|
27
|
-
if (!e) return;
|
|
28
|
-
const r = t.current;
|
|
29
|
-
if (!r) return;
|
|
30
|
-
const c = (n) => {
|
|
31
|
-
if (n.key === "Tab") {
|
|
32
|
-
const u = g({
|
|
33
|
-
container: r
|
|
34
|
-
});
|
|
35
|
-
if (u.length === 0) {
|
|
36
|
-
n.preventDefault(), r.focus();
|
|
37
|
-
return;
|
|
38
|
-
}
|
|
39
|
-
const o = u[0], a = u[u.length - 1], v = document.activeElement;
|
|
40
|
-
n.shiftKey && v === o ? (n.preventDefault(), a.focus()) : !n.shiftKey && v === a && (n.preventDefault(), o.focus());
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
return document.addEventListener("keydown", c, !0), () => document.removeEventListener("keydown", c, !0);
|
|
44
|
-
}, [e, t]), f(() => {
|
|
45
|
-
if (!e) return;
|
|
46
|
-
const r = t.current;
|
|
47
|
-
if (!r) return;
|
|
48
|
-
const c = (n) => {
|
|
49
|
-
const u = n.target;
|
|
50
|
-
r.contains(u) ? m.current = u : (m.current || d({
|
|
51
|
-
container: r
|
|
52
|
-
}) || r).focus();
|
|
53
|
-
};
|
|
54
|
-
return document.addEventListener("focusin", c, !0), () => document.removeEventListener("focusin", c, !0);
|
|
55
|
-
}, [e, t]), {
|
|
56
|
-
triggerRef: s
|
|
57
|
-
};
|
|
1
|
+
function n(e) {
|
|
2
|
+
return new Promise((t) => setTimeout(t, e));
|
|
58
3
|
}
|
|
59
4
|
export {
|
|
60
|
-
|
|
5
|
+
n as delay
|
|
61
6
|
};
|
|
62
7
|
//# sourceMappingURL=index228.js.map
|
package/dist/index228.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index228.js","sources":["../src/utils/
|
|
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/index230.js
CHANGED
|
@@ -1,57 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
onClose: c,
|
|
8
|
-
onOpen: l,
|
|
9
|
-
loop: i = !0,
|
|
10
|
-
disabled: h = !1,
|
|
11
|
-
listboxRef: k,
|
|
12
|
-
optionSelector: g = '[role="option"]'
|
|
1
|
+
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(", ");
|
|
2
|
+
function u({
|
|
3
|
+
container: e,
|
|
4
|
+
includeRoles: t = !1,
|
|
5
|
+
additionalSelectors: r = [],
|
|
6
|
+
filterHidden: s = !1
|
|
13
7
|
}) {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
if (h) {
|
|
25
|
-
r.key === "Escape" && t && (r.preventDefault(), c());
|
|
26
|
-
return;
|
|
27
|
-
}
|
|
28
|
-
const e = u.length;
|
|
29
|
-
switch (r.key) {
|
|
30
|
-
case "ArrowDown":
|
|
31
|
-
r.preventDefault(), !t && e > 0 ? (l?.(), a(0)) : t && e > 0 && a((n) => i ? (n + 1) % e : Math.min(n + 1, e - 1));
|
|
32
|
-
break;
|
|
33
|
-
case "ArrowUp":
|
|
34
|
-
r.preventDefault(), t && e > 0 && a((n) => n === -1 ? e - 1 : i ? (n - 1 + e) % e : Math.max(n - 1, 0));
|
|
35
|
-
break;
|
|
36
|
-
case "Enter":
|
|
37
|
-
t && f >= 0 && u[f] && (r.preventDefault(), o(u[f], f), a(-1));
|
|
38
|
-
break;
|
|
39
|
-
case "Escape":
|
|
40
|
-
t && (r.preventDefault(), c(), a(-1));
|
|
41
|
-
break;
|
|
42
|
-
case "Tab":
|
|
43
|
-
t && (c(), a(-1));
|
|
44
|
-
break;
|
|
45
|
-
}
|
|
46
|
-
}, [h, u, t, f, o, c, l, i]), d = b((r, e) => `${r}-option-${e}`, []);
|
|
47
|
-
return {
|
|
48
|
-
highlightedIndex: f,
|
|
49
|
-
setHighlightedIndex: a,
|
|
50
|
-
handleKeyDown: D,
|
|
51
|
-
getOptionId: d
|
|
52
|
-
};
|
|
8
|
+
if (!e) return [];
|
|
9
|
+
const d = [t ? a : l, ...r].filter(Boolean).join(", "), i = Array.from(e.querySelectorAll(d));
|
|
10
|
+
return s ? i.filter((n) => {
|
|
11
|
+
const o = window.getComputedStyle(n);
|
|
12
|
+
return o.display !== "none" && o.visibility !== "hidden" && o.opacity !== "0" && !n.hasAttribute("hidden") && n.offsetWidth > 0 && n.offsetHeight > 0;
|
|
13
|
+
}) : i;
|
|
14
|
+
}
|
|
15
|
+
function c(e) {
|
|
16
|
+
const t = u(e);
|
|
17
|
+
return t.length > 0 ? t[0] : null;
|
|
53
18
|
}
|
|
54
19
|
export {
|
|
55
|
-
|
|
20
|
+
l as FOCUSABLE_SELECTOR,
|
|
21
|
+
a as FOCUSABLE_WITH_ROLES_SELECTOR,
|
|
22
|
+
c as getFirstFocusableElement,
|
|
23
|
+
u as getFocusableElements
|
|
56
24
|
};
|
|
57
25
|
//# sourceMappingURL=index230.js.map
|