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