@gooddata/sdk-ui-kit 10.28.0-alpha.8 → 10.28.0-alpha.81
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/@types/size.d.ts +4 -0
- package/esm/@ui/@types/size.d.ts.map +1 -1
- package/esm/@ui/@types/size.js +1 -0
- package/esm/@ui/@types/size.js.map +1 -1
- package/esm/@ui/@utils/keyboardNavigation.d.ts +44 -12
- package/esm/@ui/@utils/keyboardNavigation.d.ts.map +1 -1
- package/esm/@ui/@utils/keyboardNavigation.js +55 -65
- package/esm/@ui/@utils/keyboardNavigation.js.map +1 -1
- package/esm/@ui/UiButton/UiButton.d.ts +8 -1
- package/esm/@ui/UiButton/UiButton.d.ts.map +1 -1
- package/esm/@ui/UiButton/UiButton.js +9 -4
- package/esm/@ui/UiButton/UiButton.js.map +1 -1
- package/esm/@ui/UiChip/UiChip.d.ts +3 -1
- package/esm/@ui/UiChip/UiChip.d.ts.map +1 -1
- package/esm/@ui/UiChip/UiChip.js +3 -3
- package/esm/@ui/UiChip/UiChip.js.map +1 -1
- package/esm/@ui/UiFocusTrap/UiFocusTrap.d.ts.map +1 -1
- package/esm/@ui/UiFocusTrap/UiFocusTrap.js +4 -1
- package/esm/@ui/UiFocusTrap/UiFocusTrap.js.map +1 -1
- package/esm/@ui/UiIconButton/UiIconButton.d.ts +3 -2
- package/esm/@ui/UiIconButton/UiIconButton.d.ts.map +1 -1
- package/esm/@ui/UiIconButton/UiIconButton.js +26 -3
- package/esm/@ui/UiIconButton/UiIconButton.js.map +1 -1
- package/esm/@ui/UiListbox/UiListbox.d.ts +1 -1
- package/esm/@ui/UiListbox/UiListbox.d.ts.map +1 -1
- package/esm/@ui/UiListbox/UiListbox.js +6 -7
- package/esm/@ui/UiListbox/UiListbox.js.map +1 -1
- package/esm/@ui/UiListbox/types.d.ts +1 -0
- package/esm/@ui/UiListbox/types.d.ts.map +1 -1
- package/esm/@ui/UiMenu/UiMenu.d.ts +1 -1
- package/esm/@ui/UiMenu/UiMenu.d.ts.map +1 -1
- package/esm/@ui/UiMenu/UiMenu.js +26 -6
- package/esm/@ui/UiMenu/UiMenu.js.map +1 -1
- package/esm/@ui/UiMenu/components/Item.d.ts +4 -0
- package/esm/@ui/UiMenu/components/Item.d.ts.map +1 -0
- package/esm/@ui/UiMenu/components/Item.js +26 -0
- package/esm/@ui/UiMenu/components/Item.js.map +1 -0
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuContent.d.ts +10 -0
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuContent.d.ts.map +1 -0
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuContent.js +29 -0
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuContent.js.map +1 -0
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuContentItem.d.ts +12 -0
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuContentItem.d.ts.map +1 -0
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuContentItem.js +60 -0
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuContentItem.js.map +1 -0
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuGroupItem.d.ts +7 -0
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuGroupItem.d.ts.map +1 -0
- package/esm/@ui/UiMenu/{defaults/DefaultUiMenuGroupItemComponent.js → components/defaults/DefaultUiMenuGroupItem.js} +5 -5
- package/esm/@ui/UiMenu/{defaults/DefaultUiMenuGroupItemComponent.js.map → components/defaults/DefaultUiMenuGroupItem.js.map} +1 -1
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuHeader.d.ts +8 -0
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuHeader.d.ts.map +1 -0
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuHeader.js +49 -0
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuHeader.js.map +1 -0
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuInteractiveItem.d.ts +11 -0
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuInteractiveItem.d.ts.map +1 -0
- package/esm/@ui/UiMenu/{defaults/DefaultUiMenuInteractiveItemComponent.js → components/defaults/DefaultUiMenuInteractiveItem.js} +7 -7
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuInteractiveItem.js.map +1 -0
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuStaticItem.d.ts +8 -0
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuStaticItem.d.ts.map +1 -0
- package/esm/@ui/UiMenu/{defaults/DefaultUiMenuStaticItemComponent.js → components/defaults/DefaultUiMenuStaticItem.js} +3 -3
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuStaticItem.js.map +1 -0
- package/esm/@ui/UiMenu/context.d.ts +6 -2
- package/esm/@ui/UiMenu/context.d.ts.map +1 -1
- package/esm/@ui/UiMenu/context.js +10 -0
- package/esm/@ui/UiMenu/context.js.map +1 -1
- package/esm/@ui/UiMenu/hooks.d.ts +10 -4
- package/esm/@ui/UiMenu/hooks.d.ts.map +1 -1
- package/esm/@ui/UiMenu/hooks.js +90 -37
- package/esm/@ui/UiMenu/hooks.js.map +1 -1
- package/esm/@ui/UiMenu/itemUtils.d.ts +60 -1
- package/esm/@ui/UiMenu/itemUtils.d.ts.map +1 -1
- package/esm/@ui/UiMenu/itemUtils.js +69 -1
- package/esm/@ui/UiMenu/itemUtils.js.map +1 -1
- package/esm/@ui/UiMenu/types.d.ts +65 -18
- package/esm/@ui/UiMenu/types.d.ts.map +1 -1
- package/esm/@ui/hooks/useListWithActionsKeyboardNavigation.d.ts +21 -0
- package/esm/@ui/hooks/useListWithActionsKeyboardNavigation.d.ts.map +1 -0
- package/esm/@ui/hooks/useListWithActionsKeyboardNavigation.js +128 -0
- package/esm/@ui/hooks/useListWithActionsKeyboardNavigation.js.map +1 -0
- package/esm/Button/Button.d.ts.map +1 -1
- package/esm/Button/Button.js +10 -3
- package/esm/Button/Button.js.map +1 -1
- package/esm/Button/typings.d.ts +2 -0
- package/esm/Button/typings.d.ts.map +1 -1
- package/esm/Dialog/DialogCloseButton.d.ts +3 -0
- package/esm/Dialog/DialogCloseButton.d.ts.map +1 -1
- package/esm/Dialog/DialogCloseButton.js +6 -2
- package/esm/Dialog/DialogCloseButton.js.map +1 -1
- package/esm/Dialog/DialogList/DialogListItemBasic.d.ts.map +1 -1
- package/esm/Dialog/DialogList/DialogListItemBasic.js +3 -2
- package/esm/Dialog/DialogList/DialogListItemBasic.js.map +1 -1
- package/esm/Dialog/DialogList/typings.d.ts +1 -0
- package/esm/Dialog/DialogList/typings.d.ts.map +1 -1
- package/esm/Dialog/DialogList/typings.js +1 -1
- package/esm/Dialog/DialogList/typings.js.map +1 -1
- package/esm/Dialog/index.d.ts +1 -0
- package/esm/Dialog/index.d.ts.map +1 -1
- package/esm/Dialog/index.js +2 -1
- package/esm/Dialog/index.js.map +1 -1
- package/esm/Dialog/typings.d.ts +3 -1
- package/esm/Dialog/typings.d.ts.map +1 -1
- package/esm/Dropdown/Dropdown.d.ts +1 -0
- package/esm/Dropdown/Dropdown.d.ts.map +1 -1
- package/esm/Dropdown/Dropdown.js +19 -20
- package/esm/Dropdown/Dropdown.js.map +1 -1
- package/esm/Header/generateHeaderAccountMenuItems.d.ts +0 -4
- package/esm/Header/generateHeaderAccountMenuItems.d.ts.map +1 -1
- package/esm/Header/generateHeaderAccountMenuItems.js +2 -6
- package/esm/Header/generateHeaderAccountMenuItems.js.map +1 -1
- package/esm/List/ListItem.d.ts +1 -0
- package/esm/List/ListItem.d.ts.map +1 -1
- package/esm/List/ListItem.js +4 -3
- package/esm/List/ListItem.js.map +1 -1
- package/esm/List/MenuList.d.ts.map +1 -1
- package/esm/List/MenuList.js +2 -2
- package/esm/List/MenuList.js.map +1 -1
- package/esm/List/guid.d.ts.map +1 -1
- package/esm/List/guid.js +5 -2
- package/esm/List/guid.js.map +1 -1
- package/esm/Menu/menuOpener/MenuOpener.js +2 -2
- package/esm/Menu/menuOpener/MenuOpener.js.map +1 -1
- package/esm/Overlay/Overlay.d.ts.map +1 -1
- package/esm/Overlay/Overlay.js +6 -2
- package/esm/Overlay/Overlay.js.map +1 -1
- package/esm/RecurrenceForm/DateTime.d.ts +1 -0
- package/esm/RecurrenceForm/DateTime.d.ts.map +1 -1
- package/esm/RecurrenceForm/DateTime.js +3 -3
- package/esm/RecurrenceForm/DateTime.js.map +1 -1
- package/esm/RecurrenceForm/Recurrence.d.ts +1 -0
- package/esm/RecurrenceForm/Recurrence.d.ts.map +1 -1
- package/esm/RecurrenceForm/Recurrence.js +2 -2
- package/esm/RecurrenceForm/Recurrence.js.map +1 -1
- package/esm/RecurrenceForm/RecurrenceForm.d.ts +1 -0
- package/esm/RecurrenceForm/RecurrenceForm.d.ts.map +1 -1
- package/esm/RecurrenceForm/RecurrenceForm.js +3 -3
- package/esm/RecurrenceForm/RecurrenceForm.js.map +1 -1
- package/esm/RecurrenceForm/RepeatTypeSelect.d.ts +1 -0
- package/esm/RecurrenceForm/RepeatTypeSelect.d.ts.map +1 -1
- package/esm/RecurrenceForm/RepeatTypeSelect.js +16 -6
- package/esm/RecurrenceForm/RepeatTypeSelect.js.map +1 -1
- package/esm/RecurrenceForm/constants.d.ts +0 -1
- package/esm/RecurrenceForm/constants.d.ts.map +1 -1
- package/esm/RecurrenceForm/constants.js +0 -1
- package/esm/RecurrenceForm/constants.js.map +1 -1
- package/esm/Timepicker/Timepicker.d.ts +1 -0
- package/esm/Timepicker/Timepicker.d.ts.map +1 -1
- package/esm/Timepicker/Timepicker.js +19 -8
- package/esm/Timepicker/Timepicker.js.map +1 -1
- package/esm/ZoomContext/ZoomContext.js +6 -6
- package/esm/ZoomContext/ZoomContext.js.map +1 -1
- package/esm/index.d.ts +16 -7
- package/esm/index.d.ts.map +1 -1
- package/esm/index.js +12 -4
- package/esm/index.js.map +1 -1
- package/esm/responsive/useMediaQuery.d.ts.map +1 -1
- package/esm/responsive/useMediaQuery.js +3 -1
- package/esm/responsive/useMediaQuery.js.map +1 -1
- package/esm/sdk-ui-kit.d.ts +363 -77
- package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.d.ts +14 -5
- package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.d.ts.map +1 -1
- package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.js +5 -1
- package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.js.map +1 -1
- package/esm/syntaxHighlightingInput/hooks/useAutocompletion.d.ts +17 -0
- package/esm/syntaxHighlightingInput/hooks/useAutocompletion.d.ts.map +1 -0
- package/esm/syntaxHighlightingInput/hooks/useAutocompletion.js +66 -0
- package/esm/syntaxHighlightingInput/hooks/useAutocompletion.js.map +1 -0
- package/esm/syntaxHighlightingInput/hooks/useChangeHandler.d.ts +8 -0
- package/esm/syntaxHighlightingInput/hooks/useChangeHandler.d.ts.map +1 -0
- package/esm/syntaxHighlightingInput/hooks/useChangeHandler.js +21 -0
- package/esm/syntaxHighlightingInput/hooks/useChangeHandler.js.map +1 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirror.d.ts +12 -9
- package/esm/syntaxHighlightingInput/hooks/useCodemirror.d.ts.map +1 -1
- package/esm/syntaxHighlightingInput/hooks/useCodemirror.js +42 -96
- package/esm/syntaxHighlightingInput/hooks/useCodemirror.js.map +1 -1
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorChange.d.ts +4 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorChange.d.ts.map +1 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorChange.js +35 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorChange.js.map +1 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorEditable.d.ts +6 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorEditable.d.ts.map +1 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorEditable.js +24 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorEditable.js.map +1 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorEvents.d.ts +9 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorEvents.d.ts.map +1 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorEvents.js +26 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorEvents.js.map +1 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorKeymap.d.ts +8 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorKeymap.d.ts.map +1 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorKeymap.js +32 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorKeymap.js.map +1 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorOptions.d.ts +10 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorOptions.d.ts.map +1 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorOptions.js +21 -0
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorOptions.js.map +1 -0
- package/esm/syntaxHighlightingInput/hooks/useEventHandlers.d.ts +20 -0
- package/esm/syntaxHighlightingInput/hooks/useEventHandlers.d.ts.map +1 -0
- package/esm/syntaxHighlightingInput/hooks/useEventHandlers.js +25 -0
- package/esm/syntaxHighlightingInput/hooks/useEventHandlers.js.map +1 -0
- package/esm/typings/accessibility.d.ts +3 -2
- package/esm/typings/accessibility.d.ts.map +1 -1
- package/esm/utils/domUtilities.d.ts +8 -1
- package/esm/utils/domUtilities.d.ts.map +1 -1
- package/esm/utils/domUtilities.js +8 -0
- package/esm/utils/domUtilities.js.map +1 -1
- package/esm/utils/useAutofocusOnMount.d.ts +12 -0
- package/esm/utils/useAutofocusOnMount.d.ts.map +1 -0
- package/esm/utils/useAutofocusOnMount.js +51 -0
- package/esm/utils/useAutofocusOnMount.js.map +1 -0
- package/package.json +9 -8
- package/src/@ui/UiMenu/UiMenu.scss +15 -7
- package/styles/css/dialogList.css +11 -0
- package/styles/css/dialogList.css.map +1 -1
- package/styles/css/header.css.map +1 -1
- package/styles/css/list.css +10 -0
- package/styles/css/list.css.map +1 -1
- package/styles/css/main.css +46 -7
- package/styles/css/main.css.map +1 -1
- package/styles/css/menu.css +10 -0
- package/styles/css/menu.css.map +1 -1
- package/styles/css/recurrenceForm.css +3 -0
- package/styles/css/recurrenceForm.css.map +1 -1
- package/styles/css/shareDialogSelectControl.css.map +1 -1
- package/styles/css/timepicker.css +8 -0
- package/styles/css/timepicker.css.map +1 -1
- package/styles/scss/dialogList.scss +13 -1
- package/styles/scss/header.scss +2 -4
- package/styles/scss/list.scss +11 -0
- package/styles/scss/recurrenceForm.scss +5 -0
- package/styles/scss/shareDialogSelectControl.scss +0 -1
- package/styles/scss/timepicker.scss +10 -1
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuGroupItemComponent.d.ts +0 -7
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuGroupItemComponent.d.ts.map +0 -1
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuHeaderComponent.d.ts +0 -9
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuHeaderComponent.d.ts.map +0 -1
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuHeaderComponent.js +0 -39
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuHeaderComponent.js.map +0 -1
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuInteractiveItemComponent.d.ts +0 -11
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuInteractiveItemComponent.d.ts.map +0 -1
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuInteractiveItemComponent.js.map +0 -1
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuStaticItemComponent.d.ts +0 -8
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuStaticItemComponent.d.ts.map +0 -1
- package/esm/@ui/UiMenu/defaults/DefaultUiMenuStaticItemComponent.js.map +0 -1
package/esm/@ui/@types/size.d.ts
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../../../src/@ui/@types/size.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../../../src/@ui/@types/size.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;AAElC;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,CAAC;AAEhC;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;AAElC;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,CAAC"}
|
package/esm/@ui/@types/size.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"size.js","sourceRoot":"","sources":["../../../src/@ui/@types/size.ts"],"names":[],"mappings":""}
|
1
|
+
{"version":3,"file":"size.js","sourceRoot":"","sources":["../../../src/@ui/@types/size.ts"],"names":[],"mappings":"AAAA,qCAAqC"}
|
@@ -1,29 +1,61 @@
|
|
1
|
-
|
1
|
+
import React from "react";
|
2
2
|
/**
|
3
3
|
* @internal
|
4
4
|
*/
|
5
|
-
export
|
6
|
-
|
5
|
+
export interface IHandleActionOptions {
|
6
|
+
shouldPreventDefault?: boolean;
|
7
|
+
shouldStopPropagation?: boolean;
|
8
|
+
}
|
9
|
+
/**
|
10
|
+
* @internal
|
11
|
+
*/
|
12
|
+
export declare const modifierNegator: "!";
|
13
|
+
/**
|
14
|
+
* @internal
|
15
|
+
*/
|
16
|
+
export type IModifier = React.ModifierKey | `${typeof modifierNegator}${React.ModifierKey}`;
|
17
|
+
/**
|
18
|
+
* @internal
|
19
|
+
*/
|
20
|
+
export declare const makeKeyboardNavigation: <ActionKeysMap extends {
|
21
|
+
[action: string]: {
|
22
|
+
code: string | string[];
|
23
|
+
modifiers?: IModifier[];
|
24
|
+
}[];
|
25
|
+
}>(actionKeysMap: ActionKeysMap) => <T extends KeyboardEvent | React.KeyboardEvent<Element> = React.KeyboardEvent<Element>>(handlers: { [action in keyof ActionKeysMap | "onUnhandledKeyDown"]?: (event: T) => void; }, options?: IHandleActionOptions) => (event: T) => void;
|
26
|
+
/**
|
27
|
+
* @internal
|
28
|
+
*/
|
29
|
+
export declare const makeMenuKeyboardNavigation: <T extends KeyboardEvent | React.KeyboardEvent<Element> = React.KeyboardEvent<Element>>(handlers: {
|
30
|
+
onSelect?: (event: T) => void;
|
31
|
+
onClose?: (event: T) => void;
|
7
32
|
onFocusPrevious?: (event: T) => void;
|
33
|
+
onFocusNext?: (event: T) => void;
|
8
34
|
onFocusFirst?: (event: T) => void;
|
9
35
|
onFocusLast?: (event: T) => void;
|
10
36
|
onEnterLevel?: (event: T) => void;
|
11
37
|
onLeaveLevel?: (event: T) => void;
|
38
|
+
onUnhandledKeyDown?: (event: T) => void;
|
39
|
+
}, options?: IHandleActionOptions) => (event: T) => void;
|
40
|
+
/**
|
41
|
+
* @internal
|
42
|
+
*/
|
43
|
+
export declare const makeLinearKeyboardNavigation: <T extends KeyboardEvent | React.KeyboardEvent<Element> = React.KeyboardEvent<Element>>(handlers: {
|
12
44
|
onSelect?: (event: T) => void;
|
13
45
|
onClose?: (event: T) => void;
|
46
|
+
onFocusPrevious?: (event: T) => void;
|
47
|
+
onFocusNext?: (event: T) => void;
|
48
|
+
onFocusFirst?: (event: T) => void;
|
49
|
+
onFocusLast?: (event: T) => void;
|
14
50
|
onUnhandledKeyDown?: (event: T) => void;
|
15
|
-
|
16
|
-
shouldStopPropagation?: boolean;
|
17
|
-
}) => (event: T) => void;
|
51
|
+
}, options?: IHandleActionOptions) => (event: T) => void;
|
18
52
|
/**
|
19
53
|
* @internal
|
20
54
|
*/
|
21
|
-
export declare const makeDialogKeyboardNavigation: <T extends KeyboardEvent |
|
22
|
-
onFocusNext?: (event: T) => void;
|
23
|
-
onFocusPrevious?: (event: T) => void;
|
55
|
+
export declare const makeDialogKeyboardNavigation: <T extends KeyboardEvent | React.KeyboardEvent<Element> = React.KeyboardEvent<Element>>(handlers: {
|
24
56
|
onClose?: (event: T) => void;
|
57
|
+
onFocusPrevious?: (event: T) => void;
|
58
|
+
onFocusNext?: (event: T) => void;
|
25
59
|
onUnhandledKeyDown?: (event: T) => void;
|
26
|
-
|
27
|
-
shouldStopPropagation?: boolean;
|
28
|
-
}) => (event: T) => void;
|
60
|
+
}, options?: IHandleActionOptions) => (event: T) => void;
|
29
61
|
//# 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":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACnC;AAqBD;;GAEG;AACH,eAAO,MAAM,eAAe,KAAe,CAAC;AAC5C;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,GAAG,GAAG,OAAO,eAAe,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;AAE5F;;GAEG;AACH,eAAO,MAAM,sBAAsB;;cAC0B,MAAM,GAAG,MAAM,EAAE;oBAAc,SAAS,EAAE;;+MAIZ,IAAI,eAC9E,oBAAoB,uBAqChC,CAAC;AAEN;;GAEG;AACH,eAAO,MAAM,0BAA0B;6BA3CoD,IAAI;4BAAJ,IAAI;oCAAJ,IAAI;gCAAJ,IAAI;iCAAJ,IAAI;gCAAJ,IAAI;iCAAJ,IAAI;iCAAJ,IAAI;uCAAJ,IAAI;aAC9E,oBAAoB,uBAmDnC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,4BAA4B;6BAzDkD,IAAI;4BAAJ,IAAI;oCAAJ,IAAI;gCAAJ,IAAI;iCAAJ,IAAI;gCAAJ,IAAI;uCAAJ,IAAI;aAC9E,oBAAoB,uBA+DnC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,4BAA4B;4BArEkD,IAAI;oCAAJ,IAAI;gCAAJ,IAAI;uCAAJ,IAAI;aAC9E,oBAAoB,uBAwEnC,CAAC"}
|
@@ -11,79 +11,69 @@ const handleAction = (event, action, { shouldPreventDefault = true, shouldStopPr
|
|
11
11
|
}
|
12
12
|
action(event);
|
13
13
|
};
|
14
|
-
const handleActionEvent = (event, shouldPreventDefault, shouldStopPropagation) => {
|
15
|
-
return (action) => {
|
16
|
-
handleAction(event, action, { shouldPreventDefault, shouldStopPropagation });
|
17
|
-
};
|
18
|
-
};
|
19
14
|
/**
|
20
15
|
* @internal
|
21
16
|
*/
|
22
|
-
export const
|
23
|
-
return (event) => {
|
24
|
-
const handleAction = handleActionEvent(event, shouldPreventDefault, shouldStopPropagation);
|
25
|
-
switch (event.code) {
|
26
|
-
case "ArrowDown":
|
27
|
-
handleAction(onFocusNext);
|
28
|
-
break;
|
29
|
-
case "ArrowUp":
|
30
|
-
handleAction(onFocusPrevious);
|
31
|
-
break;
|
32
|
-
case "ArrowLeft":
|
33
|
-
handleAction(onLeaveLevel);
|
34
|
-
break;
|
35
|
-
case "ArrowRight":
|
36
|
-
handleAction(onEnterLevel);
|
37
|
-
break;
|
38
|
-
case "Home":
|
39
|
-
handleAction(onFocusFirst);
|
40
|
-
break;
|
41
|
-
case "End":
|
42
|
-
handleAction(onFocusLast);
|
43
|
-
break;
|
44
|
-
case "Enter":
|
45
|
-
case "Space":
|
46
|
-
handleAction(onSelect);
|
47
|
-
break;
|
48
|
-
case "Escape":
|
49
|
-
handleAction(onClose);
|
50
|
-
break;
|
51
|
-
default:
|
52
|
-
onUnhandledKeyDown?.(event);
|
53
|
-
break;
|
54
|
-
}
|
55
|
-
};
|
56
|
-
};
|
17
|
+
export const modifierNegator = "!";
|
57
18
|
/**
|
58
19
|
* @internal
|
59
20
|
*/
|
60
|
-
export const
|
21
|
+
export const makeKeyboardNavigation = (actionKeysMap) => (handlers, options = {}) => {
|
61
22
|
return (event) => {
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
break;
|
83
|
-
default:
|
84
|
-
onUnhandledKeyDown?.(event);
|
85
|
-
break;
|
23
|
+
const actionName = Object.entries(actionKeysMap).find(([, keySpecs]) => keySpecs.some((spec) => {
|
24
|
+
if ((typeof spec.code === "string" && spec.code !== event.code) ||
|
25
|
+
(Array.isArray(spec.code) && !spec.code.includes(event.code))) {
|
26
|
+
return false;
|
27
|
+
}
|
28
|
+
if (!spec.modifiers) {
|
29
|
+
return true;
|
30
|
+
}
|
31
|
+
return spec.modifiers.every((fullModifier) => {
|
32
|
+
const shouldBePressed = !fullModifier.startsWith(modifierNegator);
|
33
|
+
const modifier = shouldBePressed
|
34
|
+
? fullModifier
|
35
|
+
: fullModifier.substring(modifierNegator.length);
|
36
|
+
return event.getModifierState(modifier) === shouldBePressed;
|
37
|
+
});
|
38
|
+
}))?.[0];
|
39
|
+
const actionHandler = actionName === undefined ? undefined : handlers[actionName];
|
40
|
+
if (!actionHandler) {
|
41
|
+
handlers.onUnhandledKeyDown?.(event);
|
42
|
+
return;
|
86
43
|
}
|
44
|
+
handleAction(event, actionHandler, options);
|
87
45
|
};
|
88
46
|
};
|
47
|
+
/**
|
48
|
+
* @internal
|
49
|
+
*/
|
50
|
+
export const makeMenuKeyboardNavigation = makeKeyboardNavigation({
|
51
|
+
onFocusPrevious: [{ code: "ArrowUp" }],
|
52
|
+
onFocusNext: [{ code: "ArrowDown" }],
|
53
|
+
onFocusFirst: [{ code: "Home" }],
|
54
|
+
onFocusLast: [{ code: "End" }],
|
55
|
+
onEnterLevel: [{ code: ["ArrowRight", "F2"] }],
|
56
|
+
onLeaveLevel: [{ code: "ArrowLeft" }],
|
57
|
+
onSelect: [{ code: ["Enter", "Space"] }],
|
58
|
+
onClose: [{ code: "Escape" }],
|
59
|
+
});
|
60
|
+
/**
|
61
|
+
* @internal
|
62
|
+
*/
|
63
|
+
export const makeLinearKeyboardNavigation = makeKeyboardNavigation({
|
64
|
+
onFocusPrevious: [{ code: ["ArrowUp", "ArrowLeft"] }],
|
65
|
+
onFocusNext: [{ code: ["ArrowDown", "ArrowRight"] }],
|
66
|
+
onFocusFirst: [{ code: "Home" }],
|
67
|
+
onFocusLast: [{ code: "End" }],
|
68
|
+
onSelect: [{ code: ["Enter", "Space"] }],
|
69
|
+
onClose: [{ code: "Escape" }],
|
70
|
+
});
|
71
|
+
/**
|
72
|
+
* @internal
|
73
|
+
*/
|
74
|
+
export const makeDialogKeyboardNavigation = makeKeyboardNavigation({
|
75
|
+
onFocusNext: [{ code: "Tab", modifiers: ["!Shift"] }],
|
76
|
+
onFocusPrevious: [{ code: "Tab", modifiers: ["Shift"] }],
|
77
|
+
onClose: [{ code: "Escape" }],
|
78
|
+
});
|
89
79
|
//# sourceMappingURL=keyboardNavigation.js.map
|
@@ -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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"}
|
@@ -3,6 +3,12 @@ import { IconType } from "../@types/icon.js";
|
|
3
3
|
import { SizeLarge, SizeMedium, SizeSmall } from "../@types/size.js";
|
4
4
|
import { VariantDanger, VariantPopOut, VariantPrimary, VariantSecondary, VariantTertiary } from "../@types/variant.js";
|
5
5
|
import { IAccessibilityConfigBase } from "../../typings/accessibility.js";
|
6
|
+
/**
|
7
|
+
* @internal
|
8
|
+
*/
|
9
|
+
export interface IUiButtonAccessibilityConfig extends IAccessibilityConfigBase {
|
10
|
+
iconAriaHidden?: boolean;
|
11
|
+
}
|
6
12
|
/**
|
7
13
|
* @internal
|
8
14
|
*/
|
@@ -17,7 +23,8 @@ export interface UiButtonProps {
|
|
17
23
|
tooltip?: React.ReactNode;
|
18
24
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
19
25
|
dataId?: string;
|
20
|
-
|
26
|
+
dataTestId?: string;
|
27
|
+
accessibilityConfig?: IUiButtonAccessibilityConfig;
|
21
28
|
}
|
22
29
|
/**
|
23
30
|
* @internal
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"UiButton.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiButton/UiButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EACH,aAAa,EACb,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,eAAe,EAClB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;
|
1
|
+
{"version":3,"file":"UiButton.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiButton/UiButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EACH,aAAa,EACb,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,eAAe,EAClB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAG1E;;GAEG;AACH,MAAM,WAAW,4BAA6B,SAAQ,wBAAwB;IAC1E,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC1B,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,OAAO,CAAC,EAAE,cAAc,GAAG,gBAAgB,GAAG,eAAe,GAAG,aAAa,GAAG,aAAa,CAAC;IAC9F,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,4BAA4B,CAAC;CACtD;AAQD;;GAEG;AACH,eAAO,MAAM,QAAQ,yFAwDpB,CAAC"}
|
@@ -2,18 +2,23 @@
|
|
2
2
|
import React, { forwardRef } from "react";
|
3
3
|
import { bem } from "../@utils/bem.js";
|
4
4
|
import { UiIcon } from "../UiIcon/UiIcon.js";
|
5
|
+
import { stringUtils } from "@gooddata/util";
|
5
6
|
const { b, e } = bem("gd-ui-kit-button");
|
7
|
+
const getGeneratedTestId = (label, ariaLabel) => {
|
8
|
+
return ariaLabel ? `${stringUtils.simplifyText(ariaLabel)}` : `${stringUtils.simplifyText(label)}`;
|
9
|
+
};
|
6
10
|
/**
|
7
11
|
* @internal
|
8
12
|
*/
|
9
|
-
export const UiButton = forwardRef(({ size = "medium", variant = "secondary", label, isDisabled, isLoading, iconBefore, iconAfter, onClick, dataId, accessibilityConfig, }, ref) => {
|
13
|
+
export const UiButton = forwardRef(({ size = "medium", variant = "secondary", label, isDisabled, isLoading, iconBefore, iconAfter, onClick, dataId, dataTestId, accessibilityConfig, }, ref) => {
|
10
14
|
const iconSize = size === "small" ? 16 : 18;
|
11
15
|
const hasIconBefore = !!iconBefore;
|
12
16
|
const hasIconAfter = !!iconAfter;
|
13
|
-
|
14
|
-
|
17
|
+
const testId = dataTestId ? dataTestId : getGeneratedTestId(label, accessibilityConfig?.ariaLabel);
|
18
|
+
return (React.createElement("button", { ref: ref, className: b({ size, variant, isLoading, hasIconBefore, hasIconAfter }), disabled: isDisabled, tabIndex: 0, onClick: onClick, "data-id": dataId, "data-testid": testId, "aria-label": accessibilityConfig?.ariaLabel, "aria-labelledby": accessibilityConfig?.ariaLabelledBy, "aria-describedby": accessibilityConfig?.ariaDescribedBy, "aria-expanded": accessibilityConfig?.ariaExpanded, role: accessibilityConfig?.role },
|
19
|
+
iconBefore ? (React.createElement(UiIcon, { type: iconBefore, size: iconSize, ariaHidden: accessibilityConfig?.iconAriaHidden })) : null,
|
15
20
|
React.createElement("span", { className: e("text") }, label),
|
16
|
-
iconAfter ? React.createElement(UiIcon, { type: iconAfter, size: iconSize }) : null));
|
21
|
+
iconAfter ? (React.createElement(UiIcon, { type: iconAfter, size: iconSize, ariaHidden: accessibilityConfig?.iconAriaHidden })) : null));
|
17
22
|
});
|
18
23
|
UiButton.displayName = "UiButton";
|
19
24
|
//# sourceMappingURL=UiButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"UiButton.js","sourceRoot":"","sources":["../../../src/@ui/UiButton/UiButton.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AAErC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAU1C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;
|
1
|
+
{"version":3,"file":"UiButton.js","sourceRoot":"","sources":["../../../src/@ui/UiButton/UiButton.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AAErC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAU1C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AA2B7C,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,GAAG,CAAC,kBAAkB,CAAC,CAAC;AAEzC,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAE,SAAiB,EAAE,EAAE;IAC5D,OAAO,SAAS,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC;AACvG,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAC9B,CACI,EACI,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,WAAW,EACrB,KAAK,EACL,UAAU,EACV,SAAS,EACT,UAAU,EACV,SAAS,EACT,OAAO,EACP,MAAM,EACN,UAAU,EACV,mBAAmB,GACtB,EACD,GAAG,EACL,EAAE;IACA,MAAM,QAAQ,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5C,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,CAAC;IACnC,MAAM,YAAY,GAAG,CAAC,CAAC,SAAS,CAAC;IAEjC,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,EAAE,mBAAmB,EAAE,SAAS,CAAC,CAAC;IAEnG,OAAO,CACH,gCACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC,EACvE,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,OAAO,aACP,MAAM,iBACF,MAAM,gBACP,mBAAmB,EAAE,SAAS,qBACzB,mBAAmB,EAAE,cAAc,sBAClC,mBAAmB,EAAE,eAAe,mBACvC,mBAAmB,EAAE,YAAY,EAChD,IAAI,EAAE,mBAAmB,EAAE,IAAI;QAE9B,UAAU,CAAC,CAAC,CAAC,CACV,oBAAC,MAAM,IACH,IAAI,EAAE,UAAU,EAChB,IAAI,EAAE,QAAQ,EACd,UAAU,EAAE,mBAAmB,EAAE,cAAc,GACjD,CACL,CAAC,CAAC,CAAC,IAAI;QACR,8BAAM,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,IAAG,KAAK,CAAQ;QACzC,SAAS,CAAC,CAAC,CAAC,CACT,oBAAC,MAAM,IACH,IAAI,EAAE,SAAS,EACf,IAAI,EAAE,QAAQ,EACd,UAAU,EAAE,mBAAmB,EAAE,cAAc,GACjD,CACL,CAAC,CAAC,CAAC,IAAI,CACH,CACZ,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}
|
@@ -20,10 +20,12 @@ export interface UiChipProps {
|
|
20
20
|
iconBefore?: IconType;
|
21
21
|
onClick?: () => void;
|
22
22
|
onDelete?: () => void;
|
23
|
+
onDeleteKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
|
23
24
|
accessibilityConfig?: IUiChipAccessibilityConfig;
|
25
|
+
dataTestId?: string;
|
24
26
|
}
|
25
27
|
/**
|
26
28
|
* @internal
|
27
29
|
*/
|
28
|
-
export declare const UiChip: ({ label, tag, isDeletable, isActive, isLocked, iconBefore, onClick, onDelete, accessibilityConfig, }: UiChipProps) => React.JSX.Element;
|
30
|
+
export declare const UiChip: ({ label, tag, isDeletable, isActive, isLocked, iconBefore, onClick, onDelete, onDeleteKeyDown, accessibilityConfig, dataTestId, }: UiChipProps) => React.JSX.Element;
|
29
31
|
//# sourceMappingURL=UiChip.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"UiChip.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiChip/UiChip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,kCAAkC,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI7C;;GAEG;AACH,MAAM,WAAW,0BACb,SAAQ,wBAAwB,EAC5B,kCAAkC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,mBAAmB,CAAC,EAAE,0BAA0B,CAAC;
|
1
|
+
{"version":3,"file":"UiChip.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiChip/UiChip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,kCAAkC,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI7C;;GAEG;AACH,MAAM,WAAW,0BACb,SAAQ,wBAAwB,EAC5B,kCAAkC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1E,mBAAmB,CAAC,EAAE,0BAA0B,CAAC;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAID;;GAEG;AACH,eAAO,MAAM,MAAM,sIAYhB,WAAW,sBAwEb,CAAC"}
|
package/esm/@ui/UiChip/UiChip.js
CHANGED
@@ -6,7 +6,7 @@ const { b, e } = bem("gd-ui-kit-chip");
|
|
6
6
|
/**
|
7
7
|
* @internal
|
8
8
|
*/
|
9
|
-
export const UiChip = ({ label, tag, isDeletable = false, isActive = false, isLocked = false, iconBefore, onClick, onDelete, accessibilityConfig, }) => {
|
9
|
+
export const UiChip = ({ label, tag, isDeletable = false, isActive = false, isLocked = false, iconBefore, onClick, onDelete, onDeleteKeyDown, accessibilityConfig, dataTestId, }) => {
|
10
10
|
const buttonRef = useRef(null);
|
11
11
|
const [styleObj, setStyleObj] = useState();
|
12
12
|
useLayoutEffect(() => {
|
@@ -24,7 +24,7 @@ export const UiChip = ({ label, tag, isDeletable = false, isActive = false, isLo
|
|
24
24
|
...(isExpanded !== undefined ? { "aria-expanded": isExpanded } : {}),
|
25
25
|
};
|
26
26
|
return (React.createElement("div", { className: b() },
|
27
|
-
React.createElement("button", { "aria-expanded": isActive, className: e("trigger", { isDeletable, isActive, isLocked }), disabled: isLocked, onClick: onClick, style: { ...styleObj }, ref: buttonRef, "aria-disabled": isLocked, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...ariaDropdownProps },
|
27
|
+
React.createElement("button", { "data-testid": dataTestId, "aria-expanded": isActive, className: e("trigger", { isDeletable, isActive, isLocked }), disabled: isLocked, onClick: onClick, style: { ...styleObj }, ref: buttonRef, "aria-disabled": isLocked, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...ariaDropdownProps },
|
28
28
|
iconBefore ? (React.createElement("span", { className: e("icon-before") },
|
29
29
|
React.createElement(UiIcon, { type: iconBefore, color: "primary", size: 15, ariaHidden: true }))) : null,
|
30
30
|
React.createElement("span", { className: e("label") }, label),
|
@@ -32,7 +32,7 @@ export const UiChip = ({ label, tag, isDeletable = false, isActive = false, isLo
|
|
32
32
|
isLocked ? (React.createElement("span", { className: e("icon-lock") },
|
33
33
|
React.createElement(UiIcon, { type: "lock", color: "complementary-6", size: 14, ariaHidden: true }))) : (React.createElement("span", { className: e("icon-chevron", { isActive }) },
|
34
34
|
React.createElement(UiIcon, { type: isActive ? "chevronUp" : "chevronDown", color: "complementary-7", size: 8, ariaHidden: true })))),
|
35
|
-
isDeletable ? (React.createElement("button", { "aria-label": deleteAriaLabel, className: e("delete"), onClick: onDelete },
|
35
|
+
isDeletable ? (React.createElement("button", { "data-testid": dataTestId ? `${dataTestId}-delete-button` : undefined, "aria-label": deleteAriaLabel, className: e("delete"), onClick: onDelete, onKeyDown: onDeleteKeyDown },
|
36
36
|
React.createElement("span", { className: e("icon-delete") },
|
37
37
|
React.createElement(UiIcon, { type: "cross", color: "complementary-6", size: 14, ariaHidden: true })))) : null));
|
38
38
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"UiChip.js","sourceRoot":"","sources":["../../../src/@ui/UiChip/UiChip.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,KAAK,EAAE,EAAiB,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIhF,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;
|
1
|
+
{"version":3,"file":"UiChip.js","sourceRoot":"","sources":["../../../src/@ui/UiChip/UiChip.tsx"],"names":[],"mappings":"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"}
|
@@ -1 +1 @@
|
|
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,
|
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,CA6FlD,CAAC"}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
// (C) 2025 GoodData Corporation
|
2
2
|
import React, { useEffect, useRef, useCallback } from "react";
|
3
3
|
import { makeDialogKeyboardNavigation } from "../@utils/keyboardNavigation.js";
|
4
|
-
import { getFocusableElements } from "../../utils/domUtilities.js";
|
4
|
+
import { getFocusableElements, isElementTextInput } from "../../utils/domUtilities.js";
|
5
5
|
/**
|
6
6
|
* Attempts to find a truly focusable element by trying subsequent elements in the focusable elements collection
|
7
7
|
* This is useful when some elements are focusable but not reachable (e.g., out of viewport or disabled)
|
@@ -112,6 +112,9 @@ export const UiFocusTrap = ({ children, onDeactivate, returnFocusTo: returnFocus
|
|
112
112
|
// Do not change focus, if the focused element is already inside the trap
|
113
113
|
return;
|
114
114
|
}
|
115
|
+
if (isElementTextInput(document.activeElement)) {
|
116
|
+
return;
|
117
|
+
}
|
115
118
|
if (initialFocus) {
|
116
119
|
if (typeof initialFocus === "string") {
|
117
120
|
const element = document.getElementById(initialFocus);
|
@@ -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,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;
|
1
|
+
{"version":3,"file":"UiFocusTrap.js","sourceRoot":"","sources":["../../../src/@ui/UiFocusTrap/UiFocusTrap.tsx"],"names":[],"mappings":"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"}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { IconType } from "../@types/icon.js";
|
3
|
-
import { SizeLarge, SizeMedium, SizeSmall } from "../@types/size.js";
|
3
|
+
import { SizeLarge, SizeMedium, SizeSmall, SizeXSmall } from "../@types/size.js";
|
4
4
|
import { VariantDanger, VariantPopOut, VariantPrimary, VariantSecondary, VariantTertiary } from "../@types/variant.js";
|
5
5
|
/**
|
6
6
|
* @internal
|
@@ -8,11 +8,12 @@ import { VariantDanger, VariantPopOut, VariantPrimary, VariantSecondary, Variant
|
|
8
8
|
export interface UiIconButtonProps {
|
9
9
|
icon: IconType;
|
10
10
|
label: string;
|
11
|
-
size?: SizeSmall | SizeMedium | SizeLarge;
|
11
|
+
size?: SizeXSmall | SizeSmall | SizeMedium | SizeLarge;
|
12
12
|
variant?: VariantPrimary | VariantSecondary | VariantTertiary | VariantPopOut | VariantDanger;
|
13
13
|
isDisabled?: boolean;
|
14
14
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
15
15
|
dataId?: string;
|
16
|
+
dataTestId?: string;
|
16
17
|
}
|
17
18
|
/**
|
18
19
|
* @internal
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"UiIconButton.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiIconButton/UiIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;
|
1
|
+
{"version":3,"file":"UiIconButton.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiIconButton/UiIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACjF,OAAO,EACH,aAAa,EACb,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,eAAe,EAClB,MAAM,sBAAsB,CAAC;AAK9B;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAC9B,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACvD,OAAO,CAAC,EAAE,cAAc,GAAG,gBAAgB,GAAG,eAAe,GAAG,aAAa,GAAG,aAAa,CAAC;IAC9F,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAmBD;;GAEG;AACH,eAAO,MAAM,YAAY,6FAgCxB,CAAC"}
|
@@ -2,13 +2,36 @@
|
|
2
2
|
import React, { forwardRef } from "react";
|
3
3
|
import { bem } from "../@utils/bem.js";
|
4
4
|
import { UiIcon } from "../UiIcon/UiIcon.js";
|
5
|
+
import { stringUtils } from "@gooddata/util";
|
5
6
|
const { b } = bem("gd-ui-kit-icon-button");
|
7
|
+
const getSize = (size) => {
|
8
|
+
switch (size) {
|
9
|
+
case "xsmall":
|
10
|
+
return 12;
|
11
|
+
case "small":
|
12
|
+
return 16;
|
13
|
+
case "medium":
|
14
|
+
return 18;
|
15
|
+
case "large":
|
16
|
+
return 20;
|
17
|
+
default:
|
18
|
+
return 18;
|
19
|
+
}
|
20
|
+
};
|
6
21
|
/**
|
7
22
|
* @internal
|
8
23
|
*/
|
9
|
-
export const UiIconButton = forwardRef(({ icon, label, size = "medium", variant = "secondary", isDisabled, onClick, dataId }, ref) => {
|
10
|
-
const iconSize = size
|
11
|
-
|
24
|
+
export const UiIconButton = forwardRef(({ icon, label, size = "medium", variant = "secondary", isDisabled, onClick, dataId, dataTestId }, ref) => {
|
25
|
+
const iconSize = getSize(size);
|
26
|
+
const onClickHandler = (e) => {
|
27
|
+
if (isDisabled) {
|
28
|
+
e.preventDefault();
|
29
|
+
return;
|
30
|
+
}
|
31
|
+
onClick?.(e);
|
32
|
+
};
|
33
|
+
const testId = dataTestId ? dataTestId : `${stringUtils.simplifyText(label)}`;
|
34
|
+
return (React.createElement("button", { ref: ref, "aria-label": label, className: b({ size, variant }), disabled: isDisabled, "aria-disabled": isDisabled, onClick: onClickHandler, "data-id": dataId, "data-testid": testId },
|
12
35
|
React.createElement(UiIcon, { type: icon, size: iconSize, ariaHidden: true })));
|
13
36
|
});
|
14
37
|
UiIconButton.displayName = "UiIconButton";
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"UiIconButton.js","sourceRoot":"","sources":["../../../src/@ui/UiIconButton/UiIconButton.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AAErC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAU1C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;
|
1
|
+
{"version":3,"file":"UiIconButton.js","sourceRoot":"","sources":["../../../src/@ui/UiIconButton/UiIconButton.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AAErC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAU1C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAgB7C,MAAM,EAAE,CAAC,EAAE,GAAG,GAAG,CAAC,uBAAuB,CAAC,CAAC;AAE3C,MAAM,OAAO,GAAG,CAAC,IAAqD,EAAE,EAAE;IACtE,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,QAAQ;YACT,OAAO,EAAE,CAAC;QACd,KAAK,OAAO;YACR,OAAO,EAAE,CAAC;QACd,KAAK,QAAQ;YACT,OAAO,EAAE,CAAC;QACd,KAAK,OAAO;YACR,OAAO,EAAE,CAAC;QACd;YACI,OAAO,EAAE,CAAC;IAClB,CAAC;AACL,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CAClC,CACI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,GAAG,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,EAChG,GAAG,EACL,EAAE;IACA,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE/B,MAAM,cAAc,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,IAAI,UAAU,EAAE,CAAC;YACb,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO;QACX,CAAC;QACD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC;IAE9E,OAAO,CACH,gCACI,GAAG,EAAE,GAAG,gBACI,KAAK,EACjB,SAAS,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAC/B,QAAQ,EAAE,UAAU,mBACL,UAAU,EACzB,OAAO,EAAE,cAAc,aACd,MAAM,iBACF,MAAM;QAEnB,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,SAAG,CAC5C,CACZ,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}
|
@@ -7,5 +7,5 @@ import { UiListboxProps } from "./types.js";
|
|
7
7
|
*
|
8
8
|
* @internal
|
9
9
|
*/
|
10
|
-
export declare function UiListbox<InteractiveItemData, StaticItemData>({ items, className, itemClassName, maxWidth, onSelect, onClose, onUnhandledKeyDown, selectedItemId, InteractiveItemComponent, StaticItemComponent, shouldKeyboardActionPreventDefault, shouldKeyboardActionStopPropagation, shouldCloseOnSelect, isDisabledFocusable, ariaAttributes, }: UiListboxProps<InteractiveItemData, StaticItemData>): React.ReactNode;
|
10
|
+
export declare function UiListbox<InteractiveItemData, StaticItemData>({ items, className, itemClassName, maxWidth, maxHeight, onSelect, onClose, onUnhandledKeyDown, selectedItemId, InteractiveItemComponent, StaticItemComponent, shouldKeyboardActionPreventDefault, shouldKeyboardActionStopPropagation, shouldCloseOnSelect, isDisabledFocusable, ariaAttributes, }: UiListboxProps<InteractiveItemData, StaticItemData>): React.ReactNode;
|
11
11
|
//# sourceMappingURL=UiListbox.d.ts.map
|
@@ -1 +1 @@
|
|
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,
|
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,EACR,SAAS,EACT,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,CA6KvE"}
|
@@ -14,7 +14,7 @@ import { DefaultUiListboxStaticItemComponent } from "./defaults/DefaultUiListbox
|
|
14
14
|
*
|
15
15
|
* @internal
|
16
16
|
*/
|
17
|
-
export function UiListbox({ items, className, itemClassName, maxWidth, onSelect, onClose, onUnhandledKeyDown = firstCharacterSearch, selectedItemId, InteractiveItemComponent = DefaultUiListboxInteractiveItemComponent, StaticItemComponent = DefaultUiListboxStaticItemComponent, shouldKeyboardActionPreventDefault, shouldKeyboardActionStopPropagation, shouldCloseOnSelect = true, isDisabledFocusable = false, ariaAttributes, }) {
|
17
|
+
export function UiListbox({ items, className, itemClassName, maxWidth, maxHeight, onSelect, onClose, onUnhandledKeyDown = firstCharacterSearch, selectedItemId, InteractiveItemComponent = DefaultUiListboxInteractiveItemComponent, StaticItemComponent = DefaultUiListboxStaticItemComponent, shouldKeyboardActionPreventDefault, shouldKeyboardActionStopPropagation, shouldCloseOnSelect = true, isDisabledFocusable = false, ariaAttributes, }) {
|
18
18
|
const isItemFocusable = React.useCallback((item) => {
|
19
19
|
if (!item || item.type !== "interactive") {
|
20
20
|
return false;
|
@@ -63,8 +63,6 @@ export function UiListbox({ items, className, itemClassName, maxWidth, onSelect,
|
|
63
63
|
isItemFocusable,
|
64
64
|
});
|
65
65
|
const handleKeyDown = React.useMemo(() => makeMenuKeyboardNavigation({
|
66
|
-
shouldPreventDefault: shouldKeyboardActionPreventDefault,
|
67
|
-
shouldStopPropagation: shouldKeyboardActionStopPropagation,
|
68
66
|
onFocusPrevious: () => {
|
69
67
|
setFocusedIndex((prevIndex) => {
|
70
68
|
let newIndex = (prevIndex ?? 0) - 1;
|
@@ -103,12 +101,13 @@ export function UiListbox({ items, className, itemClassName, maxWidth, onSelect,
|
|
103
101
|
onSelect: () => {
|
104
102
|
focusedItem && focusedItem.type === "interactive" && handleSelectItem(focusedItem);
|
105
103
|
},
|
106
|
-
onClose
|
107
|
-
onClose?.();
|
108
|
-
},
|
104
|
+
onClose,
|
109
105
|
onUnhandledKeyDown: (event) => {
|
110
106
|
onUnhandledKeyDown(event, contextRef.current);
|
111
107
|
},
|
108
|
+
}, {
|
109
|
+
shouldPreventDefault: shouldKeyboardActionPreventDefault,
|
110
|
+
shouldStopPropagation: shouldKeyboardActionStopPropagation,
|
112
111
|
}), [
|
113
112
|
contextRef,
|
114
113
|
focusedItem,
|
@@ -120,7 +119,7 @@ export function UiListbox({ items, className, itemClassName, maxWidth, onSelect,
|
|
120
119
|
shouldKeyboardActionPreventDefault,
|
121
120
|
shouldKeyboardActionStopPropagation,
|
122
121
|
]);
|
123
|
-
return (React.createElement("div", { className: cx(b(), className), style: { maxWidth } },
|
122
|
+
return (React.createElement("div", { className: cx(b(), className), style: { maxWidth, maxHeight } },
|
124
123
|
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 },
|
125
124
|
React.createElement(InteractiveItemComponent, { onSelect: () => {
|
126
125
|
handleSelectItem(item);
|