@react-aria/focus 3.19.1 → 3.20.1
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/FocusScope.main.js +34 -48
- package/dist/FocusScope.main.js.map +1 -1
- package/dist/FocusScope.mjs +36 -49
- package/dist/FocusScope.module.js +36 -49
- package/dist/FocusScope.module.js.map +1 -1
- package/dist/import.mjs +6 -4
- package/dist/main.js +13 -6
- package/dist/main.js.map +1 -1
- package/dist/module.js +6 -4
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +10 -28
- package/dist/types.d.ts.map +1 -1
- package/dist/virtualFocus.main.js +46 -0
- package/dist/virtualFocus.main.js.map +1 -0
- package/dist/virtualFocus.mjs +38 -0
- package/dist/virtualFocus.module.js +38 -0
- package/dist/virtualFocus.module.js.map +1 -0
- package/package.json +5 -5
- package/src/FocusScope.tsx +60 -63
- package/src/index.ts +6 -4
- package/src/virtualFocus.ts +33 -0
- package/dist/focusSafely.main.js +0 -39
- package/dist/focusSafely.main.js.map +0 -1
- package/dist/focusSafely.mjs +0 -34
- package/dist/focusSafely.module.js +0 -34
- package/dist/focusSafely.module.js.map +0 -1
- package/dist/useFocusable.main.js +0 -72
- package/dist/useFocusable.main.js.map +0 -1
- package/dist/useFocusable.mjs +0 -62
- package/dist/useFocusable.module.js +0 -62
- package/dist/useFocusable.module.js.map +0 -1
- package/src/focusSafely.ts +0 -39
- package/src/useFocusable.tsx +0 -94
package/dist/FocusScope.mjs
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import {focusSafely as $6a99195332edec8b$export$80f3e147d781571c} from "./focusSafely.mjs";
|
|
2
1
|
import {isElementVisible as $645f2e67b85a24c9$export$e989c0fffaa6b27a} from "./isElementVisible.mjs";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import {useLayoutEffect as $cgawC$useLayoutEffect, getActiveElement as $cgawC$getActiveElement, getOwnerDocument as $cgawC$getOwnerDocument, getEventTarget as $cgawC$getEventTarget, isAndroid as $cgawC$isAndroid, isChrome as $cgawC$isChrome, isTabbable as $cgawC$isTabbable, isFocusable as $cgawC$isFocusable, createShadowTreeWalker as $cgawC$createShadowTreeWalker} from "@react-aria/utils";
|
|
3
|
+
import {getInteractionModality as $cgawC$getInteractionModality, focusSafely as $cgawC$focusSafely} from "@react-aria/interactions";
|
|
5
4
|
import $cgawC$react, {useRef as $cgawC$useRef, useContext as $cgawC$useContext, useMemo as $cgawC$useMemo, useEffect as $cgawC$useEffect} from "react";
|
|
6
5
|
|
|
7
6
|
/*
|
|
@@ -18,7 +17,6 @@ import $cgawC$react, {useRef as $cgawC$useRef, useContext as $cgawC$useContext,
|
|
|
18
17
|
|
|
19
18
|
|
|
20
19
|
|
|
21
|
-
|
|
22
20
|
const $9bf71ea28793e738$var$FocusContext = /*#__PURE__*/ (0, $cgawC$react).createContext(null);
|
|
23
21
|
const $9bf71ea28793e738$var$RESTORE_FOCUS_EVENT = 'react-aria-focus-scope-restore';
|
|
24
22
|
let $9bf71ea28793e738$var$activeScope = null;
|
|
@@ -83,7 +81,7 @@ function $9bf71ea28793e738$export$20e40289641fbbb6(props) {
|
|
|
83
81
|
// This needs to be an effect so that activeScope is updated after the FocusScope tree is complete.
|
|
84
82
|
// It cannot be a useLayoutEffect because the parent of this node hasn't been attached in the tree yet.
|
|
85
83
|
(0, $cgawC$useEffect)(()=>{
|
|
86
|
-
const activeElement = (0, $cgawC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined)
|
|
84
|
+
const activeElement = (0, $cgawC$getActiveElement)((0, $cgawC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined));
|
|
87
85
|
let scope = null;
|
|
88
86
|
if ($9bf71ea28793e738$var$isElementInScope(activeElement, scopeRef.current)) {
|
|
89
87
|
// We need to traverse the focusScope tree and find the bottom most scope that
|
|
@@ -137,7 +135,8 @@ function $9bf71ea28793e738$var$createFocusManagerForScope(scopeRef) {
|
|
|
137
135
|
focusNext (opts = {}) {
|
|
138
136
|
let scope = scopeRef.current;
|
|
139
137
|
let { from: from, tabbable: tabbable, wrap: wrap, accept: accept } = opts;
|
|
140
|
-
|
|
138
|
+
var _scope_;
|
|
139
|
+
let node = from || (0, $cgawC$getActiveElement)((0, $cgawC$getOwnerDocument)((_scope_ = scope[0]) !== null && _scope_ !== void 0 ? _scope_ : undefined));
|
|
141
140
|
let sentinel = scope[0].previousElementSibling;
|
|
142
141
|
let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
|
|
143
142
|
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
|
|
@@ -156,7 +155,8 @@ function $9bf71ea28793e738$var$createFocusManagerForScope(scopeRef) {
|
|
|
156
155
|
focusPrevious (opts = {}) {
|
|
157
156
|
let scope = scopeRef.current;
|
|
158
157
|
let { from: from, tabbable: tabbable, wrap: wrap, accept: accept } = opts;
|
|
159
|
-
|
|
158
|
+
var _scope_;
|
|
159
|
+
let node = from || (0, $cgawC$getActiveElement)((0, $cgawC$getOwnerDocument)((_scope_ = scope[0]) !== null && _scope_ !== void 0 ? _scope_ : undefined));
|
|
160
160
|
let sentinel = scope[scope.length - 1].nextElementSibling;
|
|
161
161
|
let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
|
|
162
162
|
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
|
|
@@ -200,27 +200,6 @@ function $9bf71ea28793e738$var$createFocusManagerForScope(scopeRef) {
|
|
|
200
200
|
}
|
|
201
201
|
};
|
|
202
202
|
}
|
|
203
|
-
const $9bf71ea28793e738$var$focusableElements = [
|
|
204
|
-
'input:not([disabled]):not([type=hidden])',
|
|
205
|
-
'select:not([disabled])',
|
|
206
|
-
'textarea:not([disabled])',
|
|
207
|
-
'button:not([disabled])',
|
|
208
|
-
'a[href]',
|
|
209
|
-
'area[href]',
|
|
210
|
-
'summary',
|
|
211
|
-
'iframe',
|
|
212
|
-
'object',
|
|
213
|
-
'embed',
|
|
214
|
-
'audio[controls]',
|
|
215
|
-
'video[controls]',
|
|
216
|
-
'[contenteditable]:not([contenteditable^="false"])'
|
|
217
|
-
];
|
|
218
|
-
const $9bf71ea28793e738$var$FOCUSABLE_ELEMENT_SELECTOR = $9bf71ea28793e738$var$focusableElements.join(':not([hidden]),') + ',[tabindex]:not([disabled]):not([hidden])';
|
|
219
|
-
$9bf71ea28793e738$var$focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
|
|
220
|
-
const $9bf71ea28793e738$var$TABBABLE_ELEMENT_SELECTOR = $9bf71ea28793e738$var$focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
|
|
221
|
-
function $9bf71ea28793e738$export$4c063cf1350e6fed(element) {
|
|
222
|
-
return element.matches($9bf71ea28793e738$var$FOCUSABLE_ELEMENT_SELECTOR);
|
|
223
|
-
}
|
|
224
203
|
function $9bf71ea28793e738$var$getScopeRoot(scope) {
|
|
225
204
|
return scope[0].parentElement;
|
|
226
205
|
}
|
|
@@ -249,7 +228,7 @@ function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
|
|
|
249
228
|
// Handle the Tab key to contain focus within the scope
|
|
250
229
|
let onKeyDown = (e)=>{
|
|
251
230
|
if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || !$9bf71ea28793e738$var$shouldContainFocus(scopeRef) || e.isComposing) return;
|
|
252
|
-
let focusedElement = ownerDocument
|
|
231
|
+
let focusedElement = (0, $cgawC$getActiveElement)(ownerDocument);
|
|
253
232
|
let scope = scopeRef.current;
|
|
254
233
|
if (!scope || !$9bf71ea28793e738$var$isElementInScope(focusedElement, scope)) return;
|
|
255
234
|
let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
|
|
@@ -269,15 +248,15 @@ function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
|
|
|
269
248
|
let onFocus = (e)=>{
|
|
270
249
|
// If focusing an element in a child scope of the currently active scope, the child becomes active.
|
|
271
250
|
// Moving out of the active scope to an ancestor is not allowed.
|
|
272
|
-
if ((!$9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope($9bf71ea28793e738$var$activeScope, scopeRef)) && $9bf71ea28793e738$var$isElementInScope(e
|
|
251
|
+
if ((!$9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope($9bf71ea28793e738$var$activeScope, scopeRef)) && $9bf71ea28793e738$var$isElementInScope((0, $cgawC$getEventTarget)(e), scopeRef.current)) {
|
|
273
252
|
$9bf71ea28793e738$var$activeScope = scopeRef;
|
|
274
|
-
focusedNode.current = e
|
|
275
|
-
} else if ($9bf71ea28793e738$var$shouldContainFocus(scopeRef) && !$9bf71ea28793e738$var$isElementInChildScope(e
|
|
253
|
+
focusedNode.current = (0, $cgawC$getEventTarget)(e);
|
|
254
|
+
} else if ($9bf71ea28793e738$var$shouldContainFocus(scopeRef) && !$9bf71ea28793e738$var$isElementInChildScope((0, $cgawC$getEventTarget)(e), scopeRef)) {
|
|
276
255
|
// If a focus event occurs outside the active scope (e.g. user tabs from browser location bar),
|
|
277
256
|
// restore focus to the previously focused node or the first tabbable element in the active scope.
|
|
278
257
|
if (focusedNode.current) focusedNode.current.focus();
|
|
279
258
|
else if ($9bf71ea28793e738$var$activeScope && $9bf71ea28793e738$var$activeScope.current) $9bf71ea28793e738$var$focusFirstInScope($9bf71ea28793e738$var$activeScope.current);
|
|
280
|
-
} else if ($9bf71ea28793e738$var$shouldContainFocus(scopeRef)) focusedNode.current = e
|
|
259
|
+
} else if ($9bf71ea28793e738$var$shouldContainFocus(scopeRef)) focusedNode.current = (0, $cgawC$getEventTarget)(e);
|
|
281
260
|
};
|
|
282
261
|
let onBlur = (e)=>{
|
|
283
262
|
// Firefox doesn't shift focus back to the Dialog properly without this
|
|
@@ -289,11 +268,13 @@ function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
|
|
|
289
268
|
let modality = (0, $cgawC$getInteractionModality)();
|
|
290
269
|
let shouldSkipFocusRestore = (modality === 'virtual' || modality === null) && (0, $cgawC$isAndroid)() && (0, $cgawC$isChrome)();
|
|
291
270
|
// Use document.activeElement instead of e.relatedTarget so we can tell if user clicked into iframe
|
|
292
|
-
|
|
271
|
+
let activeElement = (0, $cgawC$getActiveElement)(ownerDocument);
|
|
272
|
+
if (!shouldSkipFocusRestore && activeElement && $9bf71ea28793e738$var$shouldContainFocus(scopeRef) && !$9bf71ea28793e738$var$isElementInChildScope(activeElement, scopeRef)) {
|
|
293
273
|
$9bf71ea28793e738$var$activeScope = scopeRef;
|
|
294
|
-
|
|
274
|
+
let target = (0, $cgawC$getEventTarget)(e);
|
|
275
|
+
if (target && target.isConnected) {
|
|
295
276
|
var _focusedNode_current;
|
|
296
|
-
focusedNode.current =
|
|
277
|
+
focusedNode.current = target;
|
|
297
278
|
(_focusedNode_current = focusedNode.current) === null || _focusedNode_current === void 0 ? void 0 : _focusedNode_current.focus();
|
|
298
279
|
} else if ($9bf71ea28793e738$var$activeScope.current) $9bf71ea28793e738$var$focusFirstInScope($9bf71ea28793e738$var$activeScope.current);
|
|
299
280
|
}
|
|
@@ -354,7 +335,7 @@ function $9bf71ea28793e738$var$isAncestorScope(ancestor, scope) {
|
|
|
354
335
|
}
|
|
355
336
|
function $9bf71ea28793e738$var$focusElement(element, scroll = false) {
|
|
356
337
|
if (element != null && !scroll) try {
|
|
357
|
-
(0, $
|
|
338
|
+
(0, $cgawC$focusSafely)(element);
|
|
358
339
|
} catch {
|
|
359
340
|
// ignore
|
|
360
341
|
}
|
|
@@ -392,7 +373,7 @@ function $9bf71ea28793e738$var$useAutoFocus(scopeRef, autoFocus) {
|
|
|
392
373
|
if (autoFocusRef.current) {
|
|
393
374
|
$9bf71ea28793e738$var$activeScope = scopeRef;
|
|
394
375
|
const ownerDocument = (0, $cgawC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined);
|
|
395
|
-
if (!$9bf71ea28793e738$var$isElementInScope(ownerDocument
|
|
376
|
+
if (!$9bf71ea28793e738$var$isElementInScope((0, $cgawC$getActiveElement)(ownerDocument), $9bf71ea28793e738$var$activeScope.current) && scopeRef.current) $9bf71ea28793e738$var$focusFirstInScope(scopeRef.current);
|
|
396
377
|
}
|
|
397
378
|
autoFocusRef.current = false;
|
|
398
379
|
}, [
|
|
@@ -407,7 +388,7 @@ function $9bf71ea28793e738$var$useActiveScopeTracker(scopeRef, restore, contain)
|
|
|
407
388
|
let scope = scopeRef.current;
|
|
408
389
|
const ownerDocument = (0, $cgawC$getOwnerDocument)(scope ? scope[0] : undefined);
|
|
409
390
|
let onFocus = (e)=>{
|
|
410
|
-
let target = e
|
|
391
|
+
let target = (0, $cgawC$getEventTarget)(e);
|
|
411
392
|
if ($9bf71ea28793e738$var$isElementInScope(target, scopeRef.current)) $9bf71ea28793e738$var$activeScope = scopeRef;
|
|
412
393
|
else if (!$9bf71ea28793e738$var$isElementInAnyScope(target)) $9bf71ea28793e738$var$activeScope = null;
|
|
413
394
|
};
|
|
@@ -434,7 +415,7 @@ function $9bf71ea28793e738$var$shouldRestoreFocus(scopeRef) {
|
|
|
434
415
|
function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain) {
|
|
435
416
|
// create a ref during render instead of useLayoutEffect so the active element is saved before a child with autoFocus=true mounts.
|
|
436
417
|
// eslint-disable-next-line no-restricted-globals
|
|
437
|
-
const nodeToRestoreRef = (0, $cgawC$useRef)(typeof document !== 'undefined' ? (0, $cgawC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined)
|
|
418
|
+
const nodeToRestoreRef = (0, $cgawC$useRef)(typeof document !== 'undefined' ? (0, $cgawC$getActiveElement)((0, $cgawC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined)) : null);
|
|
438
419
|
// restoring scopes should all track if they are active regardless of contain, but contain already tracks it plus logic to contain the focus
|
|
439
420
|
// restoring-non-containing scopes should only care if they become active so they can perform the restore
|
|
440
421
|
(0, $cgawC$useLayoutEffect)(()=>{
|
|
@@ -444,7 +425,7 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
444
425
|
let onFocus = ()=>{
|
|
445
426
|
// If focusing an element in a child scope of the currently active scope, the child becomes active.
|
|
446
427
|
// Moving out of the active scope to an ancestor is not allowed.
|
|
447
|
-
if ((!$9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope($9bf71ea28793e738$var$activeScope, scopeRef)) && $9bf71ea28793e738$var$isElementInScope(ownerDocument
|
|
428
|
+
if ((!$9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope($9bf71ea28793e738$var$activeScope, scopeRef)) && $9bf71ea28793e738$var$isElementInScope((0, $cgawC$getActiveElement)(ownerDocument), scopeRef.current)) $9bf71ea28793e738$var$activeScope = scopeRef;
|
|
448
429
|
};
|
|
449
430
|
ownerDocument.addEventListener('focusin', onFocus, false);
|
|
450
431
|
scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.addEventListener('focusin', onFocus, false));
|
|
@@ -478,7 +459,7 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
478
459
|
// Find the next tabbable element after the currently focused element
|
|
479
460
|
walker.currentNode = focusedElement;
|
|
480
461
|
let nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
|
|
481
|
-
if (!nodeToRestore || !
|
|
462
|
+
if (!nodeToRestore || !nodeToRestore.isConnected || nodeToRestore === ownerDocument.body) {
|
|
482
463
|
nodeToRestore = undefined;
|
|
483
464
|
treeNode.nodeToRestore = undefined;
|
|
484
465
|
}
|
|
@@ -521,7 +502,8 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
521
502
|
if (!treeNode) return;
|
|
522
503
|
let nodeToRestore = treeNode.nodeToRestore;
|
|
523
504
|
// if we already lost focus to the body and this was the active scope, then we should attempt to restore
|
|
524
|
-
|
|
505
|
+
let activeElement = (0, $cgawC$getActiveElement)(ownerDocument);
|
|
506
|
+
if (restoreFocus && nodeToRestore && (activeElement && $9bf71ea28793e738$var$isElementInChildScope(activeElement, scopeRef) || activeElement === ownerDocument.body && $9bf71ea28793e738$var$shouldRestoreFocus(scopeRef))) {
|
|
525
507
|
// freeze the focusScopeTree so it persists after the raf, otherwise during unmount nodes are removed from it
|
|
526
508
|
let clonedTree = $9bf71ea28793e738$export$d06fae2ee68b101e.clone();
|
|
527
509
|
requestAnimationFrame(()=>{
|
|
@@ -566,13 +548,18 @@ function $9bf71ea28793e738$var$restoreFocusToElement(node) {
|
|
|
566
548
|
}))) $9bf71ea28793e738$var$focusElement(node);
|
|
567
549
|
}
|
|
568
550
|
function $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, opts, scope) {
|
|
569
|
-
let
|
|
570
|
-
|
|
551
|
+
let filter = (opts === null || opts === void 0 ? void 0 : opts.tabbable) ? (0, $cgawC$isTabbable) : (0, $cgawC$isFocusable);
|
|
552
|
+
// Ensure that root is an Element or fall back appropriately
|
|
553
|
+
let rootElement = (root === null || root === void 0 ? void 0 : root.nodeType) === Node.ELEMENT_NODE ? root : null;
|
|
554
|
+
// Determine the document to use
|
|
555
|
+
let doc = (0, $cgawC$getOwnerDocument)(rootElement);
|
|
556
|
+
// Create a TreeWalker, ensuring the root is an Element or Document
|
|
557
|
+
let walker = (0, $cgawC$createShadowTreeWalker)(doc, root || doc, NodeFilter.SHOW_ELEMENT, {
|
|
571
558
|
acceptNode (node) {
|
|
572
559
|
var _opts_from;
|
|
573
560
|
// Skip nodes inside the starting node.
|
|
574
561
|
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;
|
|
575
|
-
if (node
|
|
562
|
+
if (filter(node) && (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;
|
|
576
563
|
return NodeFilter.FILTER_SKIP;
|
|
577
564
|
}
|
|
578
565
|
});
|
|
@@ -585,7 +572,7 @@ function $9bf71ea28793e738$export$c5251b9e124bf29(ref, defaultOptions = {}) {
|
|
|
585
572
|
let root = ref.current;
|
|
586
573
|
if (!root) return null;
|
|
587
574
|
let { from: from, tabbable: tabbable = defaultOptions.tabbable, wrap: wrap = defaultOptions.wrap, accept: accept = defaultOptions.accept } = opts;
|
|
588
|
-
let node = from || (0, $cgawC$getOwnerDocument)(root)
|
|
575
|
+
let node = from || (0, $cgawC$getActiveElement)((0, $cgawC$getOwnerDocument)(root));
|
|
589
576
|
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, {
|
|
590
577
|
tabbable: tabbable,
|
|
591
578
|
accept: accept
|
|
@@ -603,7 +590,7 @@ function $9bf71ea28793e738$export$c5251b9e124bf29(ref, defaultOptions = {}) {
|
|
|
603
590
|
let root = ref.current;
|
|
604
591
|
if (!root) return null;
|
|
605
592
|
let { from: from, tabbable: tabbable = defaultOptions.tabbable, wrap: wrap = defaultOptions.wrap, accept: accept = defaultOptions.accept } = opts;
|
|
606
|
-
let node = from || (0, $cgawC$getOwnerDocument)(root)
|
|
593
|
+
let node = from || (0, $cgawC$getActiveElement)((0, $cgawC$getOwnerDocument)(root));
|
|
607
594
|
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, {
|
|
608
595
|
tabbable: tabbable,
|
|
609
596
|
accept: accept
|
|
@@ -735,5 +722,5 @@ class $9bf71ea28793e738$var$TreeNode {
|
|
|
735
722
|
let $9bf71ea28793e738$export$d06fae2ee68b101e = new $9bf71ea28793e738$var$Tree();
|
|
736
723
|
|
|
737
724
|
|
|
738
|
-
export {$9bf71ea28793e738$export$20e40289641fbbb6 as FocusScope, $9bf71ea28793e738$export$d06fae2ee68b101e as focusScopeTree, $9bf71ea28793e738$export$10c5169755ce7bd7 as useFocusManager, $9bf71ea28793e738$export$2d6ec8fc375ceafa as getFocusableTreeWalker, $9bf71ea28793e738$export$
|
|
725
|
+
export {$9bf71ea28793e738$export$20e40289641fbbb6 as FocusScope, $9bf71ea28793e738$export$d06fae2ee68b101e as focusScopeTree, $9bf71ea28793e738$export$10c5169755ce7bd7 as useFocusManager, $9bf71ea28793e738$export$2d6ec8fc375ceafa as getFocusableTreeWalker, $9bf71ea28793e738$export$1258395f99bf9cbf as isElementInChildOfActiveScope, $9bf71ea28793e738$export$c5251b9e124bf29 as createFocusManager};
|
|
739
726
|
//# sourceMappingURL=FocusScope.module.js.map
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import {focusSafely as $6a99195332edec8b$export$80f3e147d781571c} from "./focusSafely.module.js";
|
|
2
1
|
import {isElementVisible as $645f2e67b85a24c9$export$e989c0fffaa6b27a} from "./isElementVisible.module.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import {useLayoutEffect as $cgawC$useLayoutEffect, getActiveElement as $cgawC$getActiveElement, getOwnerDocument as $cgawC$getOwnerDocument, getEventTarget as $cgawC$getEventTarget, isAndroid as $cgawC$isAndroid, isChrome as $cgawC$isChrome, isTabbable as $cgawC$isTabbable, isFocusable as $cgawC$isFocusable, createShadowTreeWalker as $cgawC$createShadowTreeWalker} from "@react-aria/utils";
|
|
3
|
+
import {getInteractionModality as $cgawC$getInteractionModality, focusSafely as $cgawC$focusSafely} from "@react-aria/interactions";
|
|
5
4
|
import $cgawC$react, {useRef as $cgawC$useRef, useContext as $cgawC$useContext, useMemo as $cgawC$useMemo, useEffect as $cgawC$useEffect} from "react";
|
|
6
5
|
|
|
7
6
|
/*
|
|
@@ -18,7 +17,6 @@ import $cgawC$react, {useRef as $cgawC$useRef, useContext as $cgawC$useContext,
|
|
|
18
17
|
|
|
19
18
|
|
|
20
19
|
|
|
21
|
-
|
|
22
20
|
const $9bf71ea28793e738$var$FocusContext = /*#__PURE__*/ (0, $cgawC$react).createContext(null);
|
|
23
21
|
const $9bf71ea28793e738$var$RESTORE_FOCUS_EVENT = 'react-aria-focus-scope-restore';
|
|
24
22
|
let $9bf71ea28793e738$var$activeScope = null;
|
|
@@ -83,7 +81,7 @@ function $9bf71ea28793e738$export$20e40289641fbbb6(props) {
|
|
|
83
81
|
// This needs to be an effect so that activeScope is updated after the FocusScope tree is complete.
|
|
84
82
|
// It cannot be a useLayoutEffect because the parent of this node hasn't been attached in the tree yet.
|
|
85
83
|
(0, $cgawC$useEffect)(()=>{
|
|
86
|
-
const activeElement = (0, $cgawC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined)
|
|
84
|
+
const activeElement = (0, $cgawC$getActiveElement)((0, $cgawC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined));
|
|
87
85
|
let scope = null;
|
|
88
86
|
if ($9bf71ea28793e738$var$isElementInScope(activeElement, scopeRef.current)) {
|
|
89
87
|
// We need to traverse the focusScope tree and find the bottom most scope that
|
|
@@ -137,7 +135,8 @@ function $9bf71ea28793e738$var$createFocusManagerForScope(scopeRef) {
|
|
|
137
135
|
focusNext (opts = {}) {
|
|
138
136
|
let scope = scopeRef.current;
|
|
139
137
|
let { from: from, tabbable: tabbable, wrap: wrap, accept: accept } = opts;
|
|
140
|
-
|
|
138
|
+
var _scope_;
|
|
139
|
+
let node = from || (0, $cgawC$getActiveElement)((0, $cgawC$getOwnerDocument)((_scope_ = scope[0]) !== null && _scope_ !== void 0 ? _scope_ : undefined));
|
|
141
140
|
let sentinel = scope[0].previousElementSibling;
|
|
142
141
|
let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
|
|
143
142
|
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
|
|
@@ -156,7 +155,8 @@ function $9bf71ea28793e738$var$createFocusManagerForScope(scopeRef) {
|
|
|
156
155
|
focusPrevious (opts = {}) {
|
|
157
156
|
let scope = scopeRef.current;
|
|
158
157
|
let { from: from, tabbable: tabbable, wrap: wrap, accept: accept } = opts;
|
|
159
|
-
|
|
158
|
+
var _scope_;
|
|
159
|
+
let node = from || (0, $cgawC$getActiveElement)((0, $cgawC$getOwnerDocument)((_scope_ = scope[0]) !== null && _scope_ !== void 0 ? _scope_ : undefined));
|
|
160
160
|
let sentinel = scope[scope.length - 1].nextElementSibling;
|
|
161
161
|
let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
|
|
162
162
|
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
|
|
@@ -200,27 +200,6 @@ function $9bf71ea28793e738$var$createFocusManagerForScope(scopeRef) {
|
|
|
200
200
|
}
|
|
201
201
|
};
|
|
202
202
|
}
|
|
203
|
-
const $9bf71ea28793e738$var$focusableElements = [
|
|
204
|
-
'input:not([disabled]):not([type=hidden])',
|
|
205
|
-
'select:not([disabled])',
|
|
206
|
-
'textarea:not([disabled])',
|
|
207
|
-
'button:not([disabled])',
|
|
208
|
-
'a[href]',
|
|
209
|
-
'area[href]',
|
|
210
|
-
'summary',
|
|
211
|
-
'iframe',
|
|
212
|
-
'object',
|
|
213
|
-
'embed',
|
|
214
|
-
'audio[controls]',
|
|
215
|
-
'video[controls]',
|
|
216
|
-
'[contenteditable]:not([contenteditable^="false"])'
|
|
217
|
-
];
|
|
218
|
-
const $9bf71ea28793e738$var$FOCUSABLE_ELEMENT_SELECTOR = $9bf71ea28793e738$var$focusableElements.join(':not([hidden]),') + ',[tabindex]:not([disabled]):not([hidden])';
|
|
219
|
-
$9bf71ea28793e738$var$focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
|
|
220
|
-
const $9bf71ea28793e738$var$TABBABLE_ELEMENT_SELECTOR = $9bf71ea28793e738$var$focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
|
|
221
|
-
function $9bf71ea28793e738$export$4c063cf1350e6fed(element) {
|
|
222
|
-
return element.matches($9bf71ea28793e738$var$FOCUSABLE_ELEMENT_SELECTOR);
|
|
223
|
-
}
|
|
224
203
|
function $9bf71ea28793e738$var$getScopeRoot(scope) {
|
|
225
204
|
return scope[0].parentElement;
|
|
226
205
|
}
|
|
@@ -249,7 +228,7 @@ function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
|
|
|
249
228
|
// Handle the Tab key to contain focus within the scope
|
|
250
229
|
let onKeyDown = (e)=>{
|
|
251
230
|
if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || !$9bf71ea28793e738$var$shouldContainFocus(scopeRef) || e.isComposing) return;
|
|
252
|
-
let focusedElement = ownerDocument
|
|
231
|
+
let focusedElement = (0, $cgawC$getActiveElement)(ownerDocument);
|
|
253
232
|
let scope = scopeRef.current;
|
|
254
233
|
if (!scope || !$9bf71ea28793e738$var$isElementInScope(focusedElement, scope)) return;
|
|
255
234
|
let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
|
|
@@ -269,15 +248,15 @@ function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
|
|
|
269
248
|
let onFocus = (e)=>{
|
|
270
249
|
// If focusing an element in a child scope of the currently active scope, the child becomes active.
|
|
271
250
|
// Moving out of the active scope to an ancestor is not allowed.
|
|
272
|
-
if ((!$9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope($9bf71ea28793e738$var$activeScope, scopeRef)) && $9bf71ea28793e738$var$isElementInScope(e
|
|
251
|
+
if ((!$9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope($9bf71ea28793e738$var$activeScope, scopeRef)) && $9bf71ea28793e738$var$isElementInScope((0, $cgawC$getEventTarget)(e), scopeRef.current)) {
|
|
273
252
|
$9bf71ea28793e738$var$activeScope = scopeRef;
|
|
274
|
-
focusedNode.current = e
|
|
275
|
-
} else if ($9bf71ea28793e738$var$shouldContainFocus(scopeRef) && !$9bf71ea28793e738$var$isElementInChildScope(e
|
|
253
|
+
focusedNode.current = (0, $cgawC$getEventTarget)(e);
|
|
254
|
+
} else if ($9bf71ea28793e738$var$shouldContainFocus(scopeRef) && !$9bf71ea28793e738$var$isElementInChildScope((0, $cgawC$getEventTarget)(e), scopeRef)) {
|
|
276
255
|
// If a focus event occurs outside the active scope (e.g. user tabs from browser location bar),
|
|
277
256
|
// restore focus to the previously focused node or the first tabbable element in the active scope.
|
|
278
257
|
if (focusedNode.current) focusedNode.current.focus();
|
|
279
258
|
else if ($9bf71ea28793e738$var$activeScope && $9bf71ea28793e738$var$activeScope.current) $9bf71ea28793e738$var$focusFirstInScope($9bf71ea28793e738$var$activeScope.current);
|
|
280
|
-
} else if ($9bf71ea28793e738$var$shouldContainFocus(scopeRef)) focusedNode.current = e
|
|
259
|
+
} else if ($9bf71ea28793e738$var$shouldContainFocus(scopeRef)) focusedNode.current = (0, $cgawC$getEventTarget)(e);
|
|
281
260
|
};
|
|
282
261
|
let onBlur = (e)=>{
|
|
283
262
|
// Firefox doesn't shift focus back to the Dialog properly without this
|
|
@@ -289,11 +268,13 @@ function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
|
|
|
289
268
|
let modality = (0, $cgawC$getInteractionModality)();
|
|
290
269
|
let shouldSkipFocusRestore = (modality === 'virtual' || modality === null) && (0, $cgawC$isAndroid)() && (0, $cgawC$isChrome)();
|
|
291
270
|
// Use document.activeElement instead of e.relatedTarget so we can tell if user clicked into iframe
|
|
292
|
-
|
|
271
|
+
let activeElement = (0, $cgawC$getActiveElement)(ownerDocument);
|
|
272
|
+
if (!shouldSkipFocusRestore && activeElement && $9bf71ea28793e738$var$shouldContainFocus(scopeRef) && !$9bf71ea28793e738$var$isElementInChildScope(activeElement, scopeRef)) {
|
|
293
273
|
$9bf71ea28793e738$var$activeScope = scopeRef;
|
|
294
|
-
|
|
274
|
+
let target = (0, $cgawC$getEventTarget)(e);
|
|
275
|
+
if (target && target.isConnected) {
|
|
295
276
|
var _focusedNode_current;
|
|
296
|
-
focusedNode.current =
|
|
277
|
+
focusedNode.current = target;
|
|
297
278
|
(_focusedNode_current = focusedNode.current) === null || _focusedNode_current === void 0 ? void 0 : _focusedNode_current.focus();
|
|
298
279
|
} else if ($9bf71ea28793e738$var$activeScope.current) $9bf71ea28793e738$var$focusFirstInScope($9bf71ea28793e738$var$activeScope.current);
|
|
299
280
|
}
|
|
@@ -354,7 +335,7 @@ function $9bf71ea28793e738$var$isAncestorScope(ancestor, scope) {
|
|
|
354
335
|
}
|
|
355
336
|
function $9bf71ea28793e738$var$focusElement(element, scroll = false) {
|
|
356
337
|
if (element != null && !scroll) try {
|
|
357
|
-
(0, $
|
|
338
|
+
(0, $cgawC$focusSafely)(element);
|
|
358
339
|
} catch {
|
|
359
340
|
// ignore
|
|
360
341
|
}
|
|
@@ -392,7 +373,7 @@ function $9bf71ea28793e738$var$useAutoFocus(scopeRef, autoFocus) {
|
|
|
392
373
|
if (autoFocusRef.current) {
|
|
393
374
|
$9bf71ea28793e738$var$activeScope = scopeRef;
|
|
394
375
|
const ownerDocument = (0, $cgawC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined);
|
|
395
|
-
if (!$9bf71ea28793e738$var$isElementInScope(ownerDocument
|
|
376
|
+
if (!$9bf71ea28793e738$var$isElementInScope((0, $cgawC$getActiveElement)(ownerDocument), $9bf71ea28793e738$var$activeScope.current) && scopeRef.current) $9bf71ea28793e738$var$focusFirstInScope(scopeRef.current);
|
|
396
377
|
}
|
|
397
378
|
autoFocusRef.current = false;
|
|
398
379
|
}, [
|
|
@@ -407,7 +388,7 @@ function $9bf71ea28793e738$var$useActiveScopeTracker(scopeRef, restore, contain)
|
|
|
407
388
|
let scope = scopeRef.current;
|
|
408
389
|
const ownerDocument = (0, $cgawC$getOwnerDocument)(scope ? scope[0] : undefined);
|
|
409
390
|
let onFocus = (e)=>{
|
|
410
|
-
let target = e
|
|
391
|
+
let target = (0, $cgawC$getEventTarget)(e);
|
|
411
392
|
if ($9bf71ea28793e738$var$isElementInScope(target, scopeRef.current)) $9bf71ea28793e738$var$activeScope = scopeRef;
|
|
412
393
|
else if (!$9bf71ea28793e738$var$isElementInAnyScope(target)) $9bf71ea28793e738$var$activeScope = null;
|
|
413
394
|
};
|
|
@@ -434,7 +415,7 @@ function $9bf71ea28793e738$var$shouldRestoreFocus(scopeRef) {
|
|
|
434
415
|
function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain) {
|
|
435
416
|
// create a ref during render instead of useLayoutEffect so the active element is saved before a child with autoFocus=true mounts.
|
|
436
417
|
// eslint-disable-next-line no-restricted-globals
|
|
437
|
-
const nodeToRestoreRef = (0, $cgawC$useRef)(typeof document !== 'undefined' ? (0, $cgawC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined)
|
|
418
|
+
const nodeToRestoreRef = (0, $cgawC$useRef)(typeof document !== 'undefined' ? (0, $cgawC$getActiveElement)((0, $cgawC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined)) : null);
|
|
438
419
|
// restoring scopes should all track if they are active regardless of contain, but contain already tracks it plus logic to contain the focus
|
|
439
420
|
// restoring-non-containing scopes should only care if they become active so they can perform the restore
|
|
440
421
|
(0, $cgawC$useLayoutEffect)(()=>{
|
|
@@ -444,7 +425,7 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
444
425
|
let onFocus = ()=>{
|
|
445
426
|
// If focusing an element in a child scope of the currently active scope, the child becomes active.
|
|
446
427
|
// Moving out of the active scope to an ancestor is not allowed.
|
|
447
|
-
if ((!$9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope($9bf71ea28793e738$var$activeScope, scopeRef)) && $9bf71ea28793e738$var$isElementInScope(ownerDocument
|
|
428
|
+
if ((!$9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope($9bf71ea28793e738$var$activeScope, scopeRef)) && $9bf71ea28793e738$var$isElementInScope((0, $cgawC$getActiveElement)(ownerDocument), scopeRef.current)) $9bf71ea28793e738$var$activeScope = scopeRef;
|
|
448
429
|
};
|
|
449
430
|
ownerDocument.addEventListener('focusin', onFocus, false);
|
|
450
431
|
scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.addEventListener('focusin', onFocus, false));
|
|
@@ -478,7 +459,7 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
478
459
|
// Find the next tabbable element after the currently focused element
|
|
479
460
|
walker.currentNode = focusedElement;
|
|
480
461
|
let nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
|
|
481
|
-
if (!nodeToRestore || !
|
|
462
|
+
if (!nodeToRestore || !nodeToRestore.isConnected || nodeToRestore === ownerDocument.body) {
|
|
482
463
|
nodeToRestore = undefined;
|
|
483
464
|
treeNode.nodeToRestore = undefined;
|
|
484
465
|
}
|
|
@@ -521,7 +502,8 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
521
502
|
if (!treeNode) return;
|
|
522
503
|
let nodeToRestore = treeNode.nodeToRestore;
|
|
523
504
|
// if we already lost focus to the body and this was the active scope, then we should attempt to restore
|
|
524
|
-
|
|
505
|
+
let activeElement = (0, $cgawC$getActiveElement)(ownerDocument);
|
|
506
|
+
if (restoreFocus && nodeToRestore && (activeElement && $9bf71ea28793e738$var$isElementInChildScope(activeElement, scopeRef) || activeElement === ownerDocument.body && $9bf71ea28793e738$var$shouldRestoreFocus(scopeRef))) {
|
|
525
507
|
// freeze the focusScopeTree so it persists after the raf, otherwise during unmount nodes are removed from it
|
|
526
508
|
let clonedTree = $9bf71ea28793e738$export$d06fae2ee68b101e.clone();
|
|
527
509
|
requestAnimationFrame(()=>{
|
|
@@ -566,13 +548,18 @@ function $9bf71ea28793e738$var$restoreFocusToElement(node) {
|
|
|
566
548
|
}))) $9bf71ea28793e738$var$focusElement(node);
|
|
567
549
|
}
|
|
568
550
|
function $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, opts, scope) {
|
|
569
|
-
let
|
|
570
|
-
|
|
551
|
+
let filter = (opts === null || opts === void 0 ? void 0 : opts.tabbable) ? (0, $cgawC$isTabbable) : (0, $cgawC$isFocusable);
|
|
552
|
+
// Ensure that root is an Element or fall back appropriately
|
|
553
|
+
let rootElement = (root === null || root === void 0 ? void 0 : root.nodeType) === Node.ELEMENT_NODE ? root : null;
|
|
554
|
+
// Determine the document to use
|
|
555
|
+
let doc = (0, $cgawC$getOwnerDocument)(rootElement);
|
|
556
|
+
// Create a TreeWalker, ensuring the root is an Element or Document
|
|
557
|
+
let walker = (0, $cgawC$createShadowTreeWalker)(doc, root || doc, NodeFilter.SHOW_ELEMENT, {
|
|
571
558
|
acceptNode (node) {
|
|
572
559
|
var _opts_from;
|
|
573
560
|
// Skip nodes inside the starting node.
|
|
574
561
|
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;
|
|
575
|
-
if (node
|
|
562
|
+
if (filter(node) && (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;
|
|
576
563
|
return NodeFilter.FILTER_SKIP;
|
|
577
564
|
}
|
|
578
565
|
});
|
|
@@ -585,7 +572,7 @@ function $9bf71ea28793e738$export$c5251b9e124bf29(ref, defaultOptions = {}) {
|
|
|
585
572
|
let root = ref.current;
|
|
586
573
|
if (!root) return null;
|
|
587
574
|
let { from: from, tabbable: tabbable = defaultOptions.tabbable, wrap: wrap = defaultOptions.wrap, accept: accept = defaultOptions.accept } = opts;
|
|
588
|
-
let node = from || (0, $cgawC$getOwnerDocument)(root)
|
|
575
|
+
let node = from || (0, $cgawC$getActiveElement)((0, $cgawC$getOwnerDocument)(root));
|
|
589
576
|
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, {
|
|
590
577
|
tabbable: tabbable,
|
|
591
578
|
accept: accept
|
|
@@ -603,7 +590,7 @@ function $9bf71ea28793e738$export$c5251b9e124bf29(ref, defaultOptions = {}) {
|
|
|
603
590
|
let root = ref.current;
|
|
604
591
|
if (!root) return null;
|
|
605
592
|
let { from: from, tabbable: tabbable = defaultOptions.tabbable, wrap: wrap = defaultOptions.wrap, accept: accept = defaultOptions.accept } = opts;
|
|
606
|
-
let node = from || (0, $cgawC$getOwnerDocument)(root)
|
|
593
|
+
let node = from || (0, $cgawC$getActiveElement)((0, $cgawC$getOwnerDocument)(root));
|
|
607
594
|
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, {
|
|
608
595
|
tabbable: tabbable,
|
|
609
596
|
accept: accept
|
|
@@ -735,5 +722,5 @@ class $9bf71ea28793e738$var$TreeNode {
|
|
|
735
722
|
let $9bf71ea28793e738$export$d06fae2ee68b101e = new $9bf71ea28793e738$var$Tree();
|
|
736
723
|
|
|
737
724
|
|
|
738
|
-
export {$9bf71ea28793e738$export$20e40289641fbbb6 as FocusScope, $9bf71ea28793e738$export$d06fae2ee68b101e as focusScopeTree, $9bf71ea28793e738$export$10c5169755ce7bd7 as useFocusManager, $9bf71ea28793e738$export$2d6ec8fc375ceafa as getFocusableTreeWalker, $9bf71ea28793e738$export$
|
|
725
|
+
export {$9bf71ea28793e738$export$20e40289641fbbb6 as FocusScope, $9bf71ea28793e738$export$d06fae2ee68b101e as focusScopeTree, $9bf71ea28793e738$export$10c5169755ce7bd7 as useFocusManager, $9bf71ea28793e738$export$2d6ec8fc375ceafa as getFocusableTreeWalker, $9bf71ea28793e738$export$1258395f99bf9cbf as isElementInChildOfActiveScope, $9bf71ea28793e738$export$c5251b9e124bf29 as createFocusManager};
|
|
739
726
|
//# sourceMappingURL=FocusScope.module.js.map
|