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