@react-aria/grid 3.9.1-nightly.4623 → 3.9.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/GridKeyboardDelegate.main.js +19 -19
- package/dist/GridKeyboardDelegate.mjs +19 -19
- package/dist/GridKeyboardDelegate.module.js +19 -19
- package/dist/useGrid.main.js +7 -7
- package/dist/useGrid.mjs +7 -7
- package/dist/useGrid.module.js +7 -7
- package/dist/useGridCell.main.js +21 -21
- package/dist/useGridCell.mjs +21 -21
- package/dist/useGridCell.module.js +21 -21
- package/dist/useGridRow.main.js +4 -4
- package/dist/useGridRow.mjs +4 -4
- package/dist/useGridRow.module.js +4 -4
- package/dist/useGridRowGroup.main.js +1 -1
- package/dist/useGridRowGroup.mjs +1 -1
- package/dist/useGridRowGroup.module.js +1 -1
- package/dist/useGridSelectionAnnouncement.main.js +9 -9
- package/dist/useGridSelectionAnnouncement.mjs +9 -9
- package/dist/useGridSelectionAnnouncement.module.js +9 -9
- package/dist/useGridSelectionCheckbox.main.js +2 -2
- package/dist/useGridSelectionCheckbox.mjs +2 -2
- package/dist/useGridSelectionCheckbox.module.js +2 -2
- package/dist/useHighlightSelectionDescription.main.js +4 -4
- package/dist/useHighlightSelectionDescription.mjs +4 -4
- package/dist/useHighlightSelectionDescription.module.js +4 -4
- package/package.json +15 -15
package/dist/useGridCell.main.js
CHANGED
|
@@ -30,7 +30,7 @@ $parcel$export(module.exports, "useGridCell", () => $cf2021be63b01ef4$export$c7e
|
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
function $cf2021be63b01ef4$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
33
|
-
let { node: node, isVirtualized: isVirtualized, focusMode: focusMode =
|
|
33
|
+
let { node: node, isVirtualized: isVirtualized, focusMode: focusMode = 'child', shouldSelectOnPressUp: shouldSelectOnPressUp, onAction: onAction } = props;
|
|
34
34
|
let { direction: direction } = (0, $9yLAi$reactariai18n.useLocale)();
|
|
35
35
|
let { keyboardDelegate: keyboardDelegate, actions: { onCellAction: onCellAction } } = (0, $8ee34951196858d0$exports.gridMap).get(state);
|
|
36
36
|
// We need to track the key of the item at the time it was last focused so that we force
|
|
@@ -40,10 +40,10 @@ function $cf2021be63b01ef4$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
40
40
|
// it is focused, otherwise the cell itself is focused.
|
|
41
41
|
let focus = ()=>{
|
|
42
42
|
let treeWalker = (0, $9yLAi$reactariafocus.getFocusableTreeWalker)(ref.current);
|
|
43
|
-
if (focusMode ===
|
|
43
|
+
if (focusMode === 'child') {
|
|
44
44
|
// If focus is already on a focusable child within the cell, early return so we don't shift focus
|
|
45
45
|
if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) return;
|
|
46
|
-
let focusable = state.selectionManager.childFocusStrategy ===
|
|
46
|
+
let focusable = state.selectionManager.childFocusStrategy === 'last' ? $cf2021be63b01ef4$var$last(treeWalker) : treeWalker.firstChild();
|
|
47
47
|
if (focusable) {
|
|
48
48
|
(0, $9yLAi$reactariafocus.focusSafely)(focusable);
|
|
49
49
|
return;
|
|
@@ -66,12 +66,12 @@ function $cf2021be63b01ef4$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
66
66
|
let walker = (0, $9yLAi$reactariafocus.getFocusableTreeWalker)(ref.current);
|
|
67
67
|
walker.currentNode = document.activeElement;
|
|
68
68
|
switch(e.key){
|
|
69
|
-
case
|
|
69
|
+
case 'ArrowLeft':
|
|
70
70
|
{
|
|
71
71
|
// Find the next focusable element within the cell.
|
|
72
|
-
let focusable = direction ===
|
|
72
|
+
let focusable = direction === 'rtl' ? walker.nextNode() : walker.previousNode();
|
|
73
73
|
// Don't focus the cell itself if focusMode is "child"
|
|
74
|
-
if (focusMode ===
|
|
74
|
+
if (focusMode === 'child' && focusable === ref.current) focusable = null;
|
|
75
75
|
e.preventDefault();
|
|
76
76
|
e.stopPropagation();
|
|
77
77
|
if (focusable) {
|
|
@@ -93,14 +93,14 @@ function $cf2021be63b01ef4$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
93
93
|
ref.current.parentElement.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));
|
|
94
94
|
break;
|
|
95
95
|
}
|
|
96
|
-
if (focusMode ===
|
|
96
|
+
if (focusMode === 'cell' && direction === 'rtl') {
|
|
97
97
|
(0, $9yLAi$reactariafocus.focusSafely)(ref.current);
|
|
98
98
|
(0, $9yLAi$reactariautils.scrollIntoViewport)(ref.current, {
|
|
99
99
|
containingElement: (0, $9yLAi$reactariautils.getScrollParent)(ref.current)
|
|
100
100
|
});
|
|
101
101
|
} else {
|
|
102
102
|
walker.currentNode = ref.current;
|
|
103
|
-
focusable = direction ===
|
|
103
|
+
focusable = direction === 'rtl' ? walker.firstChild() : $cf2021be63b01ef4$var$last(walker);
|
|
104
104
|
if (focusable) {
|
|
105
105
|
(0, $9yLAi$reactariafocus.focusSafely)(focusable);
|
|
106
106
|
(0, $9yLAi$reactariautils.scrollIntoViewport)(focusable, {
|
|
@@ -111,10 +111,10 @@ function $cf2021be63b01ef4$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
111
111
|
}
|
|
112
112
|
break;
|
|
113
113
|
}
|
|
114
|
-
case
|
|
114
|
+
case 'ArrowRight':
|
|
115
115
|
{
|
|
116
|
-
let focusable = direction ===
|
|
117
|
-
if (focusMode ===
|
|
116
|
+
let focusable = direction === 'rtl' ? walker.previousNode() : walker.nextNode();
|
|
117
|
+
if (focusMode === 'child' && focusable === ref.current) focusable = null;
|
|
118
118
|
e.preventDefault();
|
|
119
119
|
e.stopPropagation();
|
|
120
120
|
if (focusable) {
|
|
@@ -131,14 +131,14 @@ function $cf2021be63b01ef4$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
131
131
|
ref.current.parentElement.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));
|
|
132
132
|
break;
|
|
133
133
|
}
|
|
134
|
-
if (focusMode ===
|
|
134
|
+
if (focusMode === 'cell' && direction === 'ltr') {
|
|
135
135
|
(0, $9yLAi$reactariafocus.focusSafely)(ref.current);
|
|
136
136
|
(0, $9yLAi$reactariautils.scrollIntoViewport)(ref.current, {
|
|
137
137
|
containingElement: (0, $9yLAi$reactariautils.getScrollParent)(ref.current)
|
|
138
138
|
});
|
|
139
139
|
} else {
|
|
140
140
|
walker.currentNode = ref.current;
|
|
141
|
-
focusable = direction ===
|
|
141
|
+
focusable = direction === 'rtl' ? $cf2021be63b01ef4$var$last(walker) : walker.firstChild();
|
|
142
142
|
if (focusable) {
|
|
143
143
|
(0, $9yLAi$reactariafocus.focusSafely)(focusable);
|
|
144
144
|
(0, $9yLAi$reactariautils.scrollIntoViewport)(focusable, {
|
|
@@ -149,8 +149,8 @@ function $cf2021be63b01ef4$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
149
149
|
}
|
|
150
150
|
break;
|
|
151
151
|
}
|
|
152
|
-
case
|
|
153
|
-
case
|
|
152
|
+
case 'ArrowUp':
|
|
153
|
+
case 'ArrowDown':
|
|
154
154
|
// Prevent this event from reaching cell children, e.g. menu buttons. We want arrow keys to navigate
|
|
155
155
|
// to the cell above/below instead. We need to re-dispatch the event from a higher parent so it still
|
|
156
156
|
// bubbles and gets handled by useSelectableCollection.
|
|
@@ -179,26 +179,26 @@ function $cf2021be63b01ef4$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
179
179
|
// If the cell itself is focused, wait a frame so that focus finishes propagatating
|
|
180
180
|
// up to the tree, and move focus to a focusable child if possible.
|
|
181
181
|
requestAnimationFrame(()=>{
|
|
182
|
-
if (focusMode ===
|
|
182
|
+
if (focusMode === 'child' && document.activeElement === ref.current) focus();
|
|
183
183
|
});
|
|
184
184
|
};
|
|
185
185
|
let gridCellProps = (0, $9yLAi$reactariautils.mergeProps)(itemProps, {
|
|
186
|
-
role:
|
|
186
|
+
role: 'gridcell',
|
|
187
187
|
onKeyDownCapture: onKeyDownCapture,
|
|
188
188
|
onFocus: onFocus
|
|
189
189
|
});
|
|
190
190
|
var _node_colIndex;
|
|
191
|
-
if (isVirtualized) gridCellProps[
|
|
191
|
+
if (isVirtualized) gridCellProps['aria-colindex'] = ((_node_colIndex = node.colIndex) !== null && _node_colIndex !== void 0 ? _node_colIndex : node.index) + 1; // aria-colindex is 1-based
|
|
192
192
|
// When pressing with a pointer and cell selection is not enabled, usePress will be applied to the
|
|
193
193
|
// row rather than the cell. However, when the row is draggable, usePress cannot preventDefault
|
|
194
194
|
// on pointer down, so the browser will try to focus the cell which has a tabIndex applied.
|
|
195
195
|
// To avoid this, remove the tabIndex from the cell briefly on pointer down.
|
|
196
196
|
if (shouldSelectOnPressUp && gridCellProps.tabIndex != null && gridCellProps.onPointerDown == null) gridCellProps.onPointerDown = (e)=>{
|
|
197
197
|
let el = e.currentTarget;
|
|
198
|
-
let tabindex = el.getAttribute(
|
|
199
|
-
el.removeAttribute(
|
|
198
|
+
let tabindex = el.getAttribute('tabindex');
|
|
199
|
+
el.removeAttribute('tabindex');
|
|
200
200
|
requestAnimationFrame(()=>{
|
|
201
|
-
el.setAttribute(
|
|
201
|
+
el.setAttribute('tabindex', tabindex);
|
|
202
202
|
});
|
|
203
203
|
};
|
|
204
204
|
return {
|
package/dist/useGridCell.mjs
CHANGED
|
@@ -24,7 +24,7 @@ import {useSelectableItem as $j4Qbl$useSelectableItem} from "@react-aria/selecti
|
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
function $ab90dcbc1b5466d0$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
27
|
-
let { node: node, isVirtualized: isVirtualized, focusMode: focusMode =
|
|
27
|
+
let { node: node, isVirtualized: isVirtualized, focusMode: focusMode = 'child', shouldSelectOnPressUp: shouldSelectOnPressUp, onAction: onAction } = props;
|
|
28
28
|
let { direction: direction } = (0, $j4Qbl$useLocale)();
|
|
29
29
|
let { keyboardDelegate: keyboardDelegate, actions: { onCellAction: onCellAction } } = (0, $1af922eb41e03c8f$export$e6235c0d09b995d0).get(state);
|
|
30
30
|
// We need to track the key of the item at the time it was last focused so that we force
|
|
@@ -34,10 +34,10 @@ function $ab90dcbc1b5466d0$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
34
34
|
// it is focused, otherwise the cell itself is focused.
|
|
35
35
|
let focus = ()=>{
|
|
36
36
|
let treeWalker = (0, $j4Qbl$getFocusableTreeWalker)(ref.current);
|
|
37
|
-
if (focusMode ===
|
|
37
|
+
if (focusMode === 'child') {
|
|
38
38
|
// If focus is already on a focusable child within the cell, early return so we don't shift focus
|
|
39
39
|
if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) return;
|
|
40
|
-
let focusable = state.selectionManager.childFocusStrategy ===
|
|
40
|
+
let focusable = state.selectionManager.childFocusStrategy === 'last' ? $ab90dcbc1b5466d0$var$last(treeWalker) : treeWalker.firstChild();
|
|
41
41
|
if (focusable) {
|
|
42
42
|
(0, $j4Qbl$focusSafely)(focusable);
|
|
43
43
|
return;
|
|
@@ -60,12 +60,12 @@ function $ab90dcbc1b5466d0$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
60
60
|
let walker = (0, $j4Qbl$getFocusableTreeWalker)(ref.current);
|
|
61
61
|
walker.currentNode = document.activeElement;
|
|
62
62
|
switch(e.key){
|
|
63
|
-
case
|
|
63
|
+
case 'ArrowLeft':
|
|
64
64
|
{
|
|
65
65
|
// Find the next focusable element within the cell.
|
|
66
|
-
let focusable = direction ===
|
|
66
|
+
let focusable = direction === 'rtl' ? walker.nextNode() : walker.previousNode();
|
|
67
67
|
// Don't focus the cell itself if focusMode is "child"
|
|
68
|
-
if (focusMode ===
|
|
68
|
+
if (focusMode === 'child' && focusable === ref.current) focusable = null;
|
|
69
69
|
e.preventDefault();
|
|
70
70
|
e.stopPropagation();
|
|
71
71
|
if (focusable) {
|
|
@@ -87,14 +87,14 @@ function $ab90dcbc1b5466d0$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
87
87
|
ref.current.parentElement.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));
|
|
88
88
|
break;
|
|
89
89
|
}
|
|
90
|
-
if (focusMode ===
|
|
90
|
+
if (focusMode === 'cell' && direction === 'rtl') {
|
|
91
91
|
(0, $j4Qbl$focusSafely)(ref.current);
|
|
92
92
|
(0, $j4Qbl$scrollIntoViewport)(ref.current, {
|
|
93
93
|
containingElement: (0, $j4Qbl$getScrollParent)(ref.current)
|
|
94
94
|
});
|
|
95
95
|
} else {
|
|
96
96
|
walker.currentNode = ref.current;
|
|
97
|
-
focusable = direction ===
|
|
97
|
+
focusable = direction === 'rtl' ? walker.firstChild() : $ab90dcbc1b5466d0$var$last(walker);
|
|
98
98
|
if (focusable) {
|
|
99
99
|
(0, $j4Qbl$focusSafely)(focusable);
|
|
100
100
|
(0, $j4Qbl$scrollIntoViewport)(focusable, {
|
|
@@ -105,10 +105,10 @@ function $ab90dcbc1b5466d0$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
105
105
|
}
|
|
106
106
|
break;
|
|
107
107
|
}
|
|
108
|
-
case
|
|
108
|
+
case 'ArrowRight':
|
|
109
109
|
{
|
|
110
|
-
let focusable = direction ===
|
|
111
|
-
if (focusMode ===
|
|
110
|
+
let focusable = direction === 'rtl' ? walker.previousNode() : walker.nextNode();
|
|
111
|
+
if (focusMode === 'child' && focusable === ref.current) focusable = null;
|
|
112
112
|
e.preventDefault();
|
|
113
113
|
e.stopPropagation();
|
|
114
114
|
if (focusable) {
|
|
@@ -125,14 +125,14 @@ function $ab90dcbc1b5466d0$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
125
125
|
ref.current.parentElement.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));
|
|
126
126
|
break;
|
|
127
127
|
}
|
|
128
|
-
if (focusMode ===
|
|
128
|
+
if (focusMode === 'cell' && direction === 'ltr') {
|
|
129
129
|
(0, $j4Qbl$focusSafely)(ref.current);
|
|
130
130
|
(0, $j4Qbl$scrollIntoViewport)(ref.current, {
|
|
131
131
|
containingElement: (0, $j4Qbl$getScrollParent)(ref.current)
|
|
132
132
|
});
|
|
133
133
|
} else {
|
|
134
134
|
walker.currentNode = ref.current;
|
|
135
|
-
focusable = direction ===
|
|
135
|
+
focusable = direction === 'rtl' ? $ab90dcbc1b5466d0$var$last(walker) : walker.firstChild();
|
|
136
136
|
if (focusable) {
|
|
137
137
|
(0, $j4Qbl$focusSafely)(focusable);
|
|
138
138
|
(0, $j4Qbl$scrollIntoViewport)(focusable, {
|
|
@@ -143,8 +143,8 @@ function $ab90dcbc1b5466d0$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
143
143
|
}
|
|
144
144
|
break;
|
|
145
145
|
}
|
|
146
|
-
case
|
|
147
|
-
case
|
|
146
|
+
case 'ArrowUp':
|
|
147
|
+
case 'ArrowDown':
|
|
148
148
|
// Prevent this event from reaching cell children, e.g. menu buttons. We want arrow keys to navigate
|
|
149
149
|
// to the cell above/below instead. We need to re-dispatch the event from a higher parent so it still
|
|
150
150
|
// bubbles and gets handled by useSelectableCollection.
|
|
@@ -173,26 +173,26 @@ function $ab90dcbc1b5466d0$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
173
173
|
// If the cell itself is focused, wait a frame so that focus finishes propagatating
|
|
174
174
|
// up to the tree, and move focus to a focusable child if possible.
|
|
175
175
|
requestAnimationFrame(()=>{
|
|
176
|
-
if (focusMode ===
|
|
176
|
+
if (focusMode === 'child' && document.activeElement === ref.current) focus();
|
|
177
177
|
});
|
|
178
178
|
};
|
|
179
179
|
let gridCellProps = (0, $j4Qbl$mergeProps)(itemProps, {
|
|
180
|
-
role:
|
|
180
|
+
role: 'gridcell',
|
|
181
181
|
onKeyDownCapture: onKeyDownCapture,
|
|
182
182
|
onFocus: onFocus
|
|
183
183
|
});
|
|
184
184
|
var _node_colIndex;
|
|
185
|
-
if (isVirtualized) gridCellProps[
|
|
185
|
+
if (isVirtualized) gridCellProps['aria-colindex'] = ((_node_colIndex = node.colIndex) !== null && _node_colIndex !== void 0 ? _node_colIndex : node.index) + 1; // aria-colindex is 1-based
|
|
186
186
|
// When pressing with a pointer and cell selection is not enabled, usePress will be applied to the
|
|
187
187
|
// row rather than the cell. However, when the row is draggable, usePress cannot preventDefault
|
|
188
188
|
// on pointer down, so the browser will try to focus the cell which has a tabIndex applied.
|
|
189
189
|
// To avoid this, remove the tabIndex from the cell briefly on pointer down.
|
|
190
190
|
if (shouldSelectOnPressUp && gridCellProps.tabIndex != null && gridCellProps.onPointerDown == null) gridCellProps.onPointerDown = (e)=>{
|
|
191
191
|
let el = e.currentTarget;
|
|
192
|
-
let tabindex = el.getAttribute(
|
|
193
|
-
el.removeAttribute(
|
|
192
|
+
let tabindex = el.getAttribute('tabindex');
|
|
193
|
+
el.removeAttribute('tabindex');
|
|
194
194
|
requestAnimationFrame(()=>{
|
|
195
|
-
el.setAttribute(
|
|
195
|
+
el.setAttribute('tabindex', tabindex);
|
|
196
196
|
});
|
|
197
197
|
};
|
|
198
198
|
return {
|
|
@@ -24,7 +24,7 @@ import {useSelectableItem as $j4Qbl$useSelectableItem} from "@react-aria/selecti
|
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
function $ab90dcbc1b5466d0$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
27
|
-
let { node: node, isVirtualized: isVirtualized, focusMode: focusMode =
|
|
27
|
+
let { node: node, isVirtualized: isVirtualized, focusMode: focusMode = 'child', shouldSelectOnPressUp: shouldSelectOnPressUp, onAction: onAction } = props;
|
|
28
28
|
let { direction: direction } = (0, $j4Qbl$useLocale)();
|
|
29
29
|
let { keyboardDelegate: keyboardDelegate, actions: { onCellAction: onCellAction } } = (0, $1af922eb41e03c8f$export$e6235c0d09b995d0).get(state);
|
|
30
30
|
// We need to track the key of the item at the time it was last focused so that we force
|
|
@@ -34,10 +34,10 @@ function $ab90dcbc1b5466d0$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
34
34
|
// it is focused, otherwise the cell itself is focused.
|
|
35
35
|
let focus = ()=>{
|
|
36
36
|
let treeWalker = (0, $j4Qbl$getFocusableTreeWalker)(ref.current);
|
|
37
|
-
if (focusMode ===
|
|
37
|
+
if (focusMode === 'child') {
|
|
38
38
|
// If focus is already on a focusable child within the cell, early return so we don't shift focus
|
|
39
39
|
if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) return;
|
|
40
|
-
let focusable = state.selectionManager.childFocusStrategy ===
|
|
40
|
+
let focusable = state.selectionManager.childFocusStrategy === 'last' ? $ab90dcbc1b5466d0$var$last(treeWalker) : treeWalker.firstChild();
|
|
41
41
|
if (focusable) {
|
|
42
42
|
(0, $j4Qbl$focusSafely)(focusable);
|
|
43
43
|
return;
|
|
@@ -60,12 +60,12 @@ function $ab90dcbc1b5466d0$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
60
60
|
let walker = (0, $j4Qbl$getFocusableTreeWalker)(ref.current);
|
|
61
61
|
walker.currentNode = document.activeElement;
|
|
62
62
|
switch(e.key){
|
|
63
|
-
case
|
|
63
|
+
case 'ArrowLeft':
|
|
64
64
|
{
|
|
65
65
|
// Find the next focusable element within the cell.
|
|
66
|
-
let focusable = direction ===
|
|
66
|
+
let focusable = direction === 'rtl' ? walker.nextNode() : walker.previousNode();
|
|
67
67
|
// Don't focus the cell itself if focusMode is "child"
|
|
68
|
-
if (focusMode ===
|
|
68
|
+
if (focusMode === 'child' && focusable === ref.current) focusable = null;
|
|
69
69
|
e.preventDefault();
|
|
70
70
|
e.stopPropagation();
|
|
71
71
|
if (focusable) {
|
|
@@ -87,14 +87,14 @@ function $ab90dcbc1b5466d0$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
87
87
|
ref.current.parentElement.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));
|
|
88
88
|
break;
|
|
89
89
|
}
|
|
90
|
-
if (focusMode ===
|
|
90
|
+
if (focusMode === 'cell' && direction === 'rtl') {
|
|
91
91
|
(0, $j4Qbl$focusSafely)(ref.current);
|
|
92
92
|
(0, $j4Qbl$scrollIntoViewport)(ref.current, {
|
|
93
93
|
containingElement: (0, $j4Qbl$getScrollParent)(ref.current)
|
|
94
94
|
});
|
|
95
95
|
} else {
|
|
96
96
|
walker.currentNode = ref.current;
|
|
97
|
-
focusable = direction ===
|
|
97
|
+
focusable = direction === 'rtl' ? walker.firstChild() : $ab90dcbc1b5466d0$var$last(walker);
|
|
98
98
|
if (focusable) {
|
|
99
99
|
(0, $j4Qbl$focusSafely)(focusable);
|
|
100
100
|
(0, $j4Qbl$scrollIntoViewport)(focusable, {
|
|
@@ -105,10 +105,10 @@ function $ab90dcbc1b5466d0$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
105
105
|
}
|
|
106
106
|
break;
|
|
107
107
|
}
|
|
108
|
-
case
|
|
108
|
+
case 'ArrowRight':
|
|
109
109
|
{
|
|
110
|
-
let focusable = direction ===
|
|
111
|
-
if (focusMode ===
|
|
110
|
+
let focusable = direction === 'rtl' ? walker.previousNode() : walker.nextNode();
|
|
111
|
+
if (focusMode === 'child' && focusable === ref.current) focusable = null;
|
|
112
112
|
e.preventDefault();
|
|
113
113
|
e.stopPropagation();
|
|
114
114
|
if (focusable) {
|
|
@@ -125,14 +125,14 @@ function $ab90dcbc1b5466d0$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
125
125
|
ref.current.parentElement.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));
|
|
126
126
|
break;
|
|
127
127
|
}
|
|
128
|
-
if (focusMode ===
|
|
128
|
+
if (focusMode === 'cell' && direction === 'ltr') {
|
|
129
129
|
(0, $j4Qbl$focusSafely)(ref.current);
|
|
130
130
|
(0, $j4Qbl$scrollIntoViewport)(ref.current, {
|
|
131
131
|
containingElement: (0, $j4Qbl$getScrollParent)(ref.current)
|
|
132
132
|
});
|
|
133
133
|
} else {
|
|
134
134
|
walker.currentNode = ref.current;
|
|
135
|
-
focusable = direction ===
|
|
135
|
+
focusable = direction === 'rtl' ? $ab90dcbc1b5466d0$var$last(walker) : walker.firstChild();
|
|
136
136
|
if (focusable) {
|
|
137
137
|
(0, $j4Qbl$focusSafely)(focusable);
|
|
138
138
|
(0, $j4Qbl$scrollIntoViewport)(focusable, {
|
|
@@ -143,8 +143,8 @@ function $ab90dcbc1b5466d0$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
143
143
|
}
|
|
144
144
|
break;
|
|
145
145
|
}
|
|
146
|
-
case
|
|
147
|
-
case
|
|
146
|
+
case 'ArrowUp':
|
|
147
|
+
case 'ArrowDown':
|
|
148
148
|
// Prevent this event from reaching cell children, e.g. menu buttons. We want arrow keys to navigate
|
|
149
149
|
// to the cell above/below instead. We need to re-dispatch the event from a higher parent so it still
|
|
150
150
|
// bubbles and gets handled by useSelectableCollection.
|
|
@@ -173,26 +173,26 @@ function $ab90dcbc1b5466d0$export$c7e10bfc0c59f67c(props, state, ref) {
|
|
|
173
173
|
// If the cell itself is focused, wait a frame so that focus finishes propagatating
|
|
174
174
|
// up to the tree, and move focus to a focusable child if possible.
|
|
175
175
|
requestAnimationFrame(()=>{
|
|
176
|
-
if (focusMode ===
|
|
176
|
+
if (focusMode === 'child' && document.activeElement === ref.current) focus();
|
|
177
177
|
});
|
|
178
178
|
};
|
|
179
179
|
let gridCellProps = (0, $j4Qbl$mergeProps)(itemProps, {
|
|
180
|
-
role:
|
|
180
|
+
role: 'gridcell',
|
|
181
181
|
onKeyDownCapture: onKeyDownCapture,
|
|
182
182
|
onFocus: onFocus
|
|
183
183
|
});
|
|
184
184
|
var _node_colIndex;
|
|
185
|
-
if (isVirtualized) gridCellProps[
|
|
185
|
+
if (isVirtualized) gridCellProps['aria-colindex'] = ((_node_colIndex = node.colIndex) !== null && _node_colIndex !== void 0 ? _node_colIndex : node.index) + 1; // aria-colindex is 1-based
|
|
186
186
|
// When pressing with a pointer and cell selection is not enabled, usePress will be applied to the
|
|
187
187
|
// row rather than the cell. However, when the row is draggable, usePress cannot preventDefault
|
|
188
188
|
// on pointer down, so the browser will try to focus the cell which has a tabIndex applied.
|
|
189
189
|
// To avoid this, remove the tabIndex from the cell briefly on pointer down.
|
|
190
190
|
if (shouldSelectOnPressUp && gridCellProps.tabIndex != null && gridCellProps.onPointerDown == null) gridCellProps.onPointerDown = (e)=>{
|
|
191
191
|
let el = e.currentTarget;
|
|
192
|
-
let tabindex = el.getAttribute(
|
|
193
|
-
el.removeAttribute(
|
|
192
|
+
let tabindex = el.getAttribute('tabindex');
|
|
193
|
+
el.removeAttribute('tabindex');
|
|
194
194
|
requestAnimationFrame(()=>{
|
|
195
|
-
el.setAttribute(
|
|
195
|
+
el.setAttribute('tabindex', tabindex);
|
|
196
196
|
});
|
|
197
197
|
};
|
|
198
198
|
return {
|
package/dist/useGridRow.main.js
CHANGED
|
@@ -37,12 +37,12 @@ function $eed398987c639831$export$96357d5a73f686fa(props, state, ref) {
|
|
|
37
37
|
});
|
|
38
38
|
let isSelected = state.selectionManager.isSelected(node.key);
|
|
39
39
|
let rowProps = {
|
|
40
|
-
role:
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
role: 'row',
|
|
41
|
+
'aria-selected': state.selectionManager.selectionMode !== 'none' ? isSelected : undefined,
|
|
42
|
+
'aria-disabled': states.isDisabled || undefined,
|
|
43
43
|
...itemProps
|
|
44
44
|
};
|
|
45
|
-
if (isVirtualized) rowProps[
|
|
45
|
+
if (isVirtualized) rowProps['aria-rowindex'] = node.index + 1; // aria-rowindex is 1 based
|
|
46
46
|
return {
|
|
47
47
|
rowProps: rowProps,
|
|
48
48
|
...states
|
package/dist/useGridRow.mjs
CHANGED
|
@@ -31,12 +31,12 @@ function $4159a7a9cbb0cc18$export$96357d5a73f686fa(props, state, ref) {
|
|
|
31
31
|
});
|
|
32
32
|
let isSelected = state.selectionManager.isSelected(node.key);
|
|
33
33
|
let rowProps = {
|
|
34
|
-
role:
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
role: 'row',
|
|
35
|
+
'aria-selected': state.selectionManager.selectionMode !== 'none' ? isSelected : undefined,
|
|
36
|
+
'aria-disabled': states.isDisabled || undefined,
|
|
37
37
|
...itemProps
|
|
38
38
|
};
|
|
39
|
-
if (isVirtualized) rowProps[
|
|
39
|
+
if (isVirtualized) rowProps['aria-rowindex'] = node.index + 1; // aria-rowindex is 1 based
|
|
40
40
|
return {
|
|
41
41
|
rowProps: rowProps,
|
|
42
42
|
...states
|
|
@@ -31,12 +31,12 @@ function $4159a7a9cbb0cc18$export$96357d5a73f686fa(props, state, ref) {
|
|
|
31
31
|
});
|
|
32
32
|
let isSelected = state.selectionManager.isSelected(node.key);
|
|
33
33
|
let rowProps = {
|
|
34
|
-
role:
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
role: 'row',
|
|
35
|
+
'aria-selected': state.selectionManager.selectionMode !== 'none' ? isSelected : undefined,
|
|
36
|
+
'aria-disabled': states.isDisabled || undefined,
|
|
37
37
|
...itemProps
|
|
38
38
|
};
|
|
39
|
-
if (isVirtualized) rowProps[
|
|
39
|
+
if (isVirtualized) rowProps['aria-rowindex'] = node.index + 1; // aria-rowindex is 1 based
|
|
40
40
|
return {
|
|
41
41
|
rowProps: rowProps,
|
|
42
42
|
...states
|
package/dist/useGridRowGroup.mjs
CHANGED
|
@@ -35,7 +35,7 @@ function $1eb174acfe8a0f16$export$137e594ef3218a10(props, state) {
|
|
|
35
35
|
var _state_collection_getTextValue1;
|
|
36
36
|
return (_state_collection_getTextValue1 = (_state_collection_getTextValue = (_state_collection = state.collection).getTextValue) === null || _state_collection_getTextValue === void 0 ? void 0 : _state_collection_getTextValue.call(_state_collection, key)) !== null && _state_collection_getTextValue1 !== void 0 ? _state_collection_getTextValue1 : (_state_collection_getItem = state.collection.getItem(key)) === null || _state_collection_getItem === void 0 ? void 0 : _state_collection_getItem.textValue;
|
|
37
37
|
} } = props;
|
|
38
|
-
let stringFormatter = (0, $iMOYA$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($085250522aa37816$exports))),
|
|
38
|
+
let stringFormatter = (0, $iMOYA$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($085250522aa37816$exports))), '@react-aria/grid');
|
|
39
39
|
// Many screen readers do not announce when items in a grid are selected/deselected.
|
|
40
40
|
// We do this using an ARIA live region.
|
|
41
41
|
let selection = state.selectionManager.rawSelection;
|
|
@@ -49,35 +49,35 @@ function $1eb174acfe8a0f16$export$137e594ef3218a10(props, state) {
|
|
|
49
49
|
let addedKeys = $1eb174acfe8a0f16$var$diffSelection(selection, lastSelection.current);
|
|
50
50
|
let removedKeys = $1eb174acfe8a0f16$var$diffSelection(lastSelection.current, selection);
|
|
51
51
|
// If adding or removing a single row from the selection, announce the name of that item.
|
|
52
|
-
let isReplace = state.selectionManager.selectionBehavior ===
|
|
52
|
+
let isReplace = state.selectionManager.selectionBehavior === 'replace';
|
|
53
53
|
let messages = [];
|
|
54
54
|
if (state.selectionManager.selectedKeys.size === 1 && isReplace) {
|
|
55
55
|
if (state.collection.getItem(state.selectionManager.selectedKeys.keys().next().value)) {
|
|
56
56
|
let currentSelectionText = getRowText(state.selectionManager.selectedKeys.keys().next().value);
|
|
57
|
-
if (currentSelectionText) messages.push(stringFormatter.format(
|
|
57
|
+
if (currentSelectionText) messages.push(stringFormatter.format('selectedItem', {
|
|
58
58
|
item: currentSelectionText
|
|
59
59
|
}));
|
|
60
60
|
}
|
|
61
61
|
} else if (addedKeys.size === 1 && removedKeys.size === 0) {
|
|
62
62
|
let addedText = getRowText(addedKeys.keys().next().value);
|
|
63
|
-
if (addedText) messages.push(stringFormatter.format(
|
|
63
|
+
if (addedText) messages.push(stringFormatter.format('selectedItem', {
|
|
64
64
|
item: addedText
|
|
65
65
|
}));
|
|
66
66
|
} else if (removedKeys.size === 1 && addedKeys.size === 0) {
|
|
67
67
|
if (state.collection.getItem(removedKeys.keys().next().value)) {
|
|
68
68
|
let removedText = getRowText(removedKeys.keys().next().value);
|
|
69
|
-
if (removedText) messages.push(stringFormatter.format(
|
|
69
|
+
if (removedText) messages.push(stringFormatter.format('deselectedItem', {
|
|
70
70
|
item: removedText
|
|
71
71
|
}));
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
// Announce how many items are selected, except when selecting the first item.
|
|
75
|
-
if (state.selectionManager.selectionMode ===
|
|
76
|
-
if (messages.length === 0 || selection ===
|
|
75
|
+
if (state.selectionManager.selectionMode === 'multiple') {
|
|
76
|
+
if (messages.length === 0 || selection === 'all' || selection.size > 1 || lastSelection.current === 'all' || ((_lastSelection_current = lastSelection.current) === null || _lastSelection_current === void 0 ? void 0 : _lastSelection_current.size) > 1) messages.push(selection === 'all' ? stringFormatter.format('selectedAll') : stringFormatter.format('selectedCount', {
|
|
77
77
|
count: selection.size
|
|
78
78
|
}));
|
|
79
79
|
}
|
|
80
|
-
if (messages.length > 0) (0, $iMOYA$reactarialiveannouncer.announce)(messages.join(
|
|
80
|
+
if (messages.length > 0) (0, $iMOYA$reactarialiveannouncer.announce)(messages.join(' '));
|
|
81
81
|
lastSelection.current = selection;
|
|
82
82
|
}, [
|
|
83
83
|
selection
|
|
@@ -85,7 +85,7 @@ function $1eb174acfe8a0f16$export$137e594ef3218a10(props, state) {
|
|
|
85
85
|
}
|
|
86
86
|
function $1eb174acfe8a0f16$var$diffSelection(a, b) {
|
|
87
87
|
let res = new Set();
|
|
88
|
-
if (a ===
|
|
88
|
+
if (a === 'all' || b === 'all') return res;
|
|
89
89
|
for (let key of a.keys())if (!b.has(key)) res.add(key);
|
|
90
90
|
return res;
|
|
91
91
|
}
|
|
@@ -29,7 +29,7 @@ function $92599c3fd427b763$export$137e594ef3218a10(props, state) {
|
|
|
29
29
|
var _state_collection_getTextValue1;
|
|
30
30
|
return (_state_collection_getTextValue1 = (_state_collection_getTextValue = (_state_collection = state.collection).getTextValue) === null || _state_collection_getTextValue === void 0 ? void 0 : _state_collection_getTextValue.call(_state_collection, key)) !== null && _state_collection_getTextValue1 !== void 0 ? _state_collection_getTextValue1 : (_state_collection_getItem = state.collection.getItem(key)) === null || _state_collection_getItem === void 0 ? void 0 : _state_collection_getItem.textValue;
|
|
31
31
|
} } = props;
|
|
32
|
-
let stringFormatter = (0, $4stjr$useLocalizedStringFormatter)((0, ($parcel$interopDefault($4stjr$intlStringsmodulejs))),
|
|
32
|
+
let stringFormatter = (0, $4stjr$useLocalizedStringFormatter)((0, ($parcel$interopDefault($4stjr$intlStringsmodulejs))), '@react-aria/grid');
|
|
33
33
|
// Many screen readers do not announce when items in a grid are selected/deselected.
|
|
34
34
|
// We do this using an ARIA live region.
|
|
35
35
|
let selection = state.selectionManager.rawSelection;
|
|
@@ -43,35 +43,35 @@ function $92599c3fd427b763$export$137e594ef3218a10(props, state) {
|
|
|
43
43
|
let addedKeys = $92599c3fd427b763$var$diffSelection(selection, lastSelection.current);
|
|
44
44
|
let removedKeys = $92599c3fd427b763$var$diffSelection(lastSelection.current, selection);
|
|
45
45
|
// If adding or removing a single row from the selection, announce the name of that item.
|
|
46
|
-
let isReplace = state.selectionManager.selectionBehavior ===
|
|
46
|
+
let isReplace = state.selectionManager.selectionBehavior === 'replace';
|
|
47
47
|
let messages = [];
|
|
48
48
|
if (state.selectionManager.selectedKeys.size === 1 && isReplace) {
|
|
49
49
|
if (state.collection.getItem(state.selectionManager.selectedKeys.keys().next().value)) {
|
|
50
50
|
let currentSelectionText = getRowText(state.selectionManager.selectedKeys.keys().next().value);
|
|
51
|
-
if (currentSelectionText) messages.push(stringFormatter.format(
|
|
51
|
+
if (currentSelectionText) messages.push(stringFormatter.format('selectedItem', {
|
|
52
52
|
item: currentSelectionText
|
|
53
53
|
}));
|
|
54
54
|
}
|
|
55
55
|
} else if (addedKeys.size === 1 && removedKeys.size === 0) {
|
|
56
56
|
let addedText = getRowText(addedKeys.keys().next().value);
|
|
57
|
-
if (addedText) messages.push(stringFormatter.format(
|
|
57
|
+
if (addedText) messages.push(stringFormatter.format('selectedItem', {
|
|
58
58
|
item: addedText
|
|
59
59
|
}));
|
|
60
60
|
} else if (removedKeys.size === 1 && addedKeys.size === 0) {
|
|
61
61
|
if (state.collection.getItem(removedKeys.keys().next().value)) {
|
|
62
62
|
let removedText = getRowText(removedKeys.keys().next().value);
|
|
63
|
-
if (removedText) messages.push(stringFormatter.format(
|
|
63
|
+
if (removedText) messages.push(stringFormatter.format('deselectedItem', {
|
|
64
64
|
item: removedText
|
|
65
65
|
}));
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
// Announce how many items are selected, except when selecting the first item.
|
|
69
|
-
if (state.selectionManager.selectionMode ===
|
|
70
|
-
if (messages.length === 0 || selection ===
|
|
69
|
+
if (state.selectionManager.selectionMode === 'multiple') {
|
|
70
|
+
if (messages.length === 0 || selection === 'all' || selection.size > 1 || lastSelection.current === 'all' || ((_lastSelection_current = lastSelection.current) === null || _lastSelection_current === void 0 ? void 0 : _lastSelection_current.size) > 1) messages.push(selection === 'all' ? stringFormatter.format('selectedAll') : stringFormatter.format('selectedCount', {
|
|
71
71
|
count: selection.size
|
|
72
72
|
}));
|
|
73
73
|
}
|
|
74
|
-
if (messages.length > 0) (0, $4stjr$announce)(messages.join(
|
|
74
|
+
if (messages.length > 0) (0, $4stjr$announce)(messages.join(' '));
|
|
75
75
|
lastSelection.current = selection;
|
|
76
76
|
}, [
|
|
77
77
|
selection
|
|
@@ -79,7 +79,7 @@ function $92599c3fd427b763$export$137e594ef3218a10(props, state) {
|
|
|
79
79
|
}
|
|
80
80
|
function $92599c3fd427b763$var$diffSelection(a, b) {
|
|
81
81
|
let res = new Set();
|
|
82
|
-
if (a ===
|
|
82
|
+
if (a === 'all' || b === 'all') return res;
|
|
83
83
|
for (let key of a.keys())if (!b.has(key)) res.add(key);
|
|
84
84
|
return res;
|
|
85
85
|
}
|