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

package/dist/main.js

@@ -1,3 +1,5 @@
+"use client";
+
 require("./main.css");
 var $3ThwF$reactstatelycollections = require("@react-stately/collections");
 var $3ThwF$reactspectrumutils = require("@react-spectrum/utils");
@@ -6,19 +8,21 @@ var $3ThwF$reactariainteractions = require("@react-aria/interactions");
 var $3ThwF$react = require("react");
 var $3ThwF$reactariamenu = require("@react-aria/menu");
 var $3ThwF$reactstatelymenu = require("@react-stately/menu");
-var $3ThwF$reactariafocus = require("@react-aria/focus");
 var $3ThwF$reactariautils = require("@react-aria/utils");
+var $3ThwF$reactdom = require("react-dom");
+var $3ThwF$reactariai18n = require("@react-aria/i18n");
+var $3ThwF$reactspectrumbutton = require("@react-spectrum/button");
+var $3ThwF$spectrumiconsuiArrowDownSmall = require("@spectrum-icons/ui/ArrowDownSmall");
+var $3ThwF$reactariafocus = require("@react-aria/focus");
 var $3ThwF$reactstatelytree = require("@react-stately/tree");
 var $3ThwF$spectrumiconsuiCheckmarkMedium = require("@spectrum-icons/ui/CheckmarkMedium");
+var $3ThwF$spectrumiconsworkflowChevronLeft = require("@spectrum-icons/workflow/ChevronLeft");
+var $3ThwF$spectrumiconsworkflowChevronRight = require("@spectrum-icons/workflow/ChevronRight");
 var $3ThwF$reactspectrumlayout = require("@react-spectrum/layout");
 var $3ThwF$spectrumiconsworkflowInfoOutline = require("@spectrum-icons/workflow/InfoOutline");
 var $3ThwF$reactspectrumtext = require("@react-spectrum/text");
-var $3ThwF$reactariai18n = require("@react-aria/i18n");
 var $3ThwF$reactariaseparator = require("@react-aria/separator");
-var $3ThwF$reactspectrumbutton = require("@react-spectrum/button");
 var $3ThwF$spectrumiconsworkflowMore = require("@spectrum-icons/workflow/More");
