@react-aria/selection 3.17.5 → 3.18.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/ListKeyboardDelegate.main.js +200 -0
- package/dist/ListKeyboardDelegate.main.js.map +1 -0
- package/dist/ListKeyboardDelegate.mjs +195 -0
- package/dist/ListKeyboardDelegate.module.js +195 -0
- package/dist/ListKeyboardDelegate.module.js.map +1 -0
- package/dist/import.mjs +5 -794
- package/dist/main.js +10 -799
- package/dist/main.js.map +1 -1
- package/dist/module.js +5 -794
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +2 -1
- package/dist/types.d.ts.map +1 -1
- package/dist/useSelectableCollection.main.js +304 -0
- package/dist/useSelectableCollection.main.js.map +1 -0
- package/dist/useSelectableCollection.mjs +299 -0
- package/dist/useSelectableCollection.module.js +299 -0
- package/dist/useSelectableCollection.module.js.map +1 -0
- package/dist/useSelectableItem.main.js +213 -0
- package/dist/useSelectableItem.main.js.map +1 -0
- package/dist/useSelectableItem.mjs +208 -0
- package/dist/useSelectableItem.module.js +208 -0
- package/dist/useSelectableItem.module.js.map +1 -0
- package/dist/useSelectableList.main.js +61 -0
- package/dist/useSelectableList.main.js.map +1 -0
- package/dist/useSelectableList.mjs +56 -0
- package/dist/useSelectableList.module.js +56 -0
- package/dist/useSelectableList.module.js.map +1 -0
- package/dist/useTypeSelect.main.js +73 -0
- package/dist/useTypeSelect.main.js.map +1 -0
- package/dist/useTypeSelect.mjs +68 -0
- package/dist/useTypeSelect.module.js +68 -0
- package/dist/useTypeSelect.module.js.map +1 -0
- package/dist/utils.main.js +32 -0
- package/dist/utils.main.js.map +1 -0
- package/dist/utils.mjs +26 -0
- package/dist/utils.module.js +26 -0
- package/dist/utils.module.js.map +1 -0
- package/package.json +8 -8
- package/src/ListKeyboardDelegate.ts +15 -7
- package/src/useSelectableCollection.ts +5 -3
- package/src/useSelectableItem.ts +4 -2
- package/src/useSelectableList.ts +7 -1
|
@@ -0,0 +1,299 @@
|
|
|
1
|
+
import {isCtrlKeyPressed as $feb5ffebff200149$export$16792effe837dba3, isNonContiguousSelectionModifier as $feb5ffebff200149$export$d3e3bd3e26688c04} from "./utils.mjs";
|
|
2
|
+
import {useTypeSelect as $fb3050f43d946246$export$e32c88dfddc6e1d8} from "./useTypeSelect.mjs";
|
|
3
|
+
import {flushSync as $3H3GQ$flushSync} from "react-dom";
|
|
4
|
+
import {useRef as $3H3GQ$useRef, useEffect as $3H3GQ$useEffect} from "react";
|
|
5
|
+
import {getFocusableTreeWalker as $3H3GQ$getFocusableTreeWalker, focusSafely as $3H3GQ$focusSafely} from "@react-aria/focus";
|
|
6
|
+
import {useRouter as $3H3GQ$useRouter, focusWithoutScrolling as $3H3GQ$focusWithoutScrolling, useEvent as $3H3GQ$useEvent, scrollIntoViewport as $3H3GQ$scrollIntoViewport, scrollIntoView as $3H3GQ$scrollIntoView, mergeProps as $3H3GQ$mergeProps} from "@react-aria/utils";
|
|
7
|
+
import {getInteractionModality as $3H3GQ$getInteractionModality} from "@react-aria/interactions";
|
|
8
|
+
import {useLocale as $3H3GQ$useLocale} from "@react-aria/i18n";
|
|
9
|
+
|
|
10
|
+
/*
|
|
11
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
12
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
13
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
14
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
15
|
+
*
|
|
16
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
17
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
18
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
19
|
+
* governing permissions and limitations under the License.
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
29
|
+
let { selectionManager: manager, keyboardDelegate: delegate, ref: ref, autoFocus: autoFocus = false, shouldFocusWrap: shouldFocusWrap = false, disallowEmptySelection: disallowEmptySelection = false, disallowSelectAll: disallowSelectAll = false, selectOnFocus: selectOnFocus = manager.selectionBehavior === 'replace', disallowTypeAhead: disallowTypeAhead = false, shouldUseVirtualFocus: shouldUseVirtualFocus, allowsTabNavigation: allowsTabNavigation = false, isVirtualized: isVirtualized, scrollRef: // If no scrollRef is provided, assume the collection ref is the scrollable region
|
|
30
|
+
scrollRef = ref, linkBehavior: linkBehavior = 'action' } = options;
|
|
31
|
+
let { direction: direction } = (0, $3H3GQ$useLocale)();
|
|
32
|
+
let router = (0, $3H3GQ$useRouter)();
|
|
33
|
+
let onKeyDown = (e)=>{
|
|
34
|
+
// Prevent option + tab from doing anything since it doesn't move focus to the cells, only buttons/checkboxes
|
|
35
|
+
if (e.altKey && e.key === 'Tab') e.preventDefault();
|
|
36
|
+
// Keyboard events bubble through portals. Don't handle keyboard events
|
|
37
|
+
// for elements outside the collection (e.g. menus).
|
|
38
|
+
if (!ref.current.contains(e.target)) return;
|
|
39
|
+
const navigateToKey = (key, childFocus)=>{
|
|
40
|
+
if (key != null) {
|
|
41
|
+
if (manager.isLink(key) && linkBehavior === 'selection' && selectOnFocus && !(0, $feb5ffebff200149$export$d3e3bd3e26688c04)(e)) {
|
|
42
|
+
// Set focused key and re-render synchronously to bring item into view if needed.
|
|
43
|
+
(0, $3H3GQ$flushSync)(()=>{
|
|
44
|
+
manager.setFocusedKey(key, childFocus);
|
|
45
|
+
});
|
|
46
|
+
let item = scrollRef.current.querySelector(`[data-key="${CSS.escape(key.toString())}"]`);
|
|
47
|
+
let itemProps = manager.getItemProps(key);
|
|
48
|
+
router.open(item, e, itemProps.href, itemProps.routerOptions);
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
manager.setFocusedKey(key, childFocus);
|
|
52
|
+
if (manager.isLink(key) && linkBehavior === 'override') return;
|
|
53
|
+
if (e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(key);
|
|
54
|
+
else if (selectOnFocus && !(0, $feb5ffebff200149$export$d3e3bd3e26688c04)(e)) manager.replaceSelection(key);
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
switch(e.key){
|
|
58
|
+
case 'ArrowDown':
|
|
59
|
+
if (delegate.getKeyBelow) {
|
|
60
|
+
var _delegate_getFirstKey, _delegate_getFirstKey1;
|
|
61
|
+
e.preventDefault();
|
|
62
|
+
let nextKey = manager.focusedKey != null ? delegate.getKeyBelow(manager.focusedKey) : (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate);
|
|
63
|
+
if (nextKey == null && shouldFocusWrap) nextKey = (_delegate_getFirstKey1 = delegate.getFirstKey) === null || _delegate_getFirstKey1 === void 0 ? void 0 : _delegate_getFirstKey1.call(delegate, manager.focusedKey);
|
|
64
|
+
navigateToKey(nextKey);
|
|
65
|
+
}
|
|
66
|
+
break;
|
|
67
|
+
case 'ArrowUp':
|
|
68
|
+
if (delegate.getKeyAbove) {
|
|
69
|
+
var _delegate_getLastKey, _delegate_getLastKey1;
|
|
70
|
+
e.preventDefault();
|
|
71
|
+
let nextKey = manager.focusedKey != null ? delegate.getKeyAbove(manager.focusedKey) : (_delegate_getLastKey = delegate.getLastKey) === null || _delegate_getLastKey === void 0 ? void 0 : _delegate_getLastKey.call(delegate);
|
|
72
|
+
if (nextKey == null && shouldFocusWrap) nextKey = (_delegate_getLastKey1 = delegate.getLastKey) === null || _delegate_getLastKey1 === void 0 ? void 0 : _delegate_getLastKey1.call(delegate, manager.focusedKey);
|
|
73
|
+
navigateToKey(nextKey);
|
|
74
|
+
}
|
|
75
|
+
break;
|
|
76
|
+
case 'ArrowLeft':
|
|
77
|
+
if (delegate.getKeyLeftOf) {
|
|
78
|
+
var _delegate_getFirstKey2, _delegate_getLastKey2;
|
|
79
|
+
e.preventDefault();
|
|
80
|
+
let nextKey = delegate.getKeyLeftOf(manager.focusedKey);
|
|
81
|
+
if (nextKey == null && shouldFocusWrap) nextKey = direction === 'rtl' ? (_delegate_getFirstKey2 = delegate.getFirstKey) === null || _delegate_getFirstKey2 === void 0 ? void 0 : _delegate_getFirstKey2.call(delegate, manager.focusedKey) : (_delegate_getLastKey2 = delegate.getLastKey) === null || _delegate_getLastKey2 === void 0 ? void 0 : _delegate_getLastKey2.call(delegate, manager.focusedKey);
|
|
82
|
+
navigateToKey(nextKey, direction === 'rtl' ? 'first' : 'last');
|
|
83
|
+
}
|
|
84
|
+
break;
|
|
85
|
+
case 'ArrowRight':
|
|
86
|
+
if (delegate.getKeyRightOf) {
|
|
87
|
+
var _delegate_getLastKey3, _delegate_getFirstKey3;
|
|
88
|
+
e.preventDefault();
|
|
89
|
+
let nextKey = delegate.getKeyRightOf(manager.focusedKey);
|
|
90
|
+
if (nextKey == null && shouldFocusWrap) nextKey = direction === 'rtl' ? (_delegate_getLastKey3 = delegate.getLastKey) === null || _delegate_getLastKey3 === void 0 ? void 0 : _delegate_getLastKey3.call(delegate, manager.focusedKey) : (_delegate_getFirstKey3 = delegate.getFirstKey) === null || _delegate_getFirstKey3 === void 0 ? void 0 : _delegate_getFirstKey3.call(delegate, manager.focusedKey);
|
|
91
|
+
navigateToKey(nextKey, direction === 'rtl' ? 'last' : 'first');
|
|
92
|
+
}
|
|
93
|
+
break;
|
|
94
|
+
case 'Home':
|
|
95
|
+
if (delegate.getFirstKey) {
|
|
96
|
+
e.preventDefault();
|
|
97
|
+
let firstKey = delegate.getFirstKey(manager.focusedKey, (0, $feb5ffebff200149$export$16792effe837dba3)(e));
|
|
98
|
+
manager.setFocusedKey(firstKey);
|
|
99
|
+
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(firstKey);
|
|
100
|
+
else if (selectOnFocus) manager.replaceSelection(firstKey);
|
|
101
|
+
}
|
|
102
|
+
break;
|
|
103
|
+
case 'End':
|
|
104
|
+
if (delegate.getLastKey) {
|
|
105
|
+
e.preventDefault();
|
|
106
|
+
let lastKey = delegate.getLastKey(manager.focusedKey, (0, $feb5ffebff200149$export$16792effe837dba3)(e));
|
|
107
|
+
manager.setFocusedKey(lastKey);
|
|
108
|
+
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(lastKey);
|
|
109
|
+
else if (selectOnFocus) manager.replaceSelection(lastKey);
|
|
110
|
+
}
|
|
111
|
+
break;
|
|
112
|
+
case 'PageDown':
|
|
113
|
+
if (delegate.getKeyPageBelow) {
|
|
114
|
+
e.preventDefault();
|
|
115
|
+
let nextKey = delegate.getKeyPageBelow(manager.focusedKey);
|
|
116
|
+
navigateToKey(nextKey);
|
|
117
|
+
}
|
|
118
|
+
break;
|
|
119
|
+
case 'PageUp':
|
|
120
|
+
if (delegate.getKeyPageAbove) {
|
|
121
|
+
e.preventDefault();
|
|
122
|
+
let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
|
|
123
|
+
navigateToKey(nextKey);
|
|
124
|
+
}
|
|
125
|
+
break;
|
|
126
|
+
case 'a':
|
|
127
|
+
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && manager.selectionMode === 'multiple' && disallowSelectAll !== true) {
|
|
128
|
+
e.preventDefault();
|
|
129
|
+
manager.selectAll();
|
|
130
|
+
}
|
|
131
|
+
break;
|
|
132
|
+
case 'Escape':
|
|
133
|
+
if (!disallowEmptySelection && manager.selectedKeys.size !== 0) {
|
|
134
|
+
e.stopPropagation();
|
|
135
|
+
e.preventDefault();
|
|
136
|
+
manager.clearSelection();
|
|
137
|
+
}
|
|
138
|
+
break;
|
|
139
|
+
case 'Tab':
|
|
140
|
+
if (!allowsTabNavigation) {
|
|
141
|
+
// There may be elements that are "tabbable" inside a collection (e.g. in a grid cell).
|
|
142
|
+
// However, collections should be treated as a single tab stop, with arrow key navigation internally.
|
|
143
|
+
// We don't control the rendering of these, so we can't override the tabIndex to prevent tabbing.
|
|
144
|
+
// Instead, we handle the Tab key, and move focus manually to the first/last tabbable element
|
|
145
|
+
// in the collection, so that the browser default behavior will apply starting from that element
|
|
146
|
+
// rather than the currently focused one.
|
|
147
|
+
if (e.shiftKey) ref.current.focus();
|
|
148
|
+
else {
|
|
149
|
+
let walker = (0, $3H3GQ$getFocusableTreeWalker)(ref.current, {
|
|
150
|
+
tabbable: true
|
|
151
|
+
});
|
|
152
|
+
let next;
|
|
153
|
+
let last;
|
|
154
|
+
do {
|
|
155
|
+
last = walker.lastChild();
|
|
156
|
+
if (last) next = last;
|
|
157
|
+
}while (last);
|
|
158
|
+
if (next && !next.contains(document.activeElement)) (0, $3H3GQ$focusWithoutScrolling)(next);
|
|
159
|
+
}
|
|
160
|
+
break;
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
};
|
|
164
|
+
// Store the scroll position so we can restore it later.
|
|
165
|
+
let scrollPos = (0, $3H3GQ$useRef)({
|
|
166
|
+
top: 0,
|
|
167
|
+
left: 0
|
|
168
|
+
});
|
|
169
|
+
(0, $3H3GQ$useEvent)(scrollRef, 'scroll', isVirtualized ? null : ()=>{
|
|
170
|
+
scrollPos.current = {
|
|
171
|
+
top: scrollRef.current.scrollTop,
|
|
172
|
+
left: scrollRef.current.scrollLeft
|
|
173
|
+
};
|
|
174
|
+
});
|
|
175
|
+
let onFocus = (e)=>{
|
|
176
|
+
if (manager.isFocused) {
|
|
177
|
+
// If a focus event bubbled through a portal, reset focus state.
|
|
178
|
+
if (!e.currentTarget.contains(e.target)) manager.setFocused(false);
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
// Focus events can bubble through portals. Ignore these events.
|
|
182
|
+
if (!e.currentTarget.contains(e.target)) return;
|
|
183
|
+
manager.setFocused(true);
|
|
184
|
+
if (manager.focusedKey == null) {
|
|
185
|
+
let navigateToFirstKey = (key)=>{
|
|
186
|
+
if (key != null) {
|
|
187
|
+
manager.setFocusedKey(key);
|
|
188
|
+
if (selectOnFocus) manager.replaceSelection(key);
|
|
189
|
+
}
|
|
190
|
+
};
|
|
191
|
+
// If the user hasn't yet interacted with the collection, there will be no focusedKey set.
|
|
192
|
+
// Attempt to detect whether the user is tabbing forward or backward into the collection
|
|
193
|
+
// and either focus the first or last item accordingly.
|
|
194
|
+
let relatedTarget = e.relatedTarget;
|
|
195
|
+
var _manager_lastSelectedKey, _manager_firstSelectedKey;
|
|
196
|
+
if (relatedTarget && e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING) navigateToFirstKey((_manager_lastSelectedKey = manager.lastSelectedKey) !== null && _manager_lastSelectedKey !== void 0 ? _manager_lastSelectedKey : delegate.getLastKey());
|
|
197
|
+
else navigateToFirstKey((_manager_firstSelectedKey = manager.firstSelectedKey) !== null && _manager_firstSelectedKey !== void 0 ? _manager_firstSelectedKey : delegate.getFirstKey());
|
|
198
|
+
} else if (!isVirtualized) {
|
|
199
|
+
// Restore the scroll position to what it was before.
|
|
200
|
+
scrollRef.current.scrollTop = scrollPos.current.top;
|
|
201
|
+
scrollRef.current.scrollLeft = scrollPos.current.left;
|
|
202
|
+
}
|
|
203
|
+
if (!isVirtualized && manager.focusedKey != null) {
|
|
204
|
+
// Refocus and scroll the focused item into view if it exists within the scrollable region.
|
|
205
|
+
let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`);
|
|
206
|
+
if (element) {
|
|
207
|
+
// This prevents a flash of focus on the first/last element in the collection, or the collection itself.
|
|
208
|
+
if (!element.contains(document.activeElement)) (0, $3H3GQ$focusWithoutScrolling)(element);
|
|
209
|
+
let modality = (0, $3H3GQ$getInteractionModality)();
|
|
210
|
+
if (modality === 'keyboard') (0, $3H3GQ$scrollIntoViewport)(element, {
|
|
211
|
+
containingElement: ref.current
|
|
212
|
+
});
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
};
|
|
216
|
+
let onBlur = (e)=>{
|
|
217
|
+
// Don't set blurred and then focused again if moving focus within the collection.
|
|
218
|
+
if (!e.currentTarget.contains(e.relatedTarget)) manager.setFocused(false);
|
|
219
|
+
};
|
|
220
|
+
const autoFocusRef = (0, $3H3GQ$useRef)(autoFocus);
|
|
221
|
+
(0, $3H3GQ$useEffect)(()=>{
|
|
222
|
+
if (autoFocusRef.current) {
|
|
223
|
+
let focusedKey = null;
|
|
224
|
+
// Check focus strategy to determine which item to focus
|
|
225
|
+
if (autoFocus === 'first') focusedKey = delegate.getFirstKey();
|
|
226
|
+
if (autoFocus === 'last') focusedKey = delegate.getLastKey();
|
|
227
|
+
// If there are any selected keys, make the first one the new focus target
|
|
228
|
+
let selectedKeys = manager.selectedKeys;
|
|
229
|
+
if (selectedKeys.size) {
|
|
230
|
+
for (let key of selectedKeys)if (manager.canSelectItem(key)) {
|
|
231
|
+
focusedKey = key;
|
|
232
|
+
break;
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
manager.setFocused(true);
|
|
236
|
+
manager.setFocusedKey(focusedKey);
|
|
237
|
+
// If no default focus key is selected, focus the collection itself.
|
|
238
|
+
if (focusedKey == null && !shouldUseVirtualFocus) (0, $3H3GQ$focusSafely)(ref.current);
|
|
239
|
+
}
|
|
240
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
241
|
+
}, []);
|
|
242
|
+
// If not virtualized, scroll the focused element into view when the focusedKey changes.
|
|
243
|
+
// When virtualized, Virtualizer handles this internally.
|
|
244
|
+
let lastFocusedKey = (0, $3H3GQ$useRef)(manager.focusedKey);
|
|
245
|
+
(0, $3H3GQ$useEffect)(()=>{
|
|
246
|
+
let modality = (0, $3H3GQ$getInteractionModality)();
|
|
247
|
+
if (manager.isFocused && manager.focusedKey != null && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
|
|
248
|
+
let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`);
|
|
249
|
+
if (element && (modality === 'keyboard' || autoFocusRef.current)) {
|
|
250
|
+
if (!isVirtualized) (0, $3H3GQ$scrollIntoView)(scrollRef.current, element);
|
|
251
|
+
// Avoid scroll in iOS VO, since it may cause overlay to close (i.e. RAC submenu)
|
|
252
|
+
if (modality !== 'virtual') (0, $3H3GQ$scrollIntoViewport)(element, {
|
|
253
|
+
containingElement: ref.current
|
|
254
|
+
});
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
// If the focused key becomes null (e.g. the last item is deleted), focus the whole collection.
|
|
258
|
+
if (manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null) (0, $3H3GQ$focusSafely)(ref.current);
|
|
259
|
+
lastFocusedKey.current = manager.focusedKey;
|
|
260
|
+
autoFocusRef.current = false;
|
|
261
|
+
}, [
|
|
262
|
+
isVirtualized,
|
|
263
|
+
scrollRef,
|
|
264
|
+
manager.focusedKey,
|
|
265
|
+
manager.isFocused,
|
|
266
|
+
ref
|
|
267
|
+
]);
|
|
268
|
+
let handlers = {
|
|
269
|
+
onKeyDown: onKeyDown,
|
|
270
|
+
onFocus: onFocus,
|
|
271
|
+
onBlur: onBlur,
|
|
272
|
+
onMouseDown (e) {
|
|
273
|
+
// Ignore events that bubbled through portals.
|
|
274
|
+
if (scrollRef.current === e.target) // Prevent focus going to the collection when clicking on the scrollbar.
|
|
275
|
+
e.preventDefault();
|
|
276
|
+
}
|
|
277
|
+
};
|
|
278
|
+
let { typeSelectProps: typeSelectProps } = (0, $fb3050f43d946246$export$e32c88dfddc6e1d8)({
|
|
279
|
+
keyboardDelegate: delegate,
|
|
280
|
+
selectionManager: manager
|
|
281
|
+
});
|
|
282
|
+
if (!disallowTypeAhead) handlers = (0, $3H3GQ$mergeProps)(typeSelectProps, handlers);
|
|
283
|
+
// If nothing is focused within the collection, make the collection itself tabbable.
|
|
284
|
+
// This will be marshalled to either the first or last item depending on where focus came from.
|
|
285
|
+
// If using virtual focus, don't set a tabIndex at all so that VoiceOver on iOS 14 doesn't try
|
|
286
|
+
// to move real DOM focus to the element anyway.
|
|
287
|
+
let tabIndex;
|
|
288
|
+
if (!shouldUseVirtualFocus) tabIndex = manager.focusedKey == null ? 0 : -1;
|
|
289
|
+
return {
|
|
290
|
+
collectionProps: {
|
|
291
|
+
...handlers,
|
|
292
|
+
tabIndex: tabIndex
|
|
293
|
+
}
|
|
294
|
+
};
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
export {$ae20dd8cbca75726$export$d6daf82dcd84e87c as useSelectableCollection};
|
|
299
|
+
//# sourceMappingURL=useSelectableCollection.module.js.map
|
|
@@ -0,0 +1,299 @@
|
|
|
1
|
+
import {isCtrlKeyPressed as $feb5ffebff200149$export$16792effe837dba3, isNonContiguousSelectionModifier as $feb5ffebff200149$export$d3e3bd3e26688c04} from "./utils.module.js";
|
|
2
|
+
import {useTypeSelect as $fb3050f43d946246$export$e32c88dfddc6e1d8} from "./useTypeSelect.module.js";
|
|
3
|
+
import {flushSync as $3H3GQ$flushSync} from "react-dom";
|
|
4
|
+
import {useRef as $3H3GQ$useRef, useEffect as $3H3GQ$useEffect} from "react";
|
|
5
|
+
import {getFocusableTreeWalker as $3H3GQ$getFocusableTreeWalker, focusSafely as $3H3GQ$focusSafely} from "@react-aria/focus";
|
|
6
|
+
import {useRouter as $3H3GQ$useRouter, focusWithoutScrolling as $3H3GQ$focusWithoutScrolling, useEvent as $3H3GQ$useEvent, scrollIntoViewport as $3H3GQ$scrollIntoViewport, scrollIntoView as $3H3GQ$scrollIntoView, mergeProps as $3H3GQ$mergeProps} from "@react-aria/utils";
|
|
7
|
+
import {getInteractionModality as $3H3GQ$getInteractionModality} from "@react-aria/interactions";
|
|
8
|
+
import {useLocale as $3H3GQ$useLocale} from "@react-aria/i18n";
|
|
9
|
+
|
|
10
|
+
/*
|
|
11
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
12
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
13
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
14
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
15
|
+
*
|
|
16
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
17
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
18
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
19
|
+
* governing permissions and limitations under the License.
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
29
|
+
let { selectionManager: manager, keyboardDelegate: delegate, ref: ref, autoFocus: autoFocus = false, shouldFocusWrap: shouldFocusWrap = false, disallowEmptySelection: disallowEmptySelection = false, disallowSelectAll: disallowSelectAll = false, selectOnFocus: selectOnFocus = manager.selectionBehavior === 'replace', disallowTypeAhead: disallowTypeAhead = false, shouldUseVirtualFocus: shouldUseVirtualFocus, allowsTabNavigation: allowsTabNavigation = false, isVirtualized: isVirtualized, scrollRef: // If no scrollRef is provided, assume the collection ref is the scrollable region
|
|
30
|
+
scrollRef = ref, linkBehavior: linkBehavior = 'action' } = options;
|
|
31
|
+
let { direction: direction } = (0, $3H3GQ$useLocale)();
|
|
32
|
+
let router = (0, $3H3GQ$useRouter)();
|
|
33
|
+
let onKeyDown = (e)=>{
|
|
34
|
+
// Prevent option + tab from doing anything since it doesn't move focus to the cells, only buttons/checkboxes
|
|
35
|
+
if (e.altKey && e.key === 'Tab') e.preventDefault();
|
|
36
|
+
// Keyboard events bubble through portals. Don't handle keyboard events
|
|
37
|
+
// for elements outside the collection (e.g. menus).
|
|
38
|
+
if (!ref.current.contains(e.target)) return;
|
|
39
|
+
const navigateToKey = (key, childFocus)=>{
|
|
40
|
+
if (key != null) {
|
|
41
|
+
if (manager.isLink(key) && linkBehavior === 'selection' && selectOnFocus && !(0, $feb5ffebff200149$export$d3e3bd3e26688c04)(e)) {
|
|
42
|
+
// Set focused key and re-render synchronously to bring item into view if needed.
|
|
43
|
+
(0, $3H3GQ$flushSync)(()=>{
|
|
44
|
+
manager.setFocusedKey(key, childFocus);
|
|
45
|
+
});
|
|
46
|
+
let item = scrollRef.current.querySelector(`[data-key="${CSS.escape(key.toString())}"]`);
|
|
47
|
+
let itemProps = manager.getItemProps(key);
|
|
48
|
+
router.open(item, e, itemProps.href, itemProps.routerOptions);
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
manager.setFocusedKey(key, childFocus);
|
|
52
|
+
if (manager.isLink(key) && linkBehavior === 'override') return;
|
|
53
|
+
if (e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(key);
|
|
54
|
+
else if (selectOnFocus && !(0, $feb5ffebff200149$export$d3e3bd3e26688c04)(e)) manager.replaceSelection(key);
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
switch(e.key){
|
|
58
|
+
case 'ArrowDown':
|
|
59
|
+
if (delegate.getKeyBelow) {
|
|
60
|
+
var _delegate_getFirstKey, _delegate_getFirstKey1;
|
|
61
|
+
e.preventDefault();
|
|
62
|
+
let nextKey = manager.focusedKey != null ? delegate.getKeyBelow(manager.focusedKey) : (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate);
|
|
63
|
+
if (nextKey == null && shouldFocusWrap) nextKey = (_delegate_getFirstKey1 = delegate.getFirstKey) === null || _delegate_getFirstKey1 === void 0 ? void 0 : _delegate_getFirstKey1.call(delegate, manager.focusedKey);
|
|
64
|
+
navigateToKey(nextKey);
|
|
65
|
+
}
|
|
66
|
+
break;
|
|
67
|
+
case 'ArrowUp':
|
|
68
|
+
if (delegate.getKeyAbove) {
|
|
69
|
+
var _delegate_getLastKey, _delegate_getLastKey1;
|
|
70
|
+
e.preventDefault();
|
|
71
|
+
let nextKey = manager.focusedKey != null ? delegate.getKeyAbove(manager.focusedKey) : (_delegate_getLastKey = delegate.getLastKey) === null || _delegate_getLastKey === void 0 ? void 0 : _delegate_getLastKey.call(delegate);
|
|
72
|
+
if (nextKey == null && shouldFocusWrap) nextKey = (_delegate_getLastKey1 = delegate.getLastKey) === null || _delegate_getLastKey1 === void 0 ? void 0 : _delegate_getLastKey1.call(delegate, manager.focusedKey);
|
|
73
|
+
navigateToKey(nextKey);
|
|
74
|
+
}
|
|
75
|
+
break;
|
|
76
|
+
case 'ArrowLeft':
|
|
77
|
+
if (delegate.getKeyLeftOf) {
|
|
78
|
+
var _delegate_getFirstKey2, _delegate_getLastKey2;
|
|
79
|
+
e.preventDefault();
|
|
80
|
+
let nextKey = delegate.getKeyLeftOf(manager.focusedKey);
|
|
81
|
+
if (nextKey == null && shouldFocusWrap) nextKey = direction === 'rtl' ? (_delegate_getFirstKey2 = delegate.getFirstKey) === null || _delegate_getFirstKey2 === void 0 ? void 0 : _delegate_getFirstKey2.call(delegate, manager.focusedKey) : (_delegate_getLastKey2 = delegate.getLastKey) === null || _delegate_getLastKey2 === void 0 ? void 0 : _delegate_getLastKey2.call(delegate, manager.focusedKey);
|
|
82
|
+
navigateToKey(nextKey, direction === 'rtl' ? 'first' : 'last');
|
|
83
|
+
}
|
|
84
|
+
break;
|
|
85
|
+
case 'ArrowRight':
|
|
86
|
+
if (delegate.getKeyRightOf) {
|
|
87
|
+
var _delegate_getLastKey3, _delegate_getFirstKey3;
|
|
88
|
+
e.preventDefault();
|
|
89
|
+
let nextKey = delegate.getKeyRightOf(manager.focusedKey);
|
|
90
|
+
if (nextKey == null && shouldFocusWrap) nextKey = direction === 'rtl' ? (_delegate_getLastKey3 = delegate.getLastKey) === null || _delegate_getLastKey3 === void 0 ? void 0 : _delegate_getLastKey3.call(delegate, manager.focusedKey) : (_delegate_getFirstKey3 = delegate.getFirstKey) === null || _delegate_getFirstKey3 === void 0 ? void 0 : _delegate_getFirstKey3.call(delegate, manager.focusedKey);
|
|
91
|
+
navigateToKey(nextKey, direction === 'rtl' ? 'last' : 'first');
|
|
92
|
+
}
|
|
93
|
+
break;
|
|
94
|
+
case 'Home':
|
|
95
|
+
if (delegate.getFirstKey) {
|
|
96
|
+
e.preventDefault();
|
|
97
|
+
let firstKey = delegate.getFirstKey(manager.focusedKey, (0, $feb5ffebff200149$export$16792effe837dba3)(e));
|
|
98
|
+
manager.setFocusedKey(firstKey);
|
|
99
|
+
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(firstKey);
|
|
100
|
+
else if (selectOnFocus) manager.replaceSelection(firstKey);
|
|
101
|
+
}
|
|
102
|
+
break;
|
|
103
|
+
case 'End':
|
|
104
|
+
if (delegate.getLastKey) {
|
|
105
|
+
e.preventDefault();
|
|
106
|
+
let lastKey = delegate.getLastKey(manager.focusedKey, (0, $feb5ffebff200149$export$16792effe837dba3)(e));
|
|
107
|
+
manager.setFocusedKey(lastKey);
|
|
108
|
+
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(lastKey);
|
|
109
|
+
else if (selectOnFocus) manager.replaceSelection(lastKey);
|
|
110
|
+
}
|
|
111
|
+
break;
|
|
112
|
+
case 'PageDown':
|
|
113
|
+
if (delegate.getKeyPageBelow) {
|
|
114
|
+
e.preventDefault();
|
|
115
|
+
let nextKey = delegate.getKeyPageBelow(manager.focusedKey);
|
|
116
|
+
navigateToKey(nextKey);
|
|
117
|
+
}
|
|
118
|
+
break;
|
|
119
|
+
case 'PageUp':
|
|
120
|
+
if (delegate.getKeyPageAbove) {
|
|
121
|
+
e.preventDefault();
|
|
122
|
+
let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
|
|
123
|
+
navigateToKey(nextKey);
|
|
124
|
+
}
|
|
125
|
+
break;
|
|
126
|
+
case 'a':
|
|
127
|
+
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && manager.selectionMode === 'multiple' && disallowSelectAll !== true) {
|
|
128
|
+
e.preventDefault();
|
|
129
|
+
manager.selectAll();
|
|
130
|
+
}
|
|
131
|
+
break;
|
|
132
|
+
case 'Escape':
|
|
133
|
+
if (!disallowEmptySelection && manager.selectedKeys.size !== 0) {
|
|
134
|
+
e.stopPropagation();
|
|
135
|
+
e.preventDefault();
|
|
136
|
+
manager.clearSelection();
|
|
137
|
+
}
|
|
138
|
+
break;
|
|
139
|
+
case 'Tab':
|
|
140
|
+
if (!allowsTabNavigation) {
|
|
141
|
+
// There may be elements that are "tabbable" inside a collection (e.g. in a grid cell).
|
|
142
|
+
// However, collections should be treated as a single tab stop, with arrow key navigation internally.
|
|
143
|
+
// We don't control the rendering of these, so we can't override the tabIndex to prevent tabbing.
|
|
144
|
+
// Instead, we handle the Tab key, and move focus manually to the first/last tabbable element
|
|
145
|
+
// in the collection, so that the browser default behavior will apply starting from that element
|
|
146
|
+
// rather than the currently focused one.
|
|
147
|
+
if (e.shiftKey) ref.current.focus();
|
|
148
|
+
else {
|
|
149
|
+
let walker = (0, $3H3GQ$getFocusableTreeWalker)(ref.current, {
|
|
150
|
+
tabbable: true
|
|
151
|
+
});
|
|
152
|
+
let next;
|
|
153
|
+
let last;
|
|
154
|
+
do {
|
|
155
|
+
last = walker.lastChild();
|
|
156
|
+
if (last) next = last;
|
|
157
|
+
}while (last);
|
|
158
|
+
if (next && !next.contains(document.activeElement)) (0, $3H3GQ$focusWithoutScrolling)(next);
|
|
159
|
+
}
|
|
160
|
+
break;
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
};
|
|
164
|
+
// Store the scroll position so we can restore it later.
|
|
165
|
+
let scrollPos = (0, $3H3GQ$useRef)({
|
|
166
|
+
top: 0,
|
|
167
|
+
left: 0
|
|
168
|
+
});
|
|
169
|
+
(0, $3H3GQ$useEvent)(scrollRef, 'scroll', isVirtualized ? null : ()=>{
|
|
170
|
+
scrollPos.current = {
|
|
171
|
+
top: scrollRef.current.scrollTop,
|
|
172
|
+
left: scrollRef.current.scrollLeft
|
|
173
|
+
};
|
|
174
|
+
});
|
|
175
|
+
let onFocus = (e)=>{
|
|
176
|
+
if (manager.isFocused) {
|
|
177
|
+
// If a focus event bubbled through a portal, reset focus state.
|
|
178
|
+
if (!e.currentTarget.contains(e.target)) manager.setFocused(false);
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
// Focus events can bubble through portals. Ignore these events.
|
|
182
|
+
if (!e.currentTarget.contains(e.target)) return;
|
|
183
|
+
manager.setFocused(true);
|
|
184
|
+
if (manager.focusedKey == null) {
|
|
185
|
+
let navigateToFirstKey = (key)=>{
|
|
186
|
+
if (key != null) {
|
|
187
|
+
manager.setFocusedKey(key);
|
|
188
|
+
if (selectOnFocus) manager.replaceSelection(key);
|
|
189
|
+
}
|
|
190
|
+
};
|
|
191
|
+
// If the user hasn't yet interacted with the collection, there will be no focusedKey set.
|
|
192
|
+
// Attempt to detect whether the user is tabbing forward or backward into the collection
|
|
193
|
+
// and either focus the first or last item accordingly.
|
|
194
|
+
let relatedTarget = e.relatedTarget;
|
|
195
|
+
var _manager_lastSelectedKey, _manager_firstSelectedKey;
|
|
196
|
+
if (relatedTarget && e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING) navigateToFirstKey((_manager_lastSelectedKey = manager.lastSelectedKey) !== null && _manager_lastSelectedKey !== void 0 ? _manager_lastSelectedKey : delegate.getLastKey());
|
|
197
|
+
else navigateToFirstKey((_manager_firstSelectedKey = manager.firstSelectedKey) !== null && _manager_firstSelectedKey !== void 0 ? _manager_firstSelectedKey : delegate.getFirstKey());
|
|
198
|
+
} else if (!isVirtualized) {
|
|
199
|
+
// Restore the scroll position to what it was before.
|
|
200
|
+
scrollRef.current.scrollTop = scrollPos.current.top;
|
|
201
|
+
scrollRef.current.scrollLeft = scrollPos.current.left;
|
|
202
|
+
}
|
|
203
|
+
if (!isVirtualized && manager.focusedKey != null) {
|
|
204
|
+
// Refocus and scroll the focused item into view if it exists within the scrollable region.
|
|
205
|
+
let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`);
|
|
206
|
+
if (element) {
|
|
207
|
+
// This prevents a flash of focus on the first/last element in the collection, or the collection itself.
|
|
208
|
+
if (!element.contains(document.activeElement)) (0, $3H3GQ$focusWithoutScrolling)(element);
|
|
209
|
+
let modality = (0, $3H3GQ$getInteractionModality)();
|
|
210
|
+
if (modality === 'keyboard') (0, $3H3GQ$scrollIntoViewport)(element, {
|
|
211
|
+
containingElement: ref.current
|
|
212
|
+
});
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
};
|
|
216
|
+
let onBlur = (e)=>{
|
|
217
|
+
// Don't set blurred and then focused again if moving focus within the collection.
|
|
218
|
+
if (!e.currentTarget.contains(e.relatedTarget)) manager.setFocused(false);
|
|
219
|
+
};
|
|
220
|
+
const autoFocusRef = (0, $3H3GQ$useRef)(autoFocus);
|
|
221
|
+
(0, $3H3GQ$useEffect)(()=>{
|
|
222
|
+
if (autoFocusRef.current) {
|
|
223
|
+
let focusedKey = null;
|
|
224
|
+
// Check focus strategy to determine which item to focus
|
|
225
|
+
if (autoFocus === 'first') focusedKey = delegate.getFirstKey();
|
|
226
|
+
if (autoFocus === 'last') focusedKey = delegate.getLastKey();
|
|
227
|
+
// If there are any selected keys, make the first one the new focus target
|
|
228
|
+
let selectedKeys = manager.selectedKeys;
|
|
229
|
+
if (selectedKeys.size) {
|
|
230
|
+
for (let key of selectedKeys)if (manager.canSelectItem(key)) {
|
|
231
|
+
focusedKey = key;
|
|
232
|
+
break;
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
manager.setFocused(true);
|
|
236
|
+
manager.setFocusedKey(focusedKey);
|
|
237
|
+
// If no default focus key is selected, focus the collection itself.
|
|
238
|
+
if (focusedKey == null && !shouldUseVirtualFocus) (0, $3H3GQ$focusSafely)(ref.current);
|
|
239
|
+
}
|
|
240
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
241
|
+
}, []);
|
|
242
|
+
// If not virtualized, scroll the focused element into view when the focusedKey changes.
|
|
243
|
+
// When virtualized, Virtualizer handles this internally.
|
|
244
|
+
let lastFocusedKey = (0, $3H3GQ$useRef)(manager.focusedKey);
|
|
245
|
+
(0, $3H3GQ$useEffect)(()=>{
|
|
246
|
+
let modality = (0, $3H3GQ$getInteractionModality)();
|
|
247
|
+
if (manager.isFocused && manager.focusedKey != null && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
|
|
248
|
+
let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`);
|
|
249
|
+
if (element && (modality === 'keyboard' || autoFocusRef.current)) {
|
|
250
|
+
if (!isVirtualized) (0, $3H3GQ$scrollIntoView)(scrollRef.current, element);
|
|
251
|
+
// Avoid scroll in iOS VO, since it may cause overlay to close (i.e. RAC submenu)
|
|
252
|
+
if (modality !== 'virtual') (0, $3H3GQ$scrollIntoViewport)(element, {
|
|
253
|
+
containingElement: ref.current
|
|
254
|
+
});
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
// If the focused key becomes null (e.g. the last item is deleted), focus the whole collection.
|
|
258
|
+
if (manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null) (0, $3H3GQ$focusSafely)(ref.current);
|
|
259
|
+
lastFocusedKey.current = manager.focusedKey;
|
|
260
|
+
autoFocusRef.current = false;
|
|
261
|
+
}, [
|
|
262
|
+
isVirtualized,
|
|
263
|
+
scrollRef,
|
|
264
|
+
manager.focusedKey,
|
|
265
|
+
manager.isFocused,
|
|
266
|
+
ref
|
|
267
|
+
]);
|
|
268
|
+
let handlers = {
|
|
269
|
+
onKeyDown: onKeyDown,
|
|
270
|
+
onFocus: onFocus,
|
|
271
|
+
onBlur: onBlur,
|
|
272
|
+
onMouseDown (e) {
|
|
273
|
+
// Ignore events that bubbled through portals.
|
|
274
|
+
if (scrollRef.current === e.target) // Prevent focus going to the collection when clicking on the scrollbar.
|
|
275
|
+
e.preventDefault();
|
|
276
|
+
}
|
|
277
|
+
};
|
|
278
|
+
let { typeSelectProps: typeSelectProps } = (0, $fb3050f43d946246$export$e32c88dfddc6e1d8)({
|
|
279
|
+
keyboardDelegate: delegate,
|
|
280
|
+
selectionManager: manager
|
|
281
|
+
});
|
|
282
|
+
if (!disallowTypeAhead) handlers = (0, $3H3GQ$mergeProps)(typeSelectProps, handlers);
|
|
283
|
+
// If nothing is focused within the collection, make the collection itself tabbable.
|
|
284
|
+
// This will be marshalled to either the first or last item depending on where focus came from.
|
|
285
|
+
// If using virtual focus, don't set a tabIndex at all so that VoiceOver on iOS 14 doesn't try
|
|
286
|
+
// to move real DOM focus to the element anyway.
|
|
287
|
+
let tabIndex;
|
|
288
|
+
if (!shouldUseVirtualFocus) tabIndex = manager.focusedKey == null ? 0 : -1;
|
|
289
|
+
return {
|
|
290
|
+
collectionProps: {
|
|
291
|
+
...handlers,
|
|
292
|
+
tabIndex: tabIndex
|
|
293
|
+
}
|
|
294
|
+
};
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
export {$ae20dd8cbca75726$export$d6daf82dcd84e87c as useSelectableCollection};
|
|
299
|
+
//# sourceMappingURL=useSelectableCollection.module.js.map
|