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