@react-aria/focus 3.21.5 → 3.22.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.
Files changed (40) hide show
  1. package/dist/import.mjs +16 -8
  2. package/dist/main.js +32 -24
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +16 -8
  5. package/dist/module.js.map +1 -1
  6. package/dist/types/src/index.d.ts +16 -0
  7. package/package.json +14 -14
  8. package/src/index.ts +16 -13
  9. package/dist/FocusRing.main.js +0 -44
  10. package/dist/FocusRing.main.js.map +0 -1
  11. package/dist/FocusRing.mjs +0 -35
  12. package/dist/FocusRing.module.js +0 -35
  13. package/dist/FocusRing.module.js.map +0 -1
  14. package/dist/FocusScope.main.js +0 -760
  15. package/dist/FocusScope.main.js.map +0 -1
  16. package/dist/FocusScope.mjs +0 -747
  17. package/dist/FocusScope.module.js +0 -747
  18. package/dist/FocusScope.module.js.map +0 -1
  19. package/dist/types.d.ts +0 -133
  20. package/dist/types.d.ts.map +0 -1
  21. package/dist/useFocusRing.main.js +0 -55
  22. package/dist/useFocusRing.main.js.map +0 -1
  23. package/dist/useFocusRing.mjs +0 -50
  24. package/dist/useFocusRing.module.js +0 -50
  25. package/dist/useFocusRing.module.js.map +0 -1
  26. package/dist/useHasTabbableChild.main.js +0 -62
  27. package/dist/useHasTabbableChild.main.js.map +0 -1
  28. package/dist/useHasTabbableChild.mjs +0 -57
  29. package/dist/useHasTabbableChild.module.js +0 -57
  30. package/dist/useHasTabbableChild.module.js.map +0 -1
  31. package/dist/virtualFocus.main.js +0 -46
  32. package/dist/virtualFocus.main.js.map +0 -1
  33. package/dist/virtualFocus.mjs +0 -38
  34. package/dist/virtualFocus.module.js +0 -38
  35. package/dist/virtualFocus.module.js.map +0 -1
  36. package/src/FocusRing.tsx +0 -55
  37. package/src/FocusScope.tsx +0 -1039
  38. package/src/useFocusRing.ts +0 -79
  39. package/src/useHasTabbableChild.ts +0 -66
  40. package/src/virtualFocus.ts +0 -33
