@react-aria/gridlist 3.8.1-nightly.4624 → 3.8.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/useGridList.main.js +7 -7
- package/dist/useGridList.mjs +7 -7
- package/dist/useGridList.module.js +7 -7
- package/dist/useGridListItem.main.js +31 -31
- package/dist/useGridListItem.mjs +31 -31
- package/dist/useGridListItem.module.js +31 -31
- package/dist/useGridListSelectionCheckbox.main.js +1 -1
- package/dist/useGridListSelectionCheckbox.mjs +1 -1
- package/dist/useGridListSelectionCheckbox.module.js +1 -1
- package/dist/utils.main.js +3 -3
- package/dist/utils.mjs +3 -3
- package/dist/utils.module.js +3 -3
- package/package.json +12 -12
package/dist/useGridList.main.js
CHANGED
|
@@ -26,8 +26,8 @@ $parcel$export(module.exports, "useGridList", () => $acf209ae814f1c93$export$664
|
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
function $acf209ae814f1c93$export$664f9155035607eb(props, state, ref) {
|
|
29
|
-
let { isVirtualized: isVirtualized, keyboardDelegate: keyboardDelegate, onAction: onAction, linkBehavior: linkBehavior =
|
|
30
|
-
if (!props[
|
|
29
|
+
let { isVirtualized: isVirtualized, keyboardDelegate: keyboardDelegate, onAction: onAction, linkBehavior: linkBehavior = 'action' } = props;
|
|
30
|
+
if (!props['aria-label'] && !props['aria-labelledby']) console.warn('An aria-label or aria-labelledby prop is required for accessibility.');
|
|
31
31
|
let { listProps: listProps } = (0, $i2dnl$reactariaselection.useSelectableList)({
|
|
32
32
|
selectionManager: state.selectionManager,
|
|
33
33
|
collection: state.collection,
|
|
@@ -35,7 +35,7 @@ function $acf209ae814f1c93$export$664f9155035607eb(props, state, ref) {
|
|
|
35
35
|
ref: ref,
|
|
36
36
|
keyboardDelegate: keyboardDelegate,
|
|
37
37
|
isVirtualized: isVirtualized,
|
|
38
|
-
selectOnFocus: state.selectionManager.selectionBehavior ===
|
|
38
|
+
selectOnFocus: state.selectionManager.selectionBehavior === 'replace',
|
|
39
39
|
shouldFocusWrap: props.shouldFocusWrap,
|
|
40
40
|
linkBehavior: linkBehavior
|
|
41
41
|
});
|
|
@@ -56,16 +56,16 @@ function $acf209ae814f1c93$export$664f9155035607eb(props, state, ref) {
|
|
|
56
56
|
labelable: true
|
|
57
57
|
});
|
|
58
58
|
let gridProps = (0, $i2dnl$reactariautils.mergeProps)(domProps, {
|
|
59
|
-
role:
|
|
59
|
+
role: 'grid',
|
|
60
60
|
id: id,
|
|
61
|
-
|
|
61
|
+
'aria-multiselectable': state.selectionManager.selectionMode === 'multiple' ? 'true' : undefined
|
|
62
62
|
}, // If collection is empty, make sure the grid is tabbable unless there is a child tabbable element.
|
|
63
63
|
state.collection.size === 0 ? {
|
|
64
64
|
tabIndex: hasTabbableChild ? -1 : 0
|
|
65
65
|
} : listProps, descriptionProps);
|
|
66
66
|
if (isVirtualized) {
|
|
67
|
-
gridProps[
|
|
68
|
-
gridProps[
|
|
67
|
+
gridProps['aria-rowcount'] = state.collection.size;
|
|
68
|
+
gridProps['aria-colcount'] = 1;
|
|
69
69
|
}
|
|
70
70
|
(0, $i2dnl$reactariagrid.useGridSelectionAnnouncement)({}, state);
|
|
71
71
|
return {
|
package/dist/useGridList.mjs
CHANGED
|
@@ -20,8 +20,8 @@ import {useSelectableList as $lnALe$useSelectableList} from "@react-aria/selecti
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
function $f47efb0c3a859cf2$export$664f9155035607eb(props, state, ref) {
|
|
23
|
-
let { isVirtualized: isVirtualized, keyboardDelegate: keyboardDelegate, onAction: onAction, linkBehavior: linkBehavior =
|
|
24
|
-
if (!props[
|
|
23
|
+
let { isVirtualized: isVirtualized, keyboardDelegate: keyboardDelegate, onAction: onAction, linkBehavior: linkBehavior = 'action' } = props;
|
|
24
|
+
if (!props['aria-label'] && !props['aria-labelledby']) console.warn('An aria-label or aria-labelledby prop is required for accessibility.');
|
|
25
25
|
let { listProps: listProps } = (0, $lnALe$useSelectableList)({
|
|
26
26
|
selectionManager: state.selectionManager,
|
|
27
27
|
collection: state.collection,
|
|
@@ -29,7 +29,7 @@ function $f47efb0c3a859cf2$export$664f9155035607eb(props, state, ref) {
|
|
|
29
29
|
ref: ref,
|
|
30
30
|
keyboardDelegate: keyboardDelegate,
|
|
31
31
|
isVirtualized: isVirtualized,
|
|
32
|
-
selectOnFocus: state.selectionManager.selectionBehavior ===
|
|
32
|
+
selectOnFocus: state.selectionManager.selectionBehavior === 'replace',
|
|
33
33
|
shouldFocusWrap: props.shouldFocusWrap,
|
|
34
34
|
linkBehavior: linkBehavior
|
|
35
35
|
});
|
|
@@ -50,16 +50,16 @@ function $f47efb0c3a859cf2$export$664f9155035607eb(props, state, ref) {
|
|
|
50
50
|
labelable: true
|
|
51
51
|
});
|
|
52
52
|
let gridProps = (0, $lnALe$mergeProps)(domProps, {
|
|
53
|
-
role:
|
|
53
|
+
role: 'grid',
|
|
54
54
|
id: id,
|
|
55
|
-
|
|
55
|
+
'aria-multiselectable': state.selectionManager.selectionMode === 'multiple' ? 'true' : undefined
|
|
56
56
|
}, // If collection is empty, make sure the grid is tabbable unless there is a child tabbable element.
|
|
57
57
|
state.collection.size === 0 ? {
|
|
58
58
|
tabIndex: hasTabbableChild ? -1 : 0
|
|
59
59
|
} : listProps, descriptionProps);
|
|
60
60
|
if (isVirtualized) {
|
|
61
|
-
gridProps[
|
|
62
|
-
gridProps[
|
|
61
|
+
gridProps['aria-rowcount'] = state.collection.size;
|
|
62
|
+
gridProps['aria-colcount'] = 1;
|
|
63
63
|
}
|
|
64
64
|
(0, $lnALe$useGridSelectionAnnouncement)({}, state);
|
|
65
65
|
return {
|
|
@@ -20,8 +20,8 @@ import {useSelectableList as $lnALe$useSelectableList} from "@react-aria/selecti
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
function $f47efb0c3a859cf2$export$664f9155035607eb(props, state, ref) {
|
|
23
|
-
let { isVirtualized: isVirtualized, keyboardDelegate: keyboardDelegate, onAction: onAction, linkBehavior: linkBehavior =
|
|
24
|
-
if (!props[
|
|
23
|
+
let { isVirtualized: isVirtualized, keyboardDelegate: keyboardDelegate, onAction: onAction, linkBehavior: linkBehavior = 'action' } = props;
|
|
24
|
+
if (!props['aria-label'] && !props['aria-labelledby']) console.warn('An aria-label or aria-labelledby prop is required for accessibility.');
|
|
25
25
|
let { listProps: listProps } = (0, $lnALe$useSelectableList)({
|
|
26
26
|
selectionManager: state.selectionManager,
|
|
27
27
|
collection: state.collection,
|
|
@@ -29,7 +29,7 @@ function $f47efb0c3a859cf2$export$664f9155035607eb(props, state, ref) {
|
|
|
29
29
|
ref: ref,
|
|
30
30
|
keyboardDelegate: keyboardDelegate,
|
|
31
31
|
isVirtualized: isVirtualized,
|
|
32
|
-
selectOnFocus: state.selectionManager.selectionBehavior ===
|
|
32
|
+
selectOnFocus: state.selectionManager.selectionBehavior === 'replace',
|
|
33
33
|
shouldFocusWrap: props.shouldFocusWrap,
|
|
34
34
|
linkBehavior: linkBehavior
|
|
35
35
|
});
|
|
@@ -50,16 +50,16 @@ function $f47efb0c3a859cf2$export$664f9155035607eb(props, state, ref) {
|
|
|
50
50
|
labelable: true
|
|
51
51
|
});
|
|
52
52
|
let gridProps = (0, $lnALe$mergeProps)(domProps, {
|
|
53
|
-
role:
|
|
53
|
+
role: 'grid',
|
|
54
54
|
id: id,
|
|
55
|
-
|
|
55
|
+
'aria-multiselectable': state.selectionManager.selectionMode === 'multiple' ? 'true' : undefined
|
|
56
56
|
}, // If collection is empty, make sure the grid is tabbable unless there is a child tabbable element.
|
|
57
57
|
state.collection.size === 0 ? {
|
|
58
58
|
tabIndex: hasTabbableChild ? -1 : 0
|
|
59
59
|
} : listProps, descriptionProps);
|
|
60
60
|
if (isVirtualized) {
|
|
61
|
-
gridProps[
|
|
62
|
-
gridProps[
|
|
61
|
+
gridProps['aria-rowcount'] = state.collection.size;
|
|
62
|
+
gridProps['aria-colcount'] = 1;
|
|
63
63
|
}
|
|
64
64
|
(0, $lnALe$useGridSelectionAnnouncement)({}, state);
|
|
65
65
|
return {
|
|
@@ -32,13 +32,13 @@ $parcel$export(module.exports, "useGridListItem", () => $f7116f5928c03f32$export
|
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
const $f7116f5928c03f32$var$EXPANSION_KEYS = {
|
|
35
|
-
|
|
36
|
-
ltr:
|
|
37
|
-
rtl:
|
|
35
|
+
'expand': {
|
|
36
|
+
ltr: 'ArrowRight',
|
|
37
|
+
rtl: 'ArrowLeft'
|
|
38
38
|
},
|
|
39
|
-
|
|
40
|
-
ltr:
|
|
41
|
-
rtl:
|
|
39
|
+
'collapse': {
|
|
40
|
+
ltr: 'ArrowLeft',
|
|
41
|
+
rtl: 'ArrowRight'
|
|
42
42
|
}
|
|
43
43
|
};
|
|
44
44
|
function $f7116f5928c03f32$export$9610e69494fadfd2(props, state, ref) {
|
|
@@ -61,19 +61,19 @@ function $f7116f5928c03f32$export$9610e69494fadfd2(props, state, ref) {
|
|
|
61
61
|
let treeGridRowProps = {};
|
|
62
62
|
let hasChildRows;
|
|
63
63
|
let hasLink = state.selectionManager.isLink(node.key);
|
|
64
|
-
if (node != null &&
|
|
64
|
+
if (node != null && 'expandedKeys' in state) {
|
|
65
65
|
// TODO: ideally node.hasChildNodes would be a way to tell if a row has child nodes, but the row's contents make it so that value is always
|
|
66
66
|
// true...
|
|
67
67
|
hasChildRows = [
|
|
68
68
|
...state.collection.getChildren(node.key)
|
|
69
69
|
].length > 1;
|
|
70
|
-
if (onAction == null && !hasLink && state.selectionManager.selectionMode ===
|
|
70
|
+
if (onAction == null && !hasLink && state.selectionManager.selectionMode === 'none' && hasChildRows) onAction = ()=>state.toggleKey(node.key);
|
|
71
71
|
let isExpanded = hasChildRows ? state.expandedKeys.has(node.key) : undefined;
|
|
72
72
|
treeGridRowProps = {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
73
|
+
'aria-expanded': isExpanded,
|
|
74
|
+
'aria-level': node.level + 1,
|
|
75
|
+
'aria-posinset': (node === null || node === void 0 ? void 0 : node.index) + 1,
|
|
76
|
+
'aria-setsize': node.level > 0 ? (0, $911qM$reactstatelycollections.getLastItem)(state.collection.getChildren(node === null || node === void 0 ? void 0 : node.parentKey)).index + 1 : [
|
|
77
77
|
...state.collection
|
|
78
78
|
].filter((row)=>row.level === 0).at(-1).index + 1
|
|
79
79
|
};
|
|
@@ -92,22 +92,22 @@ function $f7116f5928c03f32$export$9610e69494fadfd2(props, state, ref) {
|
|
|
92
92
|
if (!e.currentTarget.contains(e.target)) return;
|
|
93
93
|
let walker = (0, $911qM$reactariafocus.getFocusableTreeWalker)(ref.current);
|
|
94
94
|
walker.currentNode = document.activeElement;
|
|
95
|
-
if (
|
|
96
|
-
if (e.key === $f7116f5928c03f32$var$EXPANSION_KEYS[
|
|
95
|
+
if ('expandedKeys' in state && document.activeElement === ref.current) {
|
|
96
|
+
if (e.key === $f7116f5928c03f32$var$EXPANSION_KEYS['expand'][direction] && state.selectionManager.focusedKey === node.key && hasChildRows && !state.expandedKeys.has(node.key)) {
|
|
97
97
|
state.toggleKey(node.key);
|
|
98
98
|
e.stopPropagation();
|
|
99
99
|
return;
|
|
100
|
-
} else if (e.key === $f7116f5928c03f32$var$EXPANSION_KEYS[
|
|
100
|
+
} else if (e.key === $f7116f5928c03f32$var$EXPANSION_KEYS['collapse'][direction] && state.selectionManager.focusedKey === node.key && hasChildRows && state.expandedKeys.has(node.key)) {
|
|
101
101
|
state.toggleKey(node.key);
|
|
102
102
|
e.stopPropagation();
|
|
103
103
|
return;
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
106
|
switch(e.key){
|
|
107
|
-
case
|
|
107
|
+
case 'ArrowLeft':
|
|
108
108
|
{
|
|
109
109
|
// Find the next focusable element within the row.
|
|
110
|
-
let focusable = direction ===
|
|
110
|
+
let focusable = direction === 'rtl' ? walker.nextNode() : walker.previousNode();
|
|
111
111
|
if (focusable) {
|
|
112
112
|
e.preventDefault();
|
|
113
113
|
e.stopPropagation();
|
|
@@ -119,7 +119,7 @@ function $f7116f5928c03f32$export$9610e69494fadfd2(props, state, ref) {
|
|
|
119
119
|
// If there is no next focusable child, then return focus back to the row
|
|
120
120
|
e.preventDefault();
|
|
121
121
|
e.stopPropagation();
|
|
122
|
-
if (direction ===
|
|
122
|
+
if (direction === 'rtl') {
|
|
123
123
|
(0, $911qM$reactariafocus.focusSafely)(ref.current);
|
|
124
124
|
(0, $911qM$reactariautils.scrollIntoViewport)(ref.current, {
|
|
125
125
|
containingElement: (0, $911qM$reactariautils.getScrollParent)(ref.current)
|
|
@@ -137,9 +137,9 @@ function $f7116f5928c03f32$export$9610e69494fadfd2(props, state, ref) {
|
|
|
137
137
|
}
|
|
138
138
|
break;
|
|
139
139
|
}
|
|
140
|
-
case
|
|
140
|
+
case 'ArrowRight':
|
|
141
141
|
{
|
|
142
|
-
let focusable = direction ===
|
|
142
|
+
let focusable = direction === 'rtl' ? walker.previousNode() : walker.nextNode();
|
|
143
143
|
if (focusable) {
|
|
144
144
|
e.preventDefault();
|
|
145
145
|
e.stopPropagation();
|
|
@@ -150,7 +150,7 @@ function $f7116f5928c03f32$export$9610e69494fadfd2(props, state, ref) {
|
|
|
150
150
|
} else {
|
|
151
151
|
e.preventDefault();
|
|
152
152
|
e.stopPropagation();
|
|
153
|
-
if (direction ===
|
|
153
|
+
if (direction === 'ltr') {
|
|
154
154
|
(0, $911qM$reactariafocus.focusSafely)(ref.current);
|
|
155
155
|
(0, $911qM$reactariautils.scrollIntoViewport)(ref.current, {
|
|
156
156
|
containingElement: (0, $911qM$reactariautils.getScrollParent)(ref.current)
|
|
@@ -168,8 +168,8 @@ function $f7116f5928c03f32$export$9610e69494fadfd2(props, state, ref) {
|
|
|
168
168
|
}
|
|
169
169
|
break;
|
|
170
170
|
}
|
|
171
|
-
case
|
|
172
|
-
case
|
|
171
|
+
case 'ArrowUp':
|
|
172
|
+
case 'ArrowDown':
|
|
173
173
|
// Prevent this event from reaching row children, e.g. menu buttons. We want arrow keys to navigate
|
|
174
174
|
// to the row above/below instead. We need to re-dispatch the event from a higher parent so it still
|
|
175
175
|
// bubbles and gets handled by useSelectableCollection.
|
|
@@ -205,20 +205,20 @@ function $f7116f5928c03f32$export$9610e69494fadfd2(props, state, ref) {
|
|
|
205
205
|
// });
|
|
206
206
|
// }
|
|
207
207
|
let rowProps = (0, $911qM$reactariautils.mergeProps)(itemProps, linkProps, {
|
|
208
|
-
role:
|
|
208
|
+
role: 'row',
|
|
209
209
|
onKeyDownCapture: onKeyDown,
|
|
210
210
|
onFocus: onFocus,
|
|
211
211
|
// 'aria-label': [(node.textValue || undefined), rowAnnouncement].filter(Boolean).join(', '),
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
212
|
+
'aria-label': node.textValue || undefined,
|
|
213
|
+
'aria-selected': state.selectionManager.canSelectItem(node.key) ? state.selectionManager.isSelected(node.key) : undefined,
|
|
214
|
+
'aria-disabled': state.selectionManager.isDisabled(node.key) || undefined,
|
|
215
|
+
'aria-labelledby': descriptionId && node.textValue ? `${(0, $7db02799adae605d$exports.getRowId)(state, node.key)} ${descriptionId}` : undefined,
|
|
216
216
|
id: (0, $7db02799adae605d$exports.getRowId)(state, node.key)
|
|
217
217
|
});
|
|
218
|
-
if (isVirtualized) rowProps[
|
|
218
|
+
if (isVirtualized) rowProps['aria-rowindex'] = node.index + 1;
|
|
219
219
|
let gridCellProps = {
|
|
220
|
-
role:
|
|
221
|
-
|
|
220
|
+
role: 'gridcell',
|
|
221
|
+
'aria-colindex': 1
|
|
222
222
|
};
|
|
223
223
|
// TODO: should isExpanded and hasChildRows be a item state that gets returned by the hook?
|
|
224
224
|
return {
|
package/dist/useGridListItem.mjs
CHANGED
|
@@ -26,13 +26,13 @@ import {useLocale as $lxFUG$useLocale} from "@react-aria/i18n";
|
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
const $4e8b0456ef72939f$var$EXPANSION_KEYS = {
|
|
29
|
-
|
|
30
|
-
ltr:
|
|
31
|
-
rtl:
|
|
29
|
+
'expand': {
|
|
30
|
+
ltr: 'ArrowRight',
|
|
31
|
+
rtl: 'ArrowLeft'
|
|
32
32
|
},
|
|
33
|
-
|
|
34
|
-
ltr:
|
|
35
|
-
rtl:
|
|
33
|
+
'collapse': {
|
|
34
|
+
ltr: 'ArrowLeft',
|
|
35
|
+
rtl: 'ArrowRight'
|
|
36
36
|
}
|
|
37
37
|
};
|
|
38
38
|
function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
@@ -55,19 +55,19 @@ function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
|
55
55
|
let treeGridRowProps = {};
|
|
56
56
|
let hasChildRows;
|
|
57
57
|
let hasLink = state.selectionManager.isLink(node.key);
|
|
58
|
-
if (node != null &&
|
|
58
|
+
if (node != null && 'expandedKeys' in state) {
|
|
59
59
|
// TODO: ideally node.hasChildNodes would be a way to tell if a row has child nodes, but the row's contents make it so that value is always
|
|
60
60
|
// true...
|
|
61
61
|
hasChildRows = [
|
|
62
62
|
...state.collection.getChildren(node.key)
|
|
63
63
|
].length > 1;
|
|
64
|
-
if (onAction == null && !hasLink && state.selectionManager.selectionMode ===
|
|
64
|
+
if (onAction == null && !hasLink && state.selectionManager.selectionMode === 'none' && hasChildRows) onAction = ()=>state.toggleKey(node.key);
|
|
65
65
|
let isExpanded = hasChildRows ? state.expandedKeys.has(node.key) : undefined;
|
|
66
66
|
treeGridRowProps = {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
67
|
+
'aria-expanded': isExpanded,
|
|
68
|
+
'aria-level': node.level + 1,
|
|
69
|
+
'aria-posinset': (node === null || node === void 0 ? void 0 : node.index) + 1,
|
|
70
|
+
'aria-setsize': node.level > 0 ? (0, $lxFUG$getLastItem)(state.collection.getChildren(node === null || node === void 0 ? void 0 : node.parentKey)).index + 1 : [
|
|
71
71
|
...state.collection
|
|
72
72
|
].filter((row)=>row.level === 0).at(-1).index + 1
|
|
73
73
|
};
|
|
@@ -86,22 +86,22 @@ function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
|
86
86
|
if (!e.currentTarget.contains(e.target)) return;
|
|
87
87
|
let walker = (0, $lxFUG$getFocusableTreeWalker)(ref.current);
|
|
88
88
|
walker.currentNode = document.activeElement;
|
|
89
|
-
if (
|
|
90
|
-
if (e.key === $4e8b0456ef72939f$var$EXPANSION_KEYS[
|
|
89
|
+
if ('expandedKeys' in state && document.activeElement === ref.current) {
|
|
90
|
+
if (e.key === $4e8b0456ef72939f$var$EXPANSION_KEYS['expand'][direction] && state.selectionManager.focusedKey === node.key && hasChildRows && !state.expandedKeys.has(node.key)) {
|
|
91
91
|
state.toggleKey(node.key);
|
|
92
92
|
e.stopPropagation();
|
|
93
93
|
return;
|
|
94
|
-
} else if (e.key === $4e8b0456ef72939f$var$EXPANSION_KEYS[
|
|
94
|
+
} else if (e.key === $4e8b0456ef72939f$var$EXPANSION_KEYS['collapse'][direction] && state.selectionManager.focusedKey === node.key && hasChildRows && state.expandedKeys.has(node.key)) {
|
|
95
95
|
state.toggleKey(node.key);
|
|
96
96
|
e.stopPropagation();
|
|
97
97
|
return;
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
100
|
switch(e.key){
|
|
101
|
-
case
|
|
101
|
+
case 'ArrowLeft':
|
|
102
102
|
{
|
|
103
103
|
// Find the next focusable element within the row.
|
|
104
|
-
let focusable = direction ===
|
|
104
|
+
let focusable = direction === 'rtl' ? walker.nextNode() : walker.previousNode();
|
|
105
105
|
if (focusable) {
|
|
106
106
|
e.preventDefault();
|
|
107
107
|
e.stopPropagation();
|
|
@@ -113,7 +113,7 @@ function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
|
113
113
|
// If there is no next focusable child, then return focus back to the row
|
|
114
114
|
e.preventDefault();
|
|
115
115
|
e.stopPropagation();
|
|
116
|
-
if (direction ===
|
|
116
|
+
if (direction === 'rtl') {
|
|
117
117
|
(0, $lxFUG$focusSafely)(ref.current);
|
|
118
118
|
(0, $lxFUG$scrollIntoViewport)(ref.current, {
|
|
119
119
|
containingElement: (0, $lxFUG$getScrollParent)(ref.current)
|
|
@@ -131,9 +131,9 @@ function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
|
131
131
|
}
|
|
132
132
|
break;
|
|
133
133
|
}
|
|
134
|
-
case
|
|
134
|
+
case 'ArrowRight':
|
|
135
135
|
{
|
|
136
|
-
let focusable = direction ===
|
|
136
|
+
let focusable = direction === 'rtl' ? walker.previousNode() : walker.nextNode();
|
|
137
137
|
if (focusable) {
|
|
138
138
|
e.preventDefault();
|
|
139
139
|
e.stopPropagation();
|
|
@@ -144,7 +144,7 @@ function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
|
144
144
|
} else {
|
|
145
145
|
e.preventDefault();
|
|
146
146
|
e.stopPropagation();
|
|
147
|
-
if (direction ===
|
|
147
|
+
if (direction === 'ltr') {
|
|
148
148
|
(0, $lxFUG$focusSafely)(ref.current);
|
|
149
149
|
(0, $lxFUG$scrollIntoViewport)(ref.current, {
|
|
150
150
|
containingElement: (0, $lxFUG$getScrollParent)(ref.current)
|
|
@@ -162,8 +162,8 @@ function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
|
162
162
|
}
|
|
163
163
|
break;
|
|
164
164
|
}
|
|
165
|
-
case
|
|
166
|
-
case
|
|
165
|
+
case 'ArrowUp':
|
|
166
|
+
case 'ArrowDown':
|
|
167
167
|
// Prevent this event from reaching row children, e.g. menu buttons. We want arrow keys to navigate
|
|
168
168
|
// to the row above/below instead. We need to re-dispatch the event from a higher parent so it still
|
|
169
169
|
// bubbles and gets handled by useSelectableCollection.
|
|
@@ -199,20 +199,20 @@ function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
|
199
199
|
// });
|
|
200
200
|
// }
|
|
201
201
|
let rowProps = (0, $lxFUG$mergeProps)(itemProps, linkProps, {
|
|
202
|
-
role:
|
|
202
|
+
role: 'row',
|
|
203
203
|
onKeyDownCapture: onKeyDown,
|
|
204
204
|
onFocus: onFocus,
|
|
205
205
|
// 'aria-label': [(node.textValue || undefined), rowAnnouncement].filter(Boolean).join(', '),
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
206
|
+
'aria-label': node.textValue || undefined,
|
|
207
|
+
'aria-selected': state.selectionManager.canSelectItem(node.key) ? state.selectionManager.isSelected(node.key) : undefined,
|
|
208
|
+
'aria-disabled': state.selectionManager.isDisabled(node.key) || undefined,
|
|
209
|
+
'aria-labelledby': descriptionId && node.textValue ? `${(0, $ce9b18daab526bbd$export$f45c25170b9a99c2)(state, node.key)} ${descriptionId}` : undefined,
|
|
210
210
|
id: (0, $ce9b18daab526bbd$export$f45c25170b9a99c2)(state, node.key)
|
|
211
211
|
});
|
|
212
|
-
if (isVirtualized) rowProps[
|
|
212
|
+
if (isVirtualized) rowProps['aria-rowindex'] = node.index + 1;
|
|
213
213
|
let gridCellProps = {
|
|
214
|
-
role:
|
|
215
|
-
|
|
214
|
+
role: 'gridcell',
|
|
215
|
+
'aria-colindex': 1
|
|
216
216
|
};
|
|
217
217
|
// TODO: should isExpanded and hasChildRows be a item state that gets returned by the hook?
|
|
218
218
|
return {
|
|
@@ -26,13 +26,13 @@ import {useLocale as $lxFUG$useLocale} from "@react-aria/i18n";
|
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
const $4e8b0456ef72939f$var$EXPANSION_KEYS = {
|
|
29
|
-
|
|
30
|
-
ltr:
|
|
31
|
-
rtl:
|
|
29
|
+
'expand': {
|
|
30
|
+
ltr: 'ArrowRight',
|
|
31
|
+
rtl: 'ArrowLeft'
|
|
32
32
|
},
|
|
33
|
-
|
|
34
|
-
ltr:
|
|
35
|
-
rtl:
|
|
33
|
+
'collapse': {
|
|
34
|
+
ltr: 'ArrowLeft',
|
|
35
|
+
rtl: 'ArrowRight'
|
|
36
36
|
}
|
|
37
37
|
};
|
|
38
38
|
function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
@@ -55,19 +55,19 @@ function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
|
55
55
|
let treeGridRowProps = {};
|
|
56
56
|
let hasChildRows;
|
|
57
57
|
let hasLink = state.selectionManager.isLink(node.key);
|
|
58
|
-
if (node != null &&
|
|
58
|
+
if (node != null && 'expandedKeys' in state) {
|
|
59
59
|
// TODO: ideally node.hasChildNodes would be a way to tell if a row has child nodes, but the row's contents make it so that value is always
|
|
60
60
|
// true...
|
|
61
61
|
hasChildRows = [
|
|
62
62
|
...state.collection.getChildren(node.key)
|
|
63
63
|
].length > 1;
|
|
64
|
-
if (onAction == null && !hasLink && state.selectionManager.selectionMode ===
|
|
64
|
+
if (onAction == null && !hasLink && state.selectionManager.selectionMode === 'none' && hasChildRows) onAction = ()=>state.toggleKey(node.key);
|
|
65
65
|
let isExpanded = hasChildRows ? state.expandedKeys.has(node.key) : undefined;
|
|
66
66
|
treeGridRowProps = {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
67
|
+
'aria-expanded': isExpanded,
|
|
68
|
+
'aria-level': node.level + 1,
|
|
69
|
+
'aria-posinset': (node === null || node === void 0 ? void 0 : node.index) + 1,
|
|
70
|
+
'aria-setsize': node.level > 0 ? (0, $lxFUG$getLastItem)(state.collection.getChildren(node === null || node === void 0 ? void 0 : node.parentKey)).index + 1 : [
|
|
71
71
|
...state.collection
|
|
72
72
|
].filter((row)=>row.level === 0).at(-1).index + 1
|
|
73
73
|
};
|
|
@@ -86,22 +86,22 @@ function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
|
86
86
|
if (!e.currentTarget.contains(e.target)) return;
|
|
87
87
|
let walker = (0, $lxFUG$getFocusableTreeWalker)(ref.current);
|
|
88
88
|
walker.currentNode = document.activeElement;
|
|
89
|
-
if (
|
|
90
|
-
if (e.key === $4e8b0456ef72939f$var$EXPANSION_KEYS[
|
|
89
|
+
if ('expandedKeys' in state && document.activeElement === ref.current) {
|
|
90
|
+
if (e.key === $4e8b0456ef72939f$var$EXPANSION_KEYS['expand'][direction] && state.selectionManager.focusedKey === node.key && hasChildRows && !state.expandedKeys.has(node.key)) {
|
|
91
91
|
state.toggleKey(node.key);
|
|
92
92
|
e.stopPropagation();
|
|
93
93
|
return;
|
|
94
|
-
} else if (e.key === $4e8b0456ef72939f$var$EXPANSION_KEYS[
|
|
94
|
+
} else if (e.key === $4e8b0456ef72939f$var$EXPANSION_KEYS['collapse'][direction] && state.selectionManager.focusedKey === node.key && hasChildRows && state.expandedKeys.has(node.key)) {
|
|
95
95
|
state.toggleKey(node.key);
|
|
96
96
|
e.stopPropagation();
|
|
97
97
|
return;
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
100
|
switch(e.key){
|
|
101
|
-
case
|
|
101
|
+
case 'ArrowLeft':
|
|
102
102
|
{
|
|
103
103
|
// Find the next focusable element within the row.
|
|
104
|
-
let focusable = direction ===
|
|
104
|
+
let focusable = direction === 'rtl' ? walker.nextNode() : walker.previousNode();
|
|
105
105
|
if (focusable) {
|
|
106
106
|
e.preventDefault();
|
|
107
107
|
e.stopPropagation();
|
|
@@ -113,7 +113,7 @@ function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
|
113
113
|
// If there is no next focusable child, then return focus back to the row
|
|
114
114
|
e.preventDefault();
|
|
115
115
|
e.stopPropagation();
|
|
116
|
-
if (direction ===
|
|
116
|
+
if (direction === 'rtl') {
|
|
117
117
|
(0, $lxFUG$focusSafely)(ref.current);
|
|
118
118
|
(0, $lxFUG$scrollIntoViewport)(ref.current, {
|
|
119
119
|
containingElement: (0, $lxFUG$getScrollParent)(ref.current)
|
|
@@ -131,9 +131,9 @@ function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
|
131
131
|
}
|
|
132
132
|
break;
|
|
133
133
|
}
|
|
134
|
-
case
|
|
134
|
+
case 'ArrowRight':
|
|
135
135
|
{
|
|
136
|
-
let focusable = direction ===
|
|
136
|
+
let focusable = direction === 'rtl' ? walker.previousNode() : walker.nextNode();
|
|
137
137
|
if (focusable) {
|
|
138
138
|
e.preventDefault();
|
|
139
139
|
e.stopPropagation();
|
|
@@ -144,7 +144,7 @@ function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
|
144
144
|
} else {
|
|
145
145
|
e.preventDefault();
|
|
146
146
|
e.stopPropagation();
|
|
147
|
-
if (direction ===
|
|
147
|
+
if (direction === 'ltr') {
|
|
148
148
|
(0, $lxFUG$focusSafely)(ref.current);
|
|
149
149
|
(0, $lxFUG$scrollIntoViewport)(ref.current, {
|
|
150
150
|
containingElement: (0, $lxFUG$getScrollParent)(ref.current)
|
|
@@ -162,8 +162,8 @@ function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
|
162
162
|
}
|
|
163
163
|
break;
|
|
164
164
|
}
|
|
165
|
-
case
|
|
166
|
-
case
|
|
165
|
+
case 'ArrowUp':
|
|
166
|
+
case 'ArrowDown':
|
|
167
167
|
// Prevent this event from reaching row children, e.g. menu buttons. We want arrow keys to navigate
|
|
168
168
|
// to the row above/below instead. We need to re-dispatch the event from a higher parent so it still
|
|
169
169
|
// bubbles and gets handled by useSelectableCollection.
|
|
@@ -199,20 +199,20 @@ function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
|
199
199
|
// });
|
|
200
200
|
// }
|
|
201
201
|
let rowProps = (0, $lxFUG$mergeProps)(itemProps, linkProps, {
|
|
202
|
-
role:
|
|
202
|
+
role: 'row',
|
|
203
203
|
onKeyDownCapture: onKeyDown,
|
|
204
204
|
onFocus: onFocus,
|
|
205
205
|
// 'aria-label': [(node.textValue || undefined), rowAnnouncement].filter(Boolean).join(', '),
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
206
|
+
'aria-label': node.textValue || undefined,
|
|
207
|
+
'aria-selected': state.selectionManager.canSelectItem(node.key) ? state.selectionManager.isSelected(node.key) : undefined,
|
|
208
|
+
'aria-disabled': state.selectionManager.isDisabled(node.key) || undefined,
|
|
209
|
+
'aria-labelledby': descriptionId && node.textValue ? `${(0, $ce9b18daab526bbd$export$f45c25170b9a99c2)(state, node.key)} ${descriptionId}` : undefined,
|
|
210
210
|
id: (0, $ce9b18daab526bbd$export$f45c25170b9a99c2)(state, node.key)
|
|
211
211
|
});
|
|
212
|
-
if (isVirtualized) rowProps[
|
|
212
|
+
if (isVirtualized) rowProps['aria-rowindex'] = node.index + 1;
|
|
213
213
|
let gridCellProps = {
|
|
214
|
-
role:
|
|
215
|
-
|
|
214
|
+
role: 'gridcell',
|
|
215
|
+
'aria-colindex': 1
|
|
216
216
|
};
|
|
217
217
|
// TODO: should isExpanded and hasChildRows be a item state that gets returned by the hook?
|
|
218
218
|
return {
|
|
@@ -25,7 +25,7 @@ function $43131ea217bc2ad3$export$e29f2573fabbf7b9(props, state) {
|
|
|
25
25
|
return {
|
|
26
26
|
checkboxProps: {
|
|
27
27
|
...checkboxProps,
|
|
28
|
-
|
|
28
|
+
'aria-labelledby': `${checkboxProps.id} ${(0, $7db02799adae605d$exports.getRowId)(state, key)}`
|
|
29
29
|
}
|
|
30
30
|
};
|
|
31
31
|
}
|
|
@@ -19,7 +19,7 @@ function $e52ffc04a4adbd52$export$e29f2573fabbf7b9(props, state) {
|
|
|
19
19
|
return {
|
|
20
20
|
checkboxProps: {
|
|
21
21
|
...checkboxProps,
|
|
22
|
-
|
|
22
|
+
'aria-labelledby': `${checkboxProps.id} ${(0, $ce9b18daab526bbd$export$f45c25170b9a99c2)(state, key)}`
|
|
23
23
|
}
|
|
24
24
|
};
|
|
25
25
|
}
|
|
@@ -19,7 +19,7 @@ function $e52ffc04a4adbd52$export$e29f2573fabbf7b9(props, state) {
|
|
|
19
19
|
return {
|
|
20
20
|
checkboxProps: {
|
|
21
21
|
...checkboxProps,
|
|
22
|
-
|
|
22
|
+
'aria-labelledby': `${checkboxProps.id} ${(0, $ce9b18daab526bbd$export$f45c25170b9a99c2)(state, key)}`
|
|
23
23
|
}
|
|
24
24
|
};
|
|
25
25
|
}
|
package/dist/utils.main.js
CHANGED
|
@@ -18,12 +18,12 @@ $parcel$export(module.exports, "getRowId", () => $7db02799adae605d$export$f45c25
|
|
|
18
18
|
*/ const $7db02799adae605d$export$5b9bb410392e3991 = new WeakMap();
|
|
19
19
|
function $7db02799adae605d$export$f45c25170b9a99c2(state, key) {
|
|
20
20
|
let { id: id } = $7db02799adae605d$export$5b9bb410392e3991.get(state);
|
|
21
|
-
if (!id) throw new Error(
|
|
21
|
+
if (!id) throw new Error('Unknown list');
|
|
22
22
|
return `${id}-${$7db02799adae605d$export$e0c709538cb8ae18(key)}`;
|
|
23
23
|
}
|
|
24
24
|
function $7db02799adae605d$export$e0c709538cb8ae18(key) {
|
|
25
|
-
if (typeof key ===
|
|
26
|
-
return
|
|
25
|
+
if (typeof key === 'string') return key.replace(/\s*/g, '');
|
|
26
|
+
return '' + key;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
|
package/dist/utils.mjs
CHANGED
|
@@ -11,12 +11,12 @@
|
|
|
11
11
|
*/ const $ce9b18daab526bbd$export$5b9bb410392e3991 = new WeakMap();
|
|
12
12
|
function $ce9b18daab526bbd$export$f45c25170b9a99c2(state, key) {
|
|
13
13
|
let { id: id } = $ce9b18daab526bbd$export$5b9bb410392e3991.get(state);
|
|
14
|
-
if (!id) throw new Error(
|
|
14
|
+
if (!id) throw new Error('Unknown list');
|
|
15
15
|
return `${id}-${$ce9b18daab526bbd$export$e0c709538cb8ae18(key)}`;
|
|
16
16
|
}
|
|
17
17
|
function $ce9b18daab526bbd$export$e0c709538cb8ae18(key) {
|
|
18
|
-
if (typeof key ===
|
|
19
|
-
return
|
|
18
|
+
if (typeof key === 'string') return key.replace(/\s*/g, '');
|
|
19
|
+
return '' + key;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
|
package/dist/utils.module.js
CHANGED
|
@@ -11,12 +11,12 @@
|
|
|
11
11
|
*/ const $ce9b18daab526bbd$export$5b9bb410392e3991 = new WeakMap();
|
|
12
12
|
function $ce9b18daab526bbd$export$f45c25170b9a99c2(state, key) {
|
|
13
13
|
let { id: id } = $ce9b18daab526bbd$export$5b9bb410392e3991.get(state);
|
|
14
|
-
if (!id) throw new Error(
|
|
14
|
+
if (!id) throw new Error('Unknown list');
|
|
15
15
|
return `${id}-${$ce9b18daab526bbd$export$e0c709538cb8ae18(key)}`;
|
|
16
16
|
}
|
|
17
17
|
function $ce9b18daab526bbd$export$e0c709538cb8ae18(key) {
|
|
18
|
-
if (typeof key ===
|
|
19
|
-
return
|
|
18
|
+
if (typeof key === 'string') return key.replace(/\s*/g, '');
|
|
19
|
+
return '' + key;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/gridlist",
|
|
3
|
-
"version": "3.8.1
|
|
3
|
+
"version": "3.8.1",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,16 +22,16 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@react-aria/focus": "3.
|
|
26
|
-
"@react-aria/grid": "3.9.1
|
|
27
|
-
"@react-aria/i18n": "3.
|
|
28
|
-
"@react-aria/interactions": "3.
|
|
29
|
-
"@react-aria/selection": "3.
|
|
30
|
-
"@react-aria/utils": "3.
|
|
31
|
-
"@react-stately/collections": "3.
|
|
32
|
-
"@react-stately/list": "3.10.5
|
|
33
|
-
"@react-stately/tree": "3.
|
|
34
|
-
"@react-types/shared": "3.
|
|
25
|
+
"@react-aria/focus": "^3.17.1",
|
|
26
|
+
"@react-aria/grid": "^3.9.1",
|
|
27
|
+
"@react-aria/i18n": "^3.11.1",
|
|
28
|
+
"@react-aria/interactions": "^3.21.3",
|
|
29
|
+
"@react-aria/selection": "^3.18.1",
|
|
30
|
+
"@react-aria/utils": "^3.24.1",
|
|
31
|
+
"@react-stately/collections": "^3.10.7",
|
|
32
|
+
"@react-stately/list": "^3.10.5",
|
|
33
|
+
"@react-stately/tree": "^3.8.1",
|
|
34
|
+
"@react-types/shared": "^3.23.1",
|
|
35
35
|
"@swc/helpers": "^0.5.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
@@ -41,5 +41,5 @@
|
|
|
41
41
|
"publishConfig": {
|
|
42
42
|
"access": "public"
|
|
43
43
|
},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "b77d7d594dff4dcfb5359bffbcfd18142b146433"
|
|
45
45
|
}
|