@react-aria/selection 3.12.0 → 3.13.0
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/import.mjs +670 -0
- package/dist/main.js +189 -119
- package/dist/main.js.map +1 -1
- package/dist/module.js +190 -120
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +15 -10
- package/src/useSelectableCollection.ts +3 -2
package/dist/main.js
CHANGED
|
@@ -13,31 +13,71 @@ $parcel$export(module.exports, "useSelectableItem", () => $433b1145b0781e10$expo
|
|
|
13
13
|
$parcel$export(module.exports, "useSelectableList", () => $bd230acee196f50c$export$b95089534ab7c1fd);
|
|
14
14
|
$parcel$export(module.exports, "ListKeyboardDelegate", () => $836f880b12dcae5c$export$a05409b8bb224a5a);
|
|
15
15
|
$parcel$export(module.exports, "useTypeSelect", () => $a1189052f36475e8$export$e32c88dfddc6e1d8);
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
/*
|
|
17
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
18
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
19
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
20
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
21
|
+
*
|
|
22
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
23
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
24
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
25
|
+
* governing permissions and limitations under the License.
|
|
26
|
+
*/ /*
|
|
27
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
28
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
29
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
30
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
31
|
+
*
|
|
32
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
33
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
34
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
35
|
+
* governing permissions and limitations under the License.
|
|
36
|
+
*/
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
/*
|
|
40
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
41
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
42
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
43
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
44
|
+
*
|
|
45
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
46
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
47
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
48
|
+
* governing permissions and limitations under the License.
|
|
49
|
+
*/
|
|
20
50
|
|
|
21
51
|
function $ee0bdf4faa47f2a8$export$d3e3bd3e26688c04(e) {
|
|
22
52
|
// Ctrl + Arrow Up/Arrow Down has a system wide meaning on macOS, so use Alt instead.
|
|
23
53
|
// On Windows and Ubuntu, Alt + Space has a system wide meaning.
|
|
24
|
-
return $glPPV$reactariautils.isAppleDevice() ? e.altKey : e.ctrlKey;
|
|
54
|
+
return (0, $glPPV$reactariautils.isAppleDevice)() ? e.altKey : e.ctrlKey;
|
|
25
55
|
}
|
|
26
56
|
function $ee0bdf4faa47f2a8$export$16792effe837dba3(e) {
|
|
27
|
-
if ($glPPV$reactariautils.isMac()) return e.metaKey;
|
|
57
|
+
if ((0, $glPPV$reactariautils.isMac)()) return e.metaKey;
|
|
28
58
|
return e.ctrlKey;
|
|
29
59
|
}
|
|
30
60
|
|
|
31
61
|
|
|
32
62
|
|
|
33
|
-
|
|
63
|
+
/*
|
|
64
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
65
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
66
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
67
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
68
|
+
*
|
|
69
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
70
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
71
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
72
|
+
* governing permissions and limitations under the License.
|
|
73
|
+
*/
|
|
34
74
|
/**
|
|
35
75
|
* Controls how long to wait before clearing the typeahead buffer.
|
|
36
76
|
*/ const $a1189052f36475e8$var$TYPEAHEAD_DEBOUNCE_WAIT_MS = 1000; // 1 second
|
|
37
77
|
function $a1189052f36475e8$export$e32c88dfddc6e1d8(options) {
|
|
38
78
|
let { keyboardDelegate: keyboardDelegate , selectionManager: selectionManager , onTypeSelect: onTypeSelect } = options;
|
|
39
|
-
let state = $glPPV$react.useRef({
|
|
40
|
-
search:
|
|
79
|
+
let state = (0, $glPPV$react.useRef)({
|
|
80
|
+
search: "",
|
|
41
81
|
timeout: null
|
|
42
82
|
}).current;
|
|
43
83
|
let onKeyDown = (e)=>{
|
|
@@ -47,9 +87,9 @@ function $a1189052f36475e8$export$e32c88dfddc6e1d8(options) {
|
|
|
47
87
|
// When we time out, the search term becomes empty, hence the check on length.
|
|
48
88
|
// Trimming is to account for the case of pressing the Spacebar more than once,
|
|
49
89
|
// which should cycle through the selection/deselection of the focused item.
|
|
50
|
-
if (character ===
|
|
90
|
+
if (character === " " && state.search.trim().length > 0) {
|
|
51
91
|
e.preventDefault();
|
|
52
|
-
if (!(
|
|
92
|
+
if (!("continuePropagation" in e)) e.stopPropagation();
|
|
53
93
|
}
|
|
54
94
|
state.search += character;
|
|
55
95
|
// Use the delegate to find a key to focus.
|
|
@@ -63,7 +103,7 @@ function $a1189052f36475e8$export$e32c88dfddc6e1d8(options) {
|
|
|
63
103
|
}
|
|
64
104
|
clearTimeout(state.timeout);
|
|
65
105
|
state.timeout = setTimeout(()=>{
|
|
66
|
-
state.search =
|
|
106
|
+
state.search = "";
|
|
67
107
|
}, $a1189052f36475e8$var$TYPEAHEAD_DEBOUNCE_WAIT_MS);
|
|
68
108
|
};
|
|
69
109
|
return {
|
|
@@ -80,103 +120,103 @@ function $a1189052f36475e8$var$getStringForKey(key) {
|
|
|
80
120
|
// it is a Unicode character.
|
|
81
121
|
// See https://www.w3.org/TR/uievents-key/
|
|
82
122
|
if (key.length === 1 || !/^[A-Z]/i.test(key)) return key;
|
|
83
|
-
return
|
|
123
|
+
return "";
|
|
84
124
|
}
|
|
85
125
|
|
|
86
126
|
|
|
87
127
|
function $b6837c2f80a3c32f$export$d6daf82dcd84e87c(options) {
|
|
88
|
-
let { selectionManager: manager , keyboardDelegate: delegate , ref: ref , autoFocus: autoFocus = false , shouldFocusWrap: shouldFocusWrap = false , disallowEmptySelection: disallowEmptySelection = false , disallowSelectAll: disallowSelectAll = false , selectOnFocus: selectOnFocus = manager.selectionBehavior ===
|
|
128
|
+
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
|
|
89
129
|
scrollRef = ref } = options;
|
|
90
|
-
let { direction: direction } = $glPPV$reactariai18n.useLocale();
|
|
130
|
+
let { direction: direction } = (0, $glPPV$reactariai18n.useLocale)();
|
|
91
131
|
let onKeyDown = (e)=>{
|
|
92
132
|
// Prevent option + tab from doing anything since it doesn't move focus to the cells, only buttons/checkboxes
|
|
93
|
-
if (e.altKey && e.key ===
|
|
133
|
+
if (e.altKey && e.key === "Tab") e.preventDefault();
|
|
94
134
|
// Keyboard events bubble through portals. Don't handle keyboard events
|
|
95
135
|
// for elements outside the collection (e.g. menus).
|
|
96
136
|
if (!ref.current.contains(e.target)) return;
|
|
97
137
|
const navigateToKey = (key, childFocus)=>{
|
|
98
138
|
if (key != null) {
|
|
99
139
|
manager.setFocusedKey(key, childFocus);
|
|
100
|
-
if (e.shiftKey && manager.selectionMode ===
|
|
101
|
-
else if (selectOnFocus &&
|
|
140
|
+
if (e.shiftKey && manager.selectionMode === "multiple") manager.extendSelection(key);
|
|
141
|
+
else if (selectOnFocus && !(0, $ee0bdf4faa47f2a8$export$d3e3bd3e26688c04)(e)) manager.replaceSelection(key);
|
|
102
142
|
}
|
|
103
143
|
};
|
|
104
144
|
switch(e.key){
|
|
105
|
-
case
|
|
145
|
+
case "ArrowDown":
|
|
106
146
|
if (delegate.getKeyBelow) {
|
|
107
|
-
var
|
|
147
|
+
var _delegate_getFirstKey, _delegate_getFirstKey1;
|
|
108
148
|
e.preventDefault();
|
|
109
|
-
let nextKey = manager.focusedKey != null ? delegate.getKeyBelow(manager.focusedKey) : (
|
|
110
|
-
if (nextKey == null && shouldFocusWrap) nextKey = (
|
|
149
|
+
let nextKey = manager.focusedKey != null ? delegate.getKeyBelow(manager.focusedKey) : (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate);
|
|
150
|
+
if (nextKey == null && shouldFocusWrap) nextKey = (_delegate_getFirstKey1 = delegate.getFirstKey) === null || _delegate_getFirstKey1 === void 0 ? void 0 : _delegate_getFirstKey1.call(delegate, manager.focusedKey);
|
|
111
151
|
navigateToKey(nextKey);
|
|
112
152
|
}
|
|
113
153
|
break;
|
|
114
|
-
case
|
|
154
|
+
case "ArrowUp":
|
|
115
155
|
if (delegate.getKeyAbove) {
|
|
116
|
-
var
|
|
156
|
+
var _delegate_getLastKey, _delegate_getLastKey1;
|
|
117
157
|
e.preventDefault();
|
|
118
|
-
let
|
|
119
|
-
if (
|
|
120
|
-
navigateToKey(
|
|
158
|
+
let nextKey1 = manager.focusedKey != null ? delegate.getKeyAbove(manager.focusedKey) : (_delegate_getLastKey = delegate.getLastKey) === null || _delegate_getLastKey === void 0 ? void 0 : _delegate_getLastKey.call(delegate);
|
|
159
|
+
if (nextKey1 == null && shouldFocusWrap) nextKey1 = (_delegate_getLastKey1 = delegate.getLastKey) === null || _delegate_getLastKey1 === void 0 ? void 0 : _delegate_getLastKey1.call(delegate, manager.focusedKey);
|
|
160
|
+
navigateToKey(nextKey1);
|
|
121
161
|
}
|
|
122
162
|
break;
|
|
123
|
-
case
|
|
163
|
+
case "ArrowLeft":
|
|
124
164
|
if (delegate.getKeyLeftOf) {
|
|
125
165
|
e.preventDefault();
|
|
126
|
-
let
|
|
127
|
-
navigateToKey(
|
|
166
|
+
let nextKey2 = delegate.getKeyLeftOf(manager.focusedKey);
|
|
167
|
+
navigateToKey(nextKey2, direction === "rtl" ? "first" : "last");
|
|
128
168
|
}
|
|
129
169
|
break;
|
|
130
|
-
case
|
|
170
|
+
case "ArrowRight":
|
|
131
171
|
if (delegate.getKeyRightOf) {
|
|
132
172
|
e.preventDefault();
|
|
133
|
-
let
|
|
134
|
-
navigateToKey(
|
|
173
|
+
let nextKey3 = delegate.getKeyRightOf(manager.focusedKey);
|
|
174
|
+
navigateToKey(nextKey3, direction === "rtl" ? "last" : "first");
|
|
135
175
|
}
|
|
136
176
|
break;
|
|
137
|
-
case
|
|
177
|
+
case "Home":
|
|
138
178
|
if (delegate.getFirstKey) {
|
|
139
179
|
e.preventDefault();
|
|
140
|
-
let firstKey = delegate.getFirstKey(manager.focusedKey, $ee0bdf4faa47f2a8$export$16792effe837dba3(e));
|
|
180
|
+
let firstKey = delegate.getFirstKey(manager.focusedKey, (0, $ee0bdf4faa47f2a8$export$16792effe837dba3)(e));
|
|
141
181
|
manager.setFocusedKey(firstKey);
|
|
142
|
-
if ($ee0bdf4faa47f2a8$export$16792effe837dba3(e) && e.shiftKey && manager.selectionMode ===
|
|
182
|
+
if ((0, $ee0bdf4faa47f2a8$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === "multiple") manager.extendSelection(firstKey);
|
|
143
183
|
else if (selectOnFocus) manager.replaceSelection(firstKey);
|
|
144
184
|
}
|
|
145
185
|
break;
|
|
146
|
-
case
|
|
186
|
+
case "End":
|
|
147
187
|
if (delegate.getLastKey) {
|
|
148
188
|
e.preventDefault();
|
|
149
|
-
let lastKey = delegate.getLastKey(manager.focusedKey, $ee0bdf4faa47f2a8$export$16792effe837dba3(e));
|
|
189
|
+
let lastKey = delegate.getLastKey(manager.focusedKey, (0, $ee0bdf4faa47f2a8$export$16792effe837dba3)(e));
|
|
150
190
|
manager.setFocusedKey(lastKey);
|
|
151
|
-
if ($ee0bdf4faa47f2a8$export$16792effe837dba3(e) && e.shiftKey && manager.selectionMode ===
|
|
191
|
+
if ((0, $ee0bdf4faa47f2a8$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === "multiple") manager.extendSelection(lastKey);
|
|
152
192
|
else if (selectOnFocus) manager.replaceSelection(lastKey);
|
|
153
193
|
}
|
|
154
194
|
break;
|
|
155
|
-
case
|
|
195
|
+
case "PageDown":
|
|
156
196
|
if (delegate.getKeyPageBelow) {
|
|
157
197
|
e.preventDefault();
|
|
158
|
-
let
|
|
159
|
-
navigateToKey(
|
|
198
|
+
let nextKey4 = delegate.getKeyPageBelow(manager.focusedKey);
|
|
199
|
+
navigateToKey(nextKey4);
|
|
160
200
|
}
|
|
161
201
|
break;
|
|
162
|
-
case
|
|
202
|
+
case "PageUp":
|
|
163
203
|
if (delegate.getKeyPageAbove) {
|
|
164
204
|
e.preventDefault();
|
|
165
|
-
let
|
|
166
|
-
navigateToKey(
|
|
205
|
+
let nextKey5 = delegate.getKeyPageAbove(manager.focusedKey);
|
|
206
|
+
navigateToKey(nextKey5);
|
|
167
207
|
}
|
|
168
208
|
break;
|
|
169
|
-
case
|
|
170
|
-
if ($ee0bdf4faa47f2a8$export$16792effe837dba3(e) && manager.selectionMode ===
|
|
209
|
+
case "a":
|
|
210
|
+
if ((0, $ee0bdf4faa47f2a8$export$16792effe837dba3)(e) && manager.selectionMode === "multiple" && disallowSelectAll !== true) {
|
|
171
211
|
e.preventDefault();
|
|
172
212
|
manager.selectAll();
|
|
173
213
|
}
|
|
174
214
|
break;
|
|
175
|
-
case
|
|
215
|
+
case "Escape":
|
|
176
216
|
e.preventDefault();
|
|
177
217
|
if (!disallowEmptySelection) manager.clearSelection();
|
|
178
218
|
break;
|
|
179
|
-
case
|
|
219
|
+
case "Tab":
|
|
180
220
|
if (!allowsTabNavigation) {
|
|
181
221
|
// There may be elements that are "tabbable" inside a collection (e.g. in a grid cell).
|
|
182
222
|
// However, collections should be treated as a single tab stop, with arrow key navigation internally.
|
|
@@ -186,7 +226,7 @@ function $b6837c2f80a3c32f$export$d6daf82dcd84e87c(options) {
|
|
|
186
226
|
// rather than the currently focused one.
|
|
187
227
|
if (e.shiftKey) ref.current.focus();
|
|
188
228
|
else {
|
|
189
|
-
let walker = $glPPV$reactariafocus.getFocusableTreeWalker(ref.current, {
|
|
229
|
+
let walker = (0, $glPPV$reactariafocus.getFocusableTreeWalker)(ref.current, {
|
|
190
230
|
tabbable: true
|
|
191
231
|
});
|
|
192
232
|
let next;
|
|
@@ -194,19 +234,19 @@ function $b6837c2f80a3c32f$export$d6daf82dcd84e87c(options) {
|
|
|
194
234
|
do {
|
|
195
235
|
last = walker.lastChild();
|
|
196
236
|
if (last) next = last;
|
|
197
|
-
}while (last)
|
|
198
|
-
if (next && !next.contains(document.activeElement)) $glPPV$reactariautils.focusWithoutScrolling(next);
|
|
237
|
+
}while (last);
|
|
238
|
+
if (next && !next.contains(document.activeElement)) (0, $glPPV$reactariautils.focusWithoutScrolling)(next);
|
|
199
239
|
}
|
|
200
240
|
break;
|
|
201
241
|
}
|
|
202
242
|
}
|
|
203
243
|
};
|
|
204
244
|
// Store the scroll position so we can restore it later.
|
|
205
|
-
let scrollPos = $glPPV$react.useRef({
|
|
245
|
+
let scrollPos = (0, $glPPV$react.useRef)({
|
|
206
246
|
top: 0,
|
|
207
247
|
left: 0
|
|
208
248
|
});
|
|
209
|
-
$glPPV$reactariautils.useEvent(scrollRef,
|
|
249
|
+
(0, $glPPV$reactariautils.useEvent)(scrollRef, "scroll", isVirtualized ? null : ()=>{
|
|
210
250
|
scrollPos.current = {
|
|
211
251
|
top: scrollRef.current.scrollTop,
|
|
212
252
|
left: scrollRef.current.scrollLeft
|
|
@@ -232,9 +272,9 @@ function $b6837c2f80a3c32f$export$d6daf82dcd84e87c(options) {
|
|
|
232
272
|
// Attempt to detect whether the user is tabbing forward or backward into the collection
|
|
233
273
|
// and either focus the first or last item accordingly.
|
|
234
274
|
let relatedTarget = e.relatedTarget;
|
|
235
|
-
var
|
|
236
|
-
if (relatedTarget && e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING) navigateToFirstKey((
|
|
237
|
-
else navigateToFirstKey((
|
|
275
|
+
var _manager_lastSelectedKey, _manager_firstSelectedKey;
|
|
276
|
+
if (relatedTarget && e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING) navigateToFirstKey((_manager_lastSelectedKey = manager.lastSelectedKey) !== null && _manager_lastSelectedKey !== void 0 ? _manager_lastSelectedKey : delegate.getLastKey());
|
|
277
|
+
else navigateToFirstKey((_manager_firstSelectedKey = manager.firstSelectedKey) !== null && _manager_firstSelectedKey !== void 0 ? _manager_firstSelectedKey : delegate.getFirstKey());
|
|
238
278
|
} else if (!isVirtualized) {
|
|
239
279
|
// Restore the scroll position to what it was before.
|
|
240
280
|
scrollRef.current.scrollTop = scrollPos.current.top;
|
|
@@ -243,8 +283,8 @@ function $b6837c2f80a3c32f$export$d6daf82dcd84e87c(options) {
|
|
|
243
283
|
let element = scrollRef.current.querySelector(`[data-key="${manager.focusedKey}"]`);
|
|
244
284
|
if (element) {
|
|
245
285
|
// This prevents a flash of focus on the first/last element in the collection
|
|
246
|
-
$glPPV$reactariautils.focusWithoutScrolling(element);
|
|
247
|
-
$glPPV$reactariautils.scrollIntoView(scrollRef.current, element);
|
|
286
|
+
(0, $glPPV$reactariautils.focusWithoutScrolling)(element);
|
|
287
|
+
(0, $glPPV$reactariautils.scrollIntoView)(scrollRef.current, element);
|
|
248
288
|
}
|
|
249
289
|
}
|
|
250
290
|
};
|
|
@@ -252,35 +292,41 @@ function $b6837c2f80a3c32f$export$d6daf82dcd84e87c(options) {
|
|
|
252
292
|
// Don't set blurred and then focused again if moving focus within the collection.
|
|
253
293
|
if (!e.currentTarget.contains(e.relatedTarget)) manager.setFocused(false);
|
|
254
294
|
};
|
|
255
|
-
const autoFocusRef = $glPPV$react.useRef(autoFocus);
|
|
256
|
-
$glPPV$react.useEffect(()=>{
|
|
295
|
+
const autoFocusRef = (0, $glPPV$react.useRef)(autoFocus);
|
|
296
|
+
(0, $glPPV$react.useEffect)(()=>{
|
|
257
297
|
if (autoFocusRef.current) {
|
|
258
298
|
let focusedKey = null;
|
|
259
299
|
// Check focus strategy to determine which item to focus
|
|
260
|
-
if (autoFocus ===
|
|
261
|
-
if (autoFocus ===
|
|
300
|
+
if (autoFocus === "first") focusedKey = delegate.getFirstKey();
|
|
301
|
+
if (autoFocus === "last") focusedKey = delegate.getLastKey();
|
|
262
302
|
// If there are any selected keys, make the first one the new focus target
|
|
263
303
|
let selectedKeys = manager.selectedKeys;
|
|
264
304
|
if (selectedKeys.size) focusedKey = selectedKeys.values().next().value;
|
|
265
305
|
manager.setFocused(true);
|
|
266
306
|
manager.setFocusedKey(focusedKey);
|
|
267
307
|
// If no default focus key is selected, focus the collection itself.
|
|
268
|
-
if (focusedKey == null && !shouldUseVirtualFocus) $glPPV$reactariafocus.focusSafely(ref.current);
|
|
308
|
+
if (focusedKey == null && !shouldUseVirtualFocus) (0, $glPPV$reactariafocus.focusSafely)(ref.current);
|
|
269
309
|
}
|
|
270
310
|
autoFocusRef.current = false;
|
|
271
311
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
272
312
|
}, []);
|
|
273
313
|
// If not virtualized, scroll the focused element into view when the focusedKey changes.
|
|
274
314
|
// When virtualized, Virtualizer handles this internally.
|
|
275
|
-
$glPPV$react.useEffect(()=>{
|
|
315
|
+
(0, $glPPV$react.useEffect)(()=>{
|
|
276
316
|
if (!isVirtualized && manager.focusedKey && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
|
|
277
317
|
let element = scrollRef.current.querySelector(`[data-key="${manager.focusedKey}"]`);
|
|
278
|
-
if (element)
|
|
318
|
+
if (element) {
|
|
319
|
+
(0, $glPPV$reactariautils.scrollIntoView)(scrollRef.current, element);
|
|
320
|
+
(0, $glPPV$reactariautils.scrollIntoViewport)(element, {
|
|
321
|
+
containingElement: ref.current
|
|
322
|
+
});
|
|
323
|
+
}
|
|
279
324
|
}
|
|
280
325
|
}, [
|
|
281
326
|
isVirtualized,
|
|
282
327
|
scrollRef,
|
|
283
|
-
manager.focusedKey
|
|
328
|
+
manager.focusedKey,
|
|
329
|
+
ref
|
|
284
330
|
]);
|
|
285
331
|
let handlers = {
|
|
286
332
|
onKeyDown: onKeyDown,
|
|
@@ -292,11 +338,11 @@ function $b6837c2f80a3c32f$export$d6daf82dcd84e87c(options) {
|
|
|
292
338
|
e.preventDefault();
|
|
293
339
|
}
|
|
294
340
|
};
|
|
295
|
-
let { typeSelectProps: typeSelectProps } = $a1189052f36475e8$export$e32c88dfddc6e1d8({
|
|
341
|
+
let { typeSelectProps: typeSelectProps } = (0, $a1189052f36475e8$export$e32c88dfddc6e1d8)({
|
|
296
342
|
keyboardDelegate: delegate,
|
|
297
343
|
selectionManager: manager
|
|
298
344
|
});
|
|
299
|
-
if (!disallowTypeAhead) handlers = $glPPV$reactariautils.mergeProps(typeSelectProps, handlers);
|
|
345
|
+
if (!disallowTypeAhead) handlers = (0, $glPPV$reactariautils.mergeProps)(typeSelectProps, handlers);
|
|
300
346
|
// If nothing is focused within the collection, make the collection itself tabbable.
|
|
301
347
|
// This will be marshalled to either the first or last item depending on where focus came from.
|
|
302
348
|
// If using virtual focus, don't set a tabIndex at all so that VoiceOver on iOS 14 doesn't try
|
|
@@ -312,7 +358,17 @@ function $b6837c2f80a3c32f$export$d6daf82dcd84e87c(options) {
|
|
|
312
358
|
}
|
|
313
359
|
|
|
314
360
|
|
|
315
|
-
|
|
361
|
+
/*
|
|
362
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
363
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
364
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
365
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
366
|
+
*
|
|
367
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
368
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
369
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
370
|
+
* governing permissions and limitations under the License.
|
|
371
|
+
*/
|
|
316
372
|
|
|
317
373
|
|
|
318
374
|
|
|
@@ -320,24 +376,24 @@ function $b6837c2f80a3c32f$export$d6daf82dcd84e87c(options) {
|
|
|
320
376
|
function $433b1145b0781e10$export$ecf600387e221c37(options) {
|
|
321
377
|
let { selectionManager: manager , key: key , ref: ref , shouldSelectOnPressUp: shouldSelectOnPressUp , isVirtualized: isVirtualized , shouldUseVirtualFocus: shouldUseVirtualFocus , focus: focus , isDisabled: isDisabled , onAction: onAction , allowsDifferentPressOrigin: allowsDifferentPressOrigin } = options;
|
|
322
378
|
let onSelect = (e)=>{
|
|
323
|
-
if (e.pointerType ===
|
|
379
|
+
if (e.pointerType === "keyboard" && (0, $ee0bdf4faa47f2a8$export$d3e3bd3e26688c04)(e)) manager.toggleSelection(key);
|
|
324
380
|
else {
|
|
325
|
-
if (manager.selectionMode ===
|
|
326
|
-
if (manager.selectionMode ===
|
|
381
|
+
if (manager.selectionMode === "none") return;
|
|
382
|
+
if (manager.selectionMode === "single") {
|
|
327
383
|
if (manager.isSelected(key) && !manager.disallowEmptySelection) manager.toggleSelection(key);
|
|
328
384
|
else manager.replaceSelection(key);
|
|
329
385
|
} else if (e && e.shiftKey) manager.extendSelection(key);
|
|
330
|
-
else if (manager.selectionBehavior ===
|
|
386
|
+
else if (manager.selectionBehavior === "toggle" || e && ((0, $ee0bdf4faa47f2a8$export$16792effe837dba3)(e) || e.pointerType === "touch" || e.pointerType === "virtual")) // if touch or virtual (VO) then we just want to toggle, otherwise it's impossible to multi select because they don't have modifier keys
|
|
331
387
|
manager.toggleSelection(key);
|
|
332
388
|
else manager.replaceSelection(key);
|
|
333
389
|
}
|
|
334
390
|
};
|
|
335
391
|
// Focus the associated DOM node when this item becomes the focusedKey
|
|
336
|
-
$glPPV$react.useEffect(()=>{
|
|
392
|
+
(0, $glPPV$react.useEffect)(()=>{
|
|
337
393
|
let isFocused = key === manager.focusedKey;
|
|
338
394
|
if (isFocused && manager.isFocused && !shouldUseVirtualFocus && document.activeElement !== ref.current) {
|
|
339
395
|
if (focus) focus();
|
|
340
|
-
else $glPPV$reactariafocus.focusSafely(ref.current);
|
|
396
|
+
else (0, $glPPV$reactariafocus.focusSafely)(ref.current);
|
|
341
397
|
}
|
|
342
398
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
343
399
|
}, [
|
|
@@ -352,8 +408,7 @@ function $433b1145b0781e10$export$ecf600387e221c37(options) {
|
|
|
352
408
|
// Set tabIndex to 0 if the element is focused, or -1 otherwise so that only the last focused
|
|
353
409
|
// item is tabbable. If using virtual focus, don't set a tabIndex at all so that VoiceOver
|
|
354
410
|
// on iOS 14 doesn't try to move real DOM focus to the item anyway.
|
|
355
|
-
let itemProps = {
|
|
356
|
-
};
|
|
411
|
+
let itemProps = {};
|
|
357
412
|
if (!shouldUseVirtualFocus && !isDisabled) itemProps = {
|
|
358
413
|
tabIndex: key === manager.focusedKey ? 0 : -1,
|
|
359
414
|
onFocus (e) {
|
|
@@ -370,13 +425,13 @@ function $433b1145b0781e10$export$ecf600387e221c37(options) {
|
|
|
370
425
|
// With touch, onAction occurs on single tap, and long press enters selection mode.
|
|
371
426
|
let allowsSelection = !isDisabled && manager.canSelectItem(key);
|
|
372
427
|
let allowsActions = onAction && !isDisabled;
|
|
373
|
-
let hasPrimaryAction = allowsActions && (manager.selectionBehavior ===
|
|
374
|
-
let hasSecondaryAction = allowsActions && allowsSelection && manager.selectionBehavior ===
|
|
428
|
+
let hasPrimaryAction = allowsActions && (manager.selectionBehavior === "replace" ? !allowsSelection : manager.isEmpty);
|
|
429
|
+
let hasSecondaryAction = allowsActions && allowsSelection && manager.selectionBehavior === "replace";
|
|
375
430
|
let hasAction = hasPrimaryAction || hasSecondaryAction;
|
|
376
|
-
let modality = $glPPV$react.useRef(null);
|
|
431
|
+
let modality = (0, $glPPV$react.useRef)(null);
|
|
377
432
|
let longPressEnabled = hasAction && allowsSelection;
|
|
378
|
-
let longPressEnabledOnPressStart = $glPPV$react.useRef(false);
|
|
379
|
-
let hadPrimaryActionOnPressStart = $glPPV$react.useRef(false);
|
|
433
|
+
let longPressEnabledOnPressStart = (0, $glPPV$react.useRef)(false);
|
|
434
|
+
let hadPrimaryActionOnPressStart = (0, $glPPV$react.useRef)(false);
|
|
380
435
|
// By default, selection occurs on pointer down. This can be strange if selecting an
|
|
381
436
|
// item causes the UI to disappear immediately (e.g. menus).
|
|
382
437
|
// If shouldSelectOnPressUp is true, we use onPressUp instead of onPressStart.
|
|
@@ -384,28 +439,26 @@ function $433b1145b0781e10$export$ecf600387e221c37(options) {
|
|
|
384
439
|
// we want to be able to have the pointer down on the trigger that opens the menu and
|
|
385
440
|
// the pointer up on the menu item rather than requiring a separate press.
|
|
386
441
|
// For keyboard events, selection still occurs on key down.
|
|
387
|
-
let itemPressProps = {
|
|
388
|
-
};
|
|
442
|
+
let itemPressProps = {};
|
|
389
443
|
if (shouldSelectOnPressUp) {
|
|
390
444
|
itemPressProps.onPressStart = (e)=>{
|
|
391
445
|
modality.current = e.pointerType;
|
|
392
446
|
longPressEnabledOnPressStart.current = longPressEnabled;
|
|
393
|
-
if (e.pointerType ===
|
|
447
|
+
if (e.pointerType === "keyboard" && (!hasAction || $433b1145b0781e10$var$isSelectionKey())) onSelect(e);
|
|
394
448
|
};
|
|
395
449
|
// If allowsDifferentPressOrigin, make selection happen on pressUp (e.g. open menu on press down, selection on menu item happens on press up.)
|
|
396
450
|
// Otherwise, have selection happen onPress (prevents listview row selection when clicking on interactable elements in the row)
|
|
397
451
|
if (!allowsDifferentPressOrigin) itemPressProps.onPress = (e)=>{
|
|
398
|
-
if (hasPrimaryAction || hasSecondaryAction && e.pointerType !==
|
|
399
|
-
if (e.pointerType ===
|
|
452
|
+
if (hasPrimaryAction || hasSecondaryAction && e.pointerType !== "mouse") {
|
|
453
|
+
if (e.pointerType === "keyboard" && !$433b1145b0781e10$var$isActionKey()) return;
|
|
400
454
|
onAction();
|
|
401
|
-
} else if (e.pointerType !==
|
|
455
|
+
} else if (e.pointerType !== "keyboard") onSelect(e);
|
|
402
456
|
};
|
|
403
457
|
else {
|
|
404
458
|
itemPressProps.onPressUp = (e)=>{
|
|
405
|
-
if (e.pointerType !==
|
|
459
|
+
if (e.pointerType !== "keyboard") onSelect(e);
|
|
406
460
|
};
|
|
407
|
-
itemPressProps.onPress = hasPrimaryAction ? ()=>onAction()
|
|
408
|
-
: null;
|
|
461
|
+
itemPressProps.onPress = hasPrimaryAction ? ()=>onAction() : null;
|
|
409
462
|
}
|
|
410
463
|
} else {
|
|
411
464
|
itemPressProps.onPressStart = (e)=>{
|
|
@@ -415,24 +468,24 @@ function $433b1145b0781e10$export$ecf600387e221c37(options) {
|
|
|
415
468
|
// Select on mouse down unless there is a primary action which will occur on mouse up.
|
|
416
469
|
// For keyboard, select on key down. If there is an action, the Space key selects on key down,
|
|
417
470
|
// and the Enter key performs onAction on key up.
|
|
418
|
-
if (e.pointerType ===
|
|
471
|
+
if (e.pointerType === "mouse" && !hasPrimaryAction || e.pointerType === "keyboard" && (!onAction || $433b1145b0781e10$var$isSelectionKey())) onSelect(e);
|
|
419
472
|
};
|
|
420
473
|
itemPressProps.onPress = (e)=>{
|
|
421
474
|
// Selection occurs on touch up. Primary actions always occur on pointer up.
|
|
422
475
|
// Both primary and secondary actions occur on Enter key up. The only exception
|
|
423
476
|
// is secondary actions, which occur on double click with a mouse.
|
|
424
|
-
if (e.pointerType ===
|
|
477
|
+
if (e.pointerType === "touch" || e.pointerType === "pen" || e.pointerType === "virtual" || e.pointerType === "keyboard" && hasAction && $433b1145b0781e10$var$isActionKey() || e.pointerType === "mouse" && hadPrimaryActionOnPressStart.current) {
|
|
425
478
|
if (hasAction) onAction();
|
|
426
479
|
else onSelect(e);
|
|
427
480
|
}
|
|
428
481
|
};
|
|
429
482
|
}
|
|
430
|
-
if (!isVirtualized) itemProps[
|
|
483
|
+
if (!isVirtualized) itemProps["data-key"] = key;
|
|
431
484
|
itemPressProps.preventFocusOnPress = shouldUseVirtualFocus;
|
|
432
|
-
let { pressProps: pressProps , isPressed: isPressed } = $glPPV$reactariainteractions.usePress(itemPressProps);
|
|
485
|
+
let { pressProps: pressProps , isPressed: isPressed } = (0, $glPPV$reactariainteractions.usePress)(itemPressProps);
|
|
433
486
|
// Double clicking with a mouse with selectionBehavior = 'replace' performs an action.
|
|
434
487
|
let onDoubleClick = hasSecondaryAction ? (e)=>{
|
|
435
|
-
if (modality.current ===
|
|
488
|
+
if (modality.current === "mouse") {
|
|
436
489
|
e.stopPropagation();
|
|
437
490
|
e.preventDefault();
|
|
438
491
|
onAction();
|
|
@@ -441,12 +494,12 @@ function $433b1145b0781e10$export$ecf600387e221c37(options) {
|
|
|
441
494
|
// Long pressing an item with touch when selectionBehavior = 'replace' switches the selection behavior
|
|
442
495
|
// to 'toggle'. This changes the single tap behavior from performing an action (i.e. navigating) to
|
|
443
496
|
// selecting, and may toggle the appearance of a UI affordance like checkboxes on each item.
|
|
444
|
-
let { longPressProps: longPressProps } = $glPPV$reactariainteractions.useLongPress({
|
|
497
|
+
let { longPressProps: longPressProps } = (0, $glPPV$reactariainteractions.useLongPress)({
|
|
445
498
|
isDisabled: !longPressEnabled,
|
|
446
499
|
onLongPress (e) {
|
|
447
|
-
if (e.pointerType ===
|
|
500
|
+
if (e.pointerType === "touch") {
|
|
448
501
|
onSelect(e);
|
|
449
|
-
manager.setSelectionBehavior(
|
|
502
|
+
manager.setSelectionBehavior("toggle");
|
|
450
503
|
}
|
|
451
504
|
}
|
|
452
505
|
});
|
|
@@ -455,12 +508,10 @@ function $433b1145b0781e10$export$ecf600387e221c37(options) {
|
|
|
455
508
|
// Use a capturing listener to ensure this runs before useDrag, regardless of
|
|
456
509
|
// the order the props get merged.
|
|
457
510
|
let onDragStartCapture = (e)=>{
|
|
458
|
-
if (modality.current ===
|
|
511
|
+
if (modality.current === "touch" && longPressEnabledOnPressStart.current) e.preventDefault();
|
|
459
512
|
};
|
|
460
513
|
return {
|
|
461
|
-
itemProps: $glPPV$reactariautils.mergeProps(itemProps, allowsSelection || hasPrimaryAction ? pressProps : {
|
|
462
|
-
}, longPressEnabled ? longPressProps : {
|
|
463
|
-
}, {
|
|
514
|
+
itemProps: (0, $glPPV$reactariautils.mergeProps)(itemProps, allowsSelection || hasPrimaryAction ? pressProps : {}, longPressEnabled ? longPressProps : {}, {
|
|
464
515
|
onDoubleClick: onDoubleClick,
|
|
465
516
|
onDragStartCapture: onDragStartCapture
|
|
466
517
|
}),
|
|
@@ -473,21 +524,41 @@ function $433b1145b0781e10$export$ecf600387e221c37(options) {
|
|
|
473
524
|
}
|
|
474
525
|
function $433b1145b0781e10$var$isActionKey() {
|
|
475
526
|
let event = window.event;
|
|
476
|
-
return (event === null || event === void 0 ? void 0 : event.key) ===
|
|
527
|
+
return (event === null || event === void 0 ? void 0 : event.key) === "Enter";
|
|
477
528
|
}
|
|
478
529
|
function $433b1145b0781e10$var$isSelectionKey() {
|
|
479
530
|
let event = window.event;
|
|
480
|
-
return (event === null || event === void 0 ? void 0 : event.key) ===
|
|
531
|
+
return (event === null || event === void 0 ? void 0 : event.key) === " " || (event === null || event === void 0 ? void 0 : event.code) === "Space";
|
|
481
532
|
}
|
|
482
533
|
|
|
483
534
|
|
|
484
|
-
|
|
485
|
-
|
|
535
|
+
/*
|
|
536
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
537
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
538
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
539
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
540
|
+
*
|
|
541
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
542
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
543
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
544
|
+
* governing permissions and limitations under the License.
|
|
545
|
+
*/
|
|
546
|
+
/*
|
|
547
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
548
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
549
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
550
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
551
|
+
*
|
|
552
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
553
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
554
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
555
|
+
* governing permissions and limitations under the License.
|
|
556
|
+
*/ class $836f880b12dcae5c$export$a05409b8bb224a5a {
|
|
486
557
|
getKeyBelow(key) {
|
|
487
558
|
key = this.collection.getKeyAfter(key);
|
|
488
559
|
while(key != null){
|
|
489
560
|
let item = this.collection.getItem(key);
|
|
490
|
-
if (item.type ===
|
|
561
|
+
if (item.type === "item" && !this.disabledKeys.has(key)) return key;
|
|
491
562
|
key = this.collection.getKeyAfter(key);
|
|
492
563
|
}
|
|
493
564
|
}
|
|
@@ -495,7 +566,7 @@ class $836f880b12dcae5c$export$a05409b8bb224a5a {
|
|
|
495
566
|
key = this.collection.getKeyBefore(key);
|
|
496
567
|
while(key != null){
|
|
497
568
|
let item = this.collection.getItem(key);
|
|
498
|
-
if (item.type ===
|
|
569
|
+
if (item.type === "item" && !this.disabledKeys.has(key)) return key;
|
|
499
570
|
key = this.collection.getKeyBefore(key);
|
|
500
571
|
}
|
|
501
572
|
}
|
|
@@ -503,7 +574,7 @@ class $836f880b12dcae5c$export$a05409b8bb224a5a {
|
|
|
503
574
|
let key = this.collection.getFirstKey();
|
|
504
575
|
while(key != null){
|
|
505
576
|
let item = this.collection.getItem(key);
|
|
506
|
-
if (item.type ===
|
|
577
|
+
if (item.type === "item" && !this.disabledKeys.has(key)) return key;
|
|
507
578
|
key = this.collection.getKeyAfter(key);
|
|
508
579
|
}
|
|
509
580
|
}
|
|
@@ -511,7 +582,7 @@ class $836f880b12dcae5c$export$a05409b8bb224a5a {
|
|
|
511
582
|
let key = this.collection.getLastKey();
|
|
512
583
|
while(key != null){
|
|
513
584
|
let item = this.collection.getItem(key);
|
|
514
|
-
if (item.type ===
|
|
585
|
+
if (item.type === "item" && !this.disabledKeys.has(key)) return key;
|
|
515
586
|
key = this.collection.getKeyBefore(key);
|
|
516
587
|
}
|
|
517
588
|
}
|
|
@@ -564,16 +635,15 @@ class $836f880b12dcae5c$export$a05409b8bb224a5a {
|
|
|
564
635
|
|
|
565
636
|
|
|
566
637
|
function $bd230acee196f50c$export$b95089534ab7c1fd(props) {
|
|
567
|
-
let { selectionManager: selectionManager , collection: collection , disabledKeys: disabledKeys , ref: ref , keyboardDelegate: keyboardDelegate , autoFocus: autoFocus , shouldFocusWrap: shouldFocusWrap , isVirtualized: isVirtualized , disallowEmptySelection: disallowEmptySelection , selectOnFocus: selectOnFocus = selectionManager.selectionBehavior ===
|
|
638
|
+
let { selectionManager: selectionManager , collection: collection , disabledKeys: disabledKeys , ref: ref , keyboardDelegate: keyboardDelegate , autoFocus: autoFocus , shouldFocusWrap: shouldFocusWrap , isVirtualized: isVirtualized , disallowEmptySelection: disallowEmptySelection , selectOnFocus: selectOnFocus = selectionManager.selectionBehavior === "replace" , disallowTypeAhead: disallowTypeAhead , shouldUseVirtualFocus: shouldUseVirtualFocus , allowsTabNavigation: allowsTabNavigation } = props;
|
|
568
639
|
// By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
|
|
569
640
|
// When virtualized, the layout object will be passed in as a prop and override this.
|
|
570
|
-
let collator = $glPPV$reactariai18n.useCollator({
|
|
571
|
-
usage:
|
|
572
|
-
sensitivity:
|
|
641
|
+
let collator = (0, $glPPV$reactariai18n.useCollator)({
|
|
642
|
+
usage: "search",
|
|
643
|
+
sensitivity: "base"
|
|
573
644
|
});
|
|
574
645
|
let disabledBehavior = selectionManager.disabledBehavior;
|
|
575
|
-
let delegate = $glPPV$react.useMemo(()=>keyboardDelegate || new $836f880b12dcae5c$export$a05409b8bb224a5a(collection, disabledBehavior ===
|
|
576
|
-
, [
|
|
646
|
+
let delegate = (0, $glPPV$react.useMemo)(()=>keyboardDelegate || new (0, $836f880b12dcae5c$export$a05409b8bb224a5a)(collection, disabledBehavior === "selection" ? new Set() : disabledKeys, ref, collator), [
|
|
577
647
|
keyboardDelegate,
|
|
578
648
|
collection,
|
|
579
649
|
disabledKeys,
|
|
@@ -581,7 +651,7 @@ function $bd230acee196f50c$export$b95089534ab7c1fd(props) {
|
|
|
581
651
|
collator,
|
|
582
652
|
disabledBehavior
|
|
583
653
|
]);
|
|
584
|
-
let { collectionProps: collectionProps } = $b6837c2f80a3c32f$export$d6daf82dcd84e87c({
|
|
654
|
+
let { collectionProps: collectionProps } = (0, $b6837c2f80a3c32f$export$d6daf82dcd84e87c)({
|
|
585
655
|
ref: ref,
|
|
586
656
|
selectionManager: selectionManager,
|
|
587
657
|
keyboardDelegate: delegate,
|