@@ -1,747 +0,0 @@
1
- import {useLayoutEffect as $cgawC$useLayoutEffect, getActiveElement as $cgawC$getActiveElement, getOwnerDocument as $cgawC$getOwnerDocument, getOwnerWindow as $cgawC$getOwnerWindow, getEventTarget as $cgawC$getEventTarget, isAndroid as $cgawC$isAndroid, isChrome as $cgawC$isChrome, nodeContains as $cgawC$nodeContains, isTabbable as $cgawC$isTabbable, isFocusable as $cgawC$isFocusable, createShadowTreeWalker as $cgawC$createShadowTreeWalker} from "@react-aria/utils";
2
- import {getInteractionModality as $cgawC$getInteractionModality, focusSafely as $cgawC$focusSafely} from "@react-aria/interactions";
3
- import $cgawC$react, {useRef as $cgawC$useRef, useContext as $cgawC$useContext, useMemo as $cgawC$useMemo, useEffect as $cgawC$useEffect} from "react";
4
-
5
- /*
6
- * Copyright 2020 Adobe. All rights reserved.
7
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
8
- * you may not use this file except in compliance with the License. You may obtain a copy
9
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
10
- *
11
- * Unless required by applicable law or agreed to in writing, software distributed under
12
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
13
- * OF ANY KIND, either express or implied. See the License for the specific language
14
- * governing permissions and limitations under the License.
15
- */
16
-
17
-
18
- const $9bf71ea28793e738$var$FocusContext = /*#__PURE__*/ (0, $cgawC$react).createContext(null);
19
- const $9bf71ea28793e738$var$RESTORE_FOCUS_EVENT = 'react-aria-focus-scope-restore';
20
- let $9bf71ea28793e738$var$activeScope = null;
21
- function $9bf71ea28793e738$export$20e40289641fbbb6(props) {
22
- let { children: children, contain: contain, restoreFocus: restoreFocus, autoFocus: autoFocus } = props;
23
- let startRef = (0, $cgawC$useRef)(null);
24
- let endRef = (0, $cgawC$useRef)(null);
25
- let scopeRef = (0, $cgawC$useRef)([]);
26
- let { parentNode: parentNode } = (0, $cgawC$useContext)($9bf71ea28793e738$var$FocusContext) || {};
27
- // Create a tree node here so we can add children to it even before it is added to the tree.
28
- let node = (0, $cgawC$useMemo)(()=>new $9bf71ea28793e738$var$TreeNode({
29
- scopeRef: scopeRef
30
- }), [
31
- scopeRef
32
- ]);
33
- (0, $cgawC$useLayoutEffect)(()=>{
34
- // If a new scope mounts outside the active scope, (e.g. DialogContainer launched from a menu),
35
- // use the active scope as the parent instead of the parent from context. Layout effects run bottom
36
- // up, so if the parent is not yet added to the tree, don't do this. Only the outer-most FocusScope
37
- // that is being added should get the activeScope as its parent.
38
- let parent = parentNode || $9bf71ea28793e738$export$d06fae2ee68b101e.root;
39
- if ($9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(parent.scopeRef) && $9bf71ea28793e738$var$activeScope && !$9bf71ea28793e738$var$isAncestorScope($9bf71ea28793e738$var$activeScope, parent.scopeRef)) {
40
- let activeNode = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode($9bf71ea28793e738$var$activeScope);
41
- if (activeNode) parent = activeNode;
42
- }
43
- // Add the node to the parent, and to the tree.
44
- parent.addChild(node);
45
- $9bf71ea28793e738$export$d06fae2ee68b101e.addNode(node);
46
- }, [
47
- node,
48
- parentNode
49
- ]);
50
- (0, $cgawC$useLayoutEffect)(()=>{
51
- let node = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef);
52
- if (node) node.contain = !!contain;
53
- }, [
54
- contain
55
- ]);
56
- (0, $cgawC$useLayoutEffect)(()=>{
57
- var _startRef_current;
58
- // Find all rendered nodes between the sentinels and add them to the scope.
59
- let node = (_startRef_current = startRef.current) === null || _startRef_current === void 0 ? void 0 : _startRef_current.nextSibling;
60
- let nodes = [];
61
- let stopPropagation = (e)=>e.stopPropagation();
62
- while(node && node !== endRef.current){
63
- nodes.push(node);
64
- // Stop custom restore focus event from propagating to parent focus scopes.
65
- node.addEventListener($9bf71ea28793e738$var$RESTORE_FOCUS_EVENT, stopPropagation);
66
- node = node.nextSibling;
67
- }
68
- scopeRef.current = nodes;
69
- return ()=>{
70
- for (let node of nodes)node.removeEventListener($9bf71ea28793e738$var$RESTORE_FOCUS_EVENT, stopPropagation);
71
- };
72
- }, [
73
- children
74
- ]);
75
- $9bf71ea28793e738$var$useActiveScopeTracker(scopeRef, restoreFocus, contain);
76
- $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain);
77
- $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain);
78
- $9bf71ea28793e738$var$useAutoFocus(scopeRef, autoFocus);
79
- // This needs to be an effect so that activeScope is updated after the FocusScope tree is complete.
80
- // It cannot be a useLayoutEffect because the parent of this node hasn't been attached in the tree yet.
81
- (0, $cgawC$useEffect)(()=>{
82
- const activeElement = (0, $cgawC$getActiveElement)((0, $cgawC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined));
83
- let scope = null;
84
- if ($9bf71ea28793e738$var$isElementInScope(activeElement, scopeRef.current)) {
85
- // We need to traverse the focusScope tree and find the bottom most scope that
86
- // contains the active element and set that as the activeScope.
87
- for (let node of $9bf71ea28793e738$export$d06fae2ee68b101e.traverse())if (node.scopeRef && $9bf71ea28793e738$var$isElementInScope(activeElement, node.scopeRef.current)) scope = node;
88
- if (scope === $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef)) $9bf71ea28793e738$var$activeScope = scope.scopeRef;
89
- }
90
- }, [
91
- scopeRef
92
- ]);
93
- // This layout effect cleanup is so that the tree node is removed synchronously with react before the RAF
94
- // in useRestoreFocus cleanup runs.
95
- (0, $cgawC$useLayoutEffect)(()=>{
96
- return ()=>{
97
- var _focusScopeTree_getTreeNode_parent, _focusScopeTree_getTreeNode;
98
- var _focusScopeTree_getTreeNode_parent_scopeRef;
99
- // Scope may have been re-parented.
100
- let parentScope = (_focusScopeTree_getTreeNode_parent_scopeRef = (_focusScopeTree_getTreeNode = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef)) === null || _focusScopeTree_getTreeNode === void 0 ? void 0 : (_focusScopeTree_getTreeNode_parent = _focusScopeTree_getTreeNode.parent) === null || _focusScopeTree_getTreeNode_parent === void 0 ? void 0 : _focusScopeTree_getTreeNode_parent.scopeRef) !== null && _focusScopeTree_getTreeNode_parent_scopeRef !== void 0 ? _focusScopeTree_getTreeNode_parent_scopeRef : null;
101
- if ((scopeRef === $9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope(scopeRef, $9bf71ea28793e738$var$activeScope)) && (!parentScope || $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(parentScope))) $9bf71ea28793e738$var$activeScope = parentScope;
102
- $9bf71ea28793e738$export$d06fae2ee68b101e.removeTreeNode(scopeRef);
103
- };
104
- }, [
105
- scopeRef
106
- ]);
107
- let focusManager = (0, $cgawC$useMemo)(()=>$9bf71ea28793e738$var$createFocusManagerForScope(scopeRef), []);
108
- let value = (0, $cgawC$useMemo)(()=>({
109
- focusManager: focusManager,
110
- parentNode: node
111
- }), [
112
- node,
113
- focusManager
114
- ]);
115
- return /*#__PURE__*/ (0, $cgawC$react).createElement($9bf71ea28793e738$var$FocusContext.Provider, {
116
- value: value
117
- }, /*#__PURE__*/ (0, $cgawC$react).createElement("span", {
118
- "data-focus-scope-start": true,
119
- hidden: true,
120
- ref: startRef
121
- }), children, /*#__PURE__*/ (0, $cgawC$react).createElement("span", {
122
- "data-focus-scope-end": true,
123
- hidden: true,
124
- ref: endRef
125
- }));
126
- }
127
- function $9bf71ea28793e738$export$10c5169755ce7bd7() {
128
- var _useContext;
129
- return (_useContext = (0, $cgawC$useContext)($9bf71ea28793e738$var$FocusContext)) === null || _useContext === void 0 ? void 0 : _useContext.focusManager;
130
- }
131
- function $9bf71ea28793e738$var$createFocusManagerForScope(scopeRef) {
132
- return {
133
- focusNext (opts = {}) {
134
- let scope = scopeRef.current;
135
- let { from: from, tabbable: tabbable, wrap: wrap, accept: accept } = opts;
136
- var _scope_;
137
- let node = from || (0, $cgawC$getActiveElement)((0, $cgawC$getOwnerDocument)((_scope_ = scope[0]) !== null && _scope_ !== void 0 ? _scope_ : undefined));
138
- let sentinel = scope[0].previousElementSibling;
139
- let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
140
- let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
141
- tabbable: tabbable,
142
- accept: accept
143
- }, scope);
144
- walker.currentNode = $9bf71ea28793e738$var$isElementInScope(node, scope) ? node : sentinel;
145
- let nextNode = walker.nextNode();
146
- if (!nextNode && wrap) {
147
- walker.currentNode = sentinel;
148
- nextNode = walker.nextNode();
149
- }
150
- if (nextNode) $9bf71ea28793e738$var$focusElement(nextNode, true);
151
- return nextNode;
152
- },
153
- focusPrevious (opts = {}) {
154
- let scope = scopeRef.current;
155
- let { from: from, tabbable: tabbable, wrap: wrap, accept: accept } = opts;
156
- var _scope_;
157
- let node = from || (0, $cgawC$getActiveElement)((0, $cgawC$getOwnerDocument)((_scope_ = scope[0]) !== null && _scope_ !== void 0 ? _scope_ : undefined));
158
- let sentinel = scope[scope.length - 1].nextElementSibling;
159
- let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
160
- let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
161
- tabbable: tabbable,
162
- accept: accept
163
- }, scope);
164
- walker.currentNode = $9bf71ea28793e738$var$isElementInScope(node, scope) ? node : sentinel;
165
- let previousNode = walker.previousNode();
166
- if (!previousNode && wrap) {
167
- walker.currentNode = sentinel;
168
- previousNode = walker.previousNode();
169
- }
170
- if (previousNode) $9bf71ea28793e738$var$focusElement(previousNode, true);
171
- return previousNode;
172
- },
173
- focusFirst (opts = {}) {
174
- let scope = scopeRef.current;
175
- let { tabbable: tabbable, accept: accept } = opts;
176
- let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
177
- let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
178
- tabbable: tabbable,
179
- accept: accept
180
- }, scope);
181
- walker.currentNode = scope[0].previousElementSibling;
182
- let nextNode = walker.nextNode();
183
- if (nextNode) $9bf71ea28793e738$var$focusElement(nextNode, true);
184
- return nextNode;
185
- },
186
- focusLast (opts = {}) {
187
- let scope = scopeRef.current;
188
- let { tabbable: tabbable, accept: accept } = opts;
189
- let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
190
- let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
191
- tabbable: tabbable,
192
- accept: accept
193
- }, scope);
194
- walker.currentNode = scope[scope.length - 1].nextElementSibling;
195
- let previousNode = walker.previousNode();
196
- if (previousNode) $9bf71ea28793e738$var$focusElement(previousNode, true);
197
- return previousNode;
198
- }
199
- };
200
- }
201
- function $9bf71ea28793e738$var$getScopeRoot(scope) {
202
- return scope[0].parentElement;
203
- }
204
- function $9bf71ea28793e738$var$shouldContainFocus(scopeRef) {
205
- let scope = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode($9bf71ea28793e738$var$activeScope);
206
- while(scope && scope.scopeRef !== scopeRef){
207
- if (scope.contain) return false;
208
- scope = scope.parent;
209
- }
210
- return true;
211
- }
212
- function $9bf71ea28793e738$var$getRadiosInGroup(element) {
213
- if (!element.form) // Radio buttons outside a form - query the document
214
- return Array.from((0, $cgawC$getOwnerDocument)(element).querySelectorAll(`input[type="radio"][name="${CSS.escape(element.name)}"]`)).filter((radio)=>!radio.form);
215
- // namedItem returns RadioNodeList (iterable) for 2+ elements, but a single Element for exactly 1.
216
- // https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormControlsCollection/namedItem
217
- const radioList = element.form.elements.namedItem(element.name);
218
- let ownerWindow = (0, $cgawC$getOwnerWindow)(element);
219
- if (radioList instanceof ownerWindow.RadioNodeList) return Array.from(radioList).filter((el)=>el instanceof ownerWindow.HTMLInputElement);
220
- if (radioList instanceof ownerWindow.HTMLInputElement) return [
221
- radioList
222
- ];
223
- return [];
224
- }
225
- function $9bf71ea28793e738$var$isTabbableRadio(element) {
226
- if (element.checked) return true;
227
- const radios = $9bf71ea28793e738$var$getRadiosInGroup(element);
228
- return radios.length > 0 && !radios.some((radio)=>radio.checked);
229
- }
230
- function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
231
- let focusedNode = (0, $cgawC$useRef)(undefined);
232
- let raf = (0, $cgawC$useRef)(undefined);
233
- (0, $cgawC$useLayoutEffect)(()=>{
234
- let scope = scopeRef.current;
235
- if (!contain) {
236
- // if contain was changed, then we should cancel any ongoing waits to pull focus back into containment
237
- if (raf.current) {
238
- cancelAnimationFrame(raf.current);
239
- raf.current = undefined;
240
- }
241
- return;
242
- }
243
- const ownerDocument = (0, $cgawC$getOwnerDocument)(scope ? scope[0] : undefined);
244
- // Handle the Tab key to contain focus within the scope
245
- let onKeyDown = (e)=>{
246
- if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || !$9bf71ea28793e738$var$shouldContainFocus(scopeRef) || e.isComposing) return;
247
- let focusedElement = (0, $cgawC$getActiveElement)(ownerDocument);
248
- let scope = scopeRef.current;
249
- if (!scope || !$9bf71ea28793e738$var$isElementInScope(focusedElement, scope)) return;
250
- let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
251
- let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
252
- tabbable: true
253
- }, scope);
254
- if (!focusedElement) return;
255
- walker.currentNode = focusedElement;
256
- let nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
257
- if (!nextElement) {
258
- walker.currentNode = e.shiftKey ? scope[scope.length - 1].nextElementSibling : scope[0].previousElementSibling;
259
- nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
260
- }
261
- e.preventDefault();
262
- if (nextElement) $9bf71ea28793e738$var$focusElement(nextElement, true);
263
- };
264
- let onFocus = (e)=>{
265
- // If focusing an element in a child scope of the currently active scope, the child becomes active.
266
- // Moving out of the active scope to an ancestor is not allowed.
267
- if ((!$9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope($9bf71ea28793e738$var$activeScope, scopeRef)) && $9bf71ea28793e738$var$isElementInScope((0, $cgawC$getEventTarget)(e), scopeRef.current)) {
268
- $9bf71ea28793e738$var$activeScope = scopeRef;
269
- focusedNode.current = (0, $cgawC$getEventTarget)(e);
270
- } else if ($9bf71ea28793e738$var$shouldContainFocus(scopeRef) && !$9bf71ea28793e738$var$isElementInChildScope((0, $cgawC$getEventTarget)(e), scopeRef)) {
271
- // If a focus event occurs outside the active scope (e.g. user tabs from browser location bar),
272
- // restore focus to the previously focused node or the first tabbable element in the active scope.
273
- if (focusedNode.current) focusedNode.current.focus();
274
- else if ($9bf71ea28793e738$var$activeScope && $9bf71ea28793e738$var$activeScope.current) $9bf71ea28793e738$var$focusFirstInScope($9bf71ea28793e738$var$activeScope.current);
275
- } else if ($9bf71ea28793e738$var$shouldContainFocus(scopeRef)) focusedNode.current = (0, $cgawC$getEventTarget)(e);
276
- };
277
- let onBlur = (e)=>{
278
- // Firefox doesn't shift focus back to the Dialog properly without this
279
- if (raf.current) cancelAnimationFrame(raf.current);
280
- raf.current = requestAnimationFrame(()=>{
281
- // Patches infinite focus coersion loop for Android Talkback where the user isn't able to move the virtual cursor
282
- // if within a containing focus scope. Bug filed against Chrome: https://issuetracker.google.com/issues/384844019.
283
- // Note that this means focus can leave focus containing modals due to this, but it is isolated to Chrome Talkback.
284
- let modality = (0, $cgawC$getInteractionModality)();
285
- let shouldSkipFocusRestore = (modality === 'virtual' || modality === null) && (0, $cgawC$isAndroid)() && (0, $cgawC$isChrome)();
286
- // Use document.activeElement instead of e.relatedTarget so we can tell if user clicked into iframe
287
- let activeElement = (0, $cgawC$getActiveElement)(ownerDocument);
288
- if (!shouldSkipFocusRestore && activeElement && $9bf71ea28793e738$var$shouldContainFocus(scopeRef) && !$9bf71ea28793e738$var$isElementInChildScope(activeElement, scopeRef)) {
289
- $9bf71ea28793e738$var$activeScope = scopeRef;
290
- let target = (0, $cgawC$getEventTarget)(e);
291
- if (target && target.isConnected) {
292
- var _focusedNode_current;
293
- focusedNode.current = target;
294
- (_focusedNode_current = focusedNode.current) === null || _focusedNode_current === void 0 ? void 0 : _focusedNode_current.focus();
295
- } else if ($9bf71ea28793e738$var$activeScope.current) $9bf71ea28793e738$var$focusFirstInScope($9bf71ea28793e738$var$activeScope.current);
296
- }
297
- });
298
- };
299
- ownerDocument.addEventListener('keydown', onKeyDown, false);
300
- ownerDocument.addEventListener('focusin', onFocus, false);
301
- scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.addEventListener('focusin', onFocus, false));
302
- scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.addEventListener('focusout', onBlur, false));
303
- return ()=>{
304
- ownerDocument.removeEventListener('keydown', onKeyDown, false);
305
- ownerDocument.removeEventListener('focusin', onFocus, false);
306
- scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.removeEventListener('focusin', onFocus, false));
307
- scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.removeEventListener('focusout', onBlur, false));
308
- };
309
- }, [
310
- scopeRef,
311
- contain
312
- ]);
313
- // This is a useLayoutEffect so it is guaranteed to run before our async synthetic blur
314
- (0, $cgawC$useLayoutEffect)(()=>{
315
- return ()=>{
316
- if (raf.current) cancelAnimationFrame(raf.current);
317
- };
318
- }, [
319
- raf
320
- ]);
321
- }
322
- function $9bf71ea28793e738$var$isElementInAnyScope(element) {
323
- return $9bf71ea28793e738$var$isElementInChildScope(element);
324
- }
325
- function $9bf71ea28793e738$var$isElementInScope(element, scope) {
326
- if (!element) return false;
327
- if (!scope) return false;
328
- return scope.some((node)=>(0, $cgawC$nodeContains)(node, element));
329
- }
330
- function $9bf71ea28793e738$var$isElementInChildScope(element, scope = null) {
331
- // If the element is within a top layer element (e.g. toasts), always allow moving focus there.
332
- if (element instanceof Element && element.closest('[data-react-aria-top-layer]')) return true;
333
- // node.contains in isElementInScope covers child scopes that are also DOM children,
334
- // but does not cover child scopes in portals.
335
- for (let { scopeRef: s } of $9bf71ea28793e738$export$d06fae2ee68b101e.traverse($9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scope))){
336
- if (s && $9bf71ea28793e738$var$isElementInScope(element, s.current)) return true;
337
- }
338
- return false;
339
- }
340
- function $9bf71ea28793e738$export$1258395f99bf9cbf(element) {
341
- return $9bf71ea28793e738$var$isElementInChildScope(element, $9bf71ea28793e738$var$activeScope);
342
- }
343
- function $9bf71ea28793e738$var$isAncestorScope(ancestor, scope) {
344
- var _focusScopeTree_getTreeNode;
345
- let parent = (_focusScopeTree_getTreeNode = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scope)) === null || _focusScopeTree_getTreeNode === void 0 ? void 0 : _focusScopeTree_getTreeNode.parent;
346
- while(parent){
347
- if (parent.scopeRef === ancestor) return true;
348
- parent = parent.parent;
349
- }
350
- return false;
351
- }
352
- function $9bf71ea28793e738$var$focusElement(element, scroll = false) {
353
- if (element != null && !scroll) try {
354
- (0, $cgawC$focusSafely)(element);
355
- } catch {
356
- // ignore
357
- }
358
- else if (element != null) try {
359
- element.focus();
360
- } catch {
361
- // ignore
362
- }
363
- }
364
- function $9bf71ea28793e738$var$getFirstInScope(scope, tabbable = true) {
365
- let sentinel = scope[0].previousElementSibling;
366
- let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
367
- let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
368
- tabbable: tabbable
369
- }, scope);
370
- walker.currentNode = sentinel;
371
- let nextNode = walker.nextNode();
372
- // If the scope does not contain a tabbable element, use the first focusable element.
373
- if (tabbable && !nextNode) {
374
- scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
375
- walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
376
- tabbable: false
377
- }, scope);
378
- walker.currentNode = sentinel;
379
- nextNode = walker.nextNode();
380
- }
381
- return nextNode;
382
- }
383
- function $9bf71ea28793e738$var$focusFirstInScope(scope, tabbable = true) {
384
- $9bf71ea28793e738$var$focusElement($9bf71ea28793e738$var$getFirstInScope(scope, tabbable));
385
- }
386
- function $9bf71ea28793e738$var$useAutoFocus(scopeRef, autoFocus) {
387
- const autoFocusRef = (0, $cgawC$react).useRef(autoFocus);
388
- (0, $cgawC$useEffect)(()=>{
389
- if (autoFocusRef.current) {
390
- $9bf71ea28793e738$var$activeScope = scopeRef;
391
- const ownerDocument = (0, $cgawC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined);
392
- if (!$9bf71ea28793e738$var$isElementInScope((0, $cgawC$getActiveElement)(ownerDocument), $9bf71ea28793e738$var$activeScope.current) && scopeRef.current) $9bf71ea28793e738$var$focusFirstInScope(scopeRef.current);
393
- }
394
- autoFocusRef.current = false;
395
- }, [
396
- scopeRef
397
- ]);
398
- }
399
- function $9bf71ea28793e738$var$useActiveScopeTracker(scopeRef, restore, contain) {
400
- // tracks the active scope, in case restore and contain are both false.
401
- // if either are true, this is tracked in useRestoreFocus or useFocusContainment.
402
- (0, $cgawC$useLayoutEffect)(()=>{
403
- if (restore || contain) return;
404
- let scope = scopeRef.current;
405
- const ownerDocument = (0, $cgawC$getOwnerDocument)(scope ? scope[0] : undefined);
406
- let onFocus = (e)=>{
407
- let target = (0, $cgawC$getEventTarget)(e);
408
- if ($9bf71ea28793e738$var$isElementInScope(target, scopeRef.current)) $9bf71ea28793e738$var$activeScope = scopeRef;
409
- else if (!$9bf71ea28793e738$var$isElementInAnyScope(target)) $9bf71ea28793e738$var$activeScope = null;
410
- };
411
- ownerDocument.addEventListener('focusin', onFocus, false);
412
- scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.addEventListener('focusin', onFocus, false));
413
- return ()=>{
414
- ownerDocument.removeEventListener('focusin', onFocus, false);
415
- scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.removeEventListener('focusin', onFocus, false));
416
- };
417
- }, [
418
- scopeRef,
419
- restore,
420
- contain
421
- ]);
422
- }
423
- function $9bf71ea28793e738$var$shouldRestoreFocus(scopeRef) {
424
- let scope = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode($9bf71ea28793e738$var$activeScope);
425
- while(scope && scope.scopeRef !== scopeRef){
426
- if (scope.nodeToRestore) return false;
427
- scope = scope.parent;
428
- }
429
- return (scope === null || scope === void 0 ? void 0 : scope.scopeRef) === scopeRef;
430
- }
431
- function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain) {
432
- // create a ref during render instead of useLayoutEffect so the active element is saved before a child with autoFocus=true mounts.
433
- // eslint-disable-next-line no-restricted-globals
434
- const nodeToRestoreRef = (0, $cgawC$useRef)(typeof document !== 'undefined' ? (0, $cgawC$getActiveElement)((0, $cgawC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined)) : null);
435
- // restoring scopes should all track if they are active regardless of contain, but contain already tracks it plus logic to contain the focus
436
- // restoring-non-containing scopes should only care if they become active so they can perform the restore
437
- (0, $cgawC$useLayoutEffect)(()=>{
438
- let scope = scopeRef.current;
439
- const ownerDocument = (0, $cgawC$getOwnerDocument)(scope ? scope[0] : undefined);
440
- if (!restoreFocus || contain) return;
441
- let onFocus = ()=>{
442
- // If focusing an element in a child scope of the currently active scope, the child becomes active.
443
- // Moving out of the active scope to an ancestor is not allowed.
444
- if ((!$9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope($9bf71ea28793e738$var$activeScope, scopeRef)) && $9bf71ea28793e738$var$isElementInScope((0, $cgawC$getActiveElement)(ownerDocument), scopeRef.current)) $9bf71ea28793e738$var$activeScope = scopeRef;
445
- };
446
- ownerDocument.addEventListener('focusin', onFocus, false);
447
- scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.addEventListener('focusin', onFocus, false));
448
- return ()=>{
449
- ownerDocument.removeEventListener('focusin', onFocus, false);
450
- scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.removeEventListener('focusin', onFocus, false));
451
- };
452
- // eslint-disable-next-line react-hooks/exhaustive-deps
453
- }, [
454
- scopeRef,
455
- contain
456
- ]);
457
- (0, $cgawC$useLayoutEffect)(()=>{
458
- const ownerDocument = (0, $cgawC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined);
459
- if (!restoreFocus) return;
460
- // Handle the Tab key so that tabbing out of the scope goes to the next element
461
- // after the node that had focus when the scope mounted. This is important when
462
- // using portals for overlays, so that focus goes to the expected element when
463
- // tabbing out of the overlay.
464
- let onKeyDown = (e)=>{
465
- if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || !$9bf71ea28793e738$var$shouldContainFocus(scopeRef) || e.isComposing) return;
466
- let focusedElement = ownerDocument.activeElement;
467
- if (!$9bf71ea28793e738$var$isElementInChildScope(focusedElement, scopeRef) || !$9bf71ea28793e738$var$shouldRestoreFocus(scopeRef)) return;
468
- let treeNode = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef);
469
- if (!treeNode) return;
470
- let nodeToRestore = treeNode.nodeToRestore;
471
- // Create a DOM tree walker that matches all tabbable elements
472
- let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(ownerDocument.body, {
473
- tabbable: true
474
- });
475
- // Find the next tabbable element after the currently focused element
476
- walker.currentNode = focusedElement;
477
- let nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
478
- if (!nodeToRestore || !nodeToRestore.isConnected || nodeToRestore === ownerDocument.body) {
479
- nodeToRestore = undefined;
480
- treeNode.nodeToRestore = undefined;
481
- }
482
- // If there is no next element, or it is outside the current scope, move focus to the
483
- // next element after the node to restore to instead.
484
- if ((!nextElement || !$9bf71ea28793e738$var$isElementInChildScope(nextElement, scopeRef)) && nodeToRestore) {
485
- walker.currentNode = nodeToRestore;
486
- // Skip over elements within the scope, in case the scope immediately follows the node to restore.
487
- do nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
488
- while ($9bf71ea28793e738$var$isElementInChildScope(nextElement, scopeRef));
489
- e.preventDefault();
490
- e.stopPropagation();
491
- if (nextElement) $9bf71ea28793e738$var$focusElement(nextElement, true);
492
- 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)
493
- // then move focus to the body.
494
- // Otherwise restore focus to the nodeToRestore (e.g menu within a popover -> tabbing to close the menu should move focus to menu trigger)
495
- if (!$9bf71ea28793e738$var$isElementInAnyScope(nodeToRestore)) focusedElement.blur();
496
- else $9bf71ea28793e738$var$focusElement(nodeToRestore, true);
497
- }
498
- };
499
- if (!contain) ownerDocument.addEventListener('keydown', onKeyDown, true);
500
- return ()=>{
501
- if (!contain) ownerDocument.removeEventListener('keydown', onKeyDown, true);
502
- };
503
- }, [
504
- scopeRef,
505
- restoreFocus,
506
- contain
507
- ]);
508
- // useLayoutEffect instead of useEffect so the active element is saved synchronously instead of asynchronously.
509
- (0, $cgawC$useLayoutEffect)(()=>{
510
- const ownerDocument = (0, $cgawC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined);
511
- if (!restoreFocus) return;
512
- let treeNode = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef);
513
- if (!treeNode) return;
514
- var _nodeToRestoreRef_current;
515
- treeNode.nodeToRestore = (_nodeToRestoreRef_current = nodeToRestoreRef.current) !== null && _nodeToRestoreRef_current !== void 0 ? _nodeToRestoreRef_current : undefined;
516
- return ()=>{
517
- let treeNode = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef);
518
- if (!treeNode) return;
519
- let nodeToRestore = treeNode.nodeToRestore;
520
- // if we already lost focus to the body and this was the active scope, then we should attempt to restore
521
- let activeElement = (0, $cgawC$getActiveElement)(ownerDocument);
522
- if (restoreFocus && nodeToRestore && (activeElement && $9bf71ea28793e738$var$isElementInChildScope(activeElement, scopeRef) || activeElement === ownerDocument.body && $9bf71ea28793e738$var$shouldRestoreFocus(scopeRef))) {
523
- // freeze the focusScopeTree so it persists after the raf, otherwise during unmount nodes are removed from it
524
- let clonedTree = $9bf71ea28793e738$export$d06fae2ee68b101e.clone();
525
- requestAnimationFrame(()=>{
526
- // Only restore focus if we've lost focus to the body, the alternative is that focus has been purposefully moved elsewhere
527
- if (ownerDocument.activeElement === ownerDocument.body) {
528
- // look up the tree starting with our scope to find a nodeToRestore still in the DOM
529
- let treeNode = clonedTree.getTreeNode(scopeRef);
530
- while(treeNode){
531
- if (treeNode.nodeToRestore && treeNode.nodeToRestore.isConnected) {
532
- $9bf71ea28793e738$var$restoreFocusToElement(treeNode.nodeToRestore);
533
- return;
534
- }
535
- treeNode = treeNode.parent;
536
- }
537
- // If no nodeToRestore was found, focus the first element in the nearest
538
- // ancestor scope that is still in the tree.
539
- treeNode = clonedTree.getTreeNode(scopeRef);
540
- while(treeNode){
541
- if (treeNode.scopeRef && treeNode.scopeRef.current && $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(treeNode.scopeRef)) {
542
- let node = $9bf71ea28793e738$var$getFirstInScope(treeNode.scopeRef.current, true);
543
- $9bf71ea28793e738$var$restoreFocusToElement(node);
544
- return;
545
- }
546
- treeNode = treeNode.parent;
547
- }
548
- }
549
- });
550
- }
551
- };
552
- }, [
553
- scopeRef,
554
- restoreFocus
555
- ]);
556
- }
557
- function $9bf71ea28793e738$var$restoreFocusToElement(node) {
558
- // Dispatch a custom event that parent elements can intercept to customize focus restoration.
559
- // For example, virtualized collection components reuse DOM elements, so the original element
560
- // might still exist in the DOM but representing a different item.
561
- if (node.dispatchEvent(new CustomEvent($9bf71ea28793e738$var$RESTORE_FOCUS_EVENT, {
562
- bubbles: true,
563
- cancelable: true
564
- }))) $9bf71ea28793e738$var$focusElement(node);
565
- }
566
- function $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, opts, scope) {
567
- let filter = (opts === null || opts === void 0 ? void 0 : opts.tabbable) ? (0, $cgawC$isTabbable) : (0, $cgawC$isFocusable);
568
- // Ensure that root is an Element or fall back appropriately
569
- let rootElement = (root === null || root === void 0 ? void 0 : root.nodeType) === Node.ELEMENT_NODE ? root : null;
570
- // Determine the document to use
571
- let doc = (0, $cgawC$getOwnerDocument)(rootElement);
572
- // Create a TreeWalker, ensuring the root is an Element or Document
573
- let walker = (0, $cgawC$createShadowTreeWalker)(doc, root || doc, NodeFilter.SHOW_ELEMENT, {
574
- acceptNode (node) {
575
- // Skip nodes inside the starting node.
576
- if ((0, $cgawC$nodeContains)(opts === null || opts === void 0 ? void 0 : opts.from, node)) return NodeFilter.FILTER_REJECT;
577
- if ((opts === null || opts === void 0 ? void 0 : opts.tabbable) && node.tagName === 'INPUT' && node.getAttribute('type') === 'radio') {
578
- // If the radio is in a form, we can get all the other radios by name
579
- if (!$9bf71ea28793e738$var$isTabbableRadio(node)) return NodeFilter.FILTER_REJECT;
580
- // If the radio is in the same group as the current node and none are selected, we can skip it
581
- if (walker.currentNode.tagName === 'INPUT' && walker.currentNode.type === 'radio' && walker.currentNode.name === node.name) return NodeFilter.FILTER_REJECT;
582
- }
583
- if (filter(node) && (!scope || $9bf71ea28793e738$var$isElementInScope(node, scope)) && (!(opts === null || opts === void 0 ? void 0 : opts.accept) || opts.accept(node))) return NodeFilter.FILTER_ACCEPT;
584
- return NodeFilter.FILTER_SKIP;
585
- }
586
- });
587
- if (opts === null || opts === void 0 ? void 0 : opts.from) walker.currentNode = opts.from;
588
- return walker;
589
- }
590
- function $9bf71ea28793e738$export$c5251b9e124bf29(ref, defaultOptions = {}) {
591
- return {
592
- focusNext (opts = {}) {
593
- let root = ref.current;
594
- if (!root) return null;
595
- let { from: from, tabbable: tabbable = defaultOptions.tabbable, wrap: wrap = defaultOptions.wrap, accept: accept = defaultOptions.accept } = opts;
596
- let node = from || (0, $cgawC$getActiveElement)((0, $cgawC$getOwnerDocument)(root));
597
- let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, {
598
- tabbable: tabbable,
599
- accept: accept
600
- });
601
- if ((0, $cgawC$nodeContains)(root, node)) walker.currentNode = node;
602
- let nextNode = walker.nextNode();
603
- if (!nextNode && wrap) {
604
- walker.currentNode = root;
605
- nextNode = walker.nextNode();
606
- }
607
- if (nextNode) $9bf71ea28793e738$var$focusElement(nextNode, true);
608
- return nextNode;
609
- },
610
- focusPrevious (opts = defaultOptions) {
611
- let root = ref.current;
612
- if (!root) return null;
613
- let { from: from, tabbable: tabbable = defaultOptions.tabbable, wrap: wrap = defaultOptions.wrap, accept: accept = defaultOptions.accept } = opts;
614
- let node = from || (0, $cgawC$getActiveElement)((0, $cgawC$getOwnerDocument)(root));
615
- let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, {
616
- tabbable: tabbable,
617
- accept: accept
618
- });
619
- if ((0, $cgawC$nodeContains)(root, node)) walker.currentNode = node;
620
- else {
621
- let next = $9bf71ea28793e738$var$last(walker);
622
- if (next) $9bf71ea28793e738$var$focusElement(next, true);
623
- return next !== null && next !== void 0 ? next : null;
624
- }
625
- let previousNode = walker.previousNode();
626
- if (!previousNode && wrap) {
627
- walker.currentNode = root;
628
- let lastNode = $9bf71ea28793e738$var$last(walker);
629
- if (!lastNode) // couldn't wrap
630
- return null;
631
- previousNode = lastNode;
632
- }
633
- if (previousNode) $9bf71ea28793e738$var$focusElement(previousNode, true);
634
- return previousNode !== null && previousNode !== void 0 ? previousNode : null;
635
- },
636
- focusFirst (opts = defaultOptions) {
637
- let root = ref.current;
638
- if (!root) return null;
639
- let { tabbable: tabbable = defaultOptions.tabbable, accept: accept = defaultOptions.accept } = opts;
640
- let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, {
641
- tabbable: tabbable,
642
- accept: accept
643
- });
644
- let nextNode = walker.nextNode();
645
- if (nextNode) $9bf71ea28793e738$var$focusElement(nextNode, true);
646
- return nextNode;
647
- },
648
- focusLast (opts = defaultOptions) {
649
- let root = ref.current;
650
- if (!root) return null;
651
- let { tabbable: tabbable = defaultOptions.tabbable, accept: accept = defaultOptions.accept } = opts;
652
- let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, {
653
- tabbable: tabbable,
654
- accept: accept
655
- });
656
- let next = $9bf71ea28793e738$var$last(walker);
657
- if (next) $9bf71ea28793e738$var$focusElement(next, true);
658
- return next !== null && next !== void 0 ? next : null;
659
- }
660
- };
661
- }
662
- function $9bf71ea28793e738$var$last(walker) {
663
- let next = undefined;
664
- let last;
665
- do {
666
- last = walker.lastChild();
667
- if (last) next = last;
668
- }while (last);
669
- return next;
670
- }
671
- class $9bf71ea28793e738$var$Tree {
672
- get size() {
673
- return this.fastMap.size;
674
- }
675
- getTreeNode(data) {
676
- return this.fastMap.get(data);
677
- }
678
- addTreeNode(scopeRef, parent, nodeToRestore) {
679
- let parentNode = this.fastMap.get(parent !== null && parent !== void 0 ? parent : null);
680
- if (!parentNode) return;
681
- let node = new $9bf71ea28793e738$var$TreeNode({
682
- scopeRef: scopeRef
683
- });
684
- parentNode.addChild(node);
685
- node.parent = parentNode;
686
- this.fastMap.set(scopeRef, node);
687
- if (nodeToRestore) node.nodeToRestore = nodeToRestore;
688
- }
689
- addNode(node) {
690
- this.fastMap.set(node.scopeRef, node);
691
- }
692
- removeTreeNode(scopeRef) {
693
- // never remove the root
694
- if (scopeRef === null) return;
695
- let node = this.fastMap.get(scopeRef);
696
- if (!node) return;
697
- let parentNode = node.parent;
698
- // when we remove a scope, check if any sibling scopes are trying to restore focus to something inside the scope we're removing
699
- // if we are, then replace the siblings restore with the restore from the scope we're removing
700
- for (let current of this.traverse())if (current !== node && node.nodeToRestore && current.nodeToRestore && node.scopeRef && node.scopeRef.current && $9bf71ea28793e738$var$isElementInScope(current.nodeToRestore, node.scopeRef.current)) current.nodeToRestore = node.nodeToRestore;
701
- let children = node.children;
702
- if (parentNode) {
703
- parentNode.removeChild(node);
704
- if (children.size > 0) children.forEach((child)=>parentNode && parentNode.addChild(child));
705
- }
706
- this.fastMap.delete(node.scopeRef);
707
- }
708
- // Pre Order Depth First
709
- *traverse(node = this.root) {
710
- if (node.scopeRef != null) yield node;
711
- if (node.children.size > 0) for (let child of node.children)yield* this.traverse(child);
712
- }
713
- clone() {
714
- var _node_parent;
715
- let newTree = new $9bf71ea28793e738$var$Tree();
716
- var _node_parent_scopeRef;
717
- for (let node of this.traverse())newTree.addTreeNode(node.scopeRef, (_node_parent_scopeRef = (_node_parent = node.parent) === null || _node_parent === void 0 ? void 0 : _node_parent.scopeRef) !== null && _node_parent_scopeRef !== void 0 ? _node_parent_scopeRef : null, node.nodeToRestore);
718
- return newTree;
719
- }
720
- constructor(){
721
- this.fastMap = new Map();
722
- this.root = new $9bf71ea28793e738$var$TreeNode({
723
- scopeRef: null
724
- });
725
- this.fastMap.set(null, this.root);
726
- }
727
- }
728
- class $9bf71ea28793e738$var$TreeNode {
729
- addChild(node) {
730
- this.children.add(node);
731
- node.parent = this;
732
- }
733
- removeChild(node) {
734
- this.children.delete(node);
735
- node.parent = undefined;
736
- }
737
- constructor(props){
738
- this.children = new Set();
739
- this.contain = false;
740
- this.scopeRef = props.scopeRef;
741
- }
742
- }
743
- let $9bf71ea28793e738$export$d06fae2ee68b101e = new $9bf71ea28793e738$var$Tree();
744
-
745
-
746
- 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};
747
- //# sourceMappingURL=FocusScope.module.js.map