@gooddata/sdk-ui-kit 10.27.0-alpha.2 → 10.27.0-alpha.20
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/esm/@ui/@utils/keyboardNavigation.d.ts +23 -12
- package/esm/@ui/@utils/keyboardNavigation.d.ts.map +1 -1
- package/esm/@ui/@utils/keyboardNavigation.js +58 -16
- package/esm/@ui/@utils/keyboardNavigation.js.map +1 -1
- package/esm/@ui/UiFocusTrap/UiFocusTrap.d.ts +9 -0
- package/esm/@ui/UiFocusTrap/UiFocusTrap.d.ts.map +1 -1
- package/esm/@ui/UiFocusTrap/UiFocusTrap.js +82 -71
- package/esm/@ui/UiFocusTrap/UiFocusTrap.js.map +1 -1
- package/esm/@ui/UiListbox/UiListbox.d.ts.map +1 -1
- package/esm/@ui/UiListbox/UiListbox.js +1 -3
- package/esm/@ui/UiListbox/UiListbox.js.map +1 -1
- package/esm/@ui/UiListbox/defaults/DefaultUiListboxStaticItemComponent.d.ts +5 -2
- package/esm/@ui/UiListbox/defaults/DefaultUiListboxStaticItemComponent.d.ts.map +1 -1
- package/esm/@ui/UiListbox/defaults/DefaultUiListboxStaticItemComponent.js.map +1 -1
- package/esm/@ui/UiListbox/defaults/firstCharacterSearch.d.ts +2 -2
- package/esm/@ui/UiListbox/defaults/firstCharacterSearch.d.ts.map +1 -1
- package/esm/@ui/UiListbox/defaults/firstCharacterSearch.js +1 -1
- package/esm/@ui/UiListbox/defaults/firstCharacterSearch.js.map +1 -1
- package/esm/@ui/UiListbox/types.d.ts +4 -4
- package/esm/@ui/UiListbox/types.d.ts.map +1 -1
- package/esm/@ui/UiMenu/UiMenu.d.ts +11 -0
- package/esm/@ui/UiMenu/UiMenu.d.ts.map +1 -0
- package/esm/@ui/UiMenu/UiMenu.js +94 -0
- package/esm/@ui/UiMenu/UiMenu.js.map +1 -0
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuHeaderComponent.d.ts +9 -0
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuHeaderComponent.d.ts.map +1 -0
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuHeaderComponent.js +23 -0
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuHeaderComponent.js.map +1 -0
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuInteractiveItemComponent.d.ts +7 -0
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuInteractiveItemComponent.d.ts.map +1 -0
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuInteractiveItemComponent.js +16 -0
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuInteractiveItemComponent.js.map +1 -0
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuStaticItemComponent.d.ts +8 -0
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuStaticItemComponent.d.ts.map +1 -0
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuStaticItemComponent.js +9 -0
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuStaticItemComponent.js.map +1 -0
- package/esm/@ui/UiMenu/hooks.d.ts +16 -0
- package/esm/@ui/UiMenu/hooks.d.ts.map +1 -0
- package/esm/@ui/UiMenu/hooks.js +87 -0
- package/esm/@ui/UiMenu/hooks.js.map +1 -0
- package/esm/@ui/UiMenu/itemUtils.d.ts +17 -0
- package/esm/@ui/UiMenu/itemUtils.d.ts.map +1 -0
- package/esm/@ui/UiMenu/itemUtils.js +73 -0
- package/esm/@ui/UiMenu/itemUtils.js.map +1 -0
- package/esm/@ui/UiMenu/menuBem.d.ts +2 -0
- package/esm/@ui/UiMenu/menuBem.d.ts.map +1 -0
- package/esm/@ui/UiMenu/menuBem.js +4 -0
- package/esm/@ui/UiMenu/menuBem.js.map +1 -0
- package/esm/@ui/UiMenu/types.d.ts +86 -0
- package/esm/@ui/UiMenu/types.d.ts.map +1 -0
- package/esm/@ui/UiMenu/types.js +3 -0
- package/esm/@ui/UiMenu/types.js.map +1 -0
- package/esm/Dialog/ConfirmDialogBase.d.ts.map +1 -1
- package/esm/Dialog/ConfirmDialogBase.js +1 -1
- package/esm/Dialog/ConfirmDialogBase.js.map +1 -1
- package/esm/Dialog/DialogBase.d.ts.map +1 -1
- package/esm/Dialog/DialogBase.js +2 -2
- package/esm/Dialog/DialogBase.js.map +1 -1
- package/esm/Dialog/DialogCloseButton.d.ts +1 -1
- package/esm/Dialog/DialogCloseButton.d.ts.map +1 -1
- package/esm/Dialog/DialogCloseButton.js +11 -2
- package/esm/Dialog/DialogCloseButton.js.map +1 -1
- package/esm/Dialog/ExportDialogBase.d.ts.map +1 -1
- package/esm/Dialog/ExportDialogBase.js +8 -3
- package/esm/Dialog/ExportDialogBase.js.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/AddGranteeBase.d.ts.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/AddGranteeBase.js +1 -5
- package/esm/Dialog/ShareDialog/ShareDialogBase/AddGranteeBase.js.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/GranteeItem.js +2 -2
- package/esm/Dialog/ShareDialog/ShareDialogBase/GranteeItem.js.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/ShareGranteeBase.d.ts.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/ShareGranteeBase.js +1 -5
- package/esm/Dialog/ShareDialog/ShareDialogBase/ShareGranteeBase.js.map +1 -1
- package/esm/Dialog/typings.d.ts +1 -0
- package/esm/Dialog/typings.d.ts.map +1 -1
- package/esm/Form/Checkbox.d.ts +1 -0
- package/esm/Form/Checkbox.d.ts.map +1 -1
- package/esm/Form/Checkbox.js +3 -3
- package/esm/Form/Checkbox.js.map +1 -1
- package/esm/Header/Header.d.ts.map +1 -1
- package/esm/Header/Header.js +1 -1
- package/esm/Header/Header.js.map +1 -1
- package/esm/Header/HeaderAccount.d.ts.map +1 -1
- package/esm/Header/HeaderAccount.js +2 -3
- package/esm/Header/HeaderAccount.js.map +1 -1
- package/esm/Header/HeaderChatButton.d.ts +2 -0
- package/esm/Header/HeaderChatButton.d.ts.map +1 -1
- package/esm/Header/HeaderChatButton.js +3 -3
- package/esm/Header/HeaderChatButton.js.map +1 -1
- package/esm/Header/HeaderHelp.d.ts.map +1 -1
- package/esm/Header/HeaderHelp.js +2 -3
- package/esm/Header/HeaderHelp.js.map +1 -1
- package/esm/Header/HeaderSearchButton.d.ts.map +1 -1
- package/esm/Header/HeaderSearchButton.js +2 -3
- package/esm/Header/HeaderSearchButton.js.map +1 -1
- package/esm/List/ListItem.d.ts +8 -21
- package/esm/List/ListItem.d.ts.map +1 -1
- package/esm/List/ListItem.js +69 -70
- package/esm/List/ListItem.js.map +1 -1
- package/esm/List/MenuList.d.ts +3 -0
- package/esm/List/MenuList.d.ts.map +1 -1
- package/esm/List/MenuList.js +3 -3
- package/esm/List/MenuList.js.map +1 -1
- package/esm/List/index.d.ts +1 -1
- package/esm/List/index.d.ts.map +1 -1
- package/esm/List/index.js.map +1 -1
- package/esm/RecurrenceForm/DateTime.js +2 -2
- package/esm/RecurrenceForm/DateTime.js.map +1 -1
- package/esm/RecurrenceForm/Recurrence.js +3 -3
- package/esm/RecurrenceForm/Recurrence.js.map +1 -1
- package/esm/index.d.ts +8 -1
- package/esm/index.d.ts.map +1 -1
- package/esm/index.js +5 -0
- package/esm/index.js.map +1 -1
- package/esm/sdk-ui-kit.d.ts +201 -38
- package/esm/typings/accessibility.d.ts +17 -0
- package/esm/typings/accessibility.d.ts.map +1 -1
- package/esm/typings/accessibility.js +1 -1
- package/esm/typings/accessibility.js.map +1 -1
- package/esm/utils/domUtilities.d.ts +11 -0
- package/esm/utils/domUtilities.d.ts.map +1 -1
- package/esm/utils/domUtilities.js +29 -0
- package/esm/utils/domUtilities.js.map +1 -1
- package/esm/utils/useId.d.ts +6 -0
- package/esm/utils/useId.d.ts.map +1 -1
- package/esm/utils/useId.js +9 -0
- package/esm/utils/useId.js.map +1 -1
- package/package.json +10 -9
- package/src/@ui/UiMenu/UiMenu.scss +115 -0
- package/src/@ui/index.scss +1 -0
- package/styles/css/dialog.css +3 -2
- package/styles/css/dialog.css.map +1 -1
- package/styles/css/list.css +7 -0
- package/styles/css/list.css.map +1 -1
- package/styles/css/main.css +105 -2
- package/styles/css/main.css.map +1 -1
- package/styles/css/menu.css +7 -0
- package/styles/css/menu.css.map +1 -1
- package/styles/scss/dialog.scss +3 -2
- package/styles/scss/list.scss +7 -0
@@ -1,18 +1,29 @@
|
|
1
|
-
|
1
|
+
/// <reference types="react" />
|
2
2
|
/**
|
3
3
|
* @internal
|
4
4
|
*/
|
5
|
-
export declare const makeMenuKeyboardNavigation: ({ onFocusPrevious, onFocusNext, onFocusFirst, onFocusLast, onEnterLevel, onLeaveLevel, onSelect, onClose, onUnhandledKeyDown, shouldPreventDefault, shouldStopPropagation, }: {
|
6
|
-
onFocusNext?: (event:
|
7
|
-
onFocusPrevious?: (event:
|
8
|
-
onFocusFirst?: (event:
|
9
|
-
onFocusLast?: (event:
|
10
|
-
onEnterLevel?: (event:
|
11
|
-
onLeaveLevel?: (event:
|
12
|
-
onSelect?: (event:
|
13
|
-
onClose?: (event:
|
14
|
-
onUnhandledKeyDown?: (event:
|
5
|
+
export declare const makeMenuKeyboardNavigation: <T extends KeyboardEvent | import("react").KeyboardEvent<Element> = import("react").KeyboardEvent<Element>>({ onFocusPrevious, onFocusNext, onFocusFirst, onFocusLast, onEnterLevel, onLeaveLevel, onSelect, onClose, onUnhandledKeyDown, shouldPreventDefault, shouldStopPropagation, }: {
|
6
|
+
onFocusNext?: (event: T) => void;
|
7
|
+
onFocusPrevious?: (event: T) => void;
|
8
|
+
onFocusFirst?: (event: T) => void;
|
9
|
+
onFocusLast?: (event: T) => void;
|
10
|
+
onEnterLevel?: (event: T) => void;
|
11
|
+
onLeaveLevel?: (event: T) => void;
|
12
|
+
onSelect?: (event: T) => void;
|
13
|
+
onClose?: (event: T) => void;
|
14
|
+
onUnhandledKeyDown?: (event: T) => void;
|
15
15
|
shouldPreventDefault?: boolean;
|
16
16
|
shouldStopPropagation?: boolean;
|
17
|
-
}) => (event:
|
17
|
+
}) => (event: T) => void;
|
18
|
+
/**
|
19
|
+
* @internal
|
20
|
+
*/
|
21
|
+
export declare const makeDialogKeyboardNavigation: <T extends KeyboardEvent | import("react").KeyboardEvent<Element> = import("react").KeyboardEvent<Element>>({ onFocusPrevious, onFocusNext, onClose, onUnhandledKeyDown, shouldPreventDefault, shouldStopPropagation, }: {
|
22
|
+
onFocusNext?: (event: T) => void;
|
23
|
+
onFocusPrevious?: (event: T) => void;
|
24
|
+
onClose?: (event: T) => void;
|
25
|
+
onUnhandledKeyDown?: (event: T) => void;
|
26
|
+
shouldPreventDefault?: boolean;
|
27
|
+
shouldStopPropagation?: boolean;
|
28
|
+
}) => (event: T) => void;
|
18
29
|
//# sourceMappingURL=keyboardNavigation.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"keyboardNavigation.d.ts","sourceRoot":"","sources":["../../../src/@ui/@utils/keyboardNavigation.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"keyboardNavigation.d.ts","sourceRoot":"","sources":["../../../src/@ui/@utils/keyboardNavigation.ts"],"names":[],"mappings":";AAoCA;;GAEG;AACH,eAAO,MAAM,0BAA0B;gCAgBP,IAAI;oCACA,IAAI;iCACP,IAAI;gCACL,IAAI;iCACH,IAAI;iCACJ,IAAI;6BACR,IAAI;4BACL,IAAI;uCACO,IAAI;2BAEhB,OAAO;4BACN,OAAO;wBAmClC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,4BAA4B;gCAWT,IAAI;oCACA,IAAI;4BACZ,IAAI;uCACO,IAAI;2BAEhB,OAAO;4BACN,OAAO;wBA4BlC,CAAC"}
|
@@ -1,42 +1,84 @@
|
|
1
1
|
// (C) 2025 GoodData Corporation
|
2
|
+
const handleAction = (event, action, { shouldPreventDefault = true, shouldStopPropagation = true } = {}) => {
|
3
|
+
if (!action) {
|
4
|
+
return;
|
5
|
+
}
|
6
|
+
if (shouldPreventDefault) {
|
7
|
+
event.preventDefault();
|
8
|
+
}
|
9
|
+
if (shouldStopPropagation) {
|
10
|
+
event.stopPropagation();
|
11
|
+
}
|
12
|
+
action(event);
|
13
|
+
};
|
14
|
+
const handleActionEvent = (event, shouldPreventDefault, shouldStopPropagation) => {
|
15
|
+
return (action) => {
|
16
|
+
handleAction(event, action, { shouldPreventDefault, shouldStopPropagation });
|
17
|
+
};
|
18
|
+
};
|
2
19
|
/**
|
3
20
|
* @internal
|
4
21
|
*/
|
5
22
|
export const makeMenuKeyboardNavigation = ({ onFocusPrevious, onFocusNext, onFocusFirst, onFocusLast, onEnterLevel, onLeaveLevel, onSelect, onClose, onUnhandledKeyDown, shouldPreventDefault = true, shouldStopPropagation = true, }) => {
|
6
|
-
function handleAction(event, action) {
|
7
|
-
if (!action) {
|
8
|
-
return;
|
9
|
-
}
|
10
|
-
shouldPreventDefault && event.preventDefault();
|
11
|
-
shouldStopPropagation && event.stopPropagation();
|
12
|
-
action(event);
|
13
|
-
}
|
14
23
|
return (event) => {
|
24
|
+
const handleAction = handleActionEvent(event, shouldPreventDefault, shouldStopPropagation);
|
15
25
|
switch (event.code) {
|
16
26
|
case "ArrowDown":
|
17
|
-
handleAction(
|
27
|
+
handleAction(onFocusNext);
|
18
28
|
break;
|
19
29
|
case "ArrowUp":
|
20
|
-
handleAction(
|
30
|
+
handleAction(onFocusPrevious);
|
21
31
|
break;
|
22
32
|
case "ArrowLeft":
|
23
|
-
handleAction(
|
33
|
+
handleAction(onLeaveLevel);
|
24
34
|
break;
|
25
35
|
case "ArrowRight":
|
26
|
-
handleAction(
|
36
|
+
handleAction(onEnterLevel);
|
27
37
|
break;
|
28
38
|
case "Home":
|
29
|
-
handleAction(
|
39
|
+
handleAction(onFocusFirst);
|
30
40
|
break;
|
31
41
|
case "End":
|
32
|
-
handleAction(
|
42
|
+
handleAction(onFocusLast);
|
33
43
|
break;
|
34
44
|
case "Enter":
|
35
45
|
case "Space":
|
36
|
-
handleAction(
|
46
|
+
handleAction(onSelect);
|
47
|
+
break;
|
48
|
+
case "Escape":
|
49
|
+
handleAction(onClose);
|
50
|
+
break;
|
51
|
+
default:
|
52
|
+
onUnhandledKeyDown?.(event);
|
53
|
+
break;
|
54
|
+
}
|
55
|
+
};
|
56
|
+
};
|
57
|
+
/**
|
58
|
+
* @internal
|
59
|
+
*/
|
60
|
+
export const makeDialogKeyboardNavigation = ({ onFocusPrevious, onFocusNext, onClose, onUnhandledKeyDown, shouldPreventDefault = true, shouldStopPropagation = true, }) => {
|
61
|
+
return (event) => {
|
62
|
+
switch (event.code) {
|
63
|
+
case "Tab":
|
64
|
+
if (event.shiftKey) {
|
65
|
+
handleAction(event, onFocusPrevious, {
|
66
|
+
shouldPreventDefault,
|
67
|
+
shouldStopPropagation,
|
68
|
+
});
|
69
|
+
}
|
70
|
+
else {
|
71
|
+
handleAction(event, onFocusNext, {
|
72
|
+
shouldPreventDefault,
|
73
|
+
shouldStopPropagation,
|
74
|
+
});
|
75
|
+
}
|
37
76
|
break;
|
38
77
|
case "Escape":
|
39
|
-
handleAction(event, onClose
|
78
|
+
handleAction(event, onClose, {
|
79
|
+
shouldPreventDefault,
|
80
|
+
shouldStopPropagation,
|
81
|
+
});
|
40
82
|
break;
|
41
83
|
default:
|
42
84
|
onUnhandledKeyDown?.(event);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"keyboardNavigation.js","sourceRoot":"","sources":["../../../src/@ui/@utils/keyboardNavigation.ts"],"names":[],"mappings":"AAAA,gCAAgC;
|
1
|
+
{"version":3,"file":"keyboardNavigation.js","sourceRoot":"","sources":["../../../src/@ui/@utils/keyboardNavigation.ts"],"names":[],"mappings":"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"}
|
@@ -12,11 +12,20 @@ export interface UiFocusTrapProps {
|
|
12
12
|
* If a ref is provided, the focus will be returned to the element referenced by the ref.
|
13
13
|
*/
|
14
14
|
returnFocusTo?: React.RefObject<HTMLElement> | string;
|
15
|
+
/**
|
16
|
+
* If true, the focus will be returned to the element referenced by the returnFocusTo prop when the trap is unmounted.
|
17
|
+
*/
|
18
|
+
returnFocusOnUnmount?: boolean;
|
15
19
|
/**
|
16
20
|
* Specify the element that should receive focus when the trap is activated.
|
17
21
|
* If not provided, the first focusable element will be focused.
|
18
22
|
*/
|
19
23
|
initialFocus?: React.RefObject<HTMLElement> | string;
|
24
|
+
/**
|
25
|
+
* Specify a custom keyboard navigation handler.
|
26
|
+
* If not provided, the default keyboard navigation handler will be used.
|
27
|
+
*/
|
28
|
+
customKeyboardNavigationHandler?: (event: KeyboardEvent) => void;
|
20
29
|
}
|
21
30
|
/**
|
22
31
|
* @internal
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"UiFocusTrap.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiFocusTrap/UiFocusTrap.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
1
|
+
{"version":3,"file":"UiFocusTrap.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiFocusTrap/UiFocusTrap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAM9D;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;IAEtD;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;IACrD;;;OAGG;IACH,+BAA+B,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CACpE;AA8FD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAyFlD,CAAC"}
|
@@ -1,33 +1,12 @@
|
|
1
1
|
// (C) 2025 GoodData Corporation
|
2
|
-
import React, { useEffect, useRef } from "react";
|
3
|
-
|
4
|
-
|
5
|
-
'button:not(:disabled):not([aria-disabled="true"])',
|
6
|
-
'input:not(:disabled):not([aria-disabled="true"])',
|
7
|
-
'select:not(:disabled):not([aria-disabled="true"])',
|
8
|
-
'textarea:not(:disabled):not([aria-disabled="true"])',
|
9
|
-
// Links and areas
|
10
|
-
"a[href]",
|
11
|
-
"area[href]",
|
12
|
-
// Custom elements with tabindex
|
13
|
-
'[tabindex]:not([tabindex="-1"]):not(:disabled):not([aria-disabled="true"])',
|
14
|
-
// Media with controls
|
15
|
-
"audio[controls]",
|
16
|
-
"video[controls]",
|
17
|
-
// Editable content
|
18
|
-
'[contenteditable]:not([contenteditable="false"])',
|
19
|
-
].join(",");
|
20
|
-
const getFocusableElements = (element) => {
|
21
|
-
const focusableElements = element?.querySelectorAll(focusableElementsSelector);
|
22
|
-
const firstElement = focusableElements?.[0];
|
23
|
-
const lastElement = focusableElements?.[focusableElements.length - 1];
|
24
|
-
return { focusableElements, firstElement, lastElement };
|
25
|
-
};
|
2
|
+
import React, { useEffect, useRef, useCallback } from "react";
|
3
|
+
import { makeDialogKeyboardNavigation } from "../@utils/keyboardNavigation.js";
|
4
|
+
import { getFocusableElements } from "../../utils/domUtilities.js";
|
26
5
|
/**
|
27
6
|
* Attempts to find a truly focusable element by trying subsequent elements in the focusable elements collection
|
28
7
|
* This is useful when some elements are focusable but not reachable (e.g., out of viewport or disabled)
|
29
8
|
*/
|
30
|
-
const focusAndEnsureReachableElement = (initialElement, focusableElements,
|
9
|
+
const focusAndEnsureReachableElement = (initialElement, focusableElements, direction) => {
|
31
10
|
let nextElement = initialElement;
|
32
11
|
let attempts = 0;
|
33
12
|
const maxAttempts = focusableElements.length;
|
@@ -35,66 +14,96 @@ const focusAndEnsureReachableElement = (initialElement, focusableElements, shift
|
|
35
14
|
while (nextElement !== document.activeElement && attempts < maxAttempts) {
|
36
15
|
attempts++;
|
37
16
|
const currentIndex = Array.from(focusableElements).indexOf(nextElement);
|
38
|
-
const nextIndex =
|
17
|
+
const nextIndex = direction === "backward"
|
39
18
|
? (currentIndex - 1 + focusableElements.length) % focusableElements.length
|
40
19
|
: (currentIndex + 1) % focusableElements.length;
|
41
20
|
nextElement = focusableElements[nextIndex];
|
42
21
|
nextElement?.focus();
|
43
22
|
}
|
44
23
|
};
|
24
|
+
const useDialogKeyboardNavigation = (trapRef, returnFocus, onDeactivate) => {
|
25
|
+
const handleFocusNavigation = useCallback((focusableElements, direction) => {
|
26
|
+
const elements = Array.from(focusableElements);
|
27
|
+
const currentIndex = elements.indexOf(document.activeElement);
|
28
|
+
const firstElement = elements[0];
|
29
|
+
const lastElement = elements[elements.length - 1];
|
30
|
+
let nextElement;
|
31
|
+
if (direction === "backward") {
|
32
|
+
// Shift + Tab - moving backwards
|
33
|
+
nextElement = currentIndex <= 0 ? lastElement : elements[currentIndex - 1];
|
34
|
+
}
|
35
|
+
else {
|
36
|
+
// Tab - moving forwards
|
37
|
+
nextElement =
|
38
|
+
currentIndex === elements.length - 1 ? firstElement : elements[currentIndex + 1];
|
39
|
+
}
|
40
|
+
if (nextElement) {
|
41
|
+
focusAndEnsureReachableElement(nextElement, focusableElements, direction);
|
42
|
+
}
|
43
|
+
}, []);
|
44
|
+
const keyboardNavigationHandler = useCallback((event) => {
|
45
|
+
if (!trapRef.current?.contains(event.target)) {
|
46
|
+
return;
|
47
|
+
}
|
48
|
+
return makeDialogKeyboardNavigation({
|
49
|
+
onFocusNext: () => {
|
50
|
+
const { focusableElements } = getFocusableElements(trapRef.current);
|
51
|
+
if (!focusableElements?.length) {
|
52
|
+
return;
|
53
|
+
}
|
54
|
+
handleFocusNavigation(focusableElements, "forward");
|
55
|
+
},
|
56
|
+
onFocusPrevious: () => {
|
57
|
+
const { focusableElements } = getFocusableElements(trapRef.current);
|
58
|
+
if (!focusableElements?.length) {
|
59
|
+
return;
|
60
|
+
}
|
61
|
+
handleFocusNavigation(focusableElements, "backward");
|
62
|
+
},
|
63
|
+
onClose: () => {
|
64
|
+
onDeactivate?.();
|
65
|
+
returnFocus();
|
66
|
+
},
|
67
|
+
})(event);
|
68
|
+
}, [handleFocusNavigation, onDeactivate, returnFocus, trapRef]);
|
69
|
+
return {
|
70
|
+
keyboardNavigationHandler,
|
71
|
+
};
|
72
|
+
};
|
45
73
|
/**
|
46
74
|
* @internal
|
47
75
|
*/
|
48
|
-
export const UiFocusTrap = ({ children, onDeactivate, returnFocusTo, autofocusOnOpen = false, initialFocus, }) => {
|
76
|
+
export const UiFocusTrap = ({ children, onDeactivate, returnFocusTo: returnFocusToProp, autofocusOnOpen = false, returnFocusOnUnmount = true, initialFocus, customKeyboardNavigationHandler, }) => {
|
49
77
|
const trapRef = useRef(null);
|
50
|
-
const defaultReturnFocusToRef = useRef(
|
51
|
-
const
|
78
|
+
const defaultReturnFocusToRef = useRef(document.activeElement);
|
79
|
+
const returnFocusTo = returnFocusToProp ?? defaultReturnFocusToRef;
|
80
|
+
const returnFocus = useCallback(() => {
|
81
|
+
if (
|
82
|
+
// different browsers have different default focusable element
|
83
|
+
document.activeElement !== document.body &&
|
84
|
+
document.activeElement !== document.documentElement &&
|
85
|
+
!trapRef.current?.contains(document.activeElement)) {
|
86
|
+
// if Trap was closed by clicking outside, do not return focus
|
87
|
+
return;
|
88
|
+
}
|
52
89
|
if (typeof returnFocusTo === "string") {
|
53
90
|
const element = document.getElementById(returnFocusTo);
|
54
|
-
|
55
|
-
element.focus();
|
56
|
-
}
|
91
|
+
element?.focus();
|
57
92
|
}
|
58
93
|
else if (returnFocusTo?.current) {
|
59
94
|
returnFocusTo.current.focus();
|
60
95
|
}
|
61
|
-
else if (defaultReturnFocusToRef.current) {
|
62
|
-
defaultReturnFocusToRef.current.focus();
|
63
|
-
}
|
64
96
|
}, [returnFocusTo]);
|
97
|
+
const { keyboardNavigationHandler } = useDialogKeyboardNavigation(trapRef, returnFocus, onDeactivate);
|
98
|
+
const keyboardHandler = customKeyboardNavigationHandler ?? keyboardNavigationHandler;
|
65
99
|
useEffect(() => {
|
66
|
-
|
67
|
-
|
68
|
-
const currentIndex = elements.indexOf(document.activeElement);
|
69
|
-
if (shiftKey) {
|
70
|
-
// Shift + Tab - moving backwards
|
71
|
-
return currentIndex <= 0 ? lastElement : elements[currentIndex - 1];
|
72
|
-
}
|
73
|
-
else {
|
74
|
-
// Tab - moving forwards
|
75
|
-
return currentIndex === elements.length - 1 ? firstElement : elements[currentIndex + 1];
|
76
|
-
}
|
77
|
-
};
|
78
|
-
const handleKeyDown = (event) => {
|
79
|
-
// get fresh focusable elements set as they could change in meantime
|
80
|
-
const { firstElement, lastElement, focusableElements } = getFocusableElements(trapRef.current);
|
81
|
-
if (event.key === "Tab" && trapRef.current?.contains(event.target)) {
|
82
|
-
const nextElement = getNextElement(focusableElements, firstElement, lastElement, event.shiftKey);
|
83
|
-
if (nextElement) {
|
84
|
-
event.preventDefault();
|
85
|
-
event.stopPropagation();
|
86
|
-
focusAndEnsureReachableElement(nextElement, focusableElements, event.shiftKey);
|
87
|
-
}
|
88
|
-
}
|
89
|
-
else if (event.key === "Escape") {
|
90
|
-
if (onDeactivate) {
|
91
|
-
onDeactivate();
|
92
|
-
}
|
100
|
+
return () => {
|
101
|
+
if (returnFocusOnUnmount) {
|
93
102
|
returnFocus();
|
94
103
|
}
|
95
104
|
};
|
96
|
-
|
97
|
-
|
105
|
+
}, [returnFocusOnUnmount, returnFocus]);
|
106
|
+
useEffect(() => {
|
98
107
|
const focusTrapTimeout = setTimeout(() => {
|
99
108
|
if (!autofocusOnOpen) {
|
100
109
|
return;
|
@@ -106,10 +115,8 @@ export const UiFocusTrap = ({ children, onDeactivate, returnFocusTo, autofocusOn
|
|
106
115
|
if (initialFocus) {
|
107
116
|
if (typeof initialFocus === "string") {
|
108
117
|
const element = document.getElementById(initialFocus);
|
109
|
-
|
110
|
-
|
111
|
-
return;
|
112
|
-
}
|
118
|
+
element?.focus();
|
119
|
+
return;
|
113
120
|
}
|
114
121
|
else if (initialFocus.current) {
|
115
122
|
initialFocus.current.focus();
|
@@ -121,11 +128,15 @@ export const UiFocusTrap = ({ children, onDeactivate, returnFocusTo, autofocusOn
|
|
121
128
|
firstElement?.focus();
|
122
129
|
}, 100);
|
123
130
|
return () => {
|
124
|
-
document.removeEventListener("keydown", handleKeyDown);
|
125
131
|
clearTimeout(focusTrapTimeout);
|
126
|
-
returnFocus();
|
127
132
|
};
|
128
|
-
}, [
|
133
|
+
}, [autofocusOnOpen, initialFocus, returnFocus, keyboardHandler, returnFocusOnUnmount]);
|
134
|
+
useEffect(() => {
|
135
|
+
document.addEventListener("keydown", keyboardHandler);
|
136
|
+
return () => {
|
137
|
+
document.removeEventListener("keydown", keyboardHandler);
|
138
|
+
};
|
139
|
+
}, [keyboardHandler]);
|
129
140
|
return (React.createElement("div", { className: "gd-focus-trap", ref: trapRef }, children));
|
130
141
|
};
|
131
142
|
//# sourceMappingURL=UiFocusTrap.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"UiFocusTrap.js","sourceRoot":"","sources":["../../../src/@ui/UiFocusTrap/UiFocusTrap.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,
|
1
|
+
{"version":3,"file":"UiFocusTrap.js","sourceRoot":"","sources":["../../../src/@ui/UiFocusTrap/UiFocusTrap.tsx"],"names":[],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"UiListbox.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiListbox/UiListbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
1
|
+
{"version":3,"file":"UiListbox.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiListbox/UiListbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAgE,cAAc,EAAE,MAAM,YAAY,CAAC;AAG1G;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,mBAAmB,EAAE,cAAc,EAAE,EAC3D,KAAK,EAEL,SAAS,EACT,aAAa,EACb,QAAQ,EAER,QAAQ,EACR,OAAO,EACP,kBAAyC,EAEzC,cAAc,EAEd,wBAAmE,EACnE,mBAAyD,EAEzD,kCAAkC,EAClC,mCAAmC,EACnC,mBAA0B,EAC1B,mBAA2B,EAE3B,cAAc,GACjB,EAAE,cAAc,CAAC,mBAAmB,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,SAAS,CA4KvE"}
|
@@ -1,7 +1,6 @@
|
|
1
1
|
// (C) 2025 GoodData Corporation
|
2
2
|
import React from "react";
|
3
3
|
import cx from "classnames";
|
4
|
-
import { useId } from "../../utils/useId.js";
|
5
4
|
import { b, e } from "./listboxBem.js";
|
6
5
|
import { makeMenuKeyboardNavigation } from "../@utils/keyboardNavigation.js";
|
7
6
|
import { useAutoupdateRef } from "@gooddata/sdk-ui";
|
@@ -121,9 +120,8 @@ export function UiListbox({ items, className, itemClassName, maxWidth, onSelect,
|
|
121
120
|
shouldKeyboardActionPreventDefault,
|
122
121
|
shouldKeyboardActionStopPropagation,
|
123
122
|
]);
|
124
|
-
const listboxId = useId();
|
125
123
|
return (React.createElement("div", { className: cx(b(), className), style: { maxWidth } },
|
126
|
-
React.createElement("ul", { className: e("items"), tabIndex: 0, onKeyDown: handleKeyDown, "aria-activedescendant": makeItemId(
|
124
|
+
React.createElement("ul", { className: e("items"), tabIndex: 0, onKeyDown: handleKeyDown, "aria-activedescendant": makeItemId(ariaAttributes.id, focusedItem), ...ariaAttributes, role: "listbox" }, items.map((item, index) => item.type === "interactive" ? (React.createElement("li", { key: item.id, ref: (el) => (itemRefs.current[index] = el), role: "option", "aria-selected": item.id === selectedItemId, "aria-disabled": item.isDisabled, tabIndex: -1, id: makeItemId(ariaAttributes.id, item), className: itemClassName },
|
127
125
|
React.createElement(InteractiveItemComponent, { onSelect: () => {
|
128
126
|
handleSelectItem(item);
|
129
127
|
}, item: item, isFocused: index === focusedIndex, isSelected: item.id === selectedItemId }))) : (React.createElement("li", { key: item.id ?? index, ref: (el) => (itemRefs.current[index] = el), className: itemClassName },
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"UiListbox.js","sourceRoot":"","sources":["../../../src/@ui/UiListbox/UiListbox.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,
|
1
|
+
{"version":3,"file":"UiListbox.js","sourceRoot":"","sources":["../../../src/@ui/UiListbox/UiListbox.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,wCAAwC,EAAE,MAAM,wDAAwD,CAAC;AAClH,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAE1E,OAAO,EAAE,mCAAmC,EAAE,MAAM,mDAAmD,CAAC;AAExG;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CAAsC,EAC3D,KAAK,EAEL,SAAS,EACT,aAAa,EACb,QAAQ,EAER,QAAQ,EACR,OAAO,EACP,kBAAkB,GAAG,oBAAoB,EAEzC,cAAc,EAEd,wBAAwB,GAAG,wCAAwC,EACnE,mBAAmB,GAAG,mCAAmC,EAEzD,kCAAkC,EAClC,mCAAmC,EACnC,mBAAmB,GAAG,IAAI,EAC1B,mBAAmB,GAAG,KAAK,EAE3B,cAAc,GACoC;IAClD,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CACrC,CAAC,IAA0D,EAAE,EAAE;QAC3D,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE,CAAC;YACvC,OAAO,KAAK,CAAC;QACjB,CAAC;QAED,OAAO,mBAAmB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;IACnD,CAAC,EACD,CAAC,mBAAmB,CAAC,CACxB,CAAC;IAEF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqB,GAAG,EAAE;QAC5E,wDAAwD;QACxD,MAAM,aAAa,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,cAAc,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC;QACrG,IAAI,aAAa,IAAI,CAAC,EAAE,CAAC;YACrB,OAAO,aAAa,CAAC;QACzB,CAAC;QAED,0CAA0C;QAC1C,MAAM,mBAAmB,GAAG,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;QAC7D,OAAO,mBAAmB,IAAI,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAA2B,EAAE,CAAC,CAAC;IAE5D,uFAAuF;IACvF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/D,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,WAAW,GAAG,YAAY,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC3E,MAAM,eAAe,GAAG,YAAY,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAE1F,gCAAgC;IAChC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,CAAC,eAAe,EAAE,CAAC;YACnB,OAAO;QACX,CAAC;QAED,eAAe,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IACzD,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,IAAqD,EAAE,EAAE;QACtD,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAC3B,OAAO;QACX,CAAC;QACD,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;QACjB,mBAAmB,IAAI,OAAO,EAAE,EAAE,CAAC;IACvC,CAAC,EACD,CAAC,OAAO,EAAE,QAAQ,EAAE,mBAAmB,CAAC,CAC3C,CAAC;IAEF,MAAM,UAAU,GAAG,gBAAgB,CAAyD;QACxF,QAAQ;QACR,YAAY;QACZ,KAAK;QACL,OAAO;QACP,QAAQ,EAAE,gBAAgB;QAC1B,eAAe;QACf,cAAc;QACd,eAAe;KAClB,CAAC,CAAC;IACH,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAC/B,GAAG,EAAE,CACD,0BAA0B,CAAC;QACvB,oBAAoB,EAAE,kCAAkC;QACxD,qBAAqB,EAAE,mCAAmC;QAE1D,eAAe,EAAE,GAAG,EAAE;YAClB,eAAe,CAAC,CAAC,SAAS,EAAE,EAAE;gBAC1B,IAAI,QAAQ,GAAG,CAAC,SAAS,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;gBACpC,2BAA2B;gBAC3B,OAAO,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC;oBACxD,QAAQ,EAAE,CAAC;gBACf,CAAC;gBACD,OAAO,QAAQ,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;YAChD,CAAC,CAAC,CAAC;QACP,CAAC;QACD,WAAW,EAAE,GAAG,EAAE;YACd,eAAe,CAAC,CAAC,SAAS,EAAE,EAAE;gBAC1B,IAAI,QAAQ,GAAG,CAAC,SAAS,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;gBACpC,2BAA2B;gBAC3B,OAAO,QAAQ,GAAG,KAAK,CAAC,MAAM,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC;oBAClE,QAAQ,EAAE,CAAC;gBACf,CAAC;gBACD,OAAO,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;YAC1D,CAAC,CAAC,CAAC;QACP,CAAC;QACD,YAAY,EAAE,GAAG,EAAE;YACf,gCAAgC;YAChC,MAAM,mBAAmB,GAAG,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;YAC7D,eAAe,CAAC,mBAAmB,IAAI,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAChF,CAAC;QACD,WAAW,EAAE,GAAG,EAAE;YACd,+BAA+B;YAC/B,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;gBACzC,IAAI,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;oBAC5B,eAAe,CAAC,CAAC,CAAC,CAAC;oBACnB,OAAO;gBACX,CAAC;YACL,CAAC;YACD,eAAe,CAAC,SAAS,CAAC,CAAC;QAC/B,CAAC;QACD,QAAQ,EAAE,GAAG,EAAE;YACX,WAAW,IAAI,WAAW,CAAC,IAAI,KAAK,aAAa,IAAI,gBAAgB,CAAC,WAAW,CAAC,CAAC;QACvF,CAAC;QACD,OAAO,EAAE,GAAG,EAAE;YACV,OAAO,EAAE,EAAE,CAAC;QAChB,CAAC;QACD,kBAAkB,EAAE,CAAC,KAAK,EAAE,EAAE;YAC1B,kBAAkB,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;QAClD,CAAC;KACJ,CAAC,EACN;QACI,UAAU;QACV,WAAW;QACX,gBAAgB;QAChB,eAAe;QACf,KAAK;QACL,OAAO;QACP,kBAAkB;QAClB,kCAAkC;QAClC,mCAAmC;KACtC,CACJ,CAAC;IAEF,OAAO,CACH,6BAAK,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE;QACnD,4BACI,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,aAAa,2BACD,UAAU,CAAC,cAAc,CAAC,EAAE,EAAE,WAAW,CAAC,KAC7D,cAAc,EAClB,IAAI,EAAC,SAAS,IAEb,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACvB,IAAI,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC,CAAC,CAC1B,4BACI,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,EAC3C,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,EAAE,KAAK,cAAc,mBAC1B,IAAI,CAAC,UAAU,EAC9B,QAAQ,EAAE,CAAC,CAAC,EACZ,EAAE,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,EAAE,IAAI,CAAC,EACvC,SAAS,EAAE,aAAa;YAExB,oBAAC,wBAAwB,IACrB,QAAQ,EAAE,GAAG,EAAE;oBACX,gBAAgB,CAAC,IAAI,CAAC,CAAC;gBAC3B,CAAC,EACD,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,KAAK,KAAK,YAAY,EACjC,UAAU,EAAE,IAAI,CAAC,EAAE,KAAK,cAAc,GACxC,CACD,CACR,CAAC,CAAC,CAAC,CACA,4BACI,GAAG,EAAE,IAAI,CAAC,EAAE,IAAI,KAAK,EACrB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,EAC3C,SAAS,EAAE,aAAa;YAExB,oBAAC,mBAAmB,IAAC,IAAI,EAAE,IAAI,GAAI,CAClC,CACR,CACJ,CACA,CACH,CACT,CAAC;AACN,CAAC;AAED,MAAM,UAAU,GAAG,CAAC,SAAiB,EAAE,IAAuC,EAAE,EAAE,CAC9E,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC,CAAC,QAAQ,SAAS,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC"}
|
@@ -1,9 +1,12 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import {
|
2
|
+
import { UiListboxStaticItemProps } from "../types.js";
|
3
3
|
/**
|
4
4
|
* @internal
|
5
5
|
*/
|
6
|
-
export declare const separatorStaticItem:
|
6
|
+
export declare const separatorStaticItem: {
|
7
|
+
data: React.JSX.Element;
|
8
|
+
type: "static";
|
9
|
+
};
|
7
10
|
/**
|
8
11
|
* By default just renders the data.
|
9
12
|
* @internal
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"DefaultUiListboxStaticItemComponent.d.ts","sourceRoot":"","sources":["../../../../src/@ui/UiListbox/defaults/DefaultUiListboxStaticItemComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,
|
1
|
+
{"version":3,"file":"DefaultUiListboxStaticItemComponent.d.ts","sourceRoot":"","sources":["../../../../src/@ui/UiListbox/defaults/DefaultUiListboxStaticItemComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;CAG/B,CAAC;AAEF;;;GAGG;AACH,wBAAgB,mCAAmC,CAAC,CAAC,EAAE,EACnD,IAAI,GACP,EAAE,wBAAwB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAE/C"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"DefaultUiListboxStaticItemComponent.js","sourceRoot":"","sources":["../../../../src/@ui/UiListbox/defaults/DefaultUiListboxStaticItemComponent.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGnD;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,
|
1
|
+
{"version":3,"file":"DefaultUiListboxStaticItemComponent.js","sourceRoot":"","sources":["../../../../src/@ui/UiListbox/defaults/DefaultUiListboxStaticItemComponent.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGnD;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IAC/B,IAAI,EAAE,oBAAC,SAAS,OAAG;IACnB,IAAI,EAAE,QAAiB;CAC1B,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,mCAAmC,CAAI,EACnD,IAAI,GACsB;IAC1B,OAAO,IAAI,CAAC,IAAuB,CAAC;AACxC,CAAC"}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import {
|
2
|
+
import { IUiListboxContext } from "../types.js";
|
3
3
|
/**
|
4
4
|
* This is a basic implementation of moving focus to items on character key press.
|
5
5
|
* Having this functionality is recommended by the listbox spec.
|
6
6
|
*/
|
7
|
-
export declare function firstCharacterSearch<InteractiveItemData, StaticItemData>(event: React.KeyboardEvent, { items, focusedIndex, setFocusedIndex, isItemFocusable, }:
|
7
|
+
export declare function firstCharacterSearch<InteractiveItemData, StaticItemData>(event: React.KeyboardEvent, { items, focusedIndex, setFocusedIndex, isItemFocusable, }: IUiListboxContext<InteractiveItemData, StaticItemData>): void;
|
8
8
|
//# sourceMappingURL=firstCharacterSearch.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"firstCharacterSearch.d.ts","sourceRoot":"","sources":["../../../../src/@ui/UiListbox/defaults/firstCharacterSearch.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,
|
1
|
+
{"version":3,"file":"firstCharacterSearch.d.ts","sourceRoot":"","sources":["../../../../src/@ui/UiListbox/defaults/firstCharacterSearch.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,mBAAmB,EAAE,cAAc,EACpE,KAAK,EAAE,KAAK,CAAC,aAAa,EAC1B,EACI,KAAK,EACL,YAAY,EACZ,eAAe,EACf,eAAe,GAClB,EAAE,iBAAiB,CAAC,mBAAmB,EAAE,cAAc,CAAC,QAgC5D"}
|
@@ -8,7 +8,7 @@ export function firstCharacterSearch(event, { items, focusedIndex, setFocusedInd
|
|
8
8
|
if (char.length !== 1) {
|
9
9
|
return;
|
10
10
|
}
|
11
|
-
const itemIndex = items.findIndex((item, index) => index > focusedIndex &&
|
11
|
+
const itemIndex = items.findIndex((item, index) => index > (focusedIndex ?? 0) &&
|
12
12
|
isItemFocusable(item) &&
|
13
13
|
item.type === "interactive" &&
|
14
14
|
item.stringTitle.toLowerCase().startsWith(char));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"firstCharacterSearch.js","sourceRoot":"","sources":["../../../../src/@ui/UiListbox/defaults/firstCharacterSearch.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAMhC;;;GAGG;AACH,MAAM,UAAU,oBAAoB,CAChC,KAA0B,EAC1B,EACI,KAAK,EACL,YAAY,EACZ,eAAe,EACf,eAAe,
|
1
|
+
{"version":3,"file":"firstCharacterSearch.js","sourceRoot":"","sources":["../../../../src/@ui/UiListbox/defaults/firstCharacterSearch.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAMhC;;;GAGG;AACH,MAAM,UAAU,oBAAoB,CAChC,KAA0B,EAC1B,EACI,KAAK,EACL,YAAY,EACZ,eAAe,EACf,eAAe,GACsC;IAEzD,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;IAErC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACpB,OAAO;IACX,CAAC;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAC7B,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACZ,KAAK,GAAG,CAAC,YAAY,IAAI,CAAC,CAAC;QAC3B,eAAe,CAAC,IAAI,CAAC;QACrB,IAAI,CAAC,IAAI,KAAK,aAAa;QAC3B,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CACtD,CAAC;IAEF,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE,CAAC;QACnB,eAAe,CAAC,SAAS,CAAC,CAAC;QAC3B,OAAO;IACX,CAAC;IAED,iEAAiE;IACjE,MAAM,cAAc,GAAG,KAAK,CAAC,SAAS,CAClC,CAAC,IAAI,EAAE,EAAE,CACL,eAAe,CAAC,IAAI,CAAC;QACrB,IAAI,CAAC,IAAI,KAAK,aAAa;QAC3B,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CACtD,CAAC;IAEF,IAAI,cAAc,KAAK,CAAC,CAAC,EAAE,CAAC;QACxB,eAAe,CAAC,cAAc,CAAC,CAAC;IACpC,CAAC;AACL,CAAC"}
|
@@ -40,14 +40,14 @@ export interface UiListboxStaticItemProps<T> {
|
|
40
40
|
/**
|
41
41
|
* @internal
|
42
42
|
*/
|
43
|
-
export interface
|
43
|
+
export interface IUiListboxContext<InteractiveItemData, StaticItemData = React.ReactNode> {
|
44
44
|
items: IUiListboxItem<InteractiveItemData, StaticItemData>[];
|
45
45
|
itemRefs: React.MutableRefObject<(HTMLLIElement | null)[]>;
|
46
46
|
onSelect: (item: IUiListboxInteractiveItem<InteractiveItemData>) => void;
|
47
47
|
onClose?: () => void;
|
48
48
|
selectedItemId: string | undefined;
|
49
49
|
focusedIndex: number | undefined;
|
50
|
-
setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;
|
50
|
+
setFocusedIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
|
51
51
|
isItemFocusable: (item: IUiListboxItem<InteractiveItemData, StaticItemData>) => boolean;
|
52
52
|
}
|
53
53
|
/**
|
@@ -60,7 +60,7 @@ export interface UiListboxProps<InteractiveItemData, StaticItemData = React.Reac
|
|
60
60
|
maxWidth?: number;
|
61
61
|
onSelect?: (item: IUiListboxInteractiveItem<InteractiveItemData>) => void;
|
62
62
|
onClose?: () => void;
|
63
|
-
onUnhandledKeyDown?: (event: React.KeyboardEvent, context:
|
63
|
+
onUnhandledKeyDown?: (event: React.KeyboardEvent, context: IUiListboxContext<InteractiveItemData, StaticItemData>) => void;
|
64
64
|
selectedItemId?: string;
|
65
65
|
InteractiveItemComponent?: React.ComponentType<UiListboxInteractiveItemProps<InteractiveItemData>>;
|
66
66
|
StaticItemComponent?: React.ComponentType<UiListboxStaticItemProps<StaticItemData>>;
|
@@ -68,6 +68,6 @@ export interface UiListboxProps<InteractiveItemData, StaticItemData = React.Reac
|
|
68
68
|
shouldKeyboardActionStopPropagation?: boolean;
|
69
69
|
shouldCloseOnSelect?: boolean;
|
70
70
|
isDisabledFocusable?: boolean;
|
71
|
-
ariaAttributes: IDropdownBodyRenderProps["ariaAttributes"]
|
71
|
+
ariaAttributes: Omit<IDropdownBodyRenderProps["ariaAttributes"], "role">;
|
72
72
|
}
|
73
73
|
//# sourceMappingURL=types.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiListbox/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAEnE;;GAEG;AACH,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACnC,IAAI,EAAE,QAAQ,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,CAAC,CAAC;CACX;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB,CAAC,CAAC;IACxC,IAAI,EAAE,aAAa,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,CAAC,CAAC;CACX;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,CAAC,mBAAmB,EAAE,cAAc,GAAG,KAAK,CAAC,SAAS,IAC1E,oBAAoB,CAAC,cAAc,CAAC,GACpC,yBAAyB,CAAC,mBAAmB,CAAC,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,6BAA6B,CAAC,CAAC;IAC5C,IAAI,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;IAEnC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IAEpB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB,CAAC,CAAC;IACvC,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiListbox/types.ts"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { UiMenuProps } from "./types.js";
|
3
|
+
/**
|
4
|
+
* An accessible menu component that can be navigated by keyboard.
|
5
|
+
* Usable in a <Dropdown /> component.
|
6
|
+
* Should implement https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
|
7
|
+
*
|
8
|
+
* @internal
|
9
|
+
*/
|
10
|
+
export declare function UiMenu<InteractiveItemData, StaticItemData>({ items, className, itemClassName, maxWidth, onSelect, onClose, onUnhandledKeyDown, InteractiveItemComponent, StaticItemComponent, MenuHeaderComponent, shouldKeyboardActionPreventDefault, shouldKeyboardActionStopPropagation, shouldCloseOnSelect, isDisabledFocusable, ariaAttributes, }: UiMenuProps<InteractiveItemData, StaticItemData>): React.ReactNode;
|
11
|
+
//# sourceMappingURL=UiMenu.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"UiMenu.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiMenu/UiMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAoE,WAAW,EAAE,MAAM,YAAY,CAAC;AAO3G;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,mBAAmB,EAAE,cAAc,EAAE,EACxD,KAAK,EAEL,SAAS,EACT,aAAa,EACb,QAAQ,EAER,QAAQ,EACR,OAAO,EACP,kBAAkB,EAElB,wBAAgE,EAChE,mBAAsD,EACtD,mBAAkD,EAElD,kCAAkC,EAClC,mCAAmC,EACnC,mBAA0B,EAC1B,mBAA0B,EAE1B,cAAc,GACjB,EAAE,WAAW,CAAC,mBAAmB,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,SAAS,CA+JpE"}
|