-var $3ThwF$reactariaoverlays = require("@react-aria/overlays");
-var $3ThwF$reactstatelyoverlays = require("@react-stately/overlays");
 
 
 function $parcel$export(e, n, v, s) {
@@ -30,6 +34,7 @@ function $parcel$interopDefault(a) {
 }
 
 $parcel$export(module.exports, "MenuTrigger", () => $e56311f7204399c7$export$27d2ad3c5815583e);
+$parcel$export(module.exports, "SubmenuTrigger", () => $86ed235c4695ff3f$export$ecabc99eeffab7ca);
 $parcel$export(module.exports, "Menu", () => $63a7dff9cbe2d046$export$d9b273488cd8ce6f);
 $parcel$export(module.exports, "ActionMenu", () => $53a2f2636c97a561$export$ed57a210b9d13bb6);
 $parcel$export(module.exports, "ContextualHelpTrigger", () => $db380858d398b658$export$5413b169fff83e61);
@@ -72,11 +77,11 @@ const $cac834c4bc0a51d3$export$c7e742effb1c51e2 = (0, ($parcel$interopDefault($3
 function $cac834c4bc0a51d3$export$21c7ab35b39f78ec() {
     return (0, $3ThwF$react.useContext)($cac834c4bc0a51d3$export$c7e742effb1c51e2);
 }
-const $cac834c4bc0a51d3$export$e239f1ef5b7afe1a = (0, ($parcel$interopDefault($3ThwF$react))).createContext(undefined);
-function $cac834c4bc0a51d3$export$4bbcd0ebecc48abd() {
-    return (0, $3ThwF$react.useContext)($cac834c4bc0a51d3$export$e239f1ef5b7afe1a);
+const $cac834c4bc0a51d3$export$8d97fe02339fc0e3 = (0, ($parcel$interopDefault($3ThwF$react))).createContext(undefined);
+function $cac834c4bc0a51d3$export$dc2161044aa0b36d() {
+    return (0, $3ThwF$react.useContext)($cac834c4bc0a51d3$export$8d97fe02339fc0e3);
 }
-const $cac834c4bc0a51d3$export$24aad8519b95b41b = (0, ($parcel$interopDefault($3ThwF$react))).createContext({});
+const $cac834c4bc0a51d3$export$24aad8519b95b41b = (0, ($parcel$interopDefault($3ThwF$react))).createContext(undefined);
 function $cac834c4bc0a51d3$export$efa3856fc0e85e7f() {
     return (0, $3ThwF$react.useContext)($cac834c4bc0a51d3$export$24aad8519b95b41b);
 }
@@ -88,6 +93,7 @@ function $cac834c4bc0a51d3$export$efa3856fc0e85e7f() {
 var $3deee0fd2b46e64f$exports = {};
 
 $parcel$export($3deee0fd2b46e64f$exports, "checkmark", () => $3deee0fd2b46e64f$export$292abbf31ed842a, (v) => $3deee0fd2b46e64f$export$292abbf31ed842a = v);
+$parcel$export($3deee0fd2b46e64f$exports, "chevron", () => $3deee0fd2b46e64f$export$980c1089c0604ea3, (v) => $3deee0fd2b46e64f$export$980c1089c0604ea3 = v);
 $parcel$export($3deee0fd2b46e64f$exports, "description", () => $3deee0fd2b46e64f$export$6d59db4903f20f7d, (v) => $3deee0fd2b46e64f$export$6d59db4903f20f7d = v);
 $parcel$export($3deee0fd2b46e64f$exports, "end", () => $3deee0fd2b46e64f$export$bd5df0f255a350f8, (v) => $3deee0fd2b46e64f$export$bd5df0f255a350f8 = v);
 $parcel$export($3deee0fd2b46e64f$exports, "focus-ring", () => $3deee0fd2b46e64f$export$f39a09f249340e2a, (v) => $3deee0fd2b46e64f$export$f39a09f249340e2a = v);
@@ -95,6 +101,7 @@ $parcel$export($3deee0fd2b46e64f$exports, "i18nFontFamily", () => $3deee0fd2b46e
 $parcel$export($3deee0fd2b46e64f$exports, "icon", () => $3deee0fd2b46e64f$export$1ca1ec8b29a4ce27, (v) => $3deee0fd2b46e64f$export$1ca1ec8b29a4ce27 = v);
 $parcel$export($3deee0fd2b46e64f$exports, "is-active", () => $3deee0fd2b46e64f$export$20fd0f7cd4e6112f, (v) => $3deee0fd2b46e64f$export$20fd0f7cd4e6112f = v);
 $parcel$export($3deee0fd2b46e64f$exports, "is-disabled", () => $3deee0fd2b46e64f$export$d35bc1e505d1ebbf, (v) => $3deee0fd2b46e64f$export$d35bc1e505d1ebbf = v);
+$parcel$export($3deee0fd2b46e64f$exports, "is-expanded", () => $3deee0fd2b46e64f$export$911ebb89bba4b634, (v) => $3deee0fd2b46e64f$export$911ebb89bba4b634 = v);
 $parcel$export($3deee0fd2b46e64f$exports, "is-focused", () => $3deee0fd2b46e64f$export$e7dc768d35940237, (v) => $3deee0fd2b46e64f$export$e7dc768d35940237 = v);
 $parcel$export($3deee0fd2b46e64f$exports, "is-highlighted", () => $3deee0fd2b46e64f$export$451c613d0772eb99, (v) => $3deee0fd2b46e64f$export$451c613d0772eb99 = v);
 $parcel$export($3deee0fd2b46e64f$exports, "is-hovered", () => $3deee0fd2b46e64f$export$b8813cd5d7824ce7, (v) => $3deee0fd2b46e64f$export$b8813cd5d7824ce7 = v);
@@ -107,7 +114,9 @@ $parcel$export($3deee0fd2b46e64f$exports, "spectrum-FocusRing", () => $3deee0fd2
 $parcel$export($3deee0fd2b46e64f$exports, "spectrum-FocusRing--quiet", () => $3deee0fd2b46e64f$export$2927016961429360, (v) => $3deee0fd2b46e64f$export$2927016961429360 = v);
 $parcel$export($3deee0fd2b46e64f$exports, "spectrum-Icon", () => $3deee0fd2b46e64f$export$d374b04f30360026, (v) => $3deee0fd2b46e64f$export$d374b04f30360026 = v);
 $parcel$export($3deee0fd2b46e64f$exports, "spectrum-Menu", () => $3deee0fd2b46e64f$export$fae6af6decd50ac5, (v) => $3deee0fd2b46e64f$export$fae6af6decd50ac5 = v);
+$parcel$export($3deee0fd2b46e64f$exports, "spectrum-Menu-avatar", () => $3deee0fd2b46e64f$export$944daf9b7d423a02, (v) => $3deee0fd2b46e64f$export$944daf9b7d423a02 = v);
 $parcel$export($3deee0fd2b46e64f$exports, "spectrum-Menu-checkmark", () => $3deee0fd2b46e64f$export$8e15a726e4f7e62d, (v) => $3deee0fd2b46e64f$export$8e15a726e4f7e62d = v);
+$parcel$export($3deee0fd2b46e64f$exports, "spectrum-Menu-chevron", () => $3deee0fd2b46e64f$export$ca45e0db366b8e6c, (v) => $3deee0fd2b46e64f$export$ca45e0db366b8e6c = v);
 $parcel$export($3deee0fd2b46e64f$exports, "spectrum-Menu-description", () => $3deee0fd2b46e64f$export$36f1275051e39ead, (v) => $3deee0fd2b46e64f$export$36f1275051e39ead = v);
 $parcel$export($3deee0fd2b46e64f$exports, "spectrum-Menu-divider", () => $3deee0fd2b46e64f$export$e892026f534efed8, (v) => $3deee0fd2b46e64f$export$e892026f534efed8 = v);
 $parcel$export($3deee0fd2b46e64f$exports, "spectrum-Menu-end", () => $3deee0fd2b46e64f$export$926a1bb74ed65667, (v) => $3deee0fd2b46e64f$export$926a1bb74ed65667 = v);
@@ -125,8 +134,14 @@ $parcel$export($3deee0fd2b46e64f$exports, "spectrum-Menu-section--noHeading", ()
 $parcel$export($3deee0fd2b46e64f$exports, "spectrum-Menu-sectionHeading", () => $3deee0fd2b46e64f$export$c20ea4b35020fbdd, (v) => $3deee0fd2b46e64f$export$c20ea4b35020fbdd = v);
 $parcel$export($3deee0fd2b46e64f$exports, "spectrum-Menu-subdialog", () => $3deee0fd2b46e64f$export$d7e47bfca92b5744, (v) => $3deee0fd2b46e64f$export$d7e47bfca92b5744 = v);
 $parcel$export($3deee0fd2b46e64f$exports, "spectrum-Menu-wrapper", () => $3deee0fd2b46e64f$export$76d36e55740ad742, (v) => $3deee0fd2b46e64f$export$76d36e55740ad742 = v);
+$parcel$export($3deee0fd2b46e64f$exports, "spectrum-Menu-wrapper--isMobile", () => $3deee0fd2b46e64f$export$c873119be41fdb72, (v) => $3deee0fd2b46e64f$export$c873119be41fdb72 = v);
+$parcel$export($3deee0fd2b46e64f$exports, "spectrum-Submenu-heading", () => $3deee0fd2b46e64f$export$c830d2588e34dae1, (v) => $3deee0fd2b46e64f$export$c830d2588e34dae1 = v);
+$parcel$export($3deee0fd2b46e64f$exports, "spectrum-Submenu-headingWrapper", () => $3deee0fd2b46e64f$export$d3fc690f61339a08, (v) => $3deee0fd2b46e64f$export$d3fc690f61339a08 = v);
+$parcel$export($3deee0fd2b46e64f$exports, "spectrum-Submenu-popover", () => $3deee0fd2b46e64f$export$fe967dac6207a986, (v) => $3deee0fd2b46e64f$export$fe967dac6207a986 = v);
+$parcel$export($3deee0fd2b46e64f$exports, "spectrum-Submenu-wrapper", () => $3deee0fd2b46e64f$export$158cbd6607d36c4e, (v) => $3deee0fd2b46e64f$export$158cbd6607d36c4e = v);
 $parcel$export($3deee0fd2b46e64f$exports, "text", () => $3deee0fd2b46e64f$export$6f093cfa640b7166, (v) => $3deee0fd2b46e64f$export$6f093cfa640b7166 = v);
 var $3deee0fd2b46e64f$export$292abbf31ed842a;
+var $3deee0fd2b46e64f$export$980c1089c0604ea3;
 var $3deee0fd2b46e64f$export$6d59db4903f20f7d;
 var $3deee0fd2b46e64f$export$bd5df0f255a350f8;
 var $3deee0fd2b46e64f$export$f39a09f249340e2a;
@@ -134,6 +149,7 @@ var $3deee0fd2b46e64f$export$8c4ee2c50c22c514;
 var $3deee0fd2b46e64f$export$1ca1ec8b29a4ce27;
 var $3deee0fd2b46e64f$export$20fd0f7cd4e6112f;
 var $3deee0fd2b46e64f$export$d35bc1e505d1ebbf;
+var $3deee0fd2b46e64f$export$911ebb89bba4b634;
 var $3deee0fd2b46e64f$export$e7dc768d35940237;
 var $3deee0fd2b46e64f$export$451c613d0772eb99;
 var $3deee0fd2b46e64f$export$b8813cd5d7824ce7;
@@ -146,7 +162,9 @@ var $3deee0fd2b46e64f$export$24c7f46a6e3605dd;
 var $3deee0fd2b46e64f$export$2927016961429360;
 var $3deee0fd2b46e64f$export$d374b04f30360026;
 var $3deee0fd2b46e64f$export$fae6af6decd50ac5;
+var $3deee0fd2b46e64f$export$944daf9b7d423a02;
 var $3deee0fd2b46e64f$export$8e15a726e4f7e62d;
+var $3deee0fd2b46e64f$export$ca45e0db366b8e6c;
 var $3deee0fd2b46e64f$export$36f1275051e39ead;
 var $3deee0fd2b46e64f$export$e892026f534efed8;
 var $3deee0fd2b46e64f$export$926a1bb74ed65667;
@@ -164,8 +182,14 @@ var $3deee0fd2b46e64f$export$8b61ec49b96ad17e;
 var $3deee0fd2b46e64f$export$c20ea4b35020fbdd;
 var $3deee0fd2b46e64f$export$d7e47bfca92b5744;
 var $3deee0fd2b46e64f$export$76d36e55740ad742;
+var $3deee0fd2b46e64f$export$c873119be41fdb72;
+var $3deee0fd2b46e64f$export$c830d2588e34dae1;
+var $3deee0fd2b46e64f$export$d3fc690f61339a08;
+var $3deee0fd2b46e64f$export$fe967dac6207a986;
+var $3deee0fd2b46e64f$export$158cbd6607d36c4e;
 var $3deee0fd2b46e64f$export$6f093cfa640b7166;
 $3deee0fd2b46e64f$export$292abbf31ed842a = `Q7FggG_checkmark`;
+$3deee0fd2b46e64f$export$980c1089c0604ea3 = `Q7FggG_chevron`;
 $3deee0fd2b46e64f$export$6d59db4903f20f7d = `Q7FggG_description`;
 $3deee0fd2b46e64f$export$bd5df0f255a350f8 = `Q7FggG_end`;
 $3deee0fd2b46e64f$export$f39a09f249340e2a = `Q7FggG_focus-ring`;
@@ -173,6 +197,7 @@ $3deee0fd2b46e64f$export$8c4ee2c50c22c514 = `Q7FggG_i18nFontFamily`;
 $3deee0fd2b46e64f$export$1ca1ec8b29a4ce27 = `Q7FggG_icon`;
 $3deee0fd2b46e64f$export$20fd0f7cd4e6112f = `Q7FggG_is-active`;
 $3deee0fd2b46e64f$export$d35bc1e505d1ebbf = `Q7FggG_is-disabled`;
+$3deee0fd2b46e64f$export$911ebb89bba4b634 = `Q7FggG_is-expanded`;
 $3deee0fd2b46e64f$export$e7dc768d35940237 = `Q7FggG_is-focused`;
 $3deee0fd2b46e64f$export$451c613d0772eb99 = `Q7FggG_is-highlighted`;
 $3deee0fd2b46e64f$export$b8813cd5d7824ce7 = `Q7FggG_is-hovered`;
@@ -185,7 +210,9 @@ $3deee0fd2b46e64f$export$24c7f46a6e3605dd = `Q7FggG_spectrum-FocusRing ${$3deee0
 $3deee0fd2b46e64f$export$2927016961429360 = `Q7FggG_spectrum-FocusRing--quiet`;
 $3deee0fd2b46e64f$export$d374b04f30360026 = `Q7FggG_spectrum-Icon`;
 $3deee0fd2b46e64f$export$fae6af6decd50ac5 = `Q7FggG_spectrum-Menu`;
+$3deee0fd2b46e64f$export$944daf9b7d423a02 = `Q7FggG_spectrum-Menu-avatar`;
 $3deee0fd2b46e64f$export$8e15a726e4f7e62d = `Q7FggG_spectrum-Menu-checkmark`;
+$3deee0fd2b46e64f$export$ca45e0db366b8e6c = `Q7FggG_spectrum-Menu-chevron`;
 $3deee0fd2b46e64f$export$36f1275051e39ead = `Q7FggG_spectrum-Menu-description`;
 $3deee0fd2b46e64f$export$e892026f534efed8 = `Q7FggG_spectrum-Menu-divider`;
 $3deee0fd2b46e64f$export$926a1bb74ed65667 = `Q7FggG_spectrum-Menu-end`;
@@ -203,6 +230,11 @@ $3deee0fd2b46e64f$export$8b61ec49b96ad17e = `Q7FggG_spectrum-Menu-section--noHea
 $3deee0fd2b46e64f$export$c20ea4b35020fbdd = `Q7FggG_spectrum-Menu-sectionHeading`;
 $3deee0fd2b46e64f$export$d7e47bfca92b5744 = `Q7FggG_spectrum-Menu-subdialog`;
 $3deee0fd2b46e64f$export$76d36e55740ad742 = `Q7FggG_spectrum-Menu-wrapper`;
+$3deee0fd2b46e64f$export$c873119be41fdb72 = `Q7FggG_spectrum-Menu-wrapper--isMobile`;
+$3deee0fd2b46e64f$export$c830d2588e34dae1 = `Q7FggG_spectrum-Submenu-heading`;
+$3deee0fd2b46e64f$export$d3fc690f61339a08 = `Q7FggG_spectrum-Submenu-headingWrapper`;
+$3deee0fd2b46e64f$export$fe967dac6207a986 = `Q7FggG_spectrum-Submenu-popover`;
+$3deee0fd2b46e64f$export$158cbd6607d36c4e = `Q7FggG_spectrum-Submenu-wrapper`;
 $3deee0fd2b46e64f$export$6f093cfa640b7166 = `Q7FggG_text`;
 
 
@@ -235,7 +267,6 @@ function $e56311f7204399c7$var$MenuTrigger(props, ref) {
     let isMobile = (0, $3ThwF$reactspectrumutils.useIsMobileDevice)();
     let menuContext = {
         ...menuProps,
-        state: state,
         ref: menuRef,
         onClose: state.close,
         closeOnSelect: closeOnSelect,
@@ -246,12 +277,14 @@ function $e56311f7204399c7$var$MenuTrigger(props, ref) {
         } : undefined,
         UNSAFE_className: (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$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, ($parcel$interopDefault($3ThwF$react))).createElement((0, $3ThwF$reactspectrumoverlays.Tray), {
-        state: state
+        state: state,
+        isFixedHeight: true
     }, menu);
     else overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, $3ThwF$reactspectrumoverlays.Popover), {
         UNSAFE_style: {
@@ -300,6 +333,136 @@ function $e56311f7204399c7$var$MenuTrigger(props, ref) {
  */ 
 
 
+
+
+
+
+
+
+
+function $86ed235c4695ff3f$var$SubmenuTrigger(props) {
+    let triggerRef = (0, $3ThwF$react.useRef)();
+    let { children: children, targetKey: targetKey } = props;
+    let [menuTrigger, menu] = (0, ($parcel$interopDefault($3ThwF$react))).Children.toArray(children);
+    let { popoverContainerRef: popoverContainerRef, trayContainerRef: trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState: rootMenuTriggerState, state: state } = (0, $cac834c4bc0a51d3$export$efa3856fc0e85e7f)();
+    let triggerNode = state.collection.getItem(targetKey);
+    let submenuTriggerState = (0, $3ThwF$reactstatelymenu.UNSTABLE_useSubmenuTriggerState)({
+        triggerKey: targetKey
+    }, rootMenuTriggerState);
+    let { submenuTriggerProps: submenuTriggerProps, submenuProps: submenuProps, popoverProps: popoverProps } = (0, $3ThwF$reactariamenu.UNSTABLE_useSubmenuTrigger)({
+        node: triggerNode,
+        parentMenuRef: parentMenuRef,
+        submenuRef: menuRef
+    }, submenuTriggerState, triggerRef);
+    let isMobile = (0, $3ThwF$reactspectrumutils.useIsMobileDevice)();
+    let onBackButtonPress = ()=>{
+        submenuTriggerState.close();
+        if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) parentMenuRef.current.focus();
+    };
+    let { direction: direction } = (0, $3ThwF$reactariai18n.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, $3ThwF$react.useState)(0);
+    (0, $3ThwF$reactariautils.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, ($parcel$interopDefault($3ThwF$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, ($parcel$interopDefault($3ThwF$react))).createElement((0, $3ThwF$reactspectrumoverlays.Popover), {
+            ...popoverProps,
+            onDismissButtonPress: onDismissButtonPress,
+            UNSAFE_className: (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$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, $3ThwF$reactariautils.mergeProps)(submenuProps, {
+            ref: menuRef,
+            UNSAFE_style: isMobile ? {
+                width: "100%",
+                maxHeight: "inherit"
+            } : undefined,
+            UNSAFE_className: (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$exports))), {
+                "spectrum-Menu-popover": !isMobile
+            }),
+            ...isMobile && {
+                onBackButtonPress: onBackButtonPress,
+                onKeyDown: mobileSubmenuKeyDown
+            }
+        })
+    };
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, ($parcel$interopDefault($3ThwF$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, $cac834c4bc0a51d3$export$8d97fe02339fc0e3).Provider, {
+        value: {
+            triggerRef: triggerRef,
+            ...submenuTriggerProps
+        }
+    }, menuTrigger), /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, $cac834c4bc0a51d3$export$c7e742effb1c51e2).Provider, {
+        value: menuContext
+    }, overlay));
+}
+$86ed235c4695ff3f$var$SubmenuTrigger.getCollectionNode = function*(props) {
+    let childArray = [];
+    (0, ($parcel$interopDefault($3ThwF$react))).Children.forEach(props.children, (child)=>{
+        if (/*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).isValidElement(child)) childArray.push(child);
+    });
+    let [trigger] = childArray;
+    let [, content] = props.children;
+    yield {
+        element: /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).cloneElement(trigger, {
+            ...trigger.props,
+            hasChildItems: true,
+            isTrigger: true
+        }),
+        wrapper: (element)=>/*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement($86ed235c4695ff3f$var$SubmenuTrigger, {
+                key: element.key,
+                targetKey: element.key,
+                ...props
+            }, element, content)
+    };
+};
+let $86ed235c4695ff3f$export$ecabc99eeffab7ca = $86ed235c4695ff3f$var$SubmenuTrigger;
+
+
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -314,7 +477,6 @@ function $e56311f7204399c7$var$MenuTrigger(props, ref) {
 
 
 
-
 var $2f9ceea24fba5443$exports = {};
 var $517603d8c7b8e5e5$exports = {};
 $517603d8c7b8e5e5$exports = {
@@ -627,6 +789,25 @@ $2f9ceea24fba5443$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.
+ */ 
+
+
+
+
+
+
+
+
 
 
 
@@ -635,17 +816,19 @@ $2f9ceea24fba5443$exports = {
 
 function $1d718563708db5b5$export$2ce376c2cc3355c8(props) {
     let { item: item, state: state, isVirtualized: isVirtualized, onAction: onAction } = props;
-    let stringFormatter = (0, $3ThwF$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($2f9ceea24fba5443$exports))));
-    let menuDialogContext = (0, $cac834c4bc0a51d3$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, $cac834c4bc0a51d3$export$21c7ab35b39f78ec)();
     let { rendered: rendered, key: key } = item;
-    let isSelected = state.selectionManager.isSelected(key);
+    let stringFormatter = (0, $3ThwF$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($2f9ceea24fba5443$exports))));
+    let { direction: direction } = (0, $3ThwF$reactariai18n.useLocale)();
+    let submenuTriggerContext = (0, $cac834c4bc0a51d3$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, $3ThwF$react.useRef)(null);
     let ref = (0, $3ThwF$reactariautils.useObjectRef)((0, $3ThwF$react.useMemo)(()=>(0, $3ThwF$reactariautils.mergeRefs)(itemref, triggerRef), [
         itemref,
@@ -659,7 +842,7 @@ function $1d718563708db5b5$export$2ce376c2cc3355c8(props) {
         closeOnSelect: closeOnSelect,
         isVirtualized: isVirtualized,
         onAction: onAction,
-        "aria-haspopup": isMenuDialogTrigger && isUnavailable ? "dialog" : undefined
+        ...submenuTriggerProps
     }, state, ref);
     let endId = (0, $3ThwF$reactariautils.useSlotId)();
     let endProps = {};
@@ -679,8 +862,8 @@ function $1d718563708db5b5$export$2ce376c2cc3355c8(props) {
         className: (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$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, ($parcel$interopDefault($3ThwF$react))).createElement((0, $3ThwF$reactspectrumlayout.Grid), {
         UNSAFE_className: (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$exports))), "spectrum-Menu-itemGrid")
@@ -705,6 +888,10 @@ function $1d718563708db5b5$export$2ce376c2cc3355c8(props) {
             keyboard: {
                 UNSAFE_className: (0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$exports)))["spectrum-Menu-keyboard"],
                 ...keyboardShortcutProps
+            },
+            chevron: {
+                UNSAFE_className: (0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$exports)))["spectrum-Menu-chevron"],
+                size: "S"
             }
         }
     }, contents, isSelected && /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, ($parcel$interopDefault($3ThwF$spectrumiconsuiCheckmarkMedium))), {
@@ -715,7 +902,11 @@ function $1d718563708db5b5$export$2ce376c2cc3355c8(props) {
         size: "XS",
         alignSelf: "center",
         "aria-label": stringFormatter.format("unavailable")
-    }))))));
+    }), isUnavailable == null && isSubmenuTrigger && (direction === "rtl" ? /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, ($parcel$interopDefault($3ThwF$spectrumiconsworkflowChevronLeft))), {
+        slot: "chevron"
+    }) : /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, ($parcel$interopDefault($3ThwF$spectrumiconsworkflowChevronRight))), {
+        slot: "chevron"
+    })))))));
 }
 
 
