@react-spectrum/menu 3.22.11 → 3.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (249) hide show
  1. package/dist/import.mjs +6 -8
  2. package/dist/main.js +12 -14
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +6 -8
  5. package/dist/module.js.map +1 -1
  6. package/dist/types/src/index.d.ts +8 -0
  7. package/package.json +14 -46
  8. package/src/index.ts +9 -9
  9. package/dist/ActionMenu.main.js +0 -67
  10. package/dist/ActionMenu.main.js.map +0 -1
  11. package/dist/ActionMenu.mjs +0 -62
  12. package/dist/ActionMenu.module.js +0 -62
  13. package/dist/ActionMenu.module.js.map +0 -1
  14. package/dist/ContextualHelpTrigger.main.js +0 -192
  15. package/dist/ContextualHelpTrigger.main.js.map +0 -1
  16. package/dist/ContextualHelpTrigger.mjs +0 -187
  17. package/dist/ContextualHelpTrigger.module.js +0 -187
  18. package/dist/ContextualHelpTrigger.module.js.map +0 -1
  19. package/dist/Menu.main.js +0 -235
  20. package/dist/Menu.main.js.map +0 -1
  21. package/dist/Menu.mjs +0 -229
  22. package/dist/Menu.module.js +0 -229
  23. package/dist/Menu.module.js.map +0 -1
  24. package/dist/MenuItem.main.js +0 -149
  25. package/dist/MenuItem.main.js.map +0 -1
  26. package/dist/MenuItem.mjs +0 -144
  27. package/dist/MenuItem.module.js +0 -144
  28. package/dist/MenuItem.module.js.map +0 -1
  29. package/dist/MenuSection.main.js +0 -81
  30. package/dist/MenuSection.main.js.map +0 -1
  31. package/dist/MenuSection.mjs +0 -76
  32. package/dist/MenuSection.module.js +0 -76
  33. package/dist/MenuSection.module.js.map +0 -1
  34. package/dist/MenuTrigger.main.js +0 -128
  35. package/dist/MenuTrigger.main.js.map +0 -1
  36. package/dist/MenuTrigger.mjs +0 -123
  37. package/dist/MenuTrigger.module.js +0 -123
  38. package/dist/MenuTrigger.module.js.map +0 -1
  39. package/dist/SubmenuTrigger.main.js +0 -154
  40. package/dist/SubmenuTrigger.main.js.map +0 -1
  41. package/dist/SubmenuTrigger.mjs +0 -149
  42. package/dist/SubmenuTrigger.module.js +0 -149
  43. package/dist/SubmenuTrigger.module.js.map +0 -1
  44. package/dist/ar-AE.main.js +0 -8
  45. package/dist/ar-AE.main.js.map +0 -1
  46. package/dist/ar-AE.mjs +0 -10
  47. package/dist/ar-AE.module.js +0 -10
  48. package/dist/ar-AE.module.js.map +0 -1
  49. package/dist/bg-BG.main.js +0 -8
  50. package/dist/bg-BG.main.js.map +0 -1
  51. package/dist/bg-BG.mjs +0 -10
  52. package/dist/bg-BG.module.js +0 -10
  53. package/dist/bg-BG.module.js.map +0 -1
  54. package/dist/context.main.js +0 -43
  55. package/dist/context.main.js.map +0 -1
  56. package/dist/context.mjs +0 -29
  57. package/dist/context.module.js +0 -29
  58. package/dist/context.module.js.map +0 -1
  59. package/dist/contextualhelp_vars_css.main.js +0 -23
  60. package/dist/contextualhelp_vars_css.main.js.map +0 -1
  61. package/dist/contextualhelp_vars_css.mjs +0 -25
  62. package/dist/contextualhelp_vars_css.module.js +0 -25
  63. package/dist/contextualhelp_vars_css.module.js.map +0 -1
  64. package/dist/cs-CZ.main.js +0 -8
  65. package/dist/cs-CZ.main.js.map +0 -1
  66. package/dist/cs-CZ.mjs +0 -10
  67. package/dist/cs-CZ.module.js +0 -10
  68. package/dist/cs-CZ.module.js.map +0 -1
  69. package/dist/da-DK.main.js +0 -8
  70. package/dist/da-DK.main.js.map +0 -1
  71. package/dist/da-DK.mjs +0 -10
  72. package/dist/da-DK.module.js +0 -10
  73. package/dist/da-DK.module.js.map +0 -1
  74. package/dist/de-DE.main.js +0 -8
  75. package/dist/de-DE.main.js.map +0 -1
  76. package/dist/de-DE.mjs +0 -10
  77. package/dist/de-DE.module.js +0 -10
  78. package/dist/de-DE.module.js.map +0 -1
  79. package/dist/el-GR.main.js +0 -8
  80. package/dist/el-GR.main.js.map +0 -1
  81. package/dist/el-GR.mjs +0 -10
  82. package/dist/el-GR.module.js +0 -10
  83. package/dist/el-GR.module.js.map +0 -1
  84. package/dist/en-US.main.js +0 -8
  85. package/dist/en-US.main.js.map +0 -1
  86. package/dist/en-US.mjs +0 -10
  87. package/dist/en-US.module.js +0 -10
  88. package/dist/en-US.module.js.map +0 -1
  89. package/dist/es-ES.main.js +0 -8
  90. package/dist/es-ES.main.js.map +0 -1
  91. package/dist/es-ES.mjs +0 -10
  92. package/dist/es-ES.module.js +0 -10
  93. package/dist/es-ES.module.js.map +0 -1
  94. package/dist/et-EE.main.js +0 -8
  95. package/dist/et-EE.main.js.map +0 -1
  96. package/dist/et-EE.mjs +0 -10
  97. package/dist/et-EE.module.js +0 -10
  98. package/dist/et-EE.module.js.map +0 -1
  99. package/dist/fi-FI.main.js +0 -8
  100. package/dist/fi-FI.main.js.map +0 -1
  101. package/dist/fi-FI.mjs +0 -10
  102. package/dist/fi-FI.module.js +0 -10
  103. package/dist/fi-FI.module.js.map +0 -1
  104. package/dist/fr-FR.main.js +0 -8
  105. package/dist/fr-FR.main.js.map +0 -1
  106. package/dist/fr-FR.mjs +0 -10
  107. package/dist/fr-FR.module.js +0 -10
  108. package/dist/fr-FR.module.js.map +0 -1
  109. package/dist/he-IL.main.js +0 -8
  110. package/dist/he-IL.main.js.map +0 -1
  111. package/dist/he-IL.mjs +0 -10
  112. package/dist/he-IL.module.js +0 -10
  113. package/dist/he-IL.module.js.map +0 -1
  114. package/dist/hr-HR.main.js +0 -8
  115. package/dist/hr-HR.main.js.map +0 -1
  116. package/dist/hr-HR.mjs +0 -10
  117. package/dist/hr-HR.module.js +0 -10
  118. package/dist/hr-HR.module.js.map +0 -1
  119. package/dist/hu-HU.main.js +0 -8
  120. package/dist/hu-HU.main.js.map +0 -1
  121. package/dist/hu-HU.mjs +0 -10
  122. package/dist/hu-HU.module.js +0 -10
  123. package/dist/hu-HU.module.js.map +0 -1
  124. package/dist/intlStrings.main.js +0 -108
  125. package/dist/intlStrings.main.js.map +0 -1
  126. package/dist/intlStrings.mjs +0 -110
  127. package/dist/intlStrings.module.js +0 -110
  128. package/dist/intlStrings.module.js.map +0 -1
  129. package/dist/it-IT.main.js +0 -8
  130. package/dist/it-IT.main.js.map +0 -1
  131. package/dist/it-IT.mjs +0 -10
  132. package/dist/it-IT.module.js +0 -10
  133. package/dist/it-IT.module.js.map +0 -1
  134. package/dist/ja-JP.main.js +0 -8
  135. package/dist/ja-JP.main.js.map +0 -1
  136. package/dist/ja-JP.mjs +0 -10
  137. package/dist/ja-JP.module.js +0 -10
  138. package/dist/ja-JP.module.js.map +0 -1
  139. package/dist/ko-KR.main.js +0 -8
  140. package/dist/ko-KR.main.js.map +0 -1
  141. package/dist/ko-KR.mjs +0 -10
  142. package/dist/ko-KR.module.js +0 -10
  143. package/dist/ko-KR.module.js.map +0 -1
  144. package/dist/lt-LT.main.js +0 -8
  145. package/dist/lt-LT.main.js.map +0 -1
  146. package/dist/lt-LT.mjs +0 -10
  147. package/dist/lt-LT.module.js +0 -10
  148. package/dist/lt-LT.module.js.map +0 -1
  149. package/dist/lv-LV.main.js +0 -8
  150. package/dist/lv-LV.main.js.map +0 -1
  151. package/dist/lv-LV.mjs +0 -10
  152. package/dist/lv-LV.module.js +0 -10
  153. package/dist/lv-LV.module.js.map +0 -1
  154. package/dist/menu.2ec1fdaf.css +0 -570
  155. package/dist/menu.2ec1fdaf.css.map +0 -1
  156. package/dist/menu.5b49954a.css +0 -30
  157. package/dist/menu.5b49954a.css.map +0 -1
  158. package/dist/menu_vars_css.main.js +0 -177
  159. package/dist/menu_vars_css.main.js.map +0 -1
  160. package/dist/menu_vars_css.mjs +0 -179
  161. package/dist/menu_vars_css.module.js +0 -179
  162. package/dist/menu_vars_css.module.js.map +0 -1
  163. package/dist/nb-NO.main.js +0 -8
  164. package/dist/nb-NO.main.js.map +0 -1
  165. package/dist/nb-NO.mjs +0 -10
  166. package/dist/nb-NO.module.js +0 -10
  167. package/dist/nb-NO.module.js.map +0 -1
  168. package/dist/nl-NL.main.js +0 -8
  169. package/dist/nl-NL.main.js.map +0 -1
  170. package/dist/nl-NL.mjs +0 -10
  171. package/dist/nl-NL.module.js +0 -10
  172. package/dist/nl-NL.module.js.map +0 -1
  173. package/dist/pl-PL.main.js +0 -8
  174. package/dist/pl-PL.main.js.map +0 -1
  175. package/dist/pl-PL.mjs +0 -10
  176. package/dist/pl-PL.module.js +0 -10
  177. package/dist/pl-PL.module.js.map +0 -1
  178. package/dist/pt-BR.main.js +0 -8
  179. package/dist/pt-BR.main.js.map +0 -1
  180. package/dist/pt-BR.mjs +0 -10
  181. package/dist/pt-BR.module.js +0 -10
  182. package/dist/pt-BR.module.js.map +0 -1
  183. package/dist/pt-PT.main.js +0 -8
  184. package/dist/pt-PT.main.js.map +0 -1
  185. package/dist/pt-PT.mjs +0 -10
  186. package/dist/pt-PT.module.js +0 -10
  187. package/dist/pt-PT.module.js.map +0 -1
  188. package/dist/ro-RO.main.js +0 -8
  189. package/dist/ro-RO.main.js.map +0 -1
  190. package/dist/ro-RO.mjs +0 -10
  191. package/dist/ro-RO.module.js +0 -10
  192. package/dist/ro-RO.module.js.map +0 -1
  193. package/dist/ru-RU.main.js +0 -8
  194. package/dist/ru-RU.main.js.map +0 -1
  195. package/dist/ru-RU.mjs +0 -10
  196. package/dist/ru-RU.module.js +0 -10
  197. package/dist/ru-RU.module.js.map +0 -1
  198. package/dist/sk-SK.main.js +0 -8
  199. package/dist/sk-SK.main.js.map +0 -1
  200. package/dist/sk-SK.mjs +0 -10
  201. package/dist/sk-SK.module.js +0 -10
  202. package/dist/sk-SK.module.js.map +0 -1
  203. package/dist/sl-SI.main.js +0 -8
  204. package/dist/sl-SI.main.js.map +0 -1
  205. package/dist/sl-SI.mjs +0 -10
  206. package/dist/sl-SI.module.js +0 -10
  207. package/dist/sl-SI.module.js.map +0 -1
  208. package/dist/sr-SP.main.js +0 -8
  209. package/dist/sr-SP.main.js.map +0 -1
  210. package/dist/sr-SP.mjs +0 -10
  211. package/dist/sr-SP.module.js +0 -10
  212. package/dist/sr-SP.module.js.map +0 -1
  213. package/dist/sv-SE.main.js +0 -8
  214. package/dist/sv-SE.main.js.map +0 -1
  215. package/dist/sv-SE.mjs +0 -10
  216. package/dist/sv-SE.module.js +0 -10
  217. package/dist/sv-SE.module.js.map +0 -1
  218. package/dist/tr-TR.main.js +0 -8
  219. package/dist/tr-TR.main.js.map +0 -1
  220. package/dist/tr-TR.mjs +0 -10
  221. package/dist/tr-TR.module.js +0 -10
  222. package/dist/tr-TR.module.js.map +0 -1
  223. package/dist/types.d.ts +0 -43
  224. package/dist/types.d.ts.map +0 -1
  225. package/dist/uk-UA.main.js +0 -8
  226. package/dist/uk-UA.main.js.map +0 -1
  227. package/dist/uk-UA.mjs +0 -10
  228. package/dist/uk-UA.module.js +0 -10
  229. package/dist/uk-UA.module.js.map +0 -1
  230. package/dist/zh-CN.main.js +0 -8
  231. package/dist/zh-CN.main.js.map +0 -1
  232. package/dist/zh-CN.mjs +0 -10
  233. package/dist/zh-CN.module.js +0 -10
  234. package/dist/zh-CN.module.js.map +0 -1
  235. package/dist/zh-TW.main.js +0 -8
  236. package/dist/zh-TW.main.js.map +0 -1
  237. package/dist/zh-TW.mjs +0 -10
  238. package/dist/zh-TW.module.js +0 -10
  239. package/dist/zh-TW.module.js.map +0 -1
  240. package/src/ActionMenu.tsx +0 -58
  241. package/src/ContextualHelpTrigger.tsx +0 -194
  242. package/src/Menu.tsx +0 -228
  243. package/src/MenuItem.tsx +0 -159
  244. package/src/MenuSection.tsx +0 -100
  245. package/src/MenuTrigger.tsx +0 -125
  246. package/src/SubmenuTrigger.tsx +0 -154
  247. package/src/context.ts +0 -63
  248. package/src/overlays.css +0 -32
  249. package/src/useCloseOnScroll.ts +0 -65
