@react-aria/focus 3.5.0 → 3.5.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/main.js CHANGED
@@ -1,65 +1,56 @@
1
- var _babelRuntimeHelpersObjectWithoutPropertiesLoose = $parcel$interopDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
2
-
3
- var _clsx = $parcel$interopDefault(require("clsx"));
4
-
5
- var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
6
-
7
- var _react2 = require("react");
8
-
9
- var _react = $parcel$interopDefault(_react2);
10
-
11
- var {
12
- useContext,
13
- useEffect,
14
- useRef,
15
- useState
16
- } = _react2;
17
-
18
- var {
19
- getInteractionModality,
20
- isFocusVisible: _isFocusVisible,
21
- useFocus,
22
- useFocusVisibleListener,
23
- useFocusWithin,
24
- useKeyboard
25
- } = require("@react-aria/interactions");
1
+ var $7qnVn$react = require("react");
2
+ var $7qnVn$reactariautils = require("@react-aria/utils");
3
+ var $7qnVn$reactariainteractions = require("@react-aria/interactions");
4
+ var $7qnVn$clsx = require("clsx");
5
+
6
+ function $parcel$exportWildcard(dest, source) {
7
+ Object.keys(source).forEach(function(key) {
8
+ if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
9
+ return;
10
+ }
26
11
 
27
- var {
28
- focusWithoutScrolling,
29
- runAfterTransition,
30
- useLayoutEffect,
31
- mergeProps,
32
- useSyncRef
33
- } = require("@react-aria/utils");
12
+ Object.defineProperty(dest, key, {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return source[key];
16
+ }
17
+ });
18
+ });
34
19
 
20
+ return dest;
21
+ }
35
22
  function $parcel$interopDefault(a) {
36
23
  return a && a.__esModule ? a.default : a;
37
24
  }