@@ -785,31 +976,64 @@ function $5793ff412227d2fc$export$4b1545b4f2016d26(props) {
 
 
 
+
 function $63a7dff9cbe2d046$var$Menu(props, ref) {
+    let isSubmenu = true;
     let contextProps = (0, $3ThwF$react.useContext)((0, $cac834c4bc0a51d3$export$c7e742effb1c51e2));
+    let parentMenuContext = (0, $cac834c4bc0a51d3$export$efa3856fc0e85e7f)();
+    let { rootMenuTriggerState: rootMenuTriggerState, state: parentMenuTreeState } = parentMenuContext || {
+        rootMenuTriggerState: contextProps.state
+    };
+    if (!parentMenuContext) isSubmenu = false;
     let completeProps = {
         ...(0, $3ThwF$reactariautils.mergeProps)(contextProps, props)
     };
     let domRef = (0, $3ThwF$reactspectrumutils.useDOMRef)(ref);
-    let scopedRef = (0, $3ThwF$react.useRef)(null);
+    let popoverContainerRef = (0, $3ThwF$react.useRef)(null);
+    let trayContainerRef = (0, $3ThwF$react.useRef)(null);
     let state = (0, $3ThwF$reactstatelytree.useTreeState)(completeProps);
+    let submenuRef = (0, $3ThwF$react.useRef)(null);
     let { menuProps: menuProps } = (0, $3ThwF$reactariamenu.useMenu)(completeProps, state, domRef);
     let { styleProps: styleProps } = (0, $3ThwF$reactspectrumutils.useStyleProps)(completeProps);
     (0, $3ThwF$reactariautils.useSyncRef)(contextProps, domRef);
-    let isMobile = (0, $3ThwF$reactspectrumutils.useIsMobileDevice)();
+    let [leftOffset, setLeftOffset] = (0, $3ThwF$react.useState)({
+        left: 0
+    });
+    (0, $3ThwF$react.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, ($parcel$interopDefault($3ThwF$react))).createElement((0, $cac834c4bc0a51d3$export$24aad8519b95b41b).Provider, {
         value: {
-            state: state,
-            container: scopedRef,
-            menu: domRef
+            popoverContainerRef: popoverContainerRef,
+            trayContainerRef: trayContainerRef,
+            menu: domRef,
+            submenu: submenuRef,
+            rootMenuTriggerState: rootMenuTriggerState,
+            state: state
         }
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, $3ThwF$reactariafocus.FocusScope), {
-        contain: state.expandedKeys.size > 0
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement("div", {
-        className: (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$exports))), !isMobile ? "spectrum-Menu-wrapper" : "")
+        style: {
+            height: hasOpenSubmenu ? "100%" : undefined
+        },
+        ref: trayContainerRef
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, $3ThwF$reactariafocus.FocusScope), null, /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement($63a7dff9cbe2d046$export$3dfe97b5c32d8d8c, {
+        onBackButtonPress: contextProps.onBackButtonPress,
+        hasOpenSubmenu: hasOpenSubmenu,
+        isSubmenu: isSubmenu,
+        parentMenuTreeState: parentMenuTreeState,
+        rootMenuTriggerState: rootMenuTriggerState
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement("div", {
         ...menuProps,
-        ...styleProps,
+        style: (0, $3ThwF$reactariautils.mergeProps)(styleProps.style, menuProps.style),
         ref: domRef,
         className: (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$exports))), "spectrum-Menu", styleProps.className)
     }, [
@@ -829,10 +1053,59 @@ function $63a7dff9cbe2d046$var$Menu(props, ref) {
         });
         if (item.wrapper) menuItem = item.wrapper(menuItem);
         return menuItem;
-    }))), /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement("div", {
-        ref: scopedRef
+    }))), (rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.isOpen) && /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement("div", {
+        ref: popoverContainerRef,
+        style: {
+            width: "100vw",
+            position: "absolute",
+            top: -5,
+            ...leftOffset
+        }
     })));
 }
