@gooddata/sdk-ui-kit 10.29.0-alpha.23 → 10.29.0-alpha.25
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/UiFocusTrap/UiFocusTrap.d.ts +4 -0
- package/esm/@ui/UiFocusTrap/UiFocusTrap.d.ts.map +1 -1
- package/esm/@ui/UiFocusTrap/UiFocusTrap.js +13 -34
- package/esm/@ui/UiFocusTrap/UiFocusTrap.js.map +1 -1
- package/esm/@ui/UiMenu/UiMenu.d.ts.map +1 -1
- package/esm/@ui/UiMenu/UiMenu.js +4 -3
- package/esm/@ui/UiMenu/UiMenu.js.map +1 -1
- package/esm/@ui/hooks/useListWithActionsKeyboardNavigation.d.ts +2 -1
- package/esm/@ui/hooks/useListWithActionsKeyboardNavigation.d.ts.map +1 -1
- package/esm/@ui/hooks/useListWithActionsKeyboardNavigation.js +24 -9
- package/esm/@ui/hooks/useListWithActionsKeyboardNavigation.js.map +1 -1
- package/esm/sdk-ui-kit.d.ts +29 -5
- package/esm/utils/domUtilities.d.ts +1 -1
- package/esm/utils/domUtilities.d.ts.map +1 -1
- package/esm/utils/domUtilities.js +4 -3
- package/esm/utils/domUtilities.js.map +1 -1
- package/esm/utils/useAutofocusOnMount.d.ts +20 -3
- package/esm/utils/useAutofocusOnMount.d.ts.map +1 -1
- package/esm/utils/useAutofocusOnMount.js +31 -24
- package/esm/utils/useAutofocusOnMount.js.map +1 -1
- package/package.json +8 -8
@@ -21,6 +21,10 @@ export interface UiFocusTrapProps {
|
|
21
21
|
* If not provided, the first focusable element will be focused.
|
22
22
|
*/
|
23
23
|
initialFocus?: React.RefObject<HTMLElement> | string;
|
24
|
+
/**
|
25
|
+
* You can retrigger focusing on `initialFocus` by changing the value of this key.
|
26
|
+
*/
|
27
|
+
refocusKey?: unknown;
|
24
28
|
/**
|
25
29
|
* Specify a custom keyboard navigation handler.
|
26
30
|
* If not provided, the default keyboard navigation handler will be used.
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"UiFocusTrap.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiFocusTrap/UiFocusTrap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAC;
|
1
|
+
{"version":3,"file":"UiFocusTrap.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiFocusTrap/UiFocusTrap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAQ9D;;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;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;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,CAoElD,CAAC"}
|
@@ -1,7 +1,9 @@
|
|
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
|
4
|
+
import { getFocusableElements } from "../../utils/domUtilities.js";
|
5
|
+
import { useAutofocusOnMount } from "../../utils/useAutofocusOnMount.js";
|
6
|
+
import { useCombineRefs } from "@gooddata/sdk-ui";
|
5
7
|
/**
|
6
8
|
* Attempts to find a truly focusable element by trying subsequent elements in the focusable elements collection
|
7
9
|
* This is useful when some elements are focusable but not reachable (e.g., out of viewport or disabled)
|
@@ -73,8 +75,9 @@ const useDialogKeyboardNavigation = (trapRef, returnFocus, onDeactivate) => {
|
|
73
75
|
/**
|
74
76
|
* @internal
|
75
77
|
*/
|
76
|
-
export const UiFocusTrap = ({ children, onDeactivate, returnFocusTo: returnFocusToProp, autofocusOnOpen = false, returnFocusOnUnmount = true, initialFocus, customKeyboardNavigationHandler, }) => {
|
78
|
+
export const UiFocusTrap = ({ children, onDeactivate, returnFocusTo: returnFocusToProp, autofocusOnOpen = false, returnFocusOnUnmount = true, initialFocus, refocusKey, customKeyboardNavigationHandler, }) => {
|
77
79
|
const trapRef = useRef(null);
|
80
|
+
const [trapElement, setTrapElement] = React.useState(null);
|
78
81
|
const defaultReturnFocusToRef = useRef(document.activeElement);
|
79
82
|
const returnFocusTo = returnFocusToProp ?? defaultReturnFocusToRef;
|
80
83
|
const returnFocus = useCallback(() => {
|
@@ -103,43 +106,19 @@ export const UiFocusTrap = ({ children, onDeactivate, returnFocusTo: returnFocus
|
|
103
106
|
}
|
104
107
|
};
|
105
108
|
}, [returnFocusOnUnmount, returnFocus]);
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
return;
|
114
|
-
}
|
115
|
-
if (isElementTextInput(document.activeElement)) {
|
116
|
-
return;
|
117
|
-
}
|
118
|
-
if (initialFocus) {
|
119
|
-
if (typeof initialFocus === "string") {
|
120
|
-
const element = document.getElementById(initialFocus);
|
121
|
-
element?.focus();
|
122
|
-
return;
|
123
|
-
}
|
124
|
-
else if (initialFocus.current) {
|
125
|
-
initialFocus.current.focus();
|
126
|
-
return;
|
127
|
-
}
|
128
|
-
}
|
129
|
-
// Move focus to the first element in the trap at start
|
130
|
-
const { firstElement } = getFocusableElements(trapRef.current);
|
131
|
-
firstElement?.focus();
|
132
|
-
}, 100);
|
133
|
-
return () => {
|
134
|
-
clearTimeout(focusTrapTimeout);
|
135
|
-
};
|
136
|
-
}, [autofocusOnOpen, initialFocus, returnFocus, keyboardHandler, returnFocusOnUnmount]);
|
109
|
+
const elementToFocus = React.useMemo(() => {
|
110
|
+
if (typeof initialFocus === "string") {
|
111
|
+
return document.getElementById(initialFocus);
|
112
|
+
}
|
113
|
+
return initialFocus?.current ?? trapElement;
|
114
|
+
}, [initialFocus, trapElement]);
|
115
|
+
useAutofocusOnMount(elementToFocus, { isDisabled: !autofocusOnOpen, refocusKey });
|
137
116
|
useEffect(() => {
|
138
117
|
document.addEventListener("keydown", keyboardHandler);
|
139
118
|
return () => {
|
140
119
|
document.removeEventListener("keydown", keyboardHandler);
|
141
120
|
};
|
142
121
|
}, [keyboardHandler]);
|
143
|
-
return (React.createElement("div", { className: "gd-focus-trap", ref: trapRef }, children));
|
122
|
+
return (React.createElement("div", { className: "gd-focus-trap", ref: useCombineRefs(trapRef, setTrapElement) }, children));
|
144
123
|
};
|
145
124
|
//# 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,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAC;AAC/E,OAAO,EAAE,oBAAoB,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":"UiMenu.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiMenu/UiMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAa,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;
|
1
|
+
{"version":3,"file":"UiMenu.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiMenu/UiMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAa,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAkB1D;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,CAAC,SAAS,eAAe,GAAG,MAAM,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,EAChF,KAAK,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,GACzB,KAAK,CAAC,SAAS,CA+FjB"}
|
package/esm/@ui/UiMenu/UiMenu.js
CHANGED
@@ -5,11 +5,12 @@ import { b, e } from "./menuBem.js";
|
|
5
5
|
import { getContentItem, getSiblingItems } from "./itemUtils.js";
|
6
6
|
import { useCustomContentKeyNavigation, useKeyNavigation, useUiMenuContextValue } from "./hooks.js";
|
7
7
|
import { typedUiMenuContextStore } from "./context.js";
|
8
|
-
import {
|
8
|
+
import { AutofocusOnMount } from "../../utils/useAutofocusOnMount.js";
|
9
9
|
const ContentWrapper = (props) => {
|
10
|
+
return (
|
10
11
|
// autofocus always first element in the custom content for now
|
11
|
-
|
12
|
-
|
12
|
+
React.createElement(AutofocusOnMount, null,
|
13
|
+
React.createElement("div", { onKeyDown: props.keyboardNavigationHandler }, props.children)));
|
13
14
|
};
|
14
15
|
/**
|
15
16
|
* An accessible menu component that can be navigated by keyboard.
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"UiMenu.js","sourceRoot":"","sources":["../../../src/@ui/UiMenu/UiMenu.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,6BAA6B,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACpG,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,
|
1
|
+
{"version":3,"file":"UiMenu.js","sourceRoot":"","sources":["../../../src/@ui/UiMenu/UiMenu.tsx"],"names":[],"mappings":"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"}
|
@@ -6,12 +6,13 @@ export declare const SELECT_ITEM_ACTION = "selectItem";
|
|
6
6
|
/**
|
7
7
|
* @internal
|
8
8
|
*/
|
9
|
-
export declare function useListWithActionsKeyboardNavigation<Item, Action extends string>({ items, actionHandlers, getItemAdditionalActions, }: {
|
9
|
+
export declare function useListWithActionsKeyboardNavigation<Item, Action extends string>({ items, actionHandlers, getItemAdditionalActions, isNestedList, }: {
|
10
10
|
items: Item[];
|
11
11
|
actionHandlers: {
|
12
12
|
[key in Action | typeof SELECT_ITEM_ACTION]: (item: Item) => (() => void) | undefined;
|
13
13
|
};
|
14
14
|
getItemAdditionalActions: (item: Item) => Action[];
|
15
|
+
isNestedList?: boolean;
|
15
16
|
}): {
|
16
17
|
onKeyboardNavigation: (event: React.KeyboardEvent<Element>) => void;
|
17
18
|
onBlur: React.FocusEventHandler<Element>;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useListWithActionsKeyboardNavigation.d.ts","sourceRoot":"","sources":["../../../src/@ui/hooks/useListWithActionsKeyboardNavigation.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;GAEG;AACH,eAAO,MAAM,kBAAkB,eAAe,CAAC;AAY/C;;GAEG;AACH,wBAAgB,oCAAoC,CAAC,IAAI,EAAE,MAAM,SAAS,MAAM,EAAE,EAC9E,KAAK,EACL,cAAc,EACd,wBAAwB,
|
1
|
+
{"version":3,"file":"useListWithActionsKeyboardNavigation.d.ts","sourceRoot":"","sources":["../../../src/@ui/hooks/useListWithActionsKeyboardNavigation.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;GAEG;AACH,eAAO,MAAM,kBAAkB,eAAe,CAAC;AAY/C;;GAEG;AACH,wBAAgB,oCAAoC,CAAC,IAAI,EAAE,MAAM,SAAS,MAAM,EAAE,EAC9E,KAAK,EACL,cAAc,EACd,wBAAwB,EACxB,YAAoB,GACvB,EAAE;IACC,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,cAAc,EAAE;SAAG,GAAG,IAAI,MAAM,GAAG,OAAO,kBAAkB,GAAG,CAAC,IAAI,EAAE,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;KAAE,CAAC;IAC1G,wBAAwB,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,EAAE,CAAC;IACnD,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;;;;;EAsDA"}
|
@@ -9,7 +9,7 @@ export const SELECT_ITEM_ACTION = "selectItem";
|
|
9
9
|
/**
|
10
10
|
* @internal
|
11
11
|
*/
|
12
|
-
export function useListWithActionsKeyboardNavigation({ items, actionHandlers, getItemAdditionalActions, }) {
|
12
|
+
export function useListWithActionsKeyboardNavigation({ items, actionHandlers, getItemAdditionalActions, isNestedList = false, }) {
|
13
13
|
const [focusedIndex, setFocusedIndex] = React.useState(0);
|
14
14
|
const focusedItem = focusedIndex === undefined ? undefined : items[focusedIndex];
|
15
15
|
const [focusedAction, setFocusedAction] = React.useState(SELECT_ITEM_ACTION);
|
@@ -39,12 +39,17 @@ export function useListWithActionsKeyboardNavigation({ items, actionHandlers, ge
|
|
39
39
|
? // Selecting items
|
40
40
|
makeItemSelectionNavigation(keyboardNavigationDepsRef)
|
41
41
|
: // Selecting actions
|
42
|
-
makeActionSelectionNavigation(keyboardNavigationDepsRef);
|
43
|
-
}, [keyboardNavigationDepsRef, selectionMode]);
|
42
|
+
makeActionSelectionNavigation(keyboardNavigationDepsRef, isNestedList);
|
43
|
+
}, [keyboardNavigationDepsRef, selectionMode, isNestedList]);
|
44
44
|
const handleBlur = React.useCallback(() => {
|
45
45
|
setFocusedAction(SELECT_ITEM_ACTION);
|
46
46
|
}, []);
|
47
|
-
return {
|
47
|
+
return {
|
48
|
+
onKeyboardNavigation: handleKeyboardNavigation,
|
49
|
+
onBlur: handleBlur,
|
50
|
+
focusedAction,
|
51
|
+
focusedItem,
|
52
|
+
};
|
48
53
|
}
|
49
54
|
function makeItemSelectionNavigation(depsRef) {
|
50
55
|
return makeMenuKeyboardNavigation({
|
@@ -80,10 +85,15 @@ function makeItemSelectionNavigation(depsRef) {
|
|
80
85
|
},
|
81
86
|
});
|
82
87
|
}
|
83
|
-
function makeActionSelectionNavigation(depsRef) {
|
88
|
+
function makeActionSelectionNavigation(depsRef, isNestedList) {
|
84
89
|
return makeLinearKeyboardNavigation({
|
85
|
-
onFocusPrevious: () => {
|
86
|
-
const { focusedItemAdditionalActions, setFocusedAction } = depsRef.current;
|
90
|
+
onFocusPrevious: (e) => {
|
91
|
+
const { items, focusedItemAdditionalActions, setFocusedIndex, setFocusedAction } = depsRef.current;
|
92
|
+
if (isNestedList && e.key === "ArrowUp") {
|
93
|
+
setFocusedIndex((currentIndex) => currentIndex === undefined || currentIndex === 0 ? items.length - 1 : currentIndex - 1);
|
94
|
+
setFocusedAction(SELECT_ITEM_ACTION);
|
95
|
+
return;
|
96
|
+
}
|
87
97
|
setFocusedAction((currentAction) => {
|
88
98
|
if (currentAction === SELECT_ITEM_ACTION) {
|
89
99
|
return currentAction;
|
@@ -93,8 +103,13 @@ function makeActionSelectionNavigation(depsRef) {
|
|
93
103
|
SELECT_ITEM_ACTION);
|
94
104
|
});
|
95
105
|
},
|
96
|
-
onFocusNext: () => {
|
97
|
-
const { focusedItemAdditionalActions, setFocusedAction } = depsRef.current;
|
106
|
+
onFocusNext: (e) => {
|
107
|
+
const { items, focusedItemAdditionalActions, setFocusedIndex, setFocusedAction } = depsRef.current;
|
108
|
+
if (isNestedList && e.key === "ArrowDown") {
|
109
|
+
setFocusedIndex((currentIndex) => currentIndex === undefined || currentIndex === items.length - 1 ? 0 : currentIndex + 1);
|
110
|
+
setFocusedAction(SELECT_ITEM_ACTION);
|
111
|
+
return;
|
112
|
+
}
|
98
113
|
setFocusedAction((currentAction) => {
|
99
114
|
if (currentAction === SELECT_ITEM_ACTION) {
|
100
115
|
return currentAction;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useListWithActionsKeyboardNavigation.js","sourceRoot":"","sources":["../../../src/@ui/hooks/useListWithActionsKeyboardNavigation.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAE3G;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,YAAY,CAAC;AAY/C;;GAEG;AACH,MAAM,UAAU,oCAAoC,CAA8B,EAC9E,KAAK,EACL,cAAc,EACd,wBAAwB,
|
1
|
+
{"version":3,"file":"useListWithActionsKeyboardNavigation.js","sourceRoot":"","sources":["../../../src/@ui/hooks/useListWithActionsKeyboardNavigation.ts"],"names":[],"mappings":"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"}
|
package/esm/sdk-ui-kit.d.ts
CHANGED
@@ -136,9 +136,13 @@ export declare type ArrowOffsets = Record<string, ArrowOffset>;
|
|
136
136
|
export declare function AsyncList<T>(props: IAsyncListProps<T>): React_2.JSX.Element;
|
137
137
|
|
138
138
|
/**
|
139
|
+
* Wrapper that focuses the first focusable child when it mounts, or when `refocusKey` changes.
|
140
|
+
*
|
139
141
|
* @internal
|
140
142
|
*/
|
141
|
-
export declare const AutofocusOnMount: React_2.FC<
|
143
|
+
export declare const AutofocusOnMount: React_2.FC<{
|
144
|
+
children: React_2.ReactNode;
|
145
|
+
} & IAutofocusOptions>;
|
142
146
|
|
143
147
|
/**
|
144
148
|
* @internal
|
@@ -948,7 +952,7 @@ export declare const getDefaultEmbedTypeOptions: (embedType: EmbedType) => Embed
|
|
948
952
|
* @returns an object containing the focusable elements, the first focusable element, and the last focusable element
|
949
953
|
*/
|
950
954
|
export declare const getFocusableElements: (element?: HTMLElement | null) => {
|
951
|
-
focusableElements:
|
955
|
+
focusableElements: HTMLElement[];
|
952
956
|
firstElement: HTMLElement;
|
953
957
|
lastElement: HTMLElement;
|
954
958
|
};
|
@@ -1356,6 +1360,14 @@ export declare interface IAsyncListProps<T> {
|
|
1356
1360
|
onLoadNextPage?: () => void;
|
1357
1361
|
}
|
1358
1362
|
|
1363
|
+
/**
|
1364
|
+
* @internal
|
1365
|
+
*/
|
1366
|
+
export declare interface IAutofocusOptions {
|
1367
|
+
isDisabled?: boolean;
|
1368
|
+
refocusKey?: unknown;
|
1369
|
+
}
|
1370
|
+
|
1359
1371
|
/**
|
1360
1372
|
* @internal
|
1361
1373
|
*/
|
@@ -5899,6 +5911,10 @@ export declare interface UiFocusTrapProps {
|
|
5899
5911
|
* If not provided, the first focusable element will be focused.
|
5900
5912
|
*/
|
5901
5913
|
initialFocus?: React_2.RefObject<HTMLElement> | string;
|
5914
|
+
/**
|
5915
|
+
* You can retrigger focusing on `initialFocus` by changing the value of this key.
|
5916
|
+
*/
|
5917
|
+
refocusKey?: unknown;
|
5902
5918
|
/**
|
5903
5919
|
* Specify a custom keyboard navigation handler.
|
5904
5920
|
* If not provided, the default keyboard navigation handler will be used.
|
@@ -6099,11 +6115,18 @@ export declare const unrelatedHeader: IDateDatasetHeader;
|
|
6099
6115
|
export declare function unwrapGroupItems<T extends IUiMenuItemData = object>(items: IUiMenuItem<T>[]): IUiMenuItem<T>[];
|
6100
6116
|
|
6101
6117
|
/**
|
6102
|
-
* Focuses the element when
|
6118
|
+
* Focuses the element on mount or when `refocusKey` changes.
|
6119
|
+
*
|
6120
|
+
* @internal
|
6121
|
+
*/
|
6122
|
+
export declare const useAutofocusOnMount: (element: HTMLElement | null | undefined, { isDisabled, refocusKey }?: IAutofocusOptions) => void;
|
6123
|
+
|
6124
|
+
/**
|
6125
|
+
* Provides a ref that will autofocus the element when it is mounted, or when `refocusKey` changes.
|
6103
6126
|
*
|
6104
6127
|
* @internal
|
6105
6128
|
*/
|
6106
|
-
export declare const
|
6129
|
+
export declare const useAutofocusOnMountRef: ({ isDisabled, refocusKey }?: IAutofocusOptions) => (node: HTMLElement | null) => void;
|
6107
6130
|
|
6108
6131
|
/**
|
6109
6132
|
* A helper hook to provide not just state/setState pair but also a debounced version of the state.
|
@@ -6189,12 +6212,13 @@ export declare const useIsZoomed: (baseZoomLevel?: number) => boolean;
|
|
6189
6212
|
/**
|
6190
6213
|
* @internal
|
6191
6214
|
*/
|
6192
|
-
export declare function useListWithActionsKeyboardNavigation<Item, Action extends string>({ items, actionHandlers, getItemAdditionalActions, }: {
|
6215
|
+
export declare function useListWithActionsKeyboardNavigation<Item, Action extends string>({ items, actionHandlers, getItemAdditionalActions, isNestedList, }: {
|
6193
6216
|
items: Item[];
|
6194
6217
|
actionHandlers: {
|
6195
6218
|
[key in Action | typeof SELECT_ITEM_ACTION]: (item: Item) => (() => void) | undefined;
|
6196
6219
|
};
|
6197
6220
|
getItemAdditionalActions: (item: Item) => Action[];
|
6221
|
+
isNestedList?: boolean;
|
6198
6222
|
}): {
|
6199
6223
|
onKeyboardNavigation: (event: React_2.KeyboardEvent<Element>) => void;
|
6200
6224
|
onBlur: React_2.FocusEventHandler<Element>;
|
@@ -36,7 +36,7 @@ export declare const isElementSubmitButton: (event: React.KeyboardEvent) => bool
|
|
36
36
|
* @returns an object containing the focusable elements, the first focusable element, and the last focusable element
|
37
37
|
*/
|
38
38
|
export declare const getFocusableElements: (element?: HTMLElement | null) => {
|
39
|
-
focusableElements:
|
39
|
+
focusableElements: HTMLElement[];
|
40
40
|
firstElement: HTMLElement;
|
41
41
|
lastElement: HTMLElement;
|
42
42
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"domUtilities.d.ts","sourceRoot":"","sources":["../../src/utils/domUtilities.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD;;GAEG;AACH,eAAO,MAAM,aAAa,YAAa,WAAW,KAAG,IAIpD,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM,YACN,WAAW,wBACE,OAAO,gDAE9B,OAeF,CAAC;AAiBF;;;;GAIG;AACH,eAAO,MAAM,eAAe,YAAa,WAAW,GAAG,MAAM,KAAG,OAe/D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,sBACH,WAAW,GAAG,MAAM,6BACZ,OAAO,KACnC,OAuCF,CAAC;AAEF,eAAO,MAAM,kBAAkB,YAAa,WAAW,GAAG,WAAW,GAAG,IAAI,GAAG,SAAS,KAAG,OAc1F,CAAC;AAEF,eAAO,MAAM,qBAAqB,UAAW,mBAAmB,YAI/D,CAAC;
|
1
|
+
{"version":3,"file":"domUtilities.d.ts","sourceRoot":"","sources":["../../src/utils/domUtilities.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD;;GAEG;AACH,eAAO,MAAM,aAAa,YAAa,WAAW,KAAG,IAIpD,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM,YACN,WAAW,wBACE,OAAO,gDAE9B,OAeF,CAAC;AAiBF;;;;GAIG;AACH,eAAO,MAAM,eAAe,YAAa,WAAW,GAAG,MAAM,KAAG,OAe/D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,sBACH,WAAW,GAAG,MAAM,6BACZ,OAAO,KACnC,OAuCF,CAAC;AAEF,eAAO,MAAM,kBAAkB,YAAa,WAAW,GAAG,WAAW,GAAG,IAAI,GAAG,SAAS,KAAG,OAc1F,CAAC;AAEF,eAAO,MAAM,qBAAqB,UAAW,mBAAmB,YAI/D,CAAC;AA0BF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,aAAc,WAAW,GAAG,IAAI;;;;CAOhE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,aAAc,WAAW,GAAG,IAAI,YAE9D,CAAC"}
|
@@ -126,13 +126,14 @@ const focusableElementsSelector = [
|
|
126
126
|
"a[href]",
|
127
127
|
"area[href]",
|
128
128
|
// Custom elements with tabindex
|
129
|
-
'[tabindex]:not(
|
129
|
+
'[tabindex]:not(:disabled):not([aria-disabled="true"])',
|
130
130
|
// Media with controls
|
131
131
|
"audio[controls]",
|
132
132
|
"video[controls]",
|
133
133
|
// Editable content
|
134
134
|
'[contenteditable]:not([contenteditable="false"])',
|
135
135
|
].join(",");
|
136
|
+
const isNotNegativeTabIndex = (element) => !element.tabIndex || element.tabIndex >= 0;
|
136
137
|
/**
|
137
138
|
* @internal
|
138
139
|
* Returns the focusable elements of the given element
|
@@ -140,7 +141,7 @@ const focusableElementsSelector = [
|
|
140
141
|
* @returns an object containing the focusable elements, the first focusable element, and the last focusable element
|
141
142
|
*/
|
142
143
|
export const getFocusableElements = (element) => {
|
143
|
-
const focusableElements = element?.querySelectorAll(focusableElementsSelector);
|
144
|
+
const focusableElements = Array.from(element?.querySelectorAll(focusableElementsSelector) ?? []).filter(isNotNegativeTabIndex);
|
144
145
|
const firstElement = focusableElements?.[0];
|
145
146
|
const lastElement = focusableElements?.[focusableElements.length - 1];
|
146
147
|
return { focusableElements, firstElement, lastElement };
|
@@ -151,6 +152,6 @@ export const getFocusableElements = (element) => {
|
|
151
152
|
* @returns whether or not the supplied element is focusable
|
152
153
|
*/
|
153
154
|
export const isElementFocusable = (element) => {
|
154
|
-
return element?.matches(focusableElementsSelector);
|
155
|
+
return element?.matches(focusableElementsSelector) && isNotNegativeTabIndex(element);
|
155
156
|
};
|
156
157
|
//# sourceMappingURL=domUtilities.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"domUtilities.js","sourceRoot":"","sources":["../../src/utils/domUtilities.ts"],"names":[],"mappings":"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
|
1
|
+
{"version":3,"file":"domUtilities.js","sourceRoot":"","sources":["../../src/utils/domUtilities.ts"],"names":[],"mappings":"AAAA,qCAAqC;AAGrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAGhE;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAoB,EAAQ,EAAE;IACxD,IAAI,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,OAAO,CAAC,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAC5C,CAAC;AACL,CAAC,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAClB,OAAoB,EACpB,mBAA6B,EAC7B,YAAY,GAAG,MAAM,EACd,EAAE;IACT,MAAM,YAAY,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACrD,MAAM,UAAU,GAAG,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC;IAC5F,MAAM,SAAS,GAAG,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC;IAC1F,MAAM,KAAK,GAAG,OAAO,CAAC,WAAW,IAAI,YAAY,CAAC,KAAK,CAAC;IACxD,MAAM,MAAM,GAAG,OAAO,CAAC,YAAY,IAAI,YAAY,CAAC,MAAM,CAAC;IAE3D,OAAO;QACH,IAAI,EAAE,UAAU;QAChB,GAAG,EAAE,SAAS;QACd,KAAK;QACL,MAAM;QACN,MAAM,EAAE,SAAS,GAAG,MAAM;QAC1B,KAAK,EAAE,UAAU,GAAG,KAAK;KAC5B,CAAC;AACN,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,OAAO,GAAG,CAAC,OAAY,EAAE,EAAE;IAC7B,IAAI,IAAI,GAAG,OAAO,CAAC;IACnB,OAAO,IAAI,EAAE,CAAC;QACV,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC;IAC3B,CAAC;IACD,OAAO,KAAK,CAAC;AACjB,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,OAA6B,EAAW,EAAE;IACtE,IAAI,IAAI,GAAG,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAiB,CAAC,CAAC,CAAC,OAAO,CAAC;IAEpG,IAAI,CAAC,IAAI,EAAE,CAAC;QACR,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,IAAI,EAAE,CAAC;QACV,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,KAAK,OAAO,EAAE,CAAC;YACnC,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,IAAI,GAAG,IAAI,CAAC,UAAyB,CAAC;IAC1C,CAAC;IAED,OAAO,KAAK,CAAC;AACjB,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CACzB,iBAAuC,EACvC,wBAAkC,EAC3B,EAAE;IACT,MAAM,IAAI,GACN,OAAO,iBAAiB,KAAK,QAAQ;QACjC,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAiB;QAC5D,CAAC,CAAC,iBAAiB,CAAC;IAE5B,IAAI,CAAC,IAAI,EAAE,CAAC;QACR,OAAO,EAAa,CAAC;IACzB,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QAChB,qEAAqE;QACrE,OAAO,MAAM,CAAC,IAAI,EAAE,wBAAwB,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3E,CAAC;IAED,wCAAwC;IACxC,uDAAuD;IACvD,yEAAyE;IACzE,yDAAyD;IACzD,MAAM,WAAW,GAAG;QAChB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ;QAC7B,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU;KACpC,CAAC;IAEF,yEAAyE;IACzE,kBAAkB;IAClB,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;IACjC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAEhC,0BAA0B;IAC1B,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEzB,6CAA6C;IAC7C,aAAa,CAAC,IAAI,CAAC,CAAC;IACpB,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,WAAW,CAAC,QAAQ,CAAC;IAC3C,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC;IAE/C,OAAO,GAAG,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,OAAqD,EAAW,EAAE;IACjG,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,SAAS,IAAI,OAAO,CAAC,EAAE,CAAC;QACtC,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,OAA2B,CAAC;IAEtD,MAAM,kBAAkB,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC;IACjD,MAAM,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAEvD,OAAO,CACH,kBAAkB,KAAK,UAAU;QACjC,CAAC,kBAAkB,KAAK,OAAO,IAAI,CAAC,eAAe,KAAK,MAAM,IAAI,eAAe,KAAK,QAAQ,CAAC,CAAC,CACnG,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAA0B,EAAE,EAAE;IAChE,MAAM,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC,MAAqB,CAAC;IAE3C,OAAO,EAAE,KAAK,sBAAsB,CAAC;AACzC,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG;IAC9B,4BAA4B;IAC5B,mDAAmD;IACnD,kDAAkD;IAClD,mDAAmD;IACnD,qDAAqD;IAErD,kBAAkB;IAClB,SAAS;IACT,YAAY;IAEZ,gCAAgC;IAChC,uDAAuD;IAEvD,sBAAsB;IACtB,iBAAiB;IACjB,iBAAiB;IAEjB,mBAAmB;IACnB,kDAAkD;CACrD,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,qBAAqB,GAAG,CAAC,OAAoB,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC;AAEnG;;;;;GAKG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,OAA4B,EAAE,EAAE;IACjE,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAChC,OAAO,EAAE,gBAAgB,CAAc,yBAAyB,CAAC,IAAI,EAAE,CAC1E,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC;IAChC,MAAM,YAAY,GAAG,iBAAiB,EAAE,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAG,iBAAiB,EAAE,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACtE,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC;AAC5D,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,OAA4B,EAAE,EAAE;IAC/D,OAAO,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,IAAI,qBAAqB,CAAC,OAAO,CAAC,CAAC;AACzF,CAAC,CAAC"}
|
@@ -1,12 +1,29 @@
|
|
1
1
|
import React from "react";
|
2
2
|
/**
|
3
|
-
*
|
3
|
+
* @internal
|
4
|
+
*/
|
5
|
+
export interface IAutofocusOptions {
|
6
|
+
isDisabled?: boolean;
|
7
|
+
refocusKey?: unknown;
|
8
|
+
}
|
9
|
+
/**
|
10
|
+
* Provides a ref that will autofocus the element when it is mounted, or when `refocusKey` changes.
|
11
|
+
*
|
12
|
+
* @internal
|
13
|
+
*/
|
14
|
+
export declare const useAutofocusOnMountRef: ({ isDisabled, refocusKey }?: IAutofocusOptions) => (node: HTMLElement | null) => void;
|
15
|
+
/**
|
16
|
+
* Focuses the element on mount or when `refocusKey` changes.
|
4
17
|
*
|
5
18
|
* @internal
|
6
19
|
*/
|
7
|
-
export declare const useAutofocusOnMount: (
|
20
|
+
export declare const useAutofocusOnMount: (element: HTMLElement | null | undefined, { isDisabled, refocusKey }?: IAutofocusOptions) => void;
|
8
21
|
/**
|
22
|
+
* Wrapper that focuses the first focusable child when it mounts, or when `refocusKey` changes.
|
23
|
+
*
|
9
24
|
* @internal
|
10
25
|
*/
|
11
|
-
export declare const AutofocusOnMount: React.FC<
|
26
|
+
export declare const AutofocusOnMount: React.FC<{
|
27
|
+
children: React.ReactNode;
|
28
|
+
} & IAutofocusOptions>;
|
12
29
|
//# sourceMappingURL=useAutofocusOnMount.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useAutofocusOnMount.d.ts","sourceRoot":"","sources":["../../src/utils/useAutofocusOnMount.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;GAIG;AACH,eAAO,MAAM,
|
1
|
+
{"version":3,"file":"useAutofocusOnMount.d.ts","sourceRoot":"","sources":["../../src/utils/useAutofocusOnMount.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,gCAAgC,iBAAiB,YAKhD,WAAW,GAAG,IAAI,SAGrD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,YACnB,WAAW,GAAG,IAAI,GAAG,SAAS,+BACX,iBAAiB,SA+BhD,CAAC;AAMF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CACnC;IACI,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,GAAG,iBAAiB,CASxB,CAAC"}
|
@@ -1,51 +1,58 @@
|
|
1
1
|
// (C) 2025 GoodData Corporation
|
2
2
|
import React from "react";
|
3
|
-
import { getFocusableElements, isElementFocusable } from "./domUtilities.js";
|
3
|
+
import { getFocusableElements, isElementFocusable, isElementTextInput } from "./domUtilities.js";
|
4
4
|
/**
|
5
|
-
*
|
5
|
+
* Provides a ref that will autofocus the element when it is mounted, or when `refocusKey` changes.
|
6
6
|
*
|
7
7
|
* @internal
|
8
8
|
*/
|
9
|
-
export const
|
9
|
+
export const useAutofocusOnMountRef = ({ isDisabled, refocusKey } = {}) => {
|
10
10
|
const [element, setElement] = React.useState(null);
|
11
|
-
|
11
|
+
useAutofocusOnMount(element, { isDisabled, refocusKey });
|
12
|
+
return React.useCallback((node) => {
|
13
|
+
setElement(node);
|
14
|
+
}, []);
|
15
|
+
};
|
16
|
+
/**
|
17
|
+
* Focuses the element on mount or when `refocusKey` changes.
|
18
|
+
*
|
19
|
+
* @internal
|
20
|
+
*/
|
21
|
+
export const useAutofocusOnMount = (element, { isDisabled, refocusKey } = {}) => {
|
12
22
|
// If the element is outside of the viewport, calling focus() will not work.
|
13
23
|
// This can happen for example with floating elements, that are repositioned after they mount
|
14
24
|
React.useEffect(() => {
|
15
|
-
|
25
|
+
const elementToFocus = getElementToFocus(element);
|
26
|
+
if (isDisabled || !elementToFocus) {
|
16
27
|
return undefined;
|
17
28
|
}
|
18
|
-
const observer = new IntersectionObserver(() => {
|
19
|
-
if (
|
29
|
+
const observer = new IntersectionObserver(([{ target }]) => {
|
30
|
+
if (target.contains(document.activeElement) || isElementTextInput(document.activeElement)) {
|
31
|
+
observer.disconnect();
|
20
32
|
return;
|
21
33
|
}
|
22
|
-
const elementToFocus = isElementFocusable(element)
|
23
|
-
? element
|
24
|
-
: getFocusableElements(element).firstElement;
|
25
34
|
// Focusing a newly created element sometimes fails if not done through requestAnimationFrame()
|
26
35
|
window.requestAnimationFrame(() => {
|
27
|
-
|
28
|
-
if (document.activeElement ===
|
36
|
+
target.focus();
|
37
|
+
if (document.activeElement === target) {
|
29
38
|
observer.disconnect();
|
30
39
|
}
|
31
40
|
});
|
32
41
|
});
|
33
|
-
observer.observe(
|
42
|
+
observer.observe(elementToFocus);
|
34
43
|
return () => observer.disconnect();
|
35
|
-
}, [element]);
|
36
|
-
return React.useCallback((node) => {
|
37
|
-
if (hasFiredRef.current || !node) {
|
38
|
-
return;
|
39
|
-
}
|
40
|
-
hasFiredRef.current = true;
|
41
|
-
setElement(node);
|
42
|
-
}, []);
|
44
|
+
}, [refocusKey, isDisabled, element]);
|
43
45
|
};
|
46
|
+
function getElementToFocus(element) {
|
47
|
+
return isElementFocusable(element) ? element : getFocusableElements(element).firstElement;
|
48
|
+
}
|
44
49
|
/**
|
50
|
+
* Wrapper that focuses the first focusable child when it mounts, or when `refocusKey` changes.
|
51
|
+
*
|
45
52
|
* @internal
|
46
53
|
*/
|
47
|
-
export const AutofocusOnMount = ({
|
48
|
-
const ref =
|
49
|
-
return React.createElement("div", { ref: ref,
|
54
|
+
export const AutofocusOnMount = ({ isDisabled, refocusKey, children }) => {
|
55
|
+
const ref = useAutofocusOnMountRef({ isDisabled, refocusKey });
|
56
|
+
return (React.createElement("div", { ref: ref, style: { display: "contents" } }, children));
|
50
57
|
};
|
51
58
|
//# sourceMappingURL=useAutofocusOnMount.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useAutofocusOnMount.js","sourceRoot":"","sources":["../../src/utils/useAutofocusOnMount.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;
|
1
|
+
{"version":3,"file":"useAutofocusOnMount.js","sourceRoot":"","sources":["../../src/utils/useAutofocusOnMount.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAUjG;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EAAE,UAAU,EAAE,UAAU,KAAwB,EAAE,EAAE,EAAE;IACzF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAEvE,mBAAmB,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC,CAAC;IAEzD,OAAO,KAAK,CAAC,WAAW,CAAC,CAAC,IAAwB,EAAE,EAAE;QAClD,UAAU,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;AACX,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAC/B,OAAuC,EACvC,EAAE,UAAU,EAAE,UAAU,KAAwB,EAAE,EACpD,EAAE;IACA,4EAA4E;IAC5E,6FAA6F;IAC7F,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,cAAc,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAElD,IAAI,UAAU,IAAI,CAAC,cAAc,EAAE,CAAC;YAChC,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE;YACvD,IAAI,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,kBAAkB,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;gBACxF,QAAQ,CAAC,UAAU,EAAE,CAAC;gBACtB,OAAO;YACX,CAAC;YAED,+FAA+F;YAC/F,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;gBAC7B,MAAsB,CAAC,KAAK,EAAE,CAAC;gBAEhC,IAAI,QAAQ,CAAC,aAAa,KAAK,MAAM,EAAE,CAAC;oBACpC,QAAQ,CAAC,UAAU,EAAE,CAAC;gBAC1B,CAAC;YACL,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAEjC,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;AAC1C,CAAC,CAAC;AAEF,SAAS,iBAAiB,CAAC,OAAuC;IAC9D,OAAO,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC;AAC9F,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAIzB,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE;IACzC,MAAM,GAAG,GAAG,sBAAsB,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC,CAAC;IAE/D,OAAO,CACH,6BAAK,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,IACxC,QAAQ,CACP,CACT,CAAC;AACN,CAAC,CAAC"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@gooddata/sdk-ui-kit",
|
3
|
-
"version": "10.29.0-alpha.
|
3
|
+
"version": "10.29.0-alpha.25",
|
4
4
|
"description": "GoodData SDK - UI Building Components",
|
5
5
|
"repository": {
|
6
6
|
"type": "git",
|
@@ -75,11 +75,11 @@
|
|
75
75
|
"@codemirror/autocomplete": "^6.18.6",
|
76
76
|
"@lezer/highlight": "~1.2.1",
|
77
77
|
"@codemirror/commands": "~6.8.1",
|
78
|
-
"@gooddata/sdk-backend-spi": "10.29.0-alpha.
|
79
|
-
"@gooddata/sdk-model": "10.29.0-alpha.
|
80
|
-
"@gooddata/sdk-ui
|
81
|
-
"@gooddata/sdk-ui": "10.29.0-alpha.
|
82
|
-
"@gooddata/util": "10.29.0-alpha.
|
78
|
+
"@gooddata/sdk-backend-spi": "10.29.0-alpha.25",
|
79
|
+
"@gooddata/sdk-model": "10.29.0-alpha.25",
|
80
|
+
"@gooddata/sdk-ui": "10.29.0-alpha.25",
|
81
|
+
"@gooddata/sdk-ui-theme-provider": "10.29.0-alpha.25",
|
82
|
+
"@gooddata/util": "10.29.0-alpha.25"
|
83
83
|
},
|
84
84
|
"peerDependencies": {
|
85
85
|
"react": "^16.10.0 || ^17.0.0 || ^18.0.0",
|
@@ -137,8 +137,8 @@
|
|
137
137
|
"typescript": "5.3.3",
|
138
138
|
"vitest": "3.0.8",
|
139
139
|
"vitest-dom": "0.1.1",
|
140
|
-
"@gooddata/reference-workspace": "10.29.0-alpha.
|
141
|
-
"@gooddata/sdk-backend-mockingbird": "10.29.0-alpha.
|
140
|
+
"@gooddata/reference-workspace": "10.29.0-alpha.25",
|
141
|
+
"@gooddata/sdk-backend-mockingbird": "10.29.0-alpha.25"
|
142
142
|
},
|
143
143
|
"scripts": {
|
144
144
|
"clean": "rm -rf ci dist esm coverage styles/css *.log tsconfig.tsbuildinfo",
|