38
-
39
- /**
40
- * A utility function that focuses an element while avoiding undesired side effects such
41
- * as page scrolling and screen reader issues with CSS transitions.
42
- */
43
- function focusSafely(element) {
44
- // If the user is interacting with a virtual cursor, e.g. screen reader, then
45
- // wait until after any animated transitions that are currently occurring on
46
- // the page before shifting focus. This avoids issues with VoiceOver on iOS
47
- // causing the page to scroll when moving focus if the element is transitioning
48
- // from off the screen.
49
- if (getInteractionModality() === 'virtual') {
50
- let lastFocusedElement = document.activeElement;
51
- runAfterTransition(() => {
52
- // If focus did not move and the element is still in the document, focus it.
53
- if (document.activeElement === lastFocusedElement && document.contains(element)) {
54
- focusWithoutScrolling(element);
55
- }
56
- });
57
- } else {
58
- focusWithoutScrolling(element);
59
- }
25
+ function $parcel$export(e, n, v, s) {
26
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
27
+ }
28
+ var $4e07e9e0e9f6e0b8$exports = {};
29
+
30
+ $parcel$export($4e07e9e0e9f6e0b8$exports, "FocusScope", () => $4e07e9e0e9f6e0b8$export$20e40289641fbbb6);
31
+ $parcel$export($4e07e9e0e9f6e0b8$exports, "useFocusManager", () => $4e07e9e0e9f6e0b8$export$10c5169755ce7bd7);
32
+ $parcel$export($4e07e9e0e9f6e0b8$exports, "getFocusableTreeWalker", () => $4e07e9e0e9f6e0b8$export$2d6ec8fc375ceafa);
33
+ $parcel$export($4e07e9e0e9f6e0b8$exports, "createFocusManager", () => $4e07e9e0e9f6e0b8$export$c5251b9e124bf29);
34
+ var $a424ea782c64243d$exports = {};
35
+
36
+ $parcel$export($a424ea782c64243d$exports, "focusSafely", () => $a424ea782c64243d$export$80f3e147d781571c);
37
+
38
+
39
+ function $a424ea782c64243d$export$80f3e147d781571c(element) {
40
+ // If the user is interacting with a virtual cursor, e.g. screen reader, then
41
+ // wait until after any animated transitions that are currently occurring on
42
+ // the page before shifting focus. This avoids issues with VoiceOver on iOS
43
+ // causing the page to scroll when moving focus if the element is transitioning
44
+ // from off the screen.
45
+ if ($7qnVn$reactariainteractions.getInteractionModality() === 'virtual') {
46
+ let lastFocusedElement = document.activeElement;
47
+ $7qnVn$reactariautils.runAfterTransition(()=>{
48
+ // If focus did not move and the element is still in the document, focus it.
49
+ if (document.activeElement === lastFocusedElement && document.contains(element)) $7qnVn$reactariautils.focusWithoutScrolling(element);
50
+ });
51
+ } else $7qnVn$reactariautils.focusWithoutScrolling(element);
60
52
  }
61
53
 
62
- exports.focusSafely = focusSafely;
63
54
 
64
55
  /*
65
56
  * Copyright 2021 Adobe. All rights reserved.
@@ -71,836 +62,562 @@ exports.focusSafely = focusSafely;
71
62
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
72
63
  * OF ANY KIND, either express or implied. See the License for the specific language
73
64
  * governing permissions and limitations under the License.
74
- */
75
- function $f5b8109741a107bfe8bf4093e29$var$isStyleVisible(element) {
76
- if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) {
77
- return false;
78
- }
79
-
80
- let {
81
- display,
82
- visibility
83
- } = element.style;
84
- let isVisible = display !== 'none' && visibility !== 'hidden' && visibility !== 'collapse';
85
-
86
- if (isVisible) {
87
- const {
88
- getComputedStyle
89
- } = element.ownerDocument.defaultView;
90
- let {
91
- display: computedDisplay,
92
- visibility: computedVisibility
93
- } = getComputedStyle(element);
94
- isVisible = computedDisplay !== 'none' && computedVisibility !== 'hidden' && computedVisibility !== 'collapse';
95
- }
96
-
97
- return isVisible;
98
- }
99
-
100
- function $f5b8109741a107bfe8bf4093e29$var$isAttributeVisible(element, childElement) {
101
- return !element.hasAttribute('hidden') && (element.nodeName === 'DETAILS' && childElement && childElement.nodeName !== 'SUMMARY' ? element.hasAttribute('open') : true);
102
- }
103
- /**
104
- * Adapted from https://github.com/testing-library/jest-dom and
105
- * https://github.com/vuejs/vue-test-utils-next/.
106
- * Licensed under the MIT License.
107
- * @param element - Element to evaluate for display or visibility.
108
- */
109
-
110
-
111
- function $f5b8109741a107bfe8bf4093e29$export$isElementVisible(element, childElement) {
112
- return element.nodeName !== '#comment' && $f5b8109741a107bfe8bf4093e29$var$isStyleVisible(element) && $f5b8109741a107bfe8bf4093e29$var$isAttributeVisible(element, childElement) && (!element.parentElement || $f5b8109741a107bfe8bf4093e29$export$isElementVisible(element.parentElement, element));
113
- }
114
-
115
- const $bdceb2956edbee43435a9382ef97283f$var$FocusContext = /*#__PURE__*/_react.createContext(null);
116
-
117
- let $bdceb2956edbee43435a9382ef97283f$var$activeScope = null;
118
- let $bdceb2956edbee43435a9382ef97283f$var$scopes = new Map(); // This is a hacky DOM-based implementation of a FocusScope until this RFC lands in React:
119
- // https://github.com/reactjs/rfcs/pull/109
120
- // For now, it relies on the DOM tree order rather than the React tree order, and is probably
121
- // less optimized for performance.
122
-
123
- /**
124
- * A FocusScope manages focus for its descendants. It supports containing focus inside
125
- * the scope, restoring focus to the previously focused element on unmount, and auto
126
- * focusing children on mount. It also acts as a container for a programmatic focus
127
- * management interface that can be used to move focus forward and back in response
128
- * to user events.
129
- */
130
-
131
- function FocusScope(props) {
132
- let {
133
- children,
134
- contain,
135
- restoreFocus,
136
- autoFocus
137
- } = props;
138
- let startRef = useRef();
139
- let endRef = useRef();
140
- let scopeRef = useRef([]);
141
- let ctx = useContext($bdceb2956edbee43435a9382ef97283f$var$FocusContext);
142
- let parentScope = ctx == null ? void 0 : ctx.scopeRef;
143
- useLayoutEffect(() => {
144
- // Find all rendered nodes between the sentinels and add them to the scope.
145
- let node = startRef.current.nextSibling;
146
- let nodes = [];
147
-
148
- while (node && node !== endRef.current) {
149
- nodes.push(node);
150
- node = node.nextSibling;
151
- }
152
-
153
- scopeRef.current = nodes;
154
- }, [children, parentScope]);
155
- useLayoutEffect(() => {
156
- $bdceb2956edbee43435a9382ef97283f$var$scopes.set(scopeRef, parentScope);
157
- return () => {
158
- // Restore the active scope on unmount if this scope or a descendant scope is active.
159
- // Parent effect cleanups run before children, so we need to check if the
160
- // parent scope actually still exists before restoring the active scope to it.
161
- if ((scopeRef === $bdceb2956edbee43435a9382ef97283f$var$activeScope || $bdceb2956edbee43435a9382ef97283f$var$isAncestorScope(scopeRef, $bdceb2956edbee43435a9382ef97283f$var$activeScope)) && (!parentScope || $bdceb2956edbee43435a9382ef97283f$var$scopes.has(parentScope))) {
162
- $bdceb2956edbee43435a9382ef97283f$var$activeScope = parentScope;
163
- }
164
-
165
- $bdceb2956edbee43435a9382ef97283f$var$scopes.delete(scopeRef);
166
- };
167
- }, [scopeRef, parentScope]);
168
- $bdceb2956edbee43435a9382ef97283f$var$useFocusContainment(scopeRef, contain);
169
- $bdceb2956edbee43435a9382ef97283f$var$useRestoreFocus(scopeRef, restoreFocus, contain);
170
- $bdceb2956edbee43435a9382ef97283f$var$useAutoFocus(scopeRef, autoFocus);
171
- let focusManager = $bdceb2956edbee43435a9382ef97283f$var$createFocusManagerForScope(scopeRef);
172
- return /*#__PURE__*/_react.createElement($bdceb2956edbee43435a9382ef97283f$var$FocusContext.Provider, {
173
- value: {
174
- scopeRef,
175
- focusManager
65
+ */ function $9793aa05cd766621$var$isStyleVisible(element) {
66
+ if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) return false;
67
+ let { display: display , visibility: visibility } = element.style;
68
+ let isVisible = display !== 'none' && visibility !== 'hidden' && visibility !== 'collapse';
69
+ if (isVisible) {
70
+ const { getComputedStyle: getComputedStyle } = element.ownerDocument.defaultView;
71
+ let { display: computedDisplay , visibility: computedVisibility } = getComputedStyle(element);
72
+ isVisible = computedDisplay !== 'none' && computedVisibility !== 'hidden' && computedVisibility !== 'collapse';
176
73
  }
177
- }, /*#__PURE__*/_react.createElement("span", {
178
- "data-focus-scope-start": true,
179
- hidden: true,
180
- ref: startRef
181
- }), children, /*#__PURE__*/_react.createElement("span", {
182
- "data-focus-scope-end": true,
183
- hidden: true,
184
- ref: endRef
185
- }));
74
+ return isVisible;
186
75
  }
187
- /**
188
- * Returns a FocusManager interface for the parent FocusScope.
189
- * A FocusManager can be used to programmatically move focus within
190
- * a FocusScope, e.g. in response to user events like keyboard navigation.
191
- */
192
-
193
-
194
- exports.FocusScope = FocusScope;
195
-
196
- function useFocusManager() {
197
- var _useContext;
198
-
199
- return (_useContext = useContext($bdceb2956edbee43435a9382ef97283f$var$FocusContext)) == null ? void 0 : _useContext.focusManager;
76
+ function $9793aa05cd766621$var$isAttributeVisible(element, childElement) {
77
+ return !element.hasAttribute('hidden') && (element.nodeName === 'DETAILS' && childElement && childElement.nodeName !== 'SUMMARY' ? element.hasAttribute('open') : true);
200
78
  }
201
-
202
- exports.useFocusManager = useFocusManager;
203
-
204
- function $bdceb2956edbee43435a9382ef97283f$var$createFocusManagerForScope(scopeRef) {
205
- return {
206
- focusNext(opts) {
207
- if (opts === void 0) {
208
- opts = {};
209
- }
210
-
211
- let scope = scopeRef.current;
212
- let {
213
- from,
214
- tabbable,
215
- wrap
216
- } = opts;
217
- let node = from || document.activeElement;
218
- let sentinel = scope[0].previousElementSibling;
219
- let walker = getFocusableTreeWalker($bdceb2956edbee43435a9382ef97283f$var$getScopeRoot(scope), {
220
- tabbable
221
- }, scope);
222
- walker.currentNode = $bdceb2956edbee43435a9382ef97283f$var$isElementInScope(node, scope) ? node : sentinel;
223
- let nextNode = walker.nextNode();
224
-
225
- if (!nextNode && wrap) {
226
- walker.currentNode = sentinel;
227
- nextNode = walker.nextNode();
228
- }
229
-
230
- if (nextNode) {
231
- $bdceb2956edbee43435a9382ef97283f$var$focusElement(nextNode, true);
232
- }
233
-
234
- return nextNode;
235
- },
236
-
237
- focusPrevious(opts) {
238
- if (opts === void 0) {
239
- opts = {};
240
- }
241
-
242
- let scope = scopeRef.current;
243
- let {
244
- from,
245
- tabbable,
246
- wrap
247
- } = opts;
248
- let node = from || document.activeElement;
249
- let sentinel = scope[scope.length - 1].nextElementSibling;
250
- let walker = getFocusableTreeWalker($bdceb2956edbee43435a9382ef97283f$var$getScopeRoot(scope), {
251
- tabbable
252
- }, scope);
253
- walker.currentNode = $bdceb2956edbee43435a9382ef97283f$var$isElementInScope(node, scope) ? node : sentinel;
254
- let previousNode = walker.previousNode();
255
-
256
- if (!previousNode && wrap) {
257
- walker.currentNode = sentinel;
258
- previousNode = walker.previousNode();
259
- }
260
-
261
- if (previousNode) {
262
- $bdceb2956edbee43435a9382ef97283f$var$focusElement(previousNode, true);
263
- }
264
-
265
- return previousNode;
266
- },
267
-
268
- focusFirst(opts) {
269
- if (opts === void 0) {
270
- opts = {};
271
- }
272
-
273
- let scope = scopeRef.current;
274
- let {
275
- tabbable
276
- } = opts;
277
- let walker = getFocusableTreeWalker($bdceb2956edbee43435a9382ef97283f$var$getScopeRoot(scope), {
278
- tabbable
279
- }, scope);
280
- walker.currentNode = scope[0].previousElementSibling;
281
- let nextNode = walker.nextNode();
282
-
283
- if (nextNode) {
284
- $bdceb2956edbee43435a9382ef97283f$var$focusElement(nextNode, true);
285
- }
286
-
287
- return nextNode;
288
- },
289
-
290
- focusLast(opts) {
291
- if (opts === void 0) {
292
- opts = {};
293
- }
294
-
295
- let scope = scopeRef.current;
296
- let {
297
- tabbable
298
- } = opts;
299
- let walker = getFocusableTreeWalker($bdceb2956edbee43435a9382ef97283f$var$getScopeRoot(scope), {
300
- tabbable
301
- }, scope);
302
- walker.currentNode = scope[scope.length - 1].nextElementSibling;
303
- let previousNode = walker.previousNode();
304
-
305
- if (previousNode) {
306
- $bdceb2956edbee43435a9382ef97283f$var$focusElement(previousNode, true);
307
- }
308
-
309
- return previousNode;
310
- }
311
-
312
- };
79
+ function $9793aa05cd766621$export$e989c0fffaa6b27a(element, childElement) {
80
+ return element.nodeName !== '#comment' && $9793aa05cd766621$var$isStyleVisible(element) && $9793aa05cd766621$var$isAttributeVisible(element, childElement) && (!element.parentElement || $9793aa05cd766621$export$e989c0fffaa6b27a(element.parentElement, element));
313
81
  }
314
82
 
315
- const $bdceb2956edbee43435a9382ef97283f$var$focusableElements = ['input:not([disabled]):not([type=hidden])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', 'a[href]', 'area[href]', 'summary', 'iframe', 'object', 'embed', 'audio[controls]', 'video[controls]', '[contenteditable]'];
316
- const $bdceb2956edbee43435a9382ef97283f$var$FOCUSABLE_ELEMENT_SELECTOR = $bdceb2956edbee43435a9382ef97283f$var$focusableElements.join(':not([hidden]),') + ',[tabindex]:not([disabled]):not([hidden])';
317
- $bdceb2956edbee43435a9382ef97283f$var$focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
318
- const $bdceb2956edbee43435a9382ef97283f$var$TABBABLE_ELEMENT_SELECTOR = $bdceb2956edbee43435a9382ef97283f$var$focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
319
83
 
320
- function $bdceb2956edbee43435a9382ef97283f$var$getScopeRoot(scope) {
321
- return scope[0].parentElement;
322
- }
323
-
324
- function $bdceb2956edbee43435a9382ef97283f$var$useFocusContainment(scopeRef, contain) {
325
- let focusedNode = useRef();
326
- let raf = useRef(null);
327
- useLayoutEffect(() => {
328
- let scope = scopeRef.current;
329
-
330
- if (!contain) {
331
- return;
332
- } // Handle the Tab key to contain focus within the scope
333
-
334
-
335
- let onKeyDown = e => {
336
- if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || scopeRef !== $bdceb2956edbee43435a9382ef97283f$var$activeScope) {
337
- return;
338
- }
339
-
340
- let focusedElement = document.activeElement;
341
- let scope = scopeRef.current;
342
-
343
- if (!$bdceb2956edbee43435a9382ef97283f$var$isElementInScope(focusedElement, scope)) {
344
- return;
345
- }
346
-
347
- let walker = getFocusableTreeWalker($bdceb2956edbee43435a9382ef97283f$var$getScopeRoot(scope), {
348
- tabbable: true
349
- }, scope);
350
- walker.currentNode = focusedElement;
351
- let nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
352
-
353
- if (!nextElement) {
354
- walker.currentNode = e.shiftKey ? scope[scope.length - 1].nextElementSibling : scope[0].previousElementSibling;
355
- nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
356
- }
357
84
 
358
- e.preventDefault();
359
85
 
360
- if (nextElement) {
361
- $bdceb2956edbee43435a9382ef97283f$var$focusElement(nextElement, true);
362
- }
363
- };
364
-
365
- let onFocus = e => {
366
- // If focusing an element in a child scope of the currently active scope, the child becomes active.
367
- // Moving out of the active scope to an ancestor is not allowed.
368
- if (!$bdceb2956edbee43435a9382ef97283f$var$activeScope || $bdceb2956edbee43435a9382ef97283f$var$isAncestorScope($bdceb2956edbee43435a9382ef97283f$var$activeScope, scopeRef)) {
369
- $bdceb2956edbee43435a9382ef97283f$var$activeScope = scopeRef;
370
- focusedNode.current = e.target;
371
- } else if (scopeRef === $bdceb2956edbee43435a9382ef97283f$var$activeScope && !$bdceb2956edbee43435a9382ef97283f$var$isElementInChildScope(e.target, scopeRef)) {
372
- // If a focus event occurs outside the active scope (e.g. user tabs from browser location bar),
373
- // restore focus to the previously focused node or the first tabbable element in the active scope.
374
- if (focusedNode.current) {
375
- focusedNode.current.focus();
376
- } else if ($bdceb2956edbee43435a9382ef97283f$var$activeScope) {
377
- $bdceb2956edbee43435a9382ef97283f$var$focusFirstInScope($bdceb2956edbee43435a9382ef97283f$var$activeScope.current);
86
+ const $4e07e9e0e9f6e0b8$var$FocusContext = /*#__PURE__*/ ($parcel$interopDefault($7qnVn$react)).createContext(null);
87
+ let $4e07e9e0e9f6e0b8$var$activeScope = null;
88
+ let $4e07e9e0e9f6e0b8$var$scopes = new Map();
89
+ function $4e07e9e0e9f6e0b8$export$20e40289641fbbb6(props) {
90
+ let { children: children , contain: contain , restoreFocus: restoreFocus , autoFocus: autoFocus } = props;
91
+ let startRef = $7qnVn$react.useRef();
92
+ let endRef = $7qnVn$react.useRef();
93
+ let scopeRef = $7qnVn$react.useRef([]);
94
+ let ctx = $7qnVn$react.useContext($4e07e9e0e9f6e0b8$var$FocusContext);
95
+ let parentScope = ctx?.scopeRef;
96
+ $7qnVn$reactariautils.useLayoutEffect(()=>{
97
+ // Find all rendered nodes between the sentinels and add them to the scope.
98
+ let node = startRef.current.nextSibling;
99
+ let nodes = [];
100
+ while(node && node !== endRef.current){
101
+ nodes.push(node);
102
+ node = node.nextSibling;
378
103
  }
379
- } else if (scopeRef === $bdceb2956edbee43435a9382ef97283f$var$activeScope) {
380
- focusedNode.current = e.target;
381
- }
382
- };
383
-
384
- let onBlur = e => {
385
- // Firefox doesn't shift focus back to the Dialog properly without this
386
- raf.current = requestAnimationFrame(() => {
387
- // Use document.activeElement instead of e.relatedTarget so we can tell if user clicked into iframe
388
- if (scopeRef === $bdceb2956edbee43435a9382ef97283f$var$activeScope && !$bdceb2956edbee43435a9382ef97283f$var$isElementInChildScope(document.activeElement, scopeRef)) {
389
- $bdceb2956edbee43435a9382ef97283f$var$activeScope = scopeRef;
390
- focusedNode.current = e.target;
391
- focusedNode.current.focus();
104
+ scopeRef.current = nodes;
105
+ }, [
106
+ children,
107
+ parentScope
108
+ ]);
109
+ $7qnVn$reactariautils.useLayoutEffect(()=>{
110
+ $4e07e9e0e9f6e0b8$var$scopes.set(scopeRef, parentScope);
111
+ return ()=>{
112
+ // Restore the active scope on unmount if this scope or a descendant scope is active.
113
+ // Parent effect cleanups run before children, so we need to check if the
114
+ // parent scope actually still exists before restoring the active scope to it.
115
+ if ((scopeRef === $4e07e9e0e9f6e0b8$var$activeScope || $4e07e9e0e9f6e0b8$var$isAncestorScope(scopeRef, $4e07e9e0e9f6e0b8$var$activeScope)) && (!parentScope || $4e07e9e0e9f6e0b8$var$scopes.has(parentScope))) $4e07e9e0e9f6e0b8$var$activeScope = parentScope;
116
+ $4e07e9e0e9f6e0b8$var$scopes.delete(scopeRef);
117
+ };
118
+ }, [
119
+ scopeRef,
120
+ parentScope
121
+ ]);
122
+ $4e07e9e0e9f6e0b8$var$useFocusContainment(scopeRef, contain);
123
+ $4e07e9e0e9f6e0b8$var$useRestoreFocus(scopeRef, restoreFocus, contain);
124
+ $4e07e9e0e9f6e0b8$var$useAutoFocus(scopeRef, autoFocus);
125
+ let focusManager = $4e07e9e0e9f6e0b8$var$createFocusManagerForScope(scopeRef);
126
+ return(/*#__PURE__*/ ($parcel$interopDefault($7qnVn$react)).createElement($4e07e9e0e9f6e0b8$var$FocusContext.Provider, {
127
+ value: {
128
+ scopeRef: scopeRef,
129
+ focusManager: focusManager
130
+ }
131
+ }, /*#__PURE__*/ ($parcel$interopDefault($7qnVn$react)).createElement("span", {
132
+ "data-focus-scope-start": true,
133
+ hidden: true,
134
+ ref: startRef
135
+ }), children, /*#__PURE__*/ ($parcel$interopDefault($7qnVn$react)).createElement("span", {
136
+ "data-focus-scope-end": true,
137
+ hidden: true,
138
+ ref: endRef
139
+ })));
140
+ }
141
+ function $4e07e9e0e9f6e0b8$export$10c5169755ce7bd7() {
142
+ return $7qnVn$react.useContext($4e07e9e0e9f6e0b8$var$FocusContext)?.focusManager;
143
+ }
144
+ function $4e07e9e0e9f6e0b8$var$createFocusManagerForScope(scopeRef) {
145
+ return {
146
+ focusNext (opts = {
147
+ }) {
148
+ let scope = scopeRef.current;
149
+ let { from: from , tabbable: tabbable , wrap: wrap } = opts;
150
+ let node = from || document.activeElement;
151
+ let sentinel = scope[0].previousElementSibling;
152
+ let walker = $4e07e9e0e9f6e0b8$export$2d6ec8fc375ceafa($4e07e9e0e9f6e0b8$var$getScopeRoot(scope), {
153
+ tabbable: tabbable
154
+ }, scope);
155
+ walker.currentNode = $4e07e9e0e9f6e0b8$var$isElementInScope(node, scope) ? node : sentinel;
156
+ let nextNode = walker.nextNode();
157
+ if (!nextNode && wrap) {
158
+ walker.currentNode = sentinel;
159
+ nextNode = walker.nextNode();
160
+ }
161
+ if (nextNode) $4e07e9e0e9f6e0b8$var$focusElement(nextNode, true);
162
+ return nextNode;
163
+ },
164
+ focusPrevious (opts = {
165
+ }) {
166
+ let scope = scopeRef.current;
167
+ let { from: from , tabbable: tabbable , wrap: wrap } = opts;
168
+ let node = from || document.activeElement;
169
+ let sentinel = scope[scope.length - 1].nextElementSibling;
170
+ let walker = $4e07e9e0e9f6e0b8$export$2d6ec8fc375ceafa($4e07e9e0e9f6e0b8$var$getScopeRoot(scope), {
171
+ tabbable: tabbable
172
+ }, scope);
173
+ walker.currentNode = $4e07e9e0e9f6e0b8$var$isElementInScope(node, scope) ? node : sentinel;
174
+ let previousNode = walker.previousNode();
175
+ if (!previousNode && wrap) {
176
+ walker.currentNode = sentinel;
177
+ previousNode = walker.previousNode();
178
+ }
179
+ if (previousNode) $4e07e9e0e9f6e0b8$var$focusElement(previousNode, true);
180
+ return previousNode;
181
+ },
182
+ focusFirst (opts = {
183
+ }) {
184
+ let scope = scopeRef.current;
185
+ let { tabbable: tabbable } = opts;
186
+ let walker = $4e07e9e0e9f6e0b8$export$2d6ec8fc375ceafa($4e07e9e0e9f6e0b8$var$getScopeRoot(scope), {
187
+ tabbable: tabbable
188
+ }, scope);
189
+ walker.currentNode = scope[0].previousElementSibling;
190
+ let nextNode = walker.nextNode();
191
+ if (nextNode) $4e07e9e0e9f6e0b8$var$focusElement(nextNode, true);
192
+ return nextNode;
193
+ },
194
+ focusLast (opts = {
195
+ }) {
196
+ let scope = scopeRef.current;
197
+ let { tabbable: tabbable } = opts;
198
+ let walker = $4e07e9e0e9f6e0b8$export$2d6ec8fc375ceafa($4e07e9e0e9f6e0b8$var$getScopeRoot(scope), {
199
+ tabbable: tabbable
200
+ }, scope);
201
+ walker.currentNode = scope[scope.length - 1].nextElementSibling;
202
+ let previousNode = walker.previousNode();
203
+ if (previousNode) $4e07e9e0e9f6e0b8$var$focusElement(previousNode, true);
204
+ return previousNode;
392
205
  }
393
- });
394
- };
395
-
396
- document.addEventListener('keydown', onKeyDown, false);
397
- document.addEventListener('focusin', onFocus, false);
398
- scope.forEach(element => element.addEventListener('focusin', onFocus, false));
399
- scope.forEach(element => element.addEventListener('focusout', onBlur, false));
400
- return () => {
401
- document.removeEventListener('keydown', onKeyDown, false);
402
- document.removeEventListener('focusin', onFocus, false);
403
- scope.forEach(element => element.removeEventListener('focusin', onFocus, false));
404
- scope.forEach(element => element.removeEventListener('focusout', onBlur, false));
405
206
  };
406
- }, [scopeRef, contain]); // eslint-disable-next-line arrow-body-style
407
-
408
- useEffect(() => {
409
- return () => cancelAnimationFrame(raf.current);
410
- }, [raf]);
411
207
  }
412
-
413
- function $bdceb2956edbee43435a9382ef97283f$var$isElementInAnyScope(element) {
414
- for (let scope of $bdceb2956edbee43435a9382ef97283f$var$scopes.keys()) {
415
- if ($bdceb2956edbee43435a9382ef97283f$var$isElementInScope(element, scope.current)) {
416
- return true;
417
- }
418
- }
419
-
420
- return false;
208
+ const $4e07e9e0e9f6e0b8$var$focusableElements = [
209
+ 'input:not([disabled]):not([type=hidden])',
210
+ 'select:not([disabled])',
211
+ 'textarea:not([disabled])',
212
+ 'button:not([disabled])',
213
+ 'a[href]',
214
+ 'area[href]',
215
+ 'summary',
216
+ 'iframe',
217
+ 'object',
218
+ 'embed',
219
+ 'audio[controls]',
220
+ 'video[controls]',
221
+ '[contenteditable]'
222
+ ];
223
+ const $4e07e9e0e9f6e0b8$var$FOCUSABLE_ELEMENT_SELECTOR = $4e07e9e0e9f6e0b8$var$focusableElements.join(':not([hidden]),') + ',[tabindex]:not([disabled]):not([hidden])';
224
+ $4e07e9e0e9f6e0b8$var$focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
225
+ const $4e07e9e0e9f6e0b8$var$TABBABLE_ELEMENT_SELECTOR = $4e07e9e0e9f6e0b8$var$focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
226
+ function $4e07e9e0e9f6e0b8$var$getScopeRoot(scope) {
227
+ return scope[0].parentElement;
421
228
  }
422
-
423
- function $bdceb2956edbee43435a9382ef97283f$var$isElementInScope(element, scope) {
424
- return scope.some(node => node.contains(element));
229
+ function $4e07e9e0e9f6e0b8$var$useFocusContainment(scopeRef, contain) {
230
+ let focusedNode = $7qnVn$react.useRef();
231
+ let raf = $7qnVn$react.useRef(null);
232
+ $7qnVn$reactariautils.useLayoutEffect(()=>{
233
+ let scope1 = scopeRef.current;
234
+ if (!contain) return;
235
+ // Handle the Tab key to contain focus within the scope
236
+ let onKeyDown = (e)=>{
237
+ if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || scopeRef !== $4e07e9e0e9f6e0b8$var$activeScope) return;
238
+ let focusedElement = document.activeElement;
239
+ let scope = scopeRef.current;
240
+ if (!$4e07e9e0e9f6e0b8$var$isElementInScope(focusedElement, scope)) return;
241
+ let walker = $4e07e9e0e9f6e0b8$export$2d6ec8fc375ceafa($4e07e9e0e9f6e0b8$var$getScopeRoot(scope), {
242
+ tabbable: true
243
+ }, scope);
244
+ walker.currentNode = focusedElement;
245
+ let nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
246
+ if (!nextElement) {
247
+ walker.currentNode = e.shiftKey ? scope[scope.length - 1].nextElementSibling : scope[0].previousElementSibling;
248
+ nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
249
+ }
250
+ e.preventDefault();
251
+ if (nextElement) $4e07e9e0e9f6e0b8$var$focusElement(nextElement, true);
252
+ };
253
+ let onFocus = (e)=>{
254
+ // If focusing an element in a child scope of the currently active scope, the child becomes active.
255
+ // Moving out of the active scope to an ancestor is not allowed.
256
+ if (!$4e07e9e0e9f6e0b8$var$activeScope || $4e07e9e0e9f6e0b8$var$isAncestorScope($4e07e9e0e9f6e0b8$var$activeScope, scopeRef)) {
257
+ $4e07e9e0e9f6e0b8$var$activeScope = scopeRef;
258
+ focusedNode.current = e.target;
259
+ } else if (scopeRef === $4e07e9e0e9f6e0b8$var$activeScope && !$4e07e9e0e9f6e0b8$var$isElementInChildScope(e.target, scopeRef)) {
260
+ // If a focus event occurs outside the active scope (e.g. user tabs from browser location bar),
261
+ // restore focus to the previously focused node or the first tabbable element in the active scope.
262
+ if (focusedNode.current) focusedNode.current.focus();
263
+ else if ($4e07e9e0e9f6e0b8$var$activeScope) $4e07e9e0e9f6e0b8$var$focusFirstInScope($4e07e9e0e9f6e0b8$var$activeScope.current);
264
+ } else if (scopeRef === $4e07e9e0e9f6e0b8$var$activeScope) focusedNode.current = e.target;
265
+ };
266
+ let onBlur = (e)=>{
267
+ // Firefox doesn't shift focus back to the Dialog properly without this
268
+ raf.current = requestAnimationFrame(()=>{
269
+ // Use document.activeElement instead of e.relatedTarget so we can tell if user clicked into iframe
270
+ if (scopeRef === $4e07e9e0e9f6e0b8$var$activeScope && !$4e07e9e0e9f6e0b8$var$isElementInChildScope(document.activeElement, scopeRef)) {
271
+ $4e07e9e0e9f6e0b8$var$activeScope = scopeRef;
272
+ focusedNode.current = e.target;
273
+ focusedNode.current.focus();
274
+ }
275
+ });
276
+ };
277
+ document.addEventListener('keydown', onKeyDown, false);
278
+ document.addEventListener('focusin', onFocus, false);
279
+ scope1.forEach((element)=>element.addEventListener('focusin', onFocus, false)
280
+ );
281
+ scope1.forEach((element)=>element.addEventListener('focusout', onBlur, false)
282
+ );
283
+ return ()=>{
284
+ document.removeEventListener('keydown', onKeyDown, false);
285
+ document.removeEventListener('focusin', onFocus, false);
286
+ scope1.forEach((element)=>element.removeEventListener('focusin', onFocus, false)
287
+ );
288
+ scope1.forEach((element)=>element.removeEventListener('focusout', onBlur, false)
289
+ );
290
+ };
291
+ }, [
292
+ scopeRef,
293
+ contain
294
+ ]);
295
+ // eslint-disable-next-line arrow-body-style
296
+ $7qnVn$react.useEffect(()=>{
297
+ return ()=>cancelAnimationFrame(raf.current)
298
+ ;
299
+ }, [
300
+ raf
301
+ ]);
425
302
  }
426
-
427
- function $bdceb2956edbee43435a9382ef97283f$var$isElementInChildScope(element, scope) {
428
- // node.contains in isElementInScope covers child scopes that are also DOM children,
429
- // but does not cover child scopes in portals.
430
- for (let s of $bdceb2956edbee43435a9382ef97283f$var$scopes.keys()) {
431
- if ((s === scope || $bdceb2956edbee43435a9382ef97283f$var$isAncestorScope(scope, s)) && $bdceb2956edbee43435a9382ef97283f$var$isElementInScope(element, s.current)) {
432
- return true;
303
+ function $4e07e9e0e9f6e0b8$var$isElementInAnyScope(element) {
304
+ for (let scope of $4e07e9e0e9f6e0b8$var$scopes.keys()){
305
+ if ($4e07e9e0e9f6e0b8$var$isElementInScope(element, scope.current)) return true;
433
306
  }
434
- }
435
-
436
- return false;
437
- }
438
-
439
- function $bdceb2956edbee43435a9382ef97283f$var$isAncestorScope(ancestor, scope) {
440
- let parent = $bdceb2956edbee43435a9382ef97283f$var$scopes.get(scope);
441
-
442
- if (!parent) {
443
307
  return false;
444
- }
445
-
446
- if (parent === ancestor) {
447
- return true;
448
- }
449
-
450
- return $bdceb2956edbee43435a9382ef97283f$var$isAncestorScope(ancestor, parent);
451
308
  }
452
-
453
- function $bdceb2956edbee43435a9382ef97283f$var$focusElement(element, scroll) {
454
- if (scroll === void 0) {
455
- scroll = false;
456
- }
457
-
458
- if (element != null && !scroll) {
459
- try {
460
- focusSafely(element);
461
- } catch (err) {// ignore
462
- }
463
- } else if (element != null) {
464
- try {
465
- element.focus();
466
- } catch (err) {// ignore
309
+ function $4e07e9e0e9f6e0b8$var$isElementInScope(element, scope) {
310
+ return scope.some((node)=>node.contains(element)
311
+ );
312
+ }
313
+ function $4e07e9e0e9f6e0b8$var$isElementInChildScope(element, scope) {
314
+ // node.contains in isElementInScope covers child scopes that are also DOM children,
315
+ // but does not cover child scopes in portals.
316
+ for (let s of $4e07e9e0e9f6e0b8$var$scopes.keys()){
317
+ if ((s === scope || $4e07e9e0e9f6e0b8$var$isAncestorScope(scope, s)) && $4e07e9e0e9f6e0b8$var$isElementInScope(element, s.current)) return true;
467
318
  }
468
- }
319
+ return false;
469
320
  }
470
-
471
- function $bdceb2956edbee43435a9382ef97283f$var$focusFirstInScope(scope) {
472
- let sentinel = scope[0].previousElementSibling;
473
- let walker = getFocusableTreeWalker($bdceb2956edbee43435a9382ef97283f$var$getScopeRoot(scope), {
474
- tabbable: true
475
- }, scope);
476
- walker.currentNode = sentinel;
477
- $bdceb2956edbee43435a9382ef97283f$var$focusElement(walker.nextNode());
321
+ function $4e07e9e0e9f6e0b8$var$isAncestorScope(ancestor, scope) {
322
+ let parent = $4e07e9e0e9f6e0b8$var$scopes.get(scope);
323
+ if (!parent) return false;
324
+ if (parent === ancestor) return true;
325
+ return $4e07e9e0e9f6e0b8$var$isAncestorScope(ancestor, parent);
478
326
  }
479
-
480
- function $bdceb2956edbee43435a9382ef97283f$var$useAutoFocus(scopeRef, autoFocus) {
481
- const autoFocusRef = _react.useRef(autoFocus);
482
-
483
- useEffect(() => {
484
- if (autoFocusRef.current) {
485
- $bdceb2956edbee43435a9382ef97283f$var$activeScope = scopeRef;
486
-
487
- if (!$bdceb2956edbee43435a9382ef97283f$var$isElementInScope(document.activeElement, $bdceb2956edbee43435a9382ef97283f$var$activeScope.current)) {
488
- $bdceb2956edbee43435a9382ef97283f$var$focusFirstInScope(scopeRef.current);
489
- }
327
+ function $4e07e9e0e9f6e0b8$var$focusElement(element, scroll = false) {
328
+ if (element != null && !scroll) try {
329
+ $a424ea782c64243d$export$80f3e147d781571c(element);
330
+ } catch (err) {
331
+ // ignore
490
332
  }
491
-
492
- autoFocusRef.current = false;
493
- }, []);
494
- }
495
-
496
- function $bdceb2956edbee43435a9382ef97283f$var$useRestoreFocus(scopeRef, restoreFocus, contain) {
497
- // useLayoutEffect instead of useEffect so the active element is saved synchronously instead of asynchronously.
498
- useLayoutEffect(() => {
499
- if (!restoreFocus) {
500
- return;
333
+ else if (element != null) try {
334
+ element.focus();
335
+ } catch (err1) {
336
+ // ignore
501
337
  }
502
-
503
- let scope = scopeRef.current;
504
- let nodeToRestore = document.activeElement; // Handle the Tab key so that tabbing out of the scope goes to the next element
505
- // after the node that had focus when the scope mounted. This is important when
506
- // using portals for overlays, so that focus goes to the expected element when
507
- // tabbing out of the overlay.
508
-
509
- let onKeyDown = e => {
510
- if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey) {
511
- return;
512
- }
513
-
514
- let focusedElement = document.activeElement;
515
-
516
- if (!$bdceb2956edbee43435a9382ef97283f$var$isElementInScope(focusedElement, scope)) {
517
- return;
518
- } // Create a DOM tree walker that matches all tabbable elements
519
-
520
-
521
- let walker = getFocusableTreeWalker(document.body, {
338
+ }
339
+ function $4e07e9e0e9f6e0b8$var$focusFirstInScope(scope) {
340
+ let sentinel = scope[0].previousElementSibling;
341
+ let walker = $4e07e9e0e9f6e0b8$export$2d6ec8fc375ceafa($4e07e9e0e9f6e0b8$var$getScopeRoot(scope), {
522
342
  tabbable: true
523
- }); // Find the next tabbable element after the currently focused element
524
-
525
- walker.currentNode = focusedElement;
526
- let nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
527
-
528
- if (!document.body.contains(nodeToRestore) || nodeToRestore === document.body) {
529
- nodeToRestore = null;
530
- } // If there is no next element, or it is outside the current scope, move focus to the
531
- // next element after the node to restore to instead.
532
-
533
-
534
- if ((!nextElement || !$bdceb2956edbee43435a9382ef97283f$var$isElementInScope(nextElement, scope)) && nodeToRestore) {
535
- walker.currentNode = nodeToRestore; // Skip over elements within the scope, in case the scope immediately follows the node to restore.
536
-
537
- do {
538
- nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
539
- } while ($bdceb2956edbee43435a9382ef97283f$var$isElementInScope(nextElement, scope));
540
-
541
- e.preventDefault();
542
- e.stopPropagation();
543
-
544
- if (nextElement) {
545
- $bdceb2956edbee43435a9382ef97283f$var$focusElement(nextElement, true);
546
- } else {
547
- // If there is no next element and the nodeToRestore isn't within a FocusScope (i.e. we are leaving the top level focus scope)
548
- // then move focus to the body.
549
- // Otherwise restore focus to the nodeToRestore (e.g menu within a popover -> tabbing to close the menu should move focus to menu trigger)
550
- if (!$bdceb2956edbee43435a9382ef97283f$var$isElementInAnyScope(nodeToRestore)) {
551
- focusedElement.blur();
552
- } else {
553
- $bdceb2956edbee43435a9382ef97283f$var$focusElement(nodeToRestore, true);
554
- }
343
+ }, scope);
344
+ walker.currentNode = sentinel;
345
+ $4e07e9e0e9f6e0b8$var$focusElement(walker.nextNode());
346
+ }
347
+ function $4e07e9e0e9f6e0b8$var$useAutoFocus(scopeRef, autoFocus) {
348
+ const autoFocusRef = ($parcel$interopDefault($7qnVn$react)).useRef(autoFocus);
349
+ $7qnVn$react.useEffect(()=>{
350
+ if (autoFocusRef.current) {
351
+ $4e07e9e0e9f6e0b8$var$activeScope = scopeRef;
352
+ if (!$4e07e9e0e9f6e0b8$var$isElementInScope(document.activeElement, $4e07e9e0e9f6e0b8$var$activeScope.current)) $4e07e9e0e9f6e0b8$var$focusFirstInScope(scopeRef.current);
555
353
  }
556
- }
557
- };
558
-
559
- if (!contain) {
560
- document.addEventListener('keydown', onKeyDown, true);
561
- }
562
-
563
- return () => {
564
- if (!contain) {
565
- document.removeEventListener('keydown', onKeyDown, true);
566
- }
567
-
568
- if (restoreFocus && nodeToRestore && $bdceb2956edbee43435a9382ef97283f$var$isElementInScope(document.activeElement, scope)) {
569
- requestAnimationFrame(() => {
570
- if (document.body.contains(nodeToRestore)) {
571
- $bdceb2956edbee43435a9382ef97283f$var$focusElement(nodeToRestore);
572
- }
573
- });
574
- }
575
- };
576
- }, [scopeRef, restoreFocus, contain]);
354
+ autoFocusRef.current = false;
355
+ }, []);
577
356
  }
578
- /**
579
- * Create a [TreeWalker]{@link https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker}
580
- * that matches all focusable/tabbable elements.
581
- */
582
-
583
-
584
- function getFocusableTreeWalker(root, opts, scope) {
585
- let selector = opts != null && opts.tabbable ? $bdceb2956edbee43435a9382ef97283f$var$TABBABLE_ELEMENT_SELECTOR : $bdceb2956edbee43435a9382ef97283f$var$FOCUSABLE_ELEMENT_SELECTOR;
586
- let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
587
- acceptNode(node) {
588
- var _opts$from;
589
-
590
- // Skip nodes inside the starting node.
591
- if (opts != null && (_opts$from = opts.from) != null && _opts$from.contains(node)) {
592
- return NodeFilter.FILTER_REJECT;
593
- }
594
-
595
- if (node.matches(selector) && $f5b8109741a107bfe8bf4093e29$export$isElementVisible(node) && (!scope || $bdceb2956edbee43435a9382ef97283f$var$isElementInScope(node, scope))) {
596
- return NodeFilter.FILTER_ACCEPT;
597
- }
598
-
599
- return NodeFilter.FILTER_SKIP;
600
- }
601
-
602
- });
603
-
604
- if (opts != null && opts.from) {
605
- walker.currentNode = opts.from;
606
- }
607
-
608
- return walker;
357
+ function $4e07e9e0e9f6e0b8$var$useRestoreFocus(scopeRef, restoreFocus, contain) {
358
+ // create a ref during render instead of useLayoutEffect so the active element is saved before a child with autoFocus=true mounts.
359
+ const nodeToRestoreRef = $7qnVn$react.useRef(typeof document !== 'undefined' ? document.activeElement : null);
360
+ // useLayoutEffect instead of useEffect so the active element is saved synchronously instead of asynchronously.
361
+ $7qnVn$reactariautils.useLayoutEffect(()=>{
362
+ let nodeToRestore = nodeToRestoreRef.current;
363
+ if (!restoreFocus) return;
364
+ // Handle the Tab key so that tabbing out of the scope goes to the next element
365
+ // after the node that had focus when the scope mounted. This is important when
366
+ // using portals for overlays, so that focus goes to the expected element when
367
+ // tabbing out of the overlay.
368
+ let onKeyDown = (e)=>{
369
+ if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey) return;
370
+ let focusedElement = document.activeElement;
371
+ if (!$4e07e9e0e9f6e0b8$var$isElementInScope(focusedElement, scopeRef.current)) return;
372
+ // Create a DOM tree walker that matches all tabbable elements
373
+ let walker = $4e07e9e0e9f6e0b8$export$2d6ec8fc375ceafa(document.body, {
374
+ tabbable: true
375
+ });
376
+ // Find the next tabbable element after the currently focused element
377
+ walker.currentNode = focusedElement;
378
+ let nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
379
+ if (!document.body.contains(nodeToRestore) || nodeToRestore === document.body) nodeToRestore = null;
380
+ // If there is no next element, or it is outside the current scope, move focus to the
381
+ // next element after the node to restore to instead.
382
+ if ((!nextElement || !$4e07e9e0e9f6e0b8$var$isElementInScope(nextElement, scopeRef.current)) && nodeToRestore) {
383
+ walker.currentNode = nodeToRestore;
384
+ // Skip over elements within the scope, in case the scope immediately follows the node to restore.
385
+ do nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
386
+ while ($4e07e9e0e9f6e0b8$var$isElementInScope(nextElement, scopeRef.current))
387
+ e.preventDefault();
388
+ e.stopPropagation();
389
+ if (nextElement) $4e07e9e0e9f6e0b8$var$focusElement(nextElement, true);
390
+ 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)
391
+ // then move focus to the body.
392
+ // Otherwise restore focus to the nodeToRestore (e.g menu within a popover -> tabbing to close the menu should move focus to menu trigger)
393
+ if (!$4e07e9e0e9f6e0b8$var$isElementInAnyScope(nodeToRestore)) focusedElement.blur();
394
+ else $4e07e9e0e9f6e0b8$var$focusElement(nodeToRestore, true);
395
+ }
396
+ };
397
+ if (!contain) document.addEventListener('keydown', onKeyDown, true);
398
+ return ()=>{
399
+ if (!contain) document.removeEventListener('keydown', onKeyDown, true);
400
+ if (restoreFocus && nodeToRestore && $4e07e9e0e9f6e0b8$var$isElementInScope(document.activeElement, scopeRef.current)) requestAnimationFrame(()=>{
401
+ if (document.body.contains(nodeToRestore)) $4e07e9e0e9f6e0b8$var$focusElement(nodeToRestore);
402
+ });
403
+ };
404
+ }, [
405
+ scopeRef,
406
+ restoreFocus,
407
+ contain
408
+ ]);
609
409
  }
610
- /**
611
- * Creates a FocusManager object that can be used to move focus within an element.
612
- */
613
-
614
-
615
- exports.getFocusableTreeWalker = getFocusableTreeWalker;
616
-
617
- function createFocusManager(ref) {
618
- return {
619
- focusNext(opts) {
620
- if (opts === void 0) {
621
- opts = {};
622
- }
623
-
624
- let root = ref.current;
625
- let {
626
- from,
627
- tabbable,
628
- wrap
629
- } = opts;
630
- let node = from || document.activeElement;
631
- let walker = getFocusableTreeWalker(root, {
632
- tabbable
633
- });
634
-
635
- if (root.contains(node)) {
636
- walker.currentNode = node;
637
- }
638
-
639
- let nextNode = walker.nextNode();
640
-
641
- if (!nextNode && wrap) {
642
- walker.currentNode = root;
643
- nextNode = walker.nextNode();
644
- }
645
-
646
- if (nextNode) {
647
- $bdceb2956edbee43435a9382ef97283f$var$focusElement(nextNode, true);
648
- }
649
-
650
- return nextNode;
651
- },
652
-
653
- focusPrevious(opts) {
654
- if (opts === void 0) {
655
- opts = {};
656
- }
657
-
658
- let root = ref.current;
659
- let {
660
- from,
661
- tabbable,
662
- wrap
663
- } = opts;
664
- let node = from || document.activeElement;
665
- let walker = getFocusableTreeWalker(root, {
666
- tabbable
667
- });
668
-
669
- if (root.contains(node)) {
670
- walker.currentNode = node;
671
- } else {
672
- let next = $bdceb2956edbee43435a9382ef97283f$var$last(walker);
673
-
674
- if (next) {
675
- $bdceb2956edbee43435a9382ef97283f$var$focusElement(next, true);
410
+ function $4e07e9e0e9f6e0b8$export$2d6ec8fc375ceafa(root, opts, scope) {
411
+ let selector = opts?.tabbable ? $4e07e9e0e9f6e0b8$var$TABBABLE_ELEMENT_SELECTOR : $4e07e9e0e9f6e0b8$var$FOCUSABLE_ELEMENT_SELECTOR;
412
+ let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
413
+ acceptNode (node) {
414
+ // Skip nodes inside the starting node.
415
+ if (opts?.from?.contains(node)) return NodeFilter.FILTER_REJECT;
416
+ if (node.matches(selector) && $9793aa05cd766621$export$e989c0fffaa6b27a(node) && (!scope || $4e07e9e0e9f6e0b8$var$isElementInScope(node, scope))) return NodeFilter.FILTER_ACCEPT;
417
+ return NodeFilter.FILTER_SKIP;
676
418
  }
419
+ });
420
+ if (opts?.from) walker.currentNode = opts.from;
421
+ return walker;
422
+ }
423
+ function $4e07e9e0e9f6e0b8$export$c5251b9e124bf29(ref) {
424
+ return {
425
+ focusNext (opts = {
426
+ }) {
427
+ let root = ref.current;
428
+ let { from: from , tabbable: tabbable , wrap: wrap } = opts;
429
+ let node = from || document.activeElement;
430
+ let walker = $4e07e9e0e9f6e0b8$export$2d6ec8fc375ceafa(root, {
431
+ tabbable: tabbable
432
+ });
433
+ if (root.contains(node)) walker.currentNode = node;
434
+ let nextNode = walker.nextNode();
435
+ if (!nextNode && wrap) {
436
+ walker.currentNode = root;
437
+ nextNode = walker.nextNode();
438
+ }
439
+ if (nextNode) $4e07e9e0e9f6e0b8$var$focusElement(nextNode, true);
440
+ return nextNode;
441
+ },
442
+ focusPrevious (opts = {
443
+ }) {
444
+ let root = ref.current;
445
+ let { from: from , tabbable: tabbable , wrap: wrap } = opts;
446
+ let node = from || document.activeElement;
447
+ let walker = $4e07e9e0e9f6e0b8$export$2d6ec8fc375ceafa(root, {
448
+ tabbable: tabbable
449
+ });
450
+ if (root.contains(node)) walker.currentNode = node;
451
+ else {
452
+ let next = $4e07e9e0e9f6e0b8$var$last(walker);
453
+ if (next) $4e07e9e0e9f6e0b8$var$focusElement(next, true);
454
+ return next;
455
+ }
456
+ let previousNode = walker.previousNode();
457
+ if (!previousNode && wrap) {
458
+ walker.currentNode = root;
459
+ previousNode = $4e07e9e0e9f6e0b8$var$last(walker);
460
+ }
461
+ if (previousNode) $4e07e9e0e9f6e0b8$var$focusElement(previousNode, true);
462
+ return previousNode;
463
+ },
464
+ focusFirst (opts = {
465
+ }) {
466
+ let root = ref.current;
467
+ let { tabbable: tabbable } = opts;
468
+ let walker = $4e07e9e0e9f6e0b8$export$2d6ec8fc375ceafa(root, {
469
+ tabbable: tabbable
470
+ });
471
+ let nextNode = walker.nextNode();
472
+ if (nextNode) $4e07e9e0e9f6e0b8$var$focusElement(nextNode, true);
473
+ return nextNode;
474
+ },
475
+ focusLast (opts = {
476
+ }) {
477
+ let root = ref.current;
478
+ let { tabbable: tabbable } = opts;
479
+ let walker = $4e07e9e0e9f6e0b8$export$2d6ec8fc375ceafa(root, {
480
+ tabbable: tabbable
481
+ });
482
+ let next = $4e07e9e0e9f6e0b8$var$last(walker);
483
+ if (next) $4e07e9e0e9f6e0b8$var$focusElement(next, true);
484
+ return next;
485
+ }
486
+ };
487
+ }
488
+ function $4e07e9e0e9f6e0b8$var$last(walker) {
489
+ let next;
490
+ let last;
491
+ do {
492
+ last = walker.lastChild();
493
+ if (last) next = last;
494
+ }while (last)
495
+ return next;
496
+ }
677
497
 
678
- return next;
679
- }
680
-
681
- let previousNode = walker.previousNode();
682
-
683
- if (!previousNode && wrap) {
684
- walker.currentNode = root;
685
- previousNode = $bdceb2956edbee43435a9382ef97283f$var$last(walker);
686
- }
687
498
 
688
- if (previousNode) {
689
- $bdceb2956edbee43435a9382ef97283f$var$focusElement(previousNode, true);
690
- }
499
+ var $1b048bf2853bccb4$exports = {};
691
500
 
692
- return previousNode;
693
- },
501
+ $parcel$export($1b048bf2853bccb4$exports, "FocusRing", () => $1b048bf2853bccb4$export$1a38b4ad7f578e1d);
694
502
 
695
- focusFirst(opts) {
696
- if (opts === void 0) {
697
- opts = {};
698
- }
699
503
 
700
- let root = ref.current;
701
- let {
702
- tabbable
703
- } = opts;
704
- let walker = getFocusableTreeWalker(root, {
705
- tabbable
706
- });
707
- let nextNode = walker.nextNode();
708
-
709
- if (nextNode) {
710
- $bdceb2956edbee43435a9382ef97283f$var$focusElement(nextNode, true);
711
- }
712
504
 
713
- return nextNode;
714
- },
505
+ var $72aa0937366f9cc2$exports = {};
715
506
 
716
- focusLast(opts) {
717
- if (opts === void 0) {
718
- opts = {};
719
- }
507
+ $parcel$export($72aa0937366f9cc2$exports, "useFocusRing", () => $72aa0937366f9cc2$export$4e328f61c538687f);
720
508
 
721
- let root = ref.current;
722
- let {
723
- tabbable
724
- } = opts;
725
- let walker = getFocusableTreeWalker(root, {
726
- tabbable
727
- });
728
- let next = $bdceb2956edbee43435a9382ef97283f$var$last(walker);
729
-
730
- if (next) {
731
- $bdceb2956edbee43435a9382ef97283f$var$focusElement(next, true);
732
- }
733
509
 
734
- return next;
735
- }
736
510
 
737
- };
511
+ function $72aa0937366f9cc2$export$4e328f61c538687f(props = {
512
+ }) {
513
+ let { autoFocus: autoFocus = false , isTextInput: isTextInput , within: within } = props;
514
+ let state = $7qnVn$react.useRef({
515
+ isFocused: false,
516
+ isFocusVisible: autoFocus || $7qnVn$reactariainteractions.isFocusVisible()
517
+ }).current;
518
+ let [isFocused1, setFocused] = $7qnVn$react.useState(false);
519
+ let [isFocusVisibleState, setFocusVisible] = $7qnVn$react.useState(()=>state.isFocused && state.isFocusVisible
520
+ );
521
+ let updateState = ()=>setFocusVisible(state.isFocused && state.isFocusVisible)
522
+ ;
523
+ let onFocusChange = (isFocused)=>{
524
+ state.isFocused = isFocused;
525
+ setFocused(isFocused);
526
+ updateState();
527
+ };
528
+ $7qnVn$reactariainteractions.useFocusVisibleListener((isFocusVisible)=>{
529
+ state.isFocusVisible = isFocusVisible;
530
+ updateState();
531
+ }, [], {
532
+ isTextInput: isTextInput
533
+ });
534
+ let { focusProps: focusProps } = $7qnVn$reactariainteractions.useFocus({
535
+ isDisabled: within,
536
+ onFocusChange: onFocusChange
537
+ });
538
+ let { focusWithinProps: focusWithinProps } = $7qnVn$reactariainteractions.useFocusWithin({
539
+ isDisabled: !within,
540
+ onFocusWithinChange: onFocusChange
541
+ });
542
+ return {
543
+ isFocused: isFocused1,
544
+ isFocusVisible: state.isFocused && isFocusVisibleState,
545
+ focusProps: within ? focusWithinProps : focusProps
546
+ };
738
547
  }
739
548
 
740
- exports.createFocusManager = createFocusManager;
741
549
 
742
- function $bdceb2956edbee43435a9382ef97283f$var$last(walker) {
743
- let next;
744
- let last;
745
-
746
- do {
747
- last = walker.lastChild();
748
-
749
- if (last) {
750
- next = last;
751
- }
752
- } while (last);
753
-
754
- return next;
550
+ function $1b048bf2853bccb4$export$1a38b4ad7f578e1d(props) {
551
+ let { children: children , focusClass: focusClass , focusRingClass: focusRingClass } = props;
552
+ let { isFocused: isFocused , isFocusVisible: isFocusVisible , focusProps: focusProps } = $72aa0937366f9cc2$export$4e328f61c538687f(props);
553
+ let child = ($parcel$interopDefault($7qnVn$react)).Children.only(children);
554
+ return(/*#__PURE__*/ ($parcel$interopDefault($7qnVn$react)).cloneElement(child, $7qnVn$reactariautils.mergeProps(child.props, {
555
+ ...focusProps,
556
+ className: ($parcel$interopDefault($7qnVn$clsx))({
557
+ [focusClass || '']: isFocused,
558
+ [focusRingClass || '']: isFocusVisible
559
+ })
560
+ })));
755
561
  }
756
562
 
757
- /**
758
- * Determines whether a focus ring should be shown to indicate keyboard focus.
759
- * Focus rings are visible only when the user is interacting with a keyboard,
760
- * not with a mouse, touch, or other input methods.
761
- */
762
- function useFocusRing(props) {
763
- if (props === void 0) {
764
- props = {};
765
- }
766
-
767
- let {
768
- autoFocus = false,
769
- isTextInput,
770
- within
771
- } = props;
772
- let state = useRef({
773
- isFocused: false,
774
- isFocusVisible: autoFocus || _isFocusVisible()
775
- }).current;
776
- let [isFocused, setFocused] = useState(false);
777
- let [isFocusVisibleState, setFocusVisible] = useState(() => state.isFocused && state.isFocusVisible);
778
-
779
- let updateState = () => setFocusVisible(state.isFocused && state.isFocusVisible);
780
-
781
- let onFocusChange = isFocused => {
782
- state.isFocused = isFocused;
783
- setFocused(isFocused);
784
- updateState();
785
- };
786
-
787
- useFocusVisibleListener(isFocusVisible => {
788
- state.isFocusVisible = isFocusVisible;
789
- updateState();
790
- }, [], {
791
- isTextInput
792
- });
793
- let {
794
- focusProps
795
- } = useFocus({
796
- isDisabled: within,
797
- onFocusChange
798
- });
799
- let {
800
- focusWithinProps
801
- } = useFocusWithin({
802
- isDisabled: !within,
803
- onFocusWithinChange: onFocusChange
804
- });
805
- return {
806
- isFocused,
807
- isFocusVisible: state.isFocused && isFocusVisibleState,
808
- focusProps: within ? focusWithinProps : focusProps
809
- };
810
- }
811
-
812
- exports.useFocusRing = useFocusRing;
813
-
814
- /**
815
- * A utility component that applies a CSS class when an element has keyboard focus.
816
- * Focus rings are visible only when the user is interacting with a keyboard,
817
- * not with a mouse, touch, or other input methods.
818
- */
819
- function FocusRing(props) {
820
- let {
821
- children,
822
- focusClass,
823
- focusRingClass
824
- } = props;
825
- let {
826
- isFocused,
827
- isFocusVisible,
828
- focusProps
829
- } = useFocusRing(props);
830
-
831
- let child = _react.Children.only(children);
832
-
833
- return /*#__PURE__*/_react.cloneElement(child, mergeProps(child.props, _babelRuntimeHelpersExtends({}, focusProps, {
834
- className: _clsx({
835
- [focusClass || '']: isFocused,
836
- [focusRingClass || '']: isFocusVisible
837
- })
838
- })));
839
- }
840
563
 
841
- exports.FocusRing = FocusRing;
564
+ var $be91893942c6d355$exports = {};
842
565
 
843
- let $f284cbc8bcdf616ffabe3d006e2c9db$var$FocusableContext = /*#__PURE__*/_react.createContext(null);
566
+ $parcel$export($be91893942c6d355$exports, "FocusableProvider", () => $be91893942c6d355$export$13f3202a3e5ddd5);
567
+ $parcel$export($be91893942c6d355$exports, "useFocusable", () => $be91893942c6d355$export$4c014de7c8940b4c);
844
568
 
845
- function $f284cbc8bcdf616ffabe3d006e2c9db$var$useFocusableContext(ref) {
846
- let context = useContext($f284cbc8bcdf616ffabe3d006e2c9db$var$FocusableContext) || {};
847
- useSyncRef(context, ref); // eslint-disable-next-line
848
569
 
849
- let otherProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(context, ["ref"]);
850
570
 
851
- return otherProps;
571
+ let $be91893942c6d355$var$FocusableContext = /*#__PURE__*/ ($parcel$interopDefault($7qnVn$react)).createContext(null);
572
+ function $be91893942c6d355$var$useFocusableContext(ref) {
573
+ let context = $7qnVn$react.useContext($be91893942c6d355$var$FocusableContext) || {
574
+ };
575
+ $7qnVn$reactariautils.useSyncRef(context, ref);
576
+ // eslint-disable-next-line
577
+ let { ref: _ , ...otherProps } = context;
578
+ return otherProps;
852
579
  }
853
580
  /**
854
581
  * Provides DOM props to the nearest focusable child.
855
- */
856
-
857
-
858
- function $f284cbc8bcdf616ffabe3d006e2c9db$var$FocusableProvider(props, ref) {
859
- let {
860
- children
861
- } = props,
862
- otherProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(props, ["children"]);
863
-
864
- let context = _babelRuntimeHelpersExtends({}, otherProps, {
865
- ref
866
- });
867
-
868
- return /*#__PURE__*/_react.createElement($f284cbc8bcdf616ffabe3d006e2c9db$var$FocusableContext.Provider, {
869
- value: context
870
- }, children);
582
+ */ function $be91893942c6d355$var$FocusableProvider(props, ref) {
583
+ let { children: children , ...otherProps } = props;
584
+ let context = {
585
+ ...otherProps,
586
+ ref: ref
587
+ };
588
+ return(/*#__PURE__*/ ($parcel$interopDefault($7qnVn$react)).createElement($be91893942c6d355$var$FocusableContext.Provider, {
589
+ value: context
590
+ }, children));
591
+ }
592
+ let $be91893942c6d355$export$13f3202a3e5ddd5 = /*#__PURE__*/ ($parcel$interopDefault($7qnVn$react)).forwardRef($be91893942c6d355$var$FocusableProvider);
593
+ function $be91893942c6d355$export$4c014de7c8940b4c(props, domRef) {
594
+ let { focusProps: focusProps } = $7qnVn$reactariainteractions.useFocus(props);
595
+ let { keyboardProps: keyboardProps } = $7qnVn$reactariainteractions.useKeyboard(props);
596
+ let interactions = $7qnVn$reactariautils.mergeProps(focusProps, keyboardProps);
597
+ let domProps = $be91893942c6d355$var$useFocusableContext(domRef);
598
+ let interactionProps = props.isDisabled ? {
599
+ } : domProps;
600
+ let autoFocusRef = $7qnVn$react.useRef(props.autoFocus);
601
+ $7qnVn$react.useEffect(()=>{
602
+ if (autoFocusRef.current && domRef.current) domRef.current.focus();
603
+ autoFocusRef.current = false;
604
+ }, []);
605
+ return {
606
+ focusableProps: $7qnVn$reactariautils.mergeProps({
607
+ ...interactions,
608
+ tabIndex: props.excludeFromTabOrder && !props.isDisabled ? -1 : undefined
609
+ }, interactionProps)
610
+ };
871
611
  }
872
612
 
873
- let FocusableProvider = /*#__PURE__*/_react.forwardRef($f284cbc8bcdf616ffabe3d006e2c9db$var$FocusableProvider);
874
613
 
875
- exports.FocusableProvider = FocusableProvider;
876
614
 
877
- /**
878
- * Used to make an element focusable and capable of auto focus.
879
- */
880
- function useFocusable(props, domRef) {
881
- let {
882
- focusProps
883
- } = useFocus(props);
884
- let {
885
- keyboardProps
886
- } = useKeyboard(props);
887
- let interactions = mergeProps(focusProps, keyboardProps);
888
- let domProps = $f284cbc8bcdf616ffabe3d006e2c9db$var$useFocusableContext(domRef);
889
- let interactionProps = props.isDisabled ? {} : domProps;
890
- let autoFocusRef = useRef(props.autoFocus);
891
- useEffect(() => {
892
- if (autoFocusRef.current && domRef.current) {
893
- domRef.current.focus();
894
- }
895
615
 
896
- autoFocusRef.current = false;
897
- }, []);
898
- return {
899
- focusableProps: mergeProps(_babelRuntimeHelpersExtends({}, interactions, {
900
- tabIndex: props.excludeFromTabOrder && !props.isDisabled ? -1 : undefined
901
- }), interactionProps)
902
- };
903
- }
616
+ $parcel$exportWildcard(module.exports, $4e07e9e0e9f6e0b8$exports);
617
+ $parcel$exportWildcard(module.exports, $1b048bf2853bccb4$exports);
618
+ $parcel$exportWildcard(module.exports, $be91893942c6d355$exports);
619
+ $parcel$exportWildcard(module.exports, $72aa0937366f9cc2$exports);
620
+ $parcel$exportWildcard(module.exports, $a424ea782c64243d$exports);
621
+
904
622
 
905
- exports.useFocusable = useFocusable;
906
623
  //# sourceMappingURL=main.js.map