+function $63a7dff9cbe2d046$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, $3ThwF$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($2f9ceea24fba5443$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, $3ThwF$reactariautils.useSlotId)();
+    let isMobile = (0, $3ThwF$reactspectrumutils.useIsMobileDevice)();
+    let { direction: direction } = (0, $3ThwF$reactariai18n.useLocale)();
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, ($parcel$interopDefault($3ThwF$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement("div", {
+        role: headingId ? "dialog" : undefined,
+        "aria-labelledby": headingId,
+        "aria-hidden": isMobile && hasOpenSubmenu,
+        "data-testid": "menu-wrapper",
+        className: (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$exports))), "spectrum-Menu-wrapper", {
+            "spectrum-Menu-wrapper--isMobile": isMobile,
+            "is-expanded": hasOpenSubmenu
+        })
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement("div", {
+        role: "presentation",
+        className: (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$exports))), "spectrum-Submenu-wrapper"),
+        onKeyDown: wrapperKeyDown
+    }, isMobile && isSubmenu && !hasOpenSubmenu && /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement("div", {
+        className: (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$exports))), "spectrum-Submenu-headingWrapper")
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, $3ThwF$reactspectrumbutton.ActionButton), {
+        "aria-label": backButtonLabel,
+        isQuiet: true,
+        onPress: onBackButtonPress
+    }, direction === "rtl" ? /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, ($parcel$interopDefault($3ThwF$spectrumiconsuiArrowDownSmall))), {
+        UNSAFE_style: {
+            rotate: "270deg"
+        }
+    }) : /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, ($parcel$interopDefault($3ThwF$spectrumiconsuiArrowDownSmall))), {
+        UNSAFE_style: {
+            rotate: "90deg"
+        }
+    })), /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement("h1", {
+        id: headingId,
+        className: (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$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
@@ -901,19 +1174,23 @@ function $53a2f2636c97a561$var$ActionMenu(props, ref) {
  * governing permissions and limitations under the License.
  */ 
 
+
 var $a10e565ec42bcf96$exports = {};
 
 $parcel$export($a10e565ec42bcf96$exports, "react-spectrum-ContextualHelp-button", () => $a10e565ec42bcf96$export$20d9583c9f1529c1, (v) => $a10e565ec42bcf96$export$20d9583c9f1529c1 = v);
 $parcel$export($a10e565ec42bcf96$exports, "react-spectrum-ContextualHelp-content", () => $a10e565ec42bcf96$export$a1f805890cf58c4, (v) => $a10e565ec42bcf96$export$a1f805890cf58c4 = v);
 $parcel$export($a10e565ec42bcf96$exports, "react-spectrum-ContextualHelp-dialog", () => $a10e565ec42bcf96$export$ab2d873674d20d28, (v) => $a10e565ec42bcf96$export$ab2d873674d20d28 = v);
+$parcel$export($a10e565ec42bcf96$exports, "react-spectrum-ContextualHelp-dialog--isMobile", () => $a10e565ec42bcf96$export$a438776606a9a3cc, (v) => $a10e565ec42bcf96$export$a438776606a9a3cc = v);
 $parcel$export($a10e565ec42bcf96$exports, "react-spectrum-ContextualHelp-footer", () => $a10e565ec42bcf96$export$d901bc3fa82b87a6, (v) => $a10e565ec42bcf96$export$d901bc3fa82b87a6 = v);
 var $a10e565ec42bcf96$export$20d9583c9f1529c1;
 var $a10e565ec42bcf96$export$a1f805890cf58c4;
 var $a10e565ec42bcf96$export$ab2d873674d20d28;
+var $a10e565ec42bcf96$export$a438776606a9a3cc;
 var $a10e565ec42bcf96$export$d901bc3fa82b87a6;
 $a10e565ec42bcf96$export$20d9583c9f1529c1 = `L6gUaa_react-spectrum-ContextualHelp-button`;
 $a10e565ec42bcf96$export$a1f805890cf58c4 = `L6gUaa_react-spectrum-ContextualHelp-content`;
 $a10e565ec42bcf96$export$ab2d873674d20d28 = `L6gUaa_react-spectrum-ContextualHelp-dialog`;
+$a10e565ec42bcf96$export$a438776606a9a3cc = `L6gUaa_react-spectrum-ContextualHelp-dialog--isMobile`;
 $a10e565ec42bcf96$export$d901bc3fa82b87a6 = `L6gUaa_react-spectrum-ContextualHelp-footer`;
 
 
@@ -922,24 +1199,39 @@ $a10e565ec42bcf96$export$d901bc3fa82b87a6 = `L6gUaa_react-spectrum-ContextualHel
 
 
 
+
+
+
+
 function $db380858d398b658$var$ContextualHelpTrigger(props) {
-    let { isUnavailable: isUnavailable } = props;
+    let { isUnavailable: isUnavailable = false, targetKey: targetKey } = props;
     let triggerRef = (0, $3ThwF$react.useRef)(null);
     let popoverRef = (0, $3ThwF$react.useRef)(null);
-    let { state: menuState, container: container, menu: menu } = (0, $cac834c4bc0a51d3$export$efa3856fc0e85e7f)();
-    let state = (0, $3ThwF$reactstatelyoverlays.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, $cac834c4bc0a51d3$export$efa3856fc0e85e7f)();
+    let triggerNode = state.collection.getItem(targetKey);
+    let submenuTriggerState = (0, $3ThwF$reactstatelymenu.UNSTABLE_useSubmenuTriggerState)({
+        triggerKey: targetKey
+    }, {
+        ...rootMenuTriggerState,
+        ...state
     });
+    let submenuRef = (0, $3ThwF$reactspectrumutils.unwrapDOMRef)(popoverRef);
+    let { submenuTriggerProps: submenuTriggerProps, popoverProps: popoverProps } = (0, $3ThwF$reactariamenu.UNSTABLE_useSubmenuTrigger)({
+        node: triggerNode,
+        parentMenuRef: parentMenuRef,
+        submenuRef: submenuRef,
+        type: "dialog",
+        isDisabled: !isUnavailable
+    }, submenuTriggerState, triggerRef);
     let isMobile = (0, $3ThwF$reactspectrumutils.useIsMobileDevice)();
     let slots = {};
     if (isUnavailable) slots = {
         dialog: {
-            UNSAFE_className: (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($a10e565ec42bcf96$exports))), "react-spectrum-ContextualHelp-dialog", (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$exports))), !isMobile ? "spectrum-Menu-subdialog" : ""))
+            UNSAFE_className: (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($a10e565ec42bcf96$exports))), "react-spectrum-ContextualHelp-dialog", {
+                "react-spectrum-ContextualHelp-dialog--isMobile": isMobile
+            }, (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$exports))), {
+                "spectrum-Menu-subdialog": !isMobile
+            }))
         },
         content: {
             UNSAFE_className: (0, (/*@__PURE__*/$parcel$interopDefault($a10e565ec42bcf96$exports)))["react-spectrum-ContextualHelp-content"]
@@ -950,60 +1242,102 @@ function $db380858d398b658$var$ContextualHelpTrigger(props) {
     };
     let [trigger] = (0, ($parcel$interopDefault($3ThwF$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, $3ThwF$reactariainteractions.getInteractionModality)() === "pointer")) {
+            if (submenuTriggerState.isOpen) submenuTriggerState.close();
         }
     };
-    return /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, ($parcel$interopDefault($3ThwF$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, $cac834c4bc0a51d3$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, $3ThwF$react.useState)(0);
+    (0, $3ThwF$reactariautils.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, ($parcel$interopDefault($3ThwF$react))).createElement((0, $63a7dff9cbe2d046$export$3dfe97b5c32d8d8c), {
+                isSubmenu: true,
+                parentMenuTreeState: state,
+                rootMenuTriggerState: rootMenuTriggerState,
+                wrapperKeyDown: subDialogKeyDown,
+                onBackButtonPress: onBackButtonPress
+            }, content);
+            overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$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, ($parcel$interopDefault($3ThwF$react))).createElement((0, $3ThwF$reactspectrumoverlays.Popover), {
+            ...popoverProps,
+            UNSAFE_style: {
+                clipPath: "unset",
+                overflow: "visible",
+                filter: "unset",
+                borderWidth: "0px"
+            },
+            UNSAFE_className: (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$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, ($parcel$interopDefault($3ThwF$react))).createElement((0, $3ThwF$reactariafocus.FocusScope), {
+            restoreFocus: true
+        }, content));
+    }
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, ($parcel$interopDefault($3ThwF$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, $cac834c4bc0a51d3$export$8d97fe02339fc0e3).Provider, {
         value: {
             isUnavailable: isUnavailable,
-            triggerRef: triggerRef
+            triggerRef: triggerRef,
+            ...submenuTriggerProps
         }
     }, trigger), /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, $3ThwF$reactspectrumutils.SlotProvider), {
         slots: slots
-    }, isMobile ? /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, $3ThwF$reactspectrumoverlays.Modal), {
-        state: state,
-        isDismissable: true
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, $3ThwF$reactariaoverlays.DismissButton), {
-        onDismiss: state.close
-    }), content, /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, $3ThwF$reactariaoverlays.DismissButton), {
-        onDismiss: state.close
-    })) : /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, $3ThwF$reactspectrumoverlays.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));
 }
 $db380858d398b658$var$ContextualHelpTrigger.getCollectionNode = function* getCollectionNode(props) {
-    let [trigger] = (0, ($parcel$interopDefault($3ThwF$react))).Children.toArray(props.children);
+    let childArray = [];
+    (0, ($parcel$interopDefault($3ThwF$react))).Children.forEach(props.children, (child)=>{
+        if (/*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).isValidElement(child)) childArray.push(child);
+    });
+    let [trigger] = childArray;
     let [, content] = props.children;
     yield {
         element: /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).cloneElement(trigger, {
             ...trigger.props,
-            hasChildItems: true
+            hasChildItems: true,
+            isTrigger: true
         }),
         wrapper: (element)=>/*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement($db380858d398b658$var$ContextualHelpTrigger, {
                 key: element.key,