se-design 1.0.68-devnav → 1.0.69-dev
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/Icon/index.d.ts +7 -2
- package/dist/components/NavigationBar/useTabsA11y.d.ts +1 -0
- package/dist/components/Toggle/index.d.ts +1 -1
- package/dist/index186.js +5 -5
- package/dist/index194.js +1 -1
- package/dist/index216.js +17 -15
- package/dist/index216.js.map +1 -1
- package/dist/index227.js +1 -1
- package/dist/index228.js +20 -52
- package/dist/index228.js.map +1 -1
- package/dist/index229.js +53 -9
- package/dist/index229.js.map +1 -1
- package/dist/index230.js +18 -9
- package/dist/index230.js.map +1 -1
- package/dist/index231.js +9 -4
- package/dist/index231.js.map +1 -1
- package/dist/index232.js +10 -170
- package/dist/index232.js.map +1 -1
- package/dist/index233.js +5 -11
- package/dist/index233.js.map +1 -1
- package/dist/index234.js +170 -22
- package/dist/index234.js.map +1 -1
- package/dist/index235.js +11 -19
- package/dist/index235.js.map +1 -1
- package/dist/index48.js +31 -30
- package/dist/index48.js.map +1 -1
- package/dist/index5.js +305 -289
- package/dist/index5.js.map +1 -1
- package/dist/index68.js +27 -26
- package/dist/index68.js.map +1 -1
- package/dist/index8.js +35 -32
- package/dist/index8.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
2
|
export type RotationTypes = '0' | '45' | '90' | '135' | '180' | '225' | '270' | '315';
|
|
3
3
|
export type IconProps = {
|
|
4
4
|
name: string;
|
|
@@ -39,5 +39,10 @@ export type IconProps = {
|
|
|
39
39
|
size?: number;
|
|
40
40
|
shouldStopPropagation?: boolean;
|
|
41
41
|
automationId?: string;
|
|
42
|
+
id?: string;
|
|
43
|
+
tabIndex?: number;
|
|
44
|
+
disabled?: boolean;
|
|
45
|
+
onFocus?: React.FocusEventHandler<HTMLDivElement>;
|
|
46
|
+
onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
|
|
42
47
|
};
|
|
43
|
-
export declare const Icon:
|
|
48
|
+
export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>;
|
package/dist/index186.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import N from "./
|
|
2
|
-
import R from "./
|
|
3
|
-
import D from "./
|
|
4
|
-
import { SVGInjector as A } from "./
|
|
5
|
-
import { p as t } from "./
|
|
1
|
+
import N from "./index231.js";
|
|
2
|
+
import R from "./index232.js";
|
|
3
|
+
import D from "./index233.js";
|
|
4
|
+
import { SVGInjector as A } from "./index234.js";
|
|
5
|
+
import { p as t } from "./index235.js";
|
|
6
6
|
import * as h from "react";
|
|
7
7
|
var O = function(s) {
|
|
8
8
|
var o = s?.ownerDocument || document;
|
package/dist/index194.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useRef as u, useCallback as f, useEffect as P } from "react";
|
|
2
|
-
import { useComboboxNavigation as y } from "./
|
|
2
|
+
import { useComboboxNavigation as y } from "./index229.js";
|
|
3
3
|
import { useDismissOnFocusOut as R } from "./index192.js";
|
|
4
4
|
function M({
|
|
5
5
|
items: l,
|
package/dist/index216.js
CHANGED
|
@@ -1,41 +1,43 @@
|
|
|
1
|
-
import { useCallback as
|
|
2
|
-
import { useRovingFocus as
|
|
1
|
+
import { useCallback as g } from "react";
|
|
2
|
+
import { useRovingFocus as x } from "./index68.js";
|
|
3
3
|
const u = (e, t) => `tab${t ? `-${t}` : ""}-${e}`, c = (e, t) => `panel${t ? `-${t}` : ""}-${e}`;
|
|
4
4
|
function P({
|
|
5
5
|
itemIds: e,
|
|
6
6
|
orientation: t = "horizontal",
|
|
7
|
-
activeNavigationItem:
|
|
8
|
-
idBase:
|
|
7
|
+
activeNavigationItem: n,
|
|
8
|
+
idBase: r = ""
|
|
9
9
|
}) {
|
|
10
10
|
const {
|
|
11
11
|
setFocusedId: f,
|
|
12
12
|
handleKeyDown: l,
|
|
13
13
|
getRovingItemProps: s
|
|
14
|
-
} =
|
|
14
|
+
} = x({
|
|
15
15
|
itemIds: e,
|
|
16
|
-
defaultFocusedId:
|
|
16
|
+
defaultFocusedId: n,
|
|
17
17
|
orientation: t,
|
|
18
18
|
loop: !0
|
|
19
19
|
});
|
|
20
20
|
return {
|
|
21
|
-
getTabProps:
|
|
21
|
+
getTabProps: g((o) => {
|
|
22
22
|
const {
|
|
23
23
|
ref: b,
|
|
24
|
-
tabIndex: a
|
|
25
|
-
|
|
24
|
+
tabIndex: a,
|
|
25
|
+
onFocus: p
|
|
26
|
+
} = s(o), d = n === o;
|
|
26
27
|
return {
|
|
27
28
|
ref: b,
|
|
28
29
|
tabIndex: a,
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
"aria-
|
|
30
|
+
onFocus: p,
|
|
31
|
+
id: u(o, r),
|
|
32
|
+
"aria-controls": c(o, r),
|
|
33
|
+
"aria-selected": d,
|
|
32
34
|
role: "tab"
|
|
33
35
|
};
|
|
34
|
-
}, [
|
|
36
|
+
}, [n, s, r]),
|
|
35
37
|
setFocusedTabId: f,
|
|
36
38
|
handleKeyDown: l,
|
|
37
|
-
getPanelId: (o) => c(o,
|
|
38
|
-
getTabId: (o) => u(o,
|
|
39
|
+
getPanelId: (o) => c(o, r),
|
|
40
|
+
getTabId: (o) => u(o, r)
|
|
39
41
|
};
|
|
40
42
|
}
|
|
41
43
|
export {
|
package/dist/index216.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index216.js","sources":["../src/components/NavigationBar/useTabsA11y.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useRovingFocus } from '../../utils/a11y';\n\nconst getTabId = (itemId: string, idBase: string) => {\n const suffix = idBase ? `-${idBase}` : '';\n return `tab${suffix}-${itemId}`;\n};\n\nconst getPanelId = (itemId: string, idBase: string) => {\n const suffix = idBase ? `-${idBase}` : '';\n return `panel${suffix}-${itemId}`;\n};\n\ninterface UseTabsA11yProps {\n itemIds: string[];\n orientation?: 'horizontal' | 'vertical';\n activeNavigationItem: string;\n idBase?: string;\n}\n\ninterface TabA11yProps {\n ref: (el: HTMLElement | null) => void;\n tabIndex: number;\n id: string;\n 'aria-controls': string;\n 'aria-selected': boolean;\n role: 'tab';\n}\n\n/**\n * Hook for managing Tabs (NavigationBar) focus and ARIA props.\n * Handles roving tabindex pattern and generates tab-specific ARIA attributes.\n * \n * @example\n * const itemIds = useMemo(() => navigationItems.map(item => item.id), [navigationItems]);\n * const { getTabProps, setFocusedTabId, handleKeyDown } = useTabsA11y({\n * itemIds,\n * activeNavigationItem: 'tab-1',\n * orientation: 'horizontal',\n * idBase: 'settings'\n * });\n */\nexport function useTabsA11y({\n itemIds,\n orientation = 'horizontal',\n activeNavigationItem,\n idBase = ''\n}: UseTabsA11yProps) {\n const {\n setFocusedId: setFocusedTabId,\n handleKeyDown,\n getRovingItemProps\n } = useRovingFocus({\n itemIds,\n defaultFocusedId: activeNavigationItem,\n orientation,\n loop: true\n });\n\n /**\n * Get all props needed for a tab button.\n * Combines roving focus props (ref, tabIndex) with tab-specific ARIA attributes.\n */\n const getTabProps = useCallback((itemId: string): TabA11yProps => {\n const { ref, tabIndex } = getRovingItemProps(itemId);\n const isSelected = activeNavigationItem === itemId;\n\n return {\n ref,\n tabIndex,\n id: getTabId(itemId, idBase),\n 'aria-controls': getPanelId(itemId, idBase),\n 'aria-selected': isSelected,\n role: 'tab'\n };\n }, [activeNavigationItem, getRovingItemProps, idBase]);\n\n return {\n getTabProps,\n setFocusedTabId,\n handleKeyDown,\n getPanelId: (itemId: string) => getPanelId(itemId, idBase),\n getTabId: (itemId: string) => getTabId(itemId, idBase)\n };\n}\n\n"],"names":["useCallback","useRovingFocus","getTabId","itemId","idBase","getPanelId","useTabsA11y","itemIds","orientation","activeNavigationItem","setFocusedId","setFocusedTabId","handleKeyDown","getRovingItemProps","defaultFocusedId","loop","getTabProps","ref","tabIndex","isSelected","id","role"],"mappings":"AAGA,SAAA,eAAAA,SAAA;AAAA,SAAA,kBAAAC,SAAA;AAAA,MAAMC,IAAWA,CAACC,GAAgBC,MAEzB,MADQA,IAAS,IAAIA,CAAM,KAAK,EACpB,IAAID,CAAM,IAGzBE,IAAaA,CAACF,GAAgBC,MAE3B,QADQA,IAAS,IAAIA,CAAM,KAAK,EAClB,IAAID,CAAM;
|
|
1
|
+
{"version":3,"file":"index216.js","sources":["../src/components/NavigationBar/useTabsA11y.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useRovingFocus } from '../../utils/a11y';\n\nconst getTabId = (itemId: string, idBase: string) => {\n const suffix = idBase ? `-${idBase}` : '';\n return `tab${suffix}-${itemId}`;\n};\n\nconst getPanelId = (itemId: string, idBase: string) => {\n const suffix = idBase ? `-${idBase}` : '';\n return `panel${suffix}-${itemId}`;\n};\n\ninterface UseTabsA11yProps {\n itemIds: string[];\n orientation?: 'horizontal' | 'vertical';\n activeNavigationItem: string;\n idBase?: string;\n}\n\ninterface TabA11yProps {\n ref: (el: HTMLElement | null) => void;\n tabIndex: number;\n onFocus: () => void;\n id: string;\n 'aria-controls': string;\n 'aria-selected': boolean;\n role: 'tab';\n}\n\n/**\n * Hook for managing Tabs (NavigationBar) focus and ARIA props.\n * Handles roving tabindex pattern and generates tab-specific ARIA attributes.\n * \n * @example\n * const itemIds = useMemo(() => navigationItems.map(item => item.id), [navigationItems]);\n * const { getTabProps, setFocusedTabId, handleKeyDown } = useTabsA11y({\n * itemIds,\n * activeNavigationItem: 'tab-1',\n * orientation: 'horizontal',\n * idBase: 'settings'\n * });\n */\nexport function useTabsA11y({\n itemIds,\n orientation = 'horizontal',\n activeNavigationItem,\n idBase = ''\n}: UseTabsA11yProps) {\n const {\n setFocusedId: setFocusedTabId,\n handleKeyDown,\n getRovingItemProps\n } = useRovingFocus({\n itemIds,\n defaultFocusedId: activeNavigationItem,\n orientation,\n loop: true\n });\n\n /**\n * Get all props needed for a tab button.\n * Combines roving focus props (ref, tabIndex) with tab-specific ARIA attributes.\n */\n const getTabProps = useCallback((itemId: string): TabA11yProps => {\n const { ref, tabIndex, onFocus } = getRovingItemProps(itemId);\n const isSelected = activeNavigationItem === itemId;\n\n return {\n ref,\n tabIndex,\n onFocus,\n id: getTabId(itemId, idBase),\n 'aria-controls': getPanelId(itemId, idBase),\n 'aria-selected': isSelected,\n role: 'tab'\n };\n }, [activeNavigationItem, getRovingItemProps, idBase]);\n\n return {\n getTabProps,\n setFocusedTabId,\n handleKeyDown,\n getPanelId: (itemId: string) => getPanelId(itemId, idBase),\n getTabId: (itemId: string) => getTabId(itemId, idBase)\n };\n}\n\n"],"names":["useCallback","useRovingFocus","getTabId","itemId","idBase","getPanelId","useTabsA11y","itemIds","orientation","activeNavigationItem","setFocusedId","setFocusedTabId","handleKeyDown","getRovingItemProps","defaultFocusedId","loop","getTabProps","ref","tabIndex","onFocus","isSelected","id","role"],"mappings":"AAGA,SAAA,eAAAA,SAAA;AAAA,SAAA,kBAAAC,SAAA;AAAA,MAAMC,IAAWA,CAACC,GAAgBC,MAEzB,MADQA,IAAS,IAAIA,CAAM,KAAK,EACpB,IAAID,CAAM,IAGzBE,IAAaA,CAACF,GAAgBC,MAE3B,QADQA,IAAS,IAAIA,CAAM,KAAK,EAClB,IAAID,CAAM;AAiC1B,SAASG,EAAY;AAAA,EAC1BC,SAAAA;AAAAA,EACAC,aAAAA,IAAc;AAAA,EACdC,sBAAAA;AAAAA,EACAL,QAAAA,IAAS;AACO,GAAG;AACnB,QAAM;AAAA,IACJM,cAAcC;AAAAA,IACdC,eAAAA;AAAAA,IACAC,oBAAAA;AAAAA,EAAAA,IACEZ,EAAe;AAAA,IACjBM,SAAAA;AAAAA,IACAO,kBAAkBL;AAAAA,IAClBD,aAAAA;AAAAA,IACAO,MAAM;AAAA,EAAA,CACP;AAqBD,SAAO;AAAA,IACLC,aAhBkBhB,EAAY,CAACG,MAAiC;AAChE,YAAM;AAAA,QAAEc,KAAAA;AAAAA,QAAKC,UAAAA;AAAAA,QAAUC,SAAAA;AAAAA,MAAAA,IAAYN,EAAmBV,CAAM,GACtDiB,IAAaX,MAAyBN;AAE5C,aAAO;AAAA,QACLc,KAAAA;AAAAA,QACAC,UAAAA;AAAAA,QACAC,SAAAA;AAAAA,QACAE,IAAInB,EAASC,GAAQC,CAAM;AAAA,QAC3B,iBAAiBC,EAAWF,GAAQC,CAAM;AAAA,QAC1C,iBAAiBgB;AAAAA,QACjBE,MAAM;AAAA,MAAA;AAAA,IAEV,GAAG,CAACb,GAAsBI,GAAoBT,CAAM,CAAC;AAAA,IAInDO,iBAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAP,YAAYA,CAACF,MAAmBE,EAAWF,GAAQC,CAAM;AAAA,IACzDF,UAAUA,CAACC,MAAmBD,EAASC,GAAQC,CAAM;AAAA,EAAA;AAEzD;"}
|
package/dist/index227.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useRef as E, useLayoutEffect as f } from "react";
|
|
2
|
-
import { getFirstFocusableElement as d, getFocusableElements as g } from "./
|
|
2
|
+
import { getFirstFocusableElement as d, getFocusableElements as g } from "./index228.js";
|
|
3
3
|
function y(e, t) {
|
|
4
4
|
return t === "first" ? d({
|
|
5
5
|
container: e
|
package/dist/index228.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=index228.js.map
|
package/dist/index228.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index228.js","sources":["../src/utils/a11y/
|
|
1
|
+
{"version":3,"file":"index228.js","sources":["../src/utils/a11y/focusableElements.ts"],"sourcesContent":["/**\n * Utilities for finding focusable elements within a container.\n * \n * Used for focus management in modals, popovers, and other interactive overlays.\n */\n\n/**\n * Base selector for standard focusable elements.\n * Matches: buttons, links, inputs, selects, textareas, elements with tabindex >= 0, contenteditable.\n */\nexport const FOCUSABLE_SELECTOR = [\n 'button:not([disabled])',\n '[href]',\n 'input:not([disabled])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n '[contenteditable=\"true\"]'\n].join(', ');\n\n/**\n * Extended selector that includes ARIA role-based focusable elements.\n * Useful for composite widgets like menus, listboxes, etc.\n */\nexport const FOCUSABLE_WITH_ROLES_SELECTOR = [\n FOCUSABLE_SELECTOR,\n '[role=\"menuitem\"]',\n '[role=\"option\"]',\n '[role=\"menuitemcheckbox\"]',\n '[role=\"menuitemradio\"]'\n].join(', ');\n\n/**\n * Options for getFocusableElements\n */\nexport interface GetFocusableElementsOptions {\n /**\n * Container element to search within. If null/undefined, returns empty array.\n */\n container: HTMLElement | null;\n /**\n * Whether to include role-based focusable elements (menuitem, option, etc.).\n * Default: false (uses base selector only)\n */\n includeRoles?: boolean;\n /**\n * Additional custom selectors to include.\n */\n additionalSelectors?: string[];\n /**\n * Whether to filter out hidden/invisible elements.\n * Default: false (returns all matching elements regardless of visibility)\n */\n filterHidden?: boolean;\n}\n\n/**\n * Get all focusable elements within a container.\n * \n * @example Basic usage (standard focusable elements)\n * ```ts\n * const focusables = getFocusableElements({ container: dialogRef.current });\n * focusables[0]?.focus(); // Focus first element\n * ```\n * \n * @example With role-based elements (for menus/listboxes)\n * ```ts\n * const focusables = getFocusableElements({ \n * container: menuRef.current,\n * includeRoles: true \n * });\n * ```\n * \n * @example With custom selectors\n * ```ts\n * const focusables = getFocusableElements({ \n * container: customWidgetRef.current,\n * additionalSelectors: ['[data-focusable=\"true\"]']\n * });\n * ```\n */\nexport function getFocusableElements({\n container,\n includeRoles = false,\n additionalSelectors = [],\n filterHidden = false\n}: GetFocusableElementsOptions): HTMLElement[] {\n if (!container) return [];\n\n const selector = [\n includeRoles ? FOCUSABLE_WITH_ROLES_SELECTOR : FOCUSABLE_SELECTOR,\n ...additionalSelectors\n ].filter(Boolean).join(', ');\n\n const elements = Array.from(container.querySelectorAll<HTMLElement>(selector));\n\n if (!filterHidden) return elements;\n\n // Filter out hidden/invisible elements\n return elements.filter((el) => {\n const style = window.getComputedStyle(el);\n return (\n style.display !== 'none' &&\n style.visibility !== 'hidden' &&\n style.opacity !== '0' &&\n !el.hasAttribute('hidden') &&\n el.offsetWidth > 0 &&\n el.offsetHeight > 0\n );\n });\n}\n\n/**\n * Get the first focusable element in a container.\n * Returns null if none found.\n */\nexport function getFirstFocusableElement(\n options: GetFocusableElementsOptions\n): HTMLElement | null {\n const focusables = getFocusableElements(options);\n return focusables.length > 0 ? focusables[0] : null;\n}\n\n/**\n * Get the last focusable element in a container.\n * Returns null if none found.\n */\nexport function getLastFocusableElement(\n options: GetFocusableElementsOptions\n): HTMLElement | null {\n const focusables = getFocusableElements(options);\n return focusables.length > 0 ? focusables[focusables.length - 1] : null;\n}\n"],"names":["FOCUSABLE_SELECTOR","join","FOCUSABLE_WITH_ROLES_SELECTOR","getFocusableElements","container","includeRoles","additionalSelectors","filterHidden","selector","filter","Boolean","elements","Array","from","querySelectorAll","el","style","window","getComputedStyle","display","visibility","opacity","hasAttribute","offsetWidth","offsetHeight","getFirstFocusableElement","options","focusables","length"],"mappings":"AAUO,MAAMA,IAAqB,CAChC,0BACA,UACA,yBACA,0BACA,4BACA,mDACA,0BAA0B,EAC1BC,KAAK,IAAI,GAMEC,IAAgC,CAC3CF,GACA,qBACA,mBACA,6BACA,wBAAwB,EACxBC,KAAK,IAAI;AAmDJ,SAASE,EAAqB;AAAA,EACnCC,WAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,qBAAAA,IAAsB,CAAA;AAAA,EACtBC,cAAAA,IAAe;AACY,GAAkB;AAC7C,MAAI,CAACH,EAAW,QAAO,CAAA;AAEvB,QAAMI,IAAW,CACfH,IAAeH,IAAgCF,GAC/C,GAAGM,CAAmB,EACtBG,OAAOC,OAAO,EAAET,KAAK,IAAI,GAErBU,IAAWC,MAAMC,KAAKT,EAAUU,iBAA8BN,CAAQ,CAAC;AAE7E,SAAKD,IAGEI,EAASF,OAAQM,CAAAA,MAAO;AAC7B,UAAMC,IAAQC,OAAOC,iBAAiBH,CAAE;AACxC,WACEC,EAAMG,YAAY,UAClBH,EAAMI,eAAe,YACrBJ,EAAMK,YAAY,OAClB,CAACN,EAAGO,aAAa,QAAQ,KACzBP,EAAGQ,cAAc,KACjBR,EAAGS,eAAe;AAAA,EAEtB,CAAC,IAbyBb;AAc5B;AAMO,SAASc,EACdC,GACoB;AACpB,QAAMC,IAAaxB,EAAqBuB,CAAO;AAC/C,SAAOC,EAAWC,SAAS,IAAID,EAAW,CAAC,IAAI;AACjD;"}
|
package/dist/index229.js
CHANGED
|
@@ -1,13 +1,57 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { useState as m, useEffect as w, useCallback as b } from "react";
|
|
2
|
+
import { useScrollActiveIntoView as x } from "./index230.js";
|
|
3
|
+
function E({
|
|
4
|
+
items: u,
|
|
5
|
+
isOpen: t,
|
|
6
|
+
onSelect: o,
|
|
7
|
+
onClose: c,
|
|
8
|
+
onOpen: l,
|
|
9
|
+
loop: i = !0,
|
|
10
|
+
disabled: h = !1,
|
|
11
|
+
listboxRef: k,
|
|
12
|
+
optionSelector: g = '[role="option"]'
|
|
13
|
+
}) {
|
|
14
|
+
const [f, a] = m(-1);
|
|
15
|
+
w(() => {
|
|
16
|
+
t || a(-1);
|
|
17
|
+
}, [t]), x({
|
|
18
|
+
containerRef: k,
|
|
19
|
+
activeIndex: f,
|
|
20
|
+
itemSelector: g,
|
|
21
|
+
enabled: t
|
|
22
|
+
});
|
|
23
|
+
const D = b((r) => {
|
|
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
|
+
};
|
|
9
53
|
}
|
|
10
54
|
export {
|
|
11
|
-
|
|
55
|
+
E as useComboboxNavigation
|
|
12
56
|
};
|
|
13
57
|
//# sourceMappingURL=index229.js.map
|
package/dist/index229.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index229.js","sources":["../
|
|
1
|
+
{"version":3,"file":"index229.js","sources":["../src/utils/a11y/useComboboxNavigation.ts"],"sourcesContent":["import { useCallback, useState, useEffect } from 'react';\nimport type { RefObject } from 'react';\nimport { useScrollActiveIntoView } from './useScrollActiveIntoView';\n\nexport interface UseComboboxNavigationOptions<T = any> {\n /**\n * Array of items to navigate through\n */\n items: T[];\n \n /**\n * Whether the dropdown is currently open\n */\n isOpen: boolean;\n \n /**\n * Callback when an item is selected (Enter key)\n */\n onSelect: (item: T, index: number) => void;\n \n /**\n * Callback to close the dropdown\n */\n onClose: () => void;\n \n /**\n * Optional: Callback to open the dropdown\n */\n onOpen?: () => void;\n \n /**\n * Whether to wrap around at the ends of the list.\n * Default: true\n */\n loop?: boolean;\n \n /**\n * Whether keyboard navigation is disabled\n * (e.g., for custom rendered content)\n */\n disabled?: boolean;\n \n /**\n * Ref to the listbox container for scroll management\n */\n listboxRef?: RefObject<HTMLElement | null>;\n \n /**\n * CSS selector for option elements (default: '[role=\"option\"]')\n */\n optionSelector?: string;\n}\n\nexport interface UseComboboxNavigationReturn {\n /**\n * Currently highlighted index (-1 if none)\n */\n highlightedIndex: number;\n \n /**\n * Set the highlighted index manually\n */\n setHighlightedIndex: (index: number | ((prev: number) => number)) => void;\n \n /**\n * Keyboard event handler for the combobox input\n */\n handleKeyDown: (e: React.KeyboardEvent) => void;\n \n /**\n * Generate stable ID for an option\n */\n getOptionId: (listboxId: string, index: number) => string;\n \n}\n\n/**\n * Hook for managing combobox keyboard navigation with aria-activedescendant.\n * \n * Implements WAI-ARIA 1.2 Combobox pattern:\n * - Arrow Up/Down to navigate options\n * - Enter to select highlighted option\n * - Escape to close dropdown\n * - Tab to close and move focus\n * - Auto-scrolls highlighted option into view\n * \n * @example\n * ```tsx\n * const { \n * highlightedIndex, \n * handleKeyDown, \n * getOptionId \n * } = useComboboxNavigation({\n * items: suggestions,\n * isOpen: isDropdownOpen,\n * onSelect: (item, idx) => handleSelect(item),\n * onClose: () => setIsOpen(false),\n * listboxRef\n * });\n * \n * <input\n * role=\"combobox\"\n * onKeyDown={handleKeyDown}\n * aria-activedescendant={highlightedIndex >= 0 ? getOptionId(listboxId, highlightedIndex) : undefined}\n * />\n * ```\n */\nexport function useComboboxNavigation<T = any>({\n items,\n isOpen,\n onSelect,\n onClose,\n onOpen,\n loop = true,\n disabled = false,\n listboxRef,\n optionSelector = '[role=\"option\"]'\n}: UseComboboxNavigationOptions<T>): UseComboboxNavigationReturn {\n const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);\n \n // Reset highlighted index when dropdown closes\n useEffect(() => {\n if (!isOpen) {\n setHighlightedIndex(-1);\n }\n }, [isOpen]);\n \n // Auto-scroll highlighted item into view\n useScrollActiveIntoView({\n containerRef: listboxRef,\n activeIndex: highlightedIndex,\n itemSelector: optionSelector,\n enabled: isOpen\n });\n \n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (disabled) {\n // For disabled navigation, still handle Escape\n if (e.key === 'Escape' && isOpen) {\n e.preventDefault();\n onClose();\n }\n return;\n }\n \n const itemCount = items.length;\n \n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen && itemCount > 0) {\n // Open dropdown and highlight first item\n onOpen?.();\n setHighlightedIndex(0);\n } else if (isOpen && itemCount > 0) {\n // Navigate down\n setHighlightedIndex((prev) => {\n if (loop) {\n return (prev + 1) % itemCount;\n }\n return Math.min(prev + 1, itemCount - 1);\n });\n }\n break;\n \n case 'ArrowUp':\n e.preventDefault();\n if (isOpen && itemCount > 0) {\n // Navigate up\n setHighlightedIndex((prev) => {\n // If nothing highlighted, go to last item\n if (prev === -1) {\n return itemCount - 1;\n }\n if (loop) {\n return (prev - 1 + itemCount) % itemCount;\n }\n return Math.max(prev - 1, 0);\n });\n }\n break;\n \n case 'Enter':\n if (isOpen && highlightedIndex >= 0 && items[highlightedIndex]) {\n e.preventDefault();\n onSelect(items[highlightedIndex], highlightedIndex);\n setHighlightedIndex(-1);\n }\n break;\n \n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n onClose();\n setHighlightedIndex(-1);\n }\n break;\n \n case 'Tab':\n // Close dropdown on Tab (don't preventDefault - let focus move naturally)\n if (isOpen) {\n onClose();\n setHighlightedIndex(-1);\n }\n break;\n }\n },\n [disabled, items, isOpen, highlightedIndex, onSelect, onClose, onOpen, loop]\n );\n \n const getOptionId = useCallback(\n (listboxId: string, index: number) => `${listboxId}-option-${index}`,\n []\n );\n \n return {\n highlightedIndex,\n setHighlightedIndex,\n handleKeyDown,\n getOptionId\n };\n}\n"],"names":["useState","useEffect","useCallback","useScrollActiveIntoView","useComboboxNavigation","items","isOpen","onSelect","onClose","onOpen","loop","disabled","listboxRef","optionSelector","highlightedIndex","setHighlightedIndex","containerRef","activeIndex","itemSelector","enabled","handleKeyDown","e","key","preventDefault","itemCount","length","prev","Math","min","max","getOptionId","listboxId","index"],"mappings":"AA2GO,SAAA,YAAAA,GAAA,aAAAC,GAAA,eAAAC,SAAA;AAAA,SAAA,2BAAAC,SAAA;AAAA,SAASC,EAA+B;AAAA,EAC7CC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,UAAAA,IAAW;AAAA,EACXC,YAAAA;AAAAA,EACAC,gBAAAA,IAAiB;AACc,GAAgC;AAC/D,QAAM,CAACC,GAAkBC,CAAmB,IAAIf,EAAiB,EAAE;AAGnEC,EAAAA,EAAU,MAAM;AACd,IAAKK,KACHS,EAAoB,EAAE;AAAA,EAE1B,GAAG,CAACT,CAAM,CAAC,GAGXH,EAAwB;AAAA,IACtBa,cAAcJ;AAAAA,IACdK,aAAaH;AAAAA,IACbI,cAAcL;AAAAA,IACdM,SAASb;AAAAA,EAAAA,CACV;AAED,QAAMc,IAAgBlB,EACpB,CAACmB,MAA2B;AAC1B,QAAIV,GAAU;AAEZ,MAAIU,EAAEC,QAAQ,YAAYhB,MACxBe,EAAEE,eAAAA,GACFf,EAAAA;AAEF;AAAA,IACF;AAEA,UAAMgB,IAAYnB,EAAMoB;AAExB,YAAQJ,EAAEC,KAAAA;AAAAA,MACR,KAAK;AACHD,QAAAA,EAAEE,eAAAA,GACE,CAACjB,KAAUkB,IAAY,KAEzBf,IAAAA,GACAM,EAAoB,CAAC,KACZT,KAAUkB,IAAY,KAE/BT,EAAqBW,CAAAA,MACfhB,KACMgB,IAAO,KAAKF,IAEfG,KAAKC,IAAIF,IAAO,GAAGF,IAAY,CAAC,CACxC;AAEH;AAAA,MAEF,KAAK;AACHH,QAAAA,EAAEE,eAAAA,GACEjB,KAAUkB,IAAY,KAExBT,EAAqBW,CAAAA,MAEfA,MAAS,KACJF,IAAY,IAEjBd,KACMgB,IAAO,IAAIF,KAAaA,IAE3BG,KAAKE,IAAIH,IAAO,GAAG,CAAC,CAC5B;AAEH;AAAA,MAEF,KAAK;AACH,QAAIpB,KAAUQ,KAAoB,KAAKT,EAAMS,CAAgB,MAC3DO,EAAEE,eAAAA,GACFhB,EAASF,EAAMS,CAAgB,GAAGA,CAAgB,GAClDC,EAAoB,EAAE;AAExB;AAAA,MAEF,KAAK;AACH,QAAIT,MACFe,EAAEE,eAAAA,GACFf,EAAAA,GACAO,EAAoB,EAAE;AAExB;AAAA,MAEF,KAAK;AAEH,QAAIT,MACFE,EAAAA,GACAO,EAAoB,EAAE;AAExB;AAAA,IAAA;AAAA,EAEN,GACA,CAACJ,GAAUN,GAAOC,GAAQQ,GAAkBP,GAAUC,GAASC,GAAQC,CAAI,CAC7E,GAEMoB,IAAc5B,EAClB,CAAC6B,GAAmBC,MAAkB,GAAGD,CAAS,WAAWC,CAAK,IAClE,CAAA,CACF;AAEA,SAAO;AAAA,IACLlB,kBAAAA;AAAAA,IACAC,qBAAAA;AAAAA,IACAK,eAAAA;AAAAA,IACAU,aAAAA;AAAAA,EAAAA;AAEJ;"}
|
package/dist/index230.js
CHANGED
|
@@ -1,13 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { useEffect as s } from "react";
|
|
2
|
+
const u = {
|
|
3
|
+
block: "nearest"
|
|
4
|
+
};
|
|
5
|
+
function m({
|
|
6
|
+
containerRef: t,
|
|
7
|
+
activeIndex: o,
|
|
8
|
+
itemSelector: r = '[role="option"]',
|
|
9
|
+
enabled: c = !0,
|
|
10
|
+
scrollOptions: e = u
|
|
11
|
+
}) {
|
|
12
|
+
s(() => {
|
|
13
|
+
if (!c || o < 0 || !t?.current)
|
|
14
|
+
return;
|
|
15
|
+
const n = t.current.querySelectorAll(r)[o];
|
|
16
|
+
n && n.scrollIntoView(e);
|
|
17
|
+
}, [o, t, r, c, e]);
|
|
9
18
|
}
|
|
10
19
|
export {
|
|
11
|
-
|
|
20
|
+
m as useScrollActiveIntoView
|
|
12
21
|
};
|
|
13
22
|
//# sourceMappingURL=index230.js.map
|
package/dist/index230.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index230.js","sources":["../
|
|
1
|
+
{"version":3,"file":"index230.js","sources":["../src/utils/a11y/useScrollActiveIntoView.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type { RefObject } from 'react';\n\nconst DEFAULT_SCROLL_OPTIONS: ScrollIntoViewOptions = { block: 'nearest' };\n\nexport interface UseScrollActiveIntoViewOptions {\n /**\n * Ref to the container element\n */\n containerRef?: RefObject<HTMLElement | null>;\n \n /**\n * Index of the currently active/highlighted item (-1 if none)\n */\n activeIndex: number;\n \n /**\n * CSS selector for item elements\n * Default: '[role=\"option\"]'\n */\n itemSelector?: string;\n \n /**\n * Whether scrolling is enabled\n * Default: true\n */\n enabled?: boolean;\n \n /**\n * ScrollIntoView options\n * Default: { block: 'nearest' }\n */\n scrollOptions?: ScrollIntoViewOptions;\n}\n\n/**\n * Hook to automatically scroll the active item into view.\n * \n * Useful for aria-activedescendant patterns where DOM focus stays\n * on the container (e.g., input field) but we need to visually show\n * which descendant option is logically active.\n * \n * Common use cases:\n * - Combobox dropdown options\n * - Menu items with virtual focus\n * - Grid cells with keyboard navigation\n * - Tree view items\n * - Listbox options\n * \n * @example\n * ```tsx\n * const [highlightedIndex, setHighlightedIndex] = useState(-1);\n * const listboxRef = useRef<HTMLDivElement>(null);\n * \n * useScrollActiveIntoView({\n * containerRef: listboxRef,\n * activeIndex: highlightedIndex,\n * itemSelector: '[role=\"option\"]'\n * });\n * \n * // Now when highlightedIndex changes, the item scrolls into view\n * ```\n * \n * @example Custom scroll behavior\n * ```tsx\n * useScrollActiveIntoView({\n * containerRef: menuRef,\n * activeIndex: activeMenuIndex,\n * itemSelector: '[role=\"menuitem\"]',\n * scrollOptions: { block: 'center', behavior: 'smooth' }\n * });\n * ```\n */\nexport function useScrollActiveIntoView({\n containerRef,\n activeIndex,\n itemSelector = '[role=\"option\"]',\n enabled = true,\n scrollOptions = DEFAULT_SCROLL_OPTIONS\n}: UseScrollActiveIntoViewOptions): void {\n useEffect(() => {\n // Early returns for disabled states\n if (!enabled || activeIndex < 0 || !containerRef?.current) {\n return;\n }\n \n const container = containerRef.current;\n const items = container.querySelectorAll(itemSelector);\n const activeItem = items[activeIndex] as HTMLElement;\n \n if (activeItem) {\n activeItem.scrollIntoView(scrollOptions);\n }\n }, [activeIndex, containerRef, itemSelector, enabled, scrollOptions]);\n}\n"],"names":["useEffect","DEFAULT_SCROLL_OPTIONS","block","useScrollActiveIntoView","containerRef","activeIndex","itemSelector","enabled","scrollOptions","current","activeItem","querySelectorAll","scrollIntoView"],"mappings":"AAGA,SAAA,aAAAA,SAAA;AAAA,MAAMC,IAAgD;AAAA,EAAEC,OAAO;AAAU;AAsElE,SAASC,EAAwB;AAAA,EACtCC,cAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,SAAAA,IAAU;AAAA,EACVC,eAAAA,IAAgBP;AACc,GAAS;AACvCD,EAAAA,EAAU,MAAM;AAEd,QAAI,CAACO,KAAWF,IAAc,KAAK,CAACD,GAAcK;AAChD;AAKF,UAAMC,IAFYN,EAAaK,QACPE,iBAAiBL,CAAY,EAC5BD,CAAW;AAEpC,IAAIK,KACFA,EAAWE,eAAeJ,CAAa;AAAA,EAE3C,GAAG,CAACH,GAAaD,GAAcE,GAAcC,GAASC,CAAa,CAAC;AACtE;"}
|
package/dist/index231.js
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
function r(t, i) {
|
|
2
|
+
if (t == null) return {};
|
|
3
|
+
var o = {};
|
|
4
|
+
for (var e in t) if ({}.hasOwnProperty.call(t, e)) {
|
|
5
|
+
if (i.indexOf(e) !== -1) continue;
|
|
6
|
+
o[e] = t[e];
|
|
7
|
+
}
|
|
8
|
+
return o;
|
|
4
9
|
}
|
|
5
10
|
export {
|
|
6
|
-
|
|
11
|
+
r as default
|
|
7
12
|
};
|
|
8
13
|
//# sourceMappingURL=index231.js.map
|
package/dist/index231.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index231.js","sources":["../node_modules/@babel/runtime/helpers/esm/
|
|
1
|
+
{"version":3,"file":"index231.js","sources":["../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js"],"sourcesContent":["function _objectWithoutPropertiesLoose(r, e) {\n if (null == r) return {};\n var t = {};\n for (var n in r) if ({}.hasOwnProperty.call(r, n)) {\n if (-1 !== e.indexOf(n)) continue;\n t[n] = r[n];\n }\n return t;\n}\nexport { _objectWithoutPropertiesLoose as default };"],"names":["_objectWithoutPropertiesLoose","r","e","t","n"],"mappings":"AAAA,SAASA,EAA8BC,GAAGC,GAAG;AAC3C,MAAYD,KAAR,KAAW,QAAO,CAAA;AACtB,MAAIE,IAAI,CAAA;AACR,WAASC,KAAKH,EAAG,KAAI,CAAA,EAAG,eAAe,KAAKA,GAAGG,CAAC,GAAG;AACjD,QAAWF,EAAE,QAAQE,CAAC,MAAlB,GAAqB;AACzB,IAAAD,EAAEC,CAAC,IAAIH,EAAEG,CAAC;AAAA,EACZ;AACA,SAAOD;AACT;","x_google_ignoreList":[0]}
|