@react-aria/menu 3.20.0 → 3.22.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 (227) hide show
  1. package/dist/import.mjs +2 -10
  2. package/dist/main.js +6 -14
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +2 -10
  5. package/dist/module.js.map +1 -1
  6. package/dist/types/src/index.d.ts +2 -0
  7. package/package.json +15 -24
  8. package/src/index.ts +2 -11
  9. package/dist/ar-AE.main.js +0 -6
  10. package/dist/ar-AE.main.js.map +0 -1
  11. package/dist/ar-AE.mjs +0 -8
  12. package/dist/ar-AE.module.js +0 -8
  13. package/dist/ar-AE.module.js.map +0 -1
  14. package/dist/bg-BG.main.js +0 -6
  15. package/dist/bg-BG.main.js.map +0 -1
  16. package/dist/bg-BG.mjs +0 -8
  17. package/dist/bg-BG.module.js +0 -8
  18. package/dist/bg-BG.module.js.map +0 -1
  19. package/dist/cs-CZ.main.js +0 -6
  20. package/dist/cs-CZ.main.js.map +0 -1
  21. package/dist/cs-CZ.mjs +0 -8
  22. package/dist/cs-CZ.module.js +0 -8
  23. package/dist/cs-CZ.module.js.map +0 -1
  24. package/dist/da-DK.main.js +0 -6
  25. package/dist/da-DK.main.js.map +0 -1
  26. package/dist/da-DK.mjs +0 -8
  27. package/dist/da-DK.module.js +0 -8
  28. package/dist/da-DK.module.js.map +0 -1
  29. package/dist/de-DE.main.js +0 -6
  30. package/dist/de-DE.main.js.map +0 -1
  31. package/dist/de-DE.mjs +0 -8
  32. package/dist/de-DE.module.js +0 -8
  33. package/dist/de-DE.module.js.map +0 -1
  34. package/dist/el-GR.main.js +0 -6
  35. package/dist/el-GR.main.js.map +0 -1
  36. package/dist/el-GR.mjs +0 -8
  37. package/dist/el-GR.module.js +0 -8
  38. package/dist/el-GR.module.js.map +0 -1
  39. package/dist/en-US.main.js +0 -6
  40. package/dist/en-US.main.js.map +0 -1
  41. package/dist/en-US.mjs +0 -8
  42. package/dist/en-US.module.js +0 -8
  43. package/dist/en-US.module.js.map +0 -1
  44. package/dist/es-ES.main.js +0 -6
  45. package/dist/es-ES.main.js.map +0 -1
  46. package/dist/es-ES.mjs +0 -8
  47. package/dist/es-ES.module.js +0 -8
  48. package/dist/es-ES.module.js.map +0 -1
  49. package/dist/et-EE.main.js +0 -6
  50. package/dist/et-EE.main.js.map +0 -1
  51. package/dist/et-EE.mjs +0 -8
  52. package/dist/et-EE.module.js +0 -8
  53. package/dist/et-EE.module.js.map +0 -1
  54. package/dist/fi-FI.main.js +0 -6
  55. package/dist/fi-FI.main.js.map +0 -1
  56. package/dist/fi-FI.mjs +0 -8
  57. package/dist/fi-FI.module.js +0 -8
  58. package/dist/fi-FI.module.js.map +0 -1
  59. package/dist/fr-FR.main.js +0 -6
  60. package/dist/fr-FR.main.js.map +0 -1
  61. package/dist/fr-FR.mjs +0 -8
  62. package/dist/fr-FR.module.js +0 -8
  63. package/dist/fr-FR.module.js.map +0 -1
  64. package/dist/he-IL.main.js +0 -6
  65. package/dist/he-IL.main.js.map +0 -1
  66. package/dist/he-IL.mjs +0 -8
  67. package/dist/he-IL.module.js +0 -8
  68. package/dist/he-IL.module.js.map +0 -1
  69. package/dist/hr-HR.main.js +0 -6
  70. package/dist/hr-HR.main.js.map +0 -1
  71. package/dist/hr-HR.mjs +0 -8
  72. package/dist/hr-HR.module.js +0 -8
  73. package/dist/hr-HR.module.js.map +0 -1
  74. package/dist/hu-HU.main.js +0 -6
  75. package/dist/hu-HU.main.js.map +0 -1
  76. package/dist/hu-HU.mjs +0 -8
  77. package/dist/hu-HU.module.js +0 -8
  78. package/dist/hu-HU.module.js.map +0 -1
  79. package/dist/intlStrings.main.js +0 -108
  80. package/dist/intlStrings.main.js.map +0 -1
  81. package/dist/intlStrings.mjs +0 -110
  82. package/dist/intlStrings.module.js +0 -110
  83. package/dist/intlStrings.module.js.map +0 -1
  84. package/dist/it-IT.main.js +0 -6
  85. package/dist/it-IT.main.js.map +0 -1
  86. package/dist/it-IT.mjs +0 -8
  87. package/dist/it-IT.module.js +0 -8
  88. package/dist/it-IT.module.js.map +0 -1
  89. package/dist/ja-JP.main.js +0 -6
  90. package/dist/ja-JP.main.js.map +0 -1
  91. package/dist/ja-JP.mjs +0 -8
  92. package/dist/ja-JP.module.js +0 -8
  93. package/dist/ja-JP.module.js.map +0 -1
  94. package/dist/ko-KR.main.js +0 -6
  95. package/dist/ko-KR.main.js.map +0 -1
  96. package/dist/ko-KR.mjs +0 -8
  97. package/dist/ko-KR.module.js +0 -8
  98. package/dist/ko-KR.module.js.map +0 -1
  99. package/dist/lt-LT.main.js +0 -6
  100. package/dist/lt-LT.main.js.map +0 -1
  101. package/dist/lt-LT.mjs +0 -8
  102. package/dist/lt-LT.module.js +0 -8
  103. package/dist/lt-LT.module.js.map +0 -1
  104. package/dist/lv-LV.main.js +0 -6
  105. package/dist/lv-LV.main.js.map +0 -1
  106. package/dist/lv-LV.mjs +0 -8
  107. package/dist/lv-LV.module.js +0 -8
  108. package/dist/lv-LV.module.js.map +0 -1
  109. package/dist/nb-NO.main.js +0 -6
  110. package/dist/nb-NO.main.js.map +0 -1
  111. package/dist/nb-NO.mjs +0 -8
  112. package/dist/nb-NO.module.js +0 -8
  113. package/dist/nb-NO.module.js.map +0 -1
  114. package/dist/nl-NL.main.js +0 -6
  115. package/dist/nl-NL.main.js.map +0 -1
  116. package/dist/nl-NL.mjs +0 -8
  117. package/dist/nl-NL.module.js +0 -8
  118. package/dist/nl-NL.module.js.map +0 -1
  119. package/dist/pl-PL.main.js +0 -6
  120. package/dist/pl-PL.main.js.map +0 -1
  121. package/dist/pl-PL.mjs +0 -8
  122. package/dist/pl-PL.module.js +0 -8
  123. package/dist/pl-PL.module.js.map +0 -1
  124. package/dist/pt-BR.main.js +0 -6
  125. package/dist/pt-BR.main.js.map +0 -1
  126. package/dist/pt-BR.mjs +0 -8
  127. package/dist/pt-BR.module.js +0 -8
  128. package/dist/pt-BR.module.js.map +0 -1
  129. package/dist/pt-PT.main.js +0 -6
  130. package/dist/pt-PT.main.js.map +0 -1
  131. package/dist/pt-PT.mjs +0 -8
  132. package/dist/pt-PT.module.js +0 -8
  133. package/dist/pt-PT.module.js.map +0 -1
  134. package/dist/ro-RO.main.js +0 -6
  135. package/dist/ro-RO.main.js.map +0 -1
  136. package/dist/ro-RO.mjs +0 -8
  137. package/dist/ro-RO.module.js +0 -8
  138. package/dist/ro-RO.module.js.map +0 -1
  139. package/dist/ru-RU.main.js +0 -6
  140. package/dist/ru-RU.main.js.map +0 -1
  141. package/dist/ru-RU.mjs +0 -8
  142. package/dist/ru-RU.module.js +0 -8
  143. package/dist/ru-RU.module.js.map +0 -1
  144. package/dist/sk-SK.main.js +0 -6
  145. package/dist/sk-SK.main.js.map +0 -1
  146. package/dist/sk-SK.mjs +0 -8
  147. package/dist/sk-SK.module.js +0 -8
  148. package/dist/sk-SK.module.js.map +0 -1
  149. package/dist/sl-SI.main.js +0 -6
  150. package/dist/sl-SI.main.js.map +0 -1
  151. package/dist/sl-SI.mjs +0 -8
  152. package/dist/sl-SI.module.js +0 -8
  153. package/dist/sl-SI.module.js.map +0 -1
  154. package/dist/sr-SP.main.js +0 -6
  155. package/dist/sr-SP.main.js.map +0 -1
  156. package/dist/sr-SP.mjs +0 -8
  157. package/dist/sr-SP.module.js +0 -8
  158. package/dist/sr-SP.module.js.map +0 -1
  159. package/dist/sv-SE.main.js +0 -6
  160. package/dist/sv-SE.main.js.map +0 -1
  161. package/dist/sv-SE.mjs +0 -8
  162. package/dist/sv-SE.module.js +0 -8
  163. package/dist/sv-SE.module.js.map +0 -1
  164. package/dist/tr-TR.main.js +0 -6
  165. package/dist/tr-TR.main.js.map +0 -1
  166. package/dist/tr-TR.mjs +0 -8
  167. package/dist/tr-TR.module.js +0 -8
  168. package/dist/tr-TR.module.js.map +0 -1
  169. package/dist/types.d.ts +0 -191
  170. package/dist/types.d.ts.map +0 -1
  171. package/dist/uk-UA.main.js +0 -6
  172. package/dist/uk-UA.main.js.map +0 -1
  173. package/dist/uk-UA.mjs +0 -8
  174. package/dist/uk-UA.module.js +0 -8
  175. package/dist/uk-UA.module.js.map +0 -1
  176. package/dist/useMenu.main.js +0 -61
  177. package/dist/useMenu.main.js.map +0 -1
  178. package/dist/useMenu.mjs +0 -56
  179. package/dist/useMenu.module.js +0 -56
  180. package/dist/useMenu.module.js.map +0 -1
  181. package/dist/useMenuItem.main.js +0 -217
  182. package/dist/useMenuItem.main.js.map +0 -1
  183. package/dist/useMenuItem.mjs +0 -212
  184. package/dist/useMenuItem.module.js +0 -212
  185. package/dist/useMenuItem.module.js.map +0 -1
  186. package/dist/useMenuSection.main.js +0 -43
  187. package/dist/useMenuSection.main.js.map +0 -1
  188. package/dist/useMenuSection.mjs +0 -38
  189. package/dist/useMenuSection.module.js +0 -38
  190. package/dist/useMenuSection.module.js.map +0 -1
  191. package/dist/useMenuTrigger.main.js +0 -117
  192. package/dist/useMenuTrigger.main.js.map +0 -1
  193. package/dist/useMenuTrigger.mjs +0 -112
  194. package/dist/useMenuTrigger.module.js +0 -112
  195. package/dist/useMenuTrigger.module.js.map +0 -1
  196. package/dist/useSafelyMouseToSubmenu.main.js +0 -143
  197. package/dist/useSafelyMouseToSubmenu.main.js.map +0 -1
  198. package/dist/useSafelyMouseToSubmenu.mjs +0 -138
  199. package/dist/useSafelyMouseToSubmenu.module.js +0 -138
  200. package/dist/useSafelyMouseToSubmenu.module.js.map +0 -1
  201. package/dist/useSubmenuTrigger.main.js +0 -184
  202. package/dist/useSubmenuTrigger.main.js.map +0 -1
  203. package/dist/useSubmenuTrigger.mjs +0 -179
  204. package/dist/useSubmenuTrigger.module.js +0 -179
  205. package/dist/useSubmenuTrigger.module.js.map +0 -1
  206. package/dist/utils.main.js +0 -20
  207. package/dist/utils.main.js.map +0 -1
  208. package/dist/utils.mjs +0 -15
  209. package/dist/utils.module.js +0 -15
  210. package/dist/utils.module.js.map +0 -1
  211. package/dist/zh-CN.main.js +0 -6
  212. package/dist/zh-CN.main.js.map +0 -1
  213. package/dist/zh-CN.mjs +0 -8
  214. package/dist/zh-CN.module.js +0 -8
  215. package/dist/zh-CN.module.js.map +0 -1
  216. package/dist/zh-TW.main.js +0 -6
  217. package/dist/zh-TW.main.js.map +0 -1
  218. package/dist/zh-TW.mjs +0 -8
  219. package/dist/zh-TW.module.js +0 -8
  220. package/dist/zh-TW.module.js.map +0 -1
  221. package/src/useMenu.ts +0 -86
  222. package/src/useMenuItem.ts +0 -350
  223. package/src/useMenuSection.ts +0 -61
  224. package/src/useMenuTrigger.ts +0 -156
  225. package/src/useSafelyMouseToSubmenu.ts +0 -178
  226. package/src/useSubmenuTrigger.ts +0 -262
  227. package/src/utils.ts +0 -22
