@react-aria/menu 3.18.5 → 3.19.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.map +1 -1
- package/dist/useMenuItem.main.js +21 -17
- package/dist/useMenuItem.main.js.map +1 -1
- package/dist/useMenuItem.mjs +22 -18
- package/dist/useMenuItem.module.js +22 -18
- package/dist/useMenuItem.module.js.map +1 -1
- package/dist/useMenuTrigger.main.js +5 -1
- package/dist/useMenuTrigger.main.js.map +1 -1
- package/dist/useMenuTrigger.mjs +5 -1
- package/dist/useMenuTrigger.module.js +5 -1
- package/dist/useMenuTrigger.module.js.map +1 -1
- package/dist/utils.main.js.map +1 -1
- package/dist/utils.module.js.map +1 -1
- package/package.json +15 -15
- package/src/useMenuItem.ts +29 -28
- package/src/useMenuTrigger.ts +5 -1
- package/src/utils.ts +1 -1
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;ACmBA;IACE,kCAAkC;IAClC,SAAS,EAAE,aAAa,CAAA;CACzB;AAED,iCAAiC,CAAC,CAAE,SAAQ,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,UAAU,CAAC,EAAE,cAAc;IAC5F,+CAA+C;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAED;;;;;GAKG;AACH,wBAAwB,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,WAAW,GAAG,IAAI,CAAC,GAAG,QAAQ,CAyCvH;AC7DD;IACE,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B;AAED,iCAAiC,CAAC;IAChC,0CAA0C;IAC1C,gBAAgB,EAAE,eAAe,CAAC;IAElC,0BAA0B;IAC1B,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAA;CAC9B;AAED;;;;;GAKG;AACH,+BAA+B,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,UAAU,OAAO,GAAG,IAAI,CAAC,GAAG,gBAAgB,CAAC,CAAC,
|
|
1
|
+
{"mappings":";;;;;;;;ACmBA;IACE,kCAAkC;IAClC,SAAS,EAAE,aAAa,CAAA;CACzB;AAED,iCAAiC,CAAC,CAAE,SAAQ,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,UAAU,CAAC,EAAE,cAAc;IAC5F,+CAA+C;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAED;;;;;GAKG;AACH,wBAAwB,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,WAAW,GAAG,IAAI,CAAC,GAAG,QAAQ,CAyCvH;AC7DD;IACE,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B;AAED,iCAAiC,CAAC;IAChC,0CAA0C;IAC1C,gBAAgB,EAAE,eAAe,CAAC;IAElC,0BAA0B;IAC1B,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAA;CAC9B;AAED;;;;;GAKG;AACH,+BAA+B,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,UAAU,OAAO,GAAG,IAAI,CAAC,GAAG,gBAAgB,CAAC,CAAC,CA4G1I;ACrID;IACE,uCAAuC;IACvC,aAAa,EAAE,aAAa,CAAC;IAE7B,4DAA4D;IAC5D,UAAU,EAAE,aAAa,CAAC;IAE1B,2EAA2E;IAC3E,gBAAgB,EAAE,aAAa,CAAC;IAEhC,4EAA4E;IAC5E,qBAAqB,EAAE,aAAa,CAAC;IAErC,6CAA6C;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,cAAc,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,UAAU,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,SAAS,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,UAAU,EAAE,OAAO,CAAA;CACpB;AAED,kCAAmC,SAAQ,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW;IACxG;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,wCAAwC;IACxC,GAAG,EAAE,GAAG,CAAC;IAET;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,sEAAsE;IACtE,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAE9B,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAEpC,gFAAgF;IAChF,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAE7C,0GAA0G;IAC1G,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,uFAAuF;IACvF,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC;AAED;;;;;GAKG;AACH,4BAA4B,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,GAAG,YAAY,CAwOnI;AClUD;IACE,mCAAmC;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oFAAoF;IACpF,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED;IACE,uCAAuC;IACvC,SAAS,EAAE,aAAa,CAAC;IAEzB,6CAA6C;IAC7C,YAAY,EAAE,aAAa,CAAC;IAE5B,mCAAmC;IACnC,UAAU,EAAE,aAAa,CAAA;CAC1B;AAED;;;;GAIG;AACH,+BAA+B,KAAK,EAAE,oBAAoB,GAAG,eAAe,CAqB3E;AEtCD;IACE;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,OAAO,CAAC,CAAC;IACrB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,yDAAyD;IACzD,aAAa,EAAE,UAAU,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7C,wDAAwD;IACxD,UAAU,EAAE,UAAU,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAED,6BAA8B,SAAQ,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC;IAClE,2DAA2D;IAC3D,MAAM,EAAE,OAAO,CAAA;CAChB;AAED,uBAAuB,CAAC,CAAE,SAAQ,gBAAgB,CAAC,CAAC;IAClD,gCAAgC;IAChC,YAAY,EAAE,MAAM,CAAA;CACrB;AAED,oCAAoC,CAAC;IACnC,+CAA+C;IAC/C,mBAAmB,EAAE,mBAAmB,CAAC;IACzC,yEAAyE;IACzE,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;IAC9B,iDAAiD;IACjD,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,8BAA8B,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,wBAAwB,CAAC,CAAA;CACnI;AAED;;;;;GAKG;AACH,kCAAkC,CAAC,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,GAAG,mBAAmB,CAAC,CAAC,CA8L/J;AClPD,YAAY,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC","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/useMenuItem.main.js
CHANGED
|
@@ -2,6 +2,7 @@ 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");
|
|
5
|
+
var $byVdR$react = require("react");
|
|
5
6
|
var $byVdR$reactariaselection = require("@react-aria/selection");
|
|
6
7
|
|
|
7
8
|
|
|
@@ -25,8 +26,9 @@ $parcel$export(module.exports, "useMenuItem", () => $38191ed02615ec07$export$9d3
|
|
|
25
26
|
|
|
26
27
|
|
|
27
28
|
|
|
29
|
+
|
|
28
30
|
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:
|
|
31
|
+
let { id: id, key: key, closeOnSelect: closeOnSelect, isVirtualized: isVirtualized, 'aria-haspopup': hasPopup, onPressStart: pressStartProp, onPressUp: pressUpProp, onPress: onPress, onPressChange: pressChangeProp, onPressEnd: onPressEnd, onClick: onClickProp, onHoverStart: hoverStartProp, onHoverChange: onHoverChange, onHoverEnd: onHoverEnd, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onFocus: onFocus, onFocusChange: onFocusChange, onBlur: onBlur, selectionManager: selectionManager = state.selectionManager } = props;
|
|
30
32
|
let isTrigger = !!hasPopup;
|
|
31
33
|
let isTriggerExpanded = isTrigger && props['aria-expanded'] === 'true';
|
|
32
34
|
var _props_isDisabled;
|
|
@@ -37,7 +39,7 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
37
39
|
let item = state.collection.getItem(key);
|
|
38
40
|
let onClose = props.onClose || data.onClose;
|
|
39
41
|
let router = (0, $byVdR$reactariautils.useRouter)();
|
|
40
|
-
let performAction = (
|
|
42
|
+
let performAction = ()=>{
|
|
41
43
|
var _item_props;
|
|
42
44
|
if (isTrigger) return;
|
|
43
45
|
if (item === null || item === void 0 ? void 0 : (_item_props = item.props) === null || _item_props === void 0 ? void 0 : _item_props.onAction) item.props.onAction();
|
|
@@ -47,7 +49,6 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
47
49
|
let onAction = data.onAction;
|
|
48
50
|
onAction(key);
|
|
49
51
|
}
|
|
50
|
-
if (e.target instanceof HTMLAnchorElement && item) router.open(e.target, e, item.props.href, item.props.routerOptions);
|
|
51
52
|
};
|
|
52
53
|
let role = 'menuitem';
|
|
53
54
|
if (!isTrigger) {
|
|
@@ -77,29 +78,30 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
77
78
|
ariaProps['aria-setsize'] = (0, $byVdR$reactstatelycollections.getItemCount)(state.collection);
|
|
78
79
|
}
|
|
79
80
|
let onPressStart = (e)=>{
|
|
80
|
-
|
|
81
|
+
// Trigger native click event on keydown unless this is a link (the browser will trigger onClick then).
|
|
82
|
+
if (e.pointerType === 'keyboard' && !selectionManager.isLink(key)) e.target.click();
|
|
81
83
|
pressStartProp === null || pressStartProp === void 0 ? void 0 : pressStartProp(e);
|
|
82
84
|
};
|
|
83
|
-
let
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
85
|
+
let isPressedRef = (0, $byVdR$react.useRef)(false);
|
|
86
|
+
let onPressChange = (isPressed)=>{
|
|
87
|
+
pressChangeProp === null || pressChangeProp === void 0 ? void 0 : pressChangeProp(isPressed);
|
|
88
|
+
isPressedRef.current = isPressed;
|
|
87
89
|
};
|
|
88
90
|
let onPressUp = (e)=>{
|
|
89
91
|
// If interacting with mouse, allow the user to mouse down on the trigger button,
|
|
90
92
|
// drag, and release over an item (matching native behavior).
|
|
91
93
|
if (e.pointerType === 'mouse') {
|
|
92
|
-
|
|
93
|
-
maybeClose();
|
|
94
|
+
if (!isPressedRef.current) e.target.click();
|
|
94
95
|
}
|
|
96
|
+
// Pressing a menu item should close by default in single selection mode but not multiple
|
|
97
|
+
// selection mode, except if overridden by the closeOnSelect prop.
|
|
98
|
+
if (e.pointerType !== 'keyboard' && !isTrigger && onClose && (closeOnSelect !== null && closeOnSelect !== void 0 ? closeOnSelect : selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key))) onClose();
|
|
95
99
|
pressUpProp === null || pressUpProp === void 0 ? void 0 : pressUpProp(e);
|
|
96
100
|
};
|
|
97
|
-
let
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}
|
|
102
|
-
pressProp === null || pressProp === void 0 ? void 0 : pressProp(e);
|
|
101
|
+
let onClick = (e)=>{
|
|
102
|
+
onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
|
|
103
|
+
performAction();
|
|
104
|
+
(0, $byVdR$reactariautils.handleLinkClick)(e, router, item.props.href, item === null || item === void 0 ? void 0 : item.props.routerOptions);
|
|
103
105
|
};
|
|
104
106
|
let { itemProps: itemProps, isFocused: isFocused } = (0, $byVdR$reactariaselection.useSelectableItem)({
|
|
105
107
|
id: id,
|
|
@@ -178,7 +180,9 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
178
180
|
} : itemProps, pressProps, hoverProps, keyboardProps, focusProps, // Prevent DOM focus from moving on mouse down when using virtual focus or this is a submenu/subdialog trigger.
|
|
179
181
|
data.shouldUseVirtualFocus || isTrigger ? {
|
|
180
182
|
onMouseDown: (e)=>e.preventDefault()
|
|
181
|
-
} : undefined
|
|
183
|
+
} : undefined, isDisabled ? undefined : {
|
|
184
|
+
onClick: onClick
|
|
185
|
+
}),
|
|
182
186
|
// 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.
|
|
183
187
|
tabIndex: itemProps.tabIndex != null && isTriggerExpanded && !data.shouldUseVirtualFocus ? -1 : itemProps.tabIndex
|
|
184
188
|
},
|
|
@@ -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 './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 keyboard focused. */\n isFocusVisible: 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)) {\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(\n domProps,\n linkProps,\n isTrigger \n ? {onFocus: itemProps.onFocus, 'data-collection': itemProps['data-collection'], 'data-key': itemProps['data-key']} \n : itemProps,\n pressProps,\n hoverProps,\n keyboardProps,\n focusProps,\n // Prevent DOM focus from moving on mouse down when using virtual focus or this is a submenu/subdialog trigger.\n data.shouldUseVirtualFocus || isTrigger ? {onMouseDown: e => e.preventDefault()} : undefined\n ),\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 && !data.shouldUseVirtualFocus ? -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 isFocusVisible: isFocused && selectionManager.isFocused && isFocusVisible() && !isTriggerExpanded,\n isSelected,\n isPressed,\n isDisabled\n };\n}\n"],"names":[],"version":3,"file":"useMenuItem.main.js.map"}
|
|
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} from '@react-types/shared';\nimport {filterDOMProps, handleLinkClick, 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 {MouseEvent, useRef} from 'react';\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 keyboard focused. */\n isFocusVisible: 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,\n onPressChange: pressChangeProp,\n onPressEnd,\n onClick: onClickProp,\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 = () => {\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\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 // Trigger native click event on keydown unless this is a link (the browser will trigger onClick then).\n if (e.pointerType === 'keyboard' && !selectionManager.isLink(key)) {\n (e.target as HTMLElement).click();\n }\n\n pressStartProp?.(e);\n };\n let isPressedRef = useRef(false);\n let onPressChange = (isPressed: boolean) => {\n pressChangeProp?.(isPressed);\n isPressedRef.current = isPressed;\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 if (!isPressedRef.current) {\n (e.target as HTMLElement).click();\n }\n }\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 (e.pointerType !== 'keyboard' && !isTrigger && onClose && (closeOnSelect ?? (selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key)))) {\n onClose();\n }\n\n pressUpProp?.(e);\n };\n\n let onClick = (e: MouseEvent<FocusableElement>) => {\n onClickProp?.(e);\n performAction();\n handleLinkClick(e, router, item!.props.href, item?.props.routerOptions);\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)) {\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(\n domProps,\n linkProps,\n isTrigger \n ? {onFocus: itemProps.onFocus, 'data-collection': itemProps['data-collection'], 'data-key': itemProps['data-key']} \n : itemProps,\n pressProps,\n hoverProps,\n keyboardProps,\n focusProps,\n // Prevent DOM focus from moving on mouse down when using virtual focus or this is a submenu/subdialog trigger.\n data.shouldUseVirtualFocus || isTrigger ? {onMouseDown: e => e.preventDefault()} : undefined,\n isDisabled ? undefined : {onClick}\n ),\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 && !data.shouldUseVirtualFocus ? -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 isFocusVisible: isFocused && selectionManager.isFocused && isFocusVisible() && !isTriggerExpanded,\n isSelected,\n isPressed,\n isDisabled\n };\n}\n"],"names":[],"version":3,"file":"useMenuItem.main.js.map"}
|
package/dist/useMenuItem.mjs
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import {menuData as $fc79756100351201$export$6f49b4016bfc8d56} from "./utils.mjs";
|
|
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";
|
|
2
|
+
import {useRouter as $7Kjv5$useRouter, useSlotId as $7Kjv5$useSlotId, handleLinkClick as $7Kjv5$handleLinkClick, 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";
|
|
5
|
+
import {useRef as $7Kjv5$useRef} from "react";
|
|
5
6
|
import {useSelectableItem as $7Kjv5$useSelectableItem} from "@react-aria/selection";
|
|
6
7
|
|
|
7
8
|
/*
|
|
@@ -19,8 +20,9 @@ import {useSelectableItem as $7Kjv5$useSelectableItem} from "@react-aria/selecti
|
|
|
19
20
|
|
|
20
21
|
|
|
21
22
|
|
|
23
|
+
|
|
22
24
|
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:
|
|
25
|
+
let { id: id, key: key, closeOnSelect: closeOnSelect, isVirtualized: isVirtualized, 'aria-haspopup': hasPopup, onPressStart: pressStartProp, onPressUp: pressUpProp, onPress: onPress, onPressChange: pressChangeProp, onPressEnd: onPressEnd, onClick: onClickProp, onHoverStart: hoverStartProp, onHoverChange: onHoverChange, onHoverEnd: onHoverEnd, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onFocus: onFocus, onFocusChange: onFocusChange, onBlur: onBlur, selectionManager: selectionManager = state.selectionManager } = props;
|
|
24
26
|
let isTrigger = !!hasPopup;
|
|
25
27
|
let isTriggerExpanded = isTrigger && props['aria-expanded'] === 'true';
|
|
26
28
|
var _props_isDisabled;
|
|
@@ -31,7 +33,7 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
31
33
|
let item = state.collection.getItem(key);
|
|
32
34
|
let onClose = props.onClose || data.onClose;
|
|
33
35
|
let router = (0, $7Kjv5$useRouter)();
|
|
34
|
-
let performAction = (
|
|
36
|
+
let performAction = ()=>{
|
|
35
37
|
var _item_props;
|
|
36
38
|
if (isTrigger) return;
|
|
37
39
|
if (item === null || item === void 0 ? void 0 : (_item_props = item.props) === null || _item_props === void 0 ? void 0 : _item_props.onAction) item.props.onAction();
|
|
@@ -41,7 +43,6 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
41
43
|
let onAction = data.onAction;
|
|
42
44
|
onAction(key);
|
|
43
45
|
}
|
|
44
|
-
if (e.target instanceof HTMLAnchorElement && item) router.open(e.target, e, item.props.href, item.props.routerOptions);
|
|
45
46
|
};
|
|
46
47
|
let role = 'menuitem';
|
|
47
48
|
if (!isTrigger) {
|
|
@@ -71,29 +72,30 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
71
72
|
ariaProps['aria-setsize'] = (0, $7Kjv5$getItemCount)(state.collection);
|
|
72
73
|
}
|
|
73
74
|
let onPressStart = (e)=>{
|
|
74
|
-
|
|
75
|
+
// Trigger native click event on keydown unless this is a link (the browser will trigger onClick then).
|
|
76
|
+
if (e.pointerType === 'keyboard' && !selectionManager.isLink(key)) e.target.click();
|
|
75
77
|
pressStartProp === null || pressStartProp === void 0 ? void 0 : pressStartProp(e);
|
|
76
78
|
};
|
|
77
|
-
let
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
79
|
+
let isPressedRef = (0, $7Kjv5$useRef)(false);
|
|
80
|
+
let onPressChange = (isPressed)=>{
|
|
81
|
+
pressChangeProp === null || pressChangeProp === void 0 ? void 0 : pressChangeProp(isPressed);
|
|
82
|
+
isPressedRef.current = isPressed;
|
|
81
83
|
};
|
|
82
84
|
let onPressUp = (e)=>{
|
|
83
85
|
// If interacting with mouse, allow the user to mouse down on the trigger button,
|
|
84
86
|
// drag, and release over an item (matching native behavior).
|
|
85
87
|
if (e.pointerType === 'mouse') {
|
|
86
|
-
|
|
87
|
-
maybeClose();
|
|
88
|
+
if (!isPressedRef.current) e.target.click();
|
|
88
89
|
}
|
|
90
|
+
// Pressing a menu item should close by default in single selection mode but not multiple
|
|
91
|
+
// selection mode, except if overridden by the closeOnSelect prop.
|
|
92
|
+
if (e.pointerType !== 'keyboard' && !isTrigger && onClose && (closeOnSelect !== null && closeOnSelect !== void 0 ? closeOnSelect : selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key))) onClose();
|
|
89
93
|
pressUpProp === null || pressUpProp === void 0 ? void 0 : pressUpProp(e);
|
|
90
94
|
};
|
|
91
|
-
let
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
}
|
|
96
|
-
pressProp === null || pressProp === void 0 ? void 0 : pressProp(e);
|
|
95
|
+
let onClick = (e)=>{
|
|
96
|
+
onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
|
|
97
|
+
performAction();
|
|
98
|
+
(0, $7Kjv5$handleLinkClick)(e, router, item.props.href, item === null || item === void 0 ? void 0 : item.props.routerOptions);
|
|
97
99
|
};
|
|
98
100
|
let { itemProps: itemProps, isFocused: isFocused } = (0, $7Kjv5$useSelectableItem)({
|
|
99
101
|
id: id,
|
|
@@ -172,7 +174,9 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
172
174
|
} : itemProps, pressProps, hoverProps, keyboardProps, focusProps, // Prevent DOM focus from moving on mouse down when using virtual focus or this is a submenu/subdialog trigger.
|
|
173
175
|
data.shouldUseVirtualFocus || isTrigger ? {
|
|
174
176
|
onMouseDown: (e)=>e.preventDefault()
|
|
175
|
-
} : undefined
|
|
177
|
+
} : undefined, isDisabled ? undefined : {
|
|
178
|
+
onClick: onClick
|
|
179
|
+
}),
|
|
176
180
|
// 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.
|
|
177
181
|
tabIndex: itemProps.tabIndex != null && isTriggerExpanded && !data.shouldUseVirtualFocus ? -1 : itemProps.tabIndex
|
|
178
182
|
},
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import {menuData as $fc79756100351201$export$6f49b4016bfc8d56} from "./utils.module.js";
|
|
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";
|
|
2
|
+
import {useRouter as $7Kjv5$useRouter, useSlotId as $7Kjv5$useSlotId, handleLinkClick as $7Kjv5$handleLinkClick, 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";
|
|
5
|
+
import {useRef as $7Kjv5$useRef} from "react";
|
|
5
6
|
import {useSelectableItem as $7Kjv5$useSelectableItem} from "@react-aria/selection";
|
|
6
7
|
|
|
7
8
|
/*
|
|
@@ -19,8 +20,9 @@ import {useSelectableItem as $7Kjv5$useSelectableItem} from "@react-aria/selecti
|
|
|
19
20
|
|
|
20
21
|
|
|
21
22
|
|
|
23
|
+
|
|
22
24
|
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:
|
|
25
|
+
let { id: id, key: key, closeOnSelect: closeOnSelect, isVirtualized: isVirtualized, 'aria-haspopup': hasPopup, onPressStart: pressStartProp, onPressUp: pressUpProp, onPress: onPress, onPressChange: pressChangeProp, onPressEnd: onPressEnd, onClick: onClickProp, onHoverStart: hoverStartProp, onHoverChange: onHoverChange, onHoverEnd: onHoverEnd, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onFocus: onFocus, onFocusChange: onFocusChange, onBlur: onBlur, selectionManager: selectionManager = state.selectionManager } = props;
|
|
24
26
|
let isTrigger = !!hasPopup;
|
|
25
27
|
let isTriggerExpanded = isTrigger && props['aria-expanded'] === 'true';
|
|
26
28
|
var _props_isDisabled;
|
|
@@ -31,7 +33,7 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
31
33
|
let item = state.collection.getItem(key);
|
|
32
34
|
let onClose = props.onClose || data.onClose;
|
|
33
35
|
let router = (0, $7Kjv5$useRouter)();
|
|
34
|
-
let performAction = (
|
|
36
|
+
let performAction = ()=>{
|
|
35
37
|
var _item_props;
|
|
36
38
|
if (isTrigger) return;
|
|
37
39
|
if (item === null || item === void 0 ? void 0 : (_item_props = item.props) === null || _item_props === void 0 ? void 0 : _item_props.onAction) item.props.onAction();
|
|
@@ -41,7 +43,6 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
41
43
|
let onAction = data.onAction;
|
|
42
44
|
onAction(key);
|
|
43
45
|
}
|
|
44
|
-
if (e.target instanceof HTMLAnchorElement && item) router.open(e.target, e, item.props.href, item.props.routerOptions);
|
|
45
46
|
};
|
|
46
47
|
let role = 'menuitem';
|
|
47
48
|
if (!isTrigger) {
|
|
@@ -71,29 +72,30 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
71
72
|
ariaProps['aria-setsize'] = (0, $7Kjv5$getItemCount)(state.collection);
|
|
72
73
|
}
|
|
73
74
|
let onPressStart = (e)=>{
|
|
74
|
-
|
|
75
|
+
// Trigger native click event on keydown unless this is a link (the browser will trigger onClick then).
|
|
76
|
+
if (e.pointerType === 'keyboard' && !selectionManager.isLink(key)) e.target.click();
|
|
75
77
|
pressStartProp === null || pressStartProp === void 0 ? void 0 : pressStartProp(e);
|
|
76
78
|
};
|
|
77
|
-
let
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
79
|
+
let isPressedRef = (0, $7Kjv5$useRef)(false);
|
|
80
|
+
let onPressChange = (isPressed)=>{
|
|
81
|
+
pressChangeProp === null || pressChangeProp === void 0 ? void 0 : pressChangeProp(isPressed);
|
|
82
|
+
isPressedRef.current = isPressed;
|
|
81
83
|
};
|
|
82
84
|
let onPressUp = (e)=>{
|
|
83
85
|
// If interacting with mouse, allow the user to mouse down on the trigger button,
|
|
84
86
|
// drag, and release over an item (matching native behavior).
|
|
85
87
|
if (e.pointerType === 'mouse') {
|
|
86
|
-
|
|
87
|
-
maybeClose();
|
|
88
|
+
if (!isPressedRef.current) e.target.click();
|
|
88
89
|
}
|
|
90
|
+
// Pressing a menu item should close by default in single selection mode but not multiple
|
|
91
|
+
// selection mode, except if overridden by the closeOnSelect prop.
|
|
92
|
+
if (e.pointerType !== 'keyboard' && !isTrigger && onClose && (closeOnSelect !== null && closeOnSelect !== void 0 ? closeOnSelect : selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key))) onClose();
|
|
89
93
|
pressUpProp === null || pressUpProp === void 0 ? void 0 : pressUpProp(e);
|
|
90
94
|
};
|
|
91
|
-
let
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
}
|
|
96
|
-
pressProp === null || pressProp === void 0 ? void 0 : pressProp(e);
|
|
95
|
+
let onClick = (e)=>{
|
|
96
|
+
onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
|
|
97
|
+
performAction();
|
|
98
|
+
(0, $7Kjv5$handleLinkClick)(e, router, item.props.href, item === null || item === void 0 ? void 0 : item.props.routerOptions);
|
|
97
99
|
};
|
|
98
100
|
let { itemProps: itemProps, isFocused: isFocused } = (0, $7Kjv5$useSelectableItem)({
|
|
99
101
|
id: id,
|
|
@@ -172,7 +174,9 @@ function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
172
174
|
} : itemProps, pressProps, hoverProps, keyboardProps, focusProps, // Prevent DOM focus from moving on mouse down when using virtual focus or this is a submenu/subdialog trigger.
|
|
173
175
|
data.shouldUseVirtualFocus || isTrigger ? {
|
|
174
176
|
onMouseDown: (e)=>e.preventDefault()
|
|
175
|
-
} : undefined
|
|
177
|
+
} : undefined, isDisabled ? undefined : {
|
|
178
|
+
onClick: onClick
|
|
179
|
+
}),
|
|
176
180
|
// 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.
|
|
177
181
|
tabIndex: itemProps.tabIndex != null && isTriggerExpanded && !data.shouldUseVirtualFocus ? -1 : itemProps.tabIndex
|
|
178
182
|
},
|
|
@@ -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 './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 keyboard focused. */\n isFocusVisible: 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)) {\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(\n domProps,\n linkProps,\n isTrigger \n ? {onFocus: itemProps.onFocus, 'data-collection': itemProps['data-collection'], 'data-key': itemProps['data-key']} \n : itemProps,\n pressProps,\n hoverProps,\n keyboardProps,\n focusProps,\n // Prevent DOM focus from moving on mouse down when using virtual focus or this is a submenu/subdialog trigger.\n data.shouldUseVirtualFocus || isTrigger ? {onMouseDown: e => e.preventDefault()} : undefined\n ),\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 && !data.shouldUseVirtualFocus ? -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 isFocusVisible: isFocused && selectionManager.isFocused && isFocusVisible() && !isTriggerExpanded,\n isSelected,\n isPressed,\n isDisabled\n };\n}\n"],"names":[],"version":3,"file":"useMenuItem.module.js.map"}
|
|
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} from '@react-types/shared';\nimport {filterDOMProps, handleLinkClick, 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 {MouseEvent, useRef} from 'react';\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 keyboard focused. */\n isFocusVisible: 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,\n onPressChange: pressChangeProp,\n onPressEnd,\n onClick: onClickProp,\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 = () => {\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\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 // Trigger native click event on keydown unless this is a link (the browser will trigger onClick then).\n if (e.pointerType === 'keyboard' && !selectionManager.isLink(key)) {\n (e.target as HTMLElement).click();\n }\n\n pressStartProp?.(e);\n };\n let isPressedRef = useRef(false);\n let onPressChange = (isPressed: boolean) => {\n pressChangeProp?.(isPressed);\n isPressedRef.current = isPressed;\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 if (!isPressedRef.current) {\n (e.target as HTMLElement).click();\n }\n }\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 (e.pointerType !== 'keyboard' && !isTrigger && onClose && (closeOnSelect ?? (selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key)))) {\n onClose();\n }\n\n pressUpProp?.(e);\n };\n\n let onClick = (e: MouseEvent<FocusableElement>) => {\n onClickProp?.(e);\n performAction();\n handleLinkClick(e, router, item!.props.href, item?.props.routerOptions);\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)) {\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(\n domProps,\n linkProps,\n isTrigger \n ? {onFocus: itemProps.onFocus, 'data-collection': itemProps['data-collection'], 'data-key': itemProps['data-key']} \n : itemProps,\n pressProps,\n hoverProps,\n keyboardProps,\n focusProps,\n // Prevent DOM focus from moving on mouse down when using virtual focus or this is a submenu/subdialog trigger.\n data.shouldUseVirtualFocus || isTrigger ? {onMouseDown: e => e.preventDefault()} : undefined,\n isDisabled ? undefined : {onClick}\n ),\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 && !data.shouldUseVirtualFocus ? -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 isFocusVisible: isFocused && selectionManager.isFocused && isFocusVisible() && !isTriggerExpanded,\n isSelected,\n isPressed,\n isDisabled\n };\n}\n"],"names":[],"version":3,"file":"useMenuItem.module.js.map"}
|
|
@@ -41,7 +41,11 @@ function $7211ab9328763fb9$export$dc9c12ed27dd1b49(props, state, ref) {
|
|
|
41
41
|
if (ref && ref.current) switch(e.key){
|
|
42
42
|
case 'Enter':
|
|
43
43
|
case ' ':
|
|
44
|
-
if
|
|
44
|
+
// React puts listeners on the same root, so even if propagation was stopped, immediate propagation is still possible.
|
|
45
|
+
// useTypeSelect will handle the spacebar first if it's running, so we don't want to open if it's handled it already.
|
|
46
|
+
// We use isDefaultPrevented() instead of isPropagationStopped() because createEventHandler stops propagation by default.
|
|
47
|
+
// And default prevented means that the event was handled by something else (typeahead), so we don't want to open the menu.
|
|
48
|
+
if (trigger === 'longPress' || e.isDefaultPrevented()) return;
|
|
45
49
|
// fallthrough
|
|
46
50
|
case 'ArrowDown':
|
|
47
51
|
// Stop propagation, unless it would already be handled by useKeyboard.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAqCM,SAAS,0CAAkB,KAA2B,EAAE,KAAuB,EAAE,GAA8B;IACpH,IAAI,QACF,OAAO,oBACP,UAAU,WACV,UAAU,SACX,GAAG;IAEJ,IAAI,gBAAgB,CAAA,GAAA,2BAAI;IACxB,IAAI,gBAAC,YAAY,gBAAE,YAAY,EAAC,GAAG,CAAA,GAAA,0CAAgB,EAAE;cAAC;IAAI,GAAG,OAAO;IAEpE,IAAI,YAAY,CAAC;QACf,IAAI,YACF;QAGF,IAAI,YAAY,eAAe,CAAC,EAAE,MAAM,EACtC;QAGF,IAAI,OAAO,IAAI,OAAO,EACpB,OAAQ,EAAE,GAAG;YACX,KAAK;YACL,KAAK;gBACH,IAAI,YAAY,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAqCM,SAAS,0CAAkB,KAA2B,EAAE,KAAuB,EAAE,GAA8B;IACpH,IAAI,QACF,OAAO,oBACP,UAAU,WACV,UAAU,SACX,GAAG;IAEJ,IAAI,gBAAgB,CAAA,GAAA,2BAAI;IACxB,IAAI,gBAAC,YAAY,gBAAE,YAAY,EAAC,GAAG,CAAA,GAAA,0CAAgB,EAAE;cAAC;IAAI,GAAG,OAAO;IAEpE,IAAI,YAAY,CAAC;QACf,IAAI,YACF;QAGF,IAAI,YAAY,eAAe,CAAC,EAAE,MAAM,EACtC;QAGF,IAAI,OAAO,IAAI,OAAO,EACpB,OAAQ,EAAE,GAAG;YACX,KAAK;YACL,KAAK;gBACH,sHAAsH;gBACtH,qHAAqH;gBACrH,yHAAyH;gBACzH,2HAA2H;gBAC3H,IAAI,YAAY,eAAe,EAAE,kBAAkB,IACjD;YAEF,cAAc;YAChB,KAAK;gBACH,uEAAuE;gBACvE,IAAI,CAAE,CAAA,yBAAyB,CAAA,GAC7B,EAAE,eAAe;gBAEnB,EAAE,cAAc;gBAChB,MAAM,MAAM,CAAC;gBACb;YACF,KAAK;gBACH,IAAI,CAAE,CAAA,yBAAyB,CAAA,GAC7B,EAAE,eAAe;gBAEnB,EAAE,cAAc;gBAChB,MAAM,MAAM,CAAC;gBACb;YACF;gBACE,oBAAoB;gBACpB,IAAI,yBAAyB,GAC3B,EAAE,mBAAmB;QAE3B;IAEJ;IAEA,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,yCAAW,EAAE;QAClC,YAAY,cAAc,YAAY;QACtC,0BAA0B,gBAAgB,MAAM,CAAC;QACjD;YACE,MAAM,KAAK;QACb;QACA;YACE,MAAM,IAAI,CAAC;QACb;IACF;IAEA,IAAI,aAA0B;QAC5B,qBAAqB;QACrB,cAAa,CAAC;YACZ,8EAA8E;YAC9E,IAAI,EAAE,WAAW,KAAK,WAAW,EAAE,WAAW,KAAK,cAAc,CAAC,YAAY;gBAC5E,iGAAiG;gBACjG,CAAA,GAAA,2CAAoB,EAAE,EAAE,MAAM;gBAE9B,6DAA6D;gBAC7D,8CAA8C;gBAC9C,MAAM,IAAI,CAAC,EAAE,WAAW,KAAK,YAAY,UAAU;YACrD;QACF;QACA,SAAQ,CAAC;YACP,IAAI,EAAE,WAAW,KAAK,WAAW,CAAC,YAAY;gBAC5C,iGAAiG;gBACjG,CAAA,GAAA,2CAAoB,EAAE,EAAE,MAAM;gBAE9B,MAAM,MAAM;YACd;QACF;IACF;IAEA,6DAA6D;IAC7D,OAAO,aAAa,OAAO;IAE3B,OAAO;QACL,2OAA2O;QAC3O,kBAAkB;YAChB,GAAG,YAAY;YACf,GAAI,YAAY,UAAU,aAAa,cAAc;YACrD,IAAI;uBACJ;QACF;QACA,WAAW;YACT,GAAG,YAAY;YACf,mBAAmB;YACnB,WAAW,MAAM,aAAa,IAAI;YAClC,SAAS,MAAM,KAAK;QACtB;IACF;AACF","sources":["packages/@react-aria/menu/src/useMenuTrigger.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 {AriaButtonProps} from '@react-types/button';\nimport {AriaMenuOptions} from './useMenu';\nimport {FocusableElement, RefObject} from '@react-types/shared';\nimport {focusWithoutScrolling, useId} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {MenuTriggerState} from '@react-stately/menu';\nimport {MenuTriggerType} from '@react-types/menu';\nimport {PressProps, useLongPress} from '@react-aria/interactions';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useOverlayTrigger} from '@react-aria/overlays';\n\nexport interface AriaMenuTriggerProps {\n /** The type of menu that the menu trigger opens. */\n type?: 'menu' | 'listbox',\n /** Whether menu trigger is disabled. */\n isDisabled?: boolean,\n /** How menu is triggered. */\n trigger?: MenuTriggerType\n}\n\nexport interface MenuTriggerAria<T> {\n /** Props for the menu trigger element. */\n menuTriggerProps: AriaButtonProps,\n\n /** Props for the menu. */\n menuProps: AriaMenuOptions<T>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a menu trigger.\n * @param props - Props for the menu trigger.\n * @param state - State for the menu trigger.\n * @param ref - Ref to the HTML element trigger for the menu.\n */\nexport function useMenuTrigger<T>(props: AriaMenuTriggerProps, state: MenuTriggerState, ref: RefObject<Element | null>): MenuTriggerAria<T> {\n let {\n type = 'menu',\n isDisabled,\n trigger = 'press'\n } = props;\n\n let menuTriggerId = useId();\n let {triggerProps, overlayProps} = useOverlayTrigger({type}, state, ref);\n\n let onKeyDown = (e) => {\n if (isDisabled) {\n return;\n }\n\n if (trigger === 'longPress' && !e.altKey) {\n return;\n }\n\n if (ref && ref.current) {\n switch (e.key) {\n case 'Enter':\n case ' ':\n // React puts listeners on the same root, so even if propagation was stopped, immediate propagation is still possible.\n // useTypeSelect will handle the spacebar first if it's running, so we don't want to open if it's handled it already.\n // We use isDefaultPrevented() instead of isPropagationStopped() because createEventHandler stops propagation by default.\n // And default prevented means that the event was handled by something else (typeahead), so we don't want to open the menu.\n if (trigger === 'longPress' || e.isDefaultPrevented()) {\n return;\n }\n // fallthrough\n case 'ArrowDown':\n // Stop propagation, unless it would already be handled by useKeyboard.\n if (!('continuePropagation' in e)) {\n e.stopPropagation();\n }\n e.preventDefault();\n state.toggle('first');\n break;\n case 'ArrowUp':\n if (!('continuePropagation' in e)) {\n e.stopPropagation();\n }\n e.preventDefault();\n state.toggle('last');\n break;\n default:\n // Allow other keys.\n if ('continuePropagation' in e) {\n e.continuePropagation();\n }\n }\n }\n };\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/menu');\n let {longPressProps} = useLongPress({\n isDisabled: isDisabled || trigger !== 'longPress',\n accessibilityDescription: stringFormatter.format('longPressMessage'),\n onLongPressStart() {\n state.close();\n },\n onLongPress() {\n state.open('first');\n }\n });\n\n let pressProps: PressProps = {\n preventFocusOnPress: true,\n onPressStart(e) {\n // For consistency with native, open the menu on mouse/key down, but touch up.\n if (e.pointerType !== 'touch' && e.pointerType !== 'keyboard' && !isDisabled) {\n // Ensure trigger has focus before opening the menu so it can be restored by FocusScope on close.\n focusWithoutScrolling(e.target as FocusableElement);\n\n // If opened with a screen reader, auto focus the first item.\n // Otherwise, the menu itself will be focused.\n state.open(e.pointerType === 'virtual' ? 'first' : null);\n }\n },\n onPress(e) {\n if (e.pointerType === 'touch' && !isDisabled) {\n // Ensure trigger has focus before opening the menu so it can be restored by FocusScope on close.\n focusWithoutScrolling(e.target as FocusableElement);\n\n state.toggle();\n }\n }\n };\n\n // omit onPress from triggerProps since we override it above.\n delete triggerProps.onPress;\n\n return {\n // @ts-ignore - TODO we pass out both DOMAttributes AND AriaButtonProps, but useButton will discard the longPress event handlers, it's only through PressResponder magic that this works for RSP and RAC. it does not work in aria examples\n menuTriggerProps: {\n ...triggerProps,\n ...(trigger === 'press' ? pressProps : longPressProps),\n id: menuTriggerId,\n onKeyDown\n },\n menuProps: {\n ...overlayProps,\n 'aria-labelledby': menuTriggerId,\n autoFocus: state.focusStrategy || true,\n onClose: state.close\n }\n };\n}\n"],"names":[],"version":3,"file":"useMenuTrigger.main.js.map"}
|
package/dist/useMenuTrigger.mjs
CHANGED
|
@@ -35,7 +35,11 @@ function $168583247155ddda$export$dc9c12ed27dd1b49(props, state, ref) {
|
|
|
35
35
|
if (ref && ref.current) switch(e.key){
|
|
36
36
|
case 'Enter':
|
|
37
37
|
case ' ':
|
|
38
|
-
if
|
|
38
|
+
// React puts listeners on the same root, so even if propagation was stopped, immediate propagation is still possible.
|
|
39
|
+
// useTypeSelect will handle the spacebar first if it's running, so we don't want to open if it's handled it already.
|
|
40
|
+
// We use isDefaultPrevented() instead of isPropagationStopped() because createEventHandler stops propagation by default.
|
|
41
|
+
// And default prevented means that the event was handled by something else (typeahead), so we don't want to open the menu.
|
|
42
|
+
if (trigger === 'longPress' || e.isDefaultPrevented()) return;
|
|
39
43
|
// fallthrough
|
|
40
44
|
case 'ArrowDown':
|
|
41
45
|
// Stop propagation, unless it would already be handled by useKeyboard.
|
|
@@ -35,7 +35,11 @@ function $168583247155ddda$export$dc9c12ed27dd1b49(props, state, ref) {
|
|
|
35
35
|
if (ref && ref.current) switch(e.key){
|
|
36
36
|
case 'Enter':
|
|
37
37
|
case ' ':
|
|
38
|
-
if
|
|
38
|
+
// React puts listeners on the same root, so even if propagation was stopped, immediate propagation is still possible.
|
|
39
|
+
// useTypeSelect will handle the spacebar first if it's running, so we don't want to open if it's handled it already.
|
|
40
|
+
// We use isDefaultPrevented() instead of isPropagationStopped() because createEventHandler stops propagation by default.
|
|
41
|
+
// And default prevented means that the event was handled by something else (typeahead), so we don't want to open the menu.
|
|
42
|
+
if (trigger === 'longPress' || e.isDefaultPrevented()) return;
|
|
39
43
|
// fallthrough
|
|
40
44
|
case 'ArrowDown':
|
|
41
45
|
// Stop propagation, unless it would already be handled by useKeyboard.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAqCM,SAAS,0CAAkB,KAA2B,EAAE,KAAuB,EAAE,GAA8B;IACpH,IAAI,QACF,OAAO,oBACP,UAAU,WACV,UAAU,SACX,GAAG;IAEJ,IAAI,gBAAgB,CAAA,GAAA,YAAI;IACxB,IAAI,gBAAC,YAAY,gBAAE,YAAY,EAAC,GAAG,CAAA,GAAA,wBAAgB,EAAE;cAAC;IAAI,GAAG,OAAO;IAEpE,IAAI,YAAY,CAAC;QACf,IAAI,YACF;QAGF,IAAI,YAAY,eAAe,CAAC,EAAE,MAAM,EACtC;QAGF,IAAI,OAAO,IAAI,OAAO,EACpB,OAAQ,EAAE,GAAG;YACX,KAAK;YACL,KAAK;gBACH,IAAI,YAAY,
|
|
1
|
+
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAqCM,SAAS,0CAAkB,KAA2B,EAAE,KAAuB,EAAE,GAA8B;IACpH,IAAI,QACF,OAAO,oBACP,UAAU,WACV,UAAU,SACX,GAAG;IAEJ,IAAI,gBAAgB,CAAA,GAAA,YAAI;IACxB,IAAI,gBAAC,YAAY,gBAAE,YAAY,EAAC,GAAG,CAAA,GAAA,wBAAgB,EAAE;cAAC;IAAI,GAAG,OAAO;IAEpE,IAAI,YAAY,CAAC;QACf,IAAI,YACF;QAGF,IAAI,YAAY,eAAe,CAAC,EAAE,MAAM,EACtC;QAGF,IAAI,OAAO,IAAI,OAAO,EACpB,OAAQ,EAAE,GAAG;YACX,KAAK;YACL,KAAK;gBACH,sHAAsH;gBACtH,qHAAqH;gBACrH,yHAAyH;gBACzH,2HAA2H;gBAC3H,IAAI,YAAY,eAAe,EAAE,kBAAkB,IACjD;YAEF,cAAc;YAChB,KAAK;gBACH,uEAAuE;gBACvE,IAAI,CAAE,CAAA,yBAAyB,CAAA,GAC7B,EAAE,eAAe;gBAEnB,EAAE,cAAc;gBAChB,MAAM,MAAM,CAAC;gBACb;YACF,KAAK;gBACH,IAAI,CAAE,CAAA,yBAAyB,CAAA,GAC7B,EAAE,eAAe;gBAEnB,EAAE,cAAc;gBAChB,MAAM,MAAM,CAAC;gBACb;YACF;gBACE,oBAAoB;gBACpB,IAAI,yBAAyB,GAC3B,EAAE,mBAAmB;QAE3B;IAEJ;IAEA,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAChE,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;QAClC,YAAY,cAAc,YAAY;QACtC,0BAA0B,gBAAgB,MAAM,CAAC;QACjD;YACE,MAAM,KAAK;QACb;QACA;YACE,MAAM,IAAI,CAAC;QACb;IACF;IAEA,IAAI,aAA0B;QAC5B,qBAAqB;QACrB,cAAa,CAAC;YACZ,8EAA8E;YAC9E,IAAI,EAAE,WAAW,KAAK,WAAW,EAAE,WAAW,KAAK,cAAc,CAAC,YAAY;gBAC5E,iGAAiG;gBACjG,CAAA,GAAA,4BAAoB,EAAE,EAAE,MAAM;gBAE9B,6DAA6D;gBAC7D,8CAA8C;gBAC9C,MAAM,IAAI,CAAC,EAAE,WAAW,KAAK,YAAY,UAAU;YACrD;QACF;QACA,SAAQ,CAAC;YACP,IAAI,EAAE,WAAW,KAAK,WAAW,CAAC,YAAY;gBAC5C,iGAAiG;gBACjG,CAAA,GAAA,4BAAoB,EAAE,EAAE,MAAM;gBAE9B,MAAM,MAAM;YACd;QACF;IACF;IAEA,6DAA6D;IAC7D,OAAO,aAAa,OAAO;IAE3B,OAAO;QACL,2OAA2O;QAC3O,kBAAkB;YAChB,GAAG,YAAY;YACf,GAAI,YAAY,UAAU,aAAa,cAAc;YACrD,IAAI;uBACJ;QACF;QACA,WAAW;YACT,GAAG,YAAY;YACf,mBAAmB;YACnB,WAAW,MAAM,aAAa,IAAI;YAClC,SAAS,MAAM,KAAK;QACtB;IACF;AACF","sources":["packages/@react-aria/menu/src/useMenuTrigger.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 {AriaButtonProps} from '@react-types/button';\nimport {AriaMenuOptions} from './useMenu';\nimport {FocusableElement, RefObject} from '@react-types/shared';\nimport {focusWithoutScrolling, useId} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {MenuTriggerState} from '@react-stately/menu';\nimport {MenuTriggerType} from '@react-types/menu';\nimport {PressProps, useLongPress} from '@react-aria/interactions';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useOverlayTrigger} from '@react-aria/overlays';\n\nexport interface AriaMenuTriggerProps {\n /** The type of menu that the menu trigger opens. */\n type?: 'menu' | 'listbox',\n /** Whether menu trigger is disabled. */\n isDisabled?: boolean,\n /** How menu is triggered. */\n trigger?: MenuTriggerType\n}\n\nexport interface MenuTriggerAria<T> {\n /** Props for the menu trigger element. */\n menuTriggerProps: AriaButtonProps,\n\n /** Props for the menu. */\n menuProps: AriaMenuOptions<T>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a menu trigger.\n * @param props - Props for the menu trigger.\n * @param state - State for the menu trigger.\n * @param ref - Ref to the HTML element trigger for the menu.\n */\nexport function useMenuTrigger<T>(props: AriaMenuTriggerProps, state: MenuTriggerState, ref: RefObject<Element | null>): MenuTriggerAria<T> {\n let {\n type = 'menu',\n isDisabled,\n trigger = 'press'\n } = props;\n\n let menuTriggerId = useId();\n let {triggerProps, overlayProps} = useOverlayTrigger({type}, state, ref);\n\n let onKeyDown = (e) => {\n if (isDisabled) {\n return;\n }\n\n if (trigger === 'longPress' && !e.altKey) {\n return;\n }\n\n if (ref && ref.current) {\n switch (e.key) {\n case 'Enter':\n case ' ':\n // React puts listeners on the same root, so even if propagation was stopped, immediate propagation is still possible.\n // useTypeSelect will handle the spacebar first if it's running, so we don't want to open if it's handled it already.\n // We use isDefaultPrevented() instead of isPropagationStopped() because createEventHandler stops propagation by default.\n // And default prevented means that the event was handled by something else (typeahead), so we don't want to open the menu.\n if (trigger === 'longPress' || e.isDefaultPrevented()) {\n return;\n }\n // fallthrough\n case 'ArrowDown':\n // Stop propagation, unless it would already be handled by useKeyboard.\n if (!('continuePropagation' in e)) {\n e.stopPropagation();\n }\n e.preventDefault();\n state.toggle('first');\n break;\n case 'ArrowUp':\n if (!('continuePropagation' in e)) {\n e.stopPropagation();\n }\n e.preventDefault();\n state.toggle('last');\n break;\n default:\n // Allow other keys.\n if ('continuePropagation' in e) {\n e.continuePropagation();\n }\n }\n }\n };\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/menu');\n let {longPressProps} = useLongPress({\n isDisabled: isDisabled || trigger !== 'longPress',\n accessibilityDescription: stringFormatter.format('longPressMessage'),\n onLongPressStart() {\n state.close();\n },\n onLongPress() {\n state.open('first');\n }\n });\n\n let pressProps: PressProps = {\n preventFocusOnPress: true,\n onPressStart(e) {\n // For consistency with native, open the menu on mouse/key down, but touch up.\n if (e.pointerType !== 'touch' && e.pointerType !== 'keyboard' && !isDisabled) {\n // Ensure trigger has focus before opening the menu so it can be restored by FocusScope on close.\n focusWithoutScrolling(e.target as FocusableElement);\n\n // If opened with a screen reader, auto focus the first item.\n // Otherwise, the menu itself will be focused.\n state.open(e.pointerType === 'virtual' ? 'first' : null);\n }\n },\n onPress(e) {\n if (e.pointerType === 'touch' && !isDisabled) {\n // Ensure trigger has focus before opening the menu so it can be restored by FocusScope on close.\n focusWithoutScrolling(e.target as FocusableElement);\n\n state.toggle();\n }\n }\n };\n\n // omit onPress from triggerProps since we override it above.\n delete triggerProps.onPress;\n\n return {\n // @ts-ignore - TODO we pass out both DOMAttributes AND AriaButtonProps, but useButton will discard the longPress event handlers, it's only through PressResponder magic that this works for RSP and RAC. it does not work in aria examples\n menuTriggerProps: {\n ...triggerProps,\n ...(trigger === 'press' ? pressProps : longPressProps),\n id: menuTriggerId,\n onKeyDown\n },\n menuProps: {\n ...overlayProps,\n 'aria-labelledby': menuTriggerId,\n autoFocus: state.focusStrategy || true,\n onClose: state.close\n }\n };\n}\n"],"names":[],"version":3,"file":"useMenuTrigger.module.js.map"}
|
package/dist/utils.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC,GAWM,MAAM,
|
|
1
|
+
{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC,GAWM,MAAM,4CAAkD,IAAI","sources":["packages/@react-aria/menu/src/utils.ts"],"sourcesContent":["/*\n * Copyright 2024 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 {Key} from '@react-types/shared';\nimport {TreeState} from '@react-stately/tree';\n\ninterface MenuData {\n onClose?: () => void,\n onAction?: (key: Key) => void,\n shouldUseVirtualFocus?: boolean\n}\n\nexport const menuData: WeakMap<TreeState<unknown>, MenuData> = new WeakMap<TreeState<unknown>, MenuData>();\n"],"names":[],"version":3,"file":"utils.main.js.map"}
|
package/dist/utils.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAA;;;;;;;;;;CAUC,GAWM,MAAM,
|
|
1
|
+
{"mappings":"AAAA;;;;;;;;;;CAUC,GAWM,MAAM,4CAAkD,IAAI","sources":["packages/@react-aria/menu/src/utils.ts"],"sourcesContent":["/*\n * Copyright 2024 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 {Key} from '@react-types/shared';\nimport {TreeState} from '@react-stately/tree';\n\ninterface MenuData {\n onClose?: () => void,\n onAction?: (key: Key) => void,\n shouldUseVirtualFocus?: boolean\n}\n\nexport const menuData: WeakMap<TreeState<unknown>, MenuData> = new WeakMap<TreeState<unknown>, MenuData>();\n"],"names":[],"version":3,"file":"utils.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/menu",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.19.0",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -26,19 +26,19 @@
|
|
|
26
26
|
"url": "https://github.com/adobe/react-spectrum"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@react-aria/focus": "^3.
|
|
30
|
-
"@react-aria/i18n": "^3.12.
|
|
31
|
-
"@react-aria/interactions": "^3.25.
|
|
32
|
-
"@react-aria/overlays": "^3.
|
|
33
|
-
"@react-aria/selection": "^3.
|
|
34
|
-
"@react-aria/utils": "^3.
|
|
35
|
-
"@react-stately/collections": "^3.12.
|
|
36
|
-
"@react-stately/menu": "^3.9.
|
|
37
|
-
"@react-stately/selection": "^3.20.
|
|
38
|
-
"@react-stately/tree": "^3.9.
|
|
39
|
-
"@react-types/button": "^3.
|
|
40
|
-
"@react-types/menu": "^3.10.
|
|
41
|
-
"@react-types/shared": "^3.
|
|
29
|
+
"@react-aria/focus": "^3.21.0",
|
|
30
|
+
"@react-aria/i18n": "^3.12.11",
|
|
31
|
+
"@react-aria/interactions": "^3.25.4",
|
|
32
|
+
"@react-aria/overlays": "^3.28.0",
|
|
33
|
+
"@react-aria/selection": "^3.25.0",
|
|
34
|
+
"@react-aria/utils": "^3.30.0",
|
|
35
|
+
"@react-stately/collections": "^3.12.6",
|
|
36
|
+
"@react-stately/menu": "^3.9.6",
|
|
37
|
+
"@react-stately/selection": "^3.20.4",
|
|
38
|
+
"@react-stately/tree": "^3.9.1",
|
|
39
|
+
"@react-types/button": "^3.13.0",
|
|
40
|
+
"@react-types/menu": "^3.10.3",
|
|
41
|
+
"@react-types/shared": "^3.31.0",
|
|
42
42
|
"@swc/helpers": "^0.5.0"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"publishConfig": {
|
|
49
49
|
"access": "public"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "8b9348ff255e018b2dd9b27e2a45507cadfa1d35"
|
|
52
52
|
}
|
package/src/useMenuItem.ts
CHANGED
|
@@ -10,11 +10,12 @@
|
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
-
import {DOMAttributes, DOMProps, FocusableElement, FocusEvents, HoverEvents, Key, KeyboardEvents, PressEvent, PressEvents, RefObject
|
|
14
|
-
import {filterDOMProps, mergeProps, useLinkProps, useRouter, useSlotId} from '@react-aria/utils';
|
|
13
|
+
import {DOMAttributes, DOMProps, FocusableElement, FocusEvents, HoverEvents, Key, KeyboardEvents, PressEvent, PressEvents, RefObject} from '@react-types/shared';
|
|
14
|
+
import {filterDOMProps, handleLinkClick, mergeProps, useLinkProps, useRouter, useSlotId} from '@react-aria/utils';
|
|
15
15
|
import {getItemCount} from '@react-stately/collections';
|
|
16
16
|
import {isFocusVisible, useFocus, useHover, useKeyboard, usePress} from '@react-aria/interactions';
|
|
17
17
|
import {menuData} from './utils';
|
|
18
|
+
import {MouseEvent, useRef} from 'react';
|
|
18
19
|
import {SelectionManager} from '@react-stately/selection';
|
|
19
20
|
import {TreeState} from '@react-stately/tree';
|
|
20
21
|
import {useSelectableItem} from '@react-aria/selection';
|
|
@@ -112,9 +113,10 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
|
|
|
112
113
|
'aria-haspopup': hasPopup,
|
|
113
114
|
onPressStart: pressStartProp,
|
|
114
115
|
onPressUp: pressUpProp,
|
|
115
|
-
onPress
|
|
116
|
-
onPressChange,
|
|
116
|
+
onPress,
|
|
117
|
+
onPressChange: pressChangeProp,
|
|
117
118
|
onPressEnd,
|
|
119
|
+
onClick: onClickProp,
|
|
118
120
|
onHoverStart: hoverStartProp,
|
|
119
121
|
onHoverChange,
|
|
120
122
|
onHoverEnd,
|
|
@@ -134,7 +136,7 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
|
|
|
134
136
|
let item = state.collection.getItem(key);
|
|
135
137
|
let onClose = props.onClose || data.onClose;
|
|
136
138
|
let router = useRouter();
|
|
137
|
-
let performAction = (
|
|
139
|
+
let performAction = () => {
|
|
138
140
|
if (isTrigger) {
|
|
139
141
|
return;
|
|
140
142
|
}
|
|
@@ -150,10 +152,6 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
|
|
|
150
152
|
let onAction = data.onAction;
|
|
151
153
|
onAction(key);
|
|
152
154
|
}
|
|
153
|
-
|
|
154
|
-
if (e.target instanceof HTMLAnchorElement && item) {
|
|
155
|
-
router.open(e.target, e, item.props.href, item.props.routerOptions as RouterOptions);
|
|
156
|
-
}
|
|
157
155
|
};
|
|
158
156
|
|
|
159
157
|
let role = 'menuitem';
|
|
@@ -191,39 +189,41 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
|
|
|
191
189
|
}
|
|
192
190
|
|
|
193
191
|
let onPressStart = (e: PressEvent) => {
|
|
194
|
-
|
|
195
|
-
|
|
192
|
+
// Trigger native click event on keydown unless this is a link (the browser will trigger onClick then).
|
|
193
|
+
if (e.pointerType === 'keyboard' && !selectionManager.isLink(key)) {
|
|
194
|
+
(e.target as HTMLElement).click();
|
|
196
195
|
}
|
|
197
196
|
|
|
198
197
|
pressStartProp?.(e);
|
|
199
198
|
};
|
|
200
|
-
|
|
201
|
-
let
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
if (!isTrigger && onClose && (closeOnSelect ?? (selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key)))) {
|
|
205
|
-
onClose();
|
|
206
|
-
}
|
|
199
|
+
let isPressedRef = useRef(false);
|
|
200
|
+
let onPressChange = (isPressed: boolean) => {
|
|
201
|
+
pressChangeProp?.(isPressed);
|
|
202
|
+
isPressedRef.current = isPressed;
|
|
207
203
|
};
|
|
208
204
|
|
|
209
205
|
let onPressUp = (e: PressEvent) => {
|
|
210
206
|
// If interacting with mouse, allow the user to mouse down on the trigger button,
|
|
211
207
|
// drag, and release over an item (matching native behavior).
|
|
212
208
|
if (e.pointerType === 'mouse') {
|
|
213
|
-
|
|
214
|
-
|
|
209
|
+
if (!isPressedRef.current) {
|
|
210
|
+
(e.target as HTMLElement).click();
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
// Pressing a menu item should close by default in single selection mode but not multiple
|
|
215
|
+
// selection mode, except if overridden by the closeOnSelect prop.
|
|
216
|
+
if (e.pointerType !== 'keyboard' && !isTrigger && onClose && (closeOnSelect ?? (selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key)))) {
|
|
217
|
+
onClose();
|
|
215
218
|
}
|
|
216
219
|
|
|
217
220
|
pressUpProp?.(e);
|
|
218
221
|
};
|
|
219
222
|
|
|
220
|
-
let
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
pressProp?.(e);
|
|
223
|
+
let onClick = (e: MouseEvent<FocusableElement>) => {
|
|
224
|
+
onClickProp?.(e);
|
|
225
|
+
performAction();
|
|
226
|
+
handleLinkClick(e, router, item!.props.href, item?.props.routerOptions);
|
|
227
227
|
};
|
|
228
228
|
|
|
229
229
|
let {itemProps, isFocused} = useSelectableItem({
|
|
@@ -315,7 +315,8 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
|
|
|
315
315
|
keyboardProps,
|
|
316
316
|
focusProps,
|
|
317
317
|
// Prevent DOM focus from moving on mouse down when using virtual focus or this is a submenu/subdialog trigger.
|
|
318
|
-
data.shouldUseVirtualFocus || isTrigger ? {onMouseDown: e => e.preventDefault()} : undefined
|
|
318
|
+
data.shouldUseVirtualFocus || isTrigger ? {onMouseDown: e => e.preventDefault()} : undefined,
|
|
319
|
+
isDisabled ? undefined : {onClick}
|
|
319
320
|
),
|
|
320
321
|
// 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.
|
|
321
322
|
tabIndex: itemProps.tabIndex != null && isTriggerExpanded && !data.shouldUseVirtualFocus ? -1 : itemProps.tabIndex
|
package/src/useMenuTrigger.ts
CHANGED
|
@@ -68,7 +68,11 @@ export function useMenuTrigger<T>(props: AriaMenuTriggerProps, state: MenuTrigge
|
|
|
68
68
|
switch (e.key) {
|
|
69
69
|
case 'Enter':
|
|
70
70
|
case ' ':
|
|
71
|
-
if
|
|
71
|
+
// React puts listeners on the same root, so even if propagation was stopped, immediate propagation is still possible.
|
|
72
|
+
// useTypeSelect will handle the spacebar first if it's running, so we don't want to open if it's handled it already.
|
|
73
|
+
// We use isDefaultPrevented() instead of isPropagationStopped() because createEventHandler stops propagation by default.
|
|
74
|
+
// And default prevented means that the event was handled by something else (typeahead), so we don't want to open the menu.
|
|
75
|
+
if (trigger === 'longPress' || e.isDefaultPrevented()) {
|
|
72
76
|
return;
|
|
73
77
|
}
|
|
74
78
|
// fallthrough
|
package/src/utils.ts
CHANGED