@react-spectrum/menu 3.21.0 → 3.21.2

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.
Files changed (39) hide show
  1. package/dist/ActionMenu.main.js +2 -5
  2. package/dist/ActionMenu.main.js.map +1 -1
  3. package/dist/ActionMenu.mjs +2 -5
  4. package/dist/ActionMenu.module.js +2 -5
  5. package/dist/ActionMenu.module.js.map +1 -1
  6. package/dist/ContextualHelpTrigger.main.js +1 -1
  7. package/dist/ContextualHelpTrigger.mjs +1 -1
  8. package/dist/ContextualHelpTrigger.module.js +1 -1
  9. package/dist/Menu.main.js +4 -19
  10. package/dist/Menu.main.js.map +1 -1
  11. package/dist/Menu.mjs +4 -19
  12. package/dist/Menu.module.js +4 -19
  13. package/dist/Menu.module.js.map +1 -1
  14. package/dist/MenuItem.main.js +1 -1
  15. package/dist/MenuItem.mjs +1 -1
  16. package/dist/MenuItem.module.js +1 -1
  17. package/dist/MenuSection.main.js +1 -1
  18. package/dist/MenuSection.mjs +1 -1
  19. package/dist/MenuSection.module.js +1 -1
  20. package/dist/MenuTrigger.main.js +16 -8
  21. package/dist/MenuTrigger.main.js.map +1 -1
  22. package/dist/MenuTrigger.mjs +19 -11
  23. package/dist/MenuTrigger.module.js +19 -11
  24. package/dist/MenuTrigger.module.js.map +1 -1
  25. package/dist/SubmenuTrigger.main.js +1 -1
  26. package/dist/SubmenuTrigger.mjs +1 -1
  27. package/dist/SubmenuTrigger.module.js +1 -1
  28. package/dist/menu_vars_css.main.js +55 -55
  29. package/dist/menu_vars_css.mjs +55 -55
  30. package/dist/menu_vars_css.module.js +55 -55
  31. package/dist/types.d.ts +1 -1
  32. package/dist/types.d.ts.map +1 -1
  33. package/dist/{vars.a1f9fd59.css → vars.5486a4f0.css} +117 -116
  34. package/dist/vars.5486a4f0.css.map +1 -0
  35. package/package.json +23 -23
  36. package/src/ActionMenu.tsx +5 -8
  37. package/src/Menu.tsx +7 -20
  38. package/src/MenuTrigger.tsx +21 -12
  39. package/dist/vars.a1f9fd59.css.map +0 -1
@@ -37,7 +37,7 @@ $parcel$export(module.exports, "ActionMenu", () => $53a2f2636c97a561$export$ed57
37
37
 
38
38
 
39
39
 
40
- function $53a2f2636c97a561$var$ActionMenu(props, ref) {
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;;;;;;;;;AAeD,SAAS,iCAA6B,KAAiC,EAAE,GAAoC;IAC3G,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;AAEA;;CAEC,GACD,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE","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\nfunction 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}\n\n/**\n * ActionMenu combines an ActionButton with a Menu for simple \"more actions\" use cases.\n */\nconst _ActionMenu = forwardRef(ActionMenu) as <T>(props: SpectrumActionMenuProps<T> & {ref?: FocusableRef<HTMLButtonElement>}) => ReactElement;\nexport {_ActionMenu as ActionMenu};\n"],"names":[],"version":3,"file":"ActionMenu.main.js.map"}
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"}
@@ -31,7 +31,7 @@ function $parcel$interopDefault(a) {
31
31
 
32
32
 
33
33
 
34
- function $43fa9949e6af393d$var$ActionMenu(props, ref) {
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
- function $43fa9949e6af393d$var$ActionMenu(props, ref) {
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;;;;;;;;;AAeD,SAAS,iCAA6B,KAAiC,EAAE,GAAoC;IAC3G,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;AAEA;;CAEC,GACD,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE","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\nfunction 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}\n\n/**\n * ActionMenu combines an ActionButton with a Menu for simple \"more actions\" use cases.\n */\nconst _ActionMenu = forwardRef(ActionMenu) as <T>(props: SpectrumActionMenuProps<T> & {ref?: FocusableRef<HTMLButtonElement>}) => ReactElement;\nexport {_ActionMenu as ActionMenu};\n"],"names":[],"version":3,"file":"ActionMenu.module.js.map"}
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.a1f9fd59.css");
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.a1f9fd59.css";
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.a1f9fd59.css";
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.a1f9fd59.css");
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
@@ -1 +1 @@
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 {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.a1f9fd59.css";
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$3dfe97b5c32d8d8c as TrayHeaderWrapper, $49b26f4b606348f6$export$d9b273488cd8ce6f as Menu};
224
+ export {$49b26f4b606348f6$export$d9b273488cd8ce6f as Menu, $49b26f4b606348f6$export$3dfe97b5c32d8d8c as TrayHeaderWrapper};
240
225
  //# sourceMappingURL=Menu.module.js.map
@@ -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.a1f9fd59.css";
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$3dfe97b5c32d8d8c as TrayHeaderWrapper, $49b26f4b606348f6$export$d9b273488cd8ce6f as Menu};
224
+ export {$49b26f4b606348f6$export$d9b273488cd8ce6f as Menu, $49b26f4b606348f6$export$3dfe97b5c32d8d8c as TrayHeaderWrapper};
240
225
  //# sourceMappingURL=Menu.module.js.map
@@ -1 +1 @@
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 {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"}
@@ -1,5 +1,5 @@
1
1
  var $2f9ceea24fba5443$exports = require("./intlStrings.main.js");
2
- require("./vars.a1f9fd59.css");
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.a1f9fd59.css";
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";
@@ -1,5 +1,5 @@
1
1
  import $bVyMs$intlStringsmodulejs from "./intlStrings.module.js";
2
- import "./vars.a1f9fd59.css";
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";
@@ -1,5 +1,5 @@
1
1
  var $1d718563708db5b5$exports = require("./MenuItem.main.js");
2
- require("./vars.a1f9fd59.css");
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");
@@ -1,5 +1,5 @@
1
1
  import {MenuItem as $48fb8f5e1202c980$export$2ce376c2cc3355c8} from "./MenuItem.mjs";
2
- import "./vars.a1f9fd59.css";
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.a1f9fd59.css";
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";
@@ -1,5 +1,5 @@
1
1
  var $cac834c4bc0a51d3$exports = require("./context.main.js");
2
- require("./vars.a1f9fd59.css");
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
- function $e56311f7204399c7$var$MenuTrigger(props, ref) {
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