@@ -1,138 +0,0 @@
1
- import {useResizeObserver as $fUfeP$useResizeObserver, useEffectEvent as $fUfeP$useEffectEvent, useLayoutEffect as $fUfeP$useLayoutEffect, nodeContains as $fUfeP$nodeContains} from "@react-aria/utils";
2
- import {useRef as $fUfeP$useRef, useState as $fUfeP$useState, useEffect as $fUfeP$useEffect} from "react";
3
- import {useInteractionModality as $fUfeP$useInteractionModality} from "@react-aria/interactions";
4
-
5
-
6
-
7
-
8
- const $d275435c250248f8$var$ALLOWED_INVALID_MOVEMENTS = 2;
9
- const $d275435c250248f8$var$THROTTLE_TIME = 50;
10
- const $d275435c250248f8$var$TIMEOUT_TIME = 1000;
11
- const $d275435c250248f8$var$ANGLE_PADDING = Math.PI / 12; // 15°
12
- function $d275435c250248f8$export$85ec83e04c95f50a(options) {
13
- let { menuRef: menuRef, submenuRef: submenuRef, isOpen: isOpen, isDisabled: isDisabled } = options;
14
- let prevPointerPos = (0, $fUfeP$useRef)(undefined);
15
- let submenuRect = (0, $fUfeP$useRef)(undefined);
16
- let lastProcessedTime = (0, $fUfeP$useRef)(0);
17
- let timeout = (0, $fUfeP$useRef)(undefined);
18
- let autoCloseTimeout = (0, $fUfeP$useRef)(undefined);
19
- let submenuSide = (0, $fUfeP$useRef)(undefined);
20
- let movementsTowardsSubmenuCount = (0, $fUfeP$useRef)(2);
21
- let [preventPointerEvents, setPreventPointerEvents] = (0, $fUfeP$useState)(false);
22
- let updateSubmenuRect = ()=>{
23
- if (submenuRef.current) {
24
- submenuRect.current = submenuRef.current.getBoundingClientRect();
25
- submenuSide.current = undefined;
26
- }
27
- };
28
- (0, $fUfeP$useResizeObserver)({
29
- ref: submenuRef,
30
- onResize: updateSubmenuRect
31
- });
32
- let reset = ()=>{
33
- setPreventPointerEvents(false);
34
- movementsTowardsSubmenuCount.current = $d275435c250248f8$var$ALLOWED_INVALID_MOVEMENTS;
35
- prevPointerPos.current = undefined;
36
- };
37
- let modality = (0, $fUfeP$useInteractionModality)();
38
- // Prevent mouse down over safe triangle. Clicking while pointer-events: none is applied
39
- // will cause focus to move unexpectedly since it will go to an element behind the menu.
40
- let onPointerDown = (0, $fUfeP$useEffectEvent)((e)=>{
41
- if (preventPointerEvents) e.preventDefault();
42
- });
43
- (0, $fUfeP$useEffect)(()=>{
44
- if (preventPointerEvents && menuRef.current) menuRef.current.style.pointerEvents = 'none';
45
- else menuRef.current.style.pointerEvents = '';
46
- }, [
47
- menuRef,
48
- preventPointerEvents
49
- ]);
50
- (0, $fUfeP$useLayoutEffect)(()=>{
51
- let submenu = submenuRef.current;
52
- let menu = menuRef.current;
53
- if (isDisabled || !submenu || !isOpen || modality !== 'pointer' || !menu) {
54
- reset();
55
- return;
56
- }
57
- submenuRect.current = submenu.getBoundingClientRect();
58
- let onPointerMove = (e)=>{
59
- if (e.pointerType === 'touch' || e.pointerType === 'pen') return;
60
- let currentTime = Date.now();
61
- // Throttle
62
- if (currentTime - lastProcessedTime.current < $d275435c250248f8$var$THROTTLE_TIME) return;
63
- clearTimeout(timeout.current);
64
- clearTimeout(autoCloseTimeout.current);
65
- let { clientX: mouseX, clientY: mouseY } = e;
66
- if (!prevPointerPos.current) {
67
- prevPointerPos.current = {
68
- x: mouseX,
69
- y: mouseY
70
- };
71
- return;
72
- }
73
- if (!submenuRect.current) return;
74
- if (!submenuSide.current) submenuSide.current = mouseX > submenuRect.current.right ? 'left' : 'right';
75
- // Pointer is outside of parent menu
76
- if (mouseX < menu.getBoundingClientRect().left || mouseX > menu.getBoundingClientRect().right || mouseY < menu.getBoundingClientRect().top || mouseY > menu.getBoundingClientRect().bottom) {
77
- reset();
78
- return;
79
- }
80
- /* Check if pointer is moving towards submenu.
81
- Uses the 2-argument arctangent (https://en.wikipedia.org/wiki/Atan2) to calculate:
82
- - angle between previous pointer and top of submenu
83
- - angle between previous pointer and bottom of submenu
84
- - angle between previous pointer and current pointer (delta)
85
- If the pointer delta angle value is between the top and bottom angle values, we know the pointer is moving towards the submenu.
86
- */ let prevMouseX = prevPointerPos.current.x;
87
- let prevMouseY = prevPointerPos.current.y;
88
- let toSubmenuX = submenuSide.current === 'right' ? submenuRect.current.left - prevMouseX : prevMouseX - submenuRect.current.right;
89
- let angleTop = Math.atan2(prevMouseY - submenuRect.current.top, toSubmenuX) + $d275435c250248f8$var$ANGLE_PADDING;
90
- let angleBottom = Math.atan2(prevMouseY - submenuRect.current.bottom, toSubmenuX) - $d275435c250248f8$var$ANGLE_PADDING;
91
- let anglePointer = Math.atan2(prevMouseY - mouseY, submenuSide.current === 'left' ? -(mouseX - prevMouseX) : mouseX - prevMouseX);
92
- let isMovingTowardsSubmenu = anglePointer < angleTop && anglePointer > angleBottom;
93
- movementsTowardsSubmenuCount.current = isMovingTowardsSubmenu ? Math.min(movementsTowardsSubmenuCount.current + 1, $d275435c250248f8$var$ALLOWED_INVALID_MOVEMENTS) : Math.max(movementsTowardsSubmenuCount.current - 1, 0);
94
- if (movementsTowardsSubmenuCount.current >= $d275435c250248f8$var$ALLOWED_INVALID_MOVEMENTS) setPreventPointerEvents(true);
95
- else setPreventPointerEvents(false);
96
- lastProcessedTime.current = currentTime;
97
- prevPointerPos.current = {
98
- x: mouseX,
99
- y: mouseY
100
- };
101
- // If the pointer is moving towards the submenu, start a timeout to close if no other movements are made after 500ms.
102
- if (isMovingTowardsSubmenu) timeout.current = setTimeout(()=>{
103
- reset();
104
- autoCloseTimeout.current = setTimeout(()=>{
105
- // Fire a pointerover event to trigger the menu to close.
106
- // Wait until pointer-events:none is no longer applied
107
- let target = document.elementFromPoint(mouseX, mouseY);
108
- if (target && (0, $fUfeP$nodeContains)(menu, target)) target.dispatchEvent(new PointerEvent('pointerover', {
109
- bubbles: true,
110
- cancelable: true
111
- }));
112
- }, 100);
113
- }, $d275435c250248f8$var$TIMEOUT_TIME);
114
- };
115
- window.addEventListener('pointermove', onPointerMove);
116
- // Prevent pointer down over the safe triangle. See above comment.
117
- // Do not enable in tests, because JSDom doesn't do hit testing.
118
- if (process.env.NODE_ENV !== 'test') window.addEventListener('pointerdown', onPointerDown, true);
119
- return ()=>{
120
- window.removeEventListener('pointermove', onPointerMove);
121
- if (process.env.NODE_ENV !== 'test') window.removeEventListener('pointerdown', onPointerDown, true);
122
- clearTimeout(timeout.current);
123
- clearTimeout(autoCloseTimeout.current);
124
- movementsTowardsSubmenuCount.current = $d275435c250248f8$var$ALLOWED_INVALID_MOVEMENTS;
125
- };
126
- }, [
127
- isDisabled,
128
- isOpen,
129
- menuRef,
130
- modality,
131
- setPreventPointerEvents,
132
- submenuRef
133
- ]);
134
- }
135
-
136
-
137
- export {$d275435c250248f8$export$85ec83e04c95f50a as useSafelyMouseToSubmenu};
138
- //# sourceMappingURL=useSafelyMouseToSubmenu.module.js.map
@@ -1,138 +0,0 @@
1
- import {useResizeObserver as $fUfeP$useResizeObserver, useEffectEvent as $fUfeP$useEffectEvent, useLayoutEffect as $fUfeP$useLayoutEffect, nodeContains as $fUfeP$nodeContains} from "@react-aria/utils";
2
- import {useRef as $fUfeP$useRef, useState as $fUfeP$useState, useEffect as $fUfeP$useEffect} from "react";
3
- import {useInteractionModality as $fUfeP$useInteractionModality} from "@react-aria/interactions";
4
-
5
-
6
-
7
-
8
- const $d275435c250248f8$var$ALLOWED_INVALID_MOVEMENTS = 2;
9
- const $d275435c250248f8$var$THROTTLE_TIME = 50;
10
- const $d275435c250248f8$var$TIMEOUT_TIME = 1000;
11
- const $d275435c250248f8$var$ANGLE_PADDING = Math.PI / 12; // 15°
12
- function $d275435c250248f8$export$85ec83e04c95f50a(options) {
13
- let { menuRef: menuRef, submenuRef: submenuRef, isOpen: isOpen, isDisabled: isDisabled } = options;
14
- let prevPointerPos = (0, $fUfeP$useRef)(undefined);
15
- let submenuRect = (0, $fUfeP$useRef)(undefined);
16
- let lastProcessedTime = (0, $fUfeP$useRef)(0);
17
- let timeout = (0, $fUfeP$useRef)(undefined);
18
- let autoCloseTimeout = (0, $fUfeP$useRef)(undefined);
19
- let submenuSide = (0, $fUfeP$useRef)(undefined);
20
- let movementsTowardsSubmenuCount = (0, $fUfeP$useRef)(2);
21
- let [preventPointerEvents, setPreventPointerEvents] = (0, $fUfeP$useState)(false);
22
- let updateSubmenuRect = ()=>{
23
- if (submenuRef.current) {
24
- submenuRect.current = submenuRef.current.getBoundingClientRect();
25
- submenuSide.current = undefined;
26
- }
27
- };
28
- (0, $fUfeP$useResizeObserver)({
29
- ref: submenuRef,
30
- onResize: updateSubmenuRect
31
- });
32
- let reset = ()=>{
33
- setPreventPointerEvents(false);
34
- movementsTowardsSubmenuCount.current = $d275435c250248f8$var$ALLOWED_INVALID_MOVEMENTS;
35
- prevPointerPos.current = undefined;
36
- };
37
- let modality = (0, $fUfeP$useInteractionModality)();
38
- // Prevent mouse down over safe triangle. Clicking while pointer-events: none is applied
39
- // will cause focus to move unexpectedly since it will go to an element behind the menu.
40
- let onPointerDown = (0, $fUfeP$useEffectEvent)((e)=>{
41
- if (preventPointerEvents) e.preventDefault();
42
- });
43
- (0, $fUfeP$useEffect)(()=>{
44
- if (preventPointerEvents && menuRef.current) menuRef.current.style.pointerEvents = 'none';
45
- else menuRef.current.style.pointerEvents = '';
46
- }, [
47
- menuRef,
48
- preventPointerEvents
49
- ]);
50
- (0, $fUfeP$useLayoutEffect)(()=>{
51
- let submenu = submenuRef.current;
52
- let menu = menuRef.current;
53
- if (isDisabled || !submenu || !isOpen || modality !== 'pointer' || !menu) {
54
- reset();
55
- return;
56
- }
57
- submenuRect.current = submenu.getBoundingClientRect();
58
- let onPointerMove = (e)=>{
59
- if (e.pointerType === 'touch' || e.pointerType === 'pen') return;
60
- let currentTime = Date.now();
61
- // Throttle
62
- if (currentTime - lastProcessedTime.current < $d275435c250248f8$var$THROTTLE_TIME) return;
63
- clearTimeout(timeout.current);
64
- clearTimeout(autoCloseTimeout.current);
65
- let { clientX: mouseX, clientY: mouseY } = e;
66
- if (!prevPointerPos.current) {
67
- prevPointerPos.current = {
68
- x: mouseX,
69
- y: mouseY
70
- };
71
- return;
72
- }
73
- if (!submenuRect.current) return;
74
- if (!submenuSide.current) submenuSide.current = mouseX > submenuRect.current.right ? 'left' : 'right';
75
- // Pointer is outside of parent menu
76
- if (mouseX < menu.getBoundingClientRect().left || mouseX > menu.getBoundingClientRect().right || mouseY < menu.getBoundingClientRect().top || mouseY > menu.getBoundingClientRect().bottom) {
77
- reset();
78
- return;
79
- }
80
- /* Check if pointer is moving towards submenu.
81
- Uses the 2-argument arctangent (https://en.wikipedia.org/wiki/Atan2) to calculate:
82
- - angle between previous pointer and top of submenu
83
- - angle between previous pointer and bottom of submenu
84
- - angle between previous pointer and current pointer (delta)
85
- If the pointer delta angle value is between the top and bottom angle values, we know the pointer is moving towards the submenu.
86
- */ let prevMouseX = prevPointerPos.current.x;
87
- let prevMouseY = prevPointerPos.current.y;
88
- let toSubmenuX = submenuSide.current === 'right' ? submenuRect.current.left - prevMouseX : prevMouseX - submenuRect.current.right;
89
- let angleTop = Math.atan2(prevMouseY - submenuRect.current.top, toSubmenuX) + $d275435c250248f8$var$ANGLE_PADDING;
90
- let angleBottom = Math.atan2(prevMouseY - submenuRect.current.bottom, toSubmenuX) - $d275435c250248f8$var$ANGLE_PADDING;
91
- let anglePointer = Math.atan2(prevMouseY - mouseY, submenuSide.current === 'left' ? -(mouseX - prevMouseX) : mouseX - prevMouseX);
92
- let isMovingTowardsSubmenu = anglePointer < angleTop && anglePointer > angleBottom;
93
- movementsTowardsSubmenuCount.current = isMovingTowardsSubmenu ? Math.min(movementsTowardsSubmenuCount.current + 1, $d275435c250248f8$var$ALLOWED_INVALID_MOVEMENTS) : Math.max(movementsTowardsSubmenuCount.current - 1, 0);
94
- if (movementsTowardsSubmenuCount.current >= $d275435c250248f8$var$ALLOWED_INVALID_MOVEMENTS) setPreventPointerEvents(true);
95
- else setPreventPointerEvents(false);
96
- lastProcessedTime.current = currentTime;
97
- prevPointerPos.current = {
98
- x: mouseX,
99
- y: mouseY
100
- };
101
- // If the pointer is moving towards the submenu, start a timeout to close if no other movements are made after 500ms.
102
- if (isMovingTowardsSubmenu) timeout.current = setTimeout(()=>{
103
- reset();
104
- autoCloseTimeout.current = setTimeout(()=>{
105
- // Fire a pointerover event to trigger the menu to close.
106
- // Wait until pointer-events:none is no longer applied
107
- let target = document.elementFromPoint(mouseX, mouseY);
108
- if (target && (0, $fUfeP$nodeContains)(menu, target)) target.dispatchEvent(new PointerEvent('pointerover', {
109
- bubbles: true,
110
- cancelable: true
111
- }));
112
- }, 100);
113
- }, $d275435c250248f8$var$TIMEOUT_TIME);
114
- };
115
- window.addEventListener('pointermove', onPointerMove);
116
- // Prevent pointer down over the safe triangle. See above comment.
117
- // Do not enable in tests, because JSDom doesn't do hit testing.
118
- if (process.env.NODE_ENV !== 'test') window.addEventListener('pointerdown', onPointerDown, true);
119
- return ()=>{
120
- window.removeEventListener('pointermove', onPointerMove);
121
- if (process.env.NODE_ENV !== 'test') window.removeEventListener('pointerdown', onPointerDown, true);
122
- clearTimeout(timeout.current);
123
- clearTimeout(autoCloseTimeout.current);
124
- movementsTowardsSubmenuCount.current = $d275435c250248f8$var$ALLOWED_INVALID_MOVEMENTS;
125
- };
126
- }, [
127
- isDisabled,
128
- isOpen,
129
- menuRef,
130
- modality,
131
- setPreventPointerEvents,
132
- submenuRef
133
- ]);
134
- }
135
-
136
-
137
- export {$d275435c250248f8$export$85ec83e04c95f50a as useSafelyMouseToSubmenu};
138
- //# sourceMappingURL=useSafelyMouseToSubmenu.module.js.map
@@ -1 +0,0 @@
1
- {"mappings":"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","sources":["packages/@react-aria/menu/src/useSafelyMouseToSubmenu.ts"],"sourcesContent":["\nimport {nodeContains, useEffectEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {RefObject} from '@react-types/shared';\nimport {useEffect, useRef, useState} from 'react';\nimport {useInteractionModality} from '@react-aria/interactions';\n\ninterface SafelyMouseToSubmenuOptions {\n /** Ref for the parent menu. */\n menuRef: RefObject<Element | null>,\n /** Ref for the submenu. */\n submenuRef: RefObject<Element | null>,\n /** Whether the submenu is open. */\n isOpen: boolean,\n /** Whether this feature is disabled. */\n isDisabled?: boolean\n}\n\nconst ALLOWED_INVALID_MOVEMENTS = 2;\nconst THROTTLE_TIME = 50;\nconst TIMEOUT_TIME = 1000;\nconst ANGLE_PADDING = Math.PI / 12; // 15°\n\n/**\n * Allows the user to move their pointer to the submenu without it closing when their mouse leaves the trigger element.\n * Prevents pointer events from going to the underlying menu if the user is moving their pointer towards the sub-menu.\n */\nexport function useSafelyMouseToSubmenu(options: SafelyMouseToSubmenuOptions): void {\n let {menuRef, submenuRef, isOpen, isDisabled} = options;\n let prevPointerPos = useRef<{x: number, y: number} | undefined>(undefined);\n let submenuRect = useRef<DOMRect | undefined>(undefined);\n let lastProcessedTime = useRef<number>(0);\n let timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n let autoCloseTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n let submenuSide = useRef<'left' | 'right' | undefined>(undefined);\n let movementsTowardsSubmenuCount = useRef<number>(2);\n let [preventPointerEvents, setPreventPointerEvents] = useState(false);\n\n let updateSubmenuRect = () => {\n if (submenuRef.current) {\n submenuRect.current = submenuRef.current.getBoundingClientRect();\n submenuSide.current = undefined;\n }\n };\n useResizeObserver({ref: submenuRef, onResize: updateSubmenuRect});\n\n let reset = () => {\n setPreventPointerEvents(false);\n movementsTowardsSubmenuCount.current = ALLOWED_INVALID_MOVEMENTS;\n prevPointerPos.current = undefined;\n };\n\n let modality = useInteractionModality();\n\n // Prevent mouse down over safe triangle. Clicking while pointer-events: none is applied\n // will cause focus to move unexpectedly since it will go to an element behind the menu.\n let onPointerDown = useEffectEvent((e: PointerEvent) => {\n if (preventPointerEvents) {\n e.preventDefault();\n }\n });\n\n useEffect(() => {\n if (preventPointerEvents && menuRef.current) {\n (menuRef.current as HTMLElement).style.pointerEvents = 'none';\n } else {\n (menuRef.current as HTMLElement).style.pointerEvents = '';\n }\n }, [menuRef, preventPointerEvents]);\n\n useLayoutEffect(() => {\n let submenu = submenuRef.current;\n let menu = menuRef.current;\n\n if (isDisabled || !submenu || !isOpen || modality !== 'pointer' || !menu) {\n reset();\n return;\n }\n submenuRect.current = submenu.getBoundingClientRect();\n\n let onPointerMove = (e: PointerEvent) => {\n if (e.pointerType === 'touch' || e.pointerType === 'pen') {\n return;\n }\n\n let currentTime = Date.now();\n\n // Throttle\n if (currentTime - lastProcessedTime.current < THROTTLE_TIME) {\n return;\n }\n clearTimeout(timeout.current);\n clearTimeout(autoCloseTimeout.current);\n\n let {clientX: mouseX, clientY: mouseY} = e;\n\n if (!prevPointerPos.current) {\n prevPointerPos.current = {x: mouseX, y: mouseY};\n return;\n }\n\n if (!submenuRect.current) {\n return;\n }\n\n if (!submenuSide.current) {\n submenuSide.current = mouseX > submenuRect.current.right ? 'left' : 'right';\n }\n\n // Pointer is outside of parent menu\n if (mouseX < menu.getBoundingClientRect().left || mouseX > menu.getBoundingClientRect().right || mouseY < menu.getBoundingClientRect().top || mouseY > menu.getBoundingClientRect().bottom) {\n reset();\n return;\n }\n\n /* Check if pointer is moving towards submenu.\n Uses the 2-argument arctangent (https://en.wikipedia.org/wiki/Atan2) to calculate:\n - angle between previous pointer and top of submenu\n - angle between previous pointer and bottom of submenu\n - angle between previous pointer and current pointer (delta)\n If the pointer delta angle value is between the top and bottom angle values, we know the pointer is moving towards the submenu.\n */\n let prevMouseX = prevPointerPos.current.x;\n let prevMouseY = prevPointerPos.current.y;\n let toSubmenuX = submenuSide.current === 'right' ? submenuRect.current.left - prevMouseX : prevMouseX - submenuRect.current.right;\n let angleTop = Math.atan2(prevMouseY - submenuRect.current.top, toSubmenuX) + ANGLE_PADDING;\n let angleBottom = Math.atan2(prevMouseY - submenuRect.current.bottom, toSubmenuX) - ANGLE_PADDING;\n let anglePointer = Math.atan2(prevMouseY - mouseY, (submenuSide.current === 'left' ? -(mouseX - prevMouseX) : mouseX - prevMouseX));\n let isMovingTowardsSubmenu = anglePointer < angleTop && anglePointer > angleBottom;\n\n movementsTowardsSubmenuCount.current = isMovingTowardsSubmenu ?\n Math.min(movementsTowardsSubmenuCount.current + 1, ALLOWED_INVALID_MOVEMENTS) :\n Math.max(movementsTowardsSubmenuCount.current - 1, 0);\n\n if (movementsTowardsSubmenuCount.current >= ALLOWED_INVALID_MOVEMENTS) {\n setPreventPointerEvents(true);\n } else {\n setPreventPointerEvents(false);\n }\n\n lastProcessedTime.current = currentTime;\n prevPointerPos.current = {x: mouseX, y: mouseY};\n\n // If the pointer is moving towards the submenu, start a timeout to close if no other movements are made after 500ms.\n if (isMovingTowardsSubmenu) {\n timeout.current = setTimeout(() => {\n reset();\n autoCloseTimeout.current = setTimeout(() => {\n // Fire a pointerover event to trigger the menu to close.\n // Wait until pointer-events:none is no longer applied\n let target = document.elementFromPoint(mouseX, mouseY);\n if (target && nodeContains(menu, target)) {\n target.dispatchEvent(new PointerEvent('pointerover', {bubbles: true, cancelable: true}));\n }\n }, 100);\n }, TIMEOUT_TIME);\n }\n };\n\n window.addEventListener('pointermove', onPointerMove);\n\n // Prevent pointer down over the safe triangle. See above comment.\n // Do not enable in tests, because JSDom doesn't do hit testing.\n if (process.env.NODE_ENV !== 'test') {\n window.addEventListener('pointerdown', onPointerDown, true);\n }\n\n return () => {\n window.removeEventListener('pointermove', onPointerMove);\n if (process.env.NODE_ENV !== 'test') {\n window.removeEventListener('pointerdown', onPointerDown, true);\n }\n clearTimeout(timeout.current);\n clearTimeout(autoCloseTimeout.current);\n movementsTowardsSubmenuCount.current = ALLOWED_INVALID_MOVEMENTS;\n };\n\n }, [isDisabled, isOpen, menuRef, modality, setPreventPointerEvents, submenuRef]);\n}\n"],"names":[],"version":3,"file":"useSafelyMouseToSubmenu.module.js.map"}
@@ -1,184 +0,0 @@
1
- var $62347d8c4183e713$exports = require("./useSafelyMouseToSubmenu.main.js");
2
- var $23MMN$reactariautils = require("@react-aria/utils");
3
- var $23MMN$react = require("react");
4
- var $23MMN$reactariai18n = require("@react-aria/i18n");
5
-
6
-
7
- function $parcel$export(e, n, v, s) {
8
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
9
- }
10
-
11
- $parcel$export(module.exports, "useSubmenuTrigger", () => $5f4753043c9f6cdf$export$7138b0d059a6e743);
12
- /*
13
- * Copyright 2023 Adobe. All rights reserved.
14
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
15
- * you may not use this file except in compliance with the License. You may obtain a copy
16
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
17
- *
18
- * Unless required by applicable law or agreed to in writing, software distributed under
19
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
20
- * OF ANY KIND, either express or implied. See the License for the specific language
21
- * governing permissions and limitations under the License.
22
- */
23
-
24
-
25
-
26
- function $5f4753043c9f6cdf$export$7138b0d059a6e743(props, state, ref) {
27
- let { parentMenuRef: parentMenuRef, submenuRef: submenuRef, type: type = 'menu', isDisabled: isDisabled, delay: delay = 200, shouldUseVirtualFocus: shouldUseVirtualFocus } = props;
28
- let submenuTriggerId = (0, $23MMN$reactariautils.useId)();
29
- let overlayId = (0, $23MMN$reactariautils.useId)();
30
- let { direction: direction } = (0, $23MMN$reactariai18n.useLocale)();
31
- let openTimeout = (0, $23MMN$react.useRef)(undefined);
32
- let cancelOpenTimeout = (0, $23MMN$react.useCallback)(()=>{
33
- if (openTimeout.current) {
34
- clearTimeout(openTimeout.current);
35
- openTimeout.current = undefined;
36
- }
37
- }, [
38
- openTimeout
39
- ]);
40
- let onSubmenuOpen = (0, $23MMN$react.useCallback)((focusStrategy)=>{
41
- cancelOpenTimeout();
42
- state.open(focusStrategy);
43
- }, [
44
- state,
45
- cancelOpenTimeout
46
- ]);
47
- let onSubmenuClose = (0, $23MMN$react.useCallback)(()=>{
48
- cancelOpenTimeout();
49
- state.close();
50
- }, [
51
- state,
52
- cancelOpenTimeout
53
- ]);
54
- (0, $23MMN$reactariautils.useLayoutEffect)(()=>{
55
- return ()=>{
56
- cancelOpenTimeout();
57
- };
58
- }, [
59
- cancelOpenTimeout
60
- ]);
61
- let submenuKeyDown = (e)=>{
62
- // If focus is not within the menu, assume virtual focus is being used.
63
- // This means some other input element is also within the popover, so we shouldn't close the menu.
64
- if (!(0, $23MMN$reactariautils.nodeContains)(e.currentTarget, document.activeElement)) return;
65
- switch(e.key){
66
- case 'ArrowLeft':
67
- if (direction === 'ltr' && (0, $23MMN$reactariautils.nodeContains)(e.currentTarget, e.target)) {
68
- e.preventDefault();
69
- e.stopPropagation();
70
- onSubmenuClose();
71
- if (!shouldUseVirtualFocus && ref.current) (0, $23MMN$reactariautils.focusWithoutScrolling)(ref.current);
72
- }
73
- break;
74
- case 'ArrowRight':
75
- if (direction === 'rtl' && (0, $23MMN$reactariautils.nodeContains)(e.currentTarget, e.target)) {
76
- e.preventDefault();
77
- e.stopPropagation();
78
- onSubmenuClose();
79
- if (!shouldUseVirtualFocus && ref.current) (0, $23MMN$reactariautils.focusWithoutScrolling)(ref.current);
80
- }
81
- break;
82
- case 'Escape':
83
- // TODO: can remove this when we fix collection event leaks
84
- if ((0, $23MMN$reactariautils.nodeContains)(submenuRef.current, e.target)) {
85
- e.stopPropagation();
86
- onSubmenuClose();
87
- if (!shouldUseVirtualFocus && ref.current) (0, $23MMN$reactariautils.focusWithoutScrolling)(ref.current);
88
- }
89
- break;
90
- }
91
- };
92
- var _state_focusStrategy;
93
- let submenuProps = {
94
- id: overlayId,
95
- 'aria-labelledby': submenuTriggerId,
96
- submenuLevel: state.submenuLevel,
97
- ...type === 'menu' && {
98
- onClose: state.closeAll,
99
- autoFocus: (_state_focusStrategy = state.focusStrategy) !== null && _state_focusStrategy !== void 0 ? _state_focusStrategy : undefined,
100
- onKeyDown: submenuKeyDown
101
- }
102
- };
103
- let submenuTriggerKeyDown = (e)=>{
104
- switch(e.key){
105
- case 'ArrowRight':
106
- if (!isDisabled) {
107
- if (direction === 'ltr') {
108
- e.preventDefault();
109
- if (!state.isOpen) onSubmenuOpen('first');
110
- if (type === 'menu' && !!(submenuRef === null || submenuRef === void 0 ? void 0 : submenuRef.current) && document.activeElement === (ref === null || ref === void 0 ? void 0 : ref.current)) (0, $23MMN$reactariautils.focusWithoutScrolling)(submenuRef.current);
111
- } else if (state.isOpen) onSubmenuClose();
112
- else e.continuePropagation();
113
- }
114
- break;
115
- case 'ArrowLeft':
116
- if (!isDisabled) {
117
- if (direction === 'rtl') {
118
- e.preventDefault();
119
- if (!state.isOpen) onSubmenuOpen('first');
120
- if (type === 'menu' && !!(submenuRef === null || submenuRef === void 0 ? void 0 : submenuRef.current) && document.activeElement === (ref === null || ref === void 0 ? void 0 : ref.current)) (0, $23MMN$reactariautils.focusWithoutScrolling)(submenuRef.current);
121
- } else if (state.isOpen) onSubmenuClose();
122
- else e.continuePropagation();
123
- }
124
- break;
125
- default:
126
- e.continuePropagation();
127
- break;
128
- }
129
- };
130
- let onPressStart = (e)=>{
131
- if (!isDisabled && (e.pointerType === 'virtual' || e.pointerType === 'keyboard')) // If opened with a screen reader or keyboard, auto focus the first submenu item.
132
- onSubmenuOpen('first');
133
- };
134
- let onPress = (e)=>{
135
- if (!isDisabled && (e.pointerType === 'touch' || e.pointerType === 'mouse')) // For touch or on a desktop device with a small screen open on press up to possible problems with
136
- // press up happening on the newly opened tray items
137
- onSubmenuOpen();
138
- };
139
- let onHoverChange = (isHovered)=>{
140
- if (!isDisabled) {
141
- if (isHovered && !state.isOpen) {
142
- if (!openTimeout.current) openTimeout.current = setTimeout(()=>{
143
- onSubmenuOpen();
144
- }, delay);
145
- } else if (!isHovered) cancelOpenTimeout();
146
- }
147
- };
148
- (0, $23MMN$reactariautils.useEvent)(parentMenuRef, 'focusin', (e)=>{
149
- // If we detect focus moved to a different item in the same menu that the currently open submenu trigger is in
150
- // then close the submenu. This is for a case where the user hovers a root menu item when multiple submenus are open
151
- if (state.isOpen && (0, $23MMN$reactariautils.nodeContains)(parentMenuRef.current, e.target) && e.target !== ref.current) onSubmenuClose();
152
- });
153
- let shouldCloseOnInteractOutside = (target)=>{
154
- if (target !== ref.current) return true;
155
- return false;
156
- };
157
- (0, $62347d8c4183e713$exports.useSafelyMouseToSubmenu)({
158
- menuRef: parentMenuRef,
159
- submenuRef: submenuRef,
160
- isOpen: state.isOpen,
161
- isDisabled: isDisabled
162
- });
163
- return {
164
- submenuTriggerProps: {
165
- id: submenuTriggerId,
166
- 'aria-controls': state.isOpen ? overlayId : undefined,
167
- 'aria-haspopup': !isDisabled ? type : undefined,
168
- 'aria-expanded': state.isOpen ? 'true' : 'false',
169
- onPressStart: onPressStart,
170
- onPress: onPress,
171
- onHoverChange: onHoverChange,
172
- onKeyDown: submenuTriggerKeyDown,
173
- isOpen: state.isOpen
174
- },
175
- submenuProps: submenuProps,
176
- popoverProps: {
177
- isNonModal: true,
178
- shouldCloseOnInteractOutside: shouldCloseOnInteractOutside
179
- }
180
- };
181
- }
182
-
183
-
184
- //# sourceMappingURL=useSubmenuTrigger.main.js.map
@@ -1 +0,0 @@
1
- {"mappings":"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","sources":["packages/@react-aria/menu/src/useSubmenuTrigger.ts"],"sourcesContent":["/*\n * Copyright 2023 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 {AriaMenuItemProps} from './useMenuItem';\nimport {AriaMenuOptions} from './useMenu';\nimport type {AriaPopoverProps, OverlayProps} from '@react-aria/overlays';\nimport {FocusableElement, FocusStrategy, KeyboardEvent, Node, PressEvent, RefObject} from '@react-types/shared';\nimport {focusWithoutScrolling, nodeContains, useEvent, useId, useLayoutEffect} from '@react-aria/utils';\nimport type {SubmenuTriggerState} from '@react-stately/menu';\nimport {useCallback, useRef} from 'react';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSafelyMouseToSubmenu} from './useSafelyMouseToSubmenu';\n\nexport interface AriaSubmenuTriggerProps {\n /**\n * An object representing the submenu trigger menu item. Contains all the relevant information that makes up the menu item.\n * @deprecated\n */\n node?: Node<unknown>,\n /** Whether the submenu trigger is disabled. */\n isDisabled?: boolean,\n /** The type of the contents that the submenu trigger opens. */\n type?: 'dialog' | 'menu',\n /** Ref of the menu that contains the submenu trigger. */\n parentMenuRef: RefObject<HTMLElement | null>,\n /** Ref of the submenu opened by the submenu trigger. */\n submenuRef: RefObject<HTMLElement | null>,\n /**\n * The delay time in milliseconds for the submenu to appear after hovering over the trigger.\n * @default 200\n */\n delay?: number,\n /** Whether the submenu trigger uses virtual focus. */\n shouldUseVirtualFocus?: boolean\n}\n\ninterface SubmenuTriggerProps extends Omit<AriaMenuItemProps, 'key'> {\n /** Whether the submenu trigger is in an expanded state. */\n isOpen: boolean\n}\n\ninterface SubmenuProps<T> extends AriaMenuOptions<T> {\n /** The level of the submenu. */\n submenuLevel: number\n}\n\nexport interface SubmenuTriggerAria<T> {\n /** Props for the submenu trigger menu item. */\n submenuTriggerProps: SubmenuTriggerProps,\n /** Props for the submenu controlled by the submenu trigger menu item. */\n submenuProps: SubmenuProps<T>,\n /** Props for the submenu's popover container. */\n popoverProps: Pick<AriaPopoverProps, 'isNonModal' | 'shouldCloseOnInteractOutside'> & Pick<OverlayProps, 'disableFocusManagement'>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a submenu trigger and its associated submenu.\n * @param props - Props for the submenu trigger and refs attach to its submenu and parent menu.\n * @param state - State for the submenu trigger.\n * @param ref - Ref to the submenu trigger element.\n */\nexport function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: SubmenuTriggerState, ref: RefObject<FocusableElement | null>): SubmenuTriggerAria<T> {\n let {parentMenuRef, submenuRef, type = 'menu', isDisabled, delay = 200, shouldUseVirtualFocus} = props;\n let submenuTriggerId = useId();\n let overlayId = useId();\n let {direction} = useLocale();\n let openTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n let cancelOpenTimeout = useCallback(() => {\n if (openTimeout.current) {\n clearTimeout(openTimeout.current);\n openTimeout.current = undefined;\n }\n }, [openTimeout]);\n\n let onSubmenuOpen = useCallback((focusStrategy?: FocusStrategy) => {\n cancelOpenTimeout();\n state.open(focusStrategy);\n }, [state, cancelOpenTimeout]);\n\n let onSubmenuClose = useCallback(() => {\n cancelOpenTimeout();\n state.close();\n }, [state, cancelOpenTimeout]);\n\n useLayoutEffect(() => {\n return () => {\n cancelOpenTimeout();\n };\n }, [cancelOpenTimeout]);\n\n let submenuKeyDown = (e: KeyboardEvent) => {\n // If focus is not within the menu, assume virtual focus is being used.\n // This means some other input element is also within the popover, so we shouldn't close the menu.\n if (!nodeContains(e.currentTarget, document.activeElement)) {\n return;\n }\n\n switch (e.key) {\n case 'ArrowLeft':\n if (direction === 'ltr' && nodeContains(e.currentTarget, e.target as Element)) {\n e.preventDefault();\n e.stopPropagation();\n onSubmenuClose();\n if (!shouldUseVirtualFocus && ref.current) {\n focusWithoutScrolling(ref.current);\n }\n }\n break;\n case 'ArrowRight':\n if (direction === 'rtl' && nodeContains(e.currentTarget, e.target as Element)) {\n e.preventDefault();\n e.stopPropagation();\n onSubmenuClose();\n if (!shouldUseVirtualFocus && ref.current) {\n focusWithoutScrolling(ref.current);\n }\n }\n break;\n case 'Escape':\n // TODO: can remove this when we fix collection event leaks\n if (nodeContains(submenuRef.current, e.target as Element)) {\n e.stopPropagation();\n onSubmenuClose();\n if (!shouldUseVirtualFocus && ref.current) {\n focusWithoutScrolling(ref.current);\n }\n }\n break;\n }\n };\n\n let submenuProps = {\n id: overlayId,\n 'aria-labelledby': submenuTriggerId,\n submenuLevel: state.submenuLevel,\n ...(type === 'menu' && {\n onClose: state.closeAll,\n autoFocus: state.focusStrategy ?? undefined,\n onKeyDown: submenuKeyDown\n })\n };\n\n let submenuTriggerKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowRight':\n if (!isDisabled) {\n if (direction === 'ltr') {\n e.preventDefault();\n if (!state.isOpen) {\n onSubmenuOpen('first');\n }\n\n if (type === 'menu' && !!submenuRef?.current && document.activeElement === ref?.current) {\n focusWithoutScrolling(submenuRef.current);\n }\n } else if (state.isOpen) {\n onSubmenuClose();\n } else {\n e.continuePropagation();\n }\n }\n\n break;\n case 'ArrowLeft':\n if (!isDisabled) {\n if (direction === 'rtl') {\n e.preventDefault();\n if (!state.isOpen) {\n onSubmenuOpen('first');\n }\n\n if (type === 'menu' && !!submenuRef?.current && document.activeElement === ref?.current) {\n focusWithoutScrolling(submenuRef.current);\n }\n } else if (state.isOpen) {\n onSubmenuClose();\n } else {\n e.continuePropagation();\n }\n }\n break;\n default:\n e.continuePropagation();\n break;\n }\n };\n\n let onPressStart = (e: PressEvent) => {\n if (!isDisabled && (e.pointerType === 'virtual' || e.pointerType === 'keyboard')) {\n // If opened with a screen reader or keyboard, auto focus the first submenu item.\n onSubmenuOpen('first');\n }\n };\n\n let onPress = (e: PressEvent) => {\n if (!isDisabled && (e.pointerType === 'touch' || e.pointerType === 'mouse')) {\n // For touch or on a desktop device with a small screen open on press up to possible problems with\n // press up happening on the newly opened tray items\n onSubmenuOpen();\n }\n };\n\n let onHoverChange = (isHovered) => {\n if (!isDisabled) {\n if (isHovered && !state.isOpen) {\n if (!openTimeout.current) {\n openTimeout.current = setTimeout(() => {\n onSubmenuOpen();\n }, delay);\n }\n } else if (!isHovered) {\n cancelOpenTimeout();\n }\n }\n };\n\n useEvent(parentMenuRef, 'focusin', (e) => {\n // If we detect focus moved to a different item in the same menu that the currently open submenu trigger is in\n // then close the submenu. This is for a case where the user hovers a root menu item when multiple submenus are open\n if (state.isOpen && (nodeContains(parentMenuRef.current, e.target as HTMLElement) && e.target !== ref.current)) {\n onSubmenuClose();\n }\n });\n\n let shouldCloseOnInteractOutside = (target) => {\n if (target !== ref.current) {\n return true;\n }\n\n return false;\n };\n\n useSafelyMouseToSubmenu({menuRef: parentMenuRef, submenuRef, isOpen: state.isOpen, isDisabled: isDisabled});\n\n return {\n submenuTriggerProps: {\n id: submenuTriggerId,\n 'aria-controls': state.isOpen ? overlayId : undefined,\n 'aria-haspopup': !isDisabled ? type : undefined,\n 'aria-expanded': state.isOpen ? 'true' : 'false',\n onPressStart,\n onPress,\n onHoverChange,\n onKeyDown: submenuTriggerKeyDown,\n isOpen: state.isOpen\n },\n submenuProps,\n popoverProps: {\n isNonModal: true,\n shouldCloseOnInteractOutside\n }\n };\n}\n"],"names":[],"version":3,"file":"useSubmenuTrigger.main.js.map"}