@gooddata/sdk-ui-kit 10.26.0-alpha.43 → 10.26.0-alpha.45
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 +18 -0
- package/esm/@ui/@utils/keyboardNavigation.d.ts.map +1 -0
- package/esm/@ui/@utils/keyboardNavigation.js +47 -0
- package/esm/@ui/@utils/keyboardNavigation.js.map +1 -0
- package/esm/@ui/UiFocusTrap/UiFocusTrap.d.ts.map +1 -1
- package/esm/@ui/UiFocusTrap/UiFocusTrap.js +17 -13
- package/esm/@ui/UiFocusTrap/UiFocusTrap.js.map +1 -1
- package/esm/@ui/UiListbox/UiListbox.d.ts +11 -0
- package/esm/@ui/UiListbox/UiListbox.d.ts.map +1 -0
- package/esm/@ui/UiListbox/UiListbox.js +121 -0
- package/esm/@ui/UiListbox/UiListbox.js.map +1 -0
- package/esm/@ui/UiListbox/defaults/DefaultUiListboxItemComponent.d.ts +15 -0
- package/esm/@ui/UiListbox/defaults/DefaultUiListboxItemComponent.d.ts.map +1 -0
- package/esm/@ui/UiListbox/defaults/DefaultUiListboxItemComponent.js +31 -0
- package/esm/@ui/UiListbox/defaults/DefaultUiListboxItemComponent.js.map +1 -0
- package/esm/@ui/UiListbox/defaults/firstCharacterSearch.d.ts +8 -0
- package/esm/@ui/UiListbox/defaults/firstCharacterSearch.d.ts.map +1 -0
- package/esm/@ui/UiListbox/defaults/firstCharacterSearch.js +22 -0
- package/esm/@ui/UiListbox/defaults/firstCharacterSearch.js.map +1 -0
- package/esm/@ui/UiListbox/listboxBem.d.ts +2 -0
- package/esm/@ui/UiListbox/listboxBem.d.ts.map +1 -0
- package/esm/@ui/UiListbox/listboxBem.js +4 -0
- package/esm/@ui/UiListbox/listboxBem.js.map +1 -0
- package/esm/@ui/UiListbox/types.d.ts +49 -0
- package/esm/@ui/UiListbox/types.d.ts.map +1 -0
- package/esm/@ui/UiListbox/types.js +3 -0
- package/esm/@ui/UiListbox/types.js.map +1 -0
- package/esm/Dialog/DialogBase.d.ts.map +1 -1
- package/esm/Dialog/DialogBase.js +2 -8
- package/esm/Dialog/DialogBase.js.map +1 -1
- package/esm/Dropdown/Dropdown.d.ts +18 -1
- package/esm/Dropdown/Dropdown.d.ts.map +1 -1
- package/esm/Dropdown/Dropdown.js +41 -29
- package/esm/Dropdown/Dropdown.js.map +1 -1
- package/esm/Dropdown/DropdownButtonKeyboardWrapper.d.ts +8 -0
- package/esm/Dropdown/DropdownButtonKeyboardWrapper.d.ts.map +1 -0
- package/esm/Dropdown/DropdownButtonKeyboardWrapper.js +22 -0
- package/esm/Dropdown/DropdownButtonKeyboardWrapper.js.map +1 -0
- package/esm/List/index.js +1 -1
- package/esm/index.d.ts +3 -0
- package/esm/index.d.ts.map +1 -1
- package/esm/index.js +2 -0
- package/esm/index.js.map +1 -1
- package/esm/sdk-ui-kit.d.ts +92 -1
- package/esm/utils/domUtilities.d.ts +1 -0
- package/esm/utils/domUtilities.d.ts.map +1 -1
- package/esm/utils/domUtilities.js +11 -1
- package/esm/utils/domUtilities.js.map +1 -1
- package/package.json +8 -8
- package/src/@ui/UiListbox/UiListbox.scss +79 -0
- package/src/@ui/index.scss +1 -0
- package/styles/css/dropdown.css +4 -0
- package/styles/css/dropdown.css.map +1 -1
- package/styles/css/main.css +67 -0
- package/styles/css/main.css.map +1 -1
- package/styles/scss/dropdown.scss +5 -1
@@ -0,0 +1,18 @@
|
|
1
|
+
import React from "react";
|
2
|
+
/**
|
3
|
+
* @internal
|
4
|
+
*/
|
5
|
+
export declare const makeMenuKeyboardNavigation: ({ onFocusPrevious, onFocusNext, onFocusFirst, onFocusLast, onEnterLevel, onLeaveLevel, onSelect, onClose, onUnhandledKeyDown, shouldPreventDefault, shouldStopPropagation, }: {
|
6
|
+
onFocusNext?: (event: React.KeyboardEvent) => void;
|
7
|
+
onFocusPrevious?: (event: React.KeyboardEvent) => void;
|
8
|
+
onFocusFirst?: (event: React.KeyboardEvent) => void;
|
9
|
+
onFocusLast?: (event: React.KeyboardEvent) => void;
|
10
|
+
onEnterLevel?: (event: React.KeyboardEvent) => void;
|
11
|
+
onLeaveLevel?: (event: React.KeyboardEvent) => void;
|
12
|
+
onSelect?: (event: React.KeyboardEvent) => void;
|
13
|
+
onClose?: (event: React.KeyboardEvent) => void;
|
14
|
+
onUnhandledKeyDown?: (event: React.KeyboardEvent) => void;
|
15
|
+
shouldPreventDefault?: boolean;
|
16
|
+
shouldStopPropagation?: boolean;
|
17
|
+
}) => (event: React.KeyboardEvent) => void;
|
18
|
+
//# sourceMappingURL=keyboardNavigation.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"keyboardNavigation.d.ts","sourceRoot":"","sources":["../../../src/@ui/@utils/keyboardNavigation.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,eAAO,MAAM,0BAA0B;0BAcb,mBAAmB,KAAK,IAAI;8BACxB,mBAAmB,KAAK,IAAI;2BAC/B,mBAAmB,KAAK,IAAI;0BAC7B,mBAAmB,KAAK,IAAI;2BAC3B,mBAAmB,KAAK,IAAI;2BAC5B,mBAAmB,KAAK,IAAI;uBAChC,mBAAmB,KAAK,IAAI;sBAC7B,mBAAmB,KAAK,IAAI;iCACjB,mBAAmB,KAAK,IAAI;2BAElC,OAAO;4BACN,OAAO;cAahB,mBAAmB,SAgCrC,CAAC"}
|
@@ -0,0 +1,47 @@
|
|
1
|
+
// (C) 2025 GoodData Corporation
|
2
|
+
/**
|
3
|
+
* @internal
|
4
|
+
*/
|
5
|
+
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
|
+
return (event) => {
|
15
|
+
switch (event.code) {
|
16
|
+
case "ArrowDown":
|
17
|
+
handleAction(event, onFocusNext);
|
18
|
+
break;
|
19
|
+
case "ArrowUp":
|
20
|
+
handleAction(event, onFocusPrevious);
|
21
|
+
break;
|
22
|
+
case "ArrowLeft":
|
23
|
+
handleAction(event, onLeaveLevel);
|
24
|
+
break;
|
25
|
+
case "ArrowRight":
|
26
|
+
handleAction(event, onEnterLevel);
|
27
|
+
break;
|
28
|
+
case "Home":
|
29
|
+
handleAction(event, onFocusFirst);
|
30
|
+
break;
|
31
|
+
case "End":
|
32
|
+
handleAction(event, onFocusLast);
|
33
|
+
break;
|
34
|
+
case "Enter":
|
35
|
+
case "Space":
|
36
|
+
handleAction(event, onSelect);
|
37
|
+
break;
|
38
|
+
case "Escape":
|
39
|
+
handleAction(event, onClose);
|
40
|
+
break;
|
41
|
+
default:
|
42
|
+
onUnhandledKeyDown?.(event);
|
43
|
+
break;
|
44
|
+
}
|
45
|
+
};
|
46
|
+
};
|
47
|
+
//# sourceMappingURL=keyboardNavigation.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"keyboardNavigation.js","sourceRoot":"","sources":["../../../src/@ui/@utils/keyboardNavigation.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAIhC;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,EACvC,eAAe,EACf,WAAW,EACX,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,kBAAkB,EAElB,oBAAoB,GAAG,IAAI,EAC3B,qBAAqB,GAAG,IAAI,GAc/B,EAAE,EAAE;IACD,SAAS,YAAY,CAAC,KAA0B,EAAE,MAAyC;QACvF,IAAI,CAAC,MAAM,EAAE,CAAC;YACV,OAAO;QACX,CAAC;QAED,oBAAoB,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;QAC/C,qBAAqB,IAAI,KAAK,CAAC,eAAe,EAAE,CAAC;QAEjD,MAAM,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC;IAED,OAAO,CAAC,KAA0B,EAAE,EAAE;QAClC,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;YACjB,KAAK,WAAW;gBACZ,YAAY,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;gBACjC,MAAM;YACV,KAAK,SAAS;gBACV,YAAY,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC;gBACrC,MAAM;YACV,KAAK,WAAW;gBACZ,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;gBAClC,MAAM;YACV,KAAK,YAAY;gBACb,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;gBAClC,MAAM;YACV,KAAK,MAAM;gBACP,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;gBAClC,MAAM;YACV,KAAK,KAAK;gBACN,YAAY,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;gBACjC,MAAM;YACV,KAAK,OAAO,CAAC;YACb,KAAK,OAAO;gBACR,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;gBAC9B,MAAM;YACV,KAAK,QAAQ;gBACT,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;gBAC7B,MAAM;YACV;gBACI,kBAAkB,EAAE,CAAC,KAAK,CAAC,CAAC;gBAC5B,MAAM;QACd,CAAC;IACL,CAAC,CAAC;AACN,CAAC,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"UiFocusTrap.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiFocusTrap/UiFocusTrap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD;;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;IACtD;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;CACxD;AAwDD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,
|
1
|
+
{"version":3,"file":"UiFocusTrap.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiFocusTrap/UiFocusTrap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD;;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;IACtD;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;CACxD;AAwDD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwGlD,CAAC"}
|
@@ -48,6 +48,20 @@ const focusAndEnsureReachableElement = (initialElement, focusableElements, shift
|
|
48
48
|
export const UiFocusTrap = ({ children, onDeactivate, returnFocusTo, autofocusOnOpen = false, initialFocus, }) => {
|
49
49
|
const trapRef = useRef(null);
|
50
50
|
const defaultReturnFocusToRef = useRef(null);
|
51
|
+
const returnFocus = React.useCallback(() => {
|
52
|
+
if (typeof returnFocusTo === "string") {
|
53
|
+
const element = document.getElementById(returnFocusTo);
|
54
|
+
if (element) {
|
55
|
+
element.focus();
|
56
|
+
}
|
57
|
+
}
|
58
|
+
else if (returnFocusTo?.current) {
|
59
|
+
returnFocusTo.current.focus();
|
60
|
+
}
|
61
|
+
else if (defaultReturnFocusToRef.current) {
|
62
|
+
defaultReturnFocusToRef.current.focus();
|
63
|
+
}
|
64
|
+
}, [returnFocusTo]);
|
51
65
|
useEffect(() => {
|
52
66
|
const getNextElement = (focusableElements, firstElement, lastElement, shiftKey) => {
|
53
67
|
const elements = Array.from(focusableElements);
|
@@ -76,18 +90,7 @@ export const UiFocusTrap = ({ children, onDeactivate, returnFocusTo, autofocusOn
|
|
76
90
|
if (onDeactivate) {
|
77
91
|
onDeactivate();
|
78
92
|
}
|
79
|
-
|
80
|
-
const element = document.getElementById(returnFocusTo);
|
81
|
-
if (element) {
|
82
|
-
element.focus();
|
83
|
-
}
|
84
|
-
}
|
85
|
-
else if (returnFocusTo?.current) {
|
86
|
-
returnFocusTo.current.focus();
|
87
|
-
}
|
88
|
-
else if (defaultReturnFocusToRef.current) {
|
89
|
-
defaultReturnFocusToRef.current.focus();
|
90
|
-
}
|
93
|
+
returnFocus();
|
91
94
|
}
|
92
95
|
};
|
93
96
|
document.addEventListener("keydown", handleKeyDown);
|
@@ -120,8 +123,9 @@ export const UiFocusTrap = ({ children, onDeactivate, returnFocusTo, autofocusOn
|
|
120
123
|
return () => {
|
121
124
|
document.removeEventListener("keydown", handleKeyDown);
|
122
125
|
clearTimeout(focusTrapTimeout);
|
126
|
+
returnFocus();
|
123
127
|
};
|
124
|
-
}, [onDeactivate, returnFocusTo, autofocusOnOpen, initialFocus]);
|
128
|
+
}, [onDeactivate, returnFocusTo, autofocusOnOpen, initialFocus, returnFocus]);
|
125
129
|
return (React.createElement("div", { className: "gd-focus-trap", ref: trapRef }, children));
|
126
130
|
};
|
127
131
|
//# sourceMappingURL=UiFocusTrap.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"UiFocusTrap.js","sourceRoot":"","sources":["../../../src/@ui/UiFocusTrap/UiFocusTrap.tsx"],"names":[],"mappings":"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
|
1
|
+
{"version":3,"file":"UiFocusTrap.js","sourceRoot":"","sources":["../../../src/@ui/UiFocusTrap/UiFocusTrap.tsx"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { UiListboxProps } from "./types.js";
|
3
|
+
/**
|
4
|
+
* An accessible listbox component that can be navigated by keyboard.
|
5
|
+
* Usable in a <Dropdown /> component.
|
6
|
+
* Should implement https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
|
7
|
+
*
|
8
|
+
* @internal
|
9
|
+
*/
|
10
|
+
export declare function UiListbox<T>({ items, className, maxWidth, onSelect, onClose, selectedItemId, ariaAttributes, shouldKeyboardActionPreventDefault, shouldKeyboardActionStopPropagation, ItemComponent, onUnhandledKeyDown, }: UiListboxProps<T>): React.ReactNode;
|
11
|
+
//# sourceMappingURL=UiListbox.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"UiListbox.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiListbox/UiListbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAmC,cAAc,EAAE,MAAM,YAAY,CAAC;AAE7E;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,EACzB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,cAAc,EACd,cAAc,EAEd,kCAAkC,EAClC,mCAAmC,EAEnC,aAA6C,EAC7C,kBAAyC,GAC5C,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAkJrC"}
|
@@ -0,0 +1,121 @@
|
|
1
|
+
// (C) 2025 GoodData Corporation
|
2
|
+
import React from "react";
|
3
|
+
import cx from "classnames";
|
4
|
+
import { useId } from "../../utils/useId.js";
|
5
|
+
import { b, e } from "./listboxBem.js";
|
6
|
+
import { makeMenuKeyboardNavigation } from "../@utils/keyboardNavigation.js";
|
7
|
+
import { useAutoupdateRef } from "@gooddata/sdk-ui";
|
8
|
+
import { DefaultUiListboxItemComponent } from "./defaults/DefaultUiListboxItemComponent.js";
|
9
|
+
import { firstCharacterSearch } from "./defaults/firstCharacterSearch.js";
|
10
|
+
/**
|
11
|
+
* An accessible listbox component that can be navigated by keyboard.
|
12
|
+
* Usable in a <Dropdown /> component.
|
13
|
+
* Should implement https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
|
14
|
+
*
|
15
|
+
* @internal
|
16
|
+
*/
|
17
|
+
export function UiListbox({ items, className, maxWidth, onSelect, onClose, selectedItemId, ariaAttributes, shouldKeyboardActionPreventDefault, shouldKeyboardActionStopPropagation, ItemComponent = DefaultUiListboxItemComponent, onUnhandledKeyDown = firstCharacterSearch, }) {
|
18
|
+
const [focusedIndex, setFocusedIndex] = React.useState(() => {
|
19
|
+
// First try to find the selected item if it's not disabled
|
20
|
+
const selectedIndex = items.findIndex((item) => item.id === selectedItemId && !item.isDisabled);
|
21
|
+
if (selectedIndex >= 0) {
|
22
|
+
return selectedIndex;
|
23
|
+
}
|
24
|
+
// Otherwise find the first non-disabled item
|
25
|
+
const firstNonDisabledIndex = items.findIndex((item) => !item.isDisabled);
|
26
|
+
return firstNonDisabledIndex >= 0 ? firstNonDisabledIndex : 0;
|
27
|
+
});
|
28
|
+
const itemRefs = React.useRef([]);
|
29
|
+
// Update refs array size when items change. The actual refs are updated during render.
|
30
|
+
React.useEffect(() => {
|
31
|
+
itemRefs.current = itemRefs.current.slice(0, items.length);
|
32
|
+
}, [items]);
|
33
|
+
// Scroll focused item into view
|
34
|
+
React.useEffect(() => {
|
35
|
+
const focusedItem = itemRefs.current[focusedIndex];
|
36
|
+
if (focusedItem) {
|
37
|
+
focusedItem.scrollIntoView({ block: "nearest" });
|
38
|
+
}
|
39
|
+
}, [focusedIndex]);
|
40
|
+
const handleSelectItem = React.useCallback((item) => {
|
41
|
+
if (!item || item.isDisabled) {
|
42
|
+
return;
|
43
|
+
}
|
44
|
+
onSelect?.(item);
|
45
|
+
onClose?.();
|
46
|
+
}, [onClose, onSelect]);
|
47
|
+
const contextRef = useAutoupdateRef({
|
48
|
+
itemRefs,
|
49
|
+
focusedIndex,
|
50
|
+
items,
|
51
|
+
onClose,
|
52
|
+
onSelect: handleSelectItem,
|
53
|
+
setFocusedIndex,
|
54
|
+
selectedItemId,
|
55
|
+
});
|
56
|
+
const handleKeyDown = React.useMemo(() => makeMenuKeyboardNavigation({
|
57
|
+
shouldPreventDefault: shouldKeyboardActionPreventDefault,
|
58
|
+
shouldStopPropagation: shouldKeyboardActionStopPropagation,
|
59
|
+
onFocusPrevious: () => {
|
60
|
+
setFocusedIndex((prevIndex) => {
|
61
|
+
let newIndex = prevIndex - 1;
|
62
|
+
// Skip disabled items
|
63
|
+
while (newIndex >= 0 && items[newIndex].isDisabled) {
|
64
|
+
newIndex--;
|
65
|
+
}
|
66
|
+
return newIndex >= 0 ? newIndex : prevIndex;
|
67
|
+
});
|
68
|
+
},
|
69
|
+
onFocusNext: () => {
|
70
|
+
setFocusedIndex((prevIndex) => {
|
71
|
+
let newIndex = prevIndex + 1;
|
72
|
+
// Skip disabled items
|
73
|
+
while (newIndex < items.length && items[newIndex].isDisabled) {
|
74
|
+
newIndex++;
|
75
|
+
}
|
76
|
+
return newIndex < items.length ? newIndex : prevIndex;
|
77
|
+
});
|
78
|
+
},
|
79
|
+
onFocusFirst: () => {
|
80
|
+
// Find the first non-disabled item
|
81
|
+
const firstNonDisabledIndex = items.findIndex((item) => !item.isDisabled);
|
82
|
+
setFocusedIndex(firstNonDisabledIndex >= 0 ? firstNonDisabledIndex : 0);
|
83
|
+
},
|
84
|
+
onFocusLast: () => {
|
85
|
+
// Find the last non-disabled item
|
86
|
+
for (let i = items.length - 1; i >= 0; i--) {
|
87
|
+
if (!items[i].isDisabled) {
|
88
|
+
setFocusedIndex(i);
|
89
|
+
return;
|
90
|
+
}
|
91
|
+
}
|
92
|
+
setFocusedIndex(items.length - 1);
|
93
|
+
},
|
94
|
+
onSelect: () => {
|
95
|
+
handleSelectItem(items[focusedIndex]);
|
96
|
+
},
|
97
|
+
onClose: () => {
|
98
|
+
onClose?.();
|
99
|
+
},
|
100
|
+
onUnhandledKeyDown: (event) => {
|
101
|
+
onUnhandledKeyDown(event, contextRef.current);
|
102
|
+
},
|
103
|
+
}), [
|
104
|
+
contextRef,
|
105
|
+
focusedIndex,
|
106
|
+
handleSelectItem,
|
107
|
+
items,
|
108
|
+
onClose,
|
109
|
+
onUnhandledKeyDown,
|
110
|
+
shouldKeyboardActionPreventDefault,
|
111
|
+
shouldKeyboardActionStopPropagation,
|
112
|
+
]);
|
113
|
+
const listboxId = useId();
|
114
|
+
return (React.createElement("div", { className: cx(b(), className), style: { maxWidth } },
|
115
|
+
React.createElement("ul", { role: "listbox", className: e("items"), tabIndex: 0, onKeyDown: handleKeyDown, "aria-activedescendant": makeItemId(listboxId, items[focusedIndex]), ...ariaAttributes }, items.map((item, index) => (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(listboxId, item) },
|
116
|
+
React.createElement(ItemComponent, { onSelect: () => {
|
117
|
+
handleSelectItem(item);
|
118
|
+
}, item: item, isFocused: index === focusedIndex, isSelected: item.id === selectedItemId })))))));
|
119
|
+
}
|
120
|
+
const makeItemId = (listboxId, item) => `item-${listboxId}-${item.id}`;
|
121
|
+
//# sourceMappingURL=UiListbox.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"UiListbox.js","sourceRoot":"","sources":["../../../src/@ui/UiListbox/UiListbox.tsx"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { IUiListboxItem, UiListboxItemProps } from "../types.js";
|
3
|
+
/**
|
4
|
+
* @internal
|
5
|
+
*/
|
6
|
+
export declare const separatorItemSymbol: unique symbol;
|
7
|
+
/**
|
8
|
+
* @internal
|
9
|
+
*/
|
10
|
+
export declare const makeSeparatorItem: () => IUiListboxItem<typeof separatorItemSymbol>;
|
11
|
+
/**
|
12
|
+
* @internal
|
13
|
+
*/
|
14
|
+
export declare function DefaultUiListboxItemComponent<T>({ item, isFocused, isSelected, onSelect, }: UiListboxItemProps<T>): React.ReactNode;
|
15
|
+
//# sourceMappingURL=DefaultUiListboxItemComponent.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"DefaultUiListboxItemComponent.d.ts","sourceRoot":"","sources":["../../../../src/@ui/UiListbox/defaults/DefaultUiListboxItemComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjE;;GAEG;AACH,eAAO,MAAM,mBAAmB,eAAsB,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,iBAAiB,QAAO,eAAe,0BAA0B,CAK5E,CAAC;AAEH;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,CAAC,EAAE,EAC7C,IAAI,EACJ,SAAS,EACT,UAAU,EACV,QAAQ,GACX,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAiBzC"}
|
@@ -0,0 +1,31 @@
|
|
1
|
+
// (C) 2025 GoodData Corporation
|
2
|
+
import React from "react";
|
3
|
+
import { Separator } from "../../../List/index.js";
|
4
|
+
import { e } from "../listboxBem.js";
|
5
|
+
import { ShortenedText } from "../../../ShortenedText/index.js";
|
6
|
+
import { v4 as uuid } from "uuid";
|
7
|
+
/**
|
8
|
+
* @internal
|
9
|
+
*/
|
10
|
+
export const separatorItemSymbol = Symbol("separator");
|
11
|
+
/**
|
12
|
+
* @internal
|
13
|
+
*/
|
14
|
+
export const makeSeparatorItem = () => ({
|
15
|
+
id: `separator-${uuid()}`,
|
16
|
+
data: separatorItemSymbol,
|
17
|
+
stringTitle: "Separator",
|
18
|
+
isDisabled: true,
|
19
|
+
});
|
20
|
+
/**
|
21
|
+
* @internal
|
22
|
+
*/
|
23
|
+
export function DefaultUiListboxItemComponent({ item, isFocused, isSelected, onSelect, }) {
|
24
|
+
return item.data === separatorItemSymbol ? (React.createElement(Separator, null)) : (React.createElement("div", { className: e("item", {
|
25
|
+
isFocused,
|
26
|
+
isSelected,
|
27
|
+
isDisabled: !!item.isDisabled,
|
28
|
+
}), onClick: item.isDisabled ? undefined : onSelect },
|
29
|
+
React.createElement(ShortenedText, { className: e("item-title"), ellipsisPosition: "end" }, item.stringTitle)));
|
30
|
+
}
|
31
|
+
//# sourceMappingURL=DefaultUiListboxItemComponent.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"DefaultUiListboxItemComponent.js","sourceRoot":"","sources":["../../../../src/@ui/UiListbox/defaults/DefaultUiListboxItemComponent.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,CAAC,EAAE,MAAM,kBAAkB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,EAAE,IAAI,IAAI,EAAE,MAAM,MAAM,CAAC;AAGlC;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;AAEvD;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAA+C,EAAE,CAAC,CAAC;IAChF,EAAE,EAAE,aAAa,IAAI,EAAE,EAAE;IACzB,IAAI,EAAE,mBAAmB;IACzB,WAAW,EAAE,WAAW;IACxB,UAAU,EAAE,IAAI;CACnB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,UAAU,6BAA6B,CAAI,EAC7C,IAAI,EACJ,SAAS,EACT,UAAU,EACV,QAAQ,GACY;IACpB,OAAO,IAAI,CAAC,IAAI,KAAK,mBAAmB,CAAC,CAAC,CAAC,CACvC,oBAAC,SAAS,OAAG,CAChB,CAAC,CAAC,CAAC,CACA,6BACI,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE;YACjB,SAAS;YACT,UAAU;YACV,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;SAChC,CAAC,EACF,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;QAE/C,oBAAC,aAAa,IAAC,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,EAAE,gBAAgB,EAAE,KAAK,IAC7D,IAAI,CAAC,WAAW,CACL,CACd,CACT,CAAC;AACN,CAAC"}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { IListboxContext } from "../types.js";
|
3
|
+
/**
|
4
|
+
* This is a basic implementation of moving focus to items on character key press.
|
5
|
+
* Having this functionality is recommended by the listbox spec.
|
6
|
+
*/
|
7
|
+
export declare function firstCharacterSearch(event: React.KeyboardEvent, { items, focusedIndex, setFocusedIndex }: IListboxContext<any>): void;
|
8
|
+
//# sourceMappingURL=firstCharacterSearch.d.ts.map
|
@@ -0,0 +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,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C;;;GAGG;AACH,wBAAgB,oBAAoB,CAChC,KAAK,EAAE,KAAK,CAAC,aAAa,EAC1B,EAAE,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,EAAE,eAAe,CAAC,GAAG,CAAC,QA0BjE"}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
// (C) 2025 GoodData Corporation
|
2
|
+
/**
|
3
|
+
* This is a basic implementation of moving focus to items on character key press.
|
4
|
+
* Having this functionality is recommended by the listbox spec.
|
5
|
+
*/
|
6
|
+
export function firstCharacterSearch(event, { items, focusedIndex, setFocusedIndex }) {
|
7
|
+
const char = event.key.toLowerCase();
|
8
|
+
if (char.length !== 1) {
|
9
|
+
return;
|
10
|
+
}
|
11
|
+
const itemIndex = items.findIndex((item, index) => index > focusedIndex && item.stringTitle.toLowerCase().startsWith(char) && !item.isDisabled);
|
12
|
+
if (itemIndex !== -1) {
|
13
|
+
setFocusedIndex(itemIndex);
|
14
|
+
return;
|
15
|
+
}
|
16
|
+
// If not found after the current index, start from the beginning
|
17
|
+
const fromStartIndex = items.findIndex((item) => item.stringTitle.toLowerCase().startsWith(char) && !item.isDisabled);
|
18
|
+
if (fromStartIndex !== -1) {
|
19
|
+
setFocusedIndex(fromStartIndex);
|
20
|
+
}
|
21
|
+
}
|
22
|
+
//# sourceMappingURL=firstCharacterSearch.js.map
|
@@ -0,0 +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,EAAE,KAAK,EAAE,YAAY,EAAE,eAAe,EAAwB;IAE9D,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,YAAY,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAClG,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,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAChF,CAAC;IAEF,IAAI,cAAc,KAAK,CAAC,CAAC,EAAE,CAAC;QACxB,eAAe,CAAC,cAAc,CAAC,CAAC;IACpC,CAAC;AACL,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"listboxBem.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiListbox/listboxBem.ts"],"names":[],"mappings":"AAGA,eAAO,MAAQ,CAAC,6DAAE,CAAC,4EAA6B,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"listboxBem.js","sourceRoot":"","sources":["../../../src/@ui/UiListbox/listboxBem.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvC,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,GAAG,CAAC,mBAAmB,CAAC,CAAC"}
|
@@ -0,0 +1,49 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { IDropdownBodyRenderProps } from "../../Dropdown/index.js";
|
3
|
+
/**
|
4
|
+
* @internal
|
5
|
+
*/
|
6
|
+
export interface IUiListboxItem<T> {
|
7
|
+
id: string;
|
8
|
+
stringTitle: string;
|
9
|
+
isDisabled?: boolean;
|
10
|
+
data: T;
|
11
|
+
}
|
12
|
+
/**
|
13
|
+
* @internal
|
14
|
+
*/
|
15
|
+
export interface UiListboxItemProps<T> {
|
16
|
+
item: IUiListboxItem<T>;
|
17
|
+
isFocused: boolean;
|
18
|
+
isSelected: boolean;
|
19
|
+
onSelect: () => void;
|
20
|
+
}
|
21
|
+
/**
|
22
|
+
* @internal
|
23
|
+
*/
|
24
|
+
export interface IListboxContext<T> {
|
25
|
+
items: IUiListboxItem<T>[];
|
26
|
+
itemRefs: React.MutableRefObject<(HTMLLIElement | null)[]>;
|
27
|
+
onSelect: (item: IUiListboxItem<T>) => void;
|
28
|
+
onClose?: () => void;
|
29
|
+
selectedItemId?: string;
|
30
|
+
focusedIndex: number;
|
31
|
+
setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;
|
32
|
+
}
|
33
|
+
/**
|
34
|
+
* @internal
|
35
|
+
*/
|
36
|
+
export interface UiListboxProps<T> {
|
37
|
+
items: IUiListboxItem<T>[];
|
38
|
+
className?: string;
|
39
|
+
maxWidth?: number;
|
40
|
+
onSelect?: (item: IUiListboxItem<T>) => void;
|
41
|
+
onClose?: () => void;
|
42
|
+
onUnhandledKeyDown?: (event: React.KeyboardEvent, context: IListboxContext<T>) => void;
|
43
|
+
selectedItemId?: string;
|
44
|
+
ItemComponent?: React.ComponentType<UiListboxItemProps<any>>;
|
45
|
+
shouldKeyboardActionPreventDefault?: boolean;
|
46
|
+
shouldKeyboardActionStopPropagation?: boolean;
|
47
|
+
ariaAttributes: IDropdownBodyRenderProps["ariaAttributes"];
|
48
|
+
}
|
49
|
+
//# sourceMappingURL=types.d.ts.map
|
@@ -0,0 +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,cAAc,CAAC,CAAC;IAC7B,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,WAAW,kBAAkB,CAAC,CAAC;IACjC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAExB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IAEpB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe,CAAC,CAAC;IAC9B,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;IAC3D,QAAQ,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CACjE;AAED;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,CAAC;IAC7B,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAE3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,EAAE,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAEvF,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAE7D,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C,mCAAmC,CAAC,EAAE,OAAO,CAAC;IAE9C,cAAc,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,CAAC;CAC9D"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/@ui/UiListbox/types.ts"],"names":[],"mappings":"AAAA,gCAAgC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"DialogBase.d.ts","sourceRoot":"","sources":["../../src/Dialog/DialogBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;
|
1
|
+
{"version":3,"file":"DialogBase.d.ts","sourceRoot":"","sources":["../../src/Dialog/DialogBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAgBhD;;GAEG;AACH,eAAO,MAAM,UAAU,8CAmDrB,CAAC"}
|
package/esm/Dialog/DialogBase.js
CHANGED
@@ -3,6 +3,7 @@ import React from "react";
|
|
3
3
|
import cx from "classnames";
|
4
4
|
import { DialogCloseButton } from "./DialogCloseButton.js";
|
5
5
|
import { UiFocusTrap } from "../@ui/UiFocusTrap/UiFocusTrap.js";
|
6
|
+
import { isElementTextInput } from "../utils/domUtilities.js";
|
6
7
|
const checkKeyHandler = (event, key, handler) => {
|
7
8
|
if (event.key !== key || !handler) {
|
8
9
|
return;
|
@@ -11,20 +12,13 @@ const checkKeyHandler = (event, key, handler) => {
|
|
11
12
|
event.stopPropagation();
|
12
13
|
handler();
|
13
14
|
};
|
14
|
-
const isTargetTextInput = ({ target }) => {
|
15
|
-
const { tagName, type } = target;
|
16
|
-
const tagNameInLowercase = tagName.toLowerCase();
|
17
|
-
const typeInLowercase = type ? type.toLowerCase() : "";
|
18
|
-
return (tagNameInLowercase === "textarea" ||
|
19
|
-
(tagNameInLowercase === "input" && (typeInLowercase === "text" || typeInLowercase === "number")));
|
20
|
-
};
|
21
15
|
/**
|
22
16
|
* @internal
|
23
17
|
*/
|
24
18
|
export const DialogBase = React.memo(function DialogBase({ submitOnEnterKey, onCancel, onSubmit, displayCloseButton, onClose, accessibilityConfig, className, autofocusOnOpen = true, children, CloseButton = DialogCloseButton, initialFocus, }) {
|
25
19
|
const handleKeyDown = React.useCallback((event) => {
|
26
20
|
// don't call onSubmit when pressing enter key on input fields
|
27
|
-
const isEnterKeyDownOnInputField = event.key === "Enter" &&
|
21
|
+
const isEnterKeyDownOnInputField = event.key === "Enter" && isElementTextInput(event.target);
|
28
22
|
if (submitOnEnterKey === false && isEnterKeyDownOnInputField) {
|
29
23
|
return;
|
30
24
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"DialogBase.js","sourceRoot":"","sources":["../../src/Dialog/DialogBase.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;
|
1
|
+
{"version":3,"file":"DialogBase.js","sourceRoot":"","sources":["../../src/Dialog/DialogBase.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,MAAM,eAAe,GAAG,CAAC,KAA0B,EAAE,GAAW,EAAE,OAAoB,EAAQ,EAAE;IAC5F,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAChC,OAAO;IACX,CAAC;IAED,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IAExB,OAAO,EAAE,CAAC;AACd,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAmB,SAAS,UAAU,CAAC,EACvE,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,kBAAkB,EAClB,OAAO,EACP,mBAAmB,EACnB,SAAS,EACT,eAAe,GAAG,IAAI,EACtB,QAAQ,EACR,WAAW,GAAG,iBAAiB,EAC/B,YAAY,GACf;IACG,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,KAAK,EAAE,EAAE;QACN,8DAA8D;QAC9D,MAAM,0BAA0B,GAAG,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,kBAAkB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC7F,IAAI,gBAAgB,KAAK,KAAK,IAAI,0BAA0B,EAAE,CAAC;YAC3D,OAAO;QACX,CAAC;QAED,eAAe,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;QAC1C,eAAe,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CACzC,CAAC;IAEF,MAAM,aAAa,GAAG,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;IAE5D,OAAO,CACH,oBAAC,WAAW,IAAC,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,eAAe;QACrE,6BACI,SAAS,EAAE,aAAa,EACxB,IAAI,EAAE,QAAQ,gBACF,mBAAmB,EAAE,OAAO,qBACvB,mBAAmB,EAAE,cAAc,sBAClC,mBAAmB,EAAE,oBAAoB;YAE3D,6BAAK,SAAS,EAAE,aAAa;gBACxB,kBAAkB,CAAC,CAAC,CAAC,CAClB,oBAAC,WAAW,IACR,OAAO,EAAE,OAAO,IAAI,QAAQ,EAC5B,mBAAmB,EAAE,mBAAmB,GAC1C,CACL,CAAC,CAAC,CAAC,IAAI;gBAEP,QAAQ,CACP,CACJ,CACI,CACjB,CAAC;AACN,CAAC,CAAC,CAAC"}
|
@@ -11,7 +11,10 @@ export interface IDropdownButtonRenderProps {
|
|
11
11
|
buttonRef: React.MutableRefObject<HTMLElement | null>;
|
12
12
|
openDropdown: () => void;
|
13
13
|
closeDropdown: () => void;
|
14
|
-
toggleDropdown: () => void;
|
14
|
+
toggleDropdown: (desiredState?: boolean | unknown) => void;
|
15
|
+
ariaAttributes: {
|
16
|
+
role: "button" | string;
|
17
|
+
} & Pick<React.AriaAttributes, "aria-haspopup" | "aria-expanded" | "aria-controls">;
|
15
18
|
}
|
16
19
|
/**
|
17
20
|
* @internal
|
@@ -19,6 +22,10 @@ export interface IDropdownButtonRenderProps {
|
|
19
22
|
export interface IDropdownBodyRenderProps {
|
20
23
|
isMobile: boolean;
|
21
24
|
closeDropdown: () => void;
|
25
|
+
ariaAttributes: Pick<React.AriaAttributes, "aria-labelledby"> & {
|
26
|
+
role: React.AriaAttributes["aria-haspopup"] & React.AriaRole;
|
27
|
+
id: string;
|
28
|
+
};
|
22
29
|
}
|
23
30
|
/**
|
24
31
|
* @internal
|
@@ -26,6 +33,13 @@ export interface IDropdownBodyRenderProps {
|
|
26
33
|
export interface IDropdownProps {
|
27
34
|
renderBody: (props: IDropdownBodyRenderProps) => React.ReactNode;
|
28
35
|
renderButton: (props: IDropdownButtonRenderProps) => React.ReactNode;
|
36
|
+
isOpen?: boolean;
|
37
|
+
/**
|
38
|
+
* Toggles the open state or sets the state to the desired value.
|
39
|
+
* The `desiredState` argument's type includes `unknown` to facilitate ease of use as an event handler (`onClick={onToggle}`)
|
40
|
+
* @param desiredState - The desired state. If not provided, the state will be toggled.
|
41
|
+
*/
|
42
|
+
onToggle?: (desiredState?: boolean | unknown) => void;
|
29
43
|
openOnInit?: boolean;
|
30
44
|
className?: string;
|
31
45
|
alignPoints?: IAlignPoint[];
|
@@ -43,6 +57,9 @@ export interface IDropdownProps {
|
|
43
57
|
enableEventPropagation?: boolean;
|
44
58
|
closeOnEscape?: boolean;
|
45
59
|
autofocusOnOpen?: boolean;
|
60
|
+
accessibilityConfig?: {
|
61
|
+
popupRole?: "listbox" | "tree" | "grid" | "dialog";
|
62
|
+
};
|
46
63
|
}
|
47
64
|
/**
|
48
65
|
* @internal
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AACA,OAAO,
|
1
|
+
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAqC5D;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,KAAK,IAAI,CAAC;IAC3D,cAAc,EAAE;QACZ,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;KAC3B,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,eAAe,GAAG,eAAe,GAAG,eAAe,CAAC,CAAC;CACvF;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG;QAC5D,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC;QAC7D,EAAE,EAAE,MAAM,CAAC;KACd,CAAC;CACL;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC3B,UAAU,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,KAAK,CAAC,SAAS,CAAC;IAEjE,YAAY,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAC;IAErE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,KAAK,IAAI,CAAC;IAEtD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC;IAE5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IAEjC,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,mBAAmB,CAAC,EAAE;QAClB,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;KACtD,CAAC;CACL;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA6K7C,CAAC"}
|