@react-aria/focus 3.5.1 → 3.5.4
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/main.js +168 -166
- package/dist/main.js.map +1 -1
- package/dist/module.js +164 -162
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +1 -1
- package/package.json +5 -5
- package/src/FocusScope.tsx +1 -1
package/dist/module.js
CHANGED
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
import $
|
|
2
|
-
import {useLayoutEffect as $
|
|
3
|
-
import {getInteractionModality as $
|
|
4
|
-
import $
|
|
1
|
+
import $6nfFC$react, {useRef as $6nfFC$useRef, useContext as $6nfFC$useContext, useEffect as $6nfFC$useEffect, useState as $6nfFC$useState} from "react";
|
|
2
|
+
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
|
+
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
|
+
import $6nfFC$clsx from "clsx";
|
|
5
5
|
|
|
6
6
|
function $parcel$export(e, n, v, s) {
|
|
7
7
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
8
8
|
}
|
|
9
|
-
var $
|
|
9
|
+
var $9bf71ea28793e738$exports = {};
|
|
10
10
|
|
|
11
|
-
$parcel$export($
|
|
12
|
-
$parcel$export($
|
|
13
|
-
$parcel$export($
|
|
14
|
-
$parcel$export($
|
|
15
|
-
var $
|
|
11
|
+
$parcel$export($9bf71ea28793e738$exports, "FocusScope", () => $9bf71ea28793e738$export$20e40289641fbbb6);
|
|
12
|
+
$parcel$export($9bf71ea28793e738$exports, "useFocusManager", () => $9bf71ea28793e738$export$10c5169755ce7bd7);
|
|
13
|
+
$parcel$export($9bf71ea28793e738$exports, "getFocusableTreeWalker", () => $9bf71ea28793e738$export$2d6ec8fc375ceafa);
|
|
14
|
+
$parcel$export($9bf71ea28793e738$exports, "createFocusManager", () => $9bf71ea28793e738$export$c5251b9e124bf29);
|
|
15
|
+
var $6a99195332edec8b$exports = {};
|
|
16
16
|
|
|
17
|
-
$parcel$export($
|
|
17
|
+
$parcel$export($6a99195332edec8b$exports, "focusSafely", () => $6a99195332edec8b$export$80f3e147d781571c);
|
|
18
18
|
|
|
19
19
|
|
|
20
|
-
function $
|
|
20
|
+
function $6a99195332edec8b$export$80f3e147d781571c(element) {
|
|
21
21
|
// If the user is interacting with a virtual cursor, e.g. screen reader, then
|
|
22
22
|
// wait until after any animated transitions that are currently occurring on
|
|
23
23
|
// the page before shifting focus. This avoids issues with VoiceOver on iOS
|
|
24
24
|
// causing the page to scroll when moving focus if the element is transitioning
|
|
25
25
|
// from off the screen.
|
|
26
|
-
if ($
|
|
26
|
+
if ($6nfFC$getInteractionModality() === 'virtual') {
|
|
27
27
|
let lastFocusedElement = document.activeElement;
|
|
28
|
-
$
|
|
28
|
+
$6nfFC$runAfterTransition(()=>{
|
|
29
29
|
// If focus did not move and the element is still in the document, focus it.
|
|
30
|
-
if (document.activeElement === lastFocusedElement && document.contains(element)) $
|
|
30
|
+
if (document.activeElement === lastFocusedElement && document.contains(element)) $6nfFC$focusWithoutScrolling(element);
|
|
31
31
|
});
|
|
32
|
-
} else $
|
|
32
|
+
} else $6nfFC$focusWithoutScrolling(element);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
|
|
@@ -43,7 +43,7 @@ function $f2c1256fdcfd2c09$export$80f3e147d781571c(element) {
|
|
|
43
43
|
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
44
44
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
45
45
|
* governing permissions and limitations under the License.
|
|
46
|
-
*/ function $
|
|
46
|
+
*/ function $645f2e67b85a24c9$var$isStyleVisible(element) {
|
|
47
47
|
if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) return false;
|
|
48
48
|
let { display: display , visibility: visibility } = element.style;
|
|
49
49
|
let isVisible = display !== 'none' && visibility !== 'hidden' && visibility !== 'collapse';
|
|
@@ -54,27 +54,27 @@ function $f2c1256fdcfd2c09$export$80f3e147d781571c(element) {
|
|
|
54
54
|
}
|
|
55
55
|
return isVisible;
|
|
56
56
|
}
|
|
57
|
-
function $
|
|
57
|
+
function $645f2e67b85a24c9$var$isAttributeVisible(element, childElement) {
|
|
58
58
|
return !element.hasAttribute('hidden') && (element.nodeName === 'DETAILS' && childElement && childElement.nodeName !== 'SUMMARY' ? element.hasAttribute('open') : true);
|
|
59
59
|
}
|
|
60
|
-
function $
|
|
61
|
-
return element.nodeName !== '#comment' && $
|
|
60
|
+
function $645f2e67b85a24c9$export$e989c0fffaa6b27a(element, childElement) {
|
|
61
|
+
return element.nodeName !== '#comment' && $645f2e67b85a24c9$var$isStyleVisible(element) && $645f2e67b85a24c9$var$isAttributeVisible(element, childElement) && (!element.parentElement || $645f2e67b85a24c9$export$e989c0fffaa6b27a(element.parentElement, element));
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
|
|
65
65
|
|
|
66
66
|
|
|
67
|
-
const $
|
|
68
|
-
let $
|
|
69
|
-
let $
|
|
70
|
-
function $
|
|
67
|
+
const $9bf71ea28793e738$var$FocusContext = /*#__PURE__*/ $6nfFC$react.createContext(null);
|
|
68
|
+
let $9bf71ea28793e738$var$activeScope = null;
|
|
69
|
+
let $9bf71ea28793e738$var$scopes = new Map();
|
|
70
|
+
function $9bf71ea28793e738$export$20e40289641fbbb6(props) {
|
|
71
71
|
let { children: children , contain: contain , restoreFocus: restoreFocus , autoFocus: autoFocus } = props;
|
|
72
|
-
let startRef = $
|
|
73
|
-
let endRef = $
|
|
74
|
-
let scopeRef = $
|
|
75
|
-
let ctx = $
|
|
76
|
-
let parentScope = ctx
|
|
77
|
-
$
|
|
72
|
+
let startRef = $6nfFC$useRef();
|
|
73
|
+
let endRef = $6nfFC$useRef();
|
|
74
|
+
let scopeRef = $6nfFC$useRef([]);
|
|
75
|
+
let ctx = $6nfFC$useContext($9bf71ea28793e738$var$FocusContext);
|
|
76
|
+
let parentScope = ctx === null || ctx === void 0 ? void 0 : ctx.scopeRef;
|
|
77
|
+
$6nfFC$useLayoutEffect(()=>{
|
|
78
78
|
// Find all rendered nodes between the sentinels and add them to the scope.
|
|
79
79
|
let node = startRef.current.nextSibling;
|
|
80
80
|
let nodes = [];
|
|
@@ -87,42 +87,43 @@ function $0238e4b796d1715f$export$20e40289641fbbb6(props) {
|
|
|
87
87
|
children,
|
|
88
88
|
parentScope
|
|
89
89
|
]);
|
|
90
|
-
$
|
|
91
|
-
$
|
|
90
|
+
$6nfFC$useLayoutEffect(()=>{
|
|
91
|
+
$9bf71ea28793e738$var$scopes.set(scopeRef, parentScope);
|
|
92
92
|
return ()=>{
|
|
93
93
|
// Restore the active scope on unmount if this scope or a descendant scope is active.
|
|
94
94
|
// Parent effect cleanups run before children, so we need to check if the
|
|
95
95
|
// parent scope actually still exists before restoring the active scope to it.
|
|
96
|
-
if ((scopeRef === $
|
|
97
|
-
$
|
|
96
|
+
if ((scopeRef === $9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope(scopeRef, $9bf71ea28793e738$var$activeScope)) && (!parentScope || $9bf71ea28793e738$var$scopes.has(parentScope))) $9bf71ea28793e738$var$activeScope = parentScope;
|
|
97
|
+
$9bf71ea28793e738$var$scopes.delete(scopeRef);
|
|
98
98
|
};
|
|
99
99
|
}, [
|
|
100
100
|
scopeRef,
|
|
101
101
|
parentScope
|
|
102
102
|
]);
|
|
103
|
-
$
|
|
104
|
-
$
|
|
105
|
-
$
|
|
106
|
-
let focusManager = $
|
|
107
|
-
return(/*#__PURE__*/ $
|
|
103
|
+
$9bf71ea28793e738$var$useFocusContainment(scopeRef, contain);
|
|
104
|
+
$9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain);
|
|
105
|
+
$9bf71ea28793e738$var$useAutoFocus(scopeRef, autoFocus);
|
|
106
|
+
let focusManager = $9bf71ea28793e738$var$createFocusManagerForScope(scopeRef);
|
|
107
|
+
return(/*#__PURE__*/ $6nfFC$react.createElement($9bf71ea28793e738$var$FocusContext.Provider, {
|
|
108
108
|
value: {
|
|
109
109
|
scopeRef: scopeRef,
|
|
110
110
|
focusManager: focusManager
|
|
111
111
|
}
|
|
112
|
-
}, /*#__PURE__*/ $
|
|
112
|
+
}, /*#__PURE__*/ $6nfFC$react.createElement("span", {
|
|
113
113
|
"data-focus-scope-start": true,
|
|
114
114
|
hidden: true,
|
|
115
115
|
ref: startRef
|
|
116
|
-
}), children, /*#__PURE__*/ $
|
|
116
|
+
}), children, /*#__PURE__*/ $6nfFC$react.createElement("span", {
|
|
117
117
|
"data-focus-scope-end": true,
|
|
118
118
|
hidden: true,
|
|
119
119
|
ref: endRef
|
|
120
120
|
})));
|
|
121
121
|
}
|
|
122
|
-
function $
|
|
123
|
-
|
|
122
|
+
function $9bf71ea28793e738$export$10c5169755ce7bd7() {
|
|
123
|
+
var ref;
|
|
124
|
+
return (ref = $6nfFC$useContext($9bf71ea28793e738$var$FocusContext)) === null || ref === void 0 ? void 0 : ref.focusManager;
|
|
124
125
|
}
|
|
125
|
-
function $
|
|
126
|
+
function $9bf71ea28793e738$var$createFocusManagerForScope(scopeRef) {
|
|
126
127
|
return {
|
|
127
128
|
focusNext (opts = {
|
|
128
129
|
}) {
|
|
@@ -130,16 +131,16 @@ function $0238e4b796d1715f$var$createFocusManagerForScope(scopeRef) {
|
|
|
130
131
|
let { from: from , tabbable: tabbable , wrap: wrap } = opts;
|
|
131
132
|
let node = from || document.activeElement;
|
|
132
133
|
let sentinel = scope[0].previousElementSibling;
|
|
133
|
-
let walker = $
|
|
134
|
+
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa($9bf71ea28793e738$var$getScopeRoot(scope), {
|
|
134
135
|
tabbable: tabbable
|
|
135
136
|
}, scope);
|
|
136
|
-
walker.currentNode = $
|
|
137
|
+
walker.currentNode = $9bf71ea28793e738$var$isElementInScope(node, scope) ? node : sentinel;
|
|
137
138
|
let nextNode = walker.nextNode();
|
|
138
139
|
if (!nextNode && wrap) {
|
|
139
140
|
walker.currentNode = sentinel;
|
|
140
141
|
nextNode = walker.nextNode();
|
|
141
142
|
}
|
|
142
|
-
if (nextNode) $
|
|
143
|
+
if (nextNode) $9bf71ea28793e738$var$focusElement(nextNode, true);
|
|
143
144
|
return nextNode;
|
|
144
145
|
},
|
|
145
146
|
focusPrevious (opts = {
|
|
@@ -148,45 +149,45 @@ function $0238e4b796d1715f$var$createFocusManagerForScope(scopeRef) {
|
|
|
148
149
|
let { from: from , tabbable: tabbable , wrap: wrap } = opts;
|
|
149
150
|
let node = from || document.activeElement;
|
|
150
151
|
let sentinel = scope[scope.length - 1].nextElementSibling;
|
|
151
|
-
let walker = $
|
|
152
|
+
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa($9bf71ea28793e738$var$getScopeRoot(scope), {
|
|
152
153
|
tabbable: tabbable
|
|
153
154
|
}, scope);
|
|
154
|
-
walker.currentNode = $
|
|
155
|
+
walker.currentNode = $9bf71ea28793e738$var$isElementInScope(node, scope) ? node : sentinel;
|
|
155
156
|
let previousNode = walker.previousNode();
|
|
156
157
|
if (!previousNode && wrap) {
|
|
157
158
|
walker.currentNode = sentinel;
|
|
158
159
|
previousNode = walker.previousNode();
|
|
159
160
|
}
|
|
160
|
-
if (previousNode) $
|
|
161
|
+
if (previousNode) $9bf71ea28793e738$var$focusElement(previousNode, true);
|
|
161
162
|
return previousNode;
|
|
162
163
|
},
|
|
163
164
|
focusFirst (opts = {
|
|
164
165
|
}) {
|
|
165
166
|
let scope = scopeRef.current;
|
|
166
167
|
let { tabbable: tabbable } = opts;
|
|
167
|
-
let walker = $
|
|
168
|
+
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa($9bf71ea28793e738$var$getScopeRoot(scope), {
|
|
168
169
|
tabbable: tabbable
|
|
169
170
|
}, scope);
|
|
170
171
|
walker.currentNode = scope[0].previousElementSibling;
|
|
171
172
|
let nextNode = walker.nextNode();
|
|
172
|
-
if (nextNode) $
|
|
173
|
+
if (nextNode) $9bf71ea28793e738$var$focusElement(nextNode, true);
|
|
173
174
|
return nextNode;
|
|
174
175
|
},
|
|
175
176
|
focusLast (opts = {
|
|
176
177
|
}) {
|
|
177
178
|
let scope = scopeRef.current;
|
|
178
179
|
let { tabbable: tabbable } = opts;
|
|
179
|
-
let walker = $
|
|
180
|
+
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa($9bf71ea28793e738$var$getScopeRoot(scope), {
|
|
180
181
|
tabbable: tabbable
|
|
181
182
|
}, scope);
|
|
182
183
|
walker.currentNode = scope[scope.length - 1].nextElementSibling;
|
|
183
184
|
let previousNode = walker.previousNode();
|
|
184
|
-
if (previousNode) $
|
|
185
|
+
if (previousNode) $9bf71ea28793e738$var$focusElement(previousNode, true);
|
|
185
186
|
return previousNode;
|
|
186
187
|
}
|
|
187
188
|
};
|
|
188
189
|
}
|
|
189
|
-
const $
|
|
190
|
+
const $9bf71ea28793e738$var$focusableElements = [
|
|
190
191
|
'input:not([disabled]):not([type=hidden])',
|
|
191
192
|
'select:not([disabled])',
|
|
192
193
|
'textarea:not([disabled])',
|
|
@@ -201,25 +202,25 @@ const $0238e4b796d1715f$var$focusableElements = [
|
|
|
201
202
|
'video[controls]',
|
|
202
203
|
'[contenteditable]'
|
|
203
204
|
];
|
|
204
|
-
const $
|
|
205
|
-
$
|
|
206
|
-
const $
|
|
207
|
-
function $
|
|
205
|
+
const $9bf71ea28793e738$var$FOCUSABLE_ELEMENT_SELECTOR = $9bf71ea28793e738$var$focusableElements.join(':not([hidden]),') + ',[tabindex]:not([disabled]):not([hidden])';
|
|
206
|
+
$9bf71ea28793e738$var$focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
|
|
207
|
+
const $9bf71ea28793e738$var$TABBABLE_ELEMENT_SELECTOR = $9bf71ea28793e738$var$focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
|
|
208
|
+
function $9bf71ea28793e738$var$getScopeRoot(scope) {
|
|
208
209
|
return scope[0].parentElement;
|
|
209
210
|
}
|
|
210
|
-
function $
|
|
211
|
-
let focusedNode = $
|
|
212
|
-
let raf = $
|
|
213
|
-
$
|
|
211
|
+
function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
|
|
212
|
+
let focusedNode = $6nfFC$useRef();
|
|
213
|
+
let raf = $6nfFC$useRef(null);
|
|
214
|
+
$6nfFC$useLayoutEffect(()=>{
|
|
214
215
|
let scope1 = scopeRef.current;
|
|
215
216
|
if (!contain) return;
|
|
216
217
|
// Handle the Tab key to contain focus within the scope
|
|
217
218
|
let onKeyDown = (e)=>{
|
|
218
|
-
if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || scopeRef !== $
|
|
219
|
+
if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || scopeRef !== $9bf71ea28793e738$var$activeScope) return;
|
|
219
220
|
let focusedElement = document.activeElement;
|
|
220
221
|
let scope = scopeRef.current;
|
|
221
|
-
if (!$
|
|
222
|
-
let walker = $
|
|
222
|
+
if (!$9bf71ea28793e738$var$isElementInScope(focusedElement, scope)) return;
|
|
223
|
+
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa($9bf71ea28793e738$var$getScopeRoot(scope), {
|
|
223
224
|
tabbable: true
|
|
224
225
|
}, scope);
|
|
225
226
|
walker.currentNode = focusedElement;
|
|
@@ -229,27 +230,27 @@ function $0238e4b796d1715f$var$useFocusContainment(scopeRef, contain) {
|
|
|
229
230
|
nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
|
|
230
231
|
}
|
|
231
232
|
e.preventDefault();
|
|
232
|
-
if (nextElement) $
|
|
233
|
+
if (nextElement) $9bf71ea28793e738$var$focusElement(nextElement, true);
|
|
233
234
|
};
|
|
234
235
|
let onFocus = (e)=>{
|
|
235
236
|
// If focusing an element in a child scope of the currently active scope, the child becomes active.
|
|
236
237
|
// Moving out of the active scope to an ancestor is not allowed.
|
|
237
|
-
if (!$
|
|
238
|
-
$
|
|
238
|
+
if (!$9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope($9bf71ea28793e738$var$activeScope, scopeRef)) {
|
|
239
|
+
$9bf71ea28793e738$var$activeScope = scopeRef;
|
|
239
240
|
focusedNode.current = e.target;
|
|
240
|
-
} else if (scopeRef === $
|
|
241
|
+
} else if (scopeRef === $9bf71ea28793e738$var$activeScope && !$9bf71ea28793e738$var$isElementInChildScope(e.target, scopeRef)) {
|
|
241
242
|
// If a focus event occurs outside the active scope (e.g. user tabs from browser location bar),
|
|
242
243
|
// restore focus to the previously focused node or the first tabbable element in the active scope.
|
|
243
244
|
if (focusedNode.current) focusedNode.current.focus();
|
|
244
|
-
else if ($
|
|
245
|
-
} else if (scopeRef === $
|
|
245
|
+
else if ($9bf71ea28793e738$var$activeScope) $9bf71ea28793e738$var$focusFirstInScope($9bf71ea28793e738$var$activeScope.current);
|
|
246
|
+
} else if (scopeRef === $9bf71ea28793e738$var$activeScope) focusedNode.current = e.target;
|
|
246
247
|
};
|
|
247
248
|
let onBlur = (e)=>{
|
|
248
249
|
// Firefox doesn't shift focus back to the Dialog properly without this
|
|
249
250
|
raf.current = requestAnimationFrame(()=>{
|
|
250
251
|
// Use document.activeElement instead of e.relatedTarget so we can tell if user clicked into iframe
|
|
251
|
-
if (scopeRef === $
|
|
252
|
-
$
|
|
252
|
+
if (scopeRef === $9bf71ea28793e738$var$activeScope && !$9bf71ea28793e738$var$isElementInChildScope(document.activeElement, scopeRef)) {
|
|
253
|
+
$9bf71ea28793e738$var$activeScope = scopeRef;
|
|
253
254
|
focusedNode.current = e.target;
|
|
254
255
|
focusedNode.current.focus();
|
|
255
256
|
}
|
|
@@ -274,40 +275,40 @@ function $0238e4b796d1715f$var$useFocusContainment(scopeRef, contain) {
|
|
|
274
275
|
contain
|
|
275
276
|
]);
|
|
276
277
|
// eslint-disable-next-line arrow-body-style
|
|
277
|
-
$
|
|
278
|
+
$6nfFC$useEffect(()=>{
|
|
278
279
|
return ()=>cancelAnimationFrame(raf.current)
|
|
279
280
|
;
|
|
280
281
|
}, [
|
|
281
282
|
raf
|
|
282
283
|
]);
|
|
283
284
|
}
|
|
284
|
-
function $
|
|
285
|
-
for (let scope of $
|
|
286
|
-
if ($
|
|
285
|
+
function $9bf71ea28793e738$var$isElementInAnyScope(element) {
|
|
286
|
+
for (let scope of $9bf71ea28793e738$var$scopes.keys()){
|
|
287
|
+
if ($9bf71ea28793e738$var$isElementInScope(element, scope.current)) return true;
|
|
287
288
|
}
|
|
288
289
|
return false;
|
|
289
290
|
}
|
|
290
|
-
function $
|
|
291
|
+
function $9bf71ea28793e738$var$isElementInScope(element, scope) {
|
|
291
292
|
return scope.some((node)=>node.contains(element)
|
|
292
293
|
);
|
|
293
294
|
}
|
|
294
|
-
function $
|
|
295
|
+
function $9bf71ea28793e738$var$isElementInChildScope(element, scope) {
|
|
295
296
|
// node.contains in isElementInScope covers child scopes that are also DOM children,
|
|
296
297
|
// but does not cover child scopes in portals.
|
|
297
|
-
for (let s of $
|
|
298
|
-
if ((s === scope || $
|
|
298
|
+
for (let s of $9bf71ea28793e738$var$scopes.keys()){
|
|
299
|
+
if ((s === scope || $9bf71ea28793e738$var$isAncestorScope(scope, s)) && $9bf71ea28793e738$var$isElementInScope(element, s.current)) return true;
|
|
299
300
|
}
|
|
300
301
|
return false;
|
|
301
302
|
}
|
|
302
|
-
function $
|
|
303
|
-
let parent = $
|
|
303
|
+
function $9bf71ea28793e738$var$isAncestorScope(ancestor, scope) {
|
|
304
|
+
let parent = $9bf71ea28793e738$var$scopes.get(scope);
|
|
304
305
|
if (!parent) return false;
|
|
305
306
|
if (parent === ancestor) return true;
|
|
306
|
-
return $
|
|
307
|
+
return $9bf71ea28793e738$var$isAncestorScope(ancestor, parent);
|
|
307
308
|
}
|
|
308
|
-
function $
|
|
309
|
+
function $9bf71ea28793e738$var$focusElement(element, scroll = false) {
|
|
309
310
|
if (element != null && !scroll) try {
|
|
310
|
-
$
|
|
311
|
+
$6a99195332edec8b$export$80f3e147d781571c(element);
|
|
311
312
|
} catch (err) {
|
|
312
313
|
// ignore
|
|
313
314
|
}
|
|
@@ -317,29 +318,29 @@ function $0238e4b796d1715f$var$focusElement(element, scroll = false) {
|
|
|
317
318
|
// ignore
|
|
318
319
|
}
|
|
319
320
|
}
|
|
320
|
-
function $
|
|
321
|
+
function $9bf71ea28793e738$var$focusFirstInScope(scope) {
|
|
321
322
|
let sentinel = scope[0].previousElementSibling;
|
|
322
|
-
let walker = $
|
|
323
|
+
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa($9bf71ea28793e738$var$getScopeRoot(scope), {
|
|
323
324
|
tabbable: true
|
|
324
325
|
}, scope);
|
|
325
326
|
walker.currentNode = sentinel;
|
|
326
|
-
$
|
|
327
|
+
$9bf71ea28793e738$var$focusElement(walker.nextNode());
|
|
327
328
|
}
|
|
328
|
-
function $
|
|
329
|
-
const autoFocusRef = $
|
|
330
|
-
$
|
|
329
|
+
function $9bf71ea28793e738$var$useAutoFocus(scopeRef, autoFocus) {
|
|
330
|
+
const autoFocusRef = $6nfFC$react.useRef(autoFocus);
|
|
331
|
+
$6nfFC$useEffect(()=>{
|
|
331
332
|
if (autoFocusRef.current) {
|
|
332
|
-
$
|
|
333
|
-
if (!$
|
|
333
|
+
$9bf71ea28793e738$var$activeScope = scopeRef;
|
|
334
|
+
if (!$9bf71ea28793e738$var$isElementInScope(document.activeElement, $9bf71ea28793e738$var$activeScope.current)) $9bf71ea28793e738$var$focusFirstInScope(scopeRef.current);
|
|
334
335
|
}
|
|
335
336
|
autoFocusRef.current = false;
|
|
336
337
|
}, []);
|
|
337
338
|
}
|
|
338
|
-
function $
|
|
339
|
+
function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain) {
|
|
339
340
|
// create a ref during render instead of useLayoutEffect so the active element is saved before a child with autoFocus=true mounts.
|
|
340
|
-
const nodeToRestoreRef = $
|
|
341
|
+
const nodeToRestoreRef = $6nfFC$useRef(typeof document !== 'undefined' ? document.activeElement : null);
|
|
341
342
|
// useLayoutEffect instead of useEffect so the active element is saved synchronously instead of asynchronously.
|
|
342
|
-
$
|
|
343
|
+
$6nfFC$useLayoutEffect(()=>{
|
|
343
344
|
let nodeToRestore = nodeToRestoreRef.current;
|
|
344
345
|
if (!restoreFocus) return;
|
|
345
346
|
// Handle the Tab key so that tabbing out of the scope goes to the next element
|
|
@@ -349,9 +350,9 @@ function $0238e4b796d1715f$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
349
350
|
let onKeyDown = (e)=>{
|
|
350
351
|
if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey) return;
|
|
351
352
|
let focusedElement = document.activeElement;
|
|
352
|
-
if (!$
|
|
353
|
+
if (!$9bf71ea28793e738$var$isElementInScope(focusedElement, scopeRef.current)) return;
|
|
353
354
|
// Create a DOM tree walker that matches all tabbable elements
|
|
354
|
-
let walker = $
|
|
355
|
+
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(document.body, {
|
|
355
356
|
tabbable: true
|
|
356
357
|
});
|
|
357
358
|
// Find the next tabbable element after the currently focused element
|
|
@@ -360,26 +361,26 @@ function $0238e4b796d1715f$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
360
361
|
if (!document.body.contains(nodeToRestore) || nodeToRestore === document.body) nodeToRestore = null;
|
|
361
362
|
// If there is no next element, or it is outside the current scope, move focus to the
|
|
362
363
|
// next element after the node to restore to instead.
|
|
363
|
-
if ((!nextElement || !$
|
|
364
|
+
if ((!nextElement || !$9bf71ea28793e738$var$isElementInScope(nextElement, scopeRef.current)) && nodeToRestore) {
|
|
364
365
|
walker.currentNode = nodeToRestore;
|
|
365
366
|
// Skip over elements within the scope, in case the scope immediately follows the node to restore.
|
|
366
367
|
do nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
|
|
367
|
-
while ($
|
|
368
|
+
while ($9bf71ea28793e738$var$isElementInScope(nextElement, scopeRef.current))
|
|
368
369
|
e.preventDefault();
|
|
369
370
|
e.stopPropagation();
|
|
370
|
-
if (nextElement) $
|
|
371
|
+
if (nextElement) $9bf71ea28793e738$var$focusElement(nextElement, true);
|
|
371
372
|
else // If there is no next element and the nodeToRestore isn't within a FocusScope (i.e. we are leaving the top level focus scope)
|
|
372
373
|
// then move focus to the body.
|
|
373
374
|
// Otherwise restore focus to the nodeToRestore (e.g menu within a popover -> tabbing to close the menu should move focus to menu trigger)
|
|
374
|
-
if (!$
|
|
375
|
-
else $
|
|
375
|
+
if (!$9bf71ea28793e738$var$isElementInAnyScope(nodeToRestore)) focusedElement.blur();
|
|
376
|
+
else $9bf71ea28793e738$var$focusElement(nodeToRestore, true);
|
|
376
377
|
}
|
|
377
378
|
};
|
|
378
379
|
if (!contain) document.addEventListener('keydown', onKeyDown, true);
|
|
379
380
|
return ()=>{
|
|
380
381
|
if (!contain) document.removeEventListener('keydown', onKeyDown, true);
|
|
381
|
-
if (restoreFocus && nodeToRestore && $
|
|
382
|
-
if (document.body.contains(nodeToRestore)) $
|
|
382
|
+
if (restoreFocus && nodeToRestore && $9bf71ea28793e738$var$isElementInScope(document.activeElement, scopeRef.current)) requestAnimationFrame(()=>{
|
|
383
|
+
if (document.body.contains(nodeToRestore)) $9bf71ea28793e738$var$focusElement(nodeToRestore);
|
|
383
384
|
});
|
|
384
385
|
};
|
|
385
386
|
}, [
|
|
@@ -388,27 +389,28 @@ function $0238e4b796d1715f$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
388
389
|
contain
|
|
389
390
|
]);
|
|
390
391
|
}
|
|
391
|
-
function $
|
|
392
|
-
let selector = opts
|
|
392
|
+
function $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, opts, scope) {
|
|
393
|
+
let selector = (opts === null || opts === void 0 ? void 0 : opts.tabbable) ? $9bf71ea28793e738$var$TABBABLE_ELEMENT_SELECTOR : $9bf71ea28793e738$var$FOCUSABLE_ELEMENT_SELECTOR;
|
|
393
394
|
let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
|
|
394
395
|
acceptNode (node) {
|
|
396
|
+
var ref;
|
|
395
397
|
// Skip nodes inside the starting node.
|
|
396
|
-
if (opts
|
|
397
|
-
if (node.matches(selector) && $
|
|
398
|
+
if (opts === null || opts === void 0 ? void 0 : (ref = opts.from) === null || ref === void 0 ? void 0 : ref.contains(node)) return NodeFilter.FILTER_REJECT;
|
|
399
|
+
if (node.matches(selector) && $645f2e67b85a24c9$export$e989c0fffaa6b27a(node) && (!scope || $9bf71ea28793e738$var$isElementInScope(node, scope))) return NodeFilter.FILTER_ACCEPT;
|
|
398
400
|
return NodeFilter.FILTER_SKIP;
|
|
399
401
|
}
|
|
400
402
|
});
|
|
401
|
-
if (opts
|
|
403
|
+
if (opts === null || opts === void 0 ? void 0 : opts.from) walker.currentNode = opts.from;
|
|
402
404
|
return walker;
|
|
403
405
|
}
|
|
404
|
-
function $
|
|
406
|
+
function $9bf71ea28793e738$export$c5251b9e124bf29(ref) {
|
|
405
407
|
return {
|
|
406
408
|
focusNext (opts = {
|
|
407
409
|
}) {
|
|
408
410
|
let root = ref.current;
|
|
409
411
|
let { from: from , tabbable: tabbable , wrap: wrap } = opts;
|
|
410
412
|
let node = from || document.activeElement;
|
|
411
|
-
let walker = $
|
|
413
|
+
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, {
|
|
412
414
|
tabbable: tabbable
|
|
413
415
|
});
|
|
414
416
|
if (root.contains(node)) walker.currentNode = node;
|
|
@@ -417,7 +419,7 @@ function $0238e4b796d1715f$export$c5251b9e124bf29(ref) {
|
|
|
417
419
|
walker.currentNode = root;
|
|
418
420
|
nextNode = walker.nextNode();
|
|
419
421
|
}
|
|
420
|
-
if (nextNode) $
|
|
422
|
+
if (nextNode) $9bf71ea28793e738$var$focusElement(nextNode, true);
|
|
421
423
|
return nextNode;
|
|
422
424
|
},
|
|
423
425
|
focusPrevious (opts = {
|
|
@@ -425,48 +427,48 @@ function $0238e4b796d1715f$export$c5251b9e124bf29(ref) {
|
|
|
425
427
|
let root = ref.current;
|
|
426
428
|
let { from: from , tabbable: tabbable , wrap: wrap } = opts;
|
|
427
429
|
let node = from || document.activeElement;
|
|
428
|
-
let walker = $
|
|
430
|
+
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, {
|
|
429
431
|
tabbable: tabbable
|
|
430
432
|
});
|
|
431
433
|
if (root.contains(node)) walker.currentNode = node;
|
|
432
434
|
else {
|
|
433
|
-
let next = $
|
|
434
|
-
if (next) $
|
|
435
|
+
let next = $9bf71ea28793e738$var$last(walker);
|
|
436
|
+
if (next) $9bf71ea28793e738$var$focusElement(next, true);
|
|
435
437
|
return next;
|
|
436
438
|
}
|
|
437
439
|
let previousNode = walker.previousNode();
|
|
438
440
|
if (!previousNode && wrap) {
|
|
439
441
|
walker.currentNode = root;
|
|
440
|
-
previousNode = $
|
|
442
|
+
previousNode = $9bf71ea28793e738$var$last(walker);
|
|
441
443
|
}
|
|
442
|
-
if (previousNode) $
|
|
444
|
+
if (previousNode) $9bf71ea28793e738$var$focusElement(previousNode, true);
|
|
443
445
|
return previousNode;
|
|
444
446
|
},
|
|
445
447
|
focusFirst (opts = {
|
|
446
448
|
}) {
|
|
447
449
|
let root = ref.current;
|
|
448
450
|
let { tabbable: tabbable } = opts;
|
|
449
|
-
let walker = $
|
|
451
|
+
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, {
|
|
450
452
|
tabbable: tabbable
|
|
451
453
|
});
|
|
452
454
|
let nextNode = walker.nextNode();
|
|
453
|
-
if (nextNode) $
|
|
455
|
+
if (nextNode) $9bf71ea28793e738$var$focusElement(nextNode, true);
|
|
454
456
|
return nextNode;
|
|
455
457
|
},
|
|
456
458
|
focusLast (opts = {
|
|
457
459
|
}) {
|
|
458
460
|
let root = ref.current;
|
|
459
461
|
let { tabbable: tabbable } = opts;
|
|
460
|
-
let walker = $
|
|
462
|
+
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, {
|
|
461
463
|
tabbable: tabbable
|
|
462
464
|
});
|
|
463
|
-
let next = $
|
|
464
|
-
if (next) $
|
|
465
|
+
let next = $9bf71ea28793e738$var$last(walker);
|
|
466
|
+
if (next) $9bf71ea28793e738$var$focusElement(next, true);
|
|
465
467
|
return next;
|
|
466
468
|
}
|
|
467
469
|
};
|
|
468
470
|
}
|
|
469
|
-
function $
|
|
471
|
+
function $9bf71ea28793e738$var$last(walker) {
|
|
470
472
|
let next;
|
|
471
473
|
let last;
|
|
472
474
|
do {
|
|
@@ -477,27 +479,27 @@ function $0238e4b796d1715f$var$last(walker) {
|
|
|
477
479
|
}
|
|
478
480
|
|
|
479
481
|
|
|
480
|
-
var $
|
|
482
|
+
var $907718708eab68af$exports = {};
|
|
481
483
|
|
|
482
|
-
$parcel$export($
|
|
484
|
+
$parcel$export($907718708eab68af$exports, "FocusRing", () => $907718708eab68af$export$1a38b4ad7f578e1d);
|
|
483
485
|
|
|
484
486
|
|
|
485
487
|
|
|
486
|
-
var $
|
|
488
|
+
var $f7dceffc5ad7768b$exports = {};
|
|
487
489
|
|
|
488
|
-
$parcel$export($
|
|
490
|
+
$parcel$export($f7dceffc5ad7768b$exports, "useFocusRing", () => $f7dceffc5ad7768b$export$4e328f61c538687f);
|
|
489
491
|
|
|
490
492
|
|
|
491
493
|
|
|
492
|
-
function $
|
|
494
|
+
function $f7dceffc5ad7768b$export$4e328f61c538687f(props = {
|
|
493
495
|
}) {
|
|
494
496
|
let { autoFocus: autoFocus = false , isTextInput: isTextInput , within: within } = props;
|
|
495
|
-
let state = $
|
|
497
|
+
let state = $6nfFC$useRef({
|
|
496
498
|
isFocused: false,
|
|
497
|
-
isFocusVisible: autoFocus || $
|
|
499
|
+
isFocusVisible: autoFocus || $6nfFC$isFocusVisible()
|
|
498
500
|
}).current;
|
|
499
|
-
let [isFocused1, setFocused] = $
|
|
500
|
-
let [isFocusVisibleState, setFocusVisible] = $
|
|
501
|
+
let [isFocused1, setFocused] = $6nfFC$useState(false);
|
|
502
|
+
let [isFocusVisibleState, setFocusVisible] = $6nfFC$useState(()=>state.isFocused && state.isFocusVisible
|
|
501
503
|
);
|
|
502
504
|
let updateState = ()=>setFocusVisible(state.isFocused && state.isFocusVisible)
|
|
503
505
|
;
|
|
@@ -506,17 +508,17 @@ function $e974583017b16a4e$export$4e328f61c538687f(props = {
|
|
|
506
508
|
setFocused(isFocused);
|
|
507
509
|
updateState();
|
|
508
510
|
};
|
|
509
|
-
$
|
|
511
|
+
$6nfFC$useFocusVisibleListener((isFocusVisible)=>{
|
|
510
512
|
state.isFocusVisible = isFocusVisible;
|
|
511
513
|
updateState();
|
|
512
514
|
}, [], {
|
|
513
515
|
isTextInput: isTextInput
|
|
514
516
|
});
|
|
515
|
-
let { focusProps: focusProps } = $
|
|
517
|
+
let { focusProps: focusProps } = $6nfFC$useFocus({
|
|
516
518
|
isDisabled: within,
|
|
517
519
|
onFocusChange: onFocusChange
|
|
518
520
|
});
|
|
519
|
-
let { focusWithinProps: focusWithinProps } = $
|
|
521
|
+
let { focusWithinProps: focusWithinProps } = $6nfFC$useFocusWithin({
|
|
520
522
|
isDisabled: !within,
|
|
521
523
|
onFocusWithinChange: onFocusChange
|
|
522
524
|
});
|
|
@@ -528,13 +530,13 @@ function $e974583017b16a4e$export$4e328f61c538687f(props = {
|
|
|
528
530
|
}
|
|
529
531
|
|
|
530
532
|
|
|
531
|
-
function $
|
|
533
|
+
function $907718708eab68af$export$1a38b4ad7f578e1d(props) {
|
|
532
534
|
let { children: children , focusClass: focusClass , focusRingClass: focusRingClass } = props;
|
|
533
|
-
let { isFocused: isFocused , isFocusVisible: isFocusVisible , focusProps: focusProps } = $
|
|
534
|
-
let child = $
|
|
535
|
-
return(/*#__PURE__*/ $
|
|
535
|
+
let { isFocused: isFocused , isFocusVisible: isFocusVisible , focusProps: focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f(props);
|
|
536
|
+
let child = $6nfFC$react.Children.only(children);
|
|
537
|
+
return(/*#__PURE__*/ $6nfFC$react.cloneElement(child, $6nfFC$mergeProps(child.props, {
|
|
536
538
|
...focusProps,
|
|
537
|
-
className: $
|
|
539
|
+
className: $6nfFC$clsx({
|
|
538
540
|
[focusClass || '']: isFocused,
|
|
539
541
|
[focusRingClass || '']: isFocusVisible
|
|
540
542
|
})
|
|
@@ -542,49 +544,49 @@ function $db88f84346fe3322$export$1a38b4ad7f578e1d(props) {
|
|
|
542
544
|
}
|
|
543
545
|
|
|
544
546
|
|
|
545
|
-
var $
|
|
547
|
+
var $e6afbd83fe6ebbd2$exports = {};
|
|
546
548
|
|
|
547
|
-
$parcel$export($
|
|
548
|
-
$parcel$export($
|
|
549
|
+
$parcel$export($e6afbd83fe6ebbd2$exports, "FocusableProvider", () => $e6afbd83fe6ebbd2$export$13f3202a3e5ddd5);
|
|
550
|
+
$parcel$export($e6afbd83fe6ebbd2$exports, "useFocusable", () => $e6afbd83fe6ebbd2$export$4c014de7c8940b4c);
|
|
549
551
|
|
|
550
552
|
|
|
551
553
|
|
|
552
|
-
let $
|
|
553
|
-
function $
|
|
554
|
-
let context = $
|
|
554
|
+
let $e6afbd83fe6ebbd2$var$FocusableContext = /*#__PURE__*/ $6nfFC$react.createContext(null);
|
|
555
|
+
function $e6afbd83fe6ebbd2$var$useFocusableContext(ref) {
|
|
556
|
+
let context = $6nfFC$useContext($e6afbd83fe6ebbd2$var$FocusableContext) || {
|
|
555
557
|
};
|
|
556
|
-
$
|
|
558
|
+
$6nfFC$useSyncRef(context, ref);
|
|
557
559
|
// eslint-disable-next-line
|
|
558
560
|
let { ref: _ , ...otherProps } = context;
|
|
559
561
|
return otherProps;
|
|
560
562
|
}
|
|
561
563
|
/**
|
|
562
564
|
* Provides DOM props to the nearest focusable child.
|
|
563
|
-
*/ function $
|
|
565
|
+
*/ function $e6afbd83fe6ebbd2$var$FocusableProvider(props, ref) {
|
|
564
566
|
let { children: children , ...otherProps } = props;
|
|
565
567
|
let context = {
|
|
566
568
|
...otherProps,
|
|
567
569
|
ref: ref
|
|
568
570
|
};
|
|
569
|
-
return(/*#__PURE__*/ $
|
|
571
|
+
return(/*#__PURE__*/ $6nfFC$react.createElement($e6afbd83fe6ebbd2$var$FocusableContext.Provider, {
|
|
570
572
|
value: context
|
|
571
573
|
}, children));
|
|
572
574
|
}
|
|
573
|
-
let $
|
|
574
|
-
function $
|
|
575
|
-
let { focusProps: focusProps } = $
|
|
576
|
-
let { keyboardProps: keyboardProps } = $
|
|
577
|
-
let interactions = $
|
|
578
|
-
let domProps = $
|
|
575
|
+
let $e6afbd83fe6ebbd2$export$13f3202a3e5ddd5 = /*#__PURE__*/ $6nfFC$react.forwardRef($e6afbd83fe6ebbd2$var$FocusableProvider);
|
|
576
|
+
function $e6afbd83fe6ebbd2$export$4c014de7c8940b4c(props, domRef) {
|
|
577
|
+
let { focusProps: focusProps } = $6nfFC$useFocus(props);
|
|
578
|
+
let { keyboardProps: keyboardProps } = $6nfFC$useKeyboard(props);
|
|
579
|
+
let interactions = $6nfFC$mergeProps(focusProps, keyboardProps);
|
|
580
|
+
let domProps = $e6afbd83fe6ebbd2$var$useFocusableContext(domRef);
|
|
579
581
|
let interactionProps = props.isDisabled ? {
|
|
580
582
|
} : domProps;
|
|
581
|
-
let autoFocusRef = $
|
|
582
|
-
$
|
|
583
|
+
let autoFocusRef = $6nfFC$useRef(props.autoFocus);
|
|
584
|
+
$6nfFC$useEffect(()=>{
|
|
583
585
|
if (autoFocusRef.current && domRef.current) domRef.current.focus();
|
|
584
586
|
autoFocusRef.current = false;
|
|
585
587
|
}, []);
|
|
586
588
|
return {
|
|
587
|
-
focusableProps: $
|
|
589
|
+
focusableProps: $6nfFC$mergeProps({
|
|
588
590
|
...interactions,
|
|
589
591
|
tabIndex: props.excludeFromTabOrder && !props.isDisabled ? -1 : undefined
|
|
590
592
|
}, interactionProps)
|
|
@@ -596,5 +598,5 @@ function $e82d8245213b3ebf$export$4c014de7c8940b4c(props, domRef) {
|
|
|
596
598
|
|
|
597
599
|
|
|
598
600
|
|
|
599
|
-
export {$
|
|
601
|
+
export {$9bf71ea28793e738$export$20e40289641fbbb6 as FocusScope, $9bf71ea28793e738$export$10c5169755ce7bd7 as useFocusManager, $9bf71ea28793e738$export$2d6ec8fc375ceafa as getFocusableTreeWalker, $9bf71ea28793e738$export$c5251b9e124bf29 as createFocusManager, $907718708eab68af$export$1a38b4ad7f578e1d as FocusRing, $e6afbd83fe6ebbd2$export$13f3202a3e5ddd5 as FocusableProvider, $e6afbd83fe6ebbd2$export$4c014de7c8940b4c as useFocusable, $f7dceffc5ad7768b$export$4e328f61c538687f as useFocusRing, $6a99195332edec8b$export$80f3e147d781571c as focusSafely};
|
|
600
602
|
//# sourceMappingURL=module.js.map
|