@react-spectrum/menu 3.22.11 → 3.23.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/import.mjs +6 -8
- package/dist/main.js +12 -14
- package/dist/main.js.map +1 -1
- package/dist/module.js +6 -8
- package/dist/module.js.map +1 -1
- package/dist/types/src/index.d.ts +8 -0
- package/package.json +14 -46
- package/src/index.ts +9 -9
- package/dist/ActionMenu.main.js +0 -67
- package/dist/ActionMenu.main.js.map +0 -1
- package/dist/ActionMenu.mjs +0 -62
- package/dist/ActionMenu.module.js +0 -62
- package/dist/ActionMenu.module.js.map +0 -1
- package/dist/ContextualHelpTrigger.main.js +0 -192
- package/dist/ContextualHelpTrigger.main.js.map +0 -1
- package/dist/ContextualHelpTrigger.mjs +0 -187
- package/dist/ContextualHelpTrigger.module.js +0 -187
- package/dist/ContextualHelpTrigger.module.js.map +0 -1
- package/dist/Menu.main.js +0 -235
- package/dist/Menu.main.js.map +0 -1
- package/dist/Menu.mjs +0 -229
- package/dist/Menu.module.js +0 -229
- package/dist/Menu.module.js.map +0 -1
- package/dist/MenuItem.main.js +0 -149
- package/dist/MenuItem.main.js.map +0 -1
- package/dist/MenuItem.mjs +0 -144
- package/dist/MenuItem.module.js +0 -144
- package/dist/MenuItem.module.js.map +0 -1
- package/dist/MenuSection.main.js +0 -81
- package/dist/MenuSection.main.js.map +0 -1
- package/dist/MenuSection.mjs +0 -76
- package/dist/MenuSection.module.js +0 -76
- package/dist/MenuSection.module.js.map +0 -1
- package/dist/MenuTrigger.main.js +0 -128
- package/dist/MenuTrigger.main.js.map +0 -1
- package/dist/MenuTrigger.mjs +0 -123
- package/dist/MenuTrigger.module.js +0 -123
- package/dist/MenuTrigger.module.js.map +0 -1
- package/dist/SubmenuTrigger.main.js +0 -154
- package/dist/SubmenuTrigger.main.js.map +0 -1
- package/dist/SubmenuTrigger.mjs +0 -149
- package/dist/SubmenuTrigger.module.js +0 -149
- package/dist/SubmenuTrigger.module.js.map +0 -1
- package/dist/ar-AE.main.js +0 -8
- package/dist/ar-AE.main.js.map +0 -1
- package/dist/ar-AE.mjs +0 -10
- package/dist/ar-AE.module.js +0 -10
- package/dist/ar-AE.module.js.map +0 -1
- package/dist/bg-BG.main.js +0 -8
- package/dist/bg-BG.main.js.map +0 -1
- package/dist/bg-BG.mjs +0 -10
- package/dist/bg-BG.module.js +0 -10
- package/dist/bg-BG.module.js.map +0 -1
- package/dist/context.main.js +0 -43
- package/dist/context.main.js.map +0 -1
- package/dist/context.mjs +0 -29
- package/dist/context.module.js +0 -29
- package/dist/context.module.js.map +0 -1
- package/dist/contextualhelp_vars_css.main.js +0 -23
- package/dist/contextualhelp_vars_css.main.js.map +0 -1
- package/dist/contextualhelp_vars_css.mjs +0 -25
- package/dist/contextualhelp_vars_css.module.js +0 -25
- package/dist/contextualhelp_vars_css.module.js.map +0 -1
- package/dist/cs-CZ.main.js +0 -8
- package/dist/cs-CZ.main.js.map +0 -1
- package/dist/cs-CZ.mjs +0 -10
- package/dist/cs-CZ.module.js +0 -10
- package/dist/cs-CZ.module.js.map +0 -1
- package/dist/da-DK.main.js +0 -8
- package/dist/da-DK.main.js.map +0 -1
- package/dist/da-DK.mjs +0 -10
- package/dist/da-DK.module.js +0 -10
- package/dist/da-DK.module.js.map +0 -1
- package/dist/de-DE.main.js +0 -8
- package/dist/de-DE.main.js.map +0 -1
- package/dist/de-DE.mjs +0 -10
- package/dist/de-DE.module.js +0 -10
- package/dist/de-DE.module.js.map +0 -1
- package/dist/el-GR.main.js +0 -8
- package/dist/el-GR.main.js.map +0 -1
- package/dist/el-GR.mjs +0 -10
- package/dist/el-GR.module.js +0 -10
- package/dist/el-GR.module.js.map +0 -1
- package/dist/en-US.main.js +0 -8
- package/dist/en-US.main.js.map +0 -1
- package/dist/en-US.mjs +0 -10
- package/dist/en-US.module.js +0 -10
- package/dist/en-US.module.js.map +0 -1
- package/dist/es-ES.main.js +0 -8
- package/dist/es-ES.main.js.map +0 -1
- package/dist/es-ES.mjs +0 -10
- package/dist/es-ES.module.js +0 -10
- package/dist/es-ES.module.js.map +0 -1
- package/dist/et-EE.main.js +0 -8
- package/dist/et-EE.main.js.map +0 -1
- package/dist/et-EE.mjs +0 -10
- package/dist/et-EE.module.js +0 -10
- package/dist/et-EE.module.js.map +0 -1
- package/dist/fi-FI.main.js +0 -8
- package/dist/fi-FI.main.js.map +0 -1
- package/dist/fi-FI.mjs +0 -10
- package/dist/fi-FI.module.js +0 -10
- package/dist/fi-FI.module.js.map +0 -1
- package/dist/fr-FR.main.js +0 -8
- package/dist/fr-FR.main.js.map +0 -1
- package/dist/fr-FR.mjs +0 -10
- package/dist/fr-FR.module.js +0 -10
- package/dist/fr-FR.module.js.map +0 -1
- package/dist/he-IL.main.js +0 -8
- package/dist/he-IL.main.js.map +0 -1
- package/dist/he-IL.mjs +0 -10
- package/dist/he-IL.module.js +0 -10
- package/dist/he-IL.module.js.map +0 -1
- package/dist/hr-HR.main.js +0 -8
- package/dist/hr-HR.main.js.map +0 -1
- package/dist/hr-HR.mjs +0 -10
- package/dist/hr-HR.module.js +0 -10
- package/dist/hr-HR.module.js.map +0 -1
- package/dist/hu-HU.main.js +0 -8
- package/dist/hu-HU.main.js.map +0 -1
- package/dist/hu-HU.mjs +0 -10
- package/dist/hu-HU.module.js +0 -10
- package/dist/hu-HU.module.js.map +0 -1
- package/dist/intlStrings.main.js +0 -108
- package/dist/intlStrings.main.js.map +0 -1
- package/dist/intlStrings.mjs +0 -110
- package/dist/intlStrings.module.js +0 -110
- package/dist/intlStrings.module.js.map +0 -1
- package/dist/it-IT.main.js +0 -8
- package/dist/it-IT.main.js.map +0 -1
- package/dist/it-IT.mjs +0 -10
- package/dist/it-IT.module.js +0 -10
- package/dist/it-IT.module.js.map +0 -1
- package/dist/ja-JP.main.js +0 -8
- package/dist/ja-JP.main.js.map +0 -1
- package/dist/ja-JP.mjs +0 -10
- package/dist/ja-JP.module.js +0 -10
- package/dist/ja-JP.module.js.map +0 -1
- package/dist/ko-KR.main.js +0 -8
- package/dist/ko-KR.main.js.map +0 -1
- package/dist/ko-KR.mjs +0 -10
- package/dist/ko-KR.module.js +0 -10
- package/dist/ko-KR.module.js.map +0 -1
- package/dist/lt-LT.main.js +0 -8
- package/dist/lt-LT.main.js.map +0 -1
- package/dist/lt-LT.mjs +0 -10
- package/dist/lt-LT.module.js +0 -10
- package/dist/lt-LT.module.js.map +0 -1
- package/dist/lv-LV.main.js +0 -8
- package/dist/lv-LV.main.js.map +0 -1
- package/dist/lv-LV.mjs +0 -10
- package/dist/lv-LV.module.js +0 -10
- package/dist/lv-LV.module.js.map +0 -1
- package/dist/menu.2ec1fdaf.css +0 -570
- package/dist/menu.2ec1fdaf.css.map +0 -1
- package/dist/menu.5b49954a.css +0 -30
- package/dist/menu.5b49954a.css.map +0 -1
- package/dist/menu_vars_css.main.js +0 -177
- package/dist/menu_vars_css.main.js.map +0 -1
- package/dist/menu_vars_css.mjs +0 -179
- package/dist/menu_vars_css.module.js +0 -179
- package/dist/menu_vars_css.module.js.map +0 -1
- package/dist/nb-NO.main.js +0 -8
- package/dist/nb-NO.main.js.map +0 -1
- package/dist/nb-NO.mjs +0 -10
- package/dist/nb-NO.module.js +0 -10
- package/dist/nb-NO.module.js.map +0 -1
- package/dist/nl-NL.main.js +0 -8
- package/dist/nl-NL.main.js.map +0 -1
- package/dist/nl-NL.mjs +0 -10
- package/dist/nl-NL.module.js +0 -10
- package/dist/nl-NL.module.js.map +0 -1
- package/dist/pl-PL.main.js +0 -8
- package/dist/pl-PL.main.js.map +0 -1
- package/dist/pl-PL.mjs +0 -10
- package/dist/pl-PL.module.js +0 -10
- package/dist/pl-PL.module.js.map +0 -1
- package/dist/pt-BR.main.js +0 -8
- package/dist/pt-BR.main.js.map +0 -1
- package/dist/pt-BR.mjs +0 -10
- package/dist/pt-BR.module.js +0 -10
- package/dist/pt-BR.module.js.map +0 -1
- package/dist/pt-PT.main.js +0 -8
- package/dist/pt-PT.main.js.map +0 -1
- package/dist/pt-PT.mjs +0 -10
- package/dist/pt-PT.module.js +0 -10
- package/dist/pt-PT.module.js.map +0 -1
- package/dist/ro-RO.main.js +0 -8
- package/dist/ro-RO.main.js.map +0 -1
- package/dist/ro-RO.mjs +0 -10
- package/dist/ro-RO.module.js +0 -10
- package/dist/ro-RO.module.js.map +0 -1
- package/dist/ru-RU.main.js +0 -8
- package/dist/ru-RU.main.js.map +0 -1
- package/dist/ru-RU.mjs +0 -10
- package/dist/ru-RU.module.js +0 -10
- package/dist/ru-RU.module.js.map +0 -1
- package/dist/sk-SK.main.js +0 -8
- package/dist/sk-SK.main.js.map +0 -1
- package/dist/sk-SK.mjs +0 -10
- package/dist/sk-SK.module.js +0 -10
- package/dist/sk-SK.module.js.map +0 -1
- package/dist/sl-SI.main.js +0 -8
- package/dist/sl-SI.main.js.map +0 -1
- package/dist/sl-SI.mjs +0 -10
- package/dist/sl-SI.module.js +0 -10
- package/dist/sl-SI.module.js.map +0 -1
- package/dist/sr-SP.main.js +0 -8
- package/dist/sr-SP.main.js.map +0 -1
- package/dist/sr-SP.mjs +0 -10
- package/dist/sr-SP.module.js +0 -10
- package/dist/sr-SP.module.js.map +0 -1
- package/dist/sv-SE.main.js +0 -8
- package/dist/sv-SE.main.js.map +0 -1
- package/dist/sv-SE.mjs +0 -10
- package/dist/sv-SE.module.js +0 -10
- package/dist/sv-SE.module.js.map +0 -1
- package/dist/tr-TR.main.js +0 -8
- package/dist/tr-TR.main.js.map +0 -1
- package/dist/tr-TR.mjs +0 -10
- package/dist/tr-TR.module.js +0 -10
- package/dist/tr-TR.module.js.map +0 -1
- package/dist/types.d.ts +0 -43
- package/dist/types.d.ts.map +0 -1
- package/dist/uk-UA.main.js +0 -8
- package/dist/uk-UA.main.js.map +0 -1
- package/dist/uk-UA.mjs +0 -10
- package/dist/uk-UA.module.js +0 -10
- package/dist/uk-UA.module.js.map +0 -1
- package/dist/zh-CN.main.js +0 -8
- package/dist/zh-CN.main.js.map +0 -1
- package/dist/zh-CN.mjs +0 -10
- package/dist/zh-CN.module.js +0 -10
- package/dist/zh-CN.module.js.map +0 -1
- package/dist/zh-TW.main.js +0 -8
- package/dist/zh-TW.main.js.map +0 -1
- package/dist/zh-TW.mjs +0 -10
- package/dist/zh-TW.module.js +0 -10
- package/dist/zh-TW.module.js.map +0 -1
- package/src/ActionMenu.tsx +0 -58
- package/src/ContextualHelpTrigger.tsx +0 -194
- package/src/Menu.tsx +0 -228
- package/src/MenuItem.tsx +0 -159
- package/src/MenuSection.tsx +0 -100
- package/src/MenuTrigger.tsx +0 -125
- package/src/SubmenuTrigger.tsx +0 -154
- package/src/context.ts +0 -63
- package/src/overlays.css +0 -32
- package/src/useCloseOnScroll.ts +0 -65
package/dist/Menu.module.js
DELETED
|
@@ -1,229 +0,0 @@
|
|
|
1
|
-
import $4oXwn$intlStringsmodulejs from "./intlStrings.module.js";
|
|
2
|
-
import {MenuContext as $d94604d52c3e3feb$export$c7e742effb1c51e2, MenuStateContext as $d94604d52c3e3feb$export$24aad8519b95b41b, useMenuStateContext as $d94604d52c3e3feb$export$efa3856fc0e85e7f} from "./context.module.js";
|
|
3
|
-
import {MenuItem as $48fb8f5e1202c980$export$2ce376c2cc3355c8} from "./MenuItem.module.js";
|
|
4
|
-
import {MenuSection as $b966e606890cc5ca$export$4b1545b4f2016d26} from "./MenuSection.module.js";
|
|
5
|
-
import "./menu.2ec1fdaf.css";
|
|
6
|
-
import $4oXwn$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
|
|
7
|
-
import {ActionButton as $4oXwn$ActionButton} from "@react-spectrum/button";
|
|
8
|
-
import $4oXwn$spectrumiconsuiArrowDownSmall from "@spectrum-icons/ui/ArrowDownSmall";
|
|
9
|
-
import {useDOMRef as $4oXwn$useDOMRef, useStyleProps as $4oXwn$useStyleProps, classNames as $4oXwn$classNames, useIsMobileDevice as $4oXwn$useIsMobileDevice} from "@react-spectrum/utils";
|
|
10
|
-
import {FocusScope as $4oXwn$FocusScope} from "@react-aria/focus";
|
|
11
|
-
import {mergeProps as $4oXwn$mergeProps, useSyncRef as $4oXwn$useSyncRef, useLayoutEffect as $4oXwn$useLayoutEffect, useSlotId as $4oXwn$useSlotId} from "@react-aria/utils";
|
|
12
|
-
import $4oXwn$react, {useContext as $4oXwn$useContext, useState as $4oXwn$useState, useRef as $4oXwn$useRef, useEffect as $4oXwn$useEffect} from "react";
|
|
13
|
-
import {useTreeState as $4oXwn$useTreeState} from "@react-stately/tree";
|
|
14
|
-
import {useLocalizedStringFormatter as $4oXwn$useLocalizedStringFormatter, useLocale as $4oXwn$useLocale} from "@react-aria/i18n";
|
|
15
|
-
import {useMenu as $4oXwn$useMenu} from "@react-aria/menu";
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
function $parcel$interopDefault(a) {
|
|
19
|
-
return a && a.__esModule ? a.default : a;
|
|
20
|
-
}
|
|
21
|
-
/*
|
|
22
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
23
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
24
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
25
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
26
|
-
*
|
|
27
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
28
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
29
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
30
|
-
* governing permissions and limitations under the License.
|
|
31
|
-
*/
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
const $49b26f4b606348f6$export$d9b273488cd8ce6f = /*#__PURE__*/ (0, $4oXwn$react).forwardRef(function Menu(props, ref) {
|
|
46
|
-
let isSubmenu = true;
|
|
47
|
-
let contextProps = (0, $4oXwn$useContext)((0, $d94604d52c3e3feb$export$c7e742effb1c51e2));
|
|
48
|
-
let parentMenuContext = (0, $d94604d52c3e3feb$export$efa3856fc0e85e7f)();
|
|
49
|
-
let { rootMenuTriggerState: rootMenuTriggerState, state: parentMenuTreeState } = parentMenuContext || {
|
|
50
|
-
rootMenuTriggerState: contextProps.state
|
|
51
|
-
};
|
|
52
|
-
if (!parentMenuContext) isSubmenu = false;
|
|
53
|
-
let completeProps = {
|
|
54
|
-
...(0, $4oXwn$mergeProps)(contextProps, props)
|
|
55
|
-
};
|
|
56
|
-
let domRef = (0, $4oXwn$useDOMRef)(ref);
|
|
57
|
-
let [popoverContainer, setPopoverContainer] = (0, $4oXwn$useState)(null);
|
|
58
|
-
let trayContainerRef = (0, $4oXwn$useRef)(null);
|
|
59
|
-
let state = (0, $4oXwn$useTreeState)(completeProps);
|
|
60
|
-
let submenuRef = (0, $4oXwn$useRef)(null);
|
|
61
|
-
let { menuProps: menuProps } = (0, $4oXwn$useMenu)(completeProps, state, domRef);
|
|
62
|
-
let { styleProps: styleProps } = (0, $4oXwn$useStyleProps)(completeProps);
|
|
63
|
-
(0, $4oXwn$useSyncRef)(contextProps, domRef);
|
|
64
|
-
let [leftOffset, setLeftOffset] = (0, $4oXwn$useState)({
|
|
65
|
-
left: 0
|
|
66
|
-
});
|
|
67
|
-
let prevPopoverContainer = (0, $4oXwn$useRef)(null);
|
|
68
|
-
(0, $4oXwn$useLayoutEffect)(()=>{
|
|
69
|
-
if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {
|
|
70
|
-
prevPopoverContainer.current = popoverContainer;
|
|
71
|
-
let { left: left } = popoverContainer.getBoundingClientRect();
|
|
72
|
-
setLeftOffset({
|
|
73
|
-
left: -1 * left
|
|
74
|
-
});
|
|
75
|
-
}
|
|
76
|
-
}, [
|
|
77
|
-
leftOffset,
|
|
78
|
-
popoverContainer
|
|
79
|
-
]);
|
|
80
|
-
var _contextProps_submenuLevel;
|
|
81
|
-
let menuLevel = (_contextProps_submenuLevel = contextProps.submenuLevel) !== null && _contextProps_submenuLevel !== void 0 ? _contextProps_submenuLevel : -1;
|
|
82
|
-
let nextMenuLevelKey = rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.expandedKeysStack[menuLevel + 1];
|
|
83
|
-
let hasOpenSubmenu = false;
|
|
84
|
-
if (nextMenuLevelKey != null) {
|
|
85
|
-
let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);
|
|
86
|
-
hasOpenSubmenu = nextMenuLevel != null;
|
|
87
|
-
}
|
|
88
|
-
return /*#__PURE__*/ (0, $4oXwn$react).createElement((0, $d94604d52c3e3feb$export$24aad8519b95b41b).Provider, {
|
|
89
|
-
value: {
|
|
90
|
-
popoverContainer: popoverContainer,
|
|
91
|
-
trayContainerRef: trayContainerRef,
|
|
92
|
-
menu: domRef,
|
|
93
|
-
submenu: submenuRef,
|
|
94
|
-
rootMenuTriggerState: rootMenuTriggerState,
|
|
95
|
-
state: state
|
|
96
|
-
}
|
|
97
|
-
}, /*#__PURE__*/ (0, $4oXwn$react).createElement("div", {
|
|
98
|
-
style: {
|
|
99
|
-
height: hasOpenSubmenu ? '100%' : undefined
|
|
100
|
-
},
|
|
101
|
-
ref: trayContainerRef
|
|
102
|
-
}), /*#__PURE__*/ (0, $4oXwn$react).createElement((0, $4oXwn$FocusScope), null, /*#__PURE__*/ (0, $4oXwn$react).createElement($49b26f4b606348f6$export$3dfe97b5c32d8d8c, {
|
|
103
|
-
onBackButtonPress: contextProps.onBackButtonPress,
|
|
104
|
-
hasOpenSubmenu: hasOpenSubmenu,
|
|
105
|
-
isSubmenu: isSubmenu,
|
|
106
|
-
parentMenuTreeState: parentMenuTreeState,
|
|
107
|
-
rootMenuTriggerState: rootMenuTriggerState,
|
|
108
|
-
menuRef: domRef
|
|
109
|
-
}, /*#__PURE__*/ (0, $4oXwn$react).createElement("div", {
|
|
110
|
-
...menuProps,
|
|
111
|
-
style: (0, $4oXwn$mergeProps)(styleProps.style, menuProps.style),
|
|
112
|
-
ref: domRef,
|
|
113
|
-
className: (0, $4oXwn$classNames)((0, ($parcel$interopDefault($4oXwn$menu_vars_cssmodulejs))), 'spectrum-Menu', styleProps.className)
|
|
114
|
-
}, [
|
|
115
|
-
...state.collection
|
|
116
|
-
].map((item)=>{
|
|
117
|
-
if (item.type === 'section') return /*#__PURE__*/ (0, $4oXwn$react).createElement((0, $b966e606890cc5ca$export$4b1545b4f2016d26), {
|
|
118
|
-
key: item.key,
|
|
119
|
-
item: item,
|
|
120
|
-
state: state
|
|
121
|
-
});
|
|
122
|
-
let menuItem = /*#__PURE__*/ (0, $4oXwn$react).createElement((0, $48fb8f5e1202c980$export$2ce376c2cc3355c8), {
|
|
123
|
-
key: item.key,
|
|
124
|
-
item: item,
|
|
125
|
-
state: state
|
|
126
|
-
});
|
|
127
|
-
if (item.wrapper) menuItem = item.wrapper(menuItem);
|
|
128
|
-
return menuItem;
|
|
129
|
-
}))), (rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.isOpen) && /*#__PURE__*/ (0, $4oXwn$react).createElement("div", {
|
|
130
|
-
ref: setPopoverContainer,
|
|
131
|
-
style: {
|
|
132
|
-
width: '100vw',
|
|
133
|
-
position: 'absolute',
|
|
134
|
-
top: -5,
|
|
135
|
-
...leftOffset
|
|
136
|
-
}
|
|
137
|
-
})));
|
|
138
|
-
});
|
|
139
|
-
function $49b26f4b606348f6$export$3dfe97b5c32d8d8c(props) {
|
|
140
|
-
var _parentMenuTreeState_collection_getItem;
|
|
141
|
-
let { children: children, isSubmenu: isSubmenu, hasOpenSubmenu: hasOpenSubmenu, parentMenuTreeState: parentMenuTreeState, rootMenuTriggerState: rootMenuTriggerState, onBackButtonPress: onBackButtonPress, wrapperKeyDown: wrapperKeyDown, menuRef: menuRef } = props;
|
|
142
|
-
let stringFormatter = (0, $4oXwn$useLocalizedStringFormatter)((0, ($parcel$interopDefault($4oXwn$intlStringsmodulejs))), '@react-spectrum/menu');
|
|
143
|
-
let lastKey = rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.expandedKeysStack.slice(-1)[0];
|
|
144
|
-
let backButtonText = '';
|
|
145
|
-
var _parentMenuTreeState_collection_getItem_textValue;
|
|
146
|
-
if (lastKey != null) backButtonText = (_parentMenuTreeState_collection_getItem_textValue = parentMenuTreeState === null || parentMenuTreeState === void 0 ? void 0 : (_parentMenuTreeState_collection_getItem = parentMenuTreeState.collection.getItem(lastKey)) === null || _parentMenuTreeState_collection_getItem === void 0 ? void 0 : _parentMenuTreeState_collection_getItem.textValue) !== null && _parentMenuTreeState_collection_getItem_textValue !== void 0 ? _parentMenuTreeState_collection_getItem_textValue : '';
|
|
147
|
-
let backButtonLabel = stringFormatter.format('backButton', {
|
|
148
|
-
prevMenuButton: backButtonText !== null && backButtonText !== void 0 ? backButtonText : ''
|
|
149
|
-
});
|
|
150
|
-
let headingId = (0, $4oXwn$useSlotId)();
|
|
151
|
-
let isMobile = (0, $4oXwn$useIsMobileDevice)();
|
|
152
|
-
let { direction: direction } = (0, $4oXwn$useLocale)();
|
|
153
|
-
let [traySubmenuAnimation, setTraySubmenuAnimation] = (0, $4oXwn$useState)('');
|
|
154
|
-
(0, $4oXwn$useLayoutEffect)(()=>{
|
|
155
|
-
if (!hasOpenSubmenu) setTraySubmenuAnimation('spectrum-TraySubmenu-enter');
|
|
156
|
-
}, [
|
|
157
|
-
hasOpenSubmenu,
|
|
158
|
-
isMobile
|
|
159
|
-
]);
|
|
160
|
-
let timeoutRef = (0, $4oXwn$useRef)(null);
|
|
161
|
-
let handleBackButtonPress = ()=>{
|
|
162
|
-
setTraySubmenuAnimation('spectrum-TraySubmenu-exit');
|
|
163
|
-
timeoutRef.current = setTimeout(()=>{
|
|
164
|
-
onBackButtonPress === null || onBackButtonPress === void 0 ? void 0 : onBackButtonPress();
|
|
165
|
-
}, 220); // Matches transition duration
|
|
166
|
-
};
|
|
167
|
-
(0, $4oXwn$useEffect)(()=>{
|
|
168
|
-
return ()=>{
|
|
169
|
-
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
170
|
-
};
|
|
171
|
-
}, []);
|
|
172
|
-
// When opening submenu in tray, focus the first item in the submenu after animation completes
|
|
173
|
-
// This fixes an issue with iOS VO where the closed submenu was getting focus
|
|
174
|
-
let focusTimeoutRef = (0, $4oXwn$useRef)(null);
|
|
175
|
-
(0, $4oXwn$useEffect)(()=>{
|
|
176
|
-
if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === 'spectrum-TraySubmenu-enter') focusTimeoutRef.current = setTimeout(()=>{
|
|
177
|
-
var _menuRef_current;
|
|
178
|
-
let firstItem = menuRef === null || menuRef === void 0 ? void 0 : (_menuRef_current = menuRef.current) === null || _menuRef_current === void 0 ? void 0 : _menuRef_current.querySelector('[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]');
|
|
179
|
-
firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
|
|
180
|
-
}, 220);
|
|
181
|
-
return ()=>{
|
|
182
|
-
if (focusTimeoutRef.current) clearTimeout(focusTimeoutRef.current);
|
|
183
|
-
};
|
|
184
|
-
}, [
|
|
185
|
-
hasOpenSubmenu,
|
|
186
|
-
isMobile,
|
|
187
|
-
isSubmenu,
|
|
188
|
-
menuRef,
|
|
189
|
-
traySubmenuAnimation
|
|
190
|
-
]);
|
|
191
|
-
return /*#__PURE__*/ (0, $4oXwn$react).createElement((0, $4oXwn$react).Fragment, null, /*#__PURE__*/ (0, $4oXwn$react).createElement("div", {
|
|
192
|
-
role: headingId ? 'dialog' : undefined,
|
|
193
|
-
"aria-labelledby": headingId,
|
|
194
|
-
"aria-hidden": isMobile && hasOpenSubmenu,
|
|
195
|
-
"data-testid": "menu-wrapper",
|
|
196
|
-
className: (0, $4oXwn$classNames)((0, ($parcel$interopDefault($4oXwn$menu_vars_cssmodulejs))), 'spectrum-Menu-wrapper', {
|
|
197
|
-
'spectrum-Menu-wrapper--isMobile': isMobile,
|
|
198
|
-
'is-expanded': hasOpenSubmenu,
|
|
199
|
-
[traySubmenuAnimation]: isMobile
|
|
200
|
-
})
|
|
201
|
-
}, /*#__PURE__*/ (0, $4oXwn$react).createElement("div", {
|
|
202
|
-
role: "presentation",
|
|
203
|
-
className: (0, $4oXwn$classNames)((0, ($parcel$interopDefault($4oXwn$menu_vars_cssmodulejs))), 'spectrum-Submenu-wrapper', {
|
|
204
|
-
'spectrum-Submenu-wrapper--isMobile': isMobile
|
|
205
|
-
}),
|
|
206
|
-
onKeyDown: wrapperKeyDown
|
|
207
|
-
}, isMobile && isSubmenu && !hasOpenSubmenu && /*#__PURE__*/ (0, $4oXwn$react).createElement("div", {
|
|
208
|
-
className: (0, $4oXwn$classNames)((0, ($parcel$interopDefault($4oXwn$menu_vars_cssmodulejs))), 'spectrum-Submenu-headingWrapper')
|
|
209
|
-
}, /*#__PURE__*/ (0, $4oXwn$react).createElement((0, $4oXwn$ActionButton), {
|
|
210
|
-
"aria-label": backButtonLabel,
|
|
211
|
-
isQuiet: true,
|
|
212
|
-
onPress: handleBackButtonPress
|
|
213
|
-
}, direction === 'rtl' ? /*#__PURE__*/ (0, $4oXwn$react).createElement((0, $4oXwn$spectrumiconsuiArrowDownSmall), {
|
|
214
|
-
UNSAFE_style: {
|
|
215
|
-
rotate: '270deg'
|
|
216
|
-
}
|
|
217
|
-
}) : /*#__PURE__*/ (0, $4oXwn$react).createElement((0, $4oXwn$spectrumiconsuiArrowDownSmall), {
|
|
218
|
-
UNSAFE_style: {
|
|
219
|
-
rotate: '90deg'
|
|
220
|
-
}
|
|
221
|
-
})), /*#__PURE__*/ (0, $4oXwn$react).createElement("h1", {
|
|
222
|
-
id: headingId,
|
|
223
|
-
className: (0, $4oXwn$classNames)((0, ($parcel$interopDefault($4oXwn$menu_vars_cssmodulejs))), 'spectrum-Submenu-heading')
|
|
224
|
-
}, backButtonText)), children)));
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
export {$49b26f4b606348f6$export$d9b273488cd8ce6f as Menu, $49b26f4b606348f6$export$3dfe97b5c32d8d8c as TrayHeaderWrapper};
|
|
229
|
-
//# sourceMappingURL=Menu.module.js.map
|
package/dist/Menu.module.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/menu/src/Menu.tsx"],"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 {ActionButton} from '@react-spectrum/button';\nimport ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';\nimport {classNames, useDOMRef, useIsMobileDevice, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {FocusScope} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {MenuContext, MenuStateContext, useMenuStateContext} from './context';\nimport {MenuItem} from './MenuItem';\nimport {MenuSection} from './MenuSection';\nimport {mergeProps, useLayoutEffect, useSlotId, useSyncRef} from '@react-aria/utils';\nimport React, {KeyboardEventHandler, ReactElement, ReactNode, RefObject, useContext, useEffect, useRef, useState} from 'react';\nimport {RootMenuTriggerState} from '@react-stately/menu';\nimport {SpectrumMenuProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {TreeState, useTreeState} from '@react-stately/tree';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenu} from '@react-aria/menu';\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nexport const Menu = React.forwardRef(function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n let isSubmenu = true;\n let contextProps = useContext(MenuContext);\n let parentMenuContext = useMenuStateContext();\n let {rootMenuTriggerState, state: parentMenuTreeState} = parentMenuContext || {rootMenuTriggerState: contextProps.state};\n if (!parentMenuContext) {\n isSubmenu = false;\n }\n let completeProps = {\n ...mergeProps(contextProps, props)\n };\n let domRef = useDOMRef(ref);\n let [popoverContainer, setPopoverContainer] = useState<HTMLElement | null>(null);\n let trayContainerRef = useRef<HTMLDivElement | null>(null);\n let state = useTreeState(completeProps);\n let submenuRef = useRef<HTMLDivElement>(null);\n let {menuProps} = useMenu(completeProps, state, domRef);\n let {styleProps} = useStyleProps(completeProps);\n useSyncRef(contextProps, domRef);\n let [leftOffset, setLeftOffset] = useState({left: 0});\n let prevPopoverContainer = useRef<HTMLElement | null>(null);\n\n useLayoutEffect(() => {\n if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {\n prevPopoverContainer.current = popoverContainer;\n let {left} = popoverContainer.getBoundingClientRect();\n setLeftOffset({left: -1 * left});\n }\n }, [leftOffset, popoverContainer]);\n\n let menuLevel = contextProps.submenuLevel ?? -1;\n let nextMenuLevelKey = rootMenuTriggerState?.expandedKeysStack[menuLevel + 1];\n let hasOpenSubmenu = false;\n if (nextMenuLevelKey != null) {\n let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);\n hasOpenSubmenu = nextMenuLevel != null;\n }\n\n return (\n <MenuStateContext.Provider value={{popoverContainer, trayContainerRef, menu: domRef, submenu: submenuRef, rootMenuTriggerState, state}}>\n <div style={{height: hasOpenSubmenu ? '100%' : undefined}} ref={trayContainerRef} />\n <FocusScope>\n <TrayHeaderWrapper\n onBackButtonPress={contextProps.onBackButtonPress}\n hasOpenSubmenu={hasOpenSubmenu}\n isSubmenu={isSubmenu}\n parentMenuTreeState={parentMenuTreeState}\n rootMenuTriggerState={rootMenuTriggerState}\n menuRef={domRef}>\n <div\n {...menuProps}\n style={mergeProps(styleProps.style, menuProps.style)}\n ref={domRef}\n className={\n classNames(\n styles,\n 'spectrum-Menu',\n styleProps.className\n )\n }>\n {[...state.collection].map(item => {\n if (item.type === 'section') {\n return (\n <MenuSection\n key={item.key}\n item={item}\n state={state} />\n );\n }\n\n let menuItem = (\n <MenuItem\n key={item.key}\n item={item}\n state={state} />\n );\n\n if (item.wrapper) {\n menuItem = item.wrapper(menuItem);\n }\n\n return menuItem;\n })}\n </div>\n </TrayHeaderWrapper>\n {rootMenuTriggerState?.isOpen && <div ref={setPopoverContainer} style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}} /> }\n </FocusScope>\n </MenuStateContext.Provider>\n );\n}) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\nexport function TrayHeaderWrapper(props: {\n children: ReactNode,\n isSubmenu?: boolean,\n hasOpenSubmenu?: boolean,\n parentMenuTreeState?: TreeState<any>,\n rootMenuTriggerState?: RootMenuTriggerState,\n onBackButtonPress?: (() => void),\n wrapperKeyDown?: KeyboardEventHandler<HTMLDivElement> | undefined,\n menuRef?: RefObject<HTMLDivElement | null>\n}): ReactNode {\n let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n let lastKey = rootMenuTriggerState?.expandedKeysStack.slice(-1)[0];\n let backButtonText = '';\n if (lastKey != null) {\n backButtonText = parentMenuTreeState?.collection.getItem(lastKey)?.textValue ?? '';\n }\n let backButtonLabel = stringFormatter.format('backButton', {\n prevMenuButton: backButtonText ?? ''\n });\n let headingId = useSlotId();\n let isMobile = useIsMobileDevice();\n let {direction} = useLocale();\n\n let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n useLayoutEffect(() => {\n if (!hasOpenSubmenu) {\n setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n }\n }, [hasOpenSubmenu, isMobile]);\n\n let timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n let handleBackButtonPress = () => {\n setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n timeoutRef.current = setTimeout(() => {\n onBackButtonPress?.();\n }, 220); // Matches transition duration\n };\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, []);\n\n // When opening submenu in tray, focus the first item in the submenu after animation completes\n // This fixes an issue with iOS VO where the closed submenu was getting focus\n let focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n useEffect(() => {\n if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === 'spectrum-TraySubmenu-enter') {\n focusTimeoutRef.current = setTimeout(() => {\n let firstItem = menuRef?.current?.querySelector('[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]') as HTMLElement;\n firstItem?.focus();\n }, 220);\n }\n return () => {\n if (focusTimeoutRef.current) {\n clearTimeout(focusTimeoutRef.current);\n }\n };\n }, [hasOpenSubmenu, isMobile, isSubmenu, menuRef, traySubmenuAnimation]);\n\n return (\n <>\n <div\n role={headingId ? 'dialog' : undefined}\n aria-labelledby={headingId}\n aria-hidden={isMobile && hasOpenSubmenu}\n data-testid=\"menu-wrapper\"\n className={\n classNames(\n styles,\n 'spectrum-Menu-wrapper',\n {\n 'spectrum-Menu-wrapper--isMobile': isMobile,\n 'is-expanded': hasOpenSubmenu,\n [traySubmenuAnimation]: isMobile\n }\n )\n }>\n <div role=\"presentation\" className={classNames(styles, 'spectrum-Submenu-wrapper', {'spectrum-Submenu-wrapper--isMobile': isMobile})} onKeyDown={wrapperKeyDown}>\n {isMobile && isSubmenu && !hasOpenSubmenu && (\n <div className={classNames(styles, 'spectrum-Submenu-headingWrapper')}>\n <ActionButton\n aria-label={backButtonLabel}\n isQuiet\n onPress={handleBackButtonPress}>\n {/* We don't have a ArrowLeftSmall so make due with ArrowDownSmall and transforms */}\n {direction === 'rtl' ? <ArrowDownSmall UNSAFE_style={{rotate: '270deg'}} /> : <ArrowDownSmall UNSAFE_style={{rotate: '90deg'}} />}\n </ActionButton>\n <h1 id={headingId} className={classNames(styles, 'spectrum-Submenu-heading')}>{backButtonText}</h1>\n </div>\n )}\n {children}\n </div>\n </div>\n </>\n );\n}\n"],"names":[],"version":3,"file":"Menu.module.js.map"}
|
package/dist/MenuItem.main.js
DELETED
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
var $2f9ceea24fba5443$exports = require("./intlStrings.main.js");
|
|
2
|
-
require("./menu.2ec1fdaf.css");
|
|
3
|
-
var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
|
|
4
|
-
var $cac834c4bc0a51d3$exports = require("./context.main.js");
|
|
5
|
-
var $8PAEC$spectrumiconsuiCheckmarkMedium = require("@spectrum-icons/ui/CheckmarkMedium");
|
|
6
|
-
var $8PAEC$spectrumiconsworkflowChevronLeft = require("@spectrum-icons/workflow/ChevronLeft");
|
|
7
|
-
var $8PAEC$spectrumiconsworkflowChevronRight = require("@spectrum-icons/workflow/ChevronRight");
|
|
8
|
-
var $8PAEC$reactspectrumutils = require("@react-spectrum/utils");
|
|
9
|
-
var $8PAEC$reactariafocus = require("@react-aria/focus");
|
|
10
|
-
var $8PAEC$reactspectrumlayout = require("@react-spectrum/layout");
|
|
11
|
-
var $8PAEC$spectrumiconsworkflowInfoOutline = require("@spectrum-icons/workflow/InfoOutline");
|
|
12
|
-
var $8PAEC$reactariautils = require("@react-aria/utils");
|
|
13
|
-
var $8PAEC$react = require("react");
|
|
14
|
-
var $8PAEC$reactspectrumtext = require("@react-spectrum/text");
|
|
15
|
-
var $8PAEC$reactariai18n = require("@react-aria/i18n");
|
|
16
|
-
var $8PAEC$reactariamenu = require("@react-aria/menu");
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
function $parcel$interopDefault(a) {
|
|
20
|
-
return a && a.__esModule ? a.default : a;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
function $parcel$export(e, n, v, s) {
|
|
24
|
-
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
$parcel$export(module.exports, "MenuItem", () => $1d718563708db5b5$export$2ce376c2cc3355c8);
|
|
28
|
-
/*
|
|
29
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
30
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
31
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
32
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
33
|
-
*
|
|
34
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
35
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
36
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
37
|
-
* governing permissions and limitations under the License.
|
|
38
|
-
*/
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
function $1d718563708db5b5$export$2ce376c2cc3355c8(props) {
|
|
54
|
-
let { item: item, state: state, isVirtualized: isVirtualized } = props;
|
|
55
|
-
let { closeOnSelect: closeOnSelect } = (0, $cac834c4bc0a51d3$exports.useMenuContext)();
|
|
56
|
-
let { rendered: rendered, key: key } = item;
|
|
57
|
-
let stringFormatter = (0, $8PAEC$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($2f9ceea24fba5443$exports))), '@react-spectrum/menu');
|
|
58
|
-
let { direction: direction } = (0, $8PAEC$reactariai18n.useLocale)();
|
|
59
|
-
let submenuTriggerContext = (0, $cac834c4bc0a51d3$exports.useSubmenuTriggerContext)();
|
|
60
|
-
let { triggerRef: triggerRef, ...submenuTriggerProps } = submenuTriggerContext || {};
|
|
61
|
-
let isSubmenuTrigger = !!submenuTriggerContext;
|
|
62
|
-
let isUnavailable;
|
|
63
|
-
let ElementType = item.props.href ? 'a' : 'div';
|
|
64
|
-
if (isSubmenuTrigger) isUnavailable = submenuTriggerContext.isUnavailable;
|
|
65
|
-
let isDisabled = state.disabledKeys.has(key);
|
|
66
|
-
let isContextualHelpTrigger = isSubmenuTrigger && isUnavailable !== undefined;
|
|
67
|
-
let isSelectable = (isContextualHelpTrigger ? !isUnavailable : !isSubmenuTrigger) && state.selectionManager.selectionMode !== 'none';
|
|
68
|
-
let isSelected = isSelectable && state.selectionManager.isSelected(key);
|
|
69
|
-
let itemref = (0, $8PAEC$react.useRef)(null);
|
|
70
|
-
let ref = (0, $8PAEC$reactariautils.useObjectRef)((0, $8PAEC$react.useMemo)(()=>(0, $8PAEC$reactariautils.mergeRefs)(itemref, triggerRef), [
|
|
71
|
-
itemref,
|
|
72
|
-
triggerRef
|
|
73
|
-
]));
|
|
74
|
-
let { menuItemProps: menuItemProps, labelProps: labelProps, descriptionProps: descriptionProps, keyboardShortcutProps: keyboardShortcutProps } = (0, $8PAEC$reactariamenu.useMenuItem)({
|
|
75
|
-
isSelected: isSelected,
|
|
76
|
-
isDisabled: isDisabled,
|
|
77
|
-
'aria-label': item['aria-label'],
|
|
78
|
-
key: key,
|
|
79
|
-
closeOnSelect: closeOnSelect,
|
|
80
|
-
isVirtualized: isVirtualized,
|
|
81
|
-
...submenuTriggerProps
|
|
82
|
-
}, state, ref);
|
|
83
|
-
let endId = (0, $8PAEC$reactariautils.useSlotId)();
|
|
84
|
-
let endProps = {};
|
|
85
|
-
if (endId) {
|
|
86
|
-
endProps.id = endId;
|
|
87
|
-
menuItemProps['aria-describedby'] = [
|
|
88
|
-
menuItemProps['aria-describedby'],
|
|
89
|
-
endId
|
|
90
|
-
].filter(Boolean).join(' ');
|
|
91
|
-
}
|
|
92
|
-
let contents = typeof rendered === 'string' ? /*#__PURE__*/ (0, ($parcel$interopDefault($8PAEC$react))).createElement((0, $8PAEC$reactspectrumtext.Text), null, rendered) : rendered;
|
|
93
|
-
return /*#__PURE__*/ (0, ($parcel$interopDefault($8PAEC$react))).createElement((0, $8PAEC$reactariafocus.FocusRing), {
|
|
94
|
-
focusRingClass: (0, $8PAEC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), 'focus-ring')
|
|
95
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($8PAEC$react))).createElement(ElementType, {
|
|
96
|
-
...menuItemProps,
|
|
97
|
-
ref: ref,
|
|
98
|
-
className: (0, $8PAEC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), 'spectrum-Menu-item', {
|
|
99
|
-
'is-disabled': isDisabled,
|
|
100
|
-
'is-selected': isSelected,
|
|
101
|
-
'is-selectable': isSelectable,
|
|
102
|
-
'is-open': submenuTriggerProps.isOpen
|
|
103
|
-
})
|
|
104
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($8PAEC$react))).createElement((0, $8PAEC$reactspectrumlayout.Grid), {
|
|
105
|
-
UNSAFE_className: (0, $8PAEC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), 'spectrum-Menu-itemGrid')
|
|
106
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($8PAEC$react))).createElement((0, $8PAEC$reactspectrumutils.ClearSlots), null, /*#__PURE__*/ (0, ($parcel$interopDefault($8PAEC$react))).createElement((0, $8PAEC$reactspectrumutils.SlotProvider), {
|
|
107
|
-
slots: {
|
|
108
|
-
text: {
|
|
109
|
-
UNSAFE_className: (0, ($parcel$interopDefault($3deee0fd2b46e64f$exports)))['spectrum-Menu-itemLabel'],
|
|
110
|
-
...labelProps
|
|
111
|
-
},
|
|
112
|
-
end: {
|
|
113
|
-
UNSAFE_className: (0, ($parcel$interopDefault($3deee0fd2b46e64f$exports)))['spectrum-Menu-end'],
|
|
114
|
-
...endProps
|
|
115
|
-
},
|
|
116
|
-
icon: {
|
|
117
|
-
UNSAFE_className: (0, ($parcel$interopDefault($3deee0fd2b46e64f$exports)))['spectrum-Menu-icon'],
|
|
118
|
-
size: 'S'
|
|
119
|
-
},
|
|
120
|
-
description: {
|
|
121
|
-
UNSAFE_className: (0, ($parcel$interopDefault($3deee0fd2b46e64f$exports)))['spectrum-Menu-description'],
|
|
122
|
-
...descriptionProps
|
|
123
|
-
},
|
|
124
|
-
keyboard: {
|
|
125
|
-
UNSAFE_className: (0, ($parcel$interopDefault($3deee0fd2b46e64f$exports)))['spectrum-Menu-keyboard'],
|
|
126
|
-
...keyboardShortcutProps
|
|
127
|
-
},
|
|
128
|
-
chevron: {
|
|
129
|
-
UNSAFE_className: (0, ($parcel$interopDefault($3deee0fd2b46e64f$exports)))['spectrum-Menu-chevron'],
|
|
130
|
-
size: 'S'
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
}, contents, isSelected && /*#__PURE__*/ (0, ($parcel$interopDefault($8PAEC$react))).createElement((0, ($parcel$interopDefault($8PAEC$spectrumiconsuiCheckmarkMedium))), {
|
|
134
|
-
slot: "checkmark",
|
|
135
|
-
UNSAFE_className: (0, $8PAEC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), 'spectrum-Menu-checkmark')
|
|
136
|
-
}), isUnavailable && /*#__PURE__*/ (0, ($parcel$interopDefault($8PAEC$react))).createElement((0, ($parcel$interopDefault($8PAEC$spectrumiconsworkflowInfoOutline))), {
|
|
137
|
-
slot: "end",
|
|
138
|
-
size: "XS",
|
|
139
|
-
alignSelf: "center",
|
|
140
|
-
"aria-label": stringFormatter.format('unavailable')
|
|
141
|
-
}), isUnavailable == null && isSubmenuTrigger && (direction === 'rtl' ? /*#__PURE__*/ (0, ($parcel$interopDefault($8PAEC$react))).createElement((0, ($parcel$interopDefault($8PAEC$spectrumiconsworkflowChevronLeft))), {
|
|
142
|
-
slot: "chevron"
|
|
143
|
-
}) : /*#__PURE__*/ (0, ($parcel$interopDefault($8PAEC$react))).createElement((0, ($parcel$interopDefault($8PAEC$spectrumiconsworkflowChevronRight))), {
|
|
144
|
-
slot: "chevron"
|
|
145
|
-
})))))));
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
//# sourceMappingURL=MenuItem.main.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/menu/src/MenuItem.tsx"],"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 CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport ChevronLeft from '@spectrum-icons/workflow/ChevronLeft';\nimport ChevronRight from '@spectrum-icons/workflow/ChevronRight';\nimport {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';\nimport {DOMAttributes, Node} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {Grid} from '@react-spectrum/layout';\nimport InfoOutline from '@spectrum-icons/workflow/InfoOutline';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeRefs, useObjectRef, useSlotId} from '@react-aria/utils';\nimport React, {JSX, useMemo, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {Text} from '@react-spectrum/text';\nimport {TreeState} from '@react-stately/tree';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenuContext, useSubmenuTriggerContext} from './context';\nimport {useMenuItem} from '@react-aria/menu';\n\ninterface MenuItemProps<T> {\n item: Node<T>,\n state: TreeState<T>,\n isVirtualized?: boolean\n}\n\n/** @private */\nexport function MenuItem<T>(props: MenuItemProps<T>): JSX.Element {\n let {\n item,\n state,\n isVirtualized\n } = props;\n let {\n closeOnSelect\n } = useMenuContext();\n let {\n rendered,\n key\n } = item;\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n let {direction} = useLocale();\n\n let submenuTriggerContext = useSubmenuTriggerContext();\n let {triggerRef, ...submenuTriggerProps} = submenuTriggerContext || {};\n let isSubmenuTrigger = !!submenuTriggerContext;\n let isUnavailable;\n let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n\n if (isSubmenuTrigger) {\n isUnavailable = submenuTriggerContext!.isUnavailable;\n }\n\n let isDisabled = state.disabledKeys.has(key);\n let isContextualHelpTrigger = isSubmenuTrigger && isUnavailable !== undefined;\n let isSelectable = (\n (isContextualHelpTrigger ? !isUnavailable : !isSubmenuTrigger) &&\n state.selectionManager.selectionMode !== 'none'\n );\n let isSelected = isSelectable && state.selectionManager.isSelected(key);\n let itemref = useRef<any>(null);\n let ref = useObjectRef(useMemo(() => mergeRefs(itemref, triggerRef), [itemref, triggerRef]));\n let {\n menuItemProps,\n labelProps,\n descriptionProps,\n keyboardShortcutProps\n } = useMenuItem(\n {\n isSelected,\n isDisabled,\n 'aria-label': item['aria-label'],\n key,\n closeOnSelect,\n isVirtualized,\n ...submenuTriggerProps\n },\n state,\n ref\n );\n let endId = useSlotId();\n let endProps: DOMAttributes = {};\n if (endId) {\n endProps.id = endId;\n menuItemProps['aria-describedby'] = [menuItemProps['aria-describedby'], endId].filter(Boolean).join(' ');\n }\n\n let contents = typeof rendered === 'string'\n ? <Text>{rendered}</Text>\n : rendered;\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <ElementType\n {...menuItemProps}\n ref={ref}\n className={classNames(\n styles,\n 'spectrum-Menu-item',\n {\n 'is-disabled': isDisabled,\n 'is-selected': isSelected,\n 'is-selectable': isSelectable,\n 'is-open': submenuTriggerProps.isOpen\n }\n )}>\n <Grid\n UNSAFE_className={\n classNames(\n styles,\n 'spectrum-Menu-itemGrid'\n )\n }>\n <ClearSlots>\n <SlotProvider\n slots={{\n text: {UNSAFE_className: styles['spectrum-Menu-itemLabel'], ...labelProps},\n end: {UNSAFE_className: styles['spectrum-Menu-end'], ...endProps},\n icon: {UNSAFE_className: styles['spectrum-Menu-icon'], size: 'S'},\n description: {UNSAFE_className: styles['spectrum-Menu-description'], ...descriptionProps},\n keyboard: {UNSAFE_className: styles['spectrum-Menu-keyboard'], ...keyboardShortcutProps},\n chevron: {UNSAFE_className: styles['spectrum-Menu-chevron'], size: 'S'}\n }}>\n {contents}\n {isSelected &&\n <CheckmarkMedium\n slot=\"checkmark\"\n UNSAFE_className={\n classNames(\n styles,\n 'spectrum-Menu-checkmark'\n )\n } />\n }\n {\n isUnavailable && <InfoOutline slot=\"end\" size=\"XS\" alignSelf=\"center\" aria-label={stringFormatter.format('unavailable')} />\n }\n {\n isUnavailable == null && isSubmenuTrigger && (direction === 'rtl' ? <ChevronLeft slot=\"chevron\" /> : <ChevronRight slot=\"chevron\" />)\n }\n </SlotProvider>\n </ClearSlots>\n </Grid>\n </ElementType>\n </FocusRing>\n );\n}\n"],"names":[],"version":3,"file":"MenuItem.main.js.map"}
|
package/dist/MenuItem.mjs
DELETED
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
import $bVyMs$intlStringsmodulejs from "./intlStrings.mjs";
|
|
2
|
-
import "./menu.2ec1fdaf.css";
|
|
3
|
-
import $bVyMs$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
|
|
4
|
-
import {useMenuContext as $d94604d52c3e3feb$export$21c7ab35b39f78ec, useSubmenuTriggerContext as $d94604d52c3e3feb$export$dc2161044aa0b36d} from "./context.mjs";
|
|
5
|
-
import $bVyMs$spectrumiconsuiCheckmarkMedium from "@spectrum-icons/ui/CheckmarkMedium";
|
|
6
|
-
import $bVyMs$spectrumiconsworkflowChevronLeft from "@spectrum-icons/workflow/ChevronLeft";
|
|
7
|
-
import $bVyMs$spectrumiconsworkflowChevronRight from "@spectrum-icons/workflow/ChevronRight";
|
|
8
|
-
import {classNames as $bVyMs$classNames, ClearSlots as $bVyMs$ClearSlots, SlotProvider as $bVyMs$SlotProvider} from "@react-spectrum/utils";
|
|
9
|
-
import {FocusRing as $bVyMs$FocusRing} from "@react-aria/focus";
|
|
10
|
-
import {Grid as $bVyMs$Grid} from "@react-spectrum/layout";
|
|
11
|
-
import $bVyMs$spectrumiconsworkflowInfoOutline from "@spectrum-icons/workflow/InfoOutline";
|
|
12
|
-
import {useObjectRef as $bVyMs$useObjectRef, mergeRefs as $bVyMs$mergeRefs, useSlotId as $bVyMs$useSlotId} from "@react-aria/utils";
|
|
13
|
-
import $bVyMs$react, {useRef as $bVyMs$useRef, useMemo as $bVyMs$useMemo} from "react";
|
|
14
|
-
import {Text as $bVyMs$Text} from "@react-spectrum/text";
|
|
15
|
-
import {useLocalizedStringFormatter as $bVyMs$useLocalizedStringFormatter, useLocale as $bVyMs$useLocale} from "@react-aria/i18n";
|
|
16
|
-
import {useMenuItem as $bVyMs$useMenuItem} from "@react-aria/menu";
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
function $parcel$interopDefault(a) {
|
|
20
|
-
return a && a.__esModule ? a.default : a;
|
|
21
|
-
}
|
|
22
|
-
/*
|
|
23
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
24
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
25
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
26
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
27
|
-
*
|
|
28
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
29
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
30
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
31
|
-
* governing permissions and limitations under the License.
|
|
32
|
-
*/
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
function $48fb8f5e1202c980$export$2ce376c2cc3355c8(props) {
|
|
48
|
-
let { item: item, state: state, isVirtualized: isVirtualized } = props;
|
|
49
|
-
let { closeOnSelect: closeOnSelect } = (0, $d94604d52c3e3feb$export$21c7ab35b39f78ec)();
|
|
50
|
-
let { rendered: rendered, key: key } = item;
|
|
51
|
-
let stringFormatter = (0, $bVyMs$useLocalizedStringFormatter)((0, ($parcel$interopDefault($bVyMs$intlStringsmodulejs))), '@react-spectrum/menu');
|
|
52
|
-
let { direction: direction } = (0, $bVyMs$useLocale)();
|
|
53
|
-
let submenuTriggerContext = (0, $d94604d52c3e3feb$export$dc2161044aa0b36d)();
|
|
54
|
-
let { triggerRef: triggerRef, ...submenuTriggerProps } = submenuTriggerContext || {};
|
|
55
|
-
let isSubmenuTrigger = !!submenuTriggerContext;
|
|
56
|
-
let isUnavailable;
|
|
57
|
-
let ElementType = item.props.href ? 'a' : 'div';
|
|
58
|
-
if (isSubmenuTrigger) isUnavailable = submenuTriggerContext.isUnavailable;
|
|
59
|
-
let isDisabled = state.disabledKeys.has(key);
|
|
60
|
-
let isContextualHelpTrigger = isSubmenuTrigger && isUnavailable !== undefined;
|
|
61
|
-
let isSelectable = (isContextualHelpTrigger ? !isUnavailable : !isSubmenuTrigger) && state.selectionManager.selectionMode !== 'none';
|
|
62
|
-
let isSelected = isSelectable && state.selectionManager.isSelected(key);
|
|
63
|
-
let itemref = (0, $bVyMs$useRef)(null);
|
|
64
|
-
let ref = (0, $bVyMs$useObjectRef)((0, $bVyMs$useMemo)(()=>(0, $bVyMs$mergeRefs)(itemref, triggerRef), [
|
|
65
|
-
itemref,
|
|
66
|
-
triggerRef
|
|
67
|
-
]));
|
|
68
|
-
let { menuItemProps: menuItemProps, labelProps: labelProps, descriptionProps: descriptionProps, keyboardShortcutProps: keyboardShortcutProps } = (0, $bVyMs$useMenuItem)({
|
|
69
|
-
isSelected: isSelected,
|
|
70
|
-
isDisabled: isDisabled,
|
|
71
|
-
'aria-label': item['aria-label'],
|
|
72
|
-
key: key,
|
|
73
|
-
closeOnSelect: closeOnSelect,
|
|
74
|
-
isVirtualized: isVirtualized,
|
|
75
|
-
...submenuTriggerProps
|
|
76
|
-
}, state, ref);
|
|
77
|
-
let endId = (0, $bVyMs$useSlotId)();
|
|
78
|
-
let endProps = {};
|
|
79
|
-
if (endId) {
|
|
80
|
-
endProps.id = endId;
|
|
81
|
-
menuItemProps['aria-describedby'] = [
|
|
82
|
-
menuItemProps['aria-describedby'],
|
|
83
|
-
endId
|
|
84
|
-
].filter(Boolean).join(' ');
|
|
85
|
-
}
|
|
86
|
-
let contents = typeof rendered === 'string' ? /*#__PURE__*/ (0, $bVyMs$react).createElement((0, $bVyMs$Text), null, rendered) : rendered;
|
|
87
|
-
return /*#__PURE__*/ (0, $bVyMs$react).createElement((0, $bVyMs$FocusRing), {
|
|
88
|
-
focusRingClass: (0, $bVyMs$classNames)((0, ($parcel$interopDefault($bVyMs$menu_vars_cssmodulejs))), 'focus-ring')
|
|
89
|
-
}, /*#__PURE__*/ (0, $bVyMs$react).createElement(ElementType, {
|
|
90
|
-
...menuItemProps,
|
|
91
|
-
ref: ref,
|
|
92
|
-
className: (0, $bVyMs$classNames)((0, ($parcel$interopDefault($bVyMs$menu_vars_cssmodulejs))), 'spectrum-Menu-item', {
|
|
93
|
-
'is-disabled': isDisabled,
|
|
94
|
-
'is-selected': isSelected,
|
|
95
|
-
'is-selectable': isSelectable,
|
|
96
|
-
'is-open': submenuTriggerProps.isOpen
|
|
97
|
-
})
|
|
98
|
-
}, /*#__PURE__*/ (0, $bVyMs$react).createElement((0, $bVyMs$Grid), {
|
|
99
|
-
UNSAFE_className: (0, $bVyMs$classNames)((0, ($parcel$interopDefault($bVyMs$menu_vars_cssmodulejs))), 'spectrum-Menu-itemGrid')
|
|
100
|
-
}, /*#__PURE__*/ (0, $bVyMs$react).createElement((0, $bVyMs$ClearSlots), null, /*#__PURE__*/ (0, $bVyMs$react).createElement((0, $bVyMs$SlotProvider), {
|
|
101
|
-
slots: {
|
|
102
|
-
text: {
|
|
103
|
-
UNSAFE_className: (0, ($parcel$interopDefault($bVyMs$menu_vars_cssmodulejs)))['spectrum-Menu-itemLabel'],
|
|
104
|
-
...labelProps
|
|
105
|
-
},
|
|
106
|
-
end: {
|
|
107
|
-
UNSAFE_className: (0, ($parcel$interopDefault($bVyMs$menu_vars_cssmodulejs)))['spectrum-Menu-end'],
|
|
108
|
-
...endProps
|
|
109
|
-
},
|
|
110
|
-
icon: {
|
|
111
|
-
UNSAFE_className: (0, ($parcel$interopDefault($bVyMs$menu_vars_cssmodulejs)))['spectrum-Menu-icon'],
|
|
112
|
-
size: 'S'
|
|
113
|
-
},
|
|
114
|
-
description: {
|
|
115
|
-
UNSAFE_className: (0, ($parcel$interopDefault($bVyMs$menu_vars_cssmodulejs)))['spectrum-Menu-description'],
|
|
116
|
-
...descriptionProps
|
|
117
|
-
},
|
|
118
|
-
keyboard: {
|
|
119
|
-
UNSAFE_className: (0, ($parcel$interopDefault($bVyMs$menu_vars_cssmodulejs)))['spectrum-Menu-keyboard'],
|
|
120
|
-
...keyboardShortcutProps
|
|
121
|
-
},
|
|
122
|
-
chevron: {
|
|
123
|
-
UNSAFE_className: (0, ($parcel$interopDefault($bVyMs$menu_vars_cssmodulejs)))['spectrum-Menu-chevron'],
|
|
124
|
-
size: 'S'
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
}, contents, isSelected && /*#__PURE__*/ (0, $bVyMs$react).createElement((0, $bVyMs$spectrumiconsuiCheckmarkMedium), {
|
|
128
|
-
slot: "checkmark",
|
|
129
|
-
UNSAFE_className: (0, $bVyMs$classNames)((0, ($parcel$interopDefault($bVyMs$menu_vars_cssmodulejs))), 'spectrum-Menu-checkmark')
|
|
130
|
-
}), isUnavailable && /*#__PURE__*/ (0, $bVyMs$react).createElement((0, $bVyMs$spectrumiconsworkflowInfoOutline), {
|
|
131
|
-
slot: "end",
|
|
132
|
-
size: "XS",
|
|
133
|
-
alignSelf: "center",
|
|
134
|
-
"aria-label": stringFormatter.format('unavailable')
|
|
135
|
-
}), isUnavailable == null && isSubmenuTrigger && (direction === 'rtl' ? /*#__PURE__*/ (0, $bVyMs$react).createElement((0, $bVyMs$spectrumiconsworkflowChevronLeft), {
|
|
136
|
-
slot: "chevron"
|
|
137
|
-
}) : /*#__PURE__*/ (0, $bVyMs$react).createElement((0, $bVyMs$spectrumiconsworkflowChevronRight), {
|
|
138
|
-
slot: "chevron"
|
|
139
|
-
})))))));
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
export {$48fb8f5e1202c980$export$2ce376c2cc3355c8 as MenuItem};
|
|
144
|
-
//# sourceMappingURL=MenuItem.module.js.map
|