@react-aria/menu 3.14.1-nightly.4624 → 3.14.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/useMenu.main.js +4 -4
- package/dist/useMenu.mjs +4 -4
- package/dist/useMenu.module.js +4 -4
- package/dist/useMenuItem.main.js +23 -23
- package/dist/useMenuItem.mjs +23 -23
- package/dist/useMenuItem.module.js +23 -23
- package/dist/useMenuSection.main.js +6 -6
- package/dist/useMenuSection.mjs +6 -6
- package/dist/useMenuSection.module.js +6 -6
- package/dist/useMenuTrigger.main.js +21 -21
- package/dist/useMenuTrigger.mjs +21 -21
- package/dist/useMenuTrigger.module.js +21 -21
- package/dist/useSafelyMouseToSubmenu.main.js +10 -10
- package/dist/useSafelyMouseToSubmenu.mjs +10 -10
- package/dist/useSafelyMouseToSubmenu.module.js +10 -10
- package/dist/useSubmenuTrigger.main.js +23 -23
- package/dist/useSubmenuTrigger.mjs +23 -23
- package/dist/useSubmenuTrigger.module.js +23 -23
- package/package.json +14 -14
package/dist/useMenu.main.js
CHANGED
|
@@ -23,7 +23,7 @@ $parcel$export(module.exports, "useMenu", () => $a3815f0132802737$export$38eaa17
|
|
|
23
23
|
const $a3815f0132802737$export$6f49b4016bfc8d56 = new WeakMap();
|
|
24
24
|
function $a3815f0132802737$export$38eaa17faae8f579(props, state, ref) {
|
|
25
25
|
let { shouldFocusWrap: shouldFocusWrap = true, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ...otherProps } = props;
|
|
26
|
-
if (!props[
|
|
26
|
+
if (!props['aria-label'] && !props['aria-labelledby']) console.warn('An aria-label or aria-labelledby prop is required for accessibility.');
|
|
27
27
|
let domProps = (0, $6CumN$reactariautils.filterDOMProps)(props, {
|
|
28
28
|
labelable: true
|
|
29
29
|
});
|
|
@@ -34,7 +34,7 @@ function $a3815f0132802737$export$38eaa17faae8f579(props, state, ref) {
|
|
|
34
34
|
collection: state.collection,
|
|
35
35
|
disabledKeys: state.disabledKeys,
|
|
36
36
|
shouldFocusWrap: shouldFocusWrap,
|
|
37
|
-
linkBehavior:
|
|
37
|
+
linkBehavior: 'override'
|
|
38
38
|
});
|
|
39
39
|
$a3815f0132802737$export$6f49b4016bfc8d56.set(state, {
|
|
40
40
|
onClose: props.onClose,
|
|
@@ -45,11 +45,11 @@ function $a3815f0132802737$export$38eaa17faae8f579(props, state, ref) {
|
|
|
45
45
|
onKeyDown: onKeyDown,
|
|
46
46
|
onKeyUp: onKeyUp
|
|
47
47
|
}, {
|
|
48
|
-
role:
|
|
48
|
+
role: 'menu',
|
|
49
49
|
...listProps,
|
|
50
50
|
onKeyDown: (e)=>{
|
|
51
51
|
// don't clear the menu selected keys if the user is presses escape since escape closes the menu
|
|
52
|
-
if (e.key !==
|
|
52
|
+
if (e.key !== 'Escape') listProps.onKeyDown(e);
|
|
53
53
|
}
|
|
54
54
|
})
|
|
55
55
|
};
|
package/dist/useMenu.mjs
CHANGED
|
@@ -16,7 +16,7 @@ import {useSelectableList as $ieN2F$useSelectableList} from "@react-aria/selecti
|
|
|
16
16
|
const $d5336fe17ce95402$export$6f49b4016bfc8d56 = new WeakMap();
|
|
17
17
|
function $d5336fe17ce95402$export$38eaa17faae8f579(props, state, ref) {
|
|
18
18
|
let { shouldFocusWrap: shouldFocusWrap = true, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ...otherProps } = props;
|
|
19
|
-
if (!props[
|
|
19
|
+
if (!props['aria-label'] && !props['aria-labelledby']) console.warn('An aria-label or aria-labelledby prop is required for accessibility.');
|
|
20
20
|
let domProps = (0, $ieN2F$filterDOMProps)(props, {
|
|
21
21
|
labelable: true
|
|
22
22
|
});
|
|
@@ -27,7 +27,7 @@ function $d5336fe17ce95402$export$38eaa17faae8f579(props, state, ref) {
|
|
|
27
27
|
collection: state.collection,
|
|
28
28
|
disabledKeys: state.disabledKeys,
|
|
29
29
|
shouldFocusWrap: shouldFocusWrap,
|
|
30
|
-
linkBehavior:
|
|
30
|
+
linkBehavior: 'override'
|
|
31
31
|
});
|
|
32
32
|
$d5336fe17ce95402$export$6f49b4016bfc8d56.set(state, {
|
|
33
33
|
onClose: props.onClose,
|
|
@@ -38,11 +38,11 @@ function $d5336fe17ce95402$export$38eaa17faae8f579(props, state, ref) {
|
|
|
38
38
|
onKeyDown: onKeyDown,
|
|
39
39
|
onKeyUp: onKeyUp
|
|
40
40
|
}, {
|
|
41
|
-
role:
|
|
41
|
+
role: 'menu',
|
|
42
42
|
...listProps,
|
|
43
43
|
onKeyDown: (e)=>{
|
|
44
44
|
// don't clear the menu selected keys if the user is presses escape since escape closes the menu
|
|
45
|
-
if (e.key !==
|
|
45
|
+
if (e.key !== 'Escape') listProps.onKeyDown(e);
|
|
46
46
|
}
|
|
47
47
|
})
|
|
48
48
|
};
|
package/dist/useMenu.module.js
CHANGED
|
@@ -16,7 +16,7 @@ import {useSelectableList as $ieN2F$useSelectableList} from "@react-aria/selecti
|
|
|
16
16
|
const $d5336fe17ce95402$export$6f49b4016bfc8d56 = new WeakMap();
|
|
17
17
|
function $d5336fe17ce95402$export$38eaa17faae8f579(props, state, ref) {
|
|
18
18
|
let { shouldFocusWrap: shouldFocusWrap = true, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ...otherProps } = props;
|
|
19
|
-
if (!props[
|
|
19
|
+
if (!props['aria-label'] && !props['aria-labelledby']) console.warn('An aria-label or aria-labelledby prop is required for accessibility.');
|
|
20
20
|
let domProps = (0, $ieN2F$filterDOMProps)(props, {
|
|
21
21
|
labelable: true
|
|
22
22
|
});
|
|
@@ -27,7 +27,7 @@ function $d5336fe17ce95402$export$38eaa17faae8f579(props, state, ref) {
|
|
|
27
27
|
collection: state.collection,
|
|
28
28
|
disabledKeys: state.disabledKeys,
|
|
29
29
|
shouldFocusWrap: shouldFocusWrap,
|
|
30
|
-
linkBehavior:
|
|
30
|
+
linkBehavior: 'override'
|
|
31
31
|
});
|
|
32
32
|
$d5336fe17ce95402$export$6f49b4016bfc8d56.set(state, {
|
|
33
33
|
onClose: props.onClose,
|
|
@@ -38,11 +38,11 @@ function $d5336fe17ce95402$export$38eaa17faae8f579(props, state, ref) {
|
|
|
38
38
|
onKeyDown: onKeyDown,
|
|
39
39
|
onKeyUp: onKeyUp
|
|
40
40
|
}, {
|
|
41
|
-
role:
|
|
41
|
+
role: 'menu',
|
|
42
42
|
...listProps,
|
|
43
43
|
onKeyDown: (e)=>{
|
|
44
44
|
// don't clear the menu selected keys if the user is presses escape since escape closes the menu
|
|
45
|
-
if (e.key !==
|
|
45
|
+
if (e.key !== 'Escape') listProps.onKeyDown(e);
|
|
46
46
|
}
|
|
47
47
|
})
|
|
48
48
|
};
|
package/dist/useMenuItem.main.js
CHANGED
|
@@ -26,7 +26,7 @@ $parcel$export(module.exports, "useMenuItem", () => $38191ed02615ec07$export$9d3
|
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
29
|
-
let { key: key, closeOnSelect: closeOnSelect, isVirtualized: isVirtualized,
|
|
29
|
+
let { key: key, closeOnSelect: closeOnSelect, isVirtualized: isVirtualized, 'aria-haspopup': hasPopup, onPressStart: pressStartProp, onPressUp: pressUpProp, onPress: onPress, onPressChange: onPressChange, onPressEnd: onPressEnd, onHoverStart: hoverStartProp, onHoverChange: onHoverChange, onHoverEnd: onHoverEnd, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onFocus: onFocus, onFocusChange: onFocusChange, onBlur: onBlur } = props;
|
|
30
30
|
let isTrigger = !!hasPopup;
|
|
31
31
|
var _props_isDisabled;
|
|
32
32
|
let isDisabled = (_props_isDisabled = props.isDisabled) !== null && _props_isDisabled !== void 0 ? _props_isDisabled : state.selectionManager.isDisabled(key);
|
|
@@ -44,42 +44,42 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
44
44
|
else if (data.onAction) data.onAction(key);
|
|
45
45
|
if (e.target instanceof HTMLAnchorElement) router.open(e.target, e, item.props.href, item.props.routerOptions);
|
|
46
46
|
};
|
|
47
|
-
let role =
|
|
47
|
+
let role = 'menuitem';
|
|
48
48
|
if (!isTrigger) {
|
|
49
|
-
if (state.selectionManager.selectionMode ===
|
|
50
|
-
else if (state.selectionManager.selectionMode ===
|
|
49
|
+
if (state.selectionManager.selectionMode === 'single') role = 'menuitemradio';
|
|
50
|
+
else if (state.selectionManager.selectionMode === 'multiple') role = 'menuitemcheckbox';
|
|
51
51
|
}
|
|
52
52
|
let labelId = (0, $byVdR$reactariautils.useSlotId)();
|
|
53
53
|
let descriptionId = (0, $byVdR$reactariautils.useSlotId)();
|
|
54
54
|
let keyboardId = (0, $byVdR$reactariautils.useSlotId)();
|
|
55
55
|
let ariaProps = {
|
|
56
|
-
|
|
56
|
+
'aria-disabled': isDisabled || undefined,
|
|
57
57
|
role: role,
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
'aria-label': props['aria-label'],
|
|
59
|
+
'aria-labelledby': labelId,
|
|
60
|
+
'aria-describedby': [
|
|
61
61
|
descriptionId,
|
|
62
62
|
keyboardId
|
|
63
|
-
].filter(Boolean).join(
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
63
|
+
].filter(Boolean).join(' ') || undefined,
|
|
64
|
+
'aria-controls': props['aria-controls'],
|
|
65
|
+
'aria-haspopup': hasPopup,
|
|
66
|
+
'aria-expanded': props['aria-expanded']
|
|
67
67
|
};
|
|
68
|
-
if (state.selectionManager.selectionMode !==
|
|
68
|
+
if (state.selectionManager.selectionMode !== 'none' && !isTrigger) ariaProps['aria-checked'] = isSelected;
|
|
69
69
|
if (isVirtualized) {
|
|
70
|
-
ariaProps[
|
|
71
|
-
ariaProps[
|
|
70
|
+
ariaProps['aria-posinset'] = item === null || item === void 0 ? void 0 : item.index;
|
|
71
|
+
ariaProps['aria-setsize'] = (0, $byVdR$reactstatelycollections.getItemCount)(state.collection);
|
|
72
72
|
}
|
|
73
73
|
let onPressStart = (e)=>{
|
|
74
|
-
if (e.pointerType ===
|
|
74
|
+
if (e.pointerType === 'keyboard') performAction(e);
|
|
75
75
|
pressStartProp === null || pressStartProp === void 0 ? void 0 : pressStartProp(e);
|
|
76
76
|
};
|
|
77
77
|
let onPressUp = (e)=>{
|
|
78
|
-
if (e.pointerType !==
|
|
78
|
+
if (e.pointerType !== 'keyboard') {
|
|
79
79
|
performAction(e);
|
|
80
80
|
// Pressing a menu item should close by default in single selection mode but not multiple
|
|
81
81
|
// selection mode, except if overridden by the closeOnSelect prop.
|
|
82
|
-
if (!isTrigger && onClose && (closeOnSelect !== null && closeOnSelect !== void 0 ? closeOnSelect : state.selectionManager.selectionMode !==
|
|
82
|
+
if (!isTrigger && onClose && (closeOnSelect !== null && closeOnSelect !== void 0 ? closeOnSelect : state.selectionManager.selectionMode !== 'multiple' || state.selectionManager.isLink(key))) onClose();
|
|
83
83
|
}
|
|
84
84
|
pressUpProp === null || pressUpProp === void 0 ? void 0 : pressUpProp(e);
|
|
85
85
|
};
|
|
@@ -93,7 +93,7 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
93
93
|
// because we handle it ourselves. The behavior of menus
|
|
94
94
|
// is slightly different from other collections because
|
|
95
95
|
// actions are performed on key down rather than key up.
|
|
96
|
-
linkBehavior:
|
|
96
|
+
linkBehavior: 'none'
|
|
97
97
|
});
|
|
98
98
|
let { pressProps: pressProps, isPressed: isPressed } = (0, $byVdR$reactariainteractions.usePress)({
|
|
99
99
|
onPressStart: onPressStart,
|
|
@@ -124,10 +124,10 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
124
124
|
return;
|
|
125
125
|
}
|
|
126
126
|
switch(e.key){
|
|
127
|
-
case
|
|
128
|
-
if (!isDisabled && state.selectionManager.selectionMode ===
|
|
127
|
+
case ' ':
|
|
128
|
+
if (!isDisabled && state.selectionManager.selectionMode === 'none' && !isTrigger && closeOnSelect !== false && onClose) onClose();
|
|
129
129
|
break;
|
|
130
|
-
case
|
|
130
|
+
case 'Enter':
|
|
131
131
|
// The Enter key should always close on select, except if overridden.
|
|
132
132
|
if (!isDisabled && closeOnSelect !== false && !isTrigger && onClose) onClose();
|
|
133
133
|
break;
|
|
@@ -152,7 +152,7 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
152
152
|
...ariaProps,
|
|
153
153
|
...(0, $byVdR$reactariautils.mergeProps)(domProps, linkProps, isTrigger ? {
|
|
154
154
|
onFocus: itemProps.onFocus,
|
|
155
|
-
|
|
155
|
+
'data-key': itemProps['data-key']
|
|
156
156
|
} : itemProps, pressProps, hoverProps, keyboardProps, focusProps),
|
|
157
157
|
tabIndex: itemProps.tabIndex != null ? -1 : undefined
|
|
158
158
|
},
|
package/dist/useMenuItem.mjs
CHANGED
|
@@ -20,7 +20,7 @@ import {useSelectableItem as $7Kjv5$useSelectableItem} from "@react-aria/selecti
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
23
|
-
let { key: key, closeOnSelect: closeOnSelect, isVirtualized: isVirtualized,
|
|
23
|
+
let { key: key, closeOnSelect: closeOnSelect, isVirtualized: isVirtualized, 'aria-haspopup': hasPopup, onPressStart: pressStartProp, onPressUp: pressUpProp, onPress: onPress, onPressChange: onPressChange, onPressEnd: onPressEnd, onHoverStart: hoverStartProp, onHoverChange: onHoverChange, onHoverEnd: onHoverEnd, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onFocus: onFocus, onFocusChange: onFocusChange, onBlur: onBlur } = props;
|
|
24
24
|
let isTrigger = !!hasPopup;
|
|
25
25
|
var _props_isDisabled;
|
|
26
26
|
let isDisabled = (_props_isDisabled = props.isDisabled) !== null && _props_isDisabled !== void 0 ? _props_isDisabled : state.selectionManager.isDisabled(key);
|
|
@@ -38,42 +38,42 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
38
38
|
else if (data.onAction) data.onAction(key);
|
|
39
39
|
if (e.target instanceof HTMLAnchorElement) router.open(e.target, e, item.props.href, item.props.routerOptions);
|
|
40
40
|
};
|
|
41
|
-
let role =
|
|
41
|
+
let role = 'menuitem';
|
|
42
42
|
if (!isTrigger) {
|
|
43
|
-
if (state.selectionManager.selectionMode ===
|
|
44
|
-
else if (state.selectionManager.selectionMode ===
|
|
43
|
+
if (state.selectionManager.selectionMode === 'single') role = 'menuitemradio';
|
|
44
|
+
else if (state.selectionManager.selectionMode === 'multiple') role = 'menuitemcheckbox';
|
|
45
45
|
}
|
|
46
46
|
let labelId = (0, $7Kjv5$useSlotId)();
|
|
47
47
|
let descriptionId = (0, $7Kjv5$useSlotId)();
|
|
48
48
|
let keyboardId = (0, $7Kjv5$useSlotId)();
|
|
49
49
|
let ariaProps = {
|
|
50
|
-
|
|
50
|
+
'aria-disabled': isDisabled || undefined,
|
|
51
51
|
role: role,
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
'aria-label': props['aria-label'],
|
|
53
|
+
'aria-labelledby': labelId,
|
|
54
|
+
'aria-describedby': [
|
|
55
55
|
descriptionId,
|
|
56
56
|
keyboardId
|
|
57
|
-
].filter(Boolean).join(
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
57
|
+
].filter(Boolean).join(' ') || undefined,
|
|
58
|
+
'aria-controls': props['aria-controls'],
|
|
59
|
+
'aria-haspopup': hasPopup,
|
|
60
|
+
'aria-expanded': props['aria-expanded']
|
|
61
61
|
};
|
|
62
|
-
if (state.selectionManager.selectionMode !==
|
|
62
|
+
if (state.selectionManager.selectionMode !== 'none' && !isTrigger) ariaProps['aria-checked'] = isSelected;
|
|
63
63
|
if (isVirtualized) {
|
|
64
|
-
ariaProps[
|
|
65
|
-
ariaProps[
|
|
64
|
+
ariaProps['aria-posinset'] = item === null || item === void 0 ? void 0 : item.index;
|
|
65
|
+
ariaProps['aria-setsize'] = (0, $7Kjv5$getItemCount)(state.collection);
|
|
66
66
|
}
|
|
67
67
|
let onPressStart = (e)=>{
|
|
68
|
-
if (e.pointerType ===
|
|
68
|
+
if (e.pointerType === 'keyboard') performAction(e);
|
|
69
69
|
pressStartProp === null || pressStartProp === void 0 ? void 0 : pressStartProp(e);
|
|
70
70
|
};
|
|
71
71
|
let onPressUp = (e)=>{
|
|
72
|
-
if (e.pointerType !==
|
|
72
|
+
if (e.pointerType !== 'keyboard') {
|
|
73
73
|
performAction(e);
|
|
74
74
|
// Pressing a menu item should close by default in single selection mode but not multiple
|
|
75
75
|
// selection mode, except if overridden by the closeOnSelect prop.
|
|
76
|
-
if (!isTrigger && onClose && (closeOnSelect !== null && closeOnSelect !== void 0 ? closeOnSelect : state.selectionManager.selectionMode !==
|
|
76
|
+
if (!isTrigger && onClose && (closeOnSelect !== null && closeOnSelect !== void 0 ? closeOnSelect : state.selectionManager.selectionMode !== 'multiple' || state.selectionManager.isLink(key))) onClose();
|
|
77
77
|
}
|
|
78
78
|
pressUpProp === null || pressUpProp === void 0 ? void 0 : pressUpProp(e);
|
|
79
79
|
};
|
|
@@ -87,7 +87,7 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
87
87
|
// because we handle it ourselves. The behavior of menus
|
|
88
88
|
// is slightly different from other collections because
|
|
89
89
|
// actions are performed on key down rather than key up.
|
|
90
|
-
linkBehavior:
|
|
90
|
+
linkBehavior: 'none'
|
|
91
91
|
});
|
|
92
92
|
let { pressProps: pressProps, isPressed: isPressed } = (0, $7Kjv5$usePress)({
|
|
93
93
|
onPressStart: onPressStart,
|
|
@@ -118,10 +118,10 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
118
118
|
return;
|
|
119
119
|
}
|
|
120
120
|
switch(e.key){
|
|
121
|
-
case
|
|
122
|
-
if (!isDisabled && state.selectionManager.selectionMode ===
|
|
121
|
+
case ' ':
|
|
122
|
+
if (!isDisabled && state.selectionManager.selectionMode === 'none' && !isTrigger && closeOnSelect !== false && onClose) onClose();
|
|
123
123
|
break;
|
|
124
|
-
case
|
|
124
|
+
case 'Enter':
|
|
125
125
|
// The Enter key should always close on select, except if overridden.
|
|
126
126
|
if (!isDisabled && closeOnSelect !== false && !isTrigger && onClose) onClose();
|
|
127
127
|
break;
|
|
@@ -146,7 +146,7 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
146
146
|
...ariaProps,
|
|
147
147
|
...(0, $7Kjv5$mergeProps)(domProps, linkProps, isTrigger ? {
|
|
148
148
|
onFocus: itemProps.onFocus,
|
|
149
|
-
|
|
149
|
+
'data-key': itemProps['data-key']
|
|
150
150
|
} : itemProps, pressProps, hoverProps, keyboardProps, focusProps),
|
|
151
151
|
tabIndex: itemProps.tabIndex != null ? -1 : undefined
|
|
152
152
|
},
|
|
@@ -20,7 +20,7 @@ import {useSelectableItem as $7Kjv5$useSelectableItem} from "@react-aria/selecti
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
23
|
-
let { key: key, closeOnSelect: closeOnSelect, isVirtualized: isVirtualized,
|
|
23
|
+
let { key: key, closeOnSelect: closeOnSelect, isVirtualized: isVirtualized, 'aria-haspopup': hasPopup, onPressStart: pressStartProp, onPressUp: pressUpProp, onPress: onPress, onPressChange: onPressChange, onPressEnd: onPressEnd, onHoverStart: hoverStartProp, onHoverChange: onHoverChange, onHoverEnd: onHoverEnd, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onFocus: onFocus, onFocusChange: onFocusChange, onBlur: onBlur } = props;
|
|
24
24
|
let isTrigger = !!hasPopup;
|
|
25
25
|
var _props_isDisabled;
|
|
26
26
|
let isDisabled = (_props_isDisabled = props.isDisabled) !== null && _props_isDisabled !== void 0 ? _props_isDisabled : state.selectionManager.isDisabled(key);
|
|
@@ -38,42 +38,42 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
38
38
|
else if (data.onAction) data.onAction(key);
|
|
39
39
|
if (e.target instanceof HTMLAnchorElement) router.open(e.target, e, item.props.href, item.props.routerOptions);
|
|
40
40
|
};
|
|
41
|
-
let role =
|
|
41
|
+
let role = 'menuitem';
|
|
42
42
|
if (!isTrigger) {
|
|
43
|
-
if (state.selectionManager.selectionMode ===
|
|
44
|
-
else if (state.selectionManager.selectionMode ===
|
|
43
|
+
if (state.selectionManager.selectionMode === 'single') role = 'menuitemradio';
|
|
44
|
+
else if (state.selectionManager.selectionMode === 'multiple') role = 'menuitemcheckbox';
|
|
45
45
|
}
|
|
46
46
|
let labelId = (0, $7Kjv5$useSlotId)();
|
|
47
47
|
let descriptionId = (0, $7Kjv5$useSlotId)();
|
|
48
48
|
let keyboardId = (0, $7Kjv5$useSlotId)();
|
|
49
49
|
let ariaProps = {
|
|
50
|
-
|
|
50
|
+
'aria-disabled': isDisabled || undefined,
|
|
51
51
|
role: role,
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
'aria-label': props['aria-label'],
|
|
53
|
+
'aria-labelledby': labelId,
|
|
54
|
+
'aria-describedby': [
|
|
55
55
|
descriptionId,
|
|
56
56
|
keyboardId
|
|
57
|
-
].filter(Boolean).join(
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
57
|
+
].filter(Boolean).join(' ') || undefined,
|
|
58
|
+
'aria-controls': props['aria-controls'],
|
|
59
|
+
'aria-haspopup': hasPopup,
|
|
60
|
+
'aria-expanded': props['aria-expanded']
|
|
61
61
|
};
|
|
62
|
-
if (state.selectionManager.selectionMode !==
|
|
62
|
+
if (state.selectionManager.selectionMode !== 'none' && !isTrigger) ariaProps['aria-checked'] = isSelected;
|
|
63
63
|
if (isVirtualized) {
|
|
64
|
-
ariaProps[
|
|
65
|
-
ariaProps[
|
|
64
|
+
ariaProps['aria-posinset'] = item === null || item === void 0 ? void 0 : item.index;
|
|
65
|
+
ariaProps['aria-setsize'] = (0, $7Kjv5$getItemCount)(state.collection);
|
|
66
66
|
}
|
|
67
67
|
let onPressStart = (e)=>{
|
|
68
|
-
if (e.pointerType ===
|
|
68
|
+
if (e.pointerType === 'keyboard') performAction(e);
|
|
69
69
|
pressStartProp === null || pressStartProp === void 0 ? void 0 : pressStartProp(e);
|
|
70
70
|
};
|
|
71
71
|
let onPressUp = (e)=>{
|
|
72
|
-
if (e.pointerType !==
|
|
72
|
+
if (e.pointerType !== 'keyboard') {
|
|
73
73
|
performAction(e);
|
|
74
74
|
// Pressing a menu item should close by default in single selection mode but not multiple
|
|
75
75
|
// selection mode, except if overridden by the closeOnSelect prop.
|
|
76
|
-
if (!isTrigger && onClose && (closeOnSelect !== null && closeOnSelect !== void 0 ? closeOnSelect : state.selectionManager.selectionMode !==
|
|
76
|
+
if (!isTrigger && onClose && (closeOnSelect !== null && closeOnSelect !== void 0 ? closeOnSelect : state.selectionManager.selectionMode !== 'multiple' || state.selectionManager.isLink(key))) onClose();
|
|
77
77
|
}
|
|
78
78
|
pressUpProp === null || pressUpProp === void 0 ? void 0 : pressUpProp(e);
|
|
79
79
|
};
|
|
@@ -87,7 +87,7 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
87
87
|
// because we handle it ourselves. The behavior of menus
|
|
88
88
|
// is slightly different from other collections because
|
|
89
89
|
// actions are performed on key down rather than key up.
|
|
90
|
-
linkBehavior:
|
|
90
|
+
linkBehavior: 'none'
|
|
91
91
|
});
|
|
92
92
|
let { pressProps: pressProps, isPressed: isPressed } = (0, $7Kjv5$usePress)({
|
|
93
93
|
onPressStart: onPressStart,
|
|
@@ -118,10 +118,10 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
118
118
|
return;
|
|
119
119
|
}
|
|
120
120
|
switch(e.key){
|
|
121
|
-
case
|
|
122
|
-
if (!isDisabled && state.selectionManager.selectionMode ===
|
|
121
|
+
case ' ':
|
|
122
|
+
if (!isDisabled && state.selectionManager.selectionMode === 'none' && !isTrigger && closeOnSelect !== false && onClose) onClose();
|
|
123
123
|
break;
|
|
124
|
-
case
|
|
124
|
+
case 'Enter':
|
|
125
125
|
// The Enter key should always close on select, except if overridden.
|
|
126
126
|
if (!isDisabled && closeOnSelect !== false && !isTrigger && onClose) onClose();
|
|
127
127
|
break;
|
|
@@ -146,7 +146,7 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
146
146
|
...ariaProps,
|
|
147
147
|
...(0, $7Kjv5$mergeProps)(domProps, linkProps, isTrigger ? {
|
|
148
148
|
onFocus: itemProps.onFocus,
|
|
149
|
-
|
|
149
|
+
'data-key': itemProps['data-key']
|
|
150
150
|
} : itemProps, pressProps, hoverProps, keyboardProps, focusProps),
|
|
151
151
|
tabIndex: itemProps.tabIndex != null ? -1 : undefined
|
|
152
152
|
},
|
|
@@ -18,23 +18,23 @@ $parcel$export(module.exports, "useMenuSection", () => $63008655e23408c5$export$
|
|
|
18
18
|
* governing permissions and limitations under the License.
|
|
19
19
|
*/
|
|
20
20
|
function $63008655e23408c5$export$73f7a44322579622(props) {
|
|
21
|
-
let { heading: heading,
|
|
21
|
+
let { heading: heading, 'aria-label': ariaLabel } = props;
|
|
22
22
|
let headingId = (0, $c1jOQ$reactariautils.useId)();
|
|
23
23
|
return {
|
|
24
24
|
itemProps: {
|
|
25
|
-
role:
|
|
25
|
+
role: 'presentation'
|
|
26
26
|
},
|
|
27
27
|
headingProps: heading ? {
|
|
28
28
|
// Techincally, menus cannot contain headings according to ARIA.
|
|
29
29
|
// We hide the heading from assistive technology, using role="presentation",
|
|
30
30
|
// and only use it as a label for the nested group.
|
|
31
31
|
id: headingId,
|
|
32
|
-
role:
|
|
32
|
+
role: 'presentation'
|
|
33
33
|
} : {},
|
|
34
34
|
groupProps: {
|
|
35
|
-
role:
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
role: 'group',
|
|
36
|
+
'aria-label': ariaLabel,
|
|
37
|
+
'aria-labelledby': heading ? headingId : undefined
|
|
38
38
|
}
|
|
39
39
|
};
|
|
40
40
|
}
|
package/dist/useMenuSection.mjs
CHANGED
|
@@ -12,23 +12,23 @@ import {useId as $7Mibs$useId} from "@react-aria/utils";
|
|
|
12
12
|
* governing permissions and limitations under the License.
|
|
13
13
|
*/
|
|
14
14
|
function $3e5eb2498db5b506$export$73f7a44322579622(props) {
|
|
15
|
-
let { heading: heading,
|
|
15
|
+
let { heading: heading, 'aria-label': ariaLabel } = props;
|
|
16
16
|
let headingId = (0, $7Mibs$useId)();
|
|
17
17
|
return {
|
|
18
18
|
itemProps: {
|
|
19
|
-
role:
|
|
19
|
+
role: 'presentation'
|
|
20
20
|
},
|
|
21
21
|
headingProps: heading ? {
|
|
22
22
|
// Techincally, menus cannot contain headings according to ARIA.
|
|
23
23
|
// We hide the heading from assistive technology, using role="presentation",
|
|
24
24
|
// and only use it as a label for the nested group.
|
|
25
25
|
id: headingId,
|
|
26
|
-
role:
|
|
26
|
+
role: 'presentation'
|
|
27
27
|
} : {},
|
|
28
28
|
groupProps: {
|
|
29
|
-
role:
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
role: 'group',
|
|
30
|
+
'aria-label': ariaLabel,
|
|
31
|
+
'aria-labelledby': heading ? headingId : undefined
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
34
|
}
|
|
@@ -12,23 +12,23 @@ import {useId as $7Mibs$useId} from "@react-aria/utils";
|
|
|
12
12
|
* governing permissions and limitations under the License.
|
|
13
13
|
*/
|
|
14
14
|
function $3e5eb2498db5b506$export$73f7a44322579622(props) {
|
|
15
|
-
let { heading: heading,
|
|
15
|
+
let { heading: heading, 'aria-label': ariaLabel } = props;
|
|
16
16
|
let headingId = (0, $7Mibs$useId)();
|
|
17
17
|
return {
|
|
18
18
|
itemProps: {
|
|
19
|
-
role:
|
|
19
|
+
role: 'presentation'
|
|
20
20
|
},
|
|
21
21
|
headingProps: heading ? {
|
|
22
22
|
// Techincally, menus cannot contain headings according to ARIA.
|
|
23
23
|
// We hide the heading from assistive technology, using role="presentation",
|
|
24
24
|
// and only use it as a label for the nested group.
|
|
25
25
|
id: headingId,
|
|
26
|
-
role:
|
|
26
|
+
role: 'presentation'
|
|
27
27
|
} : {},
|
|
28
28
|
groupProps: {
|
|
29
|
-
role:
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
role: 'group',
|
|
30
|
+
'aria-label': ariaLabel,
|
|
31
|
+
'aria-labelledby': heading ? headingId : undefined
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
34
|
}
|
|
@@ -30,55 +30,55 @@ $parcel$export(module.exports, "useMenuTrigger", () => $7211ab9328763fb9$export$
|
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
function $7211ab9328763fb9$export$dc9c12ed27dd1b49(props, state, ref) {
|
|
33
|
-
let { type: type =
|
|
33
|
+
let { type: type = 'menu', isDisabled: isDisabled, trigger: trigger = 'press' } = props;
|
|
34
34
|
let menuTriggerId = (0, $jo7gW$reactariautils.useId)();
|
|
35
35
|
let { triggerProps: triggerProps, overlayProps: overlayProps } = (0, $jo7gW$reactariaoverlays.useOverlayTrigger)({
|
|
36
36
|
type: type
|
|
37
37
|
}, state, ref);
|
|
38
38
|
let onKeyDown = (e)=>{
|
|
39
39
|
if (isDisabled) return;
|
|
40
|
-
if (trigger ===
|
|
40
|
+
if (trigger === 'longPress' && !e.altKey) return;
|
|
41
41
|
if (ref && ref.current) switch(e.key){
|
|
42
|
-
case
|
|
43
|
-
case
|
|
44
|
-
if (trigger ===
|
|
42
|
+
case 'Enter':
|
|
43
|
+
case ' ':
|
|
44
|
+
if (trigger === 'longPress') return;
|
|
45
45
|
// fallthrough
|
|
46
|
-
case
|
|
46
|
+
case 'ArrowDown':
|
|
47
47
|
// Stop propagation, unless it would already be handled by useKeyboard.
|
|
48
|
-
if (!(
|
|
48
|
+
if (!('continuePropagation' in e)) e.stopPropagation();
|
|
49
49
|
e.preventDefault();
|
|
50
|
-
state.toggle(
|
|
50
|
+
state.toggle('first');
|
|
51
51
|
break;
|
|
52
|
-
case
|
|
53
|
-
if (!(
|
|
52
|
+
case 'ArrowUp':
|
|
53
|
+
if (!('continuePropagation' in e)) e.stopPropagation();
|
|
54
54
|
e.preventDefault();
|
|
55
|
-
state.toggle(
|
|
55
|
+
state.toggle('last');
|
|
56
56
|
break;
|
|
57
57
|
default:
|
|
58
58
|
// Allow other keys.
|
|
59
|
-
if (
|
|
59
|
+
if ('continuePropagation' in e) e.continuePropagation();
|
|
60
60
|
}
|
|
61
61
|
};
|
|
62
|
-
let stringFormatter = (0, $jo7gW$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($d1742ec2644a0949$exports))),
|
|
62
|
+
let stringFormatter = (0, $jo7gW$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($d1742ec2644a0949$exports))), '@react-aria/menu');
|
|
63
63
|
let { longPressProps: longPressProps } = (0, $jo7gW$reactariainteractions.useLongPress)({
|
|
64
|
-
isDisabled: isDisabled || trigger !==
|
|
65
|
-
accessibilityDescription: stringFormatter.format(
|
|
64
|
+
isDisabled: isDisabled || trigger !== 'longPress',
|
|
65
|
+
accessibilityDescription: stringFormatter.format('longPressMessage'),
|
|
66
66
|
onLongPressStart () {
|
|
67
67
|
state.close();
|
|
68
68
|
},
|
|
69
69
|
onLongPress () {
|
|
70
|
-
state.open(
|
|
70
|
+
state.open('first');
|
|
71
71
|
}
|
|
72
72
|
});
|
|
73
73
|
let pressProps = {
|
|
74
74
|
onPressStart (e) {
|
|
75
75
|
// For consistency with native, open the menu on mouse/key down, but touch up.
|
|
76
|
-
if (e.pointerType !==
|
|
76
|
+
if (e.pointerType !== 'touch' && e.pointerType !== 'keyboard' && !isDisabled) // If opened with a screen reader, auto focus the first item.
|
|
77
77
|
// Otherwise, the menu itself will be focused.
|
|
78
|
-
state.open(e.pointerType ===
|
|
78
|
+
state.open(e.pointerType === 'virtual' ? 'first' : null);
|
|
79
79
|
},
|
|
80
80
|
onPress (e) {
|
|
81
|
-
if (e.pointerType ===
|
|
81
|
+
if (e.pointerType === 'touch' && !isDisabled) state.toggle();
|
|
82
82
|
}
|
|
83
83
|
};
|
|
84
84
|
// omit onPress from triggerProps since we override it above.
|
|
@@ -86,13 +86,13 @@ function $7211ab9328763fb9$export$dc9c12ed27dd1b49(props, state, ref) {
|
|
|
86
86
|
return {
|
|
87
87
|
menuTriggerProps: {
|
|
88
88
|
...triggerProps,
|
|
89
|
-
...trigger ===
|
|
89
|
+
...trigger === 'press' ? pressProps : longPressProps,
|
|
90
90
|
id: menuTriggerId,
|
|
91
91
|
onKeyDown: onKeyDown
|
|
92
92
|
},
|
|
93
93
|
menuProps: {
|
|
94
94
|
...overlayProps,
|
|
95
|
-
|
|
95
|
+
'aria-labelledby': menuTriggerId,
|
|
96
96
|
autoFocus: state.focusStrategy || true,
|
|
97
97
|
onClose: state.close
|
|
98
98
|
}
|