@react-spectrum/menu 3.16.1-nightly.4318 → 3.16.1-nightly.4324

package/dist/import.mjs

@@ -1,24 +1,28 @@
+"use client";
+
 import "./main.css";
 import {Item as $5ae296f2d6923e14$re_export$Item, Section as $5ae296f2d6923e14$re_export$Section, getChildNodes as $9SHwR$getChildNodes} from "@react-stately/collections";
-import {useDOMRef as $9SHwR$useDOMRef, useIsMobileDevice as $9SHwR$useIsMobileDevice, classNames as $9SHwR$classNames, SlotProvider as $9SHwR$SlotProvider, useStyleProps as $9SHwR$useStyleProps, ClearSlots as $9SHwR$ClearSlots, useSlotProps as $9SHwR$useSlotProps} from "@react-spectrum/utils";
-import {Tray as $9SHwR$Tray, Popover as $9SHwR$Popover, Modal as $9SHwR$Modal} from "@react-spectrum/overlays";
-import {PressResponder as $9SHwR$PressResponder} from "@react-aria/interactions";
-import $9SHwR$react, {useRef as $9SHwR$useRef, Fragment as $9SHwR$Fragment, forwardRef as $9SHwR$forwardRef, useContext as $9SHwR$useContext, useMemo as $9SHwR$useMemo} from "react";
-import {useMenuTrigger as $9SHwR$useMenuTrigger, useMenu as $9SHwR$useMenu, useMenuItem as $9SHwR$useMenuItem, useMenuSection as $9SHwR$useMenuSection} from "@react-aria/menu";
-import {useMenuTriggerState as $9SHwR$useMenuTriggerState} from "@react-stately/menu";
+import {useDOMRef as $9SHwR$useDOMRef, useIsMobileDevice as $9SHwR$useIsMobileDevice, classNames as $9SHwR$classNames, SlotProvider as $9SHwR$SlotProvider, useStyleProps as $9SHwR$useStyleProps, ClearSlots as $9SHwR$ClearSlots, useSlotProps as $9SHwR$useSlotProps, unwrapDOMRef as $9SHwR$unwrapDOMRef} from "@react-spectrum/utils";
+import {Tray as $9SHwR$Tray, Popover as $9SHwR$Popover} from "@react-spectrum/overlays";
+import {PressResponder as $9SHwR$PressResponder, getInteractionModality as $9SHwR$getInteractionModality} from "@react-aria/interactions";
+import $9SHwR$react, {useRef as $9SHwR$useRef, Fragment as $9SHwR$Fragment, forwardRef as $9SHwR$forwardRef, useContext as $9SHwR$useContext, useState as $9SHwR$useState, useEffect as $9SHwR$useEffect, useMemo as $9SHwR$useMemo} from "react";
+import {useMenuTrigger as $9SHwR$useMenuTrigger, UNSTABLE_useSubmenuTrigger as $9SHwR$UNSTABLE_useSubmenuTrigger, useMenu as $9SHwR$useMenu, useMenuItem as $9SHwR$useMenuItem, useMenuSection as $9SHwR$useMenuSection} from "@react-aria/menu";
+import {useMenuTriggerState as $9SHwR$useMenuTriggerState, UNSTABLE_useSubmenuTriggerState as $9SHwR$UNSTABLE_useSubmenuTriggerState} from "@react-stately/menu";
+import {useLayoutEffect as $9SHwR$useLayoutEffect, mergeProps as $9SHwR$mergeProps, useSyncRef as $9SHwR$useSyncRef, useSlotId as $9SHwR$useSlotId, useObjectRef as $9SHwR$useObjectRef, mergeRefs as $9SHwR$mergeRefs, filterDOMProps as $9SHwR$filterDOMProps} from "@react-aria/utils";
+import $9SHwR$reactdom from "react-dom";
+import {useLocale as $9SHwR$useLocale, useLocalizedStringFormatter as $9SHwR$useLocalizedStringFormatter} from "@react-aria/i18n";
+import {ActionButton as $9SHwR$ActionButton} from "@react-spectrum/button";
+import $9SHwR$spectrumiconsuiArrowDownSmall from "@spectrum-icons/ui/ArrowDownSmall";
 import {FocusScope as $9SHwR$FocusScope, FocusRing as $9SHwR$FocusRing} from "@react-aria/focus";
-import {mergeProps as $9SHwR$mergeProps, useSyncRef as $9SHwR$useSyncRef, useObjectRef as $9SHwR$useObjectRef, mergeRefs as $9SHwR$mergeRefs, useSlotId as $9SHwR$useSlotId, filterDOMProps as $9SHwR$filterDOMProps} from "@react-aria/utils";
 import {useTreeState as $9SHwR$useTreeState} from "@react-stately/tree";
 import $9SHwR$spectrumiconsuiCheckmarkMedium from "@spectrum-icons/ui/CheckmarkMedium";
+import $9SHwR$spectrumiconsworkflowChevronLeft from "@spectrum-icons/workflow/ChevronLeft";
+import $9SHwR$spectrumiconsworkflowChevronRight from "@spectrum-icons/workflow/ChevronRight";
 import {Grid as $9SHwR$Grid} from "@react-spectrum/layout";
 import $9SHwR$spectrumiconsworkflowInfoOutline from "@spectrum-icons/workflow/InfoOutline";
 import {Text as $9SHwR$Text} from "@react-spectrum/text";
-import {useLocalizedStringFormatter as $9SHwR$useLocalizedStringFormatter} from "@react-aria/i18n";
 import {useSeparator as $9SHwR$useSeparator} from "@react-aria/separator";
-import {ActionButton as $9SHwR$ActionButton} from "@react-spectrum/button";
 import $9SHwR$spectrumiconsworkflowMore from "@spectrum-icons/workflow/More";
