@react-aria/selection 3.18.0 → 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 +23 -23
- package/dist/ListKeyboardDelegate.mjs +24 -24
- package/dist/ListKeyboardDelegate.module.js +23 -23
- package/dist/useSelectableCollection.main.js +30 -30
- package/dist/useSelectableCollection.mjs +31 -31
- package/dist/useSelectableCollection.module.js +30 -30
- package/dist/useSelectableItem.main.js +25 -25
- package/dist/useSelectableItem.mjs +26 -26
- package/dist/useSelectableItem.module.js +25 -25
- package/dist/useSelectableList.main.js +2 -2
- package/dist/useSelectableList.mjs +3 -3
- package/dist/useSelectableList.module.js +2 -2
- package/dist/useTypeSelect.main.js +5 -5
- package/dist/useTypeSelect.mjs +6 -6
- package/dist/useTypeSelect.module.js +5 -5
- package/dist/utils.mjs +1 -1
- package/package.json +8 -8
|
@@ -26,19 +26,19 @@ import {useLocale as $3H3GQ$useLocale} from "@react-aria/i18n";
|
|
|
26
26
|
|
|
27
27
|
|
|
28
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 ===
|
|
30
|
-
scrollRef = ref, linkBehavior: linkBehavior =
|
|
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
31
|
let { direction: direction } = (0, $3H3GQ$useLocale)();
|
|
32
32
|
let router = (0, $3H3GQ$useRouter)();
|
|
33
33
|
let onKeyDown = (e)=>{
|
|
34
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 ===
|
|
35
|
+
if (e.altKey && e.key === 'Tab') e.preventDefault();
|
|
36
36
|
// Keyboard events bubble through portals. Don't handle keyboard events
|
|
37
37
|
// for elements outside the collection (e.g. menus).
|
|
38
38
|
if (!ref.current.contains(e.target)) return;
|
|
39
39
|
const navigateToKey = (key, childFocus)=>{
|
|
40
40
|
if (key != null) {
|
|
41
|
-
if (manager.isLink(key) && linkBehavior ===
|
|
41
|
+
if (manager.isLink(key) && linkBehavior === 'selection' && selectOnFocus && !(0, $feb5ffebff200149$export$d3e3bd3e26688c04)(e)) {
|
|
42
42
|
// Set focused key and re-render synchronously to bring item into view if needed.
|
|
43
43
|
(0, $3H3GQ$flushSync)(()=>{
|
|
44
44
|
manager.setFocusedKey(key, childFocus);
|
|
@@ -49,13 +49,13 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
49
49
|
return;
|
|
50
50
|
}
|
|
51
51
|
manager.setFocusedKey(key, childFocus);
|
|
52
|
-
if (manager.isLink(key) && linkBehavior ===
|
|
53
|
-
if (e.shiftKey && manager.selectionMode ===
|
|
52
|
+
if (manager.isLink(key) && linkBehavior === 'override') return;
|
|
53
|
+
if (e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(key);
|
|
54
54
|
else if (selectOnFocus && !(0, $feb5ffebff200149$export$d3e3bd3e26688c04)(e)) manager.replaceSelection(key);
|
|
55
55
|
}
|
|
56
56
|
};
|
|
57
57
|
switch(e.key){
|
|
58
|
-
case
|
|
58
|
+
case 'ArrowDown':
|
|
59
59
|
if (delegate.getKeyBelow) {
|
|
60
60
|
var _delegate_getFirstKey, _delegate_getFirstKey1;
|
|
61
61
|
e.preventDefault();
|
|
@@ -64,7 +64,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
64
64
|
navigateToKey(nextKey);
|
|
65
65
|
}
|
|
66
66
|
break;
|
|
67
|
-
case
|
|
67
|
+
case 'ArrowUp':
|
|
68
68
|
if (delegate.getKeyAbove) {
|
|
69
69
|
var _delegate_getLastKey, _delegate_getLastKey1;
|
|
70
70
|
e.preventDefault();
|
|
@@ -73,70 +73,70 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
73
73
|
navigateToKey(nextKey);
|
|
74
74
|
}
|
|
75
75
|
break;
|
|
76
|
-
case
|
|
76
|
+
case 'ArrowLeft':
|
|
77
77
|
if (delegate.getKeyLeftOf) {
|
|
78
78
|
var _delegate_getFirstKey2, _delegate_getLastKey2;
|
|
79
79
|
e.preventDefault();
|
|
80
80
|
let nextKey = delegate.getKeyLeftOf(manager.focusedKey);
|
|
81
|
-
if (nextKey == null && shouldFocusWrap) nextKey = direction ===
|
|
82
|
-
navigateToKey(nextKey, direction ===
|
|
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
83
|
}
|
|
84
84
|
break;
|
|
85
|
-
case
|
|
85
|
+
case 'ArrowRight':
|
|
86
86
|
if (delegate.getKeyRightOf) {
|
|
87
87
|
var _delegate_getLastKey3, _delegate_getFirstKey3;
|
|
88
88
|
e.preventDefault();
|
|
89
89
|
let nextKey = delegate.getKeyRightOf(manager.focusedKey);
|
|
90
|
-
if (nextKey == null && shouldFocusWrap) nextKey = direction ===
|
|
91
|
-
navigateToKey(nextKey, direction ===
|
|
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
92
|
}
|
|
93
93
|
break;
|
|
94
|
-
case
|
|
94
|
+
case 'Home':
|
|
95
95
|
if (delegate.getFirstKey) {
|
|
96
96
|
e.preventDefault();
|
|
97
97
|
let firstKey = delegate.getFirstKey(manager.focusedKey, (0, $feb5ffebff200149$export$16792effe837dba3)(e));
|
|
98
98
|
manager.setFocusedKey(firstKey);
|
|
99
|
-
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode ===
|
|
99
|
+
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(firstKey);
|
|
100
100
|
else if (selectOnFocus) manager.replaceSelection(firstKey);
|
|
101
101
|
}
|
|
102
102
|
break;
|
|
103
|
-
case
|
|
103
|
+
case 'End':
|
|
104
104
|
if (delegate.getLastKey) {
|
|
105
105
|
e.preventDefault();
|
|
106
106
|
let lastKey = delegate.getLastKey(manager.focusedKey, (0, $feb5ffebff200149$export$16792effe837dba3)(e));
|
|
107
107
|
manager.setFocusedKey(lastKey);
|
|
108
|
-
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode ===
|
|
108
|
+
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(lastKey);
|
|
109
109
|
else if (selectOnFocus) manager.replaceSelection(lastKey);
|
|
110
110
|
}
|
|
111
111
|
break;
|
|
112
|
-
case
|
|
112
|
+
case 'PageDown':
|
|
113
113
|
if (delegate.getKeyPageBelow) {
|
|
114
114
|
e.preventDefault();
|
|
115
115
|
let nextKey = delegate.getKeyPageBelow(manager.focusedKey);
|
|
116
116
|
navigateToKey(nextKey);
|
|
117
117
|
}
|
|
118
118
|
break;
|
|
119
|
-
case
|
|
119
|
+
case 'PageUp':
|
|
120
120
|
if (delegate.getKeyPageAbove) {
|
|
121
121
|
e.preventDefault();
|
|
122
122
|
let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
|
|
123
123
|
navigateToKey(nextKey);
|
|
124
124
|
}
|
|
125
125
|
break;
|
|
126
|
-
case
|
|
127
|
-
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && manager.selectionMode ===
|
|
126
|
+
case 'a':
|
|
127
|
+
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && manager.selectionMode === 'multiple' && disallowSelectAll !== true) {
|
|
128
128
|
e.preventDefault();
|
|
129
129
|
manager.selectAll();
|
|
130
130
|
}
|
|
131
131
|
break;
|
|
132
|
-
case
|
|
132
|
+
case 'Escape':
|
|
133
133
|
if (!disallowEmptySelection && manager.selectedKeys.size !== 0) {
|
|
134
134
|
e.stopPropagation();
|
|
135
135
|
e.preventDefault();
|
|
136
136
|
manager.clearSelection();
|
|
137
137
|
}
|
|
138
138
|
break;
|
|
139
|
-
case
|
|
139
|
+
case 'Tab':
|
|
140
140
|
if (!allowsTabNavigation) {
|
|
141
141
|
// There may be elements that are "tabbable" inside a collection (e.g. in a grid cell).
|
|
142
142
|
// However, collections should be treated as a single tab stop, with arrow key navigation internally.
|
|
@@ -166,7 +166,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
166
166
|
top: 0,
|
|
167
167
|
left: 0
|
|
168
168
|
});
|
|
169
|
-
(0, $3H3GQ$useEvent)(scrollRef,
|
|
169
|
+
(0, $3H3GQ$useEvent)(scrollRef, 'scroll', isVirtualized ? null : ()=>{
|
|
170
170
|
scrollPos.current = {
|
|
171
171
|
top: scrollRef.current.scrollTop,
|
|
172
172
|
left: scrollRef.current.scrollLeft
|
|
@@ -207,7 +207,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
207
207
|
// This prevents a flash of focus on the first/last element in the collection, or the collection itself.
|
|
208
208
|
if (!element.contains(document.activeElement)) (0, $3H3GQ$focusWithoutScrolling)(element);
|
|
209
209
|
let modality = (0, $3H3GQ$getInteractionModality)();
|
|
210
|
-
if (modality ===
|
|
210
|
+
if (modality === 'keyboard') (0, $3H3GQ$scrollIntoViewport)(element, {
|
|
211
211
|
containingElement: ref.current
|
|
212
212
|
});
|
|
213
213
|
}
|
|
@@ -222,8 +222,8 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
222
222
|
if (autoFocusRef.current) {
|
|
223
223
|
let focusedKey = null;
|
|
224
224
|
// Check focus strategy to determine which item to focus
|
|
225
|
-
if (autoFocus ===
|
|
226
|
-
if (autoFocus ===
|
|
225
|
+
if (autoFocus === 'first') focusedKey = delegate.getFirstKey();
|
|
226
|
+
if (autoFocus === 'last') focusedKey = delegate.getLastKey();
|
|
227
227
|
// If there are any selected keys, make the first one the new focus target
|
|
228
228
|
let selectedKeys = manager.selectedKeys;
|
|
229
229
|
if (selectedKeys.size) {
|
|
@@ -246,10 +246,10 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
246
246
|
let modality = (0, $3H3GQ$getInteractionModality)();
|
|
247
247
|
if (manager.isFocused && manager.focusedKey != null && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
|
|
248
248
|
let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`);
|
|
249
|
-
if (element && (modality ===
|
|
249
|
+
if (element && (modality === 'keyboard' || autoFocusRef.current)) {
|
|
250
250
|
if (!isVirtualized) (0, $3H3GQ$scrollIntoView)(scrollRef.current, element);
|
|
251
251
|
// Avoid scroll in iOS VO, since it may cause overlay to close (i.e. RAC submenu)
|
|
252
|
-
if (modality !==
|
|
252
|
+
if (modality !== 'virtual') (0, $3H3GQ$scrollIntoViewport)(element, {
|
|
253
253
|
containingElement: ref.current
|
|
254
254
|
});
|
|
255
255
|
}
|
|
@@ -296,4 +296,4 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
296
296
|
|
|
297
297
|
|
|
298
298
|
export {$ae20dd8cbca75726$export$d6daf82dcd84e87c as useSelectableCollection};
|
|
299
|
-
//# sourceMappingURL=useSelectableCollection.
|
|
299
|
+
//# sourceMappingURL=useSelectableCollection.module.js.map
|
|
@@ -26,19 +26,19 @@ import {useLocale as $3H3GQ$useLocale} from "@react-aria/i18n";
|
|
|
26
26
|
|
|
27
27
|
|
|
28
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 ===
|
|
30
|
-
scrollRef = ref, linkBehavior: linkBehavior =
|
|
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
31
|
let { direction: direction } = (0, $3H3GQ$useLocale)();
|
|
32
32
|
let router = (0, $3H3GQ$useRouter)();
|
|
33
33
|
let onKeyDown = (e)=>{
|
|
34
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 ===
|
|
35
|
+
if (e.altKey && e.key === 'Tab') e.preventDefault();
|
|
36
36
|
// Keyboard events bubble through portals. Don't handle keyboard events
|
|
37
37
|
// for elements outside the collection (e.g. menus).
|
|
38
38
|
if (!ref.current.contains(e.target)) return;
|
|
39
39
|
const navigateToKey = (key, childFocus)=>{
|
|
40
40
|
if (key != null) {
|
|
41
|
-
if (manager.isLink(key) && linkBehavior ===
|
|
41
|
+
if (manager.isLink(key) && linkBehavior === 'selection' && selectOnFocus && !(0, $feb5ffebff200149$export$d3e3bd3e26688c04)(e)) {
|
|
42
42
|
// Set focused key and re-render synchronously to bring item into view if needed.
|
|
43
43
|
(0, $3H3GQ$flushSync)(()=>{
|
|
44
44
|
manager.setFocusedKey(key, childFocus);
|
|
@@ -49,13 +49,13 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
49
49
|
return;
|
|
50
50
|
}
|
|
51
51
|
manager.setFocusedKey(key, childFocus);
|
|
52
|
-
if (manager.isLink(key) && linkBehavior ===
|
|
53
|
-
if (e.shiftKey && manager.selectionMode ===
|
|
52
|
+
if (manager.isLink(key) && linkBehavior === 'override') return;
|
|
53
|
+
if (e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(key);
|
|
54
54
|
else if (selectOnFocus && !(0, $feb5ffebff200149$export$d3e3bd3e26688c04)(e)) manager.replaceSelection(key);
|
|
55
55
|
}
|
|
56
56
|
};
|
|
57
57
|
switch(e.key){
|
|
58
|
-
case
|
|
58
|
+
case 'ArrowDown':
|
|
59
59
|
if (delegate.getKeyBelow) {
|
|
60
60
|
var _delegate_getFirstKey, _delegate_getFirstKey1;
|
|
61
61
|
e.preventDefault();
|
|
@@ -64,7 +64,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
64
64
|
navigateToKey(nextKey);
|
|
65
65
|
}
|
|
66
66
|
break;
|
|
67
|
-
case
|
|
67
|
+
case 'ArrowUp':
|
|
68
68
|
if (delegate.getKeyAbove) {
|
|
69
69
|
var _delegate_getLastKey, _delegate_getLastKey1;
|
|
70
70
|
e.preventDefault();
|
|
@@ -73,70 +73,70 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
73
73
|
navigateToKey(nextKey);
|
|
74
74
|
}
|
|
75
75
|
break;
|
|
76
|
-
case
|
|
76
|
+
case 'ArrowLeft':
|
|
77
77
|
if (delegate.getKeyLeftOf) {
|
|
78
78
|
var _delegate_getFirstKey2, _delegate_getLastKey2;
|
|
79
79
|
e.preventDefault();
|
|
80
80
|
let nextKey = delegate.getKeyLeftOf(manager.focusedKey);
|
|
81
|
-
if (nextKey == null && shouldFocusWrap) nextKey = direction ===
|
|
82
|
-
navigateToKey(nextKey, direction ===
|
|
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
83
|
}
|
|
84
84
|
break;
|
|
85
|
-
case
|
|
85
|
+
case 'ArrowRight':
|
|
86
86
|
if (delegate.getKeyRightOf) {
|
|
87
87
|
var _delegate_getLastKey3, _delegate_getFirstKey3;
|
|
88
88
|
e.preventDefault();
|
|
89
89
|
let nextKey = delegate.getKeyRightOf(manager.focusedKey);
|
|
90
|
-
if (nextKey == null && shouldFocusWrap) nextKey = direction ===
|
|
91
|
-
navigateToKey(nextKey, direction ===
|
|
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
92
|
}
|
|
93
93
|
break;
|
|
94
|
-
case
|
|
94
|
+
case 'Home':
|
|
95
95
|
if (delegate.getFirstKey) {
|
|
96
96
|
e.preventDefault();
|
|
97
97
|
let firstKey = delegate.getFirstKey(manager.focusedKey, (0, $feb5ffebff200149$export$16792effe837dba3)(e));
|
|
98
98
|
manager.setFocusedKey(firstKey);
|
|
99
|
-
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode ===
|
|
99
|
+
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(firstKey);
|
|
100
100
|
else if (selectOnFocus) manager.replaceSelection(firstKey);
|
|
101
101
|
}
|
|
102
102
|
break;
|
|
103
|
-
case
|
|
103
|
+
case 'End':
|
|
104
104
|
if (delegate.getLastKey) {
|
|
105
105
|
e.preventDefault();
|
|
106
106
|
let lastKey = delegate.getLastKey(manager.focusedKey, (0, $feb5ffebff200149$export$16792effe837dba3)(e));
|
|
107
107
|
manager.setFocusedKey(lastKey);
|
|
108
|
-
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode ===
|
|
108
|
+
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(lastKey);
|
|
109
109
|
else if (selectOnFocus) manager.replaceSelection(lastKey);
|
|
110
110
|
}
|
|
111
111
|
break;
|
|
112
|
-
case
|
|
112
|
+
case 'PageDown':
|
|
113
113
|
if (delegate.getKeyPageBelow) {
|
|
114
114
|
e.preventDefault();
|
|
115
115
|
let nextKey = delegate.getKeyPageBelow(manager.focusedKey);
|
|
116
116
|
navigateToKey(nextKey);
|
|
117
117
|
}
|
|
118
118
|
break;
|
|
119
|
-
case
|
|
119
|
+
case 'PageUp':
|
|
120
120
|
if (delegate.getKeyPageAbove) {
|
|
121
121
|
e.preventDefault();
|
|
122
122
|
let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
|
|
123
123
|
navigateToKey(nextKey);
|
|
124
124
|
}
|
|
125
125
|
break;
|
|
126
|
-
case
|
|
127
|
-
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && manager.selectionMode ===
|
|
126
|
+
case 'a':
|
|
127
|
+
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && manager.selectionMode === 'multiple' && disallowSelectAll !== true) {
|
|
128
128
|
e.preventDefault();
|
|
129
129
|
manager.selectAll();
|
|
130
130
|
}
|
|
131
131
|
break;
|
|
132
|
-
case
|
|
132
|
+
case 'Escape':
|
|
133
133
|
if (!disallowEmptySelection && manager.selectedKeys.size !== 0) {
|
|
134
134
|
e.stopPropagation();
|
|
135
135
|
e.preventDefault();
|
|
136
136
|
manager.clearSelection();
|
|
137
137
|
}
|
|
138
138
|
break;
|
|
139
|
-
case
|
|
139
|
+
case 'Tab':
|
|
140
140
|
if (!allowsTabNavigation) {
|
|
141
141
|
// There may be elements that are "tabbable" inside a collection (e.g. in a grid cell).
|
|
142
142
|
// However, collections should be treated as a single tab stop, with arrow key navigation internally.
|
|
@@ -166,7 +166,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
166
166
|
top: 0,
|
|
167
167
|
left: 0
|
|
168
168
|
});
|
|
169
|
-
(0, $3H3GQ$useEvent)(scrollRef,
|
|
169
|
+
(0, $3H3GQ$useEvent)(scrollRef, 'scroll', isVirtualized ? null : ()=>{
|
|
170
170
|
scrollPos.current = {
|
|
171
171
|
top: scrollRef.current.scrollTop,
|
|
172
172
|
left: scrollRef.current.scrollLeft
|
|
@@ -207,7 +207,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
207
207
|
// This prevents a flash of focus on the first/last element in the collection, or the collection itself.
|
|
208
208
|
if (!element.contains(document.activeElement)) (0, $3H3GQ$focusWithoutScrolling)(element);
|
|
209
209
|
let modality = (0, $3H3GQ$getInteractionModality)();
|
|
210
|
-
if (modality ===
|
|
210
|
+
if (modality === 'keyboard') (0, $3H3GQ$scrollIntoViewport)(element, {
|
|
211
211
|
containingElement: ref.current
|
|
212
212
|
});
|
|
213
213
|
}
|
|
@@ -222,8 +222,8 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
222
222
|
if (autoFocusRef.current) {
|
|
223
223
|
let focusedKey = null;
|
|
224
224
|
// Check focus strategy to determine which item to focus
|
|
225
|
-
if (autoFocus ===
|
|
226
|
-
if (autoFocus ===
|
|
225
|
+
if (autoFocus === 'first') focusedKey = delegate.getFirstKey();
|
|
226
|
+
if (autoFocus === 'last') focusedKey = delegate.getLastKey();
|
|
227
227
|
// If there are any selected keys, make the first one the new focus target
|
|
228
228
|
let selectedKeys = manager.selectedKeys;
|
|
229
229
|
if (selectedKeys.size) {
|
|
@@ -246,10 +246,10 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
246
246
|
let modality = (0, $3H3GQ$getInteractionModality)();
|
|
247
247
|
if (manager.isFocused && manager.focusedKey != null && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
|
|
248
248
|
let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`);
|
|
249
|
-
if (element && (modality ===
|
|
249
|
+
if (element && (modality === 'keyboard' || autoFocusRef.current)) {
|
|
250
250
|
if (!isVirtualized) (0, $3H3GQ$scrollIntoView)(scrollRef.current, element);
|
|
251
251
|
// Avoid scroll in iOS VO, since it may cause overlay to close (i.e. RAC submenu)
|
|
252
|
-
if (modality !==
|
|
252
|
+
if (modality !== 'virtual') (0, $3H3GQ$scrollIntoViewport)(element, {
|
|
253
253
|
containingElement: ref.current
|
|
254
254
|
});
|
|
255
255
|
}
|
|
@@ -26,26 +26,26 @@ $parcel$export(module.exports, "useSelectableItem", () => $433b1145b0781e10$expo
|
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
function $433b1145b0781e10$export$ecf600387e221c37(options) {
|
|
29
|
-
let { selectionManager: manager, key: key, ref: ref, shouldSelectOnPressUp: shouldSelectOnPressUp, shouldUseVirtualFocus: shouldUseVirtualFocus, focus: focus, isDisabled: isDisabled, onAction: onAction, allowsDifferentPressOrigin: allowsDifferentPressOrigin, linkBehavior: linkBehavior =
|
|
29
|
+
let { selectionManager: manager, key: key, ref: ref, shouldSelectOnPressUp: shouldSelectOnPressUp, shouldUseVirtualFocus: shouldUseVirtualFocus, focus: focus, isDisabled: isDisabled, onAction: onAction, allowsDifferentPressOrigin: allowsDifferentPressOrigin, linkBehavior: linkBehavior = 'action' } = options;
|
|
30
30
|
let router = (0, $i4XHw$reactariautils.useRouter)();
|
|
31
31
|
let onSelect = (e)=>{
|
|
32
|
-
if (e.pointerType ===
|
|
32
|
+
if (e.pointerType === 'keyboard' && (0, $ee0bdf4faa47f2a8$exports.isNonContiguousSelectionModifier)(e)) manager.toggleSelection(key);
|
|
33
33
|
else {
|
|
34
|
-
if (manager.selectionMode ===
|
|
34
|
+
if (manager.selectionMode === 'none') return;
|
|
35
35
|
if (manager.isLink(key)) {
|
|
36
|
-
if (linkBehavior ===
|
|
36
|
+
if (linkBehavior === 'selection') {
|
|
37
37
|
let itemProps = manager.getItemProps(key);
|
|
38
38
|
router.open(ref.current, e, itemProps.href, itemProps.routerOptions);
|
|
39
39
|
// Always set selected keys back to what they were so that select and combobox close.
|
|
40
40
|
manager.setSelectedKeys(manager.selectedKeys);
|
|
41
41
|
return;
|
|
42
|
-
} else if (linkBehavior ===
|
|
42
|
+
} else if (linkBehavior === 'override' || linkBehavior === 'none') return;
|
|
43
43
|
}
|
|
44
|
-
if (manager.selectionMode ===
|
|
44
|
+
if (manager.selectionMode === 'single') {
|
|
45
45
|
if (manager.isSelected(key) && !manager.disallowEmptySelection) manager.toggleSelection(key);
|
|
46
46
|
else manager.replaceSelection(key);
|
|
47
47
|
} else if (e && e.shiftKey) manager.extendSelection(key);
|
|
48
|
-
else if (manager.selectionBehavior ===
|
|
48
|
+
else if (manager.selectionBehavior === 'toggle' || e && ((0, $ee0bdf4faa47f2a8$exports.isCtrlKeyPressed)(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
|
|
49
49
|
manager.toggleSelection(key);
|
|
50
50
|
else manager.replaceSelection(key);
|
|
51
51
|
}
|
|
@@ -85,12 +85,12 @@ function $433b1145b0781e10$export$ecf600387e221c37(options) {
|
|
|
85
85
|
// Clicking the checkbox enters selection mode, after which clicking anywhere on any row toggles selection for that row.
|
|
86
86
|
// With highlight selection, onAction is secondary, and occurs on double click. Single click selects the row.
|
|
87
87
|
// With touch, onAction occurs on single tap, and long press enters selection mode.
|
|
88
|
-
let isLinkOverride = manager.isLink(key) && linkBehavior ===
|
|
89
|
-
let hasLinkAction = manager.isLink(key) && linkBehavior !==
|
|
88
|
+
let isLinkOverride = manager.isLink(key) && linkBehavior === 'override';
|
|
89
|
+
let hasLinkAction = manager.isLink(key) && linkBehavior !== 'selection' && linkBehavior !== 'none';
|
|
90
90
|
let allowsSelection = !isDisabled && manager.canSelectItem(key) && !isLinkOverride;
|
|
91
91
|
let allowsActions = (onAction || hasLinkAction) && !isDisabled;
|
|
92
|
-
let hasPrimaryAction = allowsActions && (manager.selectionBehavior ===
|
|
93
|
-
let hasSecondaryAction = allowsActions && allowsSelection && manager.selectionBehavior ===
|
|
92
|
+
let hasPrimaryAction = allowsActions && (manager.selectionBehavior === 'replace' ? !allowsSelection : !allowsSelection || manager.isEmpty);
|
|
93
|
+
let hasSecondaryAction = allowsActions && allowsSelection && manager.selectionBehavior === 'replace';
|
|
94
94
|
let hasAction = hasPrimaryAction || hasSecondaryAction;
|
|
95
95
|
let modality = (0, $i4XHw$react.useRef)(null);
|
|
96
96
|
let longPressEnabled = hasAction && allowsSelection;
|
|
@@ -115,19 +115,19 @@ function $433b1145b0781e10$export$ecf600387e221c37(options) {
|
|
|
115
115
|
itemPressProps.onPressStart = (e)=>{
|
|
116
116
|
modality.current = e.pointerType;
|
|
117
117
|
longPressEnabledOnPressStart.current = longPressEnabled;
|
|
118
|
-
if (e.pointerType ===
|
|
118
|
+
if (e.pointerType === 'keyboard' && (!hasAction || $433b1145b0781e10$var$isSelectionKey())) onSelect(e);
|
|
119
119
|
};
|
|
120
120
|
// If allowsDifferentPressOrigin, make selection happen on pressUp (e.g. open menu on press down, selection on menu item happens on press up.)
|
|
121
121
|
// Otherwise, have selection happen onPress (prevents listview row selection when clicking on interactable elements in the row)
|
|
122
122
|
if (!allowsDifferentPressOrigin) itemPressProps.onPress = (e)=>{
|
|
123
|
-
if (hasPrimaryAction || hasSecondaryAction && e.pointerType !==
|
|
124
|
-
if (e.pointerType ===
|
|
123
|
+
if (hasPrimaryAction || hasSecondaryAction && e.pointerType !== 'mouse') {
|
|
124
|
+
if (e.pointerType === 'keyboard' && !$433b1145b0781e10$var$isActionKey()) return;
|
|
125
125
|
performAction(e);
|
|
126
|
-
} else if (e.pointerType !==
|
|
126
|
+
} else if (e.pointerType !== 'keyboard' && allowsSelection) onSelect(e);
|
|
127
127
|
};
|
|
128
128
|
else {
|
|
129
129
|
itemPressProps.onPressUp = hasPrimaryAction ? null : (e)=>{
|
|
130
|
-
if (e.pointerType !==
|
|
130
|
+
if (e.pointerType !== 'keyboard' && allowsSelection) onSelect(e);
|
|
131
131
|
};
|
|
132
132
|
itemPressProps.onPress = hasPrimaryAction ? performAction : null;
|
|
133
133
|
}
|
|
@@ -139,24 +139,24 @@ function $433b1145b0781e10$export$ecf600387e221c37(options) {
|
|
|
139
139
|
// Select on mouse down unless there is a primary action which will occur on mouse up.
|
|
140
140
|
// For keyboard, select on key down. If there is an action, the Space key selects on key down,
|
|
141
141
|
// and the Enter key performs onAction on key up.
|
|
142
|
-
if (allowsSelection && (e.pointerType ===
|
|
142
|
+
if (allowsSelection && (e.pointerType === 'mouse' && !hasPrimaryAction || e.pointerType === 'keyboard' && (!allowsActions || $433b1145b0781e10$var$isSelectionKey()))) onSelect(e);
|
|
143
143
|
};
|
|
144
144
|
itemPressProps.onPress = (e)=>{
|
|
145
145
|
// Selection occurs on touch up. Primary actions always occur on pointer up.
|
|
146
146
|
// Both primary and secondary actions occur on Enter key up. The only exception
|
|
147
147
|
// is secondary actions, which occur on double click with a mouse.
|
|
148
|
-
if (e.pointerType ===
|
|
148
|
+
if (e.pointerType === 'touch' || e.pointerType === 'pen' || e.pointerType === 'virtual' || e.pointerType === 'keyboard' && hasAction && $433b1145b0781e10$var$isActionKey() || e.pointerType === 'mouse' && hadPrimaryActionOnPressStart.current) {
|
|
149
149
|
if (hasAction) performAction(e);
|
|
150
150
|
else if (allowsSelection) onSelect(e);
|
|
151
151
|
}
|
|
152
152
|
};
|
|
153
153
|
}
|
|
154
|
-
itemProps[
|
|
154
|
+
itemProps['data-key'] = key;
|
|
155
155
|
itemPressProps.preventFocusOnPress = shouldUseVirtualFocus;
|
|
156
156
|
let { pressProps: pressProps, isPressed: isPressed } = (0, $i4XHw$reactariainteractions.usePress)(itemPressProps);
|
|
157
157
|
// Double clicking with a mouse with selectionBehavior = 'replace' performs an action.
|
|
158
158
|
let onDoubleClick = hasSecondaryAction ? (e)=>{
|
|
159
|
-
if (modality.current ===
|
|
159
|
+
if (modality.current === 'mouse') {
|
|
160
160
|
e.stopPropagation();
|
|
161
161
|
e.preventDefault();
|
|
162
162
|
performAction(e);
|
|
@@ -168,9 +168,9 @@ function $433b1145b0781e10$export$ecf600387e221c37(options) {
|
|
|
168
168
|
let { longPressProps: longPressProps } = (0, $i4XHw$reactariainteractions.useLongPress)({
|
|
169
169
|
isDisabled: !longPressEnabled,
|
|
170
170
|
onLongPress (e) {
|
|
171
|
-
if (e.pointerType ===
|
|
171
|
+
if (e.pointerType === 'touch') {
|
|
172
172
|
onSelect(e);
|
|
173
|
-
manager.setSelectionBehavior(
|
|
173
|
+
manager.setSelectionBehavior('toggle');
|
|
174
174
|
}
|
|
175
175
|
}
|
|
176
176
|
});
|
|
@@ -179,7 +179,7 @@ function $433b1145b0781e10$export$ecf600387e221c37(options) {
|
|
|
179
179
|
// Use a capturing listener to ensure this runs before useDrag, regardless of
|
|
180
180
|
// the order the props get merged.
|
|
181
181
|
let onDragStartCapture = (e)=>{
|
|
182
|
-
if (modality.current ===
|
|
182
|
+
if (modality.current === 'touch' && longPressEnabledOnPressStart.current) e.preventDefault();
|
|
183
183
|
};
|
|
184
184
|
// Prevent default on link clicks so that we control exactly
|
|
185
185
|
// when they open (to match selection behavior).
|
|
@@ -202,11 +202,11 @@ function $433b1145b0781e10$export$ecf600387e221c37(options) {
|
|
|
202
202
|
}
|
|
203
203
|
function $433b1145b0781e10$var$isActionKey() {
|
|
204
204
|
let event = window.event;
|
|
205
|
-
return (event === null || event === void 0 ? void 0 : event.key) ===
|
|
205
|
+
return (event === null || event === void 0 ? void 0 : event.key) === 'Enter';
|
|
206
206
|
}
|
|
207
207
|
function $433b1145b0781e10$var$isSelectionKey() {
|
|
208
208
|
let event = window.event;
|
|
209
|
-
return (event === null || event === void 0 ? void 0 : event.key) ===
|
|
209
|
+
return (event === null || event === void 0 ? void 0 : event.key) === ' ' || (event === null || event === void 0 ? void 0 : event.code) === 'Space';
|
|
210
210
|
}
|
|
211
211
|
|
|
212
212
|
|