@react-aria/focus 3.5.1 → 3.5.4
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 +168 -166
- package/dist/main.js.map +1 -1
- package/dist/module.js +164 -162
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +1 -1
- package/package.json +5 -5
- package/src/FocusScope.tsx +1 -1
package/dist/main.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
var $
|
|
2
|
-
var $
|
|
3
|
-
var $
|
|
4
|
-
var $
|
|
1
|
+
var $aB6Cp$react = require("react");
|
|
2
|
+
var $aB6Cp$reactariautils = require("@react-aria/utils");
|
|
3
|
+
var $aB6Cp$reactariainteractions = require("@react-aria/interactions");
|
|
4
|
+
var $aB6Cp$clsx = require("clsx");
|
|
5
5
|
|
|
6
6
|
function $parcel$exportWildcard(dest, source) {
|
|
7
7
|
Object.keys(source).forEach(function(key) {
|
|
@@ -25,30 +25,30 @@ function $parcel$interopDefault(a) {
|
|
|
25
25
|
function $parcel$export(e, n, v, s) {
|
|
26
26
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
27
27
|
}
|
|
28
|
-
var $
|
|
28
|
+
var $a7a032acae3ddda9$exports = {};
|
|
29
29
|
|
|
30
|
-
$parcel$export($
|
|
31
|
-
$parcel$export($
|
|
32
|
-
$parcel$export($
|
|
33
|
-
$parcel$export($
|
|
34
|
-
var $
|
|
30
|
+
$parcel$export($a7a032acae3ddda9$exports, "FocusScope", () => $a7a032acae3ddda9$export$20e40289641fbbb6);
|
|
31
|
+
$parcel$export($a7a032acae3ddda9$exports, "useFocusManager", () => $a7a032acae3ddda9$export$10c5169755ce7bd7);
|
|
32
|
+
$parcel$export($a7a032acae3ddda9$exports, "getFocusableTreeWalker", () => $a7a032acae3ddda9$export$2d6ec8fc375ceafa);
|
|
33
|
+
$parcel$export($a7a032acae3ddda9$exports, "createFocusManager", () => $a7a032acae3ddda9$export$c5251b9e124bf29);
|
|
34
|
+
var $1c7f9157d722357d$exports = {};
|
|
35
35
|
|
|
36
|
-
$parcel$export($
|
|
36
|
+
$parcel$export($1c7f9157d722357d$exports, "focusSafely", () => $1c7f9157d722357d$export$80f3e147d781571c);
|
|
37
37
|
|
|
38
38
|
|
|
39
|
-
function $
|
|
39
|
+
function $1c7f9157d722357d$export$80f3e147d781571c(element) {
|
|
40
40
|
// If the user is interacting with a virtual cursor, e.g. screen reader, then
|
|
41
41
|
// wait until after any animated transitions that are currently occurring on
|
|
42
42
|
// the page before shifting focus. This avoids issues with VoiceOver on iOS
|
|
43
43
|
// causing the page to scroll when moving focus if the element is transitioning
|
|
44
44
|
// from off the screen.
|
|
45
|
-
if ($
|
|
45
|
+
if ($aB6Cp$reactariainteractions.getInteractionModality() === 'virtual') {
|
|
46
46
|
let lastFocusedElement = document.activeElement;
|
|
47
|
-
$
|
|
47
|
+
$aB6Cp$reactariautils.runAfterTransition(()=>{
|
|
48
48
|
// If focus did not move and the element is still in the document, focus it.
|
|
49
|
-
if (document.activeElement === lastFocusedElement && document.contains(element)) $
|
|
49
|
+
if (document.activeElement === lastFocusedElement && document.contains(element)) $aB6Cp$reactariautils.focusWithoutScrolling(element);
|
|
50
50
|
});
|
|
51
|
-
} else $
|
|
51
|
+
} else $aB6Cp$reactariautils.focusWithoutScrolling(element);
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
|
|
@@ -62,7 +62,7 @@ function $a424ea782c64243d$export$80f3e147d781571c(element) {
|
|
|
62
62
|
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
63
63
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
64
64
|
* governing permissions and limitations under the License.
|
|
65
|
-
*/ function $
|
|
65
|
+
*/ function $d5156037ad898a4d$var$isStyleVisible(element) {
|
|
66
66
|
if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) return false;
|
|
67
67
|
let { display: display , visibility: visibility } = element.style;
|
|
68
68
|
let isVisible = display !== 'none' && visibility !== 'hidden' && visibility !== 'collapse';
|
|
@@ -73,27 +73,27 @@ function $a424ea782c64243d$export$80f3e147d781571c(element) {
|
|
|
73
73
|
}
|
|
74
74
|
return isVisible;
|
|
75
75
|
}
|
|
76
|
-
function $
|
|
76
|
+
function $d5156037ad898a4d$var$isAttributeVisible(element, childElement) {
|
|
77
77
|
return !element.hasAttribute('hidden') && (element.nodeName === 'DETAILS' && childElement && childElement.nodeName !== 'SUMMARY' ? element.hasAttribute('open') : true);
|
|
78
78
|
}
|
|
79
|
-
function $
|
|
80
|
-
return element.nodeName !== '#comment' && $
|
|
79
|
+
function $d5156037ad898a4d$export$e989c0fffaa6b27a(element, childElement) {
|
|
80
|
+
return element.nodeName !== '#comment' && $d5156037ad898a4d$var$isStyleVisible(element) && $d5156037ad898a4d$var$isAttributeVisible(element, childElement) && (!element.parentElement || $d5156037ad898a4d$export$e989c0fffaa6b27a(element.parentElement, element));
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
|
|
84
84
|
|
|
85
85
|
|
|
86
|
-
const $
|
|
87
|
-
let $
|
|
88
|
-
let $
|
|
89
|
-
function $
|
|
86
|
+
const $a7a032acae3ddda9$var$FocusContext = /*#__PURE__*/ ($parcel$interopDefault($aB6Cp$react)).createContext(null);
|
|
87
|
+
let $a7a032acae3ddda9$var$activeScope = null;
|
|
88
|
+
let $a7a032acae3ddda9$var$scopes = new Map();
|
|
89
|
+
function $a7a032acae3ddda9$export$20e40289641fbbb6(props) {
|
|
90
90
|
let { children: children , contain: contain , restoreFocus: restoreFocus , autoFocus: autoFocus } = props;
|
|
91
|
-
let startRef = $
|
|
92
|
-
let endRef = $
|
|
93
|
-
let scopeRef = $
|
|
94
|
-
let ctx = $
|
|
95
|
-
let parentScope = ctx
|
|
96
|
-
$
|
|
91
|
+
let startRef = $aB6Cp$react.useRef();
|
|
92
|
+
let endRef = $aB6Cp$react.useRef();
|
|
93
|
+
let scopeRef = $aB6Cp$react.useRef([]);
|
|
94
|
+
let ctx = $aB6Cp$react.useContext($a7a032acae3ddda9$var$FocusContext);
|
|
95
|
+
let parentScope = ctx === null || ctx === void 0 ? void 0 : ctx.scopeRef;
|
|
96
|
+
$aB6Cp$reactariautils.useLayoutEffect(()=>{
|
|
97
97
|
// Find all rendered nodes between the sentinels and add them to the scope.
|
|
98
98
|
let node = startRef.current.nextSibling;
|
|
99
99
|
let nodes = [];
|
|
@@ -106,42 +106,43 @@ function $4e07e9e0e9f6e0b8$export$20e40289641fbbb6(props) {
|
|
|
106
106
|
children,
|
|
107
107
|
parentScope
|
|
108
108
|
]);
|
|
109
|
-
$
|
|
110
|
-
$
|
|
109
|
+
$aB6Cp$reactariautils.useLayoutEffect(()=>{
|
|
110
|
+
$a7a032acae3ddda9$var$scopes.set(scopeRef, parentScope);
|
|
111
111
|
return ()=>{
|
|
112
112
|
// Restore the active scope on unmount if this scope or a descendant scope is active.
|
|
113
113
|
// Parent effect cleanups run before children, so we need to check if the
|
|
114
114
|
// parent scope actually still exists before restoring the active scope to it.
|
|
115
|
-
if ((scopeRef === $
|
|
116
|
-
$
|
|
115
|
+
if ((scopeRef === $a7a032acae3ddda9$var$activeScope || $a7a032acae3ddda9$var$isAncestorScope(scopeRef, $a7a032acae3ddda9$var$activeScope)) && (!parentScope || $a7a032acae3ddda9$var$scopes.has(parentScope))) $a7a032acae3ddda9$var$activeScope = parentScope;
|
|
116
|
+
$a7a032acae3ddda9$var$scopes.delete(scopeRef);
|
|
117
117
|
};
|
|
118
118
|
}, [
|
|
119
119
|
scopeRef,
|
|
120
120
|
parentScope
|
|
121
121
|
]);
|
|
122
|
-
$
|
|
123
|
-
$
|
|
124
|
-
$
|
|
125
|
-
let focusManager = $
|
|
126
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
122
|
+
$a7a032acae3ddda9$var$useFocusContainment(scopeRef, contain);
|
|
123
|
+
$a7a032acae3ddda9$var$useRestoreFocus(scopeRef, restoreFocus, contain);
|
|
124
|
+
$a7a032acae3ddda9$var$useAutoFocus(scopeRef, autoFocus);
|
|
125
|
+
let focusManager = $a7a032acae3ddda9$var$createFocusManagerForScope(scopeRef);
|
|
126
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($aB6Cp$react)).createElement($a7a032acae3ddda9$var$FocusContext.Provider, {
|
|
127
127
|
value: {
|
|
128
128
|
scopeRef: scopeRef,
|
|
129
129
|
focusManager: focusManager
|
|
130
130
|
}
|
|
131
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($
|
|
131
|
+
}, /*#__PURE__*/ ($parcel$interopDefault($aB6Cp$react)).createElement("span", {
|
|
132
132
|
"data-focus-scope-start": true,
|
|
133
133
|
hidden: true,
|
|
134
134
|
ref: startRef
|
|
135
|
-
}), children, /*#__PURE__*/ ($parcel$interopDefault($
|
|
135
|
+
}), children, /*#__PURE__*/ ($parcel$interopDefault($aB6Cp$react)).createElement("span", {
|
|
136
136
|
"data-focus-scope-end": true,
|
|
137
137
|
hidden: true,
|
|
138
138
|
ref: endRef
|
|
139
139
|
})));
|
|
140
140
|
}
|
|
141
|
-
function $
|
|
142
|
-
|
|
141
|
+
function $a7a032acae3ddda9$export$10c5169755ce7bd7() {
|
|
142
|
+
var ref;
|
|
143
|
+
return (ref = $aB6Cp$react.useContext($a7a032acae3ddda9$var$FocusContext)) === null || ref === void 0 ? void 0 : ref.focusManager;
|
|
143
144
|
}
|
|
144
|
-
function $
|
|
145
|
+
function $a7a032acae3ddda9$var$createFocusManagerForScope(scopeRef) {
|
|
145
146
|
return {
|
|
146
147
|
focusNext (opts = {
|
|
147
148
|
}) {
|
|
@@ -149,16 +150,16 @@ function $4e07e9e0e9f6e0b8$var$createFocusManagerForScope(scopeRef) {
|
|
|
149
150
|
let { from: from , tabbable: tabbable , wrap: wrap } = opts;
|
|
150
151
|
let node = from || document.activeElement;
|
|
151
152
|
let sentinel = scope[0].previousElementSibling;
|
|
152
|
-
let walker = $
|
|
153
|
+
let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa($a7a032acae3ddda9$var$getScopeRoot(scope), {
|
|
153
154
|
tabbable: tabbable
|
|
154
155
|
}, scope);
|
|
155
|
-
walker.currentNode = $
|
|
156
|
+
walker.currentNode = $a7a032acae3ddda9$var$isElementInScope(node, scope) ? node : sentinel;
|
|
156
157
|
let nextNode = walker.nextNode();
|
|
157
158
|
if (!nextNode && wrap) {
|
|
158
159
|
walker.currentNode = sentinel;
|
|
159
160
|
nextNode = walker.nextNode();
|
|
160
161
|
}
|
|
161
|
-
if (nextNode) $
|
|
162
|
+
if (nextNode) $a7a032acae3ddda9$var$focusElement(nextNode, true);
|
|
162
163
|
return nextNode;
|
|
163
164
|
},
|
|
164
165
|
focusPrevious (opts = {
|
|
@@ -167,45 +168,45 @@ function $4e07e9e0e9f6e0b8$var$createFocusManagerForScope(scopeRef) {
|
|
|
167
168
|
let { from: from , tabbable: tabbable , wrap: wrap } = opts;
|
|
168
169
|
let node = from || document.activeElement;
|
|
169
170
|
let sentinel = scope[scope.length - 1].nextElementSibling;
|
|
170
|
-
let walker = $
|
|
171
|
+
let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa($a7a032acae3ddda9$var$getScopeRoot(scope), {
|
|
171
172
|
tabbable: tabbable
|
|
172
173
|
}, scope);
|
|
173
|
-
walker.currentNode = $
|
|
174
|
+
walker.currentNode = $a7a032acae3ddda9$var$isElementInScope(node, scope) ? node : sentinel;
|
|
174
175
|
let previousNode = walker.previousNode();
|
|
175
176
|
if (!previousNode && wrap) {
|
|
176
177
|
walker.currentNode = sentinel;
|
|
177
178
|
previousNode = walker.previousNode();
|
|
178
179
|
}
|
|
179
|
-
if (previousNode) $
|
|
180
|
+
if (previousNode) $a7a032acae3ddda9$var$focusElement(previousNode, true);
|
|
180
181
|
return previousNode;
|
|
181
182
|
},
|
|
182
183
|
focusFirst (opts = {
|
|
183
184
|
}) {
|
|
184
185
|
let scope = scopeRef.current;
|
|
185
186
|
let { tabbable: tabbable } = opts;
|
|
186
|
-
let walker = $
|
|
187
|
+
let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa($a7a032acae3ddda9$var$getScopeRoot(scope), {
|
|
187
188
|
tabbable: tabbable
|
|
188
189
|
}, scope);
|
|
189
190
|
walker.currentNode = scope[0].previousElementSibling;
|
|
190
191
|
let nextNode = walker.nextNode();
|
|
191
|
-
if (nextNode) $
|
|
192
|
+
if (nextNode) $a7a032acae3ddda9$var$focusElement(nextNode, true);
|
|
192
193
|
return nextNode;
|
|
193
194
|
},
|
|
194
195
|
focusLast (opts = {
|
|
195
196
|
}) {
|
|
196
197
|
let scope = scopeRef.current;
|
|
197
198
|
let { tabbable: tabbable } = opts;
|
|
198
|
-
let walker = $
|
|
199
|
+
let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa($a7a032acae3ddda9$var$getScopeRoot(scope), {
|
|
199
200
|
tabbable: tabbable
|
|
200
201
|
}, scope);
|
|
201
202
|
walker.currentNode = scope[scope.length - 1].nextElementSibling;
|
|
202
203
|
let previousNode = walker.previousNode();
|
|
203
|
-
if (previousNode) $
|
|
204
|
+
if (previousNode) $a7a032acae3ddda9$var$focusElement(previousNode, true);
|
|
204
205
|
return previousNode;
|
|
205
206
|
}
|
|
206
207
|
};
|
|
207
208
|
}
|
|
208
|
-
const $
|
|
209
|
+
const $a7a032acae3ddda9$var$focusableElements = [
|
|
209
210
|
'input:not([disabled]):not([type=hidden])',
|
|
210
211
|
'select:not([disabled])',
|
|
211
212
|
'textarea:not([disabled])',
|
|
@@ -220,25 +221,25 @@ const $4e07e9e0e9f6e0b8$var$focusableElements = [
|
|
|
220
221
|
'video[controls]',
|
|
221
222
|
'[contenteditable]'
|
|
222
223
|
];
|
|
223
|
-
const $
|
|
224
|
-
$
|
|
225
|
-
const $
|
|
226
|
-
function $
|
|
224
|
+
const $a7a032acae3ddda9$var$FOCUSABLE_ELEMENT_SELECTOR = $a7a032acae3ddda9$var$focusableElements.join(':not([hidden]),') + ',[tabindex]:not([disabled]):not([hidden])';
|
|
225
|
+
$a7a032acae3ddda9$var$focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
|
|
226
|
+
const $a7a032acae3ddda9$var$TABBABLE_ELEMENT_SELECTOR = $a7a032acae3ddda9$var$focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
|
|
227
|
+
function $a7a032acae3ddda9$var$getScopeRoot(scope) {
|
|
227
228
|
return scope[0].parentElement;
|
|
228
229
|
}
|
|
229
|
-
function $
|
|
230
|
-
let focusedNode = $
|
|
231
|
-
let raf = $
|
|
232
|
-
$
|
|
230
|
+
function $a7a032acae3ddda9$var$useFocusContainment(scopeRef, contain) {
|
|
231
|
+
let focusedNode = $aB6Cp$react.useRef();
|
|
232
|
+
let raf = $aB6Cp$react.useRef(null);
|
|
233
|
+
$aB6Cp$reactariautils.useLayoutEffect(()=>{
|
|
233
234
|
let scope1 = scopeRef.current;
|
|
234
235
|
if (!contain) return;
|
|
235
236
|
// Handle the Tab key to contain focus within the scope
|
|
236
237
|
let onKeyDown = (e)=>{
|
|
237
|
-
if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || scopeRef !== $
|
|
238
|
+
if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || scopeRef !== $a7a032acae3ddda9$var$activeScope) return;
|
|
238
239
|
let focusedElement = document.activeElement;
|
|
239
240
|
let scope = scopeRef.current;
|
|
240
|
-
if (!$
|
|
241
|
-
let walker = $
|
|
241
|
+
if (!$a7a032acae3ddda9$var$isElementInScope(focusedElement, scope)) return;
|
|
242
|
+
let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa($a7a032acae3ddda9$var$getScopeRoot(scope), {
|
|
242
243
|
tabbable: true
|
|
243
244
|
}, scope);
|
|
244
245
|
walker.currentNode = focusedElement;
|
|
@@ -248,27 +249,27 @@ function $4e07e9e0e9f6e0b8$var$useFocusContainment(scopeRef, contain) {
|
|
|
248
249
|
nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
|
|
249
250
|
}
|
|
250
251
|
e.preventDefault();
|
|
251
|
-
if (nextElement) $
|
|
252
|
+
if (nextElement) $a7a032acae3ddda9$var$focusElement(nextElement, true);
|
|
252
253
|
};
|
|
253
254
|
let onFocus = (e)=>{
|
|
254
255
|
// If focusing an element in a child scope of the currently active scope, the child becomes active.
|
|
255
256
|
// Moving out of the active scope to an ancestor is not allowed.
|
|
256
|
-
if (!$
|
|
257
|
-
$
|
|
257
|
+
if (!$a7a032acae3ddda9$var$activeScope || $a7a032acae3ddda9$var$isAncestorScope($a7a032acae3ddda9$var$activeScope, scopeRef)) {
|
|
258
|
+
$a7a032acae3ddda9$var$activeScope = scopeRef;
|
|
258
259
|
focusedNode.current = e.target;
|
|
259
|
-
} else if (scopeRef === $
|
|
260
|
+
} else if (scopeRef === $a7a032acae3ddda9$var$activeScope && !$a7a032acae3ddda9$var$isElementInChildScope(e.target, scopeRef)) {
|
|
260
261
|
// If a focus event occurs outside the active scope (e.g. user tabs from browser location bar),
|
|
261
262
|
// restore focus to the previously focused node or the first tabbable element in the active scope.
|
|
262
263
|
if (focusedNode.current) focusedNode.current.focus();
|
|
263
|
-
else if ($
|
|
264
|
-
} else if (scopeRef === $
|
|
264
|
+
else if ($a7a032acae3ddda9$var$activeScope) $a7a032acae3ddda9$var$focusFirstInScope($a7a032acae3ddda9$var$activeScope.current);
|
|
265
|
+
} else if (scopeRef === $a7a032acae3ddda9$var$activeScope) focusedNode.current = e.target;
|
|
265
266
|
};
|
|
266
267
|
let onBlur = (e)=>{
|
|
267
268
|
// Firefox doesn't shift focus back to the Dialog properly without this
|
|
268
269
|
raf.current = requestAnimationFrame(()=>{
|
|
269
270
|
// Use document.activeElement instead of e.relatedTarget so we can tell if user clicked into iframe
|
|
270
|
-
if (scopeRef === $
|
|
271
|
-
$
|
|
271
|
+
if (scopeRef === $a7a032acae3ddda9$var$activeScope && !$a7a032acae3ddda9$var$isElementInChildScope(document.activeElement, scopeRef)) {
|
|
272
|
+
$a7a032acae3ddda9$var$activeScope = scopeRef;
|
|
272
273
|
focusedNode.current = e.target;
|
|
273
274
|
focusedNode.current.focus();
|
|
274
275
|
}
|
|
@@ -293,40 +294,40 @@ function $4e07e9e0e9f6e0b8$var$useFocusContainment(scopeRef, contain) {
|
|
|
293
294
|
contain
|
|
294
295
|
]);
|
|
295
296
|
// eslint-disable-next-line arrow-body-style
|
|
296
|
-
$
|
|
297
|
+
$aB6Cp$react.useEffect(()=>{
|
|
297
298
|
return ()=>cancelAnimationFrame(raf.current)
|
|
298
299
|
;
|
|
299
300
|
}, [
|
|
300
301
|
raf
|
|
301
302
|
]);
|
|
302
303
|
}
|
|
303
|
-
function $
|
|
304
|
-
for (let scope of $
|
|
305
|
-
if ($
|
|
304
|
+
function $a7a032acae3ddda9$var$isElementInAnyScope(element) {
|
|
305
|
+
for (let scope of $a7a032acae3ddda9$var$scopes.keys()){
|
|
306
|
+
if ($a7a032acae3ddda9$var$isElementInScope(element, scope.current)) return true;
|
|
306
307
|
}
|
|
307
308
|
return false;
|
|
308
309
|
}
|
|
309
|
-
function $
|
|
310
|
+
function $a7a032acae3ddda9$var$isElementInScope(element, scope) {
|
|
310
311
|
return scope.some((node)=>node.contains(element)
|
|
311
312
|
);
|
|
312
313
|
}
|
|
313
|
-
function $
|
|
314
|
+
function $a7a032acae3ddda9$var$isElementInChildScope(element, scope) {
|
|
314
315
|
// node.contains in isElementInScope covers child scopes that are also DOM children,
|
|
315
316
|
// but does not cover child scopes in portals.
|
|
316
|
-
for (let s of $
|
|
317
|
-
if ((s === scope || $
|
|
317
|
+
for (let s of $a7a032acae3ddda9$var$scopes.keys()){
|
|
318
|
+
if ((s === scope || $a7a032acae3ddda9$var$isAncestorScope(scope, s)) && $a7a032acae3ddda9$var$isElementInScope(element, s.current)) return true;
|
|
318
319
|
}
|
|
319
320
|
return false;
|
|
320
321
|
}
|
|
321
|
-
function $
|
|
322
|
-
let parent = $
|
|
322
|
+
function $a7a032acae3ddda9$var$isAncestorScope(ancestor, scope) {
|
|
323
|
+
let parent = $a7a032acae3ddda9$var$scopes.get(scope);
|
|
323
324
|
if (!parent) return false;
|
|
324
325
|
if (parent === ancestor) return true;
|
|
325
|
-
return $
|
|
326
|
+
return $a7a032acae3ddda9$var$isAncestorScope(ancestor, parent);
|
|
326
327
|
}
|
|
327
|
-
function $
|
|
328
|
+
function $a7a032acae3ddda9$var$focusElement(element, scroll = false) {
|
|
328
329
|
if (element != null && !scroll) try {
|
|
329
|
-
$
|
|
330
|
+
$1c7f9157d722357d$export$80f3e147d781571c(element);
|
|
330
331
|
} catch (err) {
|
|
331
332
|
// ignore
|
|
332
333
|
}
|
|
@@ -336,29 +337,29 @@ function $4e07e9e0e9f6e0b8$var$focusElement(element, scroll = false) {
|
|
|
336
337
|
// ignore
|
|
337
338
|
}
|
|
338
339
|
}
|
|
339
|
-
function $
|
|
340
|
+
function $a7a032acae3ddda9$var$focusFirstInScope(scope) {
|
|
340
341
|
let sentinel = scope[0].previousElementSibling;
|
|
341
|
-
let walker = $
|
|
342
|
+
let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa($a7a032acae3ddda9$var$getScopeRoot(scope), {
|
|
342
343
|
tabbable: true
|
|
343
344
|
}, scope);
|
|
344
345
|
walker.currentNode = sentinel;
|
|
345
|
-
$
|
|
346
|
+
$a7a032acae3ddda9$var$focusElement(walker.nextNode());
|
|
346
347
|
}
|
|
347
|
-
function $
|
|
348
|
-
const autoFocusRef = ($parcel$interopDefault($
|
|
349
|
-
$
|
|
348
|
+
function $a7a032acae3ddda9$var$useAutoFocus(scopeRef, autoFocus) {
|
|
349
|
+
const autoFocusRef = ($parcel$interopDefault($aB6Cp$react)).useRef(autoFocus);
|
|
350
|
+
$aB6Cp$react.useEffect(()=>{
|
|
350
351
|
if (autoFocusRef.current) {
|
|
351
|
-
$
|
|
352
|
-
if (!$
|
|
352
|
+
$a7a032acae3ddda9$var$activeScope = scopeRef;
|
|
353
|
+
if (!$a7a032acae3ddda9$var$isElementInScope(document.activeElement, $a7a032acae3ddda9$var$activeScope.current)) $a7a032acae3ddda9$var$focusFirstInScope(scopeRef.current);
|
|
353
354
|
}
|
|
354
355
|
autoFocusRef.current = false;
|
|
355
356
|
}, []);
|
|
356
357
|
}
|
|
357
|
-
function $
|
|
358
|
+
function $a7a032acae3ddda9$var$useRestoreFocus(scopeRef, restoreFocus, contain) {
|
|
358
359
|
// create a ref during render instead of useLayoutEffect so the active element is saved before a child with autoFocus=true mounts.
|
|
359
|
-
const nodeToRestoreRef = $
|
|
360
|
+
const nodeToRestoreRef = $aB6Cp$react.useRef(typeof document !== 'undefined' ? document.activeElement : null);
|
|
360
361
|
// useLayoutEffect instead of useEffect so the active element is saved synchronously instead of asynchronously.
|
|
361
|
-
$
|
|
362
|
+
$aB6Cp$reactariautils.useLayoutEffect(()=>{
|
|
362
363
|
let nodeToRestore = nodeToRestoreRef.current;
|
|
363
364
|
if (!restoreFocus) return;
|
|
364
365
|
// Handle the Tab key so that tabbing out of the scope goes to the next element
|
|
@@ -368,9 +369,9 @@ function $4e07e9e0e9f6e0b8$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
368
369
|
let onKeyDown = (e)=>{
|
|
369
370
|
if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey) return;
|
|
370
371
|
let focusedElement = document.activeElement;
|
|
371
|
-
if (!$
|
|
372
|
+
if (!$a7a032acae3ddda9$var$isElementInScope(focusedElement, scopeRef.current)) return;
|
|
372
373
|
// Create a DOM tree walker that matches all tabbable elements
|
|
373
|
-
let walker = $
|
|
374
|
+
let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa(document.body, {
|
|
374
375
|
tabbable: true
|
|
375
376
|
});
|
|
376
377
|
// Find the next tabbable element after the currently focused element
|
|
@@ -379,26 +380,26 @@ function $4e07e9e0e9f6e0b8$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
379
380
|
if (!document.body.contains(nodeToRestore) || nodeToRestore === document.body) nodeToRestore = null;
|
|
380
381
|
// If there is no next element, or it is outside the current scope, move focus to the
|
|
381
382
|
// next element after the node to restore to instead.
|
|
382
|
-
if ((!nextElement || !$
|
|
383
|
+
if ((!nextElement || !$a7a032acae3ddda9$var$isElementInScope(nextElement, scopeRef.current)) && nodeToRestore) {
|
|
383
384
|
walker.currentNode = nodeToRestore;
|
|
384
385
|
// Skip over elements within the scope, in case the scope immediately follows the node to restore.
|
|
385
386
|
do nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
|
|
386
|
-
while ($
|
|
387
|
+
while ($a7a032acae3ddda9$var$isElementInScope(nextElement, scopeRef.current))
|
|
387
388
|
e.preventDefault();
|
|
388
389
|
e.stopPropagation();
|
|
389
|
-
if (nextElement) $
|
|
390
|
+
if (nextElement) $a7a032acae3ddda9$var$focusElement(nextElement, true);
|
|
390
391
|
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
392
|
// then move focus to the body.
|
|
392
393
|
// 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 (!$
|
|
394
|
-
else $
|
|
394
|
+
if (!$a7a032acae3ddda9$var$isElementInAnyScope(nodeToRestore)) focusedElement.blur();
|
|
395
|
+
else $a7a032acae3ddda9$var$focusElement(nodeToRestore, true);
|
|
395
396
|
}
|
|
396
397
|
};
|
|
397
398
|
if (!contain) document.addEventListener('keydown', onKeyDown, true);
|
|
398
399
|
return ()=>{
|
|
399
400
|
if (!contain) document.removeEventListener('keydown', onKeyDown, true);
|
|
400
|
-
if (restoreFocus && nodeToRestore && $
|
|
401
|
-
if (document.body.contains(nodeToRestore)) $
|
|
401
|
+
if (restoreFocus && nodeToRestore && $a7a032acae3ddda9$var$isElementInScope(document.activeElement, scopeRef.current)) requestAnimationFrame(()=>{
|
|
402
|
+
if (document.body.contains(nodeToRestore)) $a7a032acae3ddda9$var$focusElement(nodeToRestore);
|
|
402
403
|
});
|
|
403
404
|
};
|
|
404
405
|
}, [
|
|
@@ -407,27 +408,28 @@ function $4e07e9e0e9f6e0b8$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
407
408
|
contain
|
|
408
409
|
]);
|
|
409
410
|
}
|
|
410
|
-
function $
|
|
411
|
-
let selector = opts
|
|
411
|
+
function $a7a032acae3ddda9$export$2d6ec8fc375ceafa(root, opts, scope) {
|
|
412
|
+
let selector = (opts === null || opts === void 0 ? void 0 : opts.tabbable) ? $a7a032acae3ddda9$var$TABBABLE_ELEMENT_SELECTOR : $a7a032acae3ddda9$var$FOCUSABLE_ELEMENT_SELECTOR;
|
|
412
413
|
let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
|
|
413
414
|
acceptNode (node) {
|
|
415
|
+
var ref;
|
|
414
416
|
// Skip nodes inside the starting node.
|
|
415
|
-
if (opts
|
|
416
|
-
if (node.matches(selector) && $
|
|
417
|
+
if (opts === null || opts === void 0 ? void 0 : (ref = opts.from) === null || ref === void 0 ? void 0 : ref.contains(node)) return NodeFilter.FILTER_REJECT;
|
|
418
|
+
if (node.matches(selector) && $d5156037ad898a4d$export$e989c0fffaa6b27a(node) && (!scope || $a7a032acae3ddda9$var$isElementInScope(node, scope))) return NodeFilter.FILTER_ACCEPT;
|
|
417
419
|
return NodeFilter.FILTER_SKIP;
|
|
418
420
|
}
|
|
419
421
|
});
|
|
420
|
-
if (opts
|
|
422
|
+
if (opts === null || opts === void 0 ? void 0 : opts.from) walker.currentNode = opts.from;
|
|
421
423
|
return walker;
|
|
422
424
|
}
|
|
423
|
-
function $
|
|
425
|
+
function $a7a032acae3ddda9$export$c5251b9e124bf29(ref) {
|
|
424
426
|
return {
|
|
425
427
|
focusNext (opts = {
|
|
426
428
|
}) {
|
|
427
429
|
let root = ref.current;
|
|
428
430
|
let { from: from , tabbable: tabbable , wrap: wrap } = opts;
|
|
429
431
|
let node = from || document.activeElement;
|
|
430
|
-
let walker = $
|
|
432
|
+
let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa(root, {
|
|
431
433
|
tabbable: tabbable
|
|
432
434
|
});
|
|
433
435
|
if (root.contains(node)) walker.currentNode = node;
|
|
@@ -436,7 +438,7 @@ function $4e07e9e0e9f6e0b8$export$c5251b9e124bf29(ref) {
|
|
|
436
438
|
walker.currentNode = root;
|
|
437
439
|
nextNode = walker.nextNode();
|
|
438
440
|
}
|
|
439
|
-
if (nextNode) $
|
|
441
|
+
if (nextNode) $a7a032acae3ddda9$var$focusElement(nextNode, true);
|
|
440
442
|
return nextNode;
|
|
441
443
|
},
|
|
442
444
|
focusPrevious (opts = {
|
|
@@ -444,48 +446,48 @@ function $4e07e9e0e9f6e0b8$export$c5251b9e124bf29(ref) {
|
|
|
444
446
|
let root = ref.current;
|
|
445
447
|
let { from: from , tabbable: tabbable , wrap: wrap } = opts;
|
|
446
448
|
let node = from || document.activeElement;
|
|
447
|
-
let walker = $
|
|
449
|
+
let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa(root, {
|
|
448
450
|
tabbable: tabbable
|
|
449
451
|
});
|
|
450
452
|
if (root.contains(node)) walker.currentNode = node;
|
|
451
453
|
else {
|
|
452
|
-
let next = $
|
|
453
|
-
if (next) $
|
|
454
|
+
let next = $a7a032acae3ddda9$var$last(walker);
|
|
455
|
+
if (next) $a7a032acae3ddda9$var$focusElement(next, true);
|
|
454
456
|
return next;
|
|
455
457
|
}
|
|
456
458
|
let previousNode = walker.previousNode();
|
|
457
459
|
if (!previousNode && wrap) {
|
|
458
460
|
walker.currentNode = root;
|
|
459
|
-
previousNode = $
|
|
461
|
+
previousNode = $a7a032acae3ddda9$var$last(walker);
|
|
460
462
|
}
|
|
461
|
-
if (previousNode) $
|
|
463
|
+
if (previousNode) $a7a032acae3ddda9$var$focusElement(previousNode, true);
|
|
462
464
|
return previousNode;
|
|
463
465
|
},
|
|
464
466
|
focusFirst (opts = {
|
|
465
467
|
}) {
|
|
466
468
|
let root = ref.current;
|
|
467
469
|
let { tabbable: tabbable } = opts;
|
|
468
|
-
let walker = $
|
|
470
|
+
let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa(root, {
|
|
469
471
|
tabbable: tabbable
|
|
470
472
|
});
|
|
471
473
|
let nextNode = walker.nextNode();
|
|
472
|
-
if (nextNode) $
|
|
474
|
+
if (nextNode) $a7a032acae3ddda9$var$focusElement(nextNode, true);
|
|
473
475
|
return nextNode;
|
|
474
476
|
},
|
|
475
477
|
focusLast (opts = {
|
|
476
478
|
}) {
|
|
477
479
|
let root = ref.current;
|
|
478
480
|
let { tabbable: tabbable } = opts;
|
|
479
|
-
let walker = $
|
|
481
|
+
let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa(root, {
|
|
480
482
|
tabbable: tabbable
|
|
481
483
|
});
|
|
482
|
-
let next = $
|
|
483
|
-
if (next) $
|
|
484
|
+
let next = $a7a032acae3ddda9$var$last(walker);
|
|
485
|
+
if (next) $a7a032acae3ddda9$var$focusElement(next, true);
|
|
484
486
|
return next;
|
|
485
487
|
}
|
|
486
488
|
};
|
|
487
489
|
}
|
|
488
|
-
function $
|
|
490
|
+
function $a7a032acae3ddda9$var$last(walker) {
|
|
489
491
|
let next;
|
|
490
492
|
let last;
|
|
491
493
|
do {
|
|
@@ -496,27 +498,27 @@ function $4e07e9e0e9f6e0b8$var$last(walker) {
|
|
|
496
498
|
}
|
|
497
499
|
|
|
498
500
|
|
|
499
|
-
var $
|
|
501
|
+
var $dfd8c70b928eb1b3$exports = {};
|
|
500
502
|
|
|
501
|
-
$parcel$export($
|
|
503
|
+
$parcel$export($dfd8c70b928eb1b3$exports, "FocusRing", () => $dfd8c70b928eb1b3$export$1a38b4ad7f578e1d);
|
|
502
504
|
|
|
503
505
|
|
|
504
506
|
|
|
505
|
-
var $
|
|
507
|
+
var $581a96d6eb128c1b$exports = {};
|
|
506
508
|
|
|
507
|
-
$parcel$export($
|
|
509
|
+
$parcel$export($581a96d6eb128c1b$exports, "useFocusRing", () => $581a96d6eb128c1b$export$4e328f61c538687f);
|
|
508
510
|
|
|
509
511
|
|
|
510
512
|
|
|
511
|
-
function $
|
|
513
|
+
function $581a96d6eb128c1b$export$4e328f61c538687f(props = {
|
|
512
514
|
}) {
|
|
513
515
|
let { autoFocus: autoFocus = false , isTextInput: isTextInput , within: within } = props;
|
|
514
|
-
let state = $
|
|
516
|
+
let state = $aB6Cp$react.useRef({
|
|
515
517
|
isFocused: false,
|
|
516
|
-
isFocusVisible: autoFocus || $
|
|
518
|
+
isFocusVisible: autoFocus || $aB6Cp$reactariainteractions.isFocusVisible()
|
|
517
519
|
}).current;
|
|
518
|
-
let [isFocused1, setFocused] = $
|
|
519
|
-
let [isFocusVisibleState, setFocusVisible] = $
|
|
520
|
+
let [isFocused1, setFocused] = $aB6Cp$react.useState(false);
|
|
521
|
+
let [isFocusVisibleState, setFocusVisible] = $aB6Cp$react.useState(()=>state.isFocused && state.isFocusVisible
|
|
520
522
|
);
|
|
521
523
|
let updateState = ()=>setFocusVisible(state.isFocused && state.isFocusVisible)
|
|
522
524
|
;
|
|
@@ -525,17 +527,17 @@ function $72aa0937366f9cc2$export$4e328f61c538687f(props = {
|
|
|
525
527
|
setFocused(isFocused);
|
|
526
528
|
updateState();
|
|
527
529
|
};
|
|
528
|
-
$
|
|
530
|
+
$aB6Cp$reactariainteractions.useFocusVisibleListener((isFocusVisible)=>{
|
|
529
531
|
state.isFocusVisible = isFocusVisible;
|
|
530
532
|
updateState();
|
|
531
533
|
}, [], {
|
|
532
534
|
isTextInput: isTextInput
|
|
533
535
|
});
|
|
534
|
-
let { focusProps: focusProps } = $
|
|
536
|
+
let { focusProps: focusProps } = $aB6Cp$reactariainteractions.useFocus({
|
|
535
537
|
isDisabled: within,
|
|
536
538
|
onFocusChange: onFocusChange
|
|
537
539
|
});
|
|
538
|
-
let { focusWithinProps: focusWithinProps } = $
|
|
540
|
+
let { focusWithinProps: focusWithinProps } = $aB6Cp$reactariainteractions.useFocusWithin({
|
|
539
541
|
isDisabled: !within,
|
|
540
542
|
onFocusWithinChange: onFocusChange
|
|
541
543
|
});
|
|
@@ -547,13 +549,13 @@ function $72aa0937366f9cc2$export$4e328f61c538687f(props = {
|
|
|
547
549
|
}
|
|
548
550
|
|
|
549
551
|
|
|
550
|
-
function $
|
|
552
|
+
function $dfd8c70b928eb1b3$export$1a38b4ad7f578e1d(props) {
|
|
551
553
|
let { children: children , focusClass: focusClass , focusRingClass: focusRingClass } = props;
|
|
552
|
-
let { isFocused: isFocused , isFocusVisible: isFocusVisible , focusProps: focusProps } = $
|
|
553
|
-
let child = ($parcel$interopDefault($
|
|
554
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
554
|
+
let { isFocused: isFocused , isFocusVisible: isFocusVisible , focusProps: focusProps } = $581a96d6eb128c1b$export$4e328f61c538687f(props);
|
|
555
|
+
let child = ($parcel$interopDefault($aB6Cp$react)).Children.only(children);
|
|
556
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($aB6Cp$react)).cloneElement(child, $aB6Cp$reactariautils.mergeProps(child.props, {
|
|
555
557
|
...focusProps,
|
|
556
|
-
className: ($parcel$interopDefault($
|
|
558
|
+
className: ($parcel$interopDefault($aB6Cp$clsx))({
|
|
557
559
|
[focusClass || '']: isFocused,
|
|
558
560
|
[focusRingClass || '']: isFocusVisible
|
|
559
561
|
})
|
|
@@ -561,49 +563,49 @@ function $1b048bf2853bccb4$export$1a38b4ad7f578e1d(props) {
|
|
|
561
563
|
}
|
|
562
564
|
|
|
563
565
|
|
|
564
|
-
var $
|
|
566
|
+
var $fb504d83237fd6ac$exports = {};
|
|
565
567
|
|
|
566
|
-
$parcel$export($
|
|
567
|
-
$parcel$export($
|
|
568
|
+
$parcel$export($fb504d83237fd6ac$exports, "FocusableProvider", () => $fb504d83237fd6ac$export$13f3202a3e5ddd5);
|
|
569
|
+
$parcel$export($fb504d83237fd6ac$exports, "useFocusable", () => $fb504d83237fd6ac$export$4c014de7c8940b4c);
|
|
568
570
|
|
|
569
571
|
|
|
570
572
|
|
|
571
|
-
let $
|
|
572
|
-
function $
|
|
573
|
-
let context = $
|
|
573
|
+
let $fb504d83237fd6ac$var$FocusableContext = /*#__PURE__*/ ($parcel$interopDefault($aB6Cp$react)).createContext(null);
|
|
574
|
+
function $fb504d83237fd6ac$var$useFocusableContext(ref) {
|
|
575
|
+
let context = $aB6Cp$react.useContext($fb504d83237fd6ac$var$FocusableContext) || {
|
|
574
576
|
};
|
|
575
|
-
$
|
|
577
|
+
$aB6Cp$reactariautils.useSyncRef(context, ref);
|
|
576
578
|
// eslint-disable-next-line
|
|
577
579
|
let { ref: _ , ...otherProps } = context;
|
|
578
580
|
return otherProps;
|
|
579
581
|
}
|
|
580
582
|
/**
|
|
581
583
|
* Provides DOM props to the nearest focusable child.
|
|
582
|
-
*/ function $
|
|
584
|
+
*/ function $fb504d83237fd6ac$var$FocusableProvider(props, ref) {
|
|
583
585
|
let { children: children , ...otherProps } = props;
|
|
584
586
|
let context = {
|
|
585
587
|
...otherProps,
|
|
586
588
|
ref: ref
|
|
587
589
|
};
|
|
588
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
590
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($aB6Cp$react)).createElement($fb504d83237fd6ac$var$FocusableContext.Provider, {
|
|
589
591
|
value: context
|
|
590
592
|
}, children));
|
|
591
593
|
}
|
|
592
|
-
let $
|
|
593
|
-
function $
|
|
594
|
-
let { focusProps: focusProps } = $
|
|
595
|
-
let { keyboardProps: keyboardProps } = $
|
|
596
|
-
let interactions = $
|
|
597
|
-
let domProps = $
|
|
594
|
+
let $fb504d83237fd6ac$export$13f3202a3e5ddd5 = /*#__PURE__*/ ($parcel$interopDefault($aB6Cp$react)).forwardRef($fb504d83237fd6ac$var$FocusableProvider);
|
|
595
|
+
function $fb504d83237fd6ac$export$4c014de7c8940b4c(props, domRef) {
|
|
596
|
+
let { focusProps: focusProps } = $aB6Cp$reactariainteractions.useFocus(props);
|
|
597
|
+
let { keyboardProps: keyboardProps } = $aB6Cp$reactariainteractions.useKeyboard(props);
|
|
598
|
+
let interactions = $aB6Cp$reactariautils.mergeProps(focusProps, keyboardProps);
|
|
599
|
+
let domProps = $fb504d83237fd6ac$var$useFocusableContext(domRef);
|
|
598
600
|
let interactionProps = props.isDisabled ? {
|
|
599
601
|
} : domProps;
|
|
600
|
-
let autoFocusRef = $
|
|
601
|
-
$
|
|
602
|
+
let autoFocusRef = $aB6Cp$react.useRef(props.autoFocus);
|
|
603
|
+
$aB6Cp$react.useEffect(()=>{
|
|
602
604
|
if (autoFocusRef.current && domRef.current) domRef.current.focus();
|
|
603
605
|
autoFocusRef.current = false;
|
|
604
606
|
}, []);
|
|
605
607
|
return {
|
|
606
|
-
focusableProps: $
|
|
608
|
+
focusableProps: $aB6Cp$reactariautils.mergeProps({
|
|
607
609
|
...interactions,
|
|
608
610
|
tabIndex: props.excludeFromTabOrder && !props.isDisabled ? -1 : undefined
|
|
609
611
|
}, interactionProps)
|
|
@@ -613,11 +615,11 @@ function $be91893942c6d355$export$4c014de7c8940b4c(props, domRef) {
|
|
|
613
615
|
|
|
614
616
|
|
|
615
617
|
|
|
616
|
-
$parcel$exportWildcard(module.exports, $
|
|
617
|
-
$parcel$exportWildcard(module.exports, $
|
|
618
|
-
$parcel$exportWildcard(module.exports, $
|
|
619
|
-
$parcel$exportWildcard(module.exports, $
|
|
620
|
-
$parcel$exportWildcard(module.exports, $
|
|
618
|
+
$parcel$exportWildcard(module.exports, $a7a032acae3ddda9$exports);
|
|
619
|
+
$parcel$exportWildcard(module.exports, $dfd8c70b928eb1b3$exports);
|
|
620
|
+
$parcel$exportWildcard(module.exports, $fb504d83237fd6ac$exports);
|
|
621
|
+
$parcel$exportWildcard(module.exports, $581a96d6eb128c1b$exports);
|
|
622
|
+
$parcel$exportWildcard(module.exports, $1c7f9157d722357d$exports);
|
|
621
623
|
|
|
622
624
|
|
|
623
625
|
//# sourceMappingURL=main.js.map
|