-import {DismissButton as $9SHwR$DismissButton} from "@react-aria/overlays";
-import {useOverlayTriggerState as $9SHwR$useOverlayTriggerState} from "@react-stately/overlays";
 
 
 function $parcel$interopDefault(a) {
@@ -65,11 +69,11 @@ const $d94604d52c3e3feb$export$c7e742effb1c51e2 = (0, $9SHwR$react).createContex
 function $d94604d52c3e3feb$export$21c7ab35b39f78ec() {
     return (0, $9SHwR$useContext)($d94604d52c3e3feb$export$c7e742effb1c51e2);
 }
-const $d94604d52c3e3feb$export$e239f1ef5b7afe1a = (0, $9SHwR$react).createContext(undefined);
-function $d94604d52c3e3feb$export$4bbcd0ebecc48abd() {
-    return (0, $9SHwR$useContext)($d94604d52c3e3feb$export$e239f1ef5b7afe1a);
+const $d94604d52c3e3feb$export$8d97fe02339fc0e3 = (0, $9SHwR$react).createContext(undefined);
+function $d94604d52c3e3feb$export$dc2161044aa0b36d() {
+    return (0, $9SHwR$useContext)($d94604d52c3e3feb$export$8d97fe02339fc0e3);
 }
-const $d94604d52c3e3feb$export$24aad8519b95b41b = (0, $9SHwR$react).createContext({});
+const $d94604d52c3e3feb$export$24aad8519b95b41b = (0, $9SHwR$react).createContext(undefined);
 function $d94604d52c3e3feb$export$efa3856fc0e85e7f() {
     return (0, $9SHwR$useContext)($d94604d52c3e3feb$export$24aad8519b95b41b);
 }
@@ -81,6 +85,7 @@ function $d94604d52c3e3feb$export$efa3856fc0e85e7f() {
 var $286d1cb34bb7dc84$exports = {};
 
 $parcel$export($286d1cb34bb7dc84$exports, "checkmark", () => $286d1cb34bb7dc84$export$292abbf31ed842a, (v) => $286d1cb34bb7dc84$export$292abbf31ed842a = v);
+$parcel$export($286d1cb34bb7dc84$exports, "chevron", () => $286d1cb34bb7dc84$export$980c1089c0604ea3, (v) => $286d1cb34bb7dc84$export$980c1089c0604ea3 = v);
 $parcel$export($286d1cb34bb7dc84$exports, "description", () => $286d1cb34bb7dc84$export$6d59db4903f20f7d, (v) => $286d1cb34bb7dc84$export$6d59db4903f20f7d = v);
 $parcel$export($286d1cb34bb7dc84$exports, "end", () => $286d1cb34bb7dc84$export$bd5df0f255a350f8, (v) => $286d1cb34bb7dc84$export$bd5df0f255a350f8 = v);
 $parcel$export($286d1cb34bb7dc84$exports, "focus-ring", () => $286d1cb34bb7dc84$export$f39a09f249340e2a, (v) => $286d1cb34bb7dc84$export$f39a09f249340e2a = v);
@@ -88,6 +93,7 @@ $parcel$export($286d1cb34bb7dc84$exports, "i18nFontFamily", () => $286d1cb34bb7d
 $parcel$export($286d1cb34bb7dc84$exports, "icon", () => $286d1cb34bb7dc84$export$1ca1ec8b29a4ce27, (v) => $286d1cb34bb7dc84$export$1ca1ec8b29a4ce27 = v);
 $parcel$export($286d1cb34bb7dc84$exports, "is-active", () => $286d1cb34bb7dc84$export$20fd0f7cd4e6112f, (v) => $286d1cb34bb7dc84$export$20fd0f7cd4e6112f = v);
 $parcel$export($286d1cb34bb7dc84$exports, "is-disabled", () => $286d1cb34bb7dc84$export$d35bc1e505d1ebbf, (v) => $286d1cb34bb7dc84$export$d35bc1e505d1ebbf = v);
+$parcel$export($286d1cb34bb7dc84$exports, "is-expanded", () => $286d1cb34bb7dc84$export$911ebb89bba4b634, (v) => $286d1cb34bb7dc84$export$911ebb89bba4b634 = v);
 $parcel$export($286d1cb34bb7dc84$exports, "is-focused", () => $286d1cb34bb7dc84$export$e7dc768d35940237, (v) => $286d1cb34bb7dc84$export$e7dc768d35940237 = v);
 $parcel$export($286d1cb34bb7dc84$exports, "is-highlighted", () => $286d1cb34bb7dc84$export$451c613d0772eb99, (v) => $286d1cb34bb7dc84$export$451c613d0772eb99 = v);
 $parcel$export($286d1cb34bb7dc84$exports, "is-hovered", () => $286d1cb34bb7dc84$export$b8813cd5d7824ce7, (v) => $286d1cb34bb7dc84$export$b8813cd5d7824ce7 = v);
@@ -100,7 +106,9 @@ $parcel$export($286d1cb34bb7dc84$exports, "spectrum-FocusRing", () => $286d1cb34
 $parcel$export($286d1cb34bb7dc84$exports, "spectrum-FocusRing--quiet", () => $286d1cb34bb7dc84$export$2927016961429360, (v) => $286d1cb34bb7dc84$export$2927016961429360 = v);
 $parcel$export($286d1cb34bb7dc84$exports, "spectrum-Icon", () => $286d1cb34bb7dc84$export$d374b04f30360026, (v) => $286d1cb34bb7dc84$export$d374b04f30360026 = v);
 $parcel$export($286d1cb34bb7dc84$exports, "spectrum-Menu", () => $286d1cb34bb7dc84$export$fae6af6decd50ac5, (v) => $286d1cb34bb7dc84$export$fae6af6decd50ac5 = v);
+$parcel$export($286d1cb34bb7dc84$exports, "spectrum-Menu-avatar", () => $286d1cb34bb7dc84$export$944daf9b7d423a02, (v) => $286d1cb34bb7dc84$export$944daf9b7d423a02 = v);
 $parcel$export($286d1cb34bb7dc84$exports, "spectrum-Menu-checkmark", () => $286d1cb34bb7dc84$export$8e15a726e4f7e62d, (v) => $286d1cb34bb7dc84$export$8e15a726e4f7e62d = v);
+$parcel$export($286d1cb34bb7dc84$exports, "spectrum-Menu-chevron", () => $286d1cb34bb7dc84$export$ca45e0db366b8e6c, (v) => $286d1cb34bb7dc84$export$ca45e0db366b8e6c = v);
 $parcel$export($286d1cb34bb7dc84$exports, "spectrum-Menu-description", () => $286d1cb34bb7dc84$export$36f1275051e39ead, (v) => $286d1cb34bb7dc84$export$36f1275051e39ead = v);
 $parcel$export($286d1cb34bb7dc84$exports, "spectrum-Menu-divider", () => $286d1cb34bb7dc84$export$e892026f534efed8, (v) => $286d1cb34bb7dc84$export$e892026f534efed8 = v);
 $parcel$export($286d1cb34bb7dc84$exports, "spectrum-Menu-end", () => $286d1cb34bb7dc84$export$926a1bb74ed65667, (v) => $286d1cb34bb7dc84$export$926a1bb74ed65667 = v);
@@ -118,8 +126,14 @@ $parcel$export($286d1cb34bb7dc84$exports, "spectrum-Menu-section--noHeading", ()
 $parcel$export($286d1cb34bb7dc84$exports, "spectrum-Menu-sectionHeading", () => $286d1cb34bb7dc84$export$c20ea4b35020fbdd, (v) => $286d1cb34bb7dc84$export$c20ea4b35020fbdd = v);
 $parcel$export($286d1cb34bb7dc84$exports, "spectrum-Menu-subdialog", () => $286d1cb34bb7dc84$export$d7e47bfca92b5744, (v) => $286d1cb34bb7dc84$export$d7e47bfca92b5744 = v);
 $parcel$export($286d1cb34bb7dc84$exports, "spectrum-Menu-wrapper", () => $286d1cb34bb7dc84$export$76d36e55740ad742, (v) => $286d1cb34bb7dc84$export$76d36e55740ad742 = v);
+$parcel$export($286d1cb34bb7dc84$exports, "spectrum-Menu-wrapper--isMobile", () => $286d1cb34bb7dc84$export$c873119be41fdb72, (v) => $286d1cb34bb7dc84$export$c873119be41fdb72 = v);
+$parcel$export($286d1cb34bb7dc84$exports, "spectrum-Submenu-heading", () => $286d1cb34bb7dc84$export$c830d2588e34dae1, (v) => $286d1cb34bb7dc84$export$c830d2588e34dae1 = v);
+$parcel$export($286d1cb34bb7dc84$exports, "spectrum-Submenu-headingWrapper", () => $286d1cb34bb7dc84$export$d3fc690f61339a08, (v) => $286d1cb34bb7dc84$export$d3fc690f61339a08 = v);
+$parcel$export($286d1cb34bb7dc84$exports, "spectrum-Submenu-popover", () => $286d1cb34bb7dc84$export$fe967dac6207a986, (v) => $286d1cb34bb7dc84$export$fe967dac6207a986 = v);
+$parcel$export($286d1cb34bb7dc84$exports, "spectrum-Submenu-wrapper", () => $286d1cb34bb7dc84$export$158cbd6607d36c4e, (v) => $286d1cb34bb7dc84$export$158cbd6607d36c4e = v);
 $parcel$export($286d1cb34bb7dc84$exports, "text", () => $286d1cb34bb7dc84$export$6f093cfa640b7166, (v) => $286d1cb34bb7dc84$export$6f093cfa640b7166 = v);
 var $286d1cb34bb7dc84$export$292abbf31ed842a;
+var $286d1cb34bb7dc84$export$980c1089c0604ea3;
 var $286d1cb34bb7dc84$export$6d59db4903f20f7d;
 var $286d1cb34bb7dc84$export$bd5df0f255a350f8;
 var $286d1cb34bb7dc84$export$f39a09f249340e2a;
@@ -127,6 +141,7 @@ var $286d1cb34bb7dc84$export$8c4ee2c50c22c514;
 var $286d1cb34bb7dc84$export$1ca1ec8b29a4ce27;
 var $286d1cb34bb7dc84$export$20fd0f7cd4e6112f;
 var $286d1cb34bb7dc84$export$d35bc1e505d1ebbf;
+var $286d1cb34bb7dc84$export$911ebb89bba4b634;
 var $286d1cb34bb7dc84$export$e7dc768d35940237;
 var $286d1cb34bb7dc84$export$451c613d0772eb99;
 var $286d1cb34bb7dc84$export$b8813cd5d7824ce7;
@@ -139,7 +154,9 @@ var $286d1cb34bb7dc84$export$24c7f46a6e3605dd;
 var $286d1cb34bb7dc84$export$2927016961429360;
 var $286d1cb34bb7dc84$export$d374b04f30360026;
 var $286d1cb34bb7dc84$export$fae6af6decd50ac5;
+var $286d1cb34bb7dc84$export$944daf9b7d423a02;
 var $286d1cb34bb7dc84$export$8e15a726e4f7e62d;
+var $286d1cb34bb7dc84$export$ca45e0db366b8e6c;
 var $286d1cb34bb7dc84$export$36f1275051e39ead;
 var $286d1cb34bb7dc84$export$e892026f534efed8;
 var $286d1cb34bb7dc84$export$926a1bb74ed65667;
@@ -157,8 +174,14 @@ var $286d1cb34bb7dc84$export$8b61ec49b96ad17e;
 var $286d1cb34bb7dc84$export$c20ea4b35020fbdd;
 var $286d1cb34bb7dc84$export$d7e47bfca92b5744;
 var $286d1cb34bb7dc84$export$76d36e55740ad742;
+var $286d1cb34bb7dc84$export$c873119be41fdb72;
+var $286d1cb34bb7dc84$export$c830d2588e34dae1;
+var $286d1cb34bb7dc84$export$d3fc690f61339a08;
+var $286d1cb34bb7dc84$export$fe967dac6207a986;
+var $286d1cb34bb7dc84$export$158cbd6607d36c4e;
 var $286d1cb34bb7dc84$export$6f093cfa640b7166;
 $286d1cb34bb7dc84$export$292abbf31ed842a = `Q7FggG_checkmark`;
+$286d1cb34bb7dc84$export$980c1089c0604ea3 = `Q7FggG_chevron`;
 $286d1cb34bb7dc84$export$6d59db4903f20f7d = `Q7FggG_description`;
 $286d1cb34bb7dc84$export$bd5df0f255a350f8 = `Q7FggG_end`;
 $286d1cb34bb7dc84$export$f39a09f249340e2a = `Q7FggG_focus-ring`;
@@ -166,6 +189,7 @@ $286d1cb34bb7dc84$export$8c4ee2c50c22c514 = `Q7FggG_i18nFontFamily`;
 $286d1cb34bb7dc84$export$1ca1ec8b29a4ce27 = `Q7FggG_icon`;
 $286d1cb34bb7dc84$export$20fd0f7cd4e6112f = `Q7FggG_is-active`;
 $286d1cb34bb7dc84$export$d35bc1e505d1ebbf = `Q7FggG_is-disabled`;
+$286d1cb34bb7dc84$export$911ebb89bba4b634 = `Q7FggG_is-expanded`;
 $286d1cb34bb7dc84$export$e7dc768d35940237 = `Q7FggG_is-focused`;
 $286d1cb34bb7dc84$export$451c613d0772eb99 = `Q7FggG_is-highlighted`;
 $286d1cb34bb7dc84$export$b8813cd5d7824ce7 = `Q7FggG_is-hovered`;
@@ -178,7 +202,9 @@ $286d1cb34bb7dc84$export$24c7f46a6e3605dd = `Q7FggG_spectrum-FocusRing ${$286d1c
 $286d1cb34bb7dc84$export$2927016961429360 = `Q7FggG_spectrum-FocusRing--quiet`;
 $286d1cb34bb7dc84$export$d374b04f30360026 = `Q7FggG_spectrum-Icon`;
 $286d1cb34bb7dc84$export$fae6af6decd50ac5 = `Q7FggG_spectrum-Menu`;
+$286d1cb34bb7dc84$export$944daf9b7d423a02 = `Q7FggG_spectrum-Menu-avatar`;
 $286d1cb34bb7dc84$export$8e15a726e4f7e62d = `Q7FggG_spectrum-Menu-checkmark`;
+$286d1cb34bb7dc84$export$ca45e0db366b8e6c = `Q7FggG_spectrum-Menu-chevron`;
 $286d1cb34bb7dc84$export$36f1275051e39ead = `Q7FggG_spectrum-Menu-description`;
 $286d1cb34bb7dc84$export$e892026f534efed8 = `Q7FggG_spectrum-Menu-divider`;
 $286d1cb34bb7dc84$export$926a1bb74ed65667 = `Q7FggG_spectrum-Menu-end`;
@@ -196,6 +222,11 @@ $286d1cb34bb7dc84$export$8b61ec49b96ad17e = `Q7FggG_spectrum-Menu-section--noHea
 $286d1cb34bb7dc84$export$c20ea4b35020fbdd = `Q7FggG_spectrum-Menu-sectionHeading`;
 $286d1cb34bb7dc84$export$d7e47bfca92b5744 = `Q7FggG_spectrum-Menu-subdialog`;
 $286d1cb34bb7dc84$export$76d36e55740ad742 = `Q7FggG_spectrum-Menu-wrapper`;
+$286d1cb34bb7dc84$export$c873119be41fdb72 = `Q7FggG_spectrum-Menu-wrapper--isMobile`;
+$286d1cb34bb7dc84$export$c830d2588e34dae1 = `Q7FggG_spectrum-Submenu-heading`;
+$286d1cb34bb7dc84$export$d3fc690f61339a08 = `Q7FggG_spectrum-Submenu-headingWrapper`;
+$286d1cb34bb7dc84$export$fe967dac6207a986 = `Q7FggG_spectrum-Submenu-popover`;
+$286d1cb34bb7dc84$export$158cbd6607d36c4e = `Q7FggG_spectrum-Submenu-wrapper`;
 $286d1cb34bb7dc84$export$6f093cfa640b7166 = `Q7FggG_text`;
 
 
@@ -228,7 +259,6 @@ function $aa0b855f135b86e3$var$MenuTrigger(props, ref) {
     let isMobile = (0, $9SHwR$useIsMobileDevice)();
     let menuContext = {
         ...menuProps,
-        state: state,
         ref: menuRef,
         onClose: state.close,
         closeOnSelect: closeOnSelect,
@@ -239,12 +269,14 @@ function $aa0b855f135b86e3$var$MenuTrigger(props, ref) {
         } : undefined,
         UNSAFE_className: (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports))), {
             "spectrum-Menu-popover": !isMobile
-        })
+        }),
+        state: state
     };
     // On small screen devices, the menu is rendered in a tray, otherwise a popover.
     let overlay;
     if (isMobile) overlay = /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$Tray), {
-        state: state
+        state: state,
+        isFixedHeight: true
     }, menu);
     else overlay = /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$Popover), {
         UNSAFE_style: {
@@ -293,6 +325,136 @@ function $aa0b855f135b86e3$var$MenuTrigger(props, ref) {
  */ 
 
 
+
+
+
+
+
+
+
+function $3f13e15cf95c3893$var$SubmenuTrigger(props) {
+    let triggerRef = (0, $9SHwR$useRef)();
+    let { children: children, targetKey: targetKey } = props;
+    let [menuTrigger, menu] = (0, $9SHwR$react).Children.toArray(children);
+    let { popoverContainerRef: popoverContainerRef, trayContainerRef: trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState: rootMenuTriggerState, state: state } = (0, $d94604d52c3e3feb$export$efa3856fc0e85e7f)();
+    let triggerNode = state.collection.getItem(targetKey);
+    let submenuTriggerState = (0, $9SHwR$UNSTABLE_useSubmenuTriggerState)({
+        triggerKey: targetKey
+    }, rootMenuTriggerState);
+    let { submenuTriggerProps: submenuTriggerProps, submenuProps: submenuProps, popoverProps: popoverProps } = (0, $9SHwR$UNSTABLE_useSubmenuTrigger)({
+        node: triggerNode,
+        parentMenuRef: parentMenuRef,
+        submenuRef: menuRef
+    }, submenuTriggerState, triggerRef);
+    let isMobile = (0, $9SHwR$useIsMobileDevice)();
+    let onBackButtonPress = ()=>{
+        submenuTriggerState.close();
+        if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) parentMenuRef.current.focus();
+    };
+    let { direction: direction } = (0, $9SHwR$useLocale)();
+    let mobileSubmenuKeyDown = (e)=>{
+        switch(e.key){
+            case "ArrowLeft":
+                if (direction === "ltr") triggerRef.current.focus();
+                break;
+            case "ArrowRight":
+                if (direction === "rtl") triggerRef.current.focus();
+                break;
+        }
+    };
+    let overlay;
+    let [offset, setOffset] = (0, $9SHwR$useState)(0);
+    (0, $9SHwR$useLayoutEffect)(()=>{
+        if (parentMenuRef.current) {
+            var _window_getComputedStyle, _window;
+            let offset = (_window = window) === null || _window === void 0 ? void 0 : (_window_getComputedStyle = _window.getComputedStyle(parentMenuRef === null || parentMenuRef === void 0 ? void 0 : parentMenuRef.current)) === null || _window_getComputedStyle === void 0 ? void 0 : _window_getComputedStyle.getPropertyValue("--spectrum-submenu-offset-distance");
+            if (offset !== "") setOffset(-1 * parseInt(offset, 10));
+        }
+    }, [
+        parentMenuRef
+    ]);
+    if (isMobile) {
+        var _submenuProps;
+        delete submenuTriggerProps.onBlur;
+        delete submenuTriggerProps.onHoverChange;
+        var _autoFocus;
+        (_autoFocus = (_submenuProps = submenuProps).autoFocus) !== null && _autoFocus !== void 0 ? _autoFocus : _submenuProps.autoFocus = true;
+        if (trayContainerRef.current && submenuTriggerState.isOpen) overlay = /*#__PURE__*/ (0, $9SHwR$reactdom).createPortal(menu, trayContainerRef.current);
+    } else {
+        let onDismissButtonPress = ()=>{
+            var _parentMenuRef_current;
+            submenuTriggerState.close();
+            (_parentMenuRef_current = parentMenuRef.current) === null || _parentMenuRef_current === void 0 ? void 0 : _parentMenuRef_current.focus();
+        };
+        overlay = /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$Popover), {
+            ...popoverProps,
+            onDismissButtonPress: onDismissButtonPress,
+            UNSAFE_className: (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports))), "spectrum-Submenu-popover"),
+            container: popoverContainerRef.current,
+            containerPadding: 0,
+            crossOffset: offset,
+            offset: offset,
+            enableBothDismissButtons: true,
+            UNSAFE_style: {
+                clipPath: "unset",
+                overflow: "visible",
+                borderWidth: "0px"
+            },
+            state: submenuTriggerState,
+            triggerRef: triggerRef,
+            scrollRef: menuRef,
+            placement: "end top",
+            hideArrow: true
+        }, menu);
+    }
+    let menuContext = {
+        ...(0, $9SHwR$mergeProps)(submenuProps, {
+            ref: menuRef,
+            UNSAFE_style: isMobile ? {
+                width: "100%",
+                maxHeight: "inherit"
+            } : undefined,
+            UNSAFE_className: (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports))), {
+                "spectrum-Menu-popover": !isMobile
+            }),
+            ...isMobile && {
+                onBackButtonPress: onBackButtonPress,
+                onKeyDown: mobileSubmenuKeyDown
+            }
+        })
+    };
+    return /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$react).Fragment, null, /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $d94604d52c3e3feb$export$8d97fe02339fc0e3).Provider, {
+        value: {
+            triggerRef: triggerRef,
+            ...submenuTriggerProps
+        }
+    }, menuTrigger), /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $d94604d52c3e3feb$export$c7e742effb1c51e2).Provider, {
+        value: menuContext
+    }, overlay));
+}
+$3f13e15cf95c3893$var$SubmenuTrigger.getCollectionNode = function*(props) {
+    let childArray = [];
+    (0, $9SHwR$react).Children.forEach(props.children, (child)=>{
+        if (/*#__PURE__*/ (0, $9SHwR$react).isValidElement(child)) childArray.push(child);
+    });
+    let [trigger] = childArray;
+    let [, content] = props.children;
+    yield {
+        element: /*#__PURE__*/ (0, $9SHwR$react).cloneElement(trigger, {
+            ...trigger.props,
+            hasChildItems: true,
+            isTrigger: true
+        }),
+        wrapper: (element)=>/*#__PURE__*/ (0, $9SHwR$react).createElement($3f13e15cf95c3893$var$SubmenuTrigger, {
+                key: element.key,
+                targetKey: element.key,
+                ...props
+            }, element, content)
+    };
+};
+let $3f13e15cf95c3893$export$ecabc99eeffab7ca = $3f13e15cf95c3893$var$SubmenuTrigger;
+
+
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -307,7 +469,6 @@ function $aa0b855f135b86e3$var$MenuTrigger(props, ref) {
 
 
 
-
 var $90339528ca3fdd88$exports = {};
 var $9c47fa309a7d4d43$exports = {};
 $9c47fa309a7d4d43$exports = {
@@ -620,6 +781,25 @@ $90339528ca3fdd88$exports = {
 
 
 
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
 
 
 
@@ -628,17 +808,19 @@ $90339528ca3fdd88$exports = {
 
 function $48fb8f5e1202c980$export$2ce376c2cc3355c8(props) {
     let { item: item, state: state, isVirtualized: isVirtualized, onAction: onAction } = props;
-    let stringFormatter = (0, $9SHwR$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($90339528ca3fdd88$exports))));
-    let menuDialogContext = (0, $d94604d52c3e3feb$export$4bbcd0ebecc48abd)();
-    let { triggerRef: triggerRef } = menuDialogContext || {};
-    let isMenuDialogTrigger = !!menuDialogContext;
-    let isUnavailable = false;
-    if (isMenuDialogTrigger) isUnavailable = menuDialogContext.isUnavailable;
-    let ElementType = item.props.href ? "a" : "div";
     let { closeOnSelect: closeOnSelect } = (0, $d94604d52c3e3feb$export$21c7ab35b39f78ec)();
     let { rendered: rendered, key: key } = item;
-    let isSelected = state.selectionManager.isSelected(key);
+    let stringFormatter = (0, $9SHwR$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($90339528ca3fdd88$exports))));
+    let { direction: direction } = (0, $9SHwR$useLocale)();
+    let submenuTriggerContext = (0, $d94604d52c3e3feb$export$dc2161044aa0b36d)();
+    let { triggerRef: triggerRef, ...submenuTriggerProps } = submenuTriggerContext || {};
+    let isSubmenuTrigger = !!submenuTriggerContext;
+    let isUnavailable;
+    let ElementType = item.props.href ? "a" : "div";
+    if (isSubmenuTrigger) isUnavailable = submenuTriggerContext.isUnavailable;
     let isDisabled = state.disabledKeys.has(key);
+    let isSelectable = !isSubmenuTrigger && state.selectionManager.selectionMode !== "none";
+    let isSelected = isSelectable && state.selectionManager.isSelected(key);
     let itemref = (0, $9SHwR$useRef)(null);
     let ref = (0, $9SHwR$useObjectRef)((0, $9SHwR$useMemo)(()=>(0, $9SHwR$mergeRefs)(itemref, triggerRef), [
         itemref,
@@ -652,7 +834,7 @@ function $48fb8f5e1202c980$export$2ce376c2cc3355c8(props) {
         closeOnSelect: closeOnSelect,
         isVirtualized: isVirtualized,
         onAction: onAction,
-        "aria-haspopup": isMenuDialogTrigger && isUnavailable ? "dialog" : undefined
+        ...submenuTriggerProps
     }, state, ref);
     let endId = (0, $9SHwR$useSlotId)();
     let endProps = {};
@@ -672,8 +854,8 @@ function $48fb8f5e1202c980$export$2ce376c2cc3355c8(props) {
         className: (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports))), "spectrum-Menu-item", {
             "is-disabled": isDisabled,
             "is-selected": isSelected,
-            "is-selectable": state.selectionManager.selectionMode !== "none",
-            "is-open": state.expandedKeys.has(key)
+            "is-selectable": isSelectable,
+            "is-open": submenuTriggerProps.isOpen
         })
     }, /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$Grid), {
         UNSAFE_className: (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports))), "spectrum-Menu-itemGrid")
