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