@react-aria/menu 3.15.5 → 3.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/types.d.ts +9 -2
- package/dist/types.d.ts.map +1 -1
- package/dist/useMenu.main.js +7 -5
- package/dist/useMenu.main.js.map +1 -1
- package/dist/useMenu.mjs +8 -5
- package/dist/useMenu.module.js +8 -5
- package/dist/useMenu.module.js.map +1 -1
- package/dist/useMenuItem.main.js +39 -22
- package/dist/useMenuItem.main.js.map +1 -1
- package/dist/useMenuItem.mjs +39 -22
- package/dist/useMenuItem.module.js +39 -22
- package/dist/useMenuItem.module.js.map +1 -1
- package/dist/useMenuTrigger.main.js +1 -0
- package/dist/useMenuTrigger.main.js.map +1 -1
- package/dist/useMenuTrigger.mjs +1 -0
- package/dist/useMenuTrigger.module.js +1 -0
- package/dist/useMenuTrigger.module.js.map +1 -1
- package/dist/useSafelyMouseToSubmenu.main.js +1 -1
- package/dist/useSafelyMouseToSubmenu.main.js.map +1 -1
- package/dist/useSafelyMouseToSubmenu.mjs +1 -1
- package/dist/useSafelyMouseToSubmenu.module.js +1 -1
- package/dist/useSafelyMouseToSubmenu.module.js.map +1 -1
- package/dist/useSubmenuTrigger.main.js +8 -4
- package/dist/useSubmenuTrigger.main.js.map +1 -1
- package/dist/useSubmenuTrigger.mjs +8 -4
- package/dist/useSubmenuTrigger.module.js +8 -4
- package/dist/useSubmenuTrigger.module.js.map +1 -1
- package/dist/utils.main.js +20 -0
- package/dist/utils.main.js.map +1 -0
- package/dist/utils.mjs +15 -0
- package/dist/utils.module.js +15 -0
- package/dist/utils.module.js.map +1 -0
- package/package.json +17 -16
- package/src/useMenu.ts +11 -13
- package/src/useMenuItem.ts +52 -28
- package/src/useMenuTrigger.ts +2 -1
- package/src/useSafelyMouseToSubmenu.ts +1 -1
- package/src/useSubmenuTrigger.ts +5 -5
- package/src/utils.ts +22 -0
package/dist/types.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import { DOMAttributes, KeyboardDelegate, KeyboardEvents, RefObject, DOMProps, F
|
|
|
3
3
|
import { TreeState } from "@react-stately/tree";
|
|
4
4
|
import { AriaButtonProps } from "@react-types/button";
|
|
5
5
|
import { MenuTriggerState, SubmenuTriggerState } from "@react-stately/menu";
|
|
6
|
+
import { SelectionManager } from "@react-stately/selection";
|
|
6
7
|
import { ReactNode } from "react";
|
|
7
8
|
import { AriaPopoverProps, OverlayProps } from "@react-aria/overlays";
|
|
8
9
|
export interface MenuAria {
|
|
@@ -17,6 +18,10 @@ export interface AriaMenuOptions<T> extends Omit<AriaMenuProps<T>, 'children'>,
|
|
|
17
18
|
* to override the default.
|
|
18
19
|
*/
|
|
19
20
|
keyboardDelegate?: KeyboardDelegate;
|
|
21
|
+
/**
|
|
22
|
+
* Whether the menu items should use virtual focus instead of being focused directly.
|
|
23
|
+
*/
|
|
24
|
+
shouldUseVirtualFocus?: boolean;
|
|
20
25
|
}
|
|
21
26
|
/**
|
|
22
27
|
* Provides the behavior and accessibility implementation for a menu component.
|
|
@@ -78,7 +83,7 @@ export interface AriaMenuItemProps extends DOMProps, PressEvents, HoverEvents, K
|
|
|
78
83
|
/** A screen reader only label for the menu item. */
|
|
79
84
|
'aria-label'?: string;
|
|
80
85
|
/** The unique key for the menu item. */
|
|
81
|
-
key
|
|
86
|
+
key: Key;
|
|
82
87
|
/**
|
|
83
88
|
* Handler that is called when the menu should close after selecting an item.
|
|
84
89
|
* @deprecated - pass to the menu instead.
|
|
@@ -102,6 +107,8 @@ export interface AriaMenuItemProps extends DOMProps, PressEvents, HoverEvents, K
|
|
|
102
107
|
'aria-expanded'?: boolean | 'true' | 'false';
|
|
103
108
|
/** Identifies the menu item's popup element whose contents or presence is controlled by the menu item. */
|
|
104
109
|
'aria-controls'?: string;
|
|
110
|
+
/** Override of the selection manager. By default, `state.selectionManager` is used. */
|
|
111
|
+
selectionManager?: SelectionManager;
|
|
105
112
|
}
|
|
106
113
|
/**
|
|
107
114
|
* Provides the behavior and accessibility implementation for an item in a menu.
|
|
@@ -150,7 +157,7 @@ export interface AriaSubmenuTriggerProps {
|
|
|
150
157
|
*/
|
|
151
158
|
delay?: number;
|
|
152
159
|
}
|
|
153
|
-
interface SubmenuTriggerProps extends AriaMenuItemProps {
|
|
160
|
+
interface SubmenuTriggerProps extends Omit<AriaMenuItemProps, 'key'> {
|
|
154
161
|
/** Whether the submenu trigger is in an expanded state. */
|
|
155
162
|
isOpen: boolean;
|
|
156
163
|
}
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/menu/src/packages/@react-aria/menu/src/utils.ts","packages/@react-aria/menu/src/packages/@react-aria/menu/src/useMenu.ts","packages/@react-aria/menu/src/packages/@react-aria/menu/src/useMenuTrigger.ts","packages/@react-aria/menu/src/packages/@react-aria/menu/src/useMenuItem.ts","packages/@react-aria/menu/src/packages/@react-aria/menu/src/useMenuSection.ts","packages/@react-aria/menu/src/packages/@react-aria/menu/src/useSafelyMouseToSubmenu.ts","packages/@react-aria/menu/src/packages/@react-aria/menu/src/useSubmenuTrigger.ts","packages/@react-aria/menu/src/packages/@react-aria/menu/src/index.ts","packages/@react-aria/menu/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {useMenuTrigger} from './useMenuTrigger';\nexport {useMenu} from './useMenu';\nexport {useMenuItem} from './useMenuItem';\nexport {useMenuSection} from './useMenuSection';\nexport {useSubmenuTrigger} from './useSubmenuTrigger';\n\nexport type {AriaMenuProps} from '@react-types/menu';\nexport type {AriaMenuTriggerProps, MenuTriggerAria} from './useMenuTrigger';\nexport type {AriaMenuOptions, MenuAria} from './useMenu';\nexport type {AriaMenuItemProps, MenuItemAria} from './useMenuItem';\nexport type {AriaMenuSectionProps, MenuSectionAria} from './useMenuSection';\nexport type {AriaSubmenuTriggerProps, SubmenuTriggerAria} from './useSubmenuTrigger';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/dist/useMenu.main.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
var $815e346b11b84016$exports = require("./utils.main.js");
|
|
1
2
|
var $6CumN$reactariautils = require("@react-aria/utils");
|
|
2
3
|
var $6CumN$reactariaselection = require("@react-aria/selection");
|
|
3
4
|
|
|
@@ -6,7 +7,6 @@ function $parcel$export(e, n, v, s) {
|
|
|
6
7
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
7
8
|
}
|
|
8
9
|
|
|
9
|
-
$parcel$export(module.exports, "menuData", () => $a3815f0132802737$export$6f49b4016bfc8d56);
|
|
10
10
|
$parcel$export(module.exports, "useMenu", () => $a3815f0132802737$export$38eaa17faae8f579);
|
|
11
11
|
/*
|
|
12
12
|
* Copyright 2020 Adobe. All rights reserved.
|
|
@@ -20,7 +20,7 @@ $parcel$export(module.exports, "useMenu", () => $a3815f0132802737$export$38eaa17
|
|
|
20
20
|
* governing permissions and limitations under the License.
|
|
21
21
|
*/
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
|
|
24
24
|
function $a3815f0132802737$export$38eaa17faae8f579(props, state, ref) {
|
|
25
25
|
let { shouldFocusWrap: shouldFocusWrap = true, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ...otherProps } = props;
|
|
26
26
|
if (!props['aria-label'] && !props['aria-labelledby']) console.warn('An aria-label or aria-labelledby prop is required for accessibility.');
|
|
@@ -36,9 +36,10 @@ function $a3815f0132802737$export$38eaa17faae8f579(props, state, ref) {
|
|
|
36
36
|
shouldFocusWrap: shouldFocusWrap,
|
|
37
37
|
linkBehavior: 'override'
|
|
38
38
|
});
|
|
39
|
-
$
|
|
39
|
+
(0, $815e346b11b84016$exports.menuData).set(state, {
|
|
40
40
|
onClose: props.onClose,
|
|
41
|
-
onAction: props.onAction
|
|
41
|
+
onAction: props.onAction,
|
|
42
|
+
shouldUseVirtualFocus: props.shouldUseVirtualFocus
|
|
42
43
|
});
|
|
43
44
|
return {
|
|
44
45
|
menuProps: (0, $6CumN$reactariautils.mergeProps)(domProps, {
|
|
@@ -48,8 +49,9 @@ function $a3815f0132802737$export$38eaa17faae8f579(props, state, ref) {
|
|
|
48
49
|
role: 'menu',
|
|
49
50
|
...listProps,
|
|
50
51
|
onKeyDown: (e)=>{
|
|
52
|
+
var _listProps_onKeyDown;
|
|
51
53
|
// don't clear the menu selected keys if the user is presses escape since escape closes the menu
|
|
52
|
-
if (e.key !== 'Escape') listProps.onKeyDown(e);
|
|
54
|
+
if (e.key !== 'Escape' || props.shouldUseVirtualFocus) (_listProps_onKeyDown = listProps.onKeyDown) === null || _listProps_onKeyDown === void 0 ? void 0 : _listProps_onKeyDown.call(listProps, e);
|
|
53
55
|
}
|
|
54
56
|
})
|
|
55
57
|
};
|
package/dist/useMenu.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC
|
|
1
|
+
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AAkCM,SAAS,0CAAW,KAAyB,EAAE,KAAmB,EAAE,GAAkC;IAC3G,IAAI,mBACF,kBAAkB,iBAClB,SAAS,WACT,OAAO,EACP,GAAG,YACJ,GAAG;IAEJ,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB,EACnD,QAAQ,IAAI,CAAC;IAGf,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACrD,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,2CAAgB,EAAE;QAClC,GAAG,UAAU;aACb;QACA,kBAAkB,MAAM,gBAAgB;QACxC,YAAY,MAAM,UAAU;QAC5B,cAAc,MAAM,YAAY;yBAChC;QACA,cAAc;IAChB;IAEA,CAAA,GAAA,kCAAO,EAAE,GAAG,CAAC,OAAO;QAClB,SAAS,MAAM,OAAO;QACtB,UAAU,MAAM,QAAQ;QACxB,uBAAuB,MAAM,qBAAqB;IACpD;IAEA,OAAO;QACL,WAAW,CAAA,GAAA,gCAAS,EAAE,UAAU;uBAAC;qBAAW;QAAO,GAAG;YACpD,MAAM;YACN,GAAG,SAAS;YACZ,WAAW,CAAC;oBAGR;gBAFF,gGAAgG;gBAChG,IAAI,EAAE,GAAG,KAAK,YAAY,MAAM,qBAAqB,GACnD,uBAAA,UAAU,SAAS,cAAnB,2CAAA,0BAAA,WAAsB;YAE1B;QACF;IACF;AACF","sources":["packages/@react-aria/menu/src/useMenu.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaMenuProps} from '@react-types/menu';\nimport {DOMAttributes, KeyboardDelegate, KeyboardEvents, RefObject} from '@react-types/shared';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {menuData} from './utils';\nimport {TreeState} from '@react-stately/tree';\nimport {useSelectableList} from '@react-aria/selection';\n\nexport interface MenuAria {\n /** Props for the menu element. */\n menuProps: DOMAttributes\n}\n\nexport interface AriaMenuOptions<T> extends Omit<AriaMenuProps<T>, 'children'>, KeyboardEvents {\n /** Whether the menu uses virtual scrolling. */\n isVirtualized?: boolean,\n /**\n * An optional keyboard delegate implementation for type to select,\n * to override the default.\n */\n keyboardDelegate?: KeyboardDelegate,\n /**\n * Whether the menu items should use virtual focus instead of being focused directly.\n */\n shouldUseVirtualFocus?: boolean\n}\n\n/**\n * Provides the behavior and accessibility implementation for a menu component.\n * A menu displays a list of actions or options that a user can choose.\n * @param props - Props for the menu.\n * @param state - State for the menu, as returned by `useListState`.\n */\nexport function useMenu<T>(props: AriaMenuOptions<T>, state: TreeState<T>, ref: RefObject<HTMLElement | null>): MenuAria {\n let {\n shouldFocusWrap = true,\n onKeyDown,\n onKeyUp,\n ...otherProps\n } = props;\n\n if (!props['aria-label'] && !props['aria-labelledby']) {\n console.warn('An aria-label or aria-labelledby prop is required for accessibility.');\n }\n\n let domProps = filterDOMProps(props, {labelable: true});\n let {listProps} = useSelectableList({\n ...otherProps,\n ref,\n selectionManager: state.selectionManager,\n collection: state.collection,\n disabledKeys: state.disabledKeys,\n shouldFocusWrap,\n linkBehavior: 'override'\n });\n\n menuData.set(state, {\n onClose: props.onClose,\n onAction: props.onAction,\n shouldUseVirtualFocus: props.shouldUseVirtualFocus\n });\n\n return {\n menuProps: mergeProps(domProps, {onKeyDown, onKeyUp}, {\n role: 'menu',\n ...listProps,\n onKeyDown: (e) => {\n // don't clear the menu selected keys if the user is presses escape since escape closes the menu\n if (e.key !== 'Escape' || props.shouldUseVirtualFocus) {\n listProps.onKeyDown?.(e);\n }\n }\n })\n };\n}\n"],"names":[],"version":3,"file":"useMenu.main.js.map"}
|
package/dist/useMenu.mjs
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import {menuData as $fc79756100351201$export$6f49b4016bfc8d56} from "./utils.mjs";
|
|
1
2
|
import {filterDOMProps as $ieN2F$filterDOMProps, mergeProps as $ieN2F$mergeProps} from "@react-aria/utils";
|
|
2
3
|
import {useSelectableList as $ieN2F$useSelectableList} from "@react-aria/selection";
|
|
3
4
|
|
|
@@ -13,7 +14,7 @@ import {useSelectableList as $ieN2F$useSelectableList} from "@react-aria/selecti
|
|
|
13
14
|
* governing permissions and limitations under the License.
|
|
14
15
|
*/
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
|
|
17
18
|
function $d5336fe17ce95402$export$38eaa17faae8f579(props, state, ref) {
|
|
18
19
|
let { shouldFocusWrap: shouldFocusWrap = true, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ...otherProps } = props;
|
|
19
20
|
if (!props['aria-label'] && !props['aria-labelledby']) console.warn('An aria-label or aria-labelledby prop is required for accessibility.');
|
|
@@ -29,9 +30,10 @@ function $d5336fe17ce95402$export$38eaa17faae8f579(props, state, ref) {
|
|
|
29
30
|
shouldFocusWrap: shouldFocusWrap,
|
|
30
31
|
linkBehavior: 'override'
|
|
31
32
|
});
|
|
32
|
-
$
|
|
33
|
+
(0, $fc79756100351201$export$6f49b4016bfc8d56).set(state, {
|
|
33
34
|
onClose: props.onClose,
|
|
34
|
-
onAction: props.onAction
|
|
35
|
+
onAction: props.onAction,
|
|
36
|
+
shouldUseVirtualFocus: props.shouldUseVirtualFocus
|
|
35
37
|
});
|
|
36
38
|
return {
|
|
37
39
|
menuProps: (0, $ieN2F$mergeProps)(domProps, {
|
|
@@ -41,13 +43,14 @@ function $d5336fe17ce95402$export$38eaa17faae8f579(props, state, ref) {
|
|
|
41
43
|
role: 'menu',
|
|
42
44
|
...listProps,
|
|
43
45
|
onKeyDown: (e)=>{
|
|
46
|
+
var _listProps_onKeyDown;
|
|
44
47
|
// don't clear the menu selected keys if the user is presses escape since escape closes the menu
|
|
45
|
-
if (e.key !== 'Escape') listProps.onKeyDown(e);
|
|
48
|
+
if (e.key !== 'Escape' || props.shouldUseVirtualFocus) (_listProps_onKeyDown = listProps.onKeyDown) === null || _listProps_onKeyDown === void 0 ? void 0 : _listProps_onKeyDown.call(listProps, e);
|
|
46
49
|
}
|
|
47
50
|
})
|
|
48
51
|
};
|
|
49
52
|
}
|
|
50
53
|
|
|
51
54
|
|
|
52
|
-
export {$d5336fe17ce95402$export$
|
|
55
|
+
export {$d5336fe17ce95402$export$38eaa17faae8f579 as useMenu};
|
|
53
56
|
//# sourceMappingURL=useMenu.module.js.map
|
package/dist/useMenu.module.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import {menuData as $fc79756100351201$export$6f49b4016bfc8d56} from "./utils.module.js";
|
|
1
2
|
import {filterDOMProps as $ieN2F$filterDOMProps, mergeProps as $ieN2F$mergeProps} from "@react-aria/utils";
|
|
2
3
|
import {useSelectableList as $ieN2F$useSelectableList} from "@react-aria/selection";
|
|
3
4
|
|
|
@@ -13,7 +14,7 @@ import {useSelectableList as $ieN2F$useSelectableList} from "@react-aria/selecti
|
|
|
13
14
|
* governing permissions and limitations under the License.
|
|
14
15
|
*/
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
|
|
17
18
|
function $d5336fe17ce95402$export$38eaa17faae8f579(props, state, ref) {
|
|
18
19
|
let { shouldFocusWrap: shouldFocusWrap = true, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ...otherProps } = props;
|
|
19
20
|
if (!props['aria-label'] && !props['aria-labelledby']) console.warn('An aria-label or aria-labelledby prop is required for accessibility.');
|
|
@@ -29,9 +30,10 @@ function $d5336fe17ce95402$export$38eaa17faae8f579(props, state, ref) {
|
|
|
29
30
|
shouldFocusWrap: shouldFocusWrap,
|
|
30
31
|
linkBehavior: 'override'
|
|
31
32
|
});
|
|
32
|
-
$
|
|
33
|
+
(0, $fc79756100351201$export$6f49b4016bfc8d56).set(state, {
|
|
33
34
|
onClose: props.onClose,
|
|
34
|
-
onAction: props.onAction
|
|
35
|
+
onAction: props.onAction,
|
|
36
|
+
shouldUseVirtualFocus: props.shouldUseVirtualFocus
|
|
35
37
|
});
|
|
36
38
|
return {
|
|
37
39
|
menuProps: (0, $ieN2F$mergeProps)(domProps, {
|
|
@@ -41,13 +43,14 @@ function $d5336fe17ce95402$export$38eaa17faae8f579(props, state, ref) {
|
|
|
41
43
|
role: 'menu',
|
|
42
44
|
...listProps,
|
|
43
45
|
onKeyDown: (e)=>{
|
|
46
|
+
var _listProps_onKeyDown;
|
|
44
47
|
// don't clear the menu selected keys if the user is presses escape since escape closes the menu
|
|
45
|
-
if (e.key !== 'Escape') listProps.onKeyDown(e);
|
|
48
|
+
if (e.key !== 'Escape' || props.shouldUseVirtualFocus) (_listProps_onKeyDown = listProps.onKeyDown) === null || _listProps_onKeyDown === void 0 ? void 0 : _listProps_onKeyDown.call(listProps, e);
|
|
46
49
|
}
|
|
47
50
|
})
|
|
48
51
|
};
|
|
49
52
|
}
|
|
50
53
|
|
|
51
54
|
|
|
52
|
-
export {$d5336fe17ce95402$export$
|
|
55
|
+
export {$d5336fe17ce95402$export$38eaa17faae8f579 as useMenu};
|
|
53
56
|
//# sourceMappingURL=useMenu.module.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAkCM,SAAS,0CAAW,KAAyB,EAAE,KAAmB,EAAE,GAAkC;IAC3G,IAAI,mBACF,kBAAkB,iBAClB,SAAS,WACT,OAAO,EACP,GAAG,YACJ,GAAG;IAEJ,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB,EACnD,QAAQ,IAAI,CAAC;IAGf,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACrD,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,wBAAgB,EAAE;QAClC,GAAG,UAAU;aACb;QACA,kBAAkB,MAAM,gBAAgB;QACxC,YAAY,MAAM,UAAU;QAC5B,cAAc,MAAM,YAAY;yBAChC;QACA,cAAc;IAChB;IAEA,CAAA,GAAA,yCAAO,EAAE,GAAG,CAAC,OAAO;QAClB,SAAS,MAAM,OAAO;QACtB,UAAU,MAAM,QAAQ;QACxB,uBAAuB,MAAM,qBAAqB;IACpD;IAEA,OAAO;QACL,WAAW,CAAA,GAAA,iBAAS,EAAE,UAAU;uBAAC;qBAAW;QAAO,GAAG;YACpD,MAAM;YACN,GAAG,SAAS;YACZ,WAAW,CAAC;oBAGR;gBAFF,gGAAgG;gBAChG,IAAI,EAAE,GAAG,KAAK,YAAY,MAAM,qBAAqB,GACnD,uBAAA,UAAU,SAAS,cAAnB,2CAAA,0BAAA,WAAsB;YAE1B;QACF;IACF;AACF","sources":["packages/@react-aria/menu/src/useMenu.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaMenuProps} from '@react-types/menu';\nimport {DOMAttributes, KeyboardDelegate, KeyboardEvents, RefObject} from '@react-types/shared';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {menuData} from './utils';\nimport {TreeState} from '@react-stately/tree';\nimport {useSelectableList} from '@react-aria/selection';\n\nexport interface MenuAria {\n /** Props for the menu element. */\n menuProps: DOMAttributes\n}\n\nexport interface AriaMenuOptions<T> extends Omit<AriaMenuProps<T>, 'children'>, KeyboardEvents {\n /** Whether the menu uses virtual scrolling. */\n isVirtualized?: boolean,\n /**\n * An optional keyboard delegate implementation for type to select,\n * to override the default.\n */\n keyboardDelegate?: KeyboardDelegate,\n /**\n * Whether the menu items should use virtual focus instead of being focused directly.\n */\n shouldUseVirtualFocus?: boolean\n}\n\n/**\n * Provides the behavior and accessibility implementation for a menu component.\n * A menu displays a list of actions or options that a user can choose.\n * @param props - Props for the menu.\n * @param state - State for the menu, as returned by `useListState`.\n */\nexport function useMenu<T>(props: AriaMenuOptions<T>, state: TreeState<T>, ref: RefObject<HTMLElement | null>): MenuAria {\n let {\n shouldFocusWrap = true,\n onKeyDown,\n onKeyUp,\n ...otherProps\n } = props;\n\n if (!props['aria-label'] && !props['aria-labelledby']) {\n console.warn('An aria-label or aria-labelledby prop is required for accessibility.');\n }\n\n let domProps = filterDOMProps(props, {labelable: true});\n let {listProps} = useSelectableList({\n ...otherProps,\n ref,\n selectionManager: state.selectionManager,\n collection: state.collection,\n disabledKeys: state.disabledKeys,\n shouldFocusWrap,\n linkBehavior: 'override'\n });\n\n menuData.set(state, {\n onClose: props.onClose,\n onAction: props.onAction,\n shouldUseVirtualFocus: props.shouldUseVirtualFocus\n });\n\n return {\n menuProps: mergeProps(domProps, {onKeyDown, onKeyUp}, {\n role: 'menu',\n ...listProps,\n onKeyDown: (e) => {\n // don't clear the menu selected keys if the user is presses escape since escape closes the menu\n if (e.key !== 'Escape' || props.shouldUseVirtualFocus) {\n listProps.onKeyDown?.(e);\n }\n }\n })\n };\n}\n"],"names":[],"version":3,"file":"useMenu.module.js.map"}
|
package/dist/useMenuItem.main.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var $
|
|
1
|
+
var $815e346b11b84016$exports = require("./utils.main.js");
|
|
2
2
|
var $byVdR$reactariautils = require("@react-aria/utils");
|
|
3
3
|
var $byVdR$reactstatelycollections = require("@react-stately/collections");
|
|
4
4
|
var $byVdR$reactariainteractions = require("@react-aria/interactions");
|
|
@@ -26,13 +26,14 @@ $parcel$export(module.exports, "useMenuItem", () => $38191ed02615ec07$export$9d3
|
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
29
|
-
let { id: id, key: key, closeOnSelect: closeOnSelect, isVirtualized: isVirtualized, 'aria-haspopup': hasPopup, onPressStart: pressStartProp, onPressUp: pressUpProp, onPress:
|
|
29
|
+
let { id: id, key: key, closeOnSelect: closeOnSelect, isVirtualized: isVirtualized, 'aria-haspopup': hasPopup, onPressStart: pressStartProp, onPressUp: pressUpProp, onPress: pressProp, onPressChange: onPressChange, onPressEnd: onPressEnd, onHoverStart: hoverStartProp, onHoverChange: onHoverChange, onHoverEnd: onHoverEnd, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onFocus: onFocus, onFocusChange: onFocusChange, onBlur: onBlur, selectionManager: selectionManager = state.selectionManager } = props;
|
|
30
30
|
let isTrigger = !!hasPopup;
|
|
31
|
+
let isTriggerExpanded = isTrigger && props['aria-expanded'] === 'true';
|
|
31
32
|
var _props_isDisabled;
|
|
32
|
-
let isDisabled = (_props_isDisabled = props.isDisabled) !== null && _props_isDisabled !== void 0 ? _props_isDisabled :
|
|
33
|
+
let isDisabled = (_props_isDisabled = props.isDisabled) !== null && _props_isDisabled !== void 0 ? _props_isDisabled : selectionManager.isDisabled(key);
|
|
33
34
|
var _props_isSelected;
|
|
34
|
-
let isSelected = (_props_isSelected = props.isSelected) !== null && _props_isSelected !== void 0 ? _props_isSelected :
|
|
35
|
-
let data = (0, $
|
|
35
|
+
let isSelected = (_props_isSelected = props.isSelected) !== null && _props_isSelected !== void 0 ? _props_isSelected : selectionManager.isSelected(key);
|
|
36
|
+
let data = (0, $815e346b11b84016$exports.menuData).get(state);
|
|
36
37
|
let item = state.collection.getItem(key);
|
|
37
38
|
let onClose = props.onClose || data.onClose;
|
|
38
39
|
let router = (0, $byVdR$reactariautils.useRouter)();
|
|
@@ -46,12 +47,12 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
46
47
|
let onAction = data.onAction;
|
|
47
48
|
onAction(key);
|
|
48
49
|
}
|
|
49
|
-
if (e.target instanceof HTMLAnchorElement) router.open(e.target, e, item.props.href, item.props.routerOptions);
|
|
50
|
+
if (e.target instanceof HTMLAnchorElement && item) router.open(e.target, e, item.props.href, item.props.routerOptions);
|
|
50
51
|
};
|
|
51
52
|
let role = 'menuitem';
|
|
52
53
|
if (!isTrigger) {
|
|
53
|
-
if (
|
|
54
|
-
else if (
|
|
54
|
+
if (selectionManager.selectionMode === 'single') role = 'menuitemradio';
|
|
55
|
+
else if (selectionManager.selectionMode === 'multiple') role = 'menuitemcheckbox';
|
|
55
56
|
}
|
|
56
57
|
let labelId = (0, $byVdR$reactariautils.useSlotId)();
|
|
57
58
|
let descriptionId = (0, $byVdR$reactariautils.useSlotId)();
|
|
@@ -70,7 +71,7 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
70
71
|
'aria-haspopup': hasPopup,
|
|
71
72
|
'aria-expanded': props['aria-expanded']
|
|
72
73
|
};
|
|
73
|
-
if (
|
|
74
|
+
if (selectionManager.selectionMode !== 'none' && !isTrigger) ariaProps['aria-checked'] = isSelected;
|
|
74
75
|
if (isVirtualized) {
|
|
75
76
|
ariaProps['aria-posinset'] = item === null || item === void 0 ? void 0 : item.index;
|
|
76
77
|
ariaProps['aria-setsize'] = (0, $byVdR$reactstatelycollections.getItemCount)(state.collection);
|
|
@@ -79,17 +80,30 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
79
80
|
if (e.pointerType === 'keyboard') performAction(e);
|
|
80
81
|
pressStartProp === null || pressStartProp === void 0 ? void 0 : pressStartProp(e);
|
|
81
82
|
};
|
|
83
|
+
let maybeClose = ()=>{
|
|
84
|
+
// Pressing a menu item should close by default in single selection mode but not multiple
|
|
85
|
+
// selection mode, except if overridden by the closeOnSelect prop.
|
|
86
|
+
if (!isTrigger && onClose && (closeOnSelect !== null && closeOnSelect !== void 0 ? closeOnSelect : selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key))) onClose();
|
|
87
|
+
};
|
|
82
88
|
let onPressUp = (e)=>{
|
|
83
|
-
|
|
89
|
+
// If interacting with mouse, allow the user to mouse down on the trigger button,
|
|
90
|
+
// drag, and release over an item (matching native behavior).
|
|
91
|
+
if (e.pointerType === 'mouse') {
|
|
84
92
|
performAction(e);
|
|
85
|
-
|
|
86
|
-
// selection mode, except if overridden by the closeOnSelect prop.
|
|
87
|
-
if (!isTrigger && onClose && (closeOnSelect !== null && closeOnSelect !== void 0 ? closeOnSelect : state.selectionManager.selectionMode !== 'multiple' || state.selectionManager.isLink(key))) onClose();
|
|
93
|
+
maybeClose();
|
|
88
94
|
}
|
|
89
95
|
pressUpProp === null || pressUpProp === void 0 ? void 0 : pressUpProp(e);
|
|
90
96
|
};
|
|
97
|
+
let onPress = (e)=>{
|
|
98
|
+
if (e.pointerType !== 'keyboard' && e.pointerType !== 'mouse') {
|
|
99
|
+
performAction(e);
|
|
100
|
+
maybeClose();
|
|
101
|
+
}
|
|
102
|
+
pressProp === null || pressProp === void 0 ? void 0 : pressProp(e);
|
|
103
|
+
};
|
|
91
104
|
let { itemProps: itemProps, isFocused: isFocused } = (0, $byVdR$reactariaselection.useSelectableItem)({
|
|
92
|
-
|
|
105
|
+
id: id,
|
|
106
|
+
selectionManager: selectionManager,
|
|
93
107
|
key: key,
|
|
94
108
|
ref: ref,
|
|
95
109
|
shouldSelectOnPressUp: true,
|
|
@@ -98,7 +112,8 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
98
112
|
// because we handle it ourselves. The behavior of menus
|
|
99
113
|
// is slightly different from other collections because
|
|
100
114
|
// actions are performed on key down rather than key up.
|
|
101
|
-
linkBehavior: 'none'
|
|
115
|
+
linkBehavior: 'none',
|
|
116
|
+
shouldUseVirtualFocus: data.shouldUseVirtualFocus
|
|
102
117
|
});
|
|
103
118
|
let { pressProps: pressProps, isPressed: isPressed } = (0, $byVdR$reactariainteractions.usePress)({
|
|
104
119
|
onPressStart: onPressStart,
|
|
@@ -111,9 +126,10 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
111
126
|
let { hoverProps: hoverProps } = (0, $byVdR$reactariainteractions.useHover)({
|
|
112
127
|
isDisabled: isDisabled,
|
|
113
128
|
onHoverStart (e) {
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
129
|
+
// Hovering over an already expanded sub dialog trigger should keep focus in the dialog.
|
|
130
|
+
if (!(0, $byVdR$reactariainteractions.isFocusVisible)() && !(isTriggerExpanded && hasPopup === 'dialog')) {
|
|
131
|
+
selectionManager.setFocused(true);
|
|
132
|
+
selectionManager.setFocusedKey(key);
|
|
117
133
|
}
|
|
118
134
|
hoverStartProp === null || hoverStartProp === void 0 ? void 0 : hoverStartProp(e);
|
|
119
135
|
},
|
|
@@ -130,7 +146,7 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
130
146
|
}
|
|
131
147
|
switch(e.key){
|
|
132
148
|
case ' ':
|
|
133
|
-
if (!isDisabled &&
|
|
149
|
+
if (!isDisabled && selectionManager.selectionMode === 'none' && !isTrigger && closeOnSelect !== false && onClose) onClose();
|
|
134
150
|
break;
|
|
135
151
|
case 'Enter':
|
|
136
152
|
// The Enter key should always close on select, except if overridden.
|
|
@@ -149,9 +165,9 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
149
165
|
onFocus: onFocus,
|
|
150
166
|
onFocusChange: onFocusChange
|
|
151
167
|
});
|
|
152
|
-
let domProps = (0, $byVdR$reactariautils.filterDOMProps)(item.props);
|
|
168
|
+
let domProps = (0, $byVdR$reactariautils.filterDOMProps)(item === null || item === void 0 ? void 0 : item.props);
|
|
153
169
|
delete domProps.id;
|
|
154
|
-
let linkProps = (0, $byVdR$reactariautils.useLinkProps)(item.props);
|
|
170
|
+
let linkProps = (0, $byVdR$reactariautils.useLinkProps)(item === null || item === void 0 ? void 0 : item.props);
|
|
155
171
|
return {
|
|
156
172
|
menuItemProps: {
|
|
157
173
|
...ariaProps,
|
|
@@ -159,7 +175,8 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
159
175
|
onFocus: itemProps.onFocus,
|
|
160
176
|
'data-key': itemProps['data-key']
|
|
161
177
|
} : itemProps, pressProps, hoverProps, keyboardProps, focusProps),
|
|
162
|
-
|
|
178
|
+
// If a submenu is expanded, set the tabIndex to -1 so that shift tabbing goes out of the menu instead of the parent menu item.
|
|
179
|
+
tabIndex: itemProps.tabIndex != null && isTriggerExpanded ? -1 : itemProps.tabIndex
|
|
163
180
|
},
|
|
164
181
|
labelProps: {
|
|
165
182
|
id: labelId
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-aria/menu/src/useMenuItem.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMAttributes, DOMProps, FocusableElement, FocusEvents, HoverEvents, Key, KeyboardEvents, PressEvent, PressEvents, RefObject, RouterOptions} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useLinkProps, useRouter, useSlotId} from '@react-aria/utils';\nimport {getItemCount} from '@react-stately/collections';\nimport {isFocusVisible, useFocus, useHover, useKeyboard, usePress} from '@react-aria/interactions';\nimport {menuData} from './useMenu';\nimport {TreeState} from '@react-stately/tree';\nimport {useSelectableItem} from '@react-aria/selection';\n\nexport interface MenuItemAria {\n /** Props for the menu item element. */\n menuItemProps: DOMAttributes,\n\n /** Props for the main text element inside the menu item. */\n labelProps: DOMAttributes,\n\n /** Props for the description text element inside the menu item, if any. */\n descriptionProps: DOMAttributes,\n\n /** Props for the keyboard shortcut text element inside the item, if any. */\n keyboardShortcutProps: DOMAttributes,\n\n /** Whether the item is currently focused. */\n isFocused: boolean,\n /** Whether the item is currently selected. */\n isSelected: boolean,\n /** Whether the item is currently in a pressed state. */\n isPressed: boolean,\n /** Whether the item is disabled. */\n isDisabled: boolean\n}\n\nexport interface AriaMenuItemProps extends DOMProps, PressEvents, HoverEvents, KeyboardEvents, FocusEvents {\n /**\n * Whether the menu item is disabled.\n * @deprecated - pass disabledKeys to useTreeState instead.\n */\n isDisabled?: boolean,\n\n /**\n * Whether the menu item is selected.\n * @deprecated - pass selectedKeys to useTreeState instead.\n */\n isSelected?: boolean,\n\n /** A screen reader only label for the menu item. */\n 'aria-label'?: string,\n\n /** The unique key for the menu item. */\n key?: Key,\n\n /**\n * Handler that is called when the menu should close after selecting an item.\n * @deprecated - pass to the menu instead.\n */\n onClose?: () => void,\n\n /**\n * Whether the menu should close when the menu item is selected.\n * @default true\n */\n closeOnSelect?: boolean,\n\n /** Whether the menu item is contained in a virtual scrolling menu. */\n isVirtualized?: boolean,\n\n /**\n * Handler that is called when the user activates the item.\n * @deprecated - pass to the menu instead.\n */\n onAction?: (key: Key) => void,\n\n /** What kind of popup the item opens. */\n 'aria-haspopup'?: 'menu' | 'dialog',\n\n /** Indicates whether the menu item's popup element is expanded or collapsed. */\n 'aria-expanded'?: boolean | 'true' | 'false',\n\n /** Identifies the menu item's popup element whose contents or presence is controlled by the menu item. */\n 'aria-controls'?: string\n}\n\n/**\n * Provides the behavior and accessibility implementation for an item in a menu.\n * See `useMenu` for more details about menus.\n * @param props - Props for the item.\n * @param state - State for the menu, as returned by `useTreeState`.\n */\nexport function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, ref: RefObject<FocusableElement | null>): MenuItemAria {\n let {\n id,\n key,\n closeOnSelect,\n isVirtualized,\n 'aria-haspopup': hasPopup,\n onPressStart: pressStartProp,\n onPressUp: pressUpProp,\n onPress,\n onPressChange,\n onPressEnd,\n onHoverStart: hoverStartProp,\n onHoverChange,\n onHoverEnd,\n onKeyDown,\n onKeyUp,\n onFocus,\n onFocusChange,\n onBlur\n } = props;\n\n let isTrigger = !!hasPopup;\n let isDisabled = props.isDisabled ?? state.selectionManager.isDisabled(key);\n let isSelected = props.isSelected ?? state.selectionManager.isSelected(key);\n let data = menuData.get(state);\n let item = state.collection.getItem(key);\n let onClose = props.onClose || data.onClose;\n let router = useRouter();\n let performAction = (e: PressEvent) => {\n if (isTrigger) {\n return;\n }\n\n if (item?.props?.onAction) {\n item.props.onAction();\n } else if (props.onAction) {\n props.onAction(key);\n }\n\n if (data.onAction) {\n // Must reassign to variable otherwise `this` binding gets messed up. Something to do with WeakMap.\n let onAction = data.onAction;\n onAction(key);\n }\n\n if (e.target instanceof HTMLAnchorElement) {\n router.open(e.target, e, item.props.href, item.props.routerOptions as RouterOptions);\n }\n };\n\n let role = 'menuitem';\n if (!isTrigger) {\n if (state.selectionManager.selectionMode === 'single') {\n role = 'menuitemradio';\n } else if (state.selectionManager.selectionMode === 'multiple') {\n role = 'menuitemcheckbox';\n }\n }\n\n let labelId = useSlotId();\n let descriptionId = useSlotId();\n let keyboardId = useSlotId();\n\n let ariaProps = {\n id,\n 'aria-disabled': isDisabled || undefined,\n role,\n 'aria-label': props['aria-label'],\n 'aria-labelledby': labelId,\n 'aria-describedby': [descriptionId, keyboardId].filter(Boolean).join(' ') || undefined,\n 'aria-controls': props['aria-controls'],\n 'aria-haspopup': hasPopup,\n 'aria-expanded': props['aria-expanded']\n };\n\n if (state.selectionManager.selectionMode !== 'none' && !isTrigger) {\n ariaProps['aria-checked'] = isSelected;\n }\n\n if (isVirtualized) {\n ariaProps['aria-posinset'] = item?.index;\n ariaProps['aria-setsize'] = getItemCount(state.collection);\n }\n\n let onPressStart = (e: PressEvent) => {\n if (e.pointerType === 'keyboard') {\n performAction(e);\n }\n\n pressStartProp?.(e);\n };\n\n let onPressUp = (e: PressEvent) => {\n if (e.pointerType !== 'keyboard') {\n performAction(e);\n\n // Pressing a menu item should close by default in single selection mode but not multiple\n // selection mode, except if overridden by the closeOnSelect prop.\n if (!isTrigger && onClose && (closeOnSelect ?? (state.selectionManager.selectionMode !== 'multiple' || state.selectionManager.isLink(key)))) {\n onClose();\n }\n }\n\n pressUpProp?.(e);\n };\n\n let {itemProps, isFocused} = useSelectableItem({\n selectionManager: state.selectionManager,\n key,\n ref,\n shouldSelectOnPressUp: true,\n allowsDifferentPressOrigin: true,\n // Disable all handling of links in useSelectable item\n // because we handle it ourselves. The behavior of menus\n // is slightly different from other collections because\n // actions are performed on key down rather than key up.\n linkBehavior: 'none'\n });\n\n let {pressProps, isPressed} = usePress({\n onPressStart,\n onPress,\n onPressUp,\n onPressChange,\n onPressEnd,\n isDisabled\n });\n let {hoverProps} = useHover({\n isDisabled,\n onHoverStart(e) {\n if (!isFocusVisible()) {\n state.selectionManager.setFocused(true);\n state.selectionManager.setFocusedKey(key);\n }\n hoverStartProp?.(e);\n },\n onHoverChange,\n onHoverEnd\n });\n\n let {keyboardProps} = useKeyboard({\n onKeyDown: (e) => {\n // Ignore repeating events, which may have started on the menu trigger before moving\n // focus to the menu item. We want to wait for a second complete key press sequence.\n if (e.repeat) {\n e.continuePropagation();\n return;\n }\n\n switch (e.key) {\n case ' ':\n if (!isDisabled && state.selectionManager.selectionMode === 'none' && !isTrigger && closeOnSelect !== false && onClose) {\n onClose();\n }\n break;\n case 'Enter':\n // The Enter key should always close on select, except if overridden.\n if (!isDisabled && closeOnSelect !== false && !isTrigger && onClose) {\n onClose();\n }\n break;\n default:\n if (!isTrigger) {\n e.continuePropagation();\n }\n\n onKeyDown?.(e);\n break;\n }\n },\n onKeyUp\n });\n\n let {focusProps} = useFocus({onBlur, onFocus, onFocusChange});\n let domProps = filterDOMProps(item.props);\n delete domProps.id;\n let linkProps = useLinkProps(item.props);\n\n return {\n menuItemProps: {\n ...ariaProps,\n ...mergeProps(domProps, linkProps, isTrigger ? {onFocus: itemProps.onFocus, 'data-key': itemProps['data-key']} : itemProps, pressProps, hoverProps, keyboardProps, focusProps),\n tabIndex: itemProps.tabIndex != null ? -1 : undefined\n },\n labelProps: {\n id: labelId\n },\n descriptionProps: {\n id: descriptionId\n },\n keyboardShortcutProps: {\n id: keyboardId\n },\n isFocused,\n isSelected,\n isPressed,\n isDisabled\n };\n}\n"],"names":[],"version":3,"file":"useMenuItem.main.js.map"}
|
|
1
|
+
{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA6FM,SAAS,0CAAe,KAAwB,EAAE,KAAmB,EAAE,GAAuC;IACnH,IAAI,MACF,EAAE,OACF,GAAG,iBACH,aAAa,iBACb,aAAa,EACb,iBAAiB,QAAQ,EACzB,cAAc,cAAc,EAC5B,WAAW,WAAW,EACtB,SAAS,SAAS,iBAClB,aAAa,cACb,UAAU,EACV,cAAc,cAAc,iBAC5B,aAAa,cACb,UAAU,aACV,SAAS,WACT,OAAO,WACP,OAAO,iBACP,aAAa,UACb,MAAM,oBACN,mBAAmB,MAAM,gBAAgB,EAC1C,GAAG;IAEJ,IAAI,YAAY,CAAC,CAAC;IAClB,IAAI,oBAAoB,aAAa,KAAK,CAAC,gBAAgB,KAAK;QAC/C;IAAjB,IAAI,aAAa,CAAA,oBAAA,MAAM,UAAU,cAAhB,+BAAA,oBAAoB,iBAAiB,UAAU,CAAC;QAChD;IAAjB,IAAI,aAAa,CAAA,oBAAA,MAAM,UAAU,cAAhB,+BAAA,oBAAoB,iBAAiB,UAAU,CAAC;IACjE,IAAI,OAAO,CAAA,GAAA,kCAAO,EAAE,GAAG,CAAC;IACxB,IAAI,OAAO,MAAM,UAAU,CAAC,OAAO,CAAC;IACpC,IAAI,UAAU,MAAM,OAAO,IAAI,KAAK,OAAO;IAC3C,IAAI,SAAS,CAAA,GAAA,+BAAQ;IACrB,IAAI,gBAAgB,CAAC;YAKf;QAJJ,IAAI,WACF;QAGF,IAAI,iBAAA,4BAAA,cAAA,KAAM,KAAK,cAAX,kCAAA,YAAa,QAAQ,EACvB,KAAK,KAAK,CAAC,QAAQ;aACd,IAAI,MAAM,QAAQ,EACvB,MAAM,QAAQ,CAAC;QAGjB,IAAI,KAAK,QAAQ,EAAE;YACjB,mGAAmG;YACnG,IAAI,WAAW,KAAK,QAAQ;YAC5B,SAAS;QACX;QAEA,IAAI,EAAE,MAAM,YAAY,qBAAqB,MAC3C,OAAO,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,KAAK,KAAK,CAAC,IAAI,EAAE,KAAK,KAAK,CAAC,aAAa;IAEtE;IAEA,IAAI,OAAO;IACX,IAAI,CAAC,WAAW;QACd,IAAI,iBAAiB,aAAa,KAAK,UACrC,OAAO;aACF,IAAI,iBAAiB,aAAa,KAAK,YAC5C,OAAO;IAEX;IAEA,IAAI,UAAU,CAAA,GAAA,+BAAQ;IACtB,IAAI,gBAAgB,CAAA,GAAA,+BAAQ;IAC5B,IAAI,aAAa,CAAA,GAAA,+BAAQ;IAEzB,IAAI,YAAY;YACd;QACA,iBAAiB,cAAc;cAC/B;QACA,cAAc,KAAK,CAAC,aAAa;QACjC,mBAAmB;QACnB,oBAAoB;YAAC;YAAe;SAAW,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC,QAAQ;QAC7E,iBAAiB,KAAK,CAAC,gBAAgB;QACvC,iBAAiB;QACjB,iBAAiB,KAAK,CAAC,gBAAgB;IACzC;IAEA,IAAI,iBAAiB,aAAa,KAAK,UAAU,CAAC,WAChD,SAAS,CAAC,eAAe,GAAG;IAG9B,IAAI,eAAe;QACjB,SAAS,CAAC,gBAAgB,GAAG,iBAAA,2BAAA,KAAM,KAAK;QACxC,SAAS,CAAC,eAAe,GAAG,CAAA,GAAA,2CAAW,EAAE,MAAM,UAAU;IAC3D;IAEA,IAAI,eAAe,CAAC;QAClB,IAAI,EAAE,WAAW,KAAK,YACpB,cAAc;QAGhB,2BAAA,qCAAA,eAAiB;IACnB;IAEA,IAAI,aAAa;QACf,yFAAyF;QACzF,kEAAkE;QAClE,IAAI,CAAC,aAAa,WAAY,CAAA,0BAAA,2BAAA,gBAAkB,iBAAiB,aAAa,KAAK,cAAc,iBAAiB,MAAM,CAAC,IAAI,GAC3H;IAEJ;IAEA,IAAI,YAAY,CAAC;QACf,iFAAiF;QACjF,6DAA6D;QAC7D,IAAI,EAAE,WAAW,KAAK,SAAS;YAC7B,cAAc;YACd;QACF;QAEA,wBAAA,kCAAA,YAAc;IAChB;IAEA,IAAI,UAAU,CAAC;QACb,IAAI,EAAE,WAAW,KAAK,cAAc,EAAE,WAAW,KAAK,SAAS;YAC7D,cAAc;YACd;QACF;QAEA,sBAAA,gCAAA,UAAY;IACd;IAEA,IAAI,aAAC,SAAS,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,2CAAgB,EAAE;YAC7C;QACA,kBAAkB;aAClB;aACA;QACA,uBAAuB;QACvB,4BAA4B;QAC5B,sDAAsD;QACtD,wDAAwD;QACxD,uDAAuD;QACvD,wDAAwD;QACxD,cAAc;QACd,uBAAuB,KAAK,qBAAqB;IACnD;IAEA,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;sBACrC;iBACA;mBACA;uBACA;oBACA;oBACA;IACF;IACA,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;oBAC1B;QACA,cAAa,CAAC;YACZ,wFAAwF;YACxF,IAAI,CAAC,CAAA,GAAA,2CAAa,OAAO,CAAE,CAAA,qBAAqB,aAAa,QAAO,GAAI;gBACtE,iBAAiB,UAAU,CAAC;gBAC5B,iBAAiB,aAAa,CAAC;YACjC;YACA,2BAAA,qCAAA,eAAiB;QACnB;uBACA;oBACA;IACF;IAEA,IAAI,iBAAC,aAAa,EAAC,GAAG,CAAA,GAAA,wCAAU,EAAE;QAChC,WAAW,CAAC;YACV,oFAAoF;YACpF,oFAAoF;YACpF,IAAI,EAAE,MAAM,EAAE;gBACZ,EAAE,mBAAmB;gBACrB;YACF;YAEA,OAAQ,EAAE,GAAG;gBACX,KAAK;oBACH,IAAI,CAAC,cAAc,iBAAiB,aAAa,KAAK,UAAU,CAAC,aAAa,kBAAkB,SAAS,SACvG;oBAEF;gBACF,KAAK;oBACH,qEAAqE;oBACrE,IAAI,CAAC,cAAc,kBAAkB,SAAS,CAAC,aAAa,SAC1D;oBAEF;gBACF;oBACE,IAAI,CAAC,WACH,EAAE,mBAAmB;oBAGvB,sBAAA,gCAAA,UAAY;oBACZ;YACJ;QACF;iBACA;IACF;IAEA,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;gBAAC;iBAAQ;uBAAS;IAAa;IAC3D,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE,iBAAA,2BAAA,KAAM,KAAK;IACzC,OAAO,SAAS,EAAE;IAClB,IAAI,YAAY,CAAA,GAAA,kCAAW,EAAE,iBAAA,2BAAA,KAAM,KAAK;IAExC,OAAO;QACL,eAAe;YACb,GAAG,SAAS;YACZ,GAAG,CAAA,GAAA,gCAAS,EAAE,UAAU,WAAW,YAAY;gBAAC,SAAS,UAAU,OAAO;gBAAE,YAAY,SAAS,CAAC,WAAW;YAAA,IAAI,WAAW,YAAY,YAAY,eAAe,WAAW;YAC9K,+HAA+H;YAC/H,UAAU,UAAU,QAAQ,IAAI,QAAQ,oBAAoB,KAAK,UAAU,QAAQ;QACrF;QACA,YAAY;YACV,IAAI;QACN;QACA,kBAAkB;YAChB,IAAI;QACN;QACA,uBAAuB;YACrB,IAAI;QACN;mBACA;oBACA;mBACA;oBACA;IACF;AACF","sources":["packages/@react-aria/menu/src/useMenuItem.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMAttributes, DOMProps, FocusableElement, FocusEvents, HoverEvents, Key, KeyboardEvents, PressEvent, PressEvents, RefObject, RouterOptions} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useLinkProps, useRouter, useSlotId} from '@react-aria/utils';\nimport {getItemCount} from '@react-stately/collections';\nimport {isFocusVisible, useFocus, useHover, useKeyboard, usePress} from '@react-aria/interactions';\nimport {menuData} from './utils';\nimport {SelectionManager} from '@react-stately/selection';\nimport {TreeState} from '@react-stately/tree';\nimport {useSelectableItem} from '@react-aria/selection';\n\nexport interface MenuItemAria {\n /** Props for the menu item element. */\n menuItemProps: DOMAttributes,\n\n /** Props for the main text element inside the menu item. */\n labelProps: DOMAttributes,\n\n /** Props for the description text element inside the menu item, if any. */\n descriptionProps: DOMAttributes,\n\n /** Props for the keyboard shortcut text element inside the item, if any. */\n keyboardShortcutProps: DOMAttributes,\n\n /** Whether the item is currently focused. */\n isFocused: boolean,\n /** Whether the item is currently selected. */\n isSelected: boolean,\n /** Whether the item is currently in a pressed state. */\n isPressed: boolean,\n /** Whether the item is disabled. */\n isDisabled: boolean\n}\n\nexport interface AriaMenuItemProps extends DOMProps, PressEvents, HoverEvents, KeyboardEvents, FocusEvents {\n /**\n * Whether the menu item is disabled.\n * @deprecated - pass disabledKeys to useTreeState instead.\n */\n isDisabled?: boolean,\n\n /**\n * Whether the menu item is selected.\n * @deprecated - pass selectedKeys to useTreeState instead.\n */\n isSelected?: boolean,\n\n /** A screen reader only label for the menu item. */\n 'aria-label'?: string,\n\n /** The unique key for the menu item. */\n key: Key,\n\n /**\n * Handler that is called when the menu should close after selecting an item.\n * @deprecated - pass to the menu instead.\n */\n onClose?: () => void,\n\n /**\n * Whether the menu should close when the menu item is selected.\n * @default true\n */\n closeOnSelect?: boolean,\n\n /** Whether the menu item is contained in a virtual scrolling menu. */\n isVirtualized?: boolean,\n\n /**\n * Handler that is called when the user activates the item.\n * @deprecated - pass to the menu instead.\n */\n onAction?: (key: Key) => void,\n\n /** What kind of popup the item opens. */\n 'aria-haspopup'?: 'menu' | 'dialog',\n\n /** Indicates whether the menu item's popup element is expanded or collapsed. */\n 'aria-expanded'?: boolean | 'true' | 'false',\n\n /** Identifies the menu item's popup element whose contents or presence is controlled by the menu item. */\n 'aria-controls'?: string,\n\n /** Override of the selection manager. By default, `state.selectionManager` is used. */\n selectionManager?: SelectionManager\n}\n\n/**\n * Provides the behavior and accessibility implementation for an item in a menu.\n * See `useMenu` for more details about menus.\n * @param props - Props for the item.\n * @param state - State for the menu, as returned by `useTreeState`.\n */\nexport function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, ref: RefObject<FocusableElement | null>): MenuItemAria {\n let {\n id,\n key,\n closeOnSelect,\n isVirtualized,\n 'aria-haspopup': hasPopup,\n onPressStart: pressStartProp,\n onPressUp: pressUpProp,\n onPress: pressProp,\n onPressChange,\n onPressEnd,\n onHoverStart: hoverStartProp,\n onHoverChange,\n onHoverEnd,\n onKeyDown,\n onKeyUp,\n onFocus,\n onFocusChange,\n onBlur,\n selectionManager = state.selectionManager\n } = props;\n\n let isTrigger = !!hasPopup;\n let isTriggerExpanded = isTrigger && props['aria-expanded'] === 'true';\n let isDisabled = props.isDisabled ?? selectionManager.isDisabled(key);\n let isSelected = props.isSelected ?? selectionManager.isSelected(key);\n let data = menuData.get(state)!;\n let item = state.collection.getItem(key);\n let onClose = props.onClose || data.onClose;\n let router = useRouter();\n let performAction = (e: PressEvent) => {\n if (isTrigger) {\n return;\n }\n\n if (item?.props?.onAction) {\n item.props.onAction();\n } else if (props.onAction) {\n props.onAction(key);\n }\n\n if (data.onAction) {\n // Must reassign to variable otherwise `this` binding gets messed up. Something to do with WeakMap.\n let onAction = data.onAction;\n onAction(key);\n }\n\n if (e.target instanceof HTMLAnchorElement && item) {\n router.open(e.target, e, item.props.href, item.props.routerOptions as RouterOptions);\n }\n };\n\n let role = 'menuitem';\n if (!isTrigger) {\n if (selectionManager.selectionMode === 'single') {\n role = 'menuitemradio';\n } else if (selectionManager.selectionMode === 'multiple') {\n role = 'menuitemcheckbox';\n }\n }\n\n let labelId = useSlotId();\n let descriptionId = useSlotId();\n let keyboardId = useSlotId();\n\n let ariaProps = {\n id,\n 'aria-disabled': isDisabled || undefined,\n role,\n 'aria-label': props['aria-label'],\n 'aria-labelledby': labelId,\n 'aria-describedby': [descriptionId, keyboardId].filter(Boolean).join(' ') || undefined,\n 'aria-controls': props['aria-controls'],\n 'aria-haspopup': hasPopup,\n 'aria-expanded': props['aria-expanded']\n };\n\n if (selectionManager.selectionMode !== 'none' && !isTrigger) {\n ariaProps['aria-checked'] = isSelected;\n }\n\n if (isVirtualized) {\n ariaProps['aria-posinset'] = item?.index;\n ariaProps['aria-setsize'] = getItemCount(state.collection);\n }\n\n let onPressStart = (e: PressEvent) => {\n if (e.pointerType === 'keyboard') {\n performAction(e);\n }\n\n pressStartProp?.(e);\n };\n\n let maybeClose = () => {\n // Pressing a menu item should close by default in single selection mode but not multiple\n // selection mode, except if overridden by the closeOnSelect prop.\n if (!isTrigger && onClose && (closeOnSelect ?? (selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key)))) {\n onClose();\n }\n };\n\n let onPressUp = (e: PressEvent) => {\n // If interacting with mouse, allow the user to mouse down on the trigger button,\n // drag, and release over an item (matching native behavior).\n if (e.pointerType === 'mouse') {\n performAction(e);\n maybeClose();\n }\n\n pressUpProp?.(e);\n };\n\n let onPress = (e: PressEvent) => {\n if (e.pointerType !== 'keyboard' && e.pointerType !== 'mouse') {\n performAction(e);\n maybeClose();\n }\n\n pressProp?.(e);\n };\n\n let {itemProps, isFocused} = useSelectableItem({\n id,\n selectionManager: selectionManager,\n key,\n ref,\n shouldSelectOnPressUp: true,\n allowsDifferentPressOrigin: true,\n // Disable all handling of links in useSelectable item\n // because we handle it ourselves. The behavior of menus\n // is slightly different from other collections because\n // actions are performed on key down rather than key up.\n linkBehavior: 'none',\n shouldUseVirtualFocus: data.shouldUseVirtualFocus\n });\n\n let {pressProps, isPressed} = usePress({\n onPressStart,\n onPress,\n onPressUp,\n onPressChange,\n onPressEnd,\n isDisabled\n });\n let {hoverProps} = useHover({\n isDisabled,\n onHoverStart(e) {\n // Hovering over an already expanded sub dialog trigger should keep focus in the dialog.\n if (!isFocusVisible() && !(isTriggerExpanded && hasPopup === 'dialog')) {\n selectionManager.setFocused(true);\n selectionManager.setFocusedKey(key);\n }\n hoverStartProp?.(e);\n },\n onHoverChange,\n onHoverEnd\n });\n\n let {keyboardProps} = useKeyboard({\n onKeyDown: (e) => {\n // Ignore repeating events, which may have started on the menu trigger before moving\n // focus to the menu item. We want to wait for a second complete key press sequence.\n if (e.repeat) {\n e.continuePropagation();\n return;\n }\n\n switch (e.key) {\n case ' ':\n if (!isDisabled && selectionManager.selectionMode === 'none' && !isTrigger && closeOnSelect !== false && onClose) {\n onClose();\n }\n break;\n case 'Enter':\n // The Enter key should always close on select, except if overridden.\n if (!isDisabled && closeOnSelect !== false && !isTrigger && onClose) {\n onClose();\n }\n break;\n default:\n if (!isTrigger) {\n e.continuePropagation();\n }\n\n onKeyDown?.(e);\n break;\n }\n },\n onKeyUp\n });\n\n let {focusProps} = useFocus({onBlur, onFocus, onFocusChange});\n let domProps = filterDOMProps(item?.props);\n delete domProps.id;\n let linkProps = useLinkProps(item?.props);\n\n return {\n menuItemProps: {\n ...ariaProps,\n ...mergeProps(domProps, linkProps, isTrigger ? {onFocus: itemProps.onFocus, 'data-key': itemProps['data-key']} : itemProps, pressProps, hoverProps, keyboardProps, focusProps),\n // If a submenu is expanded, set the tabIndex to -1 so that shift tabbing goes out of the menu instead of the parent menu item.\n tabIndex: itemProps.tabIndex != null && isTriggerExpanded ? -1 : itemProps.tabIndex\n },\n labelProps: {\n id: labelId\n },\n descriptionProps: {\n id: descriptionId\n },\n keyboardShortcutProps: {\n id: keyboardId\n },\n isFocused,\n isSelected,\n isPressed,\n isDisabled\n };\n}\n"],"names":[],"version":3,"file":"useMenuItem.main.js.map"}
|
package/dist/useMenuItem.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {menuData as $
|
|
1
|
+
import {menuData as $fc79756100351201$export$6f49b4016bfc8d56} from "./utils.mjs";
|
|
2
2
|
import {useRouter as $7Kjv5$useRouter, useSlotId as $7Kjv5$useSlotId, filterDOMProps as $7Kjv5$filterDOMProps, useLinkProps as $7Kjv5$useLinkProps, mergeProps as $7Kjv5$mergeProps} from "@react-aria/utils";
|
|
3
3
|
import {getItemCount as $7Kjv5$getItemCount} from "@react-stately/collections";
|
|
4
4
|
import {usePress as $7Kjv5$usePress, useHover as $7Kjv5$useHover, isFocusVisible as $7Kjv5$isFocusVisible, useKeyboard as $7Kjv5$useKeyboard, useFocus as $7Kjv5$useFocus} from "@react-aria/interactions";
|
|
@@ -20,13 +20,14 @@ import {useSelectableItem as $7Kjv5$useSelectableItem} from "@react-aria/selecti
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
23
|
-
let { id: id, key: key, closeOnSelect: closeOnSelect, isVirtualized: isVirtualized, 'aria-haspopup': hasPopup, onPressStart: pressStartProp, onPressUp: pressUpProp, onPress:
|
|
23
|
+
let { id: id, key: key, closeOnSelect: closeOnSelect, isVirtualized: isVirtualized, 'aria-haspopup': hasPopup, onPressStart: pressStartProp, onPressUp: pressUpProp, onPress: pressProp, onPressChange: onPressChange, onPressEnd: onPressEnd, onHoverStart: hoverStartProp, onHoverChange: onHoverChange, onHoverEnd: onHoverEnd, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onFocus: onFocus, onFocusChange: onFocusChange, onBlur: onBlur, selectionManager: selectionManager = state.selectionManager } = props;
|
|
24
24
|
let isTrigger = !!hasPopup;
|
|
25
|
+
let isTriggerExpanded = isTrigger && props['aria-expanded'] === 'true';
|
|
25
26
|
var _props_isDisabled;
|
|
26
|
-
let isDisabled = (_props_isDisabled = props.isDisabled) !== null && _props_isDisabled !== void 0 ? _props_isDisabled :
|
|
27
|
+
let isDisabled = (_props_isDisabled = props.isDisabled) !== null && _props_isDisabled !== void 0 ? _props_isDisabled : selectionManager.isDisabled(key);
|
|
27
28
|
var _props_isSelected;
|
|
28
|
-
let isSelected = (_props_isSelected = props.isSelected) !== null && _props_isSelected !== void 0 ? _props_isSelected :
|
|
29
|
-
let data = (0, $
|
|
29
|
+
let isSelected = (_props_isSelected = props.isSelected) !== null && _props_isSelected !== void 0 ? _props_isSelected : selectionManager.isSelected(key);
|
|
30
|
+
let data = (0, $fc79756100351201$export$6f49b4016bfc8d56).get(state);
|
|
30
31
|
let item = state.collection.getItem(key);
|
|
31
32
|
let onClose = props.onClose || data.onClose;
|
|
32
33
|
let router = (0, $7Kjv5$useRouter)();
|
|
@@ -40,12 +41,12 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
40
41
|
let onAction = data.onAction;
|
|
41
42
|
onAction(key);
|
|
42
43
|
}
|
|
43
|
-
if (e.target instanceof HTMLAnchorElement) router.open(e.target, e, item.props.href, item.props.routerOptions);
|
|
44
|
+
if (e.target instanceof HTMLAnchorElement && item) router.open(e.target, e, item.props.href, item.props.routerOptions);
|
|
44
45
|
};
|
|
45
46
|
let role = 'menuitem';
|
|
46
47
|
if (!isTrigger) {
|
|
47
|
-
if (
|
|
48
|
-
else if (
|
|
48
|
+
if (selectionManager.selectionMode === 'single') role = 'menuitemradio';
|
|
49
|
+
else if (selectionManager.selectionMode === 'multiple') role = 'menuitemcheckbox';
|
|
49
50
|
}
|
|
50
51
|
let labelId = (0, $7Kjv5$useSlotId)();
|
|
51
52
|
let descriptionId = (0, $7Kjv5$useSlotId)();
|
|
@@ -64,7 +65,7 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
64
65
|
'aria-haspopup': hasPopup,
|
|
65
66
|
'aria-expanded': props['aria-expanded']
|
|
66
67
|
};
|
|
67
|
-
if (
|
|
68
|
+
if (selectionManager.selectionMode !== 'none' && !isTrigger) ariaProps['aria-checked'] = isSelected;
|
|
68
69
|
if (isVirtualized) {
|
|
69
70
|
ariaProps['aria-posinset'] = item === null || item === void 0 ? void 0 : item.index;
|
|
70
71
|
ariaProps['aria-setsize'] = (0, $7Kjv5$getItemCount)(state.collection);
|
|
@@ -73,17 +74,30 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
73
74
|
if (e.pointerType === 'keyboard') performAction(e);
|
|
74
75
|
pressStartProp === null || pressStartProp === void 0 ? void 0 : pressStartProp(e);
|
|
75
76
|
};
|
|
77
|
+
let maybeClose = ()=>{
|
|
78
|
+
// Pressing a menu item should close by default in single selection mode but not multiple
|
|
79
|
+
// selection mode, except if overridden by the closeOnSelect prop.
|
|
80
|
+
if (!isTrigger && onClose && (closeOnSelect !== null && closeOnSelect !== void 0 ? closeOnSelect : selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key))) onClose();
|
|
81
|
+
};
|
|
76
82
|
let onPressUp = (e)=>{
|
|
77
|
-
|
|
83
|
+
// If interacting with mouse, allow the user to mouse down on the trigger button,
|
|
84
|
+
// drag, and release over an item (matching native behavior).
|
|
85
|
+
if (e.pointerType === 'mouse') {
|
|
78
86
|
performAction(e);
|
|
79
|
-
|
|
80
|
-
// selection mode, except if overridden by the closeOnSelect prop.
|
|
81
|
-
if (!isTrigger && onClose && (closeOnSelect !== null && closeOnSelect !== void 0 ? closeOnSelect : state.selectionManager.selectionMode !== 'multiple' || state.selectionManager.isLink(key))) onClose();
|
|
87
|
+
maybeClose();
|
|
82
88
|
}
|
|
83
89
|
pressUpProp === null || pressUpProp === void 0 ? void 0 : pressUpProp(e);
|
|
84
90
|
};
|
|
91
|
+
let onPress = (e)=>{
|
|
92
|
+
if (e.pointerType !== 'keyboard' && e.pointerType !== 'mouse') {
|
|
93
|
+
performAction(e);
|
|
94
|
+
maybeClose();
|
|
95
|
+
}
|
|
96
|
+
pressProp === null || pressProp === void 0 ? void 0 : pressProp(e);
|
|
97
|
+
};
|
|
85
98
|
let { itemProps: itemProps, isFocused: isFocused } = (0, $7Kjv5$useSelectableItem)({
|
|
86
|
-
|
|
99
|
+
id: id,
|
|
100
|
+
selectionManager: selectionManager,
|
|
87
101
|
key: key,
|
|
88
102
|
ref: ref,
|
|
89
103
|
shouldSelectOnPressUp: true,
|
|
@@ -92,7 +106,8 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
92
106
|
// because we handle it ourselves. The behavior of menus
|
|
93
107
|
// is slightly different from other collections because
|
|
94
108
|
// actions are performed on key down rather than key up.
|
|
95
|
-
linkBehavior: 'none'
|
|
109
|
+
linkBehavior: 'none',
|
|
110
|
+
shouldUseVirtualFocus: data.shouldUseVirtualFocus
|
|
96
111
|
});
|
|
97
112
|
let { pressProps: pressProps, isPressed: isPressed } = (0, $7Kjv5$usePress)({
|
|
98
113
|
onPressStart: onPressStart,
|
|
@@ -105,9 +120,10 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
105
120
|
let { hoverProps: hoverProps } = (0, $7Kjv5$useHover)({
|
|
106
121
|
isDisabled: isDisabled,
|
|
107
122
|
onHoverStart (e) {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
123
|
+
// Hovering over an already expanded sub dialog trigger should keep focus in the dialog.
|
|
124
|
+
if (!(0, $7Kjv5$isFocusVisible)() && !(isTriggerExpanded && hasPopup === 'dialog')) {
|
|
125
|
+
selectionManager.setFocused(true);
|
|
126
|
+
selectionManager.setFocusedKey(key);
|
|
111
127
|
}
|
|
112
128
|
hoverStartProp === null || hoverStartProp === void 0 ? void 0 : hoverStartProp(e);
|
|
113
129
|
},
|
|
@@ -124,7 +140,7 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
124
140
|
}
|
|
125
141
|
switch(e.key){
|
|
126
142
|
case ' ':
|
|
127
|
-
if (!isDisabled &&
|
|
143
|
+
if (!isDisabled && selectionManager.selectionMode === 'none' && !isTrigger && closeOnSelect !== false && onClose) onClose();
|
|
128
144
|
break;
|
|
129
145
|
case 'Enter':
|
|
130
146
|
// The Enter key should always close on select, except if overridden.
|
|
@@ -143,9 +159,9 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
143
159
|
onFocus: onFocus,
|
|
144
160
|
onFocusChange: onFocusChange
|
|
145
161
|
});
|
|
146
|
-
let domProps = (0, $7Kjv5$filterDOMProps)(item.props);
|
|
162
|
+
let domProps = (0, $7Kjv5$filterDOMProps)(item === null || item === void 0 ? void 0 : item.props);
|
|
147
163
|
delete domProps.id;
|
|
148
|
-
let linkProps = (0, $7Kjv5$useLinkProps)(item.props);
|
|
164
|
+
let linkProps = (0, $7Kjv5$useLinkProps)(item === null || item === void 0 ? void 0 : item.props);
|
|
149
165
|
return {
|
|
150
166
|
menuItemProps: {
|
|
151
167
|
...ariaProps,
|
|
@@ -153,7 +169,8 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
153
169
|
onFocus: itemProps.onFocus,
|
|
154
170
|
'data-key': itemProps['data-key']
|
|
155
171
|
} : itemProps, pressProps, hoverProps, keyboardProps, focusProps),
|
|
156
|
-
|
|
172
|
+
// If a submenu is expanded, set the tabIndex to -1 so that shift tabbing goes out of the menu instead of the parent menu item.
|
|
173
|
+
tabIndex: itemProps.tabIndex != null && isTriggerExpanded ? -1 : itemProps.tabIndex
|
|
157
174
|
},
|
|
158
175
|
labelProps: {
|
|
159
176
|
id: labelId
|