@@ -698,6 +880,10 @@ function $48fb8f5e1202c980$export$2ce376c2cc3355c8(props) {
             keyboard: {
                 UNSAFE_className: (0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports)))["spectrum-Menu-keyboard"],
                 ...keyboardShortcutProps
+            },
+            chevron: {
+                UNSAFE_className: (0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports)))["spectrum-Menu-chevron"],
+                size: "S"
             }
         }
     }, contents, isSelected && /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$spectrumiconsuiCheckmarkMedium), {
@@ -708,7 +894,11 @@ function $48fb8f5e1202c980$export$2ce376c2cc3355c8(props) {
         size: "XS",
         alignSelf: "center",
         "aria-label": stringFormatter.format("unavailable")
-    }))))));
+    }), isUnavailable == null && isSubmenuTrigger && (direction === "rtl" ? /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$spectrumiconsworkflowChevronLeft), {
+        slot: "chevron"
+    }) : /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$spectrumiconsworkflowChevronRight), {
+        slot: "chevron"
+    })))))));
 }
 
 
@@ -778,31 +968,64 @@ function $b966e606890cc5ca$export$4b1545b4f2016d26(props) {
 
 
 
+
 function $49b26f4b606348f6$var$Menu(props, ref) {
+    let isSubmenu = true;
     let contextProps = (0, $9SHwR$useContext)((0, $d94604d52c3e3feb$export$c7e742effb1c51e2));
+    let parentMenuContext = (0, $d94604d52c3e3feb$export$efa3856fc0e85e7f)();
+    let { rootMenuTriggerState: rootMenuTriggerState, state: parentMenuTreeState } = parentMenuContext || {
+        rootMenuTriggerState: contextProps.state
+    };
+    if (!parentMenuContext) isSubmenu = false;
     let completeProps = {
         ...(0, $9SHwR$mergeProps)(contextProps, props)
     };
     let domRef = (0, $9SHwR$useDOMRef)(ref);
-    let scopedRef = (0, $9SHwR$useRef)(null);
+    let popoverContainerRef = (0, $9SHwR$useRef)(null);
+    let trayContainerRef = (0, $9SHwR$useRef)(null);
     let state = (0, $9SHwR$useTreeState)(completeProps);
+    let submenuRef = (0, $9SHwR$useRef)(null);
     let { menuProps: menuProps } = (0, $9SHwR$useMenu)(completeProps, state, domRef);
     let { styleProps: styleProps } = (0, $9SHwR$useStyleProps)(completeProps);
     (0, $9SHwR$useSyncRef)(contextProps, domRef);
-    let isMobile = (0, $9SHwR$useIsMobileDevice)();
+    let [leftOffset, setLeftOffset] = (0, $9SHwR$useState)({
+        left: 0
+    });
+    (0, $9SHwR$useEffect)(()=>{
+        if (popoverContainerRef.current) {
+            let { left: left } = popoverContainerRef.current.getBoundingClientRect();
+            setLeftOffset({
+                left: -1 * left
+            });
+        }
+    }, []);
+    var _contextProps_submenuLevel;
+    let menuLevel = (_contextProps_submenuLevel = contextProps.submenuLevel) !== null && _contextProps_submenuLevel !== void 0 ? _contextProps_submenuLevel : -1;
+    let hasOpenSubmenu = state.collection.getItem(rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.UNSTABLE_expandedKeysStack[menuLevel + 1]) != null;
+    // TODO: add slide transition
     return /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $d94604d52c3e3feb$export$24aad8519b95b41b).Provider, {
         value: {
-            state: state,
-            container: scopedRef,
-            menu: domRef
+            popoverContainerRef: popoverContainerRef,
+            trayContainerRef: trayContainerRef,
+            menu: domRef,
+            submenu: submenuRef,
+            rootMenuTriggerState: rootMenuTriggerState,
+            state: state
         }
-    }, /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$FocusScope), {
-        contain: state.expandedKeys.size > 0
     }, /*#__PURE__*/ (0, $9SHwR$react).createElement("div", {
-        className: (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports))), !isMobile ? "spectrum-Menu-wrapper" : "")
+        style: {
+            height: hasOpenSubmenu ? "100%" : undefined
+        },
+        ref: trayContainerRef
+    }), /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$FocusScope), null, /*#__PURE__*/ (0, $9SHwR$react).createElement($49b26f4b606348f6$export$3dfe97b5c32d8d8c, {
+        onBackButtonPress: contextProps.onBackButtonPress,
+        hasOpenSubmenu: hasOpenSubmenu,
+        isSubmenu: isSubmenu,
+        parentMenuTreeState: parentMenuTreeState,
+        rootMenuTriggerState: rootMenuTriggerState
     }, /*#__PURE__*/ (0, $9SHwR$react).createElement("div", {
         ...menuProps,
-        ...styleProps,
+        style: (0, $9SHwR$mergeProps)(styleProps.style, menuProps.style),
         ref: domRef,
         className: (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports))), "spectrum-Menu", styleProps.className)
     }, [
@@ -822,10 +1045,59 @@ function $49b26f4b606348f6$var$Menu(props, ref) {
         });
         if (item.wrapper) menuItem = item.wrapper(menuItem);
         return menuItem;
