se-design 1.0.83-dev.3 → 1.0.83-dev.4
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/index79.js +30 -33
- package/dist/index79.js.map +1 -1
- package/package.json +1 -1
package/dist/index79.js
CHANGED
|
@@ -1,59 +1,56 @@
|
|
|
1
|
-
import { useState as
|
|
2
|
-
import { useScrollActiveIntoView as
|
|
1
|
+
import { useState as w, useEffect as x, useCallback as k } from "react";
|
|
2
|
+
import { useScrollActiveIntoView as v } from "./index247.js";
|
|
3
3
|
function y({
|
|
4
4
|
items: u,
|
|
5
5
|
isOpen: t,
|
|
6
|
-
onSelect:
|
|
6
|
+
onSelect: l,
|
|
7
7
|
onClose: i,
|
|
8
|
-
onOpen:
|
|
9
|
-
loop:
|
|
10
|
-
disabled:
|
|
11
|
-
listboxRef:
|
|
12
|
-
optionSelector:
|
|
13
|
-
keepHighlightOnSelect:
|
|
14
|
-
closeOnTab:
|
|
8
|
+
onOpen: n,
|
|
9
|
+
loop: c = !0,
|
|
10
|
+
disabled: b = !1,
|
|
11
|
+
listboxRef: D,
|
|
12
|
+
optionSelector: d = '[role="option"]',
|
|
13
|
+
keepHighlightOnSelect: h = !1,
|
|
14
|
+
closeOnTab: g = !0
|
|
15
15
|
}) {
|
|
16
|
-
const [
|
|
17
|
-
|
|
18
|
-
t ||
|
|
19
|
-
}, [t]),
|
|
20
|
-
containerRef:
|
|
21
|
-
activeIndex:
|
|
22
|
-
itemSelector:
|
|
16
|
+
const [f, a] = w(-1);
|
|
17
|
+
x(() => {
|
|
18
|
+
t || a(-1);
|
|
19
|
+
}, [t]), v({
|
|
20
|
+
containerRef: D,
|
|
21
|
+
activeIndex: f,
|
|
22
|
+
itemSelector: d,
|
|
23
23
|
enabled: t
|
|
24
24
|
});
|
|
25
|
-
const
|
|
26
|
-
if (
|
|
25
|
+
const m = k((r) => {
|
|
26
|
+
if (b) {
|
|
27
27
|
r.key === "Escape" && t && (r.preventDefault(), i());
|
|
28
28
|
return;
|
|
29
29
|
}
|
|
30
|
-
const
|
|
30
|
+
const e = u.length;
|
|
31
31
|
switch (r.key) {
|
|
32
32
|
case "ArrowDown":
|
|
33
|
-
r.preventDefault(), r.stopPropagation(), !t &&
|
|
33
|
+
r.preventDefault(), r.stopPropagation(), !t && e > 0 ? (n?.(), a(0)) : t && e > 0 && a((o) => c ? (o + 1) % e : Math.min(o + 1, e - 1));
|
|
34
34
|
break;
|
|
35
35
|
case "ArrowUp":
|
|
36
|
-
r.preventDefault(), r.stopPropagation(), t &&
|
|
36
|
+
r.preventDefault(), r.stopPropagation(), t && e > 0 && a((o) => o === -1 ? e - 1 : c ? (o - 1 + e) % e : Math.max(o - 1, 0));
|
|
37
37
|
break;
|
|
38
38
|
case "Enter":
|
|
39
|
-
r.preventDefault(), t ?
|
|
40
|
-
break;
|
|
41
|
-
case " ":
|
|
42
|
-
r.preventDefault(), t ? a >= 0 && u[a] && (n(u[a], a), l || e(-1)) : (c?.(), e(0));
|
|
39
|
+
r.preventDefault(), t ? f >= 0 && u[f] && (l(u[f], f), h || a(-1)) : (n?.(), a(0));
|
|
43
40
|
break;
|
|
44
41
|
case "Escape":
|
|
45
|
-
t && (r.preventDefault(), i(),
|
|
42
|
+
t && (r.preventDefault(), i(), a(-1));
|
|
46
43
|
break;
|
|
47
44
|
case "Tab":
|
|
48
|
-
t &&
|
|
45
|
+
t && g && (i(), a(-1));
|
|
49
46
|
break;
|
|
50
47
|
}
|
|
51
|
-
}, [
|
|
48
|
+
}, [b, u, t, f, l, i, n, c, h, g]), s = k((r, e) => `${r}-option-${e}`, []);
|
|
52
49
|
return {
|
|
53
|
-
highlightedIndex:
|
|
54
|
-
setHighlightedIndex:
|
|
55
|
-
handleKeyDown:
|
|
56
|
-
getOptionId:
|
|
50
|
+
highlightedIndex: f,
|
|
51
|
+
setHighlightedIndex: a,
|
|
52
|
+
handleKeyDown: m,
|
|
53
|
+
getOptionId: s
|
|
57
54
|
};
|
|
58
55
|
}
|
|
59
56
|
export {
|
package/dist/index79.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index79.js","sources":["../src/utils/a11y/useComboboxNavigation.ts"],"sourcesContent":["import { useCallback, useState, useEffect } from 'react';\nimport type { RefObject } from 'react';\nimport { useScrollActiveIntoView } from './useScrollActiveIntoView';\n\nexport interface UseComboboxNavigationOptions<T = any> {\n /**\n * Array of items to navigate through\n */\n items: T[];\n \n /**\n * Whether the dropdown is currently open\n */\n isOpen: boolean;\n \n /**\n * Callback when an item is selected (Enter key)\n */\n onSelect: (item: T, index: number) => void;\n \n /**\n * Callback to close the dropdown\n */\n onClose: () => void;\n \n /**\n * Optional: Callback to open the dropdown\n */\n onOpen?: () => void;\n \n /**\n * Whether to wrap around at the ends of the list.\n * Default: true\n */\n loop?: boolean;\n \n /**\n * Whether keyboard navigation is disabled\n * (e.g., for custom rendered content)\n */\n disabled?: boolean;\n\n /**\n * Whether to keep the highlighted index after selecting an item.\n * Useful for multi-select where the dropdown stays open after selection.\n * Default: false\n */\n keepHighlightOnSelect?: boolean;\n\n /**\n * Whether Tab should close the dropdown.\n * Set to false when Tab should move focus to elements within the popup (e.g. CTAs).\n * Default: true\n */\n closeOnTab?: boolean;\n\n /**\n * Ref to the listbox container for scroll management\n */\n listboxRef?: RefObject<HTMLElement | null>;\n \n /**\n * CSS selector for option elements (default: '[role=\"option\"]')\n */\n optionSelector?: string;\n}\n\nexport interface UseComboboxNavigationReturn {\n /**\n * Currently highlighted index (-1 if none)\n */\n highlightedIndex: number;\n \n /**\n * Set the highlighted index manually\n */\n setHighlightedIndex: (index: number | ((prev: number) => number)) => void;\n \n /**\n * Keyboard event handler for the combobox input\n */\n handleKeyDown: (e: React.KeyboardEvent) => void;\n \n /**\n * Generate stable ID for an option\n */\n getOptionId: (listboxId: string, index: number) => string;\n \n}\n\n/**\n * Hook for managing combobox keyboard navigation with aria-activedescendant.\n * \n * Implements WAI-ARIA 1.2 Combobox pattern:\n * - Arrow Up/Down to navigate options\n * - Enter to select highlighted option\n * - Escape to close dropdown\n * - Tab to close and move focus\n * - Auto-scrolls highlighted option into view\n * \n * @example\n * ```tsx\n * const { \n * highlightedIndex, \n * handleKeyDown, \n * getOptionId \n * } = useComboboxNavigation({\n * items: suggestions,\n * isOpen: isDropdownOpen,\n * onSelect: (item, idx) => handleSelect(item),\n * onClose: () => setIsOpen(false),\n * listboxRef\n * });\n * \n * <input\n * role=\"combobox\"\n * onKeyDown={handleKeyDown}\n * aria-activedescendant={highlightedIndex >= 0 ? getOptionId(listboxId, highlightedIndex) : undefined}\n * />\n * ```\n */\nexport function useComboboxNavigation<T = any>({\n items,\n isOpen,\n onSelect,\n onClose,\n onOpen,\n loop = true,\n disabled = false,\n listboxRef,\n optionSelector = '[role=\"option\"]',\n keepHighlightOnSelect = false,\n closeOnTab = true\n}: UseComboboxNavigationOptions<T>): UseComboboxNavigationReturn {\n const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);\n \n // Reset highlighted index when dropdown closes\n useEffect(() => {\n if (!isOpen) {\n setHighlightedIndex(-1);\n }\n }, [isOpen]);\n \n // Auto-scroll highlighted item into view\n useScrollActiveIntoView({\n containerRef: listboxRef,\n activeIndex: highlightedIndex,\n itemSelector: optionSelector,\n enabled: isOpen\n });\n \n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (disabled) {\n // For disabled navigation, still handle Escape\n if (e.key === 'Escape' && isOpen) {\n e.preventDefault();\n onClose();\n }\n return;\n }\n \n const itemCount = items.length;\n \n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n e.stopPropagation();\n if (!isOpen && itemCount > 0) {\n // Open dropdown and highlight first item\n onOpen?.();\n setHighlightedIndex(0);\n } else if (isOpen && itemCount > 0) {\n // Navigate down\n setHighlightedIndex((prev) => {\n if (loop) {\n return (prev + 1) % itemCount;\n }\n return Math.min(prev + 1, itemCount - 1);\n });\n }\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n e.stopPropagation();\n if (isOpen && itemCount > 0) {\n // Navigate up\n setHighlightedIndex((prev) => {\n // If nothing highlighted, go to last item\n if (prev === -1) {\n return itemCount - 1;\n }\n if (loop) {\n return (prev - 1 + itemCount) % itemCount;\n }\n return Math.max(prev - 1, 0);\n });\n }\n break;\n \n case 'Enter':\n e.preventDefault();\n if (!isOpen) {\n onOpen?.();\n setHighlightedIndex(0);\n } else if (highlightedIndex >= 0 && items[highlightedIndex]) {\n onSelect(items[highlightedIndex], highlightedIndex);\n if (!keepHighlightOnSelect) {\n setHighlightedIndex(-1);\n }\n }\n break;\n\n case '
|
|
1
|
+
{"version":3,"file":"index79.js","sources":["../src/utils/a11y/useComboboxNavigation.ts"],"sourcesContent":["import { useCallback, useState, useEffect } from 'react';\nimport type { RefObject } from 'react';\nimport { useScrollActiveIntoView } from './useScrollActiveIntoView';\n\nexport interface UseComboboxNavigationOptions<T = any> {\n /**\n * Array of items to navigate through\n */\n items: T[];\n \n /**\n * Whether the dropdown is currently open\n */\n isOpen: boolean;\n \n /**\n * Callback when an item is selected (Enter key)\n */\n onSelect: (item: T, index: number) => void;\n \n /**\n * Callback to close the dropdown\n */\n onClose: () => void;\n \n /**\n * Optional: Callback to open the dropdown\n */\n onOpen?: () => void;\n \n /**\n * Whether to wrap around at the ends of the list.\n * Default: true\n */\n loop?: boolean;\n \n /**\n * Whether keyboard navigation is disabled\n * (e.g., for custom rendered content)\n */\n disabled?: boolean;\n\n /**\n * Whether to keep the highlighted index after selecting an item.\n * Useful for multi-select where the dropdown stays open after selection.\n * Default: false\n */\n keepHighlightOnSelect?: boolean;\n\n /**\n * Whether Tab should close the dropdown.\n * Set to false when Tab should move focus to elements within the popup (e.g. CTAs).\n * Default: true\n */\n closeOnTab?: boolean;\n\n /**\n * Ref to the listbox container for scroll management\n */\n listboxRef?: RefObject<HTMLElement | null>;\n \n /**\n * CSS selector for option elements (default: '[role=\"option\"]')\n */\n optionSelector?: string;\n}\n\nexport interface UseComboboxNavigationReturn {\n /**\n * Currently highlighted index (-1 if none)\n */\n highlightedIndex: number;\n \n /**\n * Set the highlighted index manually\n */\n setHighlightedIndex: (index: number | ((prev: number) => number)) => void;\n \n /**\n * Keyboard event handler for the combobox input\n */\n handleKeyDown: (e: React.KeyboardEvent) => void;\n \n /**\n * Generate stable ID for an option\n */\n getOptionId: (listboxId: string, index: number) => string;\n \n}\n\n/**\n * Hook for managing combobox keyboard navigation with aria-activedescendant.\n * \n * Implements WAI-ARIA 1.2 Combobox pattern:\n * - Arrow Up/Down to navigate options\n * - Enter to select highlighted option\n * - Escape to close dropdown\n * - Tab to close and move focus\n * - Auto-scrolls highlighted option into view\n * \n * @example\n * ```tsx\n * const { \n * highlightedIndex, \n * handleKeyDown, \n * getOptionId \n * } = useComboboxNavigation({\n * items: suggestions,\n * isOpen: isDropdownOpen,\n * onSelect: (item, idx) => handleSelect(item),\n * onClose: () => setIsOpen(false),\n * listboxRef\n * });\n * \n * <input\n * role=\"combobox\"\n * onKeyDown={handleKeyDown}\n * aria-activedescendant={highlightedIndex >= 0 ? getOptionId(listboxId, highlightedIndex) : undefined}\n * />\n * ```\n */\nexport function useComboboxNavigation<T = any>({\n items,\n isOpen,\n onSelect,\n onClose,\n onOpen,\n loop = true,\n disabled = false,\n listboxRef,\n optionSelector = '[role=\"option\"]',\n keepHighlightOnSelect = false,\n closeOnTab = true\n}: UseComboboxNavigationOptions<T>): UseComboboxNavigationReturn {\n const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);\n \n // Reset highlighted index when dropdown closes\n useEffect(() => {\n if (!isOpen) {\n setHighlightedIndex(-1);\n }\n }, [isOpen]);\n \n // Auto-scroll highlighted item into view\n useScrollActiveIntoView({\n containerRef: listboxRef,\n activeIndex: highlightedIndex,\n itemSelector: optionSelector,\n enabled: isOpen\n });\n \n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (disabled) {\n // For disabled navigation, still handle Escape\n if (e.key === 'Escape' && isOpen) {\n e.preventDefault();\n onClose();\n }\n return;\n }\n \n const itemCount = items.length;\n \n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n e.stopPropagation();\n if (!isOpen && itemCount > 0) {\n // Open dropdown and highlight first item\n onOpen?.();\n setHighlightedIndex(0);\n } else if (isOpen && itemCount > 0) {\n // Navigate down\n setHighlightedIndex((prev) => {\n if (loop) {\n return (prev + 1) % itemCount;\n }\n return Math.min(prev + 1, itemCount - 1);\n });\n }\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n e.stopPropagation();\n if (isOpen && itemCount > 0) {\n // Navigate up\n setHighlightedIndex((prev) => {\n // If nothing highlighted, go to last item\n if (prev === -1) {\n return itemCount - 1;\n }\n if (loop) {\n return (prev - 1 + itemCount) % itemCount;\n }\n return Math.max(prev - 1, 0);\n });\n }\n break;\n \n case 'Enter':\n e.preventDefault();\n if (!isOpen) {\n onOpen?.();\n setHighlightedIndex(0);\n } else if (highlightedIndex >= 0 && items[highlightedIndex]) {\n onSelect(items[highlightedIndex], highlightedIndex);\n if (!keepHighlightOnSelect) {\n setHighlightedIndex(-1);\n }\n }\n break;\n\n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n onClose();\n setHighlightedIndex(-1);\n }\n break;\n \n case 'Tab':\n // closeOnTab=true (default): close dropdown and let focus move to next element\n // closeOnTab=false: keep dropdown open so Tab reaches CTAs (Clear/Apply)\n if (isOpen && closeOnTab) {\n onClose();\n setHighlightedIndex(-1);\n }\n break;\n }\n },\n [disabled, items, isOpen, highlightedIndex, onSelect, onClose, onOpen, loop, keepHighlightOnSelect, closeOnTab]\n );\n \n const getOptionId = useCallback(\n (listboxId: string, index: number) => `${listboxId}-option-${index}`,\n []\n );\n \n return {\n highlightedIndex,\n setHighlightedIndex,\n handleKeyDown,\n getOptionId\n };\n}\n"],"names":["useState","useEffect","useCallback","useScrollActiveIntoView","useComboboxNavigation","items","isOpen","onSelect","onClose","onOpen","loop","disabled","listboxRef","optionSelector","keepHighlightOnSelect","closeOnTab","highlightedIndex","setHighlightedIndex","containerRef","activeIndex","itemSelector","enabled","handleKeyDown","e","key","preventDefault","itemCount","length","stopPropagation","prev","Math","min","max","getOptionId","listboxId","index"],"mappings":"AAyHO,SAAA,YAAAA,GAAA,aAAAC,GAAA,eAAAC,SAAA;AAAA,SAAA,2BAAAC,SAAA;AAAA,SAASC,EAA+B;AAAA,EAC7CC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,UAAAA,IAAW;AAAA,EACXC,YAAAA;AAAAA,EACAC,gBAAAA,IAAiB;AAAA,EACjBC,uBAAAA,IAAwB;AAAA,EACxBC,YAAAA,IAAa;AACkB,GAAgC;AAC/D,QAAM,CAACC,GAAkBC,CAAmB,IAAIjB,EAAiB,EAAE;AAGnEC,EAAAA,EAAU,MAAM;AACd,IAAKK,KACHW,EAAoB,EAAE;AAAA,EAE1B,GAAG,CAACX,CAAM,CAAC,GAGXH,EAAwB;AAAA,IACtBe,cAAcN;AAAAA,IACdO,aAAaH;AAAAA,IACbI,cAAcP;AAAAA,IACdQ,SAASf;AAAAA,EAAAA,CACV;AAED,QAAMgB,IAAgBpB,EACpB,CAACqB,MAA2B;AAC1B,QAAIZ,GAAU;AAEZ,MAAIY,EAAEC,QAAQ,YAAYlB,MACxBiB,EAAEE,eAAAA,GACFjB,EAAAA;AAEF;AAAA,IACF;AAEA,UAAMkB,IAAYrB,EAAMsB;AAExB,YAAQJ,EAAEC,KAAAA;AAAAA,MACR,KAAK;AACHD,QAAAA,EAAEE,eAAAA,GACFF,EAAEK,gBAAAA,GACE,CAACtB,KAAUoB,IAAY,KAEzBjB,IAAAA,GACAQ,EAAoB,CAAC,KACZX,KAAUoB,IAAY,KAE/BT,EAAqBY,CAAAA,MACfnB,KACMmB,IAAO,KAAKH,IAEfI,KAAKC,IAAIF,IAAO,GAAGH,IAAY,CAAC,CACxC;AAEH;AAAA,MAEF,KAAK;AACHH,QAAAA,EAAEE,eAAAA,GACFF,EAAEK,gBAAAA,GACEtB,KAAUoB,IAAY,KAExBT,EAAqBY,CAAAA,MAEfA,MAAS,KACJH,IAAY,IAEjBhB,KACMmB,IAAO,IAAIH,KAAaA,IAE3BI,KAAKE,IAAIH,IAAO,GAAG,CAAC,CAC5B;AAEH;AAAA,MAEF,KAAK;AACHN,QAAAA,EAAEE,eAAAA,GACGnB,IAGMU,KAAoB,KAAKX,EAAMW,CAAgB,MACxDT,EAASF,EAAMW,CAAgB,GAAGA,CAAgB,GAC7CF,KACHG,EAAoB,EAAE,MALxBR,IAAAA,GACAQ,EAAoB,CAAC;AAOvB;AAAA,MAEF,KAAK;AACH,QAAIX,MACFiB,EAAEE,eAAAA,GACFjB,EAAAA,GACAS,EAAoB,EAAE;AAExB;AAAA,MAEF,KAAK;AAGH,QAAIX,KAAUS,MACZP,EAAAA,GACAS,EAAoB,EAAE;AAExB;AAAA,IAAA;AAAA,EAEN,GACA,CAACN,GAAUN,GAAOC,GAAQU,GAAkBT,GAAUC,GAASC,GAAQC,GAAMI,GAAuBC,CAAU,CAChH,GAEMkB,IAAc/B,EAClB,CAACgC,GAAmBC,MAAkB,GAAGD,CAAS,WAAWC,CAAK,IAClE,CAAA,CACF;AAEA,SAAO;AAAA,IACLnB,kBAAAA;AAAAA,IACAC,qBAAAA;AAAAA,IACAK,eAAAA;AAAAA,IACAW,aAAAA;AAAAA,EAAAA;AAEJ;"}
|