@gooddata/sdk-ui-kit 10.29.0-alpha.5 → 10.29.0-alpha.7
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/sdk-ui-kit.d.ts +27 -4
- 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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"}
|
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
|
};
|
@@ -1355,6 +1359,14 @@ export declare interface IAsyncListProps<T> {
|
|
1355
1359
|
onLoadNextPage?: () => void;
|
1356
1360
|
}
|
1357
1361
|
|
1362
|
+
/**
|
1363
|
+
* @internal
|
1364
|
+
*/
|
1365
|
+
export declare interface IAutofocusOptions {
|
1366
|
+
isDisabled?: boolean;
|
1367
|
+
refocusKey?: unknown;
|
1368
|
+
}
|
1369
|
+
|
1358
1370
|
/**
|
1359
1371
|
* @internal
|
1360
1372
|
*/
|
@@ -5886,6 +5898,10 @@ export declare interface UiFocusTrapProps {
|
|
5886
5898
|
* If not provided, the first focusable element will be focused.
|
5887
5899
|
*/
|
5888
5900
|
initialFocus?: React_2.RefObject<HTMLElement> | string;
|
5901
|
+
/**
|
5902
|
+
* You can retrigger focusing on `initialFocus` by changing the value of this key.
|
5903
|
+
*/
|
5904
|
+
refocusKey?: unknown;
|
5889
5905
|
/**
|
5890
5906
|
* Specify a custom keyboard navigation handler.
|
5891
5907
|
* If not provided, the default keyboard navigation handler will be used.
|
@@ -6086,11 +6102,18 @@ export declare const unrelatedHeader: IDateDatasetHeader;
|
|
6086
6102
|
export declare function unwrapGroupItems<T extends IUiMenuItemData = object>(items: IUiMenuItem<T>[]): IUiMenuItem<T>[];
|
6087
6103
|
|
6088
6104
|
/**
|
6089
|
-
* Focuses the element when
|
6105
|
+
* Focuses the element on mount or when `refocusKey` changes.
|
6106
|
+
*
|
6107
|
+
* @internal
|
6108
|
+
*/
|
6109
|
+
export declare const useAutofocusOnMount: (element: HTMLElement | null | undefined, { isDisabled, refocusKey }?: IAutofocusOptions) => void;
|
6110
|
+
|
6111
|
+
/**
|
6112
|
+
* Provides a ref that will autofocus the element when it is mounted, or when `refocusKey` changes.
|
6090
6113
|
*
|
6091
6114
|
* @internal
|
6092
6115
|
*/
|
6093
|
-
export declare const
|
6116
|
+
export declare const useAutofocusOnMountRef: ({ isDisabled, refocusKey }?: IAutofocusOptions) => (node: HTMLElement | null) => void;
|
6094
6117
|
|
6095
6118
|
/**
|
6096
6119
|
* A helper hook to provide not just state/setState pair but also a debounced version of the state.
|
@@ -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":"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"}
|
@@ -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.7",
|
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": "10.29.0-alpha.
|
81
|
-
"@gooddata/
|
82
|
-
"@gooddata/
|
78
|
+
"@gooddata/sdk-backend-spi": "10.29.0-alpha.7",
|
79
|
+
"@gooddata/sdk-model": "10.29.0-alpha.7",
|
80
|
+
"@gooddata/sdk-ui": "10.29.0-alpha.7",
|
81
|
+
"@gooddata/sdk-ui-theme-provider": "10.29.0-alpha.7",
|
82
|
+
"@gooddata/util": "10.29.0-alpha.7"
|
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.7",
|
141
|
+
"@gooddata/sdk-backend-mockingbird": "10.29.0-alpha.7"
|
142
142
|
},
|
143
143
|
"scripts": {
|
144
144
|
"clean": "rm -rf ci dist esm coverage styles/css *.log tsconfig.tsbuildinfo",
|