-    }))), /*#__PURE__*/ (0, $9SHwR$react).createElement("div", {
-        ref: scopedRef
+    }))), (rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.isOpen) && /*#__PURE__*/ (0, $9SHwR$react).createElement("div", {
+        ref: popoverContainerRef,
+        style: {
+            width: "100vw",
+            position: "absolute",
+            top: -5,
+            ...leftOffset
+        }
     })));
 }
+function $49b26f4b606348f6$export$3dfe97b5c32d8d8c(props) {
+    var _parentMenuTreeState_collection_getItem;
+    let { children: children, isSubmenu: isSubmenu, hasOpenSubmenu: hasOpenSubmenu, parentMenuTreeState: parentMenuTreeState, rootMenuTriggerState: rootMenuTriggerState, onBackButtonPress: onBackButtonPress, wrapperKeyDown: wrapperKeyDown } = props;
+    let stringFormatter = (0, $9SHwR$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($90339528ca3fdd88$exports))));
+    let backButtonText = parentMenuTreeState === null || parentMenuTreeState === void 0 ? void 0 : (_parentMenuTreeState_collection_getItem = parentMenuTreeState.collection.getItem(rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.UNSTABLE_expandedKeysStack.slice(-1)[0])) === null || _parentMenuTreeState_collection_getItem === void 0 ? void 0 : _parentMenuTreeState_collection_getItem.textValue;
+    let backButtonLabel = stringFormatter.format("backButton", {
+        prevMenuButton: backButtonText
+    });
+    let headingId = (0, $9SHwR$useSlotId)();
+    let isMobile = (0, $9SHwR$useIsMobileDevice)();
+    let { direction: direction } = (0, $9SHwR$useLocale)();
+    return /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$react).Fragment, null, /*#__PURE__*/ (0, $9SHwR$react).createElement("div", {
+        role: headingId ? "dialog" : undefined,
+        "aria-labelledby": headingId,
+        "aria-hidden": isMobile && hasOpenSubmenu,
+        "data-testid": "menu-wrapper",
+        className: (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports))), "spectrum-Menu-wrapper", {
+            "spectrum-Menu-wrapper--isMobile": isMobile,
+            "is-expanded": hasOpenSubmenu
+        })
+    }, /*#__PURE__*/ (0, $9SHwR$react).createElement("div", {
+        role: "presentation",
+        className: (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports))), "spectrum-Submenu-wrapper"),
+        onKeyDown: wrapperKeyDown
+    }, isMobile && isSubmenu && !hasOpenSubmenu && /*#__PURE__*/ (0, $9SHwR$react).createElement("div", {
+        className: (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports))), "spectrum-Submenu-headingWrapper")
+    }, /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$ActionButton), {
+        "aria-label": backButtonLabel,
+        isQuiet: true,
+        onPress: onBackButtonPress
+    }, direction === "rtl" ? /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$spectrumiconsuiArrowDownSmall), {
+        UNSAFE_style: {
+            rotate: "270deg"
+        }
+    }) : /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$spectrumiconsuiArrowDownSmall), {
+        UNSAFE_style: {
+            rotate: "90deg"
+        }
+    })), /*#__PURE__*/ (0, $9SHwR$react).createElement("h1", {
+        id: headingId,
+        className: (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports))), "spectrum-Submenu-heading")
+    }, backButtonText)), children)));
+}
 /**
  * Menus display a list of actions or options that a user can choose.
  */ // forwardRef doesn't support generic parameters, so cast the result to the correct type
