@react-aria/focus 3.10.0 → 3.11.0
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/dist/import.mjs +861 -0
- package/dist/main.js +241 -175
- package/dist/main.js.map +1 -1
- package/dist/module.js +241 -175
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +11 -6
- package/src/FocusScope.tsx +74 -28
package/dist/module.js
CHANGED
|
@@ -1,9 +1,41 @@
|
|
|
1
|
+
import $6nfFC$swchelperssrc_define_propertymjs from "@swc/helpers/src/_define_property.mjs";
|
|
1
2
|
import $6nfFC$react, {useRef as $6nfFC$useRef, useContext as $6nfFC$useContext, useMemo as $6nfFC$useMemo, useEffect as $6nfFC$useEffect, useState as $6nfFC$useState, useCallback as $6nfFC$useCallback} from "react";
|
|
2
3
|
import {useLayoutEffect as $6nfFC$useLayoutEffect, runAfterTransition as $6nfFC$runAfterTransition, focusWithoutScrolling as $6nfFC$focusWithoutScrolling, mergeProps as $6nfFC$mergeProps, useSyncRef as $6nfFC$useSyncRef} from "@react-aria/utils";
|
|
3
4
|
import {getInteractionModality as $6nfFC$getInteractionModality, isFocusVisible as $6nfFC$isFocusVisible, useFocusVisibleListener as $6nfFC$useFocusVisibleListener, useFocus as $6nfFC$useFocus, useFocusWithin as $6nfFC$useFocusWithin, useKeyboard as $6nfFC$useKeyboard} from "@react-aria/interactions";
|
|
4
5
|
import $6nfFC$clsx from "clsx";
|
|
5
6
|
|
|
6
|
-
|
|
7
|
+
/*
|
|
8
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
9
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
10
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
11
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
12
|
+
*
|
|
13
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
14
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
15
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
16
|
+
* governing permissions and limitations under the License.
|
|
17
|
+
*/ /*
|
|
18
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
19
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
20
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
21
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
22
|
+
*
|
|
23
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
24
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
25
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
26
|
+
* governing permissions and limitations under the License.
|
|
27
|
+
*/
|
|
28
|
+
/*
|
|
29
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
30
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the 'License');
|
|
31
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
32
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
33
|
+
*
|
|
34
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
35
|
+
* the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
36
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
37
|
+
* governing permissions and limitations under the License.
|
|
38
|
+
*/
|
|
7
39
|
|
|
8
40
|
function $6a99195332edec8b$export$80f3e147d781571c(element) {
|
|
9
41
|
// If the user is interacting with a virtual cursor, e.g. screen reader, then
|
|
@@ -11,13 +43,13 @@ function $6a99195332edec8b$export$80f3e147d781571c(element) {
|
|
|
11
43
|
// the page before shifting focus. This avoids issues with VoiceOver on iOS
|
|
12
44
|
// causing the page to scroll when moving focus if the element is transitioning
|
|
13
45
|
// from off the screen.
|
|
14
|
-
if ($6nfFC$getInteractionModality() ===
|
|
46
|
+
if ((0, $6nfFC$getInteractionModality)() === "virtual") {
|
|
15
47
|
let lastFocusedElement = document.activeElement;
|
|
16
|
-
$6nfFC$runAfterTransition(()=>{
|
|
48
|
+
(0, $6nfFC$runAfterTransition)(()=>{
|
|
17
49
|
// If focus did not move and the element is still in the document, focus it.
|
|
18
|
-
if (document.activeElement === lastFocusedElement && document.contains(element)) $6nfFC$focusWithoutScrolling(element);
|
|
50
|
+
if (document.activeElement === lastFocusedElement && document.contains(element)) (0, $6nfFC$focusWithoutScrolling)(element);
|
|
19
51
|
});
|
|
20
|
-
} else $6nfFC$focusWithoutScrolling(element);
|
|
52
|
+
} else (0, $6nfFC$focusWithoutScrolling)(element);
|
|
21
53
|
}
|
|
22
54
|
|
|
23
55
|
|
|
@@ -34,42 +66,62 @@ function $6a99195332edec8b$export$80f3e147d781571c(element) {
|
|
|
34
66
|
*/ function $645f2e67b85a24c9$var$isStyleVisible(element) {
|
|
35
67
|
if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) return false;
|
|
36
68
|
let { display: display , visibility: visibility } = element.style;
|
|
37
|
-
let isVisible = display !==
|
|
69
|
+
let isVisible = display !== "none" && visibility !== "hidden" && visibility !== "collapse";
|
|
38
70
|
if (isVisible) {
|
|
39
71
|
const { getComputedStyle: getComputedStyle } = element.ownerDocument.defaultView;
|
|
40
72
|
let { display: computedDisplay , visibility: computedVisibility } = getComputedStyle(element);
|
|
41
|
-
isVisible = computedDisplay !==
|
|
73
|
+
isVisible = computedDisplay !== "none" && computedVisibility !== "hidden" && computedVisibility !== "collapse";
|
|
42
74
|
}
|
|
43
75
|
return isVisible;
|
|
44
76
|
}
|
|
45
77
|
function $645f2e67b85a24c9$var$isAttributeVisible(element, childElement) {
|
|
46
|
-
return !element.hasAttribute(
|
|
78
|
+
return !element.hasAttribute("hidden") && (element.nodeName === "DETAILS" && childElement && childElement.nodeName !== "SUMMARY" ? element.hasAttribute("open") : true);
|
|
47
79
|
}
|
|
48
80
|
function $645f2e67b85a24c9$export$e989c0fffaa6b27a(element, childElement) {
|
|
49
|
-
return element.nodeName !==
|
|
81
|
+
return element.nodeName !== "#comment" && $645f2e67b85a24c9$var$isStyleVisible(element) && $645f2e67b85a24c9$var$isAttributeVisible(element, childElement) && (!element.parentElement || $645f2e67b85a24c9$export$e989c0fffaa6b27a(element.parentElement, element));
|
|
50
82
|
}
|
|
51
83
|
|
|
52
84
|
|
|
53
85
|
|
|
54
86
|
|
|
55
|
-
const $9bf71ea28793e738$var$FocusContext = /*#__PURE__*/ $6nfFC$react.createContext(null);
|
|
87
|
+
const $9bf71ea28793e738$var$FocusContext = /*#__PURE__*/ (0, $6nfFC$react).createContext(null);
|
|
56
88
|
let $9bf71ea28793e738$var$activeScope = null;
|
|
57
89
|
function $9bf71ea28793e738$export$20e40289641fbbb6(props) {
|
|
58
90
|
let { children: children , contain: contain , restoreFocus: restoreFocus , autoFocus: autoFocus } = props;
|
|
59
|
-
let startRef = $6nfFC$useRef();
|
|
60
|
-
let endRef = $6nfFC$useRef();
|
|
61
|
-
let scopeRef = $6nfFC$useRef([]);
|
|
62
|
-
let
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
,
|
|
70
|
-
|
|
91
|
+
let startRef = (0, $6nfFC$useRef)();
|
|
92
|
+
let endRef = (0, $6nfFC$useRef)();
|
|
93
|
+
let scopeRef = (0, $6nfFC$useRef)([]);
|
|
94
|
+
let { parentNode: parentNode } = (0, $6nfFC$useContext)($9bf71ea28793e738$var$FocusContext) || {};
|
|
95
|
+
// Create a tree node here so we can add children to it even before it is added to the tree.
|
|
96
|
+
let node = (0, $6nfFC$useMemo)(()=>new $9bf71ea28793e738$var$TreeNode({
|
|
97
|
+
scopeRef: scopeRef
|
|
98
|
+
}), [
|
|
99
|
+
scopeRef
|
|
100
|
+
]);
|
|
101
|
+
(0, $6nfFC$useLayoutEffect)(()=>{
|
|
102
|
+
// If a new scope mounts outside the active scope, (e.g. DialogContainer launched from a menu),
|
|
103
|
+
// use the active scope as the parent instead of the parent from context. Layout effects run bottom
|
|
104
|
+
// up, so if the parent is not yet added to the tree, don't do this. Only the outer-most FocusScope
|
|
105
|
+
// that is being added should get the activeScope as its parent.
|
|
106
|
+
let parent = parentNode || $9bf71ea28793e738$export$d06fae2ee68b101e.root;
|
|
107
|
+
if ($9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(parent.scopeRef) && $9bf71ea28793e738$var$activeScope && !$9bf71ea28793e738$var$isAncestorScope($9bf71ea28793e738$var$activeScope, parent.scopeRef)) {
|
|
108
|
+
let activeNode = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode($9bf71ea28793e738$var$activeScope);
|
|
109
|
+
if (activeNode) parent = activeNode;
|
|
110
|
+
}
|
|
111
|
+
// Add the node to the parent, and to the tree.
|
|
112
|
+
parent.addChild(node);
|
|
113
|
+
$9bf71ea28793e738$export$d06fae2ee68b101e.addNode(node);
|
|
114
|
+
}, [
|
|
115
|
+
node,
|
|
116
|
+
parentNode
|
|
117
|
+
]);
|
|
118
|
+
(0, $6nfFC$useLayoutEffect)(()=>{
|
|
119
|
+
let node = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef);
|
|
120
|
+
node.contain = contain;
|
|
121
|
+
}, [
|
|
122
|
+
contain
|
|
71
123
|
]);
|
|
72
|
-
$6nfFC$useLayoutEffect(()=>{
|
|
124
|
+
(0, $6nfFC$useLayoutEffect)(()=>{
|
|
73
125
|
// Find all rendered nodes between the sentinels and add them to the scope.
|
|
74
126
|
let node = startRef.current.nextSibling;
|
|
75
127
|
let nodes = [];
|
|
@@ -79,57 +131,65 @@ function $9bf71ea28793e738$export$20e40289641fbbb6(props) {
|
|
|
79
131
|
}
|
|
80
132
|
scopeRef.current = nodes;
|
|
81
133
|
}, [
|
|
82
|
-
children
|
|
83
|
-
parentScope1
|
|
134
|
+
children
|
|
84
135
|
]);
|
|
85
|
-
// add to the focus scope tree in render order because useEffects/useLayoutEffects run children first whereas render runs parent first
|
|
86
|
-
// which matters when constructing a tree
|
|
87
|
-
if ($9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(parentScope1) && !$9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef)) $9bf71ea28793e738$export$d06fae2ee68b101e.addTreeNode(scopeRef, parentScope1);
|
|
88
|
-
let node1 = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef);
|
|
89
|
-
node1.contain = contain;
|
|
90
136
|
$9bf71ea28793e738$var$useActiveScopeTracker(scopeRef, restoreFocus, contain);
|
|
91
137
|
$9bf71ea28793e738$var$useFocusContainment(scopeRef, contain);
|
|
92
138
|
$9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain);
|
|
93
139
|
$9bf71ea28793e738$var$useAutoFocus(scopeRef, autoFocus);
|
|
94
140
|
// this layout effect needs to run last so that focusScopeTree cleanup happens at the last moment possible
|
|
95
|
-
$6nfFC$
|
|
96
|
-
if (scopeRef)
|
|
97
|
-
|
|
98
|
-
let
|
|
99
|
-
//
|
|
100
|
-
//
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
141
|
+
(0, $6nfFC$useEffect)(()=>{
|
|
142
|
+
if (scopeRef) {
|
|
143
|
+
let activeElement = document.activeElement;
|
|
144
|
+
let scope = null;
|
|
145
|
+
// In strict mode, active scope is incorrectly updated since cleanup will run even though scope hasn't unmounted.
|
|
146
|
+
// To fix this, we need to update the actual activeScope here
|
|
147
|
+
if ($9bf71ea28793e738$var$isElementInScope(activeElement, scopeRef.current)) {
|
|
148
|
+
// Since useLayoutEffect runs for children first, we need to traverse the focusScope tree and find the bottom most scope that
|
|
149
|
+
// contains the active element and set that as the activeScope
|
|
150
|
+
for (let node of $9bf71ea28793e738$export$d06fae2ee68b101e.traverse())if ($9bf71ea28793e738$var$isElementInScope(activeElement, node.scopeRef.current)) scope = node;
|
|
151
|
+
if (scope === $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef)) $9bf71ea28793e738$var$activeScope = scope.scopeRef;
|
|
152
|
+
}
|
|
153
|
+
return ()=>{
|
|
154
|
+
// Scope may have been re-parented.
|
|
155
|
+
let parentScope = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef).parent.scopeRef;
|
|
156
|
+
// Restore the active scope on unmount if this scope or a descendant scope is active.
|
|
157
|
+
// Parent effect cleanups run before children, so we need to check if the
|
|
158
|
+
// parent scope actually still exists before restoring the active scope to it.
|
|
159
|
+
if ((scopeRef === $9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope(scopeRef, $9bf71ea28793e738$var$activeScope)) && (!parentScope || $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(parentScope))) $9bf71ea28793e738$var$activeScope = parentScope;
|
|
160
|
+
$9bf71ea28793e738$export$d06fae2ee68b101e.removeTreeNode(scopeRef);
|
|
161
|
+
};
|
|
162
|
+
}
|
|
105
163
|
}, [
|
|
106
|
-
scopeRef
|
|
107
|
-
parentScope1
|
|
164
|
+
scopeRef
|
|
108
165
|
]);
|
|
109
|
-
let focusManager = $9bf71ea28793e738$var$createFocusManagerForScope(scopeRef);
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
166
|
+
let focusManager = (0, $6nfFC$useMemo)(()=>$9bf71ea28793e738$var$createFocusManagerForScope(scopeRef), []);
|
|
167
|
+
let value = (0, $6nfFC$useMemo)(()=>({
|
|
168
|
+
focusManager: focusManager,
|
|
169
|
+
parentNode: node
|
|
170
|
+
}), [
|
|
171
|
+
node,
|
|
172
|
+
focusManager
|
|
173
|
+
]);
|
|
174
|
+
return /*#__PURE__*/ (0, $6nfFC$react).createElement($9bf71ea28793e738$var$FocusContext.Provider, {
|
|
175
|
+
value: value
|
|
176
|
+
}, /*#__PURE__*/ (0, $6nfFC$react).createElement("span", {
|
|
116
177
|
"data-focus-scope-start": true,
|
|
117
178
|
hidden: true,
|
|
118
179
|
ref: startRef
|
|
119
|
-
}), children, /*#__PURE__*/ $6nfFC$react.createElement("span", {
|
|
180
|
+
}), children, /*#__PURE__*/ (0, $6nfFC$react).createElement("span", {
|
|
120
181
|
"data-focus-scope-end": true,
|
|
121
182
|
hidden: true,
|
|
122
183
|
ref: endRef
|
|
123
|
-
}))
|
|
184
|
+
}));
|
|
124
185
|
}
|
|
125
186
|
function $9bf71ea28793e738$export$10c5169755ce7bd7() {
|
|
126
|
-
var
|
|
127
|
-
return (
|
|
187
|
+
var _useContext;
|
|
188
|
+
return (_useContext = (0, $6nfFC$useContext)($9bf71ea28793e738$var$FocusContext)) === null || _useContext === void 0 ? void 0 : _useContext.focusManager;
|
|
128
189
|
}
|
|
129
190
|
function $9bf71ea28793e738$var$createFocusManagerForScope(scopeRef) {
|
|
130
191
|
return {
|
|
131
|
-
focusNext (opts = {
|
|
132
|
-
}) {
|
|
192
|
+
focusNext (opts = {}) {
|
|
133
193
|
let scope = scopeRef.current;
|
|
134
194
|
let { from: from , tabbable: tabbable , wrap: wrap , accept: accept } = opts;
|
|
135
195
|
let node = from || document.activeElement;
|
|
@@ -147,8 +207,7 @@ function $9bf71ea28793e738$var$createFocusManagerForScope(scopeRef) {
|
|
|
147
207
|
if (nextNode) $9bf71ea28793e738$var$focusElement(nextNode, true);
|
|
148
208
|
return nextNode;
|
|
149
209
|
},
|
|
150
|
-
focusPrevious (opts = {
|
|
151
|
-
}) {
|
|
210
|
+
focusPrevious (opts = {}) {
|
|
152
211
|
let scope = scopeRef.current;
|
|
153
212
|
let { from: from , tabbable: tabbable , wrap: wrap , accept: accept } = opts;
|
|
154
213
|
let node = from || document.activeElement;
|
|
@@ -166,8 +225,7 @@ function $9bf71ea28793e738$var$createFocusManagerForScope(scopeRef) {
|
|
|
166
225
|
if (previousNode) $9bf71ea28793e738$var$focusElement(previousNode, true);
|
|
167
226
|
return previousNode;
|
|
168
227
|
},
|
|
169
|
-
focusFirst (opts = {
|
|
170
|
-
}) {
|
|
228
|
+
focusFirst (opts = {}) {
|
|
171
229
|
let scope = scopeRef.current;
|
|
172
230
|
let { tabbable: tabbable , accept: accept } = opts;
|
|
173
231
|
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa($9bf71ea28793e738$var$getScopeRoot(scope), {
|
|
@@ -179,8 +237,7 @@ function $9bf71ea28793e738$var$createFocusManagerForScope(scopeRef) {
|
|
|
179
237
|
if (nextNode) $9bf71ea28793e738$var$focusElement(nextNode, true);
|
|
180
238
|
return nextNode;
|
|
181
239
|
},
|
|
182
|
-
focusLast (opts = {
|
|
183
|
-
}) {
|
|
240
|
+
focusLast (opts = {}) {
|
|
184
241
|
let scope = scopeRef.current;
|
|
185
242
|
let { tabbable: tabbable , accept: accept } = opts;
|
|
186
243
|
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa($9bf71ea28793e738$var$getScopeRoot(scope), {
|
|
@@ -195,21 +252,21 @@ function $9bf71ea28793e738$var$createFocusManagerForScope(scopeRef) {
|
|
|
195
252
|
};
|
|
196
253
|
}
|
|
197
254
|
const $9bf71ea28793e738$var$focusableElements = [
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
255
|
+
"input:not([disabled]):not([type=hidden])",
|
|
256
|
+
"select:not([disabled])",
|
|
257
|
+
"textarea:not([disabled])",
|
|
258
|
+
"button:not([disabled])",
|
|
259
|
+
"a[href]",
|
|
260
|
+
"area[href]",
|
|
261
|
+
"summary",
|
|
262
|
+
"iframe",
|
|
263
|
+
"object",
|
|
264
|
+
"embed",
|
|
265
|
+
"audio[controls]",
|
|
266
|
+
"video[controls]",
|
|
267
|
+
"[contenteditable]"
|
|
211
268
|
];
|
|
212
|
-
const $9bf71ea28793e738$var$FOCUSABLE_ELEMENT_SELECTOR = $9bf71ea28793e738$var$focusableElements.join(
|
|
269
|
+
const $9bf71ea28793e738$var$FOCUSABLE_ELEMENT_SELECTOR = $9bf71ea28793e738$var$focusableElements.join(":not([hidden]),") + ",[tabindex]:not([disabled]):not([hidden])";
|
|
213
270
|
$9bf71ea28793e738$var$focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
|
|
214
271
|
const $9bf71ea28793e738$var$TABBABLE_ELEMENT_SELECTOR = $9bf71ea28793e738$var$focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
|
|
215
272
|
function $9bf71ea28793e738$var$getScopeRoot(scope) {
|
|
@@ -224,10 +281,10 @@ function $9bf71ea28793e738$var$shouldContainFocus(scopeRef) {
|
|
|
224
281
|
return true;
|
|
225
282
|
}
|
|
226
283
|
function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
|
|
227
|
-
let focusedNode = $6nfFC$useRef();
|
|
228
|
-
let raf = $6nfFC$useRef(null);
|
|
229
|
-
$6nfFC$useLayoutEffect(()=>{
|
|
230
|
-
let
|
|
284
|
+
let focusedNode = (0, $6nfFC$useRef)();
|
|
285
|
+
let raf = (0, $6nfFC$useRef)(null);
|
|
286
|
+
(0, $6nfFC$useLayoutEffect)(()=>{
|
|
287
|
+
let scope = scopeRef.current;
|
|
231
288
|
if (!contain) {
|
|
232
289
|
// if contain was changed, then we should cancel any ongoing waits to pull focus back into containment
|
|
233
290
|
if (raf.current) {
|
|
@@ -238,7 +295,7 @@ function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
|
|
|
238
295
|
}
|
|
239
296
|
// Handle the Tab key to contain focus within the scope
|
|
240
297
|
let onKeyDown = (e)=>{
|
|
241
|
-
if (e.key !==
|
|
298
|
+
if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey || !$9bf71ea28793e738$var$shouldContainFocus(scopeRef)) return;
|
|
242
299
|
let focusedElement = document.activeElement;
|
|
243
300
|
let scope = scopeRef.current;
|
|
244
301
|
if (!$9bf71ea28793e738$var$isElementInScope(focusedElement, scope)) return;
|
|
@@ -269,6 +326,7 @@ function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
|
|
|
269
326
|
};
|
|
270
327
|
let onBlur = (e)=>{
|
|
271
328
|
// Firefox doesn't shift focus back to the Dialog properly without this
|
|
329
|
+
if (raf.current) cancelAnimationFrame(raf.current);
|
|
272
330
|
raf.current = requestAnimationFrame(()=>{
|
|
273
331
|
// Use document.activeElement instead of e.relatedTarget so we can tell if user clicked into iframe
|
|
274
332
|
if ($9bf71ea28793e738$var$shouldContainFocus(scopeRef) && !$9bf71ea28793e738$var$isElementInChildScope(document.activeElement, scopeRef)) {
|
|
@@ -280,26 +338,22 @@ function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
|
|
|
280
338
|
}
|
|
281
339
|
});
|
|
282
340
|
};
|
|
283
|
-
document.addEventListener(
|
|
284
|
-
document.addEventListener(
|
|
285
|
-
|
|
286
|
-
);
|
|
287
|
-
scope1.forEach((element)=>element.addEventListener('focusout', onBlur, false)
|
|
288
|
-
);
|
|
341
|
+
document.addEventListener("keydown", onKeyDown, false);
|
|
342
|
+
document.addEventListener("focusin", onFocus, false);
|
|
343
|
+
scope.forEach((element)=>element.addEventListener("focusin", onFocus, false));
|
|
344
|
+
scope.forEach((element)=>element.addEventListener("focusout", onBlur, false));
|
|
289
345
|
return ()=>{
|
|
290
|
-
document.removeEventListener(
|
|
291
|
-
document.removeEventListener(
|
|
292
|
-
|
|
293
|
-
);
|
|
294
|
-
scope1.forEach((element)=>element.removeEventListener('focusout', onBlur, false)
|
|
295
|
-
);
|
|
346
|
+
document.removeEventListener("keydown", onKeyDown, false);
|
|
347
|
+
document.removeEventListener("focusin", onFocus, false);
|
|
348
|
+
scope.forEach((element)=>element.removeEventListener("focusin", onFocus, false));
|
|
349
|
+
scope.forEach((element)=>element.removeEventListener("focusout", onBlur, false));
|
|
296
350
|
};
|
|
297
351
|
}, [
|
|
298
352
|
scopeRef,
|
|
299
353
|
contain
|
|
300
354
|
]);
|
|
301
355
|
// eslint-disable-next-line arrow-body-style
|
|
302
|
-
$6nfFC$useEffect(()=>{
|
|
356
|
+
(0, $6nfFC$useEffect)(()=>{
|
|
303
357
|
return ()=>{
|
|
304
358
|
if (raf.current) cancelAnimationFrame(raf.current);
|
|
305
359
|
};
|
|
@@ -311,10 +365,11 @@ function $9bf71ea28793e738$var$isElementInAnyScope(element) {
|
|
|
311
365
|
return $9bf71ea28793e738$var$isElementInChildScope(element);
|
|
312
366
|
}
|
|
313
367
|
function $9bf71ea28793e738$var$isElementInScope(element, scope) {
|
|
314
|
-
return scope.some((node)=>node.contains(element)
|
|
315
|
-
);
|
|
368
|
+
return scope.some((node)=>node.contains(element));
|
|
316
369
|
}
|
|
317
370
|
function $9bf71ea28793e738$var$isElementInChildScope(element, scope = null) {
|
|
371
|
+
// If the element is within a top layer element (e.g. toasts), always allow moving focus there.
|
|
372
|
+
if (element instanceof Element && element.closest("[data-react-aria-top-layer]")) return true;
|
|
318
373
|
// node.contains in isElementInScope covers child scopes that are also DOM children,
|
|
319
374
|
// but does not cover child scopes in portals.
|
|
320
375
|
for (let { scopeRef: s } of $9bf71ea28793e738$export$d06fae2ee68b101e.traverse($9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scope))){
|
|
@@ -326,8 +381,8 @@ function $9bf71ea28793e738$export$1258395f99bf9cbf(element) {
|
|
|
326
381
|
return $9bf71ea28793e738$var$isElementInChildScope(element, $9bf71ea28793e738$var$activeScope);
|
|
327
382
|
}
|
|
328
383
|
function $9bf71ea28793e738$var$isAncestorScope(ancestor, scope) {
|
|
329
|
-
var
|
|
330
|
-
let parent = (
|
|
384
|
+
var _focusScopeTree_getTreeNode;
|
|
385
|
+
let parent = (_focusScopeTree_getTreeNode = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scope)) === null || _focusScopeTree_getTreeNode === void 0 ? void 0 : _focusScopeTree_getTreeNode.parent;
|
|
331
386
|
while(parent){
|
|
332
387
|
if (parent.scopeRef === ancestor) return true;
|
|
333
388
|
parent = parent.parent;
|
|
@@ -336,7 +391,7 @@ function $9bf71ea28793e738$var$isAncestorScope(ancestor, scope) {
|
|
|
336
391
|
}
|
|
337
392
|
function $9bf71ea28793e738$var$focusElement(element, scroll = false) {
|
|
338
393
|
if (element != null && !scroll) try {
|
|
339
|
-
$6a99195332edec8b$export$80f3e147d781571c(element);
|
|
394
|
+
(0, $6a99195332edec8b$export$80f3e147d781571c)(element);
|
|
340
395
|
} catch (err) {
|
|
341
396
|
// ignore
|
|
342
397
|
}
|
|
@@ -364,8 +419,8 @@ function $9bf71ea28793e738$var$focusFirstInScope(scope, tabbable = true) {
|
|
|
364
419
|
$9bf71ea28793e738$var$focusElement(nextNode);
|
|
365
420
|
}
|
|
366
421
|
function $9bf71ea28793e738$var$useAutoFocus(scopeRef, autoFocus) {
|
|
367
|
-
const autoFocusRef = $6nfFC$react.useRef(autoFocus);
|
|
368
|
-
$6nfFC$useEffect(()=>{
|
|
422
|
+
const autoFocusRef = (0, $6nfFC$react).useRef(autoFocus);
|
|
423
|
+
(0, $6nfFC$useEffect)(()=>{
|
|
369
424
|
if (autoFocusRef.current) {
|
|
370
425
|
$9bf71ea28793e738$var$activeScope = scopeRef;
|
|
371
426
|
if (!$9bf71ea28793e738$var$isElementInScope(document.activeElement, $9bf71ea28793e738$var$activeScope.current)) $9bf71ea28793e738$var$focusFirstInScope(scopeRef.current);
|
|
@@ -378,7 +433,7 @@ function $9bf71ea28793e738$var$useAutoFocus(scopeRef, autoFocus) {
|
|
|
378
433
|
function $9bf71ea28793e738$var$useActiveScopeTracker(scopeRef, restore, contain) {
|
|
379
434
|
// tracks the active scope, in case restore and contain are both false.
|
|
380
435
|
// if either are true, this is tracked in useRestoreFocus or useFocusContainment.
|
|
381
|
-
$6nfFC$useLayoutEffect(()=>{
|
|
436
|
+
(0, $6nfFC$useLayoutEffect)(()=>{
|
|
382
437
|
if (restore || contain) return;
|
|
383
438
|
let scope = scopeRef.current;
|
|
384
439
|
let onFocus = (e)=>{
|
|
@@ -386,13 +441,11 @@ function $9bf71ea28793e738$var$useActiveScopeTracker(scopeRef, restore, contain)
|
|
|
386
441
|
if ($9bf71ea28793e738$var$isElementInScope(target, scopeRef.current)) $9bf71ea28793e738$var$activeScope = scopeRef;
|
|
387
442
|
else if (!$9bf71ea28793e738$var$isElementInAnyScope(target)) $9bf71ea28793e738$var$activeScope = null;
|
|
388
443
|
};
|
|
389
|
-
document.addEventListener(
|
|
390
|
-
scope.forEach((element)=>element.addEventListener(
|
|
391
|
-
);
|
|
444
|
+
document.addEventListener("focusin", onFocus, false);
|
|
445
|
+
scope.forEach((element)=>element.addEventListener("focusin", onFocus, false));
|
|
392
446
|
return ()=>{
|
|
393
|
-
document.removeEventListener(
|
|
394
|
-
scope.forEach((element)=>element.removeEventListener(
|
|
395
|
-
);
|
|
447
|
+
document.removeEventListener("focusin", onFocus, false);
|
|
448
|
+
scope.forEach((element)=>element.removeEventListener("focusin", onFocus, false));
|
|
396
449
|
};
|
|
397
450
|
}, [
|
|
398
451
|
scopeRef,
|
|
@@ -410,10 +463,10 @@ function $9bf71ea28793e738$var$shouldRestoreFocus(scopeRef) {
|
|
|
410
463
|
}
|
|
411
464
|
function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain) {
|
|
412
465
|
// create a ref during render instead of useLayoutEffect so the active element is saved before a child with autoFocus=true mounts.
|
|
413
|
-
const nodeToRestoreRef = $6nfFC$useRef(typeof document !==
|
|
466
|
+
const nodeToRestoreRef = (0, $6nfFC$useRef)(typeof document !== "undefined" ? document.activeElement : null);
|
|
414
467
|
// restoring scopes should all track if they are active regardless of contain, but contain already tracks it plus logic to contain the focus
|
|
415
468
|
// restoring-non-containing scopes should only care if they become active so they can perform the restore
|
|
416
|
-
$6nfFC$useLayoutEffect(()=>{
|
|
469
|
+
(0, $6nfFC$useLayoutEffect)(()=>{
|
|
417
470
|
let scope = scopeRef.current;
|
|
418
471
|
if (!restoreFocus || contain) return;
|
|
419
472
|
let onFocus = ()=>{
|
|
@@ -421,13 +474,11 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
421
474
|
// Moving out of the active scope to an ancestor is not allowed.
|
|
422
475
|
if (!$9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope($9bf71ea28793e738$var$activeScope, scopeRef)) $9bf71ea28793e738$var$activeScope = scopeRef;
|
|
423
476
|
};
|
|
424
|
-
document.addEventListener(
|
|
425
|
-
scope.forEach((element)=>element.addEventListener(
|
|
426
|
-
);
|
|
477
|
+
document.addEventListener("focusin", onFocus, false);
|
|
478
|
+
scope.forEach((element)=>element.addEventListener("focusin", onFocus, false));
|
|
427
479
|
return ()=>{
|
|
428
|
-
document.removeEventListener(
|
|
429
|
-
scope.forEach((element)=>element.removeEventListener(
|
|
430
|
-
);
|
|
480
|
+
document.removeEventListener("focusin", onFocus, false);
|
|
481
|
+
scope.forEach((element)=>element.removeEventListener("focusin", onFocus, false));
|
|
431
482
|
};
|
|
432
483
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
433
484
|
}, [
|
|
@@ -435,7 +486,7 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
435
486
|
contain
|
|
436
487
|
]);
|
|
437
488
|
// useLayoutEffect instead of useEffect so the active element is saved synchronously instead of asynchronously.
|
|
438
|
-
$6nfFC$useLayoutEffect(()=>{
|
|
489
|
+
(0, $6nfFC$useLayoutEffect)(()=>{
|
|
439
490
|
if (!restoreFocus) return;
|
|
440
491
|
$9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef).nodeToRestore = nodeToRestoreRef.current;
|
|
441
492
|
// Handle the Tab key so that tabbing out of the scope goes to the next element
|
|
@@ -443,7 +494,7 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
443
494
|
// using portals for overlays, so that focus goes to the expected element when
|
|
444
495
|
// tabbing out of the overlay.
|
|
445
496
|
let onKeyDown = (e)=>{
|
|
446
|
-
if (e.key !==
|
|
497
|
+
if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey) return;
|
|
447
498
|
let focusedElement = document.activeElement;
|
|
448
499
|
if (!$9bf71ea28793e738$var$isElementInScope(focusedElement, scopeRef.current)) return;
|
|
449
500
|
let nodeToRestore = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef).nodeToRestore;
|
|
@@ -464,7 +515,7 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
464
515
|
walker.currentNode = nodeToRestore;
|
|
465
516
|
// Skip over elements within the scope, in case the scope immediately follows the node to restore.
|
|
466
517
|
do nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
|
|
467
|
-
while ($9bf71ea28793e738$var$isElementInScope(nextElement, scopeRef.current))
|
|
518
|
+
while ($9bf71ea28793e738$var$isElementInScope(nextElement, scopeRef.current));
|
|
468
519
|
e.preventDefault();
|
|
469
520
|
e.stopPropagation();
|
|
470
521
|
if (nextElement) $9bf71ea28793e738$var$focusElement(nextElement, true);
|
|
@@ -475,9 +526,9 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
475
526
|
else $9bf71ea28793e738$var$focusElement(nodeToRestore, true);
|
|
476
527
|
}
|
|
477
528
|
};
|
|
478
|
-
if (!contain) document.addEventListener(
|
|
529
|
+
if (!contain) document.addEventListener("keydown", onKeyDown, true);
|
|
479
530
|
return ()=>{
|
|
480
|
-
if (!contain) document.removeEventListener(
|
|
531
|
+
if (!contain) document.removeEventListener("keydown", onKeyDown, true);
|
|
481
532
|
let nodeToRestore = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef).nodeToRestore;
|
|
482
533
|
// if we already lost focus to the body and this was the active scope, then we should attempt to restore
|
|
483
534
|
if (restoreFocus && nodeToRestore && // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -520,21 +571,19 @@ function $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, opts, scope) {
|
|
|
520
571
|
let selector = (opts === null || opts === void 0 ? void 0 : opts.tabbable) ? $9bf71ea28793e738$var$TABBABLE_ELEMENT_SELECTOR : $9bf71ea28793e738$var$FOCUSABLE_ELEMENT_SELECTOR;
|
|
521
572
|
let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
|
|
522
573
|
acceptNode (node) {
|
|
523
|
-
var
|
|
574
|
+
var _opts_from;
|
|
524
575
|
// Skip nodes inside the starting node.
|
|
525
|
-
if (opts === null || opts === void 0 ? void 0 : (
|
|
526
|
-
if (node.matches(selector) && $645f2e67b85a24c9$export$e989c0fffaa6b27a(node) && (!scope || $9bf71ea28793e738$var$isElementInScope(node, scope)) && (!(opts === null || opts === void 0 ? void 0 : opts.accept) || opts.accept(node))) return NodeFilter.FILTER_ACCEPT;
|
|
576
|
+
if (opts === null || opts === void 0 ? void 0 : (_opts_from = opts.from) === null || _opts_from === void 0 ? void 0 : _opts_from.contains(node)) return NodeFilter.FILTER_REJECT;
|
|
577
|
+
if (node.matches(selector) && (0, $645f2e67b85a24c9$export$e989c0fffaa6b27a)(node) && (!scope || $9bf71ea28793e738$var$isElementInScope(node, scope)) && (!(opts === null || opts === void 0 ? void 0 : opts.accept) || opts.accept(node))) return NodeFilter.FILTER_ACCEPT;
|
|
527
578
|
return NodeFilter.FILTER_SKIP;
|
|
528
579
|
}
|
|
529
580
|
});
|
|
530
581
|
if (opts === null || opts === void 0 ? void 0 : opts.from) walker.currentNode = opts.from;
|
|
531
582
|
return walker;
|
|
532
583
|
}
|
|
533
|
-
function $9bf71ea28793e738$export$c5251b9e124bf29(ref, defaultOptions = {
|
|
534
|
-
}) {
|
|
584
|
+
function $9bf71ea28793e738$export$c5251b9e124bf29(ref, defaultOptions = {}) {
|
|
535
585
|
return {
|
|
536
|
-
focusNext (opts = {
|
|
537
|
-
}) {
|
|
586
|
+
focusNext (opts = {}) {
|
|
538
587
|
let root = ref.current;
|
|
539
588
|
if (!root) return;
|
|
540
589
|
let { from: from , tabbable: tabbable = defaultOptions.tabbable , wrap: wrap = defaultOptions.wrap , accept: accept = defaultOptions.accept } = opts;
|
|
@@ -607,7 +656,7 @@ function $9bf71ea28793e738$var$last(walker) {
|
|
|
607
656
|
do {
|
|
608
657
|
last = walker.lastChild();
|
|
609
658
|
if (last) next = last;
|
|
610
|
-
}while (last)
|
|
659
|
+
}while (last);
|
|
611
660
|
return next;
|
|
612
661
|
}
|
|
613
662
|
class $9bf71ea28793e738$var$Tree {
|
|
@@ -627,6 +676,9 @@ class $9bf71ea28793e738$var$Tree {
|
|
|
627
676
|
this.fastMap.set(scopeRef, node);
|
|
628
677
|
if (nodeToRestore) node.nodeToRestore = nodeToRestore;
|
|
629
678
|
}
|
|
679
|
+
addNode(node) {
|
|
680
|
+
this.fastMap.set(node.scopeRef, node);
|
|
681
|
+
}
|
|
630
682
|
removeTreeNode(scopeRef) {
|
|
631
683
|
// never remove the root
|
|
632
684
|
if (scopeRef === null) return;
|
|
@@ -637,14 +689,13 @@ class $9bf71ea28793e738$var$Tree {
|
|
|
637
689
|
for (let current of this.traverse())if (current !== node && node.nodeToRestore && current.nodeToRestore && node.scopeRef.current && $9bf71ea28793e738$var$isElementInScope(current.nodeToRestore, node.scopeRef.current)) current.nodeToRestore = node.nodeToRestore;
|
|
638
690
|
let children = node.children;
|
|
639
691
|
parentNode.removeChild(node);
|
|
640
|
-
if (children.
|
|
641
|
-
);
|
|
692
|
+
if (children.size > 0) children.forEach((child)=>parentNode.addChild(child));
|
|
642
693
|
this.fastMap.delete(node.scopeRef);
|
|
643
694
|
}
|
|
644
695
|
// Pre Order Depth First
|
|
645
696
|
*traverse(node = this.root) {
|
|
646
697
|
if (node.scopeRef != null) yield node;
|
|
647
|
-
if (node.children.
|
|
698
|
+
if (node.children.size > 0) for (let child of node.children)yield* this.traverse(child);
|
|
648
699
|
}
|
|
649
700
|
clone() {
|
|
650
701
|
let newTree = new $9bf71ea28793e738$var$Tree();
|
|
@@ -652,7 +703,7 @@ class $9bf71ea28793e738$var$Tree {
|
|
|
652
703
|
return newTree;
|
|
653
704
|
}
|
|
654
705
|
constructor(){
|
|
655
|
-
this
|
|
706
|
+
(0, $6nfFC$swchelperssrc_define_propertymjs)(this, "fastMap", new Map());
|
|
656
707
|
this.root = new $9bf71ea28793e738$var$TreeNode({
|
|
657
708
|
scopeRef: null
|
|
658
709
|
});
|
|
@@ -661,63 +712,70 @@ class $9bf71ea28793e738$var$Tree {
|
|
|
661
712
|
}
|
|
662
713
|
class $9bf71ea28793e738$var$TreeNode {
|
|
663
714
|
addChild(node) {
|
|
664
|
-
this.children.
|
|
715
|
+
this.children.add(node);
|
|
665
716
|
node.parent = this;
|
|
666
717
|
}
|
|
667
718
|
removeChild(node) {
|
|
668
|
-
this.children.
|
|
719
|
+
this.children.delete(node);
|
|
669
720
|
node.parent = undefined;
|
|
670
721
|
}
|
|
671
722
|
constructor(props){
|
|
672
|
-
this
|
|
673
|
-
this
|
|
723
|
+
(0, $6nfFC$swchelperssrc_define_propertymjs)(this, "children", new Set());
|
|
724
|
+
(0, $6nfFC$swchelperssrc_define_propertymjs)(this, "contain", false);
|
|
674
725
|
this.scopeRef = props.scopeRef;
|
|
675
726
|
}
|
|
676
727
|
}
|
|
677
728
|
let $9bf71ea28793e738$export$d06fae2ee68b101e = new $9bf71ea28793e738$var$Tree();
|
|
678
729
|
|
|
679
730
|
|
|
731
|
+
/*
|
|
732
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
733
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
734
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
735
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
736
|
+
*
|
|
737
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
738
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
739
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
740
|
+
* governing permissions and limitations under the License.
|
|
741
|
+
*/
|
|
680
742
|
|
|
681
743
|
|
|
682
744
|
|
|
683
745
|
|
|
684
746
|
|
|
685
|
-
|
|
686
|
-
function $f7dceffc5ad7768b$export$4e328f61c538687f(props = {
|
|
687
|
-
}) {
|
|
747
|
+
function $f7dceffc5ad7768b$export$4e328f61c538687f(props = {}) {
|
|
688
748
|
let { autoFocus: autoFocus = false , isTextInput: isTextInput , within: within } = props;
|
|
689
|
-
let state = $6nfFC$useRef({
|
|
749
|
+
let state = (0, $6nfFC$useRef)({
|
|
690
750
|
isFocused: false,
|
|
691
|
-
isFocusVisible: autoFocus || $6nfFC$isFocusVisible()
|
|
751
|
+
isFocusVisible: autoFocus || (0, $6nfFC$isFocusVisible)()
|
|
692
752
|
});
|
|
693
|
-
let [
|
|
694
|
-
let [isFocusVisibleState, setFocusVisible] = $6nfFC$useState(()=>state.current.isFocused && state.current.isFocusVisible
|
|
695
|
-
);
|
|
696
|
-
let
|
|
697
|
-
, []);
|
|
698
|
-
let onFocusChange = $6nfFC$useCallback((isFocused)=>{
|
|
753
|
+
let [isFocused, setFocused] = (0, $6nfFC$useState)(false);
|
|
754
|
+
let [isFocusVisibleState, setFocusVisible] = (0, $6nfFC$useState)(()=>state.current.isFocused && state.current.isFocusVisible);
|
|
755
|
+
let updateState = (0, $6nfFC$useCallback)(()=>setFocusVisible(state.current.isFocused && state.current.isFocusVisible), []);
|
|
756
|
+
let onFocusChange = (0, $6nfFC$useCallback)((isFocused)=>{
|
|
699
757
|
state.current.isFocused = isFocused;
|
|
700
758
|
setFocused(isFocused);
|
|
701
759
|
updateState();
|
|
702
760
|
}, [
|
|
703
761
|
updateState
|
|
704
762
|
]);
|
|
705
|
-
$6nfFC$useFocusVisibleListener((isFocusVisible)=>{
|
|
763
|
+
(0, $6nfFC$useFocusVisibleListener)((isFocusVisible)=>{
|
|
706
764
|
state.current.isFocusVisible = isFocusVisible;
|
|
707
765
|
updateState();
|
|
708
766
|
}, [], {
|
|
709
767
|
isTextInput: isTextInput
|
|
710
768
|
});
|
|
711
|
-
let { focusProps: focusProps } = $6nfFC$useFocus({
|
|
769
|
+
let { focusProps: focusProps } = (0, $6nfFC$useFocus)({
|
|
712
770
|
isDisabled: within,
|
|
713
771
|
onFocusChange: onFocusChange
|
|
714
772
|
});
|
|
715
|
-
let { focusWithinProps: focusWithinProps } = $6nfFC$useFocusWithin({
|
|
773
|
+
let { focusWithinProps: focusWithinProps } = (0, $6nfFC$useFocusWithin)({
|
|
716
774
|
isDisabled: !within,
|
|
717
775
|
onFocusWithinChange: onFocusChange
|
|
718
776
|
});
|
|
719
777
|
return {
|
|
720
|
-
isFocused:
|
|
778
|
+
isFocused: isFocused,
|
|
721
779
|
isFocusVisible: state.current.isFocused && isFocusVisibleState,
|
|
722
780
|
focusProps: within ? focusWithinProps : focusProps
|
|
723
781
|
};
|
|
@@ -726,27 +784,36 @@ function $f7dceffc5ad7768b$export$4e328f61c538687f(props = {
|
|
|
726
784
|
|
|
727
785
|
function $907718708eab68af$export$1a38b4ad7f578e1d(props) {
|
|
728
786
|
let { children: children , focusClass: focusClass , focusRingClass: focusRingClass } = props;
|
|
729
|
-
let { isFocused: isFocused , isFocusVisible: isFocusVisible , focusProps: focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f(props);
|
|
730
|
-
let child = $6nfFC$react.Children.only(children);
|
|
731
|
-
return
|
|
787
|
+
let { isFocused: isFocused , isFocusVisible: isFocusVisible , focusProps: focusProps } = (0, $f7dceffc5ad7768b$export$4e328f61c538687f)(props);
|
|
788
|
+
let child = (0, $6nfFC$react).Children.only(children);
|
|
789
|
+
return /*#__PURE__*/ (0, $6nfFC$react).cloneElement(child, (0, $6nfFC$mergeProps)(child.props, {
|
|
732
790
|
...focusProps,
|
|
733
|
-
className: $6nfFC$clsx({
|
|
734
|
-
[focusClass ||
|
|
735
|
-
[focusRingClass ||
|
|
791
|
+
className: (0, $6nfFC$clsx)({
|
|
792
|
+
[focusClass || ""]: isFocused,
|
|
793
|
+
[focusRingClass || ""]: isFocusVisible
|
|
736
794
|
})
|
|
737
|
-
}))
|
|
795
|
+
}));
|
|
738
796
|
}
|
|
739
797
|
|
|
740
798
|
|
|
799
|
+
/*
|
|
800
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
801
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
802
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
803
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
804
|
+
*
|
|
805
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
806
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
807
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
808
|
+
* governing permissions and limitations under the License.
|
|
809
|
+
*/
|
|
741
810
|
|
|
742
811
|
|
|
743
812
|
|
|
744
|
-
|
|
745
|
-
let $e6afbd83fe6ebbd2$var$FocusableContext = /*#__PURE__*/ $6nfFC$react.createContext(null);
|
|
813
|
+
let $e6afbd83fe6ebbd2$var$FocusableContext = /*#__PURE__*/ (0, $6nfFC$react).createContext(null);
|
|
746
814
|
function $e6afbd83fe6ebbd2$var$useFocusableContext(ref) {
|
|
747
|
-
let context = $6nfFC$useContext($e6afbd83fe6ebbd2$var$FocusableContext) || {
|
|
748
|
-
|
|
749
|
-
$6nfFC$useSyncRef(context, ref);
|
|
815
|
+
let context = (0, $6nfFC$useContext)($e6afbd83fe6ebbd2$var$FocusableContext) || {};
|
|
816
|
+
(0, $6nfFC$useSyncRef)(context, ref);
|
|
750
817
|
// eslint-disable-next-line
|
|
751
818
|
let { ref: _ , ...otherProps } = context;
|
|
752
819
|
return otherProps;
|
|
@@ -759,27 +826,26 @@ function $e6afbd83fe6ebbd2$var$useFocusableContext(ref) {
|
|
|
759
826
|
...otherProps,
|
|
760
827
|
ref: ref
|
|
761
828
|
};
|
|
762
|
-
return
|
|
829
|
+
return /*#__PURE__*/ (0, $6nfFC$react).createElement($e6afbd83fe6ebbd2$var$FocusableContext.Provider, {
|
|
763
830
|
value: context
|
|
764
|
-
}, children)
|
|
831
|
+
}, children);
|
|
765
832
|
}
|
|
766
|
-
let $e6afbd83fe6ebbd2$export$13f3202a3e5ddd5 = /*#__PURE__*/ $6nfFC$react.forwardRef($e6afbd83fe6ebbd2$var$FocusableProvider);
|
|
833
|
+
let $e6afbd83fe6ebbd2$export$13f3202a3e5ddd5 = /*#__PURE__*/ (0, $6nfFC$react).forwardRef($e6afbd83fe6ebbd2$var$FocusableProvider);
|
|
767
834
|
function $e6afbd83fe6ebbd2$export$4c014de7c8940b4c(props, domRef) {
|
|
768
|
-
let { focusProps: focusProps } = $6nfFC$useFocus(props);
|
|
769
|
-
let { keyboardProps: keyboardProps } = $6nfFC$useKeyboard(props);
|
|
770
|
-
let interactions = $6nfFC$mergeProps(focusProps, keyboardProps);
|
|
835
|
+
let { focusProps: focusProps } = (0, $6nfFC$useFocus)(props);
|
|
836
|
+
let { keyboardProps: keyboardProps } = (0, $6nfFC$useKeyboard)(props);
|
|
837
|
+
let interactions = (0, $6nfFC$mergeProps)(focusProps, keyboardProps);
|
|
771
838
|
let domProps = $e6afbd83fe6ebbd2$var$useFocusableContext(domRef);
|
|
772
|
-
let interactionProps = props.isDisabled ? {
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
if (autoFocusRef.current && domRef.current) $6a99195332edec8b$export$80f3e147d781571c(domRef.current);
|
|
839
|
+
let interactionProps = props.isDisabled ? {} : domProps;
|
|
840
|
+
let autoFocusRef = (0, $6nfFC$useRef)(props.autoFocus);
|
|
841
|
+
(0, $6nfFC$useEffect)(()=>{
|
|
842
|
+
if (autoFocusRef.current && domRef.current) (0, $6a99195332edec8b$export$80f3e147d781571c)(domRef.current);
|
|
777
843
|
autoFocusRef.current = false;
|
|
778
844
|
}, [
|
|
779
845
|
domRef
|
|
780
846
|
]);
|
|
781
847
|
return {
|
|
782
|
-
focusableProps: $6nfFC$mergeProps({
|
|
848
|
+
focusableProps: (0, $6nfFC$mergeProps)({
|
|
783
849
|
...interactions,
|
|
784
850
|
tabIndex: props.excludeFromTabOrder && !props.isDisabled ? -1 : undefined
|
|
785
851
|
}, interactionProps)
|