@@ -1,123 +0,0 @@
1
- import {MenuContext as $d94604d52c3e3feb$export$c7e742effb1c51e2} from "./context.mjs";
2
- import "./menu.2ec1fdaf.css";
3
- import $5R0iF$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
4
- import {useDOMRef as $5R0iF$useDOMRef, useIsMobileDevice as $5R0iF$useIsMobileDevice, classNames as $5R0iF$classNames, unwrapDOMRef as $5R0iF$unwrapDOMRef, SlotProvider as $5R0iF$SlotProvider} from "@react-spectrum/utils";
5
- import {Tray as $5R0iF$Tray, Popover as $5R0iF$Popover} from "@react-spectrum/overlays";
6
- import {useInteractOutside as $5R0iF$useInteractOutside, PressResponder as $5R0iF$PressResponder} from "@react-aria/interactions";
7
- import $5R0iF$react, {forwardRef as $5R0iF$forwardRef, useRef as $5R0iF$useRef, Fragment as $5R0iF$Fragment} from "react";
8
- import {useMenuTrigger as $5R0iF$useMenuTrigger} from "@react-aria/menu";
9
- import {useMenuTriggerState as $5R0iF$useMenuTriggerState} from "@react-stately/menu";
10
-
11
-
12
- function $parcel$interopDefault(a) {
13
- return a && a.__esModule ? a.default : a;
14
- }
15
- /*
16
- * Copyright 2020 Adobe. All rights reserved.
17
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
18
- * you may not use this file except in compliance with the License. You may obtain a copy
19
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
20
- *
21
- * Unless required by applicable law or agreed to in writing, software distributed under
22
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
23
- * OF ANY KIND, either express or implied. See the License for the specific language
24
- * governing permissions and limitations under the License.
25
- */
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
- const $aa0b855f135b86e3$export$27d2ad3c5815583e = /*#__PURE__*/ (0, $5R0iF$forwardRef)(function MenuTrigger(props, ref) {
34
- let triggerRef = (0, $5R0iF$useRef)(null);
35
- let domRef = (0, $5R0iF$useDOMRef)(ref);
36
- let menuTriggerRef = domRef || triggerRef;
37
- let menuRef = (0, $5R0iF$useRef)(null);
38
- let { children: children, align: align = 'start', shouldFlip: shouldFlip = true, direction: direction = 'bottom', closeOnSelect: closeOnSelect, trigger: trigger = 'press' } = props;
39
- let [menuTrigger, menu] = (0, $5R0iF$react).Children.toArray(children);
40
- let state = (0, $5R0iF$useMenuTriggerState)(props);
41
- let { menuTriggerProps: menuTriggerProps, menuProps: menuProps } = (0, $5R0iF$useMenuTrigger)({
42
- trigger: trigger
43
- }, state, menuTriggerRef);
44
- let initialPlacement;
45
- switch(direction){
46
- case 'left':
47
- case 'right':
48
- case 'start':
49
- case 'end':
50
- initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}`;
51
- break;
52
- case 'bottom':
53
- case 'top':
54
- default:
55
- initialPlacement = `${direction} ${align}`;
56
- }
57
- let isMobile = (0, $5R0iF$useIsMobileDevice)();
58
- let menuContext = {
59
- ...menuProps,
60
- ref: menuRef,
61
- onClose: state.close,
62
- closeOnSelect: closeOnSelect,
63
- autoFocus: state.focusStrategy || true,
64
- UNSAFE_style: isMobile ? {
65
- width: '100%',
66
- maxHeight: 'inherit'
67
- } : undefined,
68
- UNSAFE_className: (0, $5R0iF$classNames)((0, ($parcel$interopDefault($5R0iF$menu_vars_cssmodulejs))), {
69
- 'spectrum-Menu-popover': !isMobile
70
- }),
71
- state: state
72
- };
73
- // Close when clicking outside the root menu when a submenu is open.
74
- let rootOverlayRef = (0, $5R0iF$useRef)(null);
75
- let rootOverlayDomRef = (0, $5R0iF$unwrapDOMRef)(rootOverlayRef);
76
- (0, $5R0iF$useInteractOutside)({
77
- ref: rootOverlayDomRef,
78
- onInteractOutside: ()=>{
79
- state === null || state === void 0 ? void 0 : state.close();
80
- },
81
- isDisabled: !state.isOpen || state.expandedKeysStack.length === 0
82
- });
83
- // On small screen devices, the menu is rendered in a tray, otherwise a popover.
84
- let overlay;
85
- if (isMobile) overlay = /*#__PURE__*/ (0, $5R0iF$react).createElement((0, $5R0iF$Tray), {
86
- state: state,
87
- isFixedHeight: true,
88
- ref: rootOverlayRef
89
- }, menu);
90
- else overlay = /*#__PURE__*/ (0, $5R0iF$react).createElement((0, $5R0iF$Popover), {
91
- ref: rootOverlayRef,
92
- UNSAFE_style: {
93
- clipPath: 'unset',
94
- overflow: 'visible',
95
- filter: 'unset',
96
- borderWidth: '0px'
97
- },
98
- state: state,
99
- triggerRef: menuTriggerRef,
100
- scrollRef: menuRef,
101
- placement: initialPlacement,
102
- hideArrow: true,
103
- shouldFlip: shouldFlip,
104
- shouldContainFocus: true
105
- }, menu);
106
- return /*#__PURE__*/ (0, $5R0iF$react).createElement((0, $5R0iF$Fragment), null, /*#__PURE__*/ (0, $5R0iF$react).createElement((0, $5R0iF$SlotProvider), {
107
- slots: {
108
- actionButton: {
109
- holdAffordance: trigger === 'longPress'
110
- }
111
- }
112
- }, /*#__PURE__*/ (0, $5R0iF$react).createElement((0, $5R0iF$PressResponder), {
113
- ...menuTriggerProps,
114
- ref: menuTriggerRef,
115
- isPressed: state.isOpen
116
- }, menuTrigger)), /*#__PURE__*/ (0, $5R0iF$react).createElement((0, $d94604d52c3e3feb$export$c7e742effb1c51e2).Provider, {
117
- value: menuContext
118
- }, overlay));
119
- });
120
-
121
-
122
- export {$aa0b855f135b86e3$export$27d2ad3c5815583e as MenuTrigger};
123
- //# sourceMappingURL=MenuTrigger.module.js.map
@@ -1,123 +0,0 @@
1
- import {MenuContext as $d94604d52c3e3feb$export$c7e742effb1c51e2} from "./context.module.js";
2
- import "./menu.2ec1fdaf.css";
3
- import $5R0iF$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
4
- import {useDOMRef as $5R0iF$useDOMRef, useIsMobileDevice as $5R0iF$useIsMobileDevice, classNames as $5R0iF$classNames, unwrapDOMRef as $5R0iF$unwrapDOMRef, SlotProvider as $5R0iF$SlotProvider} from "@react-spectrum/utils";
5
- import {Tray as $5R0iF$Tray, Popover as $5R0iF$Popover} from "@react-spectrum/overlays";
6
- import {useInteractOutside as $5R0iF$useInteractOutside, PressResponder as $5R0iF$PressResponder} from "@react-aria/interactions";
7
- import $5R0iF$react, {forwardRef as $5R0iF$forwardRef, useRef as $5R0iF$useRef, Fragment as $5R0iF$Fragment} from "react";
8
- import {useMenuTrigger as $5R0iF$useMenuTrigger} from "@react-aria/menu";
9
- import {useMenuTriggerState as $5R0iF$useMenuTriggerState} from "@react-stately/menu";
10
-
11
-
12
- function $parcel$interopDefault(a) {
13
- return a && a.__esModule ? a.default : a;
14
- }
15
- /*
16
- * Copyright 2020 Adobe. All rights reserved.
17
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
18
- * you may not use this file except in compliance with the License. You may obtain a copy
19
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
20
- *
21
- * Unless required by applicable law or agreed to in writing, software distributed under
22
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
23
- * OF ANY KIND, either express or implied. See the License for the specific language
24
- * governing permissions and limitations under the License.
25
- */
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
- const $aa0b855f135b86e3$export$27d2ad3c5815583e = /*#__PURE__*/ (0, $5R0iF$forwardRef)(function MenuTrigger(props, ref) {
34
- let triggerRef = (0, $5R0iF$useRef)(null);
35
- let domRef = (0, $5R0iF$useDOMRef)(ref);
36
- let menuTriggerRef = domRef || triggerRef;
37
- let menuRef = (0, $5R0iF$useRef)(null);
38
- let { children: children, align: align = 'start', shouldFlip: shouldFlip = true, direction: direction = 'bottom', closeOnSelect: closeOnSelect, trigger: trigger = 'press' } = props;
39
- let [menuTrigger, menu] = (0, $5R0iF$react).Children.toArray(children);
40
- let state = (0, $5R0iF$useMenuTriggerState)(props);
41
- let { menuTriggerProps: menuTriggerProps, menuProps: menuProps } = (0, $5R0iF$useMenuTrigger)({
42
- trigger: trigger
43
- }, state, menuTriggerRef);
44
- let initialPlacement;
45
- switch(direction){
46
- case 'left':
47
- case 'right':
48
- case 'start':
49
- case 'end':
50
- initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}`;
51
- break;
52
- case 'bottom':
53
- case 'top':
54
- default:
55
- initialPlacement = `${direction} ${align}`;
56
- }
57
- let isMobile = (0, $5R0iF$useIsMobileDevice)();
58
- let menuContext = {
59
- ...menuProps,
60
- ref: menuRef,
61
- onClose: state.close,
62
- closeOnSelect: closeOnSelect,
63
- autoFocus: state.focusStrategy || true,
64
- UNSAFE_style: isMobile ? {
65
- width: '100%',
66
- maxHeight: 'inherit'
67
- } : undefined,
68
- UNSAFE_className: (0, $5R0iF$classNames)((0, ($parcel$interopDefault($5R0iF$menu_vars_cssmodulejs))), {
69
- 'spectrum-Menu-popover': !isMobile
70
- }),
71
- state: state
72
- };
73
- // Close when clicking outside the root menu when a submenu is open.
74
- let rootOverlayRef = (0, $5R0iF$useRef)(null);
75
- let rootOverlayDomRef = (0, $5R0iF$unwrapDOMRef)(rootOverlayRef);
76
- (0, $5R0iF$useInteractOutside)({
77
- ref: rootOverlayDomRef,
78
- onInteractOutside: ()=>{
79
- state === null || state === void 0 ? void 0 : state.close();
80
- },
81
- isDisabled: !state.isOpen || state.expandedKeysStack.length === 0
82
- });
83
- // On small screen devices, the menu is rendered in a tray, otherwise a popover.
84
- let overlay;
85
- if (isMobile) overlay = /*#__PURE__*/ (0, $5R0iF$react).createElement((0, $5R0iF$Tray), {
86
- state: state,
87
- isFixedHeight: true,
88
- ref: rootOverlayRef
89
- }, menu);
90
- else overlay = /*#__PURE__*/ (0, $5R0iF$react).createElement((0, $5R0iF$Popover), {
91
- ref: rootOverlayRef,
92
- UNSAFE_style: {
93
- clipPath: 'unset',
94
- overflow: 'visible',
95
- filter: 'unset',
96
- borderWidth: '0px'
97
- },
98
- state: state,
99
- triggerRef: menuTriggerRef,
100
- scrollRef: menuRef,
101
- placement: initialPlacement,
102
- hideArrow: true,
103
- shouldFlip: shouldFlip,
104
- shouldContainFocus: true
105
- }, menu);
106
- return /*#__PURE__*/ (0, $5R0iF$react).createElement((0, $5R0iF$Fragment), null, /*#__PURE__*/ (0, $5R0iF$react).createElement((0, $5R0iF$SlotProvider), {
107
- slots: {
108
- actionButton: {
109
- holdAffordance: trigger === 'longPress'
110
- }
111
- }
112
- }, /*#__PURE__*/ (0, $5R0iF$react).createElement((0, $5R0iF$PressResponder), {
113
- ...menuTriggerProps,
114
- ref: menuTriggerRef,
115
- isPressed: state.isOpen
116
- }, menuTrigger)), /*#__PURE__*/ (0, $5R0iF$react).createElement((0, $d94604d52c3e3feb$export$c7e742effb1c51e2).Provider, {
117
- value: menuContext
118
- }, overlay));
119
- });
120
-
121
-
122
- export {$aa0b855f135b86e3$export$27d2ad3c5815583e as MenuTrigger};
123
- //# sourceMappingURL=MenuTrigger.module.js.map
@@ -1 +0,0 @@
1
- {"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAkBM,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAA+B,EAAE,GAAwB;IAClH,IAAI,aAAa,CAAA,GAAA,aAAK,EAAe;IACrC,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,iBAAiB,UAAU;IAC/B,IAAI,UAAU,CAAA,GAAA,aAAK,EAAkB;IACrC,IAAI,YACF,QAAQ,SACR,QAAQ,qBACR,aAAa,iBACb,YAAY,yBACZ,aAAa,WACb,UAAU,SACX,GAAG;IAEJ,IAAI,CAAC,aAAa,KAAK,GAAG,CAAA,GAAA,YAAI,EAAE,QAAQ,CAAC,OAAO,CAAC;IACjD,IAAI,QAAQ,CAAA,GAAA,0BAAkB,EAAE;IAEhC,IAAI,oBAAC,gBAAgB,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;iBAAC;IAAO,GAAG,OAAO;IAErE,IAAI;IACJ,OAAQ;QACN,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;YACH,mBAAmB,GAAG,UAAU,CAAC,EAAE,UAAU,QAAQ,WAAW,OAAO;YACvE;QACF,KAAK;QACL,KAAK;QACL;YACE,mBAAmB,GAAG,UAAU,CAAC,EAAE,OAAO;IAC9C;IAEA,IAAI,WAAW,CAAA,GAAA,wBAAgB;IAC/B,IAAI,cAAc;QAChB,GAAG,SAAS;QACZ,KAAK;QACL,SAAS,MAAM,KAAK;uBACpB;QACA,WAAW,MAAM,aAAa,IAAI;QAClC,cAAc,WAAW;YACvB,OAAO;YACP,WAAW;QACb,IAAI;QACJ,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;YAAC,yBAAyB,CAAC;QAAQ;eACxE;IACF;IAEA,oEAAoE;IACpE,IAAI,iBAAiB,CAAA,GAAA,aAAK,EAAE;IAC5B,IAAI,oBAAoB,CAAA,GAAA,mBAAW,EAAE;IACrC,CAAA,GAAA,yBAAiB,EAAE;QACjB,KAAK;QACL,mBAAmB;YACjB,kBAAA,4BAAA,MAAO,KAAK;QACd;QACA,YAAY,CAAC,MAAM,MAAM,IAAI,MAAM,iBAAiB,CAAC,MAAM,KAAK;IAClE;IAEA,gFAAgF;IAChF,IAAI;IACJ,IAAI,UACF,wBACE,gCAAC,CAAA,GAAA,WAAG;QAAE,OAAO;QAAO,eAAA;QAAc,KAAK;OACpC;SAIL,wBACE,gCAAC,CAAA,GAAA,cAAM;QACL,KAAK;QACL,cAAc;YAAC,UAAU;YAAS,UAAU;YAAW,QAAQ;YAAS,aAAa;QAAK;QAC1F,OAAO;QACP,YAAY;QACZ,WAAW;QACX,WAAW;QACX,WAAA;QACA,YAAY;QACZ,oBAAA;OACC;IAKP,qBACE,gCAAC,CAAA,GAAA,eAAO,uBACN,gCAAC,CAAA,GAAA,mBAAW;QAAE,OAAO;YAAC,cAAc;gBAAC,gBAAgB,YAAY;YAAW;QAAC;qBAC3E,gCAAC,CAAA,GAAA,qBAAa;QAAG,GAAG,gBAAgB;QAAE,KAAK;QAAgB,WAAW,MAAM,MAAM;OAC/E,6BAGL,gCAAC,CAAA,GAAA,yCAAU,EAAE,QAAQ;QAAC,OAAO;OAC1B;AAIT","sources":["packages/@react-spectrum/menu/src/MenuTrigger.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 {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useIsMobileDevice} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {MenuContext} from './context';\nimport {Placement} from '@react-types/overlays';\nimport {Popover, Tray} from '@react-spectrum/overlays';\nimport {PressResponder, useInteractOutside} from '@react-aria/interactions';\nimport React, {forwardRef, Fragment, useRef} from 'react';\nimport {SpectrumMenuTriggerProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useMenuTrigger} from '@react-aria/menu';\nimport {useMenuTriggerState} from '@react-stately/menu';\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nexport const MenuTrigger = forwardRef(function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>) {\n let triggerRef = useRef<HTMLElement>(null);\n let domRef = useDOMRef(ref);\n let menuTriggerRef = domRef || triggerRef;\n let menuRef = useRef<HTMLDivElement>(null);\n let {\n children,\n align = 'start',\n shouldFlip = true,\n direction = 'bottom',\n closeOnSelect,\n trigger = 'press'\n } = props;\n\n let [menuTrigger, menu] = React.Children.toArray(children);\n let state = useMenuTriggerState(props);\n\n let {menuTriggerProps, menuProps} = useMenuTrigger({trigger}, state, menuTriggerRef);\n\n let initialPlacement: Placement;\n switch (direction) {\n case 'left':\n case 'right':\n case 'start':\n case 'end':\n initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}` as Placement;\n break;\n case 'bottom':\n case 'top':\n default:\n initialPlacement = `${direction} ${align}` as Placement;\n }\n\n let isMobile = useIsMobileDevice();\n let menuContext = {\n ...menuProps,\n ref: menuRef,\n onClose: state.close,\n closeOnSelect,\n autoFocus: state.focusStrategy || true,\n UNSAFE_style: isMobile ? {\n width: '100%',\n maxHeight: 'inherit'\n } : undefined,\n UNSAFE_className: classNames(styles, {'spectrum-Menu-popover': !isMobile}),\n state\n };\n\n // Close when clicking outside the root menu when a submenu is open.\n let rootOverlayRef = useRef(null);\n let rootOverlayDomRef = unwrapDOMRef(rootOverlayRef);\n useInteractOutside({\n ref: rootOverlayDomRef,\n onInteractOutside: () => {\n state?.close();\n },\n isDisabled: !state.isOpen || state.expandedKeysStack.length === 0\n });\n\n // On small screen devices, the menu is rendered in a tray, otherwise a popover.\n let overlay;\n if (isMobile) {\n overlay = (\n <Tray state={state} isFixedHeight ref={rootOverlayRef}>\n {menu}\n </Tray>\n );\n } else {\n overlay = (\n <Popover\n ref={rootOverlayRef}\n UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}\n state={state}\n triggerRef={menuTriggerRef}\n scrollRef={menuRef}\n placement={initialPlacement}\n hideArrow\n shouldFlip={shouldFlip}\n shouldContainFocus>\n {menu}\n </Popover>\n );\n }\n\n return (\n <Fragment>\n <SlotProvider slots={{actionButton: {holdAffordance: trigger === 'longPress'}}}>\n <PressResponder {...menuTriggerProps} ref={menuTriggerRef} isPressed={state.isOpen}>\n {menuTrigger}\n </PressResponder>\n </SlotProvider>\n <MenuContext.Provider value={menuContext}>\n {overlay}\n </MenuContext.Provider>\n </Fragment>\n );\n});\n"],"names":[],"version":3,"file":"MenuTrigger.module.js.map"}
@@ -1,154 +0,0 @@
1
- var $cac834c4bc0a51d3$exports = require("./context.main.js");
2
- require("./menu.2ec1fdaf.css");
3
- var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
4
- var $esjnM$reactspectrumutils = require("@react-spectrum/utils");
5
- var $esjnM$reactariautils = require("@react-aria/utils");
6
- var $esjnM$reactspectrumoverlays = require("@react-spectrum/overlays");
7
- var $esjnM$react = require("react");
8
- var $esjnM$reactdom = require("react-dom");
9
- var $esjnM$reactariai18n = require("@react-aria/i18n");
10
- var $esjnM$reactariamenu = require("@react-aria/menu");
11
- var $esjnM$reactstatelymenu = require("@react-stately/menu");
12
-
13
-
14
- function $parcel$interopDefault(a) {
15
- return a && a.__esModule ? a.default : a;
16
- }
17
-
18
- function $parcel$export(e, n, v, s) {
19
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
20
- }
21
-
22
- $parcel$export(module.exports, "SubmenuTrigger", () => $86ed235c4695ff3f$export$ecabc99eeffab7ca);
23
- /*
24
- * Copyright 2020 Adobe. All rights reserved.
25
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
26
- * you may not use this file except in compliance with the License. You may obtain a copy
27
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
28
- *
29
- * Unless required by applicable law or agreed to in writing, software distributed under
30
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
31
- * OF ANY KIND, either express or implied. See the License for the specific language
32
- * governing permissions and limitations under the License.
33
- */
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
- function $86ed235c4695ff3f$var$SubmenuTrigger(props) {
44
- let triggerRef = (0, $esjnM$react.useRef)(null);
45
- let { children: children, targetKey: targetKey } = props;
46
- let [menuTrigger, menu] = (0, ($parcel$interopDefault($esjnM$react))).Children.toArray(children);
47
- let { popoverContainer: popoverContainer, trayContainerRef: trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState: rootMenuTriggerState } = (0, $cac834c4bc0a51d3$exports.useMenuStateContext)();
48
- let submenuTriggerState = (0, $esjnM$reactstatelymenu.useSubmenuTriggerState)({
49
- triggerKey: targetKey
50
- }, rootMenuTriggerState);
51
- let { submenuTriggerProps: submenuTriggerProps, submenuProps: submenuProps, popoverProps: popoverProps } = (0, $esjnM$reactariamenu.useSubmenuTrigger)({
52
- parentMenuRef: parentMenuRef,
53
- submenuRef: menuRef
54
- }, submenuTriggerState, triggerRef);
55
- let isMobile = (0, $esjnM$reactspectrumutils.useIsMobileDevice)();
56
- let onBackButtonPress = ()=>{
57
- submenuTriggerState.close();
58
- if (parentMenuRef.current && !(0, $esjnM$reactariautils.isFocusWithin)(parentMenuRef.current)) parentMenuRef.current.focus();
59
- };
60
- let { direction: direction } = (0, $esjnM$reactariai18n.useLocale)();
61
- let mobileSubmenuKeyDown = (e)=>{
62
- switch(e.key){
63
- case 'ArrowLeft':
64
- var _triggerRef_current;
65
- if (direction === 'ltr') (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
66
- break;
67
- case 'ArrowRight':
68
- var _triggerRef_current1;
69
- if (direction === 'rtl') (_triggerRef_current1 = triggerRef.current) === null || _triggerRef_current1 === void 0 ? void 0 : _triggerRef_current1.focus();
70
- break;
71
- }
72
- };
73
- let overlay;
74
- if (isMobile) {
75
- var _submenuProps;
76
- delete submenuTriggerProps.onBlur;
77
- delete submenuTriggerProps.onHoverChange;
78
- var _autoFocus;
79
- (_autoFocus = (_submenuProps = submenuProps).autoFocus) !== null && _autoFocus !== void 0 ? _autoFocus : _submenuProps.autoFocus = true;
80
- if (trayContainerRef.current && submenuTriggerState.isOpen) overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($esjnM$reactdom))).createPortal(menu, trayContainerRef.current);
81
- } else {
82
- let onDismissButtonPress = ()=>{
83
- var _parentMenuRef_current;
84
- submenuTriggerState.close();
85
- (_parentMenuRef_current = parentMenuRef.current) === null || _parentMenuRef_current === void 0 ? void 0 : _parentMenuRef_current.focus();
86
- };
87
- overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($esjnM$react))).createElement((0, $esjnM$reactspectrumoverlays.Popover), {
88
- ...popoverProps,
89
- onDismissButtonPress: onDismissButtonPress,
90
- UNSAFE_className: (0, $esjnM$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), 'spectrum-Submenu-popover'),
91
- container: popoverContainer,
92
- containerPadding: 0,
93
- enableBothDismissButtons: true,
94
- UNSAFE_style: {
95
- clipPath: 'unset',
96
- overflow: 'visible',
97
- borderWidth: '0px'
98
- },
99
- state: submenuTriggerState,
100
- triggerRef: triggerRef,
101
- scrollRef: menuRef,
102
- placement: "end top",
103
- hideArrow: true
104
- }, menu);
105
- }
106
- let menuContext = {
107
- ...(0, $esjnM$reactariautils.mergeProps)(submenuProps, {
108
- ref: menuRef,
109
- UNSAFE_style: isMobile ? {
110
- width: '100%',
111
- maxHeight: 'inherit'
112
- } : undefined,
113
- UNSAFE_className: (0, $esjnM$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), {
114
- 'spectrum-Menu-popover': !isMobile
115
- }),
116
- ...isMobile && {
117
- onBackButtonPress: onBackButtonPress,
118
- onKeyDown: mobileSubmenuKeyDown
119
- }
120
- })
121
- };
122
- return /*#__PURE__*/ (0, ($parcel$interopDefault($esjnM$react))).createElement((0, ($parcel$interopDefault($esjnM$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($esjnM$react))).createElement((0, $cac834c4bc0a51d3$exports.SubmenuTriggerContext).Provider, {
123
- value: {
124
- triggerRef: triggerRef,
125
- ...submenuTriggerProps
126
- }
127
- }, menuTrigger), /*#__PURE__*/ (0, ($parcel$interopDefault($esjnM$react))).createElement((0, $cac834c4bc0a51d3$exports.MenuContext).Provider, {
128
- value: menuContext
129
- }, overlay));
130
- }
131
- $86ed235c4695ff3f$var$SubmenuTrigger.getCollectionNode = function*(props) {
132
- let childArray = [];
133
- (0, ($parcel$interopDefault($esjnM$react))).Children.forEach(props.children, (child)=>{
134
- if (/*#__PURE__*/ (0, ($parcel$interopDefault($esjnM$react))).isValidElement(child)) childArray.push(child);
135
- });
136
- let [trigger] = childArray;
137
- let [, content] = props.children;
138
- yield {
139
- element: /*#__PURE__*/ (0, ($parcel$interopDefault($esjnM$react))).cloneElement(trigger, {
140
- ...trigger.props,
141
- hasChildItems: true,
142
- isTrigger: true
143
- }),
144
- wrapper: (element)=>/*#__PURE__*/ (0, ($parcel$interopDefault($esjnM$react))).createElement($86ed235c4695ff3f$var$SubmenuTrigger, {
145
- key: element.key,
146
- targetKey: element.key,
147
- ...props
148
- }, element, content)
149
- };
150
- };
151
- let $86ed235c4695ff3f$export$ecabc99eeffab7ca = $86ed235c4695ff3f$var$SubmenuTrigger;
152
-
153
-
154
- //# sourceMappingURL=SubmenuTrigger.main.js.map
@@ -1 +0,0 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/menu/src/SubmenuTrigger.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 {classNames, useIsMobileDevice} from '@react-spectrum/utils';\nimport {isFocusWithin, mergeProps} from '@react-aria/utils';\nimport {Key} from '@react-types/shared';\nimport {MenuContext, SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {Popover} from '@react-spectrum/overlays';\nimport React, {type JSX, ReactElement, useRef} from 'react';\nimport ReactDOM from 'react-dom';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSubmenuTrigger} from '@react-aria/menu';\nimport {useSubmenuTriggerState} from '@react-stately/menu';\n\ninterface SubmenuTriggerProps {\n /**\n * The contents of the SubmenuTrigger - an Item and a Menu.\n */\n children: ReactElement<any>[],\n targetKey: Key\n}\n\nexport interface SpectrumSubmenuTriggerProps extends Omit<SubmenuTriggerProps, 'targetKey'> {}\n\nfunction SubmenuTrigger(props: SubmenuTriggerProps) {\n let triggerRef = useRef<HTMLDivElement>(null);\n let {\n children,\n targetKey\n } = props;\n\n let [menuTrigger, menu] = React.Children.toArray(children);\n let {popoverContainer, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState} = useMenuStateContext()!;\n let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, rootMenuTriggerState!);\n let {submenuTriggerProps, submenuProps, popoverProps} = useSubmenuTrigger({\n parentMenuRef,\n submenuRef: menuRef\n }, submenuTriggerState, triggerRef);\n let isMobile = useIsMobileDevice();\n let onBackButtonPress = () => {\n submenuTriggerState.close();\n if (parentMenuRef.current && !isFocusWithin(parentMenuRef.current)) {\n parentMenuRef.current.focus();\n }\n };\n\n let {direction} = useLocale();\n let mobileSubmenuKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowLeft':\n if (direction === 'ltr') {\n triggerRef.current?.focus();\n }\n break;\n case 'ArrowRight':\n if (direction === 'rtl') {\n triggerRef.current?.focus();\n }\n break;\n }\n };\n\n let overlay;\n\n if (isMobile) {\n delete submenuTriggerProps.onBlur;\n delete submenuTriggerProps.onHoverChange;\n submenuProps.autoFocus ??= true;\n if (trayContainerRef.current && submenuTriggerState.isOpen) {\n overlay = ReactDOM.createPortal(menu, trayContainerRef.current);\n }\n } else {\n let onDismissButtonPress = () => {\n submenuTriggerState.close();\n parentMenuRef.current?.focus();\n };\n\n overlay = (\n <Popover\n {...popoverProps}\n onDismissButtonPress={onDismissButtonPress}\n UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n container={popoverContainer!}\n containerPadding={0}\n enableBothDismissButtons\n UNSAFE_style={{clipPath: 'unset', overflow: 'visible', borderWidth: '0px'}}\n state={submenuTriggerState}\n triggerRef={triggerRef}\n scrollRef={menuRef}\n placement=\"end top\"\n hideArrow>\n {menu}\n </Popover>\n );\n }\n\n let menuContext = {\n ...mergeProps(submenuProps, {\n ref: menuRef,\n UNSAFE_style: isMobile ? {\n width: '100%',\n maxHeight: 'inherit'\n } : undefined,\n UNSAFE_className: classNames(styles, {'spectrum-Menu-popover': !isMobile}),\n ...(isMobile && {\n onBackButtonPress,\n onKeyDown: mobileSubmenuKeyDown\n })\n })\n };\n\n return (\n <>\n <SubmenuTriggerContext.Provider value={{triggerRef, ...submenuTriggerProps}}>{menuTrigger}</SubmenuTriggerContext.Provider>\n <MenuContext.Provider value={menuContext}>\n {overlay}\n </MenuContext.Provider>\n </>\n );\n}\n\nSubmenuTrigger.getCollectionNode = function* (props: SpectrumSubmenuTriggerProps) {\n let childArray: ReactElement[] = [];\n React.Children.forEach(props.children, child => {\n if (React.isValidElement(child)) {\n childArray.push(child);\n }\n });\n let [trigger] = childArray;\n let [, content] = props.children as [ReactElement, ReactElement];\n\n yield {\n element: React.cloneElement(trigger, {...trigger.props as any, hasChildItems: true, isTrigger: true}),\n wrapper: (element) => (\n <SubmenuTrigger key={element.key} targetKey={element.key} {...props}>\n {element}\n {content}\n </SubmenuTrigger>\n )\n };\n};\n\nlet _SubmenuTrigger = SubmenuTrigger as unknown as (props: SpectrumSubmenuTriggerProps) => JSX.Element;\nexport {_SubmenuTrigger as SubmenuTrigger};\n"],"names":[],"version":3,"file":"SubmenuTrigger.main.js.map"}
@@ -1,149 +0,0 @@
1
- import {MenuContext as $d94604d52c3e3feb$export$c7e742effb1c51e2, SubmenuTriggerContext as $d94604d52c3e3feb$export$8d97fe02339fc0e3, useMenuStateContext as $d94604d52c3e3feb$export$efa3856fc0e85e7f} from "./context.mjs";
2
- import "./menu.2ec1fdaf.css";
3
- import $byZ4r$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
4
- import {useIsMobileDevice as $byZ4r$useIsMobileDevice, classNames as $byZ4r$classNames} from "@react-spectrum/utils";
5
- import {isFocusWithin as $byZ4r$isFocusWithin, mergeProps as $byZ4r$mergeProps} from "@react-aria/utils";
6
- import {Popover as $byZ4r$Popover} from "@react-spectrum/overlays";
7
- import $byZ4r$react, {useRef as $byZ4r$useRef} from "react";
8
- import $byZ4r$reactdom from "react-dom";
9
- import {useLocale as $byZ4r$useLocale} from "@react-aria/i18n";
10
- import {useSubmenuTrigger as $byZ4r$useSubmenuTrigger} from "@react-aria/menu";
11
- import {useSubmenuTriggerState as $byZ4r$useSubmenuTriggerState} from "@react-stately/menu";
12
-
13
-
14
- function $parcel$interopDefault(a) {
15
- return a && a.__esModule ? a.default : a;
16
- }
17
- /*
18
- * Copyright 2020 Adobe. All rights reserved.
19
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
20
- * you may not use this file except in compliance with the License. You may obtain a copy
21
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
22
- *
23
- * Unless required by applicable law or agreed to in writing, software distributed under
24
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
25
- * OF ANY KIND, either express or implied. See the License for the specific language
26
- * governing permissions and limitations under the License.
27
- */
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
- function $3f13e15cf95c3893$var$SubmenuTrigger(props) {
38
- let triggerRef = (0, $byZ4r$useRef)(null);
39
- let { children: children, targetKey: targetKey } = props;
40
- let [menuTrigger, menu] = (0, $byZ4r$react).Children.toArray(children);
41
- let { popoverContainer: popoverContainer, trayContainerRef: trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState: rootMenuTriggerState } = (0, $d94604d52c3e3feb$export$efa3856fc0e85e7f)();
42
- let submenuTriggerState = (0, $byZ4r$useSubmenuTriggerState)({
43
- triggerKey: targetKey
44
- }, rootMenuTriggerState);
45
- let { submenuTriggerProps: submenuTriggerProps, submenuProps: submenuProps, popoverProps: popoverProps } = (0, $byZ4r$useSubmenuTrigger)({
46
- parentMenuRef: parentMenuRef,
47
- submenuRef: menuRef
48
- }, submenuTriggerState, triggerRef);
49
- let isMobile = (0, $byZ4r$useIsMobileDevice)();
50
- let onBackButtonPress = ()=>{
51
- submenuTriggerState.close();
52
- if (parentMenuRef.current && !(0, $byZ4r$isFocusWithin)(parentMenuRef.current)) parentMenuRef.current.focus();
53
- };
54
- let { direction: direction } = (0, $byZ4r$useLocale)();
55
- let mobileSubmenuKeyDown = (e)=>{
56
- switch(e.key){
57
- case 'ArrowLeft':
58
- var _triggerRef_current;
59
- if (direction === 'ltr') (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
60
- break;
61
- case 'ArrowRight':
62
- var _triggerRef_current1;
63
- if (direction === 'rtl') (_triggerRef_current1 = triggerRef.current) === null || _triggerRef_current1 === void 0 ? void 0 : _triggerRef_current1.focus();
64
- break;
65
- }
66
- };
67
- let overlay;
68
- if (isMobile) {
69
- var _submenuProps;
70
- delete submenuTriggerProps.onBlur;
71
- delete submenuTriggerProps.onHoverChange;
72
- var _autoFocus;
73
- (_autoFocus = (_submenuProps = submenuProps).autoFocus) !== null && _autoFocus !== void 0 ? _autoFocus : _submenuProps.autoFocus = true;
74
- if (trayContainerRef.current && submenuTriggerState.isOpen) overlay = /*#__PURE__*/ (0, $byZ4r$reactdom).createPortal(menu, trayContainerRef.current);
75
- } else {
76
- let onDismissButtonPress = ()=>{
77
- var _parentMenuRef_current;
78
- submenuTriggerState.close();
79
- (_parentMenuRef_current = parentMenuRef.current) === null || _parentMenuRef_current === void 0 ? void 0 : _parentMenuRef_current.focus();
80
- };
81
- overlay = /*#__PURE__*/ (0, $byZ4r$react).createElement((0, $byZ4r$Popover), {
82
- ...popoverProps,
83
- onDismissButtonPress: onDismissButtonPress,
84
- UNSAFE_className: (0, $byZ4r$classNames)((0, ($parcel$interopDefault($byZ4r$menu_vars_cssmodulejs))), 'spectrum-Submenu-popover'),
85
- container: popoverContainer,
86
- containerPadding: 0,
87
- enableBothDismissButtons: true,
88
- UNSAFE_style: {
89
- clipPath: 'unset',
90
- overflow: 'visible',
91
- borderWidth: '0px'
92
- },
93
- state: submenuTriggerState,
94
- triggerRef: triggerRef,
95
- scrollRef: menuRef,
96
- placement: "end top",
97
- hideArrow: true
98
- }, menu);
99
- }
100
- let menuContext = {
101
- ...(0, $byZ4r$mergeProps)(submenuProps, {
102
- ref: menuRef,
103
- UNSAFE_style: isMobile ? {
104
- width: '100%',
105
- maxHeight: 'inherit'
106
- } : undefined,
107
- UNSAFE_className: (0, $byZ4r$classNames)((0, ($parcel$interopDefault($byZ4r$menu_vars_cssmodulejs))), {
108
- 'spectrum-Menu-popover': !isMobile
109
- }),
110
- ...isMobile && {
111
- onBackButtonPress: onBackButtonPress,
112
- onKeyDown: mobileSubmenuKeyDown
113
- }
114
- })
115
- };
116
- return /*#__PURE__*/ (0, $byZ4r$react).createElement((0, $byZ4r$react).Fragment, null, /*#__PURE__*/ (0, $byZ4r$react).createElement((0, $d94604d52c3e3feb$export$8d97fe02339fc0e3).Provider, {
117
- value: {
118
- triggerRef: triggerRef,
119
- ...submenuTriggerProps
120
- }
121
- }, menuTrigger), /*#__PURE__*/ (0, $byZ4r$react).createElement((0, $d94604d52c3e3feb$export$c7e742effb1c51e2).Provider, {
122
- value: menuContext
123
- }, overlay));
124
- }
125
- $3f13e15cf95c3893$var$SubmenuTrigger.getCollectionNode = function*(props) {
126
- let childArray = [];
127
- (0, $byZ4r$react).Children.forEach(props.children, (child)=>{
128
- if (/*#__PURE__*/ (0, $byZ4r$react).isValidElement(child)) childArray.push(child);
129
- });
130
- let [trigger] = childArray;
131
- let [, content] = props.children;
132
- yield {
133
- element: /*#__PURE__*/ (0, $byZ4r$react).cloneElement(trigger, {
134
- ...trigger.props,
135
- hasChildItems: true,
136
- isTrigger: true
137
- }),
138
- wrapper: (element)=>/*#__PURE__*/ (0, $byZ4r$react).createElement($3f13e15cf95c3893$var$SubmenuTrigger, {
139
- key: element.key,
140
- targetKey: element.key,
141
- ...props
142
- }, element, content)
143
- };
144
- };
145
- let $3f13e15cf95c3893$export$ecabc99eeffab7ca = $3f13e15cf95c3893$var$SubmenuTrigger;
146
-
147
-
148
- export {$3f13e15cf95c3893$export$ecabc99eeffab7ca as SubmenuTrigger};
149
- //# sourceMappingURL=SubmenuTrigger.module.js.map