@react-spectrum/menu 3.21.0 → 3.21.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ActionMenu.main.js +2 -5
- package/dist/ActionMenu.main.js.map +1 -1
- package/dist/ActionMenu.mjs +2 -5
- package/dist/ActionMenu.module.js +2 -5
- package/dist/ActionMenu.module.js.map +1 -1
- package/dist/ContextualHelpTrigger.main.js +1 -1
- package/dist/ContextualHelpTrigger.mjs +1 -1
- package/dist/ContextualHelpTrigger.module.js +1 -1
- package/dist/Menu.main.js +4 -19
- package/dist/Menu.main.js.map +1 -1
- package/dist/Menu.mjs +4 -19
- package/dist/Menu.module.js +4 -19
- package/dist/Menu.module.js.map +1 -1
- package/dist/MenuItem.main.js +1 -1
- package/dist/MenuItem.mjs +1 -1
- package/dist/MenuItem.module.js +1 -1
- package/dist/MenuSection.main.js +1 -1
- package/dist/MenuSection.mjs +1 -1
- package/dist/MenuSection.module.js +1 -1
- package/dist/MenuTrigger.main.js +16 -8
- package/dist/MenuTrigger.main.js.map +1 -1
- package/dist/MenuTrigger.mjs +19 -11
- package/dist/MenuTrigger.module.js +19 -11
- package/dist/MenuTrigger.module.js.map +1 -1
- package/dist/SubmenuTrigger.main.js +1 -1
- package/dist/SubmenuTrigger.mjs +1 -1
- package/dist/SubmenuTrigger.module.js +1 -1
- package/dist/menu_vars_css.main.js +55 -55
- package/dist/menu_vars_css.mjs +55 -55
- package/dist/menu_vars_css.module.js +55 -55
- package/dist/types.d.ts +1 -1
- package/dist/types.d.ts.map +1 -1
- package/dist/{vars.a1f9fd59.css → vars.5486a4f0.css} +117 -116
- package/dist/vars.5486a4f0.css.map +1 -0
- package/package.json +23 -23
- package/src/ActionMenu.tsx +5 -8
- package/src/Menu.tsx +7 -20
- package/src/MenuTrigger.tsx +21 -12
- package/dist/vars.a1f9fd59.css.map +0 -1
package/dist/ActionMenu.main.js
CHANGED
|
@@ -37,7 +37,7 @@ $parcel$export(module.exports, "ActionMenu", () => $53a2f2636c97a561$export$ed57
|
|
|
37
37
|
|
|
38
38
|
|
|
39
39
|
|
|
40
|
-
|
|
40
|
+
const $53a2f2636c97a561$export$ed57a210b9d13bb6 = /*#__PURE__*/ (0, $5FAEG$react.forwardRef)(function ActionMenu(props, ref) {
|
|
41
41
|
props = (0, $5FAEG$reactspectrumutils.useSlotProps)(props, 'actionMenu');
|
|
42
42
|
let stringFormatter = (0, $5FAEG$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($2f9ceea24fba5443$exports))), '@react-spectrum/menu');
|
|
43
43
|
let buttonProps = (0, $5FAEG$reactariautils.filterDOMProps)(props, {
|
|
@@ -61,10 +61,7 @@ function $53a2f2636c97a561$var$ActionMenu(props, ref) {
|
|
|
61
61
|
disabledKeys: props.disabledKeys,
|
|
62
62
|
onAction: props.onAction
|
|
63
63
|
}));
|
|
64
|
-
}
|
|
65
|
-
/**
|
|
66
|
-
* ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
|
|
67
|
-
*/ const $53a2f2636c97a561$export$ed57a210b9d13bb6 = /*#__PURE__*/ (0, $5FAEG$react.forwardRef)($53a2f2636c97a561$var$ActionMenu);
|
|
64
|
+
});
|
|
68
65
|
|
|
69
66
|
|
|
70
67
|
//# sourceMappingURL=ActionMenu.main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAkBM,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAA6B,KAAiC,EAAE,GAAoC;IAChJ,QAAQ,CAAA,GAAA,sCAAW,EAAE,OAAO;IAC5B,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,cAAc,CAAA,GAAA,oCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACxD,IAAI,WAAW,CAAC,aAAa,KAAK,WAChC,WAAW,CAAC,aAAa,GAAG,gBAAgB,MAAM,CAAC;IAGrD,qBACE,0DAAC,CAAA,GAAA,qCAAU;QACT,QAAQ,MAAM,MAAM;QACpB,aAAa,MAAM,WAAW;QAC9B,cAAc,MAAM,YAAY;QAChC,OAAO,MAAM,KAAK;QAClB,WAAW,MAAM,SAAS;QAC1B,YAAY,MAAM,UAAU;qBAC5B,0DAAC,CAAA,GAAA,uCAAW;QACV,KAAK;QACJ,GAAG,KAAK;QACR,GAAG,WAAW;qBACf,0DAAC,CAAA,GAAA,0DAAG,yBAEN,0DAAC,CAAA,GAAA,8BAAG;QACF,UAAU,MAAM,QAAQ;QACxB,OAAO,MAAM,KAAK;QAClB,cAAc,MAAM,YAAY;QAChC,UAAU,MAAM,QAAQ;;AAGhC","sources":["packages/@react-spectrum/menu/src/ActionMenu.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 {filterDOMProps} from '@react-aria/utils';\nimport {FocusableRef} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Menu} from './Menu';\nimport {MenuTrigger} from './MenuTrigger';\nimport More from '@spectrum-icons/workflow/More';\nimport React, {forwardRef, ReactElement} from 'react';\nimport {SpectrumActionMenuProps} from '@react-types/menu';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSlotProps} from '@react-spectrum/utils';\n\n/**\n * ActionMenu combines an ActionButton with a Menu for simple \"more actions\" use cases.\n */\nexport const ActionMenu = forwardRef(function ActionMenu<T extends object>(props: SpectrumActionMenuProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n props = useSlotProps(props, 'actionMenu');\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n let buttonProps = filterDOMProps(props, {labelable: true});\n if (buttonProps['aria-label'] === undefined) {\n buttonProps['aria-label'] = stringFormatter.format('moreActions');\n }\n\n return (\n <MenuTrigger\n isOpen={props.isOpen}\n defaultOpen={props.defaultOpen}\n onOpenChange={props.onOpenChange}\n align={props.align}\n direction={props.direction}\n shouldFlip={props.shouldFlip}>\n <ActionButton\n ref={ref}\n {...props}\n {...buttonProps}>\n <More />\n </ActionButton>\n <Menu\n children={props.children}\n items={props.items}\n disabledKeys={props.disabledKeys}\n onAction={props.onAction} />\n </MenuTrigger>\n );\n}) as <T>(props: SpectrumActionMenuProps<T> & {ref?: FocusableRef<HTMLButtonElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"ActionMenu.main.js.map"}
|
package/dist/ActionMenu.mjs
CHANGED
|
@@ -31,7 +31,7 @@ function $parcel$interopDefault(a) {
|
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
const $43fa9949e6af393d$export$ed57a210b9d13bb6 = /*#__PURE__*/ (0, $4ZPCG$forwardRef)(function ActionMenu(props, ref) {
|
|
35
35
|
props = (0, $4ZPCG$useSlotProps)(props, 'actionMenu');
|
|
36
36
|
let stringFormatter = (0, $4ZPCG$useLocalizedStringFormatter)((0, ($parcel$interopDefault($4ZPCG$intlStringsmodulejs))), '@react-spectrum/menu');
|
|
37
37
|
let buttonProps = (0, $4ZPCG$filterDOMProps)(props, {
|
|
@@ -55,10 +55,7 @@ function $43fa9949e6af393d$var$ActionMenu(props, ref) {
|
|
|
55
55
|
disabledKeys: props.disabledKeys,
|
|
56
56
|
onAction: props.onAction
|
|
57
57
|
}));
|
|
58
|
-
}
|
|
59
|
-
/**
|
|
60
|
-
* ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
|
|
61
|
-
*/ const $43fa9949e6af393d$export$ed57a210b9d13bb6 = /*#__PURE__*/ (0, $4ZPCG$forwardRef)($43fa9949e6af393d$var$ActionMenu);
|
|
58
|
+
});
|
|
62
59
|
|
|
63
60
|
|
|
64
61
|
export {$43fa9949e6af393d$export$ed57a210b9d13bb6 as ActionMenu};
|
|
@@ -31,7 +31,7 @@ function $parcel$interopDefault(a) {
|
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
const $43fa9949e6af393d$export$ed57a210b9d13bb6 = /*#__PURE__*/ (0, $4ZPCG$forwardRef)(function ActionMenu(props, ref) {
|
|
35
35
|
props = (0, $4ZPCG$useSlotProps)(props, 'actionMenu');
|
|
36
36
|
let stringFormatter = (0, $4ZPCG$useLocalizedStringFormatter)((0, ($parcel$interopDefault($4ZPCG$intlStringsmodulejs))), '@react-spectrum/menu');
|
|
37
37
|
let buttonProps = (0, $4ZPCG$filterDOMProps)(props, {
|
|
@@ -55,10 +55,7 @@ function $43fa9949e6af393d$var$ActionMenu(props, ref) {
|
|
|
55
55
|
disabledKeys: props.disabledKeys,
|
|
56
56
|
onAction: props.onAction
|
|
57
57
|
}));
|
|
58
|
-
}
|
|
59
|
-
/**
|
|
60
|
-
* ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
|
|
61
|
-
*/ const $43fa9949e6af393d$export$ed57a210b9d13bb6 = /*#__PURE__*/ (0, $4ZPCG$forwardRef)($43fa9949e6af393d$var$ActionMenu);
|
|
58
|
+
});
|
|
62
59
|
|
|
63
60
|
|
|
64
61
|
export {$43fa9949e6af393d$export$ed57a210b9d13bb6 as ActionMenu};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAkBM,MAAM,0DAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAA6B,KAAiC,EAAE,GAAoC;IAChJ,QAAQ,CAAA,GAAA,mBAAW,EAAE,OAAO;IAC5B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAChE,IAAI,cAAc,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACxD,IAAI,WAAW,CAAC,aAAa,KAAK,WAChC,WAAW,CAAC,aAAa,GAAG,gBAAgB,MAAM,CAAC;IAGrD,qBACE,gCAAC,CAAA,GAAA,yCAAU;QACT,QAAQ,MAAM,MAAM;QACpB,aAAa,MAAM,WAAW;QAC9B,cAAc,MAAM,YAAY;QAChC,OAAO,MAAM,KAAK;QAClB,WAAW,MAAM,SAAS;QAC1B,YAAY,MAAM,UAAU;qBAC5B,gCAAC,CAAA,GAAA,mBAAW;QACV,KAAK;QACJ,GAAG,KAAK;QACR,GAAG,WAAW;qBACf,gCAAC,CAAA,GAAA,gCAAG,yBAEN,gCAAC,CAAA,GAAA,yCAAG;QACF,UAAU,MAAM,QAAQ;QACxB,OAAO,MAAM,KAAK;QAClB,cAAc,MAAM,YAAY;QAChC,UAAU,MAAM,QAAQ;;AAGhC","sources":["packages/@react-spectrum/menu/src/ActionMenu.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 {filterDOMProps} from '@react-aria/utils';\nimport {FocusableRef} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Menu} from './Menu';\nimport {MenuTrigger} from './MenuTrigger';\nimport More from '@spectrum-icons/workflow/More';\nimport React, {forwardRef, ReactElement} from 'react';\nimport {SpectrumActionMenuProps} from '@react-types/menu';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSlotProps} from '@react-spectrum/utils';\n\n/**\n * ActionMenu combines an ActionButton with a Menu for simple \"more actions\" use cases.\n */\nexport const ActionMenu = forwardRef(function ActionMenu<T extends object>(props: SpectrumActionMenuProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n props = useSlotProps(props, 'actionMenu');\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n let buttonProps = filterDOMProps(props, {labelable: true});\n if (buttonProps['aria-label'] === undefined) {\n buttonProps['aria-label'] = stringFormatter.format('moreActions');\n }\n\n return (\n <MenuTrigger\n isOpen={props.isOpen}\n defaultOpen={props.defaultOpen}\n onOpenChange={props.onOpenChange}\n align={props.align}\n direction={props.direction}\n shouldFlip={props.shouldFlip}>\n <ActionButton\n ref={ref}\n {...props}\n {...buttonProps}>\n <More />\n </ActionButton>\n <Menu\n children={props.children}\n items={props.items}\n disabledKeys={props.disabledKeys}\n onAction={props.onAction} />\n </MenuTrigger>\n );\n}) as <T>(props: SpectrumActionMenuProps<T> & {ref?: FocusableRef<HTMLButtonElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"ActionMenu.module.js.map"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
require("./vars.1b9cd276.css");
|
|
2
2
|
var $a10e565ec42bcf96$exports = require("./contextualhelp_vars_css.main.js");
|
|
3
|
-
require("./vars.
|
|
3
|
+
require("./vars.5486a4f0.css");
|
|
4
4
|
var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
|
|
5
5
|
var $cac834c4bc0a51d3$exports = require("./context.main.js");
|
|
6
6
|
var $63a7dff9cbe2d046$exports = require("./Menu.main.js");
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "./vars.1b9cd276.css";
|
|
2
2
|
import $7Y1uy$contextualhelp_vars_cssmodulejs from "./contextualhelp_vars_css.mjs";
|
|
3
|
-
import "./vars.
|
|
3
|
+
import "./vars.5486a4f0.css";
|
|
4
4
|
import $7Y1uy$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
|
|
5
5
|
import {SubmenuTriggerContext as $d94604d52c3e3feb$export$8d97fe02339fc0e3, useMenuStateContext as $d94604d52c3e3feb$export$efa3856fc0e85e7f} from "./context.mjs";
|
|
6
6
|
import {TrayHeaderWrapper as $49b26f4b606348f6$export$3dfe97b5c32d8d8c} from "./Menu.mjs";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "./vars.1b9cd276.css";
|
|
2
2
|
import $7Y1uy$contextualhelp_vars_cssmodulejs from "./contextualhelp_vars_css.module.js";
|
|
3
|
-
import "./vars.
|
|
3
|
+
import "./vars.5486a4f0.css";
|
|
4
4
|
import $7Y1uy$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
|
|
5
5
|
import {SubmenuTriggerContext as $d94604d52c3e3feb$export$8d97fe02339fc0e3, useMenuStateContext as $d94604d52c3e3feb$export$efa3856fc0e85e7f} from "./context.module.js";
|
|
6
6
|
import {TrayHeaderWrapper as $49b26f4b606348f6$export$3dfe97b5c32d8d8c} from "./Menu.module.js";
|
package/dist/Menu.main.js
CHANGED
|
@@ -2,7 +2,7 @@ var $2f9ceea24fba5443$exports = require("./intlStrings.main.js");
|
|
|
2
2
|
var $cac834c4bc0a51d3$exports = require("./context.main.js");
|
|
3
3
|
var $1d718563708db5b5$exports = require("./MenuItem.main.js");
|
|
4
4
|
var $5793ff412227d2fc$exports = require("./MenuSection.main.js");
|
|
5
|
-
require("./vars.
|
|
5
|
+
require("./vars.5486a4f0.css");
|
|
6
6
|
var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
|
|
7
7
|
var $hl8gx$reactspectrumbutton = require("@react-spectrum/button");
|
|
8
8
|
var $hl8gx$spectrumiconsuiArrowDownSmall = require("@spectrum-icons/ui/ArrowDownSmall");
|
|
@@ -10,7 +10,6 @@ var $hl8gx$reactspectrumutils = require("@react-spectrum/utils");
|
|
|
10
10
|
var $hl8gx$reactariafocus = require("@react-aria/focus");
|
|
11
11
|
var $hl8gx$reactariautils = require("@react-aria/utils");
|
|
12
12
|
var $hl8gx$react = require("react");
|
|
13
|
-
var $hl8gx$reactariainteractions = require("@react-aria/interactions");
|
|
14
13
|
var $hl8gx$reactariai18n = require("@react-aria/i18n");
|
|
15
14
|
var $hl8gx$reactariamenu = require("@react-aria/menu");
|
|
16
15
|
var $hl8gx$reactstatelytree = require("@react-stately/tree");
|
|
@@ -24,8 +23,8 @@ function $parcel$export(e, n, v, s) {
|
|
|
24
23
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
25
24
|
}
|
|
26
25
|
|
|
27
|
-
$parcel$export(module.exports, "TrayHeaderWrapper", () => $63a7dff9cbe2d046$export$3dfe97b5c32d8d8c);
|
|
28
26
|
$parcel$export(module.exports, "Menu", () => $63a7dff9cbe2d046$export$d9b273488cd8ce6f);
|
|
27
|
+
$parcel$export(module.exports, "TrayHeaderWrapper", () => $63a7dff9cbe2d046$export$3dfe97b5c32d8d8c);
|
|
29
28
|
/*
|
|
30
29
|
* Copyright 2020 Adobe. All rights reserved.
|
|
31
30
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -50,8 +49,7 @@ $parcel$export(module.exports, "Menu", () => $63a7dff9cbe2d046$export$d9b273488c
|
|
|
50
49
|
|
|
51
50
|
|
|
52
51
|
|
|
53
|
-
|
|
54
|
-
function $63a7dff9cbe2d046$var$Menu(props, ref) {
|
|
52
|
+
const $63a7dff9cbe2d046$export$d9b273488cd8ce6f = /*#__PURE__*/ (0, ($parcel$interopDefault($hl8gx$react))).forwardRef(function Menu(props, ref) {
|
|
55
53
|
let isSubmenu = true;
|
|
56
54
|
let contextProps = (0, $hl8gx$react.useContext)((0, $cac834c4bc0a51d3$exports.MenuContext));
|
|
57
55
|
let parentMenuContext = (0, $cac834c4bc0a51d3$exports.useMenuStateContext)();
|
|
@@ -94,14 +92,6 @@ function $63a7dff9cbe2d046$var$Menu(props, ref) {
|
|
|
94
92
|
let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);
|
|
95
93
|
hasOpenSubmenu = nextMenuLevel != null;
|
|
96
94
|
}
|
|
97
|
-
(0, $hl8gx$reactariainteractions.useInteractOutside)({
|
|
98
|
-
ref: domRef,
|
|
99
|
-
onInteractOutside: (e)=>{
|
|
100
|
-
var _trayContainerRef_current;
|
|
101
|
-
if (!(popoverContainer === null || popoverContainer === void 0 ? void 0 : popoverContainer.contains(e.target)) && !((_trayContainerRef_current = trayContainerRef.current) === null || _trayContainerRef_current === void 0 ? void 0 : _trayContainerRef_current.contains(e.target))) rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.close();
|
|
102
|
-
},
|
|
103
|
-
isDisabled: isSubmenu || !hasOpenSubmenu
|
|
104
|
-
});
|
|
105
95
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($hl8gx$react))).createElement((0, $cac834c4bc0a51d3$exports.MenuStateContext).Provider, {
|
|
106
96
|
value: {
|
|
107
97
|
popoverContainer: popoverContainer,
|
|
@@ -152,7 +142,7 @@ function $63a7dff9cbe2d046$var$Menu(props, ref) {
|
|
|
152
142
|
...leftOffset
|
|
153
143
|
}
|
|
154
144
|
})));
|
|
155
|
-
}
|
|
145
|
+
});
|
|
156
146
|
function $63a7dff9cbe2d046$export$3dfe97b5c32d8d8c(props) {
|
|
157
147
|
var _parentMenuTreeState_collection_getItem;
|
|
158
148
|
let { children: children, isSubmenu: isSubmenu, hasOpenSubmenu: hasOpenSubmenu, parentMenuTreeState: parentMenuTreeState, rootMenuTriggerState: rootMenuTriggerState, onBackButtonPress: onBackButtonPress, wrapperKeyDown: wrapperKeyDown, menuRef: menuRef } = props;
|
|
@@ -236,11 +226,6 @@ function $63a7dff9cbe2d046$export$3dfe97b5c32d8d8c(props) {
|
|
|
236
226
|
className: (0, $hl8gx$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), 'spectrum-Submenu-heading')
|
|
237
227
|
}, backButtonText)), children)));
|
|
238
228
|
}
|
|
239
|
-
/**
|
|
240
|
-
* Menus display a list of actions or options that a user can choose.
|
|
241
|
-
*/ // forwardRef doesn't support generic parameters, so cast the result to the correct type
|
|
242
|
-
// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
|
|
243
|
-
const $63a7dff9cbe2d046$export$d9b273488cd8ce6f = /*#__PURE__*/ (0, ($parcel$interopDefault($hl8gx$react))).forwardRef($63a7dff9cbe2d046$var$Menu);
|
|
244
229
|
|
|
245
230
|
|
|
246
231
|
//# sourceMappingURL=Menu.main.js.map
|
package/dist/Menu.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;AAqBD,SAAS,2BAAuB,KAA2B,EAAE,GAA2B;IACtF,IAAI,YAAY;IAChB,IAAI,eAAe,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACxC,IAAI,oBAAoB,CAAA,GAAA,6CAAkB;IAC1C,IAAI,wBAAC,oBAAoB,EAAE,OAAO,mBAAmB,EAAC,GAAG,qBAAqB;QAAC,sBAAsB,aAAa,KAAK;IAAA;IACvH,IAAI,CAAC,mBACH,YAAY;IAEd,IAAI,gBAAgB;QAClB,GAAG,CAAA,GAAA,gCAAS,EAAE,cAAc,MAAM;IACpC;IACA,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,CAAC,kBAAkB,oBAAoB,GAAG,CAAA,GAAA,qBAAO,EAAsB;IAC3E,IAAI,mBAAmB,CAAA,GAAA,mBAAK,EAAyB;IACrD,IAAI,QAAQ,CAAA,GAAA,oCAAW,EAAE;IACzB,IAAI,aAAa,CAAA,GAAA,mBAAK,EAAkB;IACxC,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,4BAAM,EAAE,eAAe,OAAO;IAChD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,CAAA,GAAA,gCAAS,EAAE,cAAc;IACzB,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,qBAAO,EAAE;QAAC,MAAM;IAAC;IACnD,IAAI,uBAAuB,CAAA,GAAA,mBAAK,EAAsB;IACtD,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,oBAAoB,qBAAqB,OAAO,KAAK,oBAAoB,WAAW,IAAI,KAAK,GAAG;YAClG,qBAAqB,OAAO,GAAG;YAC/B,IAAI,QAAC,IAAI,EAAC,GAAG,iBAAiB,qBAAqB;YACnD,cAAc;gBAAC,MAAM,KAAK;YAAI;QAChC;IACF,GAAG;QAAC;QAAY;KAAiB;QAEjB;IAAhB,IAAI,YAAY,CAAA,6BAAA,aAAa,YAAY,cAAzB,wCAAA,6BAA6B;IAC7C,IAAI,mBAAmB,iCAAA,2CAAA,qBAAsB,iBAAiB,CAAC,YAAY,EAAE;IAC7E,IAAI,iBAAiB;IACrB,IAAI,oBAAoB,MAAM;QAC5B,IAAI,gBAAgB,MAAM,UAAU,CAAC,OAAO,CAAC;QAC7C,iBAAiB,iBAAiB;IACpC;IACA,CAAA,GAAA,+CAAiB,EAAE;QACjB,KAAK;QACL,mBAAmB,CAAC;gBACoC;YAAtD,IAAI,EAAC,6BAAA,uCAAA,iBAAkB,QAAQ,CAAC,EAAE,MAAM,MAAa,GAAC,4BAAA,iBAAiB,OAAO,cAAxB,gDAAA,0BAA0B,QAAQ,CAAC,EAAE,MAAM,IAC/F,iCAAA,2CAAA,qBAAsB,KAAK;QAE/B;QACA,YAAY,aAAa,CAAC;IAC5B;IAEA,qBACE,0DAAC,CAAA,GAAA,0CAAe,EAAE,QAAQ;QAAC,OAAO;8BAAC;8BAAkB;YAAkB,MAAM;YAAQ,SAAS;kCAAY;mBAAsB;QAAK;qBACnI,0DAAC;QAAI,OAAO;YAAC,QAAQ,iBAAiB,SAAS;QAAS;QAAG,KAAK;sBAChE,0DAAC,CAAA,GAAA,gCAAS,uBACR,0DAAC;QACC,mBAAmB,aAAa,iBAAiB;QACjD,gBAAgB;QAChB,WAAW;QACX,qBAAqB;QACrB,sBAAsB;QACtB,SAAS;qBACT,0DAAC;QACE,GAAG,SAAS;QACb,OAAO,CAAA,GAAA,gCAAS,EAAE,WAAW,KAAK,EAAE,UAAU,KAAK;QACnD,KAAK;QACL,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,iBACA,WAAW,SAAS;OAGvB;WAAI,MAAM,UAAU;KAAC,CAAC,GAAG,CAAC,CAAA;QACzB,IAAI,KAAK,IAAI,KAAK,WAChB,qBACE,0DAAC,CAAA,GAAA,qCAAU;YACT,KAAK,KAAK,GAAG;YACb,MAAM;YACN,OAAO;;QAIb,IAAI,yBACF,0DAAC,CAAA,GAAA,kCAAO;YACN,KAAK,KAAK,GAAG;YACb,MAAM;YACN,OAAO;;QAGX,IAAI,KAAK,OAAO,EACd,WAAW,KAAK,OAAO,CAAC;QAG1B,OAAO;IACT,MAGH,CAAA,iCAAA,2CAAA,qBAAsB,MAAM,mBAAI,0DAAC;QAAI,KAAK;QAAqB,OAAO;YAAC,OAAO;YAAS,UAAU;YAAY,KAAK;YAAI,GAAG,UAAU;QAAA;;AAI5I;AAEO,SAAS,0CAAkB,KAAK;QAGhB;IAFrB,IAAI,YAAC,QAAQ,aAAE,SAAS,kBAAE,cAAc,uBAAE,mBAAmB,wBAAE,oBAAoB,qBAAE,iBAAiB,kBAAE,cAAc,WAAE,OAAO,EAAC,GAAG;IACnI,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,iBAAiB,gCAAA,2CAAA,0CAAA,oBAAqB,UAAU,CAAC,OAAO,CAAC,iCAAA,2CAAA,qBAAsB,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,eAA5F,8DAAA,wCAA+F,SAAS;IAC7H,IAAI,kBAAkB,gBAAgB,MAAM,CAAC,cAAc;QACzD,gBAAgB;IAClB;IACA,IAAI,YAAY,CAAA,GAAA,+BAAQ;IACxB,IAAI,WAAW,CAAA,GAAA,2CAAgB;IAC/B,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAE1B,IAAI,CAAC,sBAAsB,wBAAwB,GAAG,CAAA,GAAA,qBAAO,EAAE;IAC/D,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,CAAC,gBACH,wBAAwB;IAE5B,GAAG;QAAC;QAAgB;KAAS;IAE7B,IAAI,aAAa,CAAA,GAAA,mBAAK,EAAwC;IAC9D,IAAI,wBAAwB;QAC1B,wBAAwB;QACxB,WAAW,OAAO,GAAG,WAAW;YAC9B;QACF,GAAG,MAAM,8BAA8B;IACzC;IAEA,CAAA,GAAA,sBAAQ,EAAE;QACR,OAAO;YACL,IAAI,WAAW,OAAO,EACpB,aAAa,WAAW,OAAO;QAEnC;IACF,GAAG,EAAE;IAEL,8FAA8F;IAC9F,6EAA6E;IAC7E,IAAI,kBAAkB,CAAA,GAAA,mBAAK,EAAwC;IACnE,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,YAAY,aAAa,CAAC,kBAAkB,yBAAyB,8BACvE,gBAAgB,OAAO,GAAG,WAAW;YACnC,IAAI,YAAY,QAAQ,OAAO,CAAC,aAAa,CAAC;YAC9C,sBAAA,gCAAA,UAAW,KAAK;QAClB,GAAG;QAEL,OAAO;YACL,IAAI,gBAAgB,OAAO,EACzB,aAAa,gBAAgB,OAAO;QAExC;IACF,GAAG;QAAC;QAAgB;QAAU;QAAW;QAAS;KAAqB;IAEvE,qBACE,oIACE,0DAAC;QACC,MAAM,YAAY,WAAW;QAC7B,mBAAiB;QACjB,eAAa,YAAY;QACzB,eAAY;QACZ,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,yBACA;YACE,mCAAmC;YACnC,eAAe;YACf,CAAC,qBAAqB,EAAE;QAC1B;qBAGJ,0DAAC;QAAI,MAAK;QAAe,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG,4BAA4B;YAAC,sCAAsC;QAAQ;QAAI,WAAW;OAC9I,YAAY,aAAa,CAAC,gCACzB,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBACjC,0DAAC,CAAA,GAAA,uCAAW;QACV,cAAY;QACZ,SAAA;QACA,SAAS;OAER,cAAc,sBAAQ,0DAAC,CAAA,GAAA,8DAAa;QAAE,cAAc;YAAC,QAAQ;QAAQ;uBAAQ,0DAAC,CAAA,GAAA,8DAAa;QAAE,cAAc;YAAC,QAAQ;QAAO;uBAE9H,0DAAC;QAAG,IAAI;QAAW,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;OAA8B,kBAGlF;AAKX;AAEA;;CAEC,GACD,wFAAwF;AACxF,2GAA2G;AAC3G,MAAM,0DAAQ,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","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, {ReactElement, useContext, useEffect, useRef, useState} from 'react';\nimport {SpectrumMenuProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useInteractOutside} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenu} from '@react-aria/menu';\nimport {useTreeState} from '@react-stately/tree';\n\nfunction 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 useEffect(() => {\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 useInteractOutside({\n ref: domRef,\n onInteractOutside: (e) => {\n if (!popoverContainer?.contains(e.target as Node) && !trayContainerRef.current?.contains(e.target as Node)) {\n rootMenuTriggerState?.close();\n }\n },\n isDisabled: isSubmenu || !hasOpenSubmenu\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}\n\nexport function TrayHeaderWrapper(props) {\n let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n let backButtonText = parentMenuTreeState?.collection.getItem(rootMenuTriggerState?.expandedKeysStack.slice(-1)[0])?.textValue;\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\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\nconst _Menu = React.forwardRef(Menu) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_Menu as Menu};\n"],"names":[],"version":3,"file":"Menu.main.js.map"}
|
|
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, {ReactElement, useContext, useEffect, useRef, useState} from 'react';\nimport {SpectrumMenuProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenu} from '@react-aria/menu';\nimport {useTreeState} from '@react-stately/tree';\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 useEffect(() => {\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 let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n let backButtonText = parentMenuTreeState?.collection.getItem(rootMenuTriggerState?.expandedKeysStack.slice(-1)[0])?.textValue;\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.main.js.map"}
|
package/dist/Menu.mjs
CHANGED
|
@@ -2,7 +2,7 @@ import $4oXwn$intlStringsmodulejs from "./intlStrings.mjs";
|
|
|
2
2
|
import {MenuContext as $d94604d52c3e3feb$export$c7e742effb1c51e2, MenuStateContext as $d94604d52c3e3feb$export$24aad8519b95b41b, useMenuStateContext as $d94604d52c3e3feb$export$efa3856fc0e85e7f} from "./context.mjs";
|
|
3
3
|
import {MenuItem as $48fb8f5e1202c980$export$2ce376c2cc3355c8} from "./MenuItem.mjs";
|
|
4
4
|
import {MenuSection as $b966e606890cc5ca$export$4b1545b4f2016d26} from "./MenuSection.mjs";
|
|
5
|
-
import "./vars.
|
|
5
|
+
import "./vars.5486a4f0.css";
|
|
6
6
|
import $4oXwn$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
|
|
7
7
|
import {ActionButton as $4oXwn$ActionButton} from "@react-spectrum/button";
|
|
8
8
|
import $4oXwn$spectrumiconsuiArrowDownSmall from "@spectrum-icons/ui/ArrowDownSmall";
|
|
@@ -10,7 +10,6 @@ import {useDOMRef as $4oXwn$useDOMRef, useStyleProps as $4oXwn$useStyleProps, cl
|
|
|
10
10
|
import {FocusScope as $4oXwn$FocusScope} from "@react-aria/focus";
|
|
11
11
|
import {mergeProps as $4oXwn$mergeProps, useSyncRef as $4oXwn$useSyncRef, useSlotId as $4oXwn$useSlotId, useLayoutEffect as $4oXwn$useLayoutEffect} from "@react-aria/utils";
|
|
12
12
|
import $4oXwn$react, {useContext as $4oXwn$useContext, useState as $4oXwn$useState, useRef as $4oXwn$useRef, useEffect as $4oXwn$useEffect} from "react";
|
|
13
|
-
import {useInteractOutside as $4oXwn$useInteractOutside} from "@react-aria/interactions";
|
|
14
13
|
import {useLocalizedStringFormatter as $4oXwn$useLocalizedStringFormatter, useLocale as $4oXwn$useLocale} from "@react-aria/i18n";
|
|
15
14
|
import {useMenu as $4oXwn$useMenu} from "@react-aria/menu";
|
|
16
15
|
import {useTreeState as $4oXwn$useTreeState} from "@react-stately/tree";
|
|
@@ -43,8 +42,7 @@ function $parcel$interopDefault(a) {
|
|
|
43
42
|
|
|
44
43
|
|
|
45
44
|
|
|
46
|
-
|
|
47
|
-
function $49b26f4b606348f6$var$Menu(props, ref) {
|
|
45
|
+
const $49b26f4b606348f6$export$d9b273488cd8ce6f = /*#__PURE__*/ (0, $4oXwn$react).forwardRef(function Menu(props, ref) {
|
|
48
46
|
let isSubmenu = true;
|
|
49
47
|
let contextProps = (0, $4oXwn$useContext)((0, $d94604d52c3e3feb$export$c7e742effb1c51e2));
|
|
50
48
|
let parentMenuContext = (0, $d94604d52c3e3feb$export$efa3856fc0e85e7f)();
|
|
@@ -87,14 +85,6 @@ function $49b26f4b606348f6$var$Menu(props, ref) {
|
|
|
87
85
|
let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);
|
|
88
86
|
hasOpenSubmenu = nextMenuLevel != null;
|
|
89
87
|
}
|
|
90
|
-
(0, $4oXwn$useInteractOutside)({
|
|
91
|
-
ref: domRef,
|
|
92
|
-
onInteractOutside: (e)=>{
|
|
93
|
-
var _trayContainerRef_current;
|
|
94
|
-
if (!(popoverContainer === null || popoverContainer === void 0 ? void 0 : popoverContainer.contains(e.target)) && !((_trayContainerRef_current = trayContainerRef.current) === null || _trayContainerRef_current === void 0 ? void 0 : _trayContainerRef_current.contains(e.target))) rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.close();
|
|
95
|
-
},
|
|
96
|
-
isDisabled: isSubmenu || !hasOpenSubmenu
|
|
97
|
-
});
|
|
98
88
|
return /*#__PURE__*/ (0, $4oXwn$react).createElement((0, $d94604d52c3e3feb$export$24aad8519b95b41b).Provider, {
|
|
99
89
|
value: {
|
|
100
90
|
popoverContainer: popoverContainer,
|
|
@@ -145,7 +135,7 @@ function $49b26f4b606348f6$var$Menu(props, ref) {
|
|
|
145
135
|
...leftOffset
|
|
146
136
|
}
|
|
147
137
|
})));
|
|
148
|
-
}
|
|
138
|
+
});
|
|
149
139
|
function $49b26f4b606348f6$export$3dfe97b5c32d8d8c(props) {
|
|
150
140
|
var _parentMenuTreeState_collection_getItem;
|
|
151
141
|
let { children: children, isSubmenu: isSubmenu, hasOpenSubmenu: hasOpenSubmenu, parentMenuTreeState: parentMenuTreeState, rootMenuTriggerState: rootMenuTriggerState, onBackButtonPress: onBackButtonPress, wrapperKeyDown: wrapperKeyDown, menuRef: menuRef } = props;
|
|
@@ -229,12 +219,7 @@ function $49b26f4b606348f6$export$3dfe97b5c32d8d8c(props) {
|
|
|
229
219
|
className: (0, $4oXwn$classNames)((0, ($parcel$interopDefault($4oXwn$menu_vars_cssmodulejs))), 'spectrum-Submenu-heading')
|
|
230
220
|
}, backButtonText)), children)));
|
|
231
221
|
}
|
|
232
|
-
/**
|
|
233
|
-
* Menus display a list of actions or options that a user can choose.
|
|
234
|
-
*/ // forwardRef doesn't support generic parameters, so cast the result to the correct type
|
|
235
|
-
// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
|
|
236
|
-
const $49b26f4b606348f6$export$d9b273488cd8ce6f = /*#__PURE__*/ (0, $4oXwn$react).forwardRef($49b26f4b606348f6$var$Menu);
|
|
237
222
|
|
|
238
223
|
|
|
239
|
-
export {$49b26f4b606348f6$export$
|
|
224
|
+
export {$49b26f4b606348f6$export$d9b273488cd8ce6f as Menu, $49b26f4b606348f6$export$3dfe97b5c32d8d8c as TrayHeaderWrapper};
|
|
240
225
|
//# sourceMappingURL=Menu.module.js.map
|
package/dist/Menu.module.js
CHANGED
|
@@ -2,7 +2,7 @@ import $4oXwn$intlStringsmodulejs from "./intlStrings.module.js";
|
|
|
2
2
|
import {MenuContext as $d94604d52c3e3feb$export$c7e742effb1c51e2, MenuStateContext as $d94604d52c3e3feb$export$24aad8519b95b41b, useMenuStateContext as $d94604d52c3e3feb$export$efa3856fc0e85e7f} from "./context.module.js";
|
|
3
3
|
import {MenuItem as $48fb8f5e1202c980$export$2ce376c2cc3355c8} from "./MenuItem.module.js";
|
|
4
4
|
import {MenuSection as $b966e606890cc5ca$export$4b1545b4f2016d26} from "./MenuSection.module.js";
|
|
5
|
-
import "./vars.
|
|
5
|
+
import "./vars.5486a4f0.css";
|
|
6
6
|
import $4oXwn$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
|
|
7
7
|
import {ActionButton as $4oXwn$ActionButton} from "@react-spectrum/button";
|
|
8
8
|
import $4oXwn$spectrumiconsuiArrowDownSmall from "@spectrum-icons/ui/ArrowDownSmall";
|
|
@@ -10,7 +10,6 @@ import {useDOMRef as $4oXwn$useDOMRef, useStyleProps as $4oXwn$useStyleProps, cl
|
|
|
10
10
|
import {FocusScope as $4oXwn$FocusScope} from "@react-aria/focus";
|
|
11
11
|
import {mergeProps as $4oXwn$mergeProps, useSyncRef as $4oXwn$useSyncRef, useSlotId as $4oXwn$useSlotId, useLayoutEffect as $4oXwn$useLayoutEffect} from "@react-aria/utils";
|
|
12
12
|
import $4oXwn$react, {useContext as $4oXwn$useContext, useState as $4oXwn$useState, useRef as $4oXwn$useRef, useEffect as $4oXwn$useEffect} from "react";
|
|
13
|
-
import {useInteractOutside as $4oXwn$useInteractOutside} from "@react-aria/interactions";
|
|
14
13
|
import {useLocalizedStringFormatter as $4oXwn$useLocalizedStringFormatter, useLocale as $4oXwn$useLocale} from "@react-aria/i18n";
|
|
15
14
|
import {useMenu as $4oXwn$useMenu} from "@react-aria/menu";
|
|
16
15
|
import {useTreeState as $4oXwn$useTreeState} from "@react-stately/tree";
|
|
@@ -43,8 +42,7 @@ function $parcel$interopDefault(a) {
|
|
|
43
42
|
|
|
44
43
|
|
|
45
44
|
|
|
46
|
-
|
|
47
|
-
function $49b26f4b606348f6$var$Menu(props, ref) {
|
|
45
|
+
const $49b26f4b606348f6$export$d9b273488cd8ce6f = /*#__PURE__*/ (0, $4oXwn$react).forwardRef(function Menu(props, ref) {
|
|
48
46
|
let isSubmenu = true;
|
|
49
47
|
let contextProps = (0, $4oXwn$useContext)((0, $d94604d52c3e3feb$export$c7e742effb1c51e2));
|
|
50
48
|
let parentMenuContext = (0, $d94604d52c3e3feb$export$efa3856fc0e85e7f)();
|
|
@@ -87,14 +85,6 @@ function $49b26f4b606348f6$var$Menu(props, ref) {
|
|
|
87
85
|
let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);
|
|
88
86
|
hasOpenSubmenu = nextMenuLevel != null;
|
|
89
87
|
}
|
|
90
|
-
(0, $4oXwn$useInteractOutside)({
|
|
91
|
-
ref: domRef,
|
|
92
|
-
onInteractOutside: (e)=>{
|
|
93
|
-
var _trayContainerRef_current;
|
|
94
|
-
if (!(popoverContainer === null || popoverContainer === void 0 ? void 0 : popoverContainer.contains(e.target)) && !((_trayContainerRef_current = trayContainerRef.current) === null || _trayContainerRef_current === void 0 ? void 0 : _trayContainerRef_current.contains(e.target))) rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.close();
|
|
95
|
-
},
|
|
96
|
-
isDisabled: isSubmenu || !hasOpenSubmenu
|
|
97
|
-
});
|
|
98
88
|
return /*#__PURE__*/ (0, $4oXwn$react).createElement((0, $d94604d52c3e3feb$export$24aad8519b95b41b).Provider, {
|
|
99
89
|
value: {
|
|
100
90
|
popoverContainer: popoverContainer,
|
|
@@ -145,7 +135,7 @@ function $49b26f4b606348f6$var$Menu(props, ref) {
|
|
|
145
135
|
...leftOffset
|
|
146
136
|
}
|
|
147
137
|
})));
|
|
148
|
-
}
|
|
138
|
+
});
|
|
149
139
|
function $49b26f4b606348f6$export$3dfe97b5c32d8d8c(props) {
|
|
150
140
|
var _parentMenuTreeState_collection_getItem;
|
|
151
141
|
let { children: children, isSubmenu: isSubmenu, hasOpenSubmenu: hasOpenSubmenu, parentMenuTreeState: parentMenuTreeState, rootMenuTriggerState: rootMenuTriggerState, onBackButtonPress: onBackButtonPress, wrapperKeyDown: wrapperKeyDown, menuRef: menuRef } = props;
|
|
@@ -229,12 +219,7 @@ function $49b26f4b606348f6$export$3dfe97b5c32d8d8c(props) {
|
|
|
229
219
|
className: (0, $4oXwn$classNames)((0, ($parcel$interopDefault($4oXwn$menu_vars_cssmodulejs))), 'spectrum-Submenu-heading')
|
|
230
220
|
}, backButtonText)), children)));
|
|
231
221
|
}
|
|
232
|
-
/**
|
|
233
|
-
* Menus display a list of actions or options that a user can choose.
|
|
234
|
-
*/ // forwardRef doesn't support generic parameters, so cast the result to the correct type
|
|
235
|
-
// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
|
|
236
|
-
const $49b26f4b606348f6$export$d9b273488cd8ce6f = /*#__PURE__*/ (0, $4oXwn$react).forwardRef($49b26f4b606348f6$var$Menu);
|
|
237
222
|
|
|
238
223
|
|
|
239
|
-
export {$49b26f4b606348f6$export$
|
|
224
|
+
export {$49b26f4b606348f6$export$d9b273488cd8ce6f as Menu, $49b26f4b606348f6$export$3dfe97b5c32d8d8c as TrayHeaderWrapper};
|
|
240
225
|
//# sourceMappingURL=Menu.module.js.map
|
package/dist/Menu.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;AAqBD,SAAS,2BAAuB,KAA2B,EAAE,GAA2B;IACtF,IAAI,YAAY;IAChB,IAAI,eAAe,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACxC,IAAI,oBAAoB,CAAA,GAAA,yCAAkB;IAC1C,IAAI,wBAAC,oBAAoB,EAAE,OAAO,mBAAmB,EAAC,GAAG,qBAAqB;QAAC,sBAAsB,aAAa,KAAK;IAAA;IACvH,IAAI,CAAC,mBACH,YAAY;IAEd,IAAI,gBAAgB;QAClB,GAAG,CAAA,GAAA,iBAAS,EAAE,cAAc,MAAM;IACpC;IACA,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,CAAC,kBAAkB,oBAAoB,GAAG,CAAA,GAAA,eAAO,EAAsB;IAC3E,IAAI,mBAAmB,CAAA,GAAA,aAAK,EAAyB;IACrD,IAAI,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACzB,IAAI,aAAa,CAAA,GAAA,aAAK,EAAkB;IACxC,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,cAAM,EAAE,eAAe,OAAO;IAChD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IACjC,CAAA,GAAA,iBAAS,EAAE,cAAc;IACzB,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,eAAO,EAAE;QAAC,MAAM;IAAC;IACnD,IAAI,uBAAuB,CAAA,GAAA,aAAK,EAAsB;IACtD,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,oBAAoB,qBAAqB,OAAO,KAAK,oBAAoB,WAAW,IAAI,KAAK,GAAG;YAClG,qBAAqB,OAAO,GAAG;YAC/B,IAAI,QAAC,IAAI,EAAC,GAAG,iBAAiB,qBAAqB;YACnD,cAAc;gBAAC,MAAM,KAAK;YAAI;QAChC;IACF,GAAG;QAAC;QAAY;KAAiB;QAEjB;IAAhB,IAAI,YAAY,CAAA,6BAAA,aAAa,YAAY,cAAzB,wCAAA,6BAA6B;IAC7C,IAAI,mBAAmB,iCAAA,2CAAA,qBAAsB,iBAAiB,CAAC,YAAY,EAAE;IAC7E,IAAI,iBAAiB;IACrB,IAAI,oBAAoB,MAAM;QAC5B,IAAI,gBAAgB,MAAM,UAAU,CAAC,OAAO,CAAC;QAC7C,iBAAiB,iBAAiB;IACpC;IACA,CAAA,GAAA,yBAAiB,EAAE;QACjB,KAAK;QACL,mBAAmB,CAAC;gBACoC;YAAtD,IAAI,EAAC,6BAAA,uCAAA,iBAAkB,QAAQ,CAAC,EAAE,MAAM,MAAa,GAAC,4BAAA,iBAAiB,OAAO,cAAxB,gDAAA,0BAA0B,QAAQ,CAAC,EAAE,MAAM,IAC/F,iCAAA,2CAAA,qBAAsB,KAAK;QAE/B;QACA,YAAY,aAAa,CAAC;IAC5B;IAEA,qBACE,gCAAC,CAAA,GAAA,yCAAe,EAAE,QAAQ;QAAC,OAAO;8BAAC;8BAAkB;YAAkB,MAAM;YAAQ,SAAS;kCAAY;mBAAsB;QAAK;qBACnI,gCAAC;QAAI,OAAO;YAAC,QAAQ,iBAAiB,SAAS;QAAS;QAAG,KAAK;sBAChE,gCAAC,CAAA,GAAA,iBAAS,uBACR,gCAAC;QACC,mBAAmB,aAAa,iBAAiB;QACjD,gBAAgB;QAChB,WAAW;QACX,qBAAqB;QACrB,sBAAsB;QACtB,SAAS;qBACT,gCAAC;QACE,GAAG,SAAS;QACb,OAAO,CAAA,GAAA,iBAAS,EAAE,WAAW,KAAK,EAAE,UAAU,KAAK;QACnD,KAAK;QACL,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,sDAAK,GACL,iBACA,WAAW,SAAS;OAGvB;WAAI,MAAM,UAAU;KAAC,CAAC,GAAG,CAAC,CAAA;QACzB,IAAI,KAAK,IAAI,KAAK,WAChB,qBACE,gCAAC,CAAA,GAAA,yCAAU;YACT,KAAK,KAAK,GAAG;YACb,MAAM;YACN,OAAO;;QAIb,IAAI,yBACF,gCAAC,CAAA,GAAA,yCAAO;YACN,KAAK,KAAK,GAAG;YACb,MAAM;YACN,OAAO;;QAGX,IAAI,KAAK,OAAO,EACd,WAAW,KAAK,OAAO,CAAC;QAG1B,OAAO;IACT,MAGH,CAAA,iCAAA,2CAAA,qBAAsB,MAAM,mBAAI,gCAAC;QAAI,KAAK;QAAqB,OAAO;YAAC,OAAO;YAAS,UAAU;YAAY,KAAK;YAAI,GAAG,UAAU;QAAA;;AAI5I;AAEO,SAAS,0CAAkB,KAAK;QAGhB;IAFrB,IAAI,YAAC,QAAQ,aAAE,SAAS,kBAAE,cAAc,uBAAE,mBAAmB,wBAAE,oBAAoB,qBAAE,iBAAiB,kBAAE,cAAc,WAAE,OAAO,EAAC,GAAG;IACnI,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAChE,IAAI,iBAAiB,gCAAA,2CAAA,0CAAA,oBAAqB,UAAU,CAAC,OAAO,CAAC,iCAAA,2CAAA,qBAAsB,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,eAA5F,8DAAA,wCAA+F,SAAS;IAC7H,IAAI,kBAAkB,gBAAgB,MAAM,CAAC,cAAc;QACzD,gBAAgB;IAClB;IACA,IAAI,YAAY,CAAA,GAAA,gBAAQ;IACxB,IAAI,WAAW,CAAA,GAAA,wBAAgB;IAC/B,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAE1B,IAAI,CAAC,sBAAsB,wBAAwB,GAAG,CAAA,GAAA,eAAO,EAAE;IAC/D,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,CAAC,gBACH,wBAAwB;IAE5B,GAAG;QAAC;QAAgB;KAAS;IAE7B,IAAI,aAAa,CAAA,GAAA,aAAK,EAAwC;IAC9D,IAAI,wBAAwB;QAC1B,wBAAwB;QACxB,WAAW,OAAO,GAAG,WAAW;YAC9B;QACF,GAAG,MAAM,8BAA8B;IACzC;IAEA,CAAA,GAAA,gBAAQ,EAAE;QACR,OAAO;YACL,IAAI,WAAW,OAAO,EACpB,aAAa,WAAW,OAAO;QAEnC;IACF,GAAG,EAAE;IAEL,8FAA8F;IAC9F,6EAA6E;IAC7E,IAAI,kBAAkB,CAAA,GAAA,aAAK,EAAwC;IACnE,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,YAAY,aAAa,CAAC,kBAAkB,yBAAyB,8BACvE,gBAAgB,OAAO,GAAG,WAAW;YACnC,IAAI,YAAY,QAAQ,OAAO,CAAC,aAAa,CAAC;YAC9C,sBAAA,gCAAA,UAAW,KAAK;QAClB,GAAG;QAEL,OAAO;YACL,IAAI,gBAAgB,OAAO,EACzB,aAAa,gBAAgB,OAAO;QAExC;IACF,GAAG;QAAC;QAAgB;QAAU;QAAW;QAAS;KAAqB;IAEvE,qBACE,gFACE,gCAAC;QACC,MAAM,YAAY,WAAW;QAC7B,mBAAiB;QACjB,eAAa,YAAY;QACzB,eAAY;QACZ,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,sDAAK,GACL,yBACA;YACE,mCAAmC;YACnC,eAAe;YACf,CAAC,qBAAqB,EAAE;QAC1B;qBAGJ,gCAAC;QAAI,MAAK;QAAe,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,sDAAK,GAAG,4BAA4B;YAAC,sCAAsC;QAAQ;QAAI,WAAW;OAC9I,YAAY,aAAa,CAAC,gCACzB,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;qBACjC,gCAAC,CAAA,GAAA,mBAAW;QACV,cAAY;QACZ,SAAA;QACA,SAAS;OAER,cAAc,sBAAQ,gCAAC,CAAA,GAAA,oCAAa;QAAE,cAAc;YAAC,QAAQ;QAAQ;uBAAQ,gCAAC,CAAA,GAAA,oCAAa;QAAE,cAAc;YAAC,QAAQ;QAAO;uBAE9H,gCAAC;QAAG,IAAI;QAAW,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;OAA8B,kBAGlF;AAKX;AAEA;;CAEC,GACD,wFAAwF;AACxF,2GAA2G;AAC3G,MAAM,0DAAQ,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","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, {ReactElement, useContext, useEffect, useRef, useState} from 'react';\nimport {SpectrumMenuProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useInteractOutside} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenu} from '@react-aria/menu';\nimport {useTreeState} from '@react-stately/tree';\n\nfunction 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 useEffect(() => {\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 useInteractOutside({\n ref: domRef,\n onInteractOutside: (e) => {\n if (!popoverContainer?.contains(e.target as Node) && !trayContainerRef.current?.contains(e.target as Node)) {\n rootMenuTriggerState?.close();\n }\n },\n isDisabled: isSubmenu || !hasOpenSubmenu\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}\n\nexport function TrayHeaderWrapper(props) {\n let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n let backButtonText = parentMenuTreeState?.collection.getItem(rootMenuTriggerState?.expandedKeysStack.slice(-1)[0])?.textValue;\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\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\nconst _Menu = React.forwardRef(Menu) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_Menu as Menu};\n"],"names":[],"version":3,"file":"Menu.module.js.map"}
|
|
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, {ReactElement, useContext, useEffect, useRef, useState} from 'react';\nimport {SpectrumMenuProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenu} from '@react-aria/menu';\nimport {useTreeState} from '@react-stately/tree';\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 useEffect(() => {\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 let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n let backButtonText = parentMenuTreeState?.collection.getItem(rootMenuTriggerState?.expandedKeysStack.slice(-1)[0])?.textValue;\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
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var $2f9ceea24fba5443$exports = require("./intlStrings.main.js");
|
|
2
|
-
require("./vars.
|
|
2
|
+
require("./vars.5486a4f0.css");
|
|
3
3
|
var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
|
|
4
4
|
var $cac834c4bc0a51d3$exports = require("./context.main.js");
|
|
5
5
|
var $8PAEC$spectrumiconsuiCheckmarkMedium = require("@spectrum-icons/ui/CheckmarkMedium");
|
package/dist/MenuItem.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import $bVyMs$intlStringsmodulejs from "./intlStrings.mjs";
|
|
2
|
-
import "./vars.
|
|
2
|
+
import "./vars.5486a4f0.css";
|
|
3
3
|
import $bVyMs$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
|
|
4
4
|
import {useMenuContext as $d94604d52c3e3feb$export$21c7ab35b39f78ec, useSubmenuTriggerContext as $d94604d52c3e3feb$export$dc2161044aa0b36d} from "./context.mjs";
|
|
5
5
|
import $bVyMs$spectrumiconsuiCheckmarkMedium from "@spectrum-icons/ui/CheckmarkMedium";
|
package/dist/MenuItem.module.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import $bVyMs$intlStringsmodulejs from "./intlStrings.module.js";
|
|
2
|
-
import "./vars.
|
|
2
|
+
import "./vars.5486a4f0.css";
|
|
3
3
|
import $bVyMs$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
|
|
4
4
|
import {useMenuContext as $d94604d52c3e3feb$export$21c7ab35b39f78ec, useSubmenuTriggerContext as $d94604d52c3e3feb$export$dc2161044aa0b36d} from "./context.module.js";
|
|
5
5
|
import $bVyMs$spectrumiconsuiCheckmarkMedium from "@spectrum-icons/ui/CheckmarkMedium";
|
package/dist/MenuSection.main.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var $1d718563708db5b5$exports = require("./MenuItem.main.js");
|
|
2
|
-
require("./vars.
|
|
2
|
+
require("./vars.5486a4f0.css");
|
|
3
3
|
var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
|
|
4
4
|
var $3nsTP$reactspectrumutils = require("@react-spectrum/utils");
|
|
5
5
|
var $3nsTP$reactstatelycollections = require("@react-stately/collections");
|
package/dist/MenuSection.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {MenuItem as $48fb8f5e1202c980$export$2ce376c2cc3355c8} from "./MenuItem.mjs";
|
|
2
|
-
import "./vars.
|
|
2
|
+
import "./vars.5486a4f0.css";
|
|
3
3
|
import $9353d$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
|
|
4
4
|
import {classNames as $9353d$classNames} from "@react-spectrum/utils";
|
|
5
5
|
import {getChildNodes as $9353d$getChildNodes} from "@react-stately/collections";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {MenuItem as $48fb8f5e1202c980$export$2ce376c2cc3355c8} from "./MenuItem.module.js";
|
|
2
|
-
import "./vars.
|
|
2
|
+
import "./vars.5486a4f0.css";
|
|
3
3
|
import $9353d$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
|
|
4
4
|
import {classNames as $9353d$classNames} from "@react-spectrum/utils";
|
|
5
5
|
import {getChildNodes as $9353d$getChildNodes} from "@react-stately/collections";
|
package/dist/MenuTrigger.main.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var $cac834c4bc0a51d3$exports = require("./context.main.js");
|
|
2
|
-
require("./vars.
|
|
2
|
+
require("./vars.5486a4f0.css");
|
|
3
3
|
var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
|
|
4
4
|
var $6doGq$reactspectrumutils = require("@react-spectrum/utils");
|
|
5
5
|
var $6doGq$reactspectrumoverlays = require("@react-spectrum/overlays");
|
|
@@ -36,7 +36,7 @@ $parcel$export(module.exports, "MenuTrigger", () => $e56311f7204399c7$export$27d
|
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
const $e56311f7204399c7$export$27d2ad3c5815583e = /*#__PURE__*/ (0, $6doGq$react.forwardRef)(function MenuTrigger(props, ref) {
|
|
40
40
|
let triggerRef = (0, $6doGq$react.useRef)(null);
|
|
41
41
|
let domRef = (0, $6doGq$reactspectrumutils.useDOMRef)(ref);
|
|
42
42
|
let menuTriggerRef = domRef || triggerRef;
|
|
@@ -76,13 +76,25 @@ function $e56311f7204399c7$var$MenuTrigger(props, ref) {
|
|
|
76
76
|
}),
|
|
77
77
|
state: state
|
|
78
78
|
};
|
|
79
|
+
// Close when clicking outside the root menu when a submenu is open.
|
|
80
|
+
let rootOverlayRef = (0, $6doGq$react.useRef)(null);
|
|
81
|
+
let rootOverlayDomRef = (0, $6doGq$reactspectrumutils.unwrapDOMRef)(rootOverlayRef);
|
|
82
|
+
(0, $6doGq$reactariainteractions.useInteractOutside)({
|
|
83
|
+
ref: rootOverlayDomRef,
|
|
84
|
+
onInteractOutside: ()=>{
|
|
85
|
+
state === null || state === void 0 ? void 0 : state.close();
|
|
86
|
+
},
|
|
87
|
+
isDisabled: !state.isOpen || state.expandedKeysStack.length === 0
|
|
88
|
+
});
|
|
79
89
|
// On small screen devices, the menu is rendered in a tray, otherwise a popover.
|
|
80
90
|
let overlay;
|
|
81
91
|
if (isMobile) overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($6doGq$react))).createElement((0, $6doGq$reactspectrumoverlays.Tray), {
|
|
82
92
|
state: state,
|
|
83
|
-
isFixedHeight: true
|
|
93
|
+
isFixedHeight: true,
|
|
94
|
+
ref: rootOverlayRef
|
|
84
95
|
}, menu);
|
|
85
96
|
else overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($6doGq$react))).createElement((0, $6doGq$reactspectrumoverlays.Popover), {
|
|
97
|
+
ref: rootOverlayRef,
|
|
86
98
|
UNSAFE_style: {
|
|
87
99
|
clipPath: 'unset',
|
|
88
100
|
overflow: 'visible',
|
|
@@ -109,11 +121,7 @@ function $e56311f7204399c7$var$MenuTrigger(props, ref) {
|
|
|
109
121
|
}, menuTrigger)), /*#__PURE__*/ (0, ($parcel$interopDefault($6doGq$react))).createElement((0, $cac834c4bc0a51d3$exports.MenuContext).Provider, {
|
|
110
122
|
value: menuContext
|
|
111
123
|
}, overlay));
|
|
112
|
-
}
|
|
113
|
-
/**
|
|
114
|
-
* The MenuTrigger serves as a wrapper around a Menu and its associated trigger,
|
|
115
|
-
* linking the Menu's open state with the trigger's press state.
|
|
116
|
-
*/ let $e56311f7204399c7$export$27d2ad3c5815583e = /*#__PURE__*/ (0, $6doGq$react.forwardRef)($e56311f7204399c7$var$MenuTrigger);
|
|
124
|
+
});
|
|
117
125
|
|
|
118
126
|
|
|
119
127
|
//# sourceMappingURL=MenuTrigger.main.js.map
|