@@ -894,19 +1166,23 @@ function $43fa9949e6af393d$var$ActionMenu(props, ref) {
  * governing permissions and limitations under the License.
  */ 
 
+
 var $c487b1d738ebeac2$exports = {};
 
 $parcel$export($c487b1d738ebeac2$exports, "react-spectrum-ContextualHelp-button", () => $c487b1d738ebeac2$export$20d9583c9f1529c1, (v) => $c487b1d738ebeac2$export$20d9583c9f1529c1 = v);
 $parcel$export($c487b1d738ebeac2$exports, "react-spectrum-ContextualHelp-content", () => $c487b1d738ebeac2$export$a1f805890cf58c4, (v) => $c487b1d738ebeac2$export$a1f805890cf58c4 = v);
 $parcel$export($c487b1d738ebeac2$exports, "react-spectrum-ContextualHelp-dialog", () => $c487b1d738ebeac2$export$ab2d873674d20d28, (v) => $c487b1d738ebeac2$export$ab2d873674d20d28 = v);
+$parcel$export($c487b1d738ebeac2$exports, "react-spectrum-ContextualHelp-dialog--isMobile", () => $c487b1d738ebeac2$export$a438776606a9a3cc, (v) => $c487b1d738ebeac2$export$a438776606a9a3cc = v);
 $parcel$export($c487b1d738ebeac2$exports, "react-spectrum-ContextualHelp-footer", () => $c487b1d738ebeac2$export$d901bc3fa82b87a6, (v) => $c487b1d738ebeac2$export$d901bc3fa82b87a6 = v);
 var $c487b1d738ebeac2$export$20d9583c9f1529c1;
 var $c487b1d738ebeac2$export$a1f805890cf58c4;
 var $c487b1d738ebeac2$export$ab2d873674d20d28;
+var $c487b1d738ebeac2$export$a438776606a9a3cc;
 var $c487b1d738ebeac2$export$d901bc3fa82b87a6;
 $c487b1d738ebeac2$export$20d9583c9f1529c1 = `L6gUaa_react-spectrum-ContextualHelp-button`;
 $c487b1d738ebeac2$export$a1f805890cf58c4 = `L6gUaa_react-spectrum-ContextualHelp-content`;
 $c487b1d738ebeac2$export$ab2d873674d20d28 = `L6gUaa_react-spectrum-ContextualHelp-dialog`;
+$c487b1d738ebeac2$export$a438776606a9a3cc = `L6gUaa_react-spectrum-ContextualHelp-dialog--isMobile`;
 $c487b1d738ebeac2$export$d901bc3fa82b87a6 = `L6gUaa_react-spectrum-ContextualHelp-footer`;
 
 
@@ -915,24 +1191,39 @@ $c487b1d738ebeac2$export$d901bc3fa82b87a6 = `L6gUaa_react-spectrum-ContextualHel
 
 
 
+
+
+
+
 function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
-    let { isUnavailable: isUnavailable } = props;
+    let { isUnavailable: isUnavailable = false, targetKey: targetKey } = props;
     let triggerRef = (0, $9SHwR$useRef)(null);
     let popoverRef = (0, $9SHwR$useRef)(null);
-    let { state: menuState, container: container, menu: menu } = (0, $d94604d52c3e3feb$export$efa3856fc0e85e7f)();
-    let state = (0, $9SHwR$useOverlayTriggerState)({
-        isOpen: menuState.expandedKeys.has(props.targetKey),
-        onOpenChange: (val)=>{
-            if (!val) {
-                if (menuState.expandedKeys.has(props.targetKey)) menuState.toggleKey(props.targetKey);
-            }
-        }
+    let { popoverContainerRef: popoverContainerRef, trayContainerRef: trayContainerRef, rootMenuTriggerState: rootMenuTriggerState, menu: parentMenuRef, state: state } = (0, $d94604d52c3e3feb$export$efa3856fc0e85e7f)();
+    let triggerNode = state.collection.getItem(targetKey);
+    let submenuTriggerState = (0, $9SHwR$UNSTABLE_useSubmenuTriggerState)({
+        triggerKey: targetKey
+    }, {
+        ...rootMenuTriggerState,
+        ...state
     });
+    let submenuRef = (0, $9SHwR$unwrapDOMRef)(popoverRef);
+    let { submenuTriggerProps: submenuTriggerProps, popoverProps: popoverProps } = (0, $9SHwR$UNSTABLE_useSubmenuTrigger)({
+        node: triggerNode,
+        parentMenuRef: parentMenuRef,
+        submenuRef: submenuRef,
+        type: "dialog",
+        isDisabled: !isUnavailable
+    }, submenuTriggerState, triggerRef);
     let isMobile = (0, $9SHwR$useIsMobileDevice)();
     let slots = {};
     if (isUnavailable) slots = {
         dialog: {
-            UNSAFE_className: (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c487b1d738ebeac2$exports))), "react-spectrum-ContextualHelp-dialog", (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports))), !isMobile ? "spectrum-Menu-subdialog" : ""))
+            UNSAFE_className: (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c487b1d738ebeac2$exports))), "react-spectrum-ContextualHelp-dialog", {
+                "react-spectrum-ContextualHelp-dialog--isMobile": isMobile
+            }, (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports))), {
+                "spectrum-Menu-subdialog": !isMobile
+            }))
         },
         content: {
             UNSAFE_className: (0, (/*@__PURE__*/$parcel$interopDefault($c487b1d738ebeac2$exports)))["react-spectrum-ContextualHelp-content"]
@@ -943,60 +1234,102 @@ function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
     };
     let [trigger] = (0, $9SHwR$react).Children.toArray(props.children);
     let [, content] = props.children;
-    let onExit = ()=>{
-        // if focus was already moved back to a menu item, don't need to do anything
-        if (!menu.current.contains(document.activeElement)) // need to return focus to the trigger because hitting Esc causes focus to go to the subdialog, which is then unmounted
-        // this leads to blur never being fired nor focus on the body
-        triggerRef.current.focus();
-    };
     let onBlurWithin = (e)=>{
-        var _popoverRef_current;
-        if (e.relatedTarget && popoverRef.current && !((_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.UNSAFE_getDOMNode().contains(e.relatedTarget))) {
-            if (menuState.expandedKeys.has(props.targetKey)) menuState.toggleKey(props.targetKey);
+        var _popoverRef_current_UNSAFE_getDOMNode, _popoverRef_current;
+        if (e.relatedTarget && popoverRef.current && !(popoverRef === null || popoverRef === void 0 ? void 0 : (_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : (_popoverRef_current_UNSAFE_getDOMNode = _popoverRef_current.UNSAFE_getDOMNode()) === null || _popoverRef_current_UNSAFE_getDOMNode === void 0 ? void 0 : _popoverRef_current_UNSAFE_getDOMNode.contains(e.relatedTarget)) && !(e.relatedTarget === triggerRef.current && (0, $9SHwR$getInteractionModality)() === "pointer")) {
+            if (submenuTriggerState.isOpen) submenuTriggerState.close();
         }
     };
-    return /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$react).Fragment, null, /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $d94604d52c3e3feb$export$e239f1ef5b7afe1a).Provider, {
+    let overlay;
+    let tray;
+    let onBackButtonPress = ()=>{
+        submenuTriggerState.close();
+        if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) parentMenuRef.current.focus();
+    };
+    let [offset, setOffset] = (0, $9SHwR$useState)(0);
+    (0, $9SHwR$useLayoutEffect)(()=>{
+        if (parentMenuRef.current) {
+            var _window_getComputedStyle, _window;
+            let offset = (_window = window) === null || _window === void 0 ? void 0 : (_window_getComputedStyle = _window.getComputedStyle(parentMenuRef === null || parentMenuRef === void 0 ? void 0 : parentMenuRef.current)) === null || _window_getComputedStyle === void 0 ? void 0 : _window_getComputedStyle.getPropertyValue("--spectrum-submenu-offset-distance");
+            if (offset !== "") setOffset(-1 * parseInt(offset, 10));
+        }
+    }, [
+        parentMenuRef
+    ]);
+    if (isMobile) {
+        delete submenuTriggerProps.onBlur;
+        delete submenuTriggerProps.onHoverChange;
+        if (trayContainerRef.current && submenuTriggerState.isOpen) {
+            let subDialogKeyDown = (e)=>{
+                switch(e.key){
+                    case "Escape":
+                        e.stopPropagation();
+                        onBackButtonPress();
+                        break;
+                }
+            };
+            tray = /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $49b26f4b606348f6$export$3dfe97b5c32d8d8c), {
+                isSubmenu: true,
+                parentMenuTreeState: state,
+                rootMenuTriggerState: rootMenuTriggerState,
+                wrapperKeyDown: subDialogKeyDown,
+                onBackButtonPress: onBackButtonPress
+            }, content);
+            overlay = /*#__PURE__*/ (0, $9SHwR$reactdom).createPortal(tray, trayContainerRef.current);
+        }
+    } else {
+        let onDismissButtonPress = ()=>{
+            var _parentMenuRef_current;
+            submenuTriggerState.close();
+            (_parentMenuRef_current = parentMenuRef.current) === null || _parentMenuRef_current === void 0 ? void 0 : _parentMenuRef_current.focus();
+        };
+        overlay = /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$Popover), {
+            ...popoverProps,
+            UNSAFE_style: {
+                clipPath: "unset",
+                overflow: "visible",
+                filter: "unset",
+                borderWidth: "0px"
+            },
+            UNSAFE_className: (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports))), "spectrum-Submenu-popover"),
+            onDismissButtonPress: onDismissButtonPress,
+            onBlurWithin: onBlurWithin,
+            container: popoverContainerRef.current,
+            state: submenuTriggerState,
+            ref: popoverRef,
+            triggerRef: triggerRef,
+            placement: "end top",
+            containerPadding: 0,
+            crossOffset: offset,
+            offset: offset,
+            hideArrow: true,
+            enableBothDismissButtons: true
+        }, /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$FocusScope), {
+            restoreFocus: true
+        }, content));
+    }
+    return /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$react).Fragment, null, /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $d94604d52c3e3feb$export$8d97fe02339fc0e3).Provider, {
         value: {
             isUnavailable: isUnavailable,
-            triggerRef: triggerRef
+            triggerRef: triggerRef,
+            ...submenuTriggerProps
         }
     }, trigger), /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$SlotProvider), {
         slots: slots
-    }, isMobile ? /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$Modal), {
-        state: state,
-        isDismissable: true
-    }, /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$DismissButton), {
-        onDismiss: state.close
-    }), content, /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$DismissButton), {
-        onDismiss: state.close
-    })) : /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$Popover), {
-        UNSAFE_style: {
-            clipPath: "unset",
-            overflow: "visible",
-            filter: "unset",
-            borderWidth: "0px"
-        },
-        onExit: onExit,
-        onBlurWithin: onBlurWithin,
-        container: container.current,
-        state: state,
-        ref: popoverRef,
-        triggerRef: triggerRef,
-        placement: "end top",
-        offset: -10,
-        hideArrow: true,
-        isNonModal: true,
-        enableBothDismissButtons: true,
-        disableFocusManagement: true
-    }, content)));
+    }, submenuTriggerState.isOpen && overlay));
 }
 $726fb1b478e356bf$var$ContextualHelpTrigger.getCollectionNode = function* getCollectionNode(props) {
-    let [trigger] = (0, $9SHwR$react).Children.toArray(props.children);
+    let childArray = [];
+    (0, $9SHwR$react).Children.forEach(props.children, (child)=>{
+        if (/*#__PURE__*/ (0, $9SHwR$react).isValidElement(child)) childArray.push(child);
+    });
+    let [trigger] = childArray;
     let [, content] = props.children;
     yield {
         element: /*#__PURE__*/ (0, $9SHwR$react).cloneElement(trigger, {
             ...trigger.props,
-            hasChildItems: true
+            hasChildItems: true,
+            isTrigger: true
         }),
         wrapper: (element)=>/*#__PURE__*/ (0, $9SHwR$react).createElement($726fb1b478e356bf$var$ContextualHelpTrigger, {
                 key: element.key,
@@ -1011,5 +1344,5 @@ let $726fb1b478e356bf$export$5413b169fff83e61 = $726fb1b478e356bf$var$Contextual
 
 
 
-export {$aa0b855f135b86e3$export$27d2ad3c5815583e as MenuTrigger, $49b26f4b606348f6$export$d9b273488cd8ce6f as Menu, $43fa9949e6af393d$export$ed57a210b9d13bb6 as ActionMenu, $726fb1b478e356bf$export$5413b169fff83e61 as ContextualHelpTrigger, $5ae296f2d6923e14$re_export$Item as Item, $5ae296f2d6923e14$re_export$Section as Section};
+export {$aa0b855f135b86e3$export$27d2ad3c5815583e as MenuTrigger, $3f13e15cf95c3893$export$ecabc99eeffab7ca as SubmenuTrigger, $49b26f4b606348f6$export$d9b273488cd8ce6f as Menu, $43fa9949e6af393d$export$ed57a210b9d13bb6 as ActionMenu, $726fb1b478e356bf$export$5413b169fff83e61 as ContextualHelpTrigger, $5ae296f2d6923e14$re_export$Item as Item, $5ae296f2d6923e14$re_export$Section as Section};
 //# sourceMappingURL=module.js.map