@radix-ui/react-menu 0.1.7-rc.7 → 1.0.0-rc.1

package/dist/index.js

@@ -1,76 +1,65 @@
 var $cnSS2$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
 var $cnSS2$react = require("react");
-var $cnSS2$reactremovescroll = require("react-remove-scroll");
-var $cnSS2$ariahidden = require("aria-hidden");
 var $cnSS2$radixuiprimitive = require("@radix-ui/primitive");
 var $cnSS2$radixuireactcollection = require("@radix-ui/react-collection");
 var $cnSS2$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
 var $cnSS2$radixuireactcontext = require("@radix-ui/react-context");
+var $cnSS2$radixuireactdirection = require("@radix-ui/react-direction");
 var $cnSS2$radixuireactdismissablelayer = require("@radix-ui/react-dismissable-layer");
+var $cnSS2$radixuireactfocusguards = require("@radix-ui/react-focus-guards");
 var $cnSS2$radixuireactfocusscope = require("@radix-ui/react-focus-scope");
-var $cnSS2$radixuireactpresence = require("@radix-ui/react-presence");
-var $cnSS2$radixuireactprimitive = require("@radix-ui/react-primitive");
+var $cnSS2$radixuireactid = require("@radix-ui/react-id");
 var $cnSS2$radixuireactpopper = require("@radix-ui/react-popper");
 var $cnSS2$radixuireactportal = require("@radix-ui/react-portal");
+var $cnSS2$radixuireactpresence = require("@radix-ui/react-presence");
+var $cnSS2$radixuireactprimitive = require("@radix-ui/react-primitive");
 var $cnSS2$radixuireactrovingfocus = require("@radix-ui/react-roving-focus");
-var $cnSS2$radixuireactdirection = require("@radix-ui/react-direction");
+var $cnSS2$radixuireactslot = require("@radix-ui/react-slot");
 var $cnSS2$radixuireactusecallbackref = require("@radix-ui/react-use-callback-ref");
-var $cnSS2$radixuireactfocusguards = require("@radix-ui/react-focus-guards");
-var $cnSS2$radixuireactid = require("@radix-ui/react-id");
-
-function $parcel$exportWildcard(dest, source) {
-  Object.keys(source).forEach(function(key) {
-    if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
-      return;
-    }
-
-    Object.defineProperty(dest, key, {
-      enumerable: true,
-      get: function get() {
-        return source[key];
-      }
-    });
-  });
+var $cnSS2$ariahidden = require("aria-hidden");
+var $cnSS2$reactremovescroll = require("react-remove-scroll");
 
-  return dest;
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-var $213e4d2df823067d$exports = {};
 
-$parcel$export($213e4d2df823067d$exports, "createMenuScope", () => $213e4d2df823067d$export$4027731b685e72eb);
-$parcel$export($213e4d2df823067d$exports, "Menu", () => $213e4d2df823067d$export$d9b273488cd8ce6f);
-$parcel$export($213e4d2df823067d$exports, "MenuSub", () => $213e4d2df823067d$export$71bdb9d1e2909932);
-$parcel$export($213e4d2df823067d$exports, "MenuAnchor", () => $213e4d2df823067d$export$9fa5ebd18bee4d43);
-$parcel$export($213e4d2df823067d$exports, "MenuContent", () => $213e4d2df823067d$export$479f0f2f71193efe);
-$parcel$export($213e4d2df823067d$exports, "MenuGroup", () => $213e4d2df823067d$export$22a631d1f72787bb);
-$parcel$export($213e4d2df823067d$exports, "MenuLabel", () => $213e4d2df823067d$export$dd37bec0e8a99143);
-$parcel$export($213e4d2df823067d$exports, "MenuItem", () => $213e4d2df823067d$export$2ce376c2cc3355c8);
-$parcel$export($213e4d2df823067d$exports, "MenuSubTrigger", () => $213e4d2df823067d$export$5fbbb3ba7297405f);
-$parcel$export($213e4d2df823067d$exports, "MenuCheckboxItem", () => $213e4d2df823067d$export$f6f243521332502d);
-$parcel$export($213e4d2df823067d$exports, "MenuRadioGroup", () => $213e4d2df823067d$export$ea2200c9eee416b3);
-$parcel$export($213e4d2df823067d$exports, "MenuRadioItem", () => $213e4d2df823067d$export$69bd225e9817f6d0);
-$parcel$export($213e4d2df823067d$exports, "MenuItemIndicator", () => $213e4d2df823067d$export$a2593e23056970a3);
-$parcel$export($213e4d2df823067d$exports, "MenuSeparator", () => $213e4d2df823067d$export$1cec7dcdd713e220);
-$parcel$export($213e4d2df823067d$exports, "MenuArrow", () => $213e4d2df823067d$export$bcdda4773debf5fa);
-$parcel$export($213e4d2df823067d$exports, "Root", () => $213e4d2df823067d$export$be92b6f5f03c0fe9);
-$parcel$export($213e4d2df823067d$exports, "Sub", () => $213e4d2df823067d$export$d7a01e11500dfb6f);
-$parcel$export($213e4d2df823067d$exports, "Anchor", () => $213e4d2df823067d$export$b688253958b8dfe7);
-$parcel$export($213e4d2df823067d$exports, "SubTrigger", () => $213e4d2df823067d$export$2ea8a7a591ac5eac);
-$parcel$export($213e4d2df823067d$exports, "Content", () => $213e4d2df823067d$export$7c6e2c02157bb7d2);
-$parcel$export($213e4d2df823067d$exports, "Group", () => $213e4d2df823067d$export$eb2fcfdbd7ba97d4);
-$parcel$export($213e4d2df823067d$exports, "Label", () => $213e4d2df823067d$export$b04be29aa201d4f5);
-$parcel$export($213e4d2df823067d$exports, "Item", () => $213e4d2df823067d$export$6d08773d2e66f8f2);
-$parcel$export($213e4d2df823067d$exports, "CheckboxItem", () => $213e4d2df823067d$export$16ce288f89fa631c);
-$parcel$export($213e4d2df823067d$exports, "RadioGroup", () => $213e4d2df823067d$export$a98f0dcb43a68a25);
-$parcel$export($213e4d2df823067d$exports, "RadioItem", () => $213e4d2df823067d$export$371ab307eab489c0);
-$parcel$export($213e4d2df823067d$exports, "ItemIndicator", () => $213e4d2df823067d$export$c3468e2714d175fa);
-$parcel$export($213e4d2df823067d$exports, "Separator", () => $213e4d2df823067d$export$1ff3c3f08ae963c0);
-$parcel$export($213e4d2df823067d$exports, "Arrow", () => $213e4d2df823067d$export$21b07c8f274aebd5);
+$parcel$export(module.exports, "createMenuScope", () => $213e4d2df823067d$export$4027731b685e72eb);
+$parcel$export(module.exports, "Menu", () => $213e4d2df823067d$export$d9b273488cd8ce6f);
+$parcel$export(module.exports, "MenuAnchor", () => $213e4d2df823067d$export$9fa5ebd18bee4d43);
+$parcel$export(module.exports, "MenuPortal", () => $213e4d2df823067d$export$793392f970497feb);
+$parcel$export(module.exports, "MenuContent", () => $213e4d2df823067d$export$479f0f2f71193efe);
+$parcel$export(module.exports, "MenuGroup", () => $213e4d2df823067d$export$22a631d1f72787bb);
+$parcel$export(module.exports, "MenuLabel", () => $213e4d2df823067d$export$dd37bec0e8a99143);
+$parcel$export(module.exports, "MenuItem", () => $213e4d2df823067d$export$2ce376c2cc3355c8);
+$parcel$export(module.exports, "MenuCheckboxItem", () => $213e4d2df823067d$export$f6f243521332502d);
+$parcel$export(module.exports, "MenuRadioGroup", () => $213e4d2df823067d$export$ea2200c9eee416b3);
+$parcel$export(module.exports, "MenuRadioItem", () => $213e4d2df823067d$export$69bd225e9817f6d0);
+$parcel$export(module.exports, "MenuItemIndicator", () => $213e4d2df823067d$export$a2593e23056970a3);
+$parcel$export(module.exports, "MenuSeparator", () => $213e4d2df823067d$export$1cec7dcdd713e220);
+$parcel$export(module.exports, "MenuArrow", () => $213e4d2df823067d$export$bcdda4773debf5fa);
+$parcel$export(module.exports, "MenuSub", () => $213e4d2df823067d$export$71bdb9d1e2909932);
+$parcel$export(module.exports, "MenuSubTrigger", () => $213e4d2df823067d$export$5fbbb3ba7297405f);
+$parcel$export(module.exports, "MenuSubContent", () => $213e4d2df823067d$export$e7142ab31822bde6);
+$parcel$export(module.exports, "Root", () => $213e4d2df823067d$export$be92b6f5f03c0fe9);
+$parcel$export(module.exports, "Anchor", () => $213e4d2df823067d$export$b688253958b8dfe7);
+$parcel$export(module.exports, "Portal", () => $213e4d2df823067d$export$602eac185826482c);
+$parcel$export(module.exports, "Content", () => $213e4d2df823067d$export$7c6e2c02157bb7d2);
+$parcel$export(module.exports, "Group", () => $213e4d2df823067d$export$eb2fcfdbd7ba97d4);
+$parcel$export(module.exports, "Label", () => $213e4d2df823067d$export$b04be29aa201d4f5);
+$parcel$export(module.exports, "Item", () => $213e4d2df823067d$export$6d08773d2e66f8f2);
+$parcel$export(module.exports, "CheckboxItem", () => $213e4d2df823067d$export$16ce288f89fa631c);
+$parcel$export(module.exports, "RadioGroup", () => $213e4d2df823067d$export$a98f0dcb43a68a25);
+$parcel$export(module.exports, "RadioItem", () => $213e4d2df823067d$export$371ab307eab489c0);
+$parcel$export(module.exports, "ItemIndicator", () => $213e4d2df823067d$export$c3468e2714d175fa);
+$parcel$export(module.exports, "Separator", () => $213e4d2df823067d$export$1ff3c3f08ae963c0);
+$parcel$export(module.exports, "Arrow", () => $213e4d2df823067d$export$21b07c8f274aebd5);
+$parcel$export(module.exports, "Sub", () => $213e4d2df823067d$export$d7a01e11500dfb6f);
+$parcel$export(module.exports, "SubTrigger", () => $213e4d2df823067d$export$2ea8a7a591ac5eac);
+$parcel$export(module.exports, "SubContent", () => $213e4d2df823067d$export$6d4de93b380beddf);
+
 
 
 
@@ -140,6 +129,7 @@ const [$213e4d2df823067d$var$createMenuContext, $213e4d2df823067d$export$4027731
 const $213e4d2df823067d$var$usePopperScope = $cnSS2$radixuireactpopper.createPopperScope();
 const $213e4d2df823067d$var$useRovingFocusGroupScope = $cnSS2$radixuireactrovingfocus.createRovingFocusGroupScope();
 const [$213e4d2df823067d$var$MenuProvider, $213e4d2df823067d$var$useMenuContext] = $213e4d2df823067d$var$createMenuContext($213e4d2df823067d$var$MENU_NAME);
+const [$213e4d2df823067d$var$MenuRootProvider, $213e4d2df823067d$var$useMenuRootContext] = $213e4d2df823067d$var$createMenuContext($213e4d2df823067d$var$MENU_NAME);
 const $213e4d2df823067d$export$d9b273488cd8ce6f = (props)=>{
     const { __scopeMenu: __scopeMenu , open: open = false , children: children , dir: dir , onOpenChange: onOpenChange , modal: modal = true  } = props;
     const popperScope = $213e4d2df823067d$var$usePopperScope(__scopeMenu);
@@ -180,59 +170,24 @@ const $213e4d2df823067d$export$d9b273488cd8ce6f = (props)=>{
     }, []);
     return /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactpopper.Root, popperScope, /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuProvider, {
         scope: __scopeMenu,
-        isSubmenu: false,
-        isUsingKeyboardRef: isUsingKeyboardRef,
-        dir: direction,
         open: open,
         onOpenChange: handleOpenChange,
         content: content,
-        onContentChange: setContent,
-        onRootClose: $cnSS2$react.useCallback(()=>handleOpenChange(false)
+        onContentChange: setContent
+    }, /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuRootProvider, {
+        scope: __scopeMenu,
+        onClose: $cnSS2$react.useCallback(()=>handleOpenChange(false)
         , [
             handleOpenChange
         ]),
+        isUsingKeyboardRef: isUsingKeyboardRef,
+        dir: direction,
         modal: modal
-    }, children));
+    }, children)));
 };
 /*#__PURE__*/ Object.assign($213e4d2df823067d$export$d9b273488cd8ce6f, {
     displayName: $213e4d2df823067d$var$MENU_NAME
 });
-/* ---------------------------------------------------------------------------------------------- */ const $213e4d2df823067d$var$SUB_NAME = 'MenuSub';
-const $213e4d2df823067d$export$71bdb9d1e2909932 = (props)=>{
-    const { __scopeMenu: __scopeMenu , children: children , open: open = false , onOpenChange: onOpenChange  } = props;
-    const parentMenuContext = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$SUB_NAME, __scopeMenu);
-    const popperScope = $213e4d2df823067d$var$usePopperScope(__scopeMenu);
-    const [trigger, setTrigger] = $cnSS2$react.useState(null);
-    const [content, setContent] = $cnSS2$react.useState(null);
-    const handleOpenChange = $cnSS2$radixuireactusecallbackref.useCallbackRef(onOpenChange); // Prevent the parent menu from reopening with open submenus.
-    $cnSS2$react.useEffect(()=>{
-        if (parentMenuContext.open === false) handleOpenChange(false);
-        return ()=>handleOpenChange(false)
-        ;
-    }, [
-        parentMenuContext.open,
-        handleOpenChange
-    ]);
-    return /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactpopper.Root, popperScope, /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuProvider, {
-        scope: __scopeMenu,
-        isSubmenu: true,
-        isUsingKeyboardRef: parentMenuContext.isUsingKeyboardRef,
-        dir: parentMenuContext.dir,
-        open: open,
-        onOpenChange: handleOpenChange,
-        content: content,
-        onContentChange: setContent,
-        onRootClose: parentMenuContext.onRootClose,
-        contentId: $cnSS2$radixuireactid.useId(),
-        trigger: trigger,
-        onTriggerChange: setTrigger,
-        triggerId: $cnSS2$radixuireactid.useId(),
-        modal: false
-    }, children));
-};
-/*#__PURE__*/ Object.assign($213e4d2df823067d$export$71bdb9d1e2909932, {
-    displayName: $213e4d2df823067d$var$SUB_NAME
-});
 /* -------------------------------------------------------------------------------------------------
  * MenuAnchor
  * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$ANCHOR_NAME = 'MenuAnchor';
@@ -246,34 +201,50 @@ const $213e4d2df823067d$export$9fa5ebd18bee4d43 = /*#__PURE__*/ $cnSS2$react.for
 /*#__PURE__*/ Object.assign($213e4d2df823067d$export$9fa5ebd18bee4d43, {
     displayName: $213e4d2df823067d$var$ANCHOR_NAME
 });
+/* -------------------------------------------------------------------------------------------------
+ * MenuPortal
+ * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$PORTAL_NAME = 'MenuPortal';
+const [$213e4d2df823067d$var$PortalProvider, $213e4d2df823067d$var$usePortalContext] = $213e4d2df823067d$var$createMenuContext($213e4d2df823067d$var$PORTAL_NAME, {
+    forceMount: undefined
+});
+const $213e4d2df823067d$export$793392f970497feb = (props)=>{
+    const { __scopeMenu: __scopeMenu , forceMount: forceMount , children: children , container: container  } = props;
+    const context = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$PORTAL_NAME, __scopeMenu);
+    return /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$PortalProvider, {
+        scope: __scopeMenu,
+        forceMount: forceMount
+    }, /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactpresence.Presence, {
+        present: forceMount || context.open
+    }, /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactportal.Portal, {
+        asChild: true,
+        container: container
+    }, children)));
+};
+/*#__PURE__*/ Object.assign($213e4d2df823067d$export$793392f970497feb, {
+    displayName: $213e4d2df823067d$var$PORTAL_NAME
+});
 /* -------------------------------------------------------------------------------------------------
  * MenuContent
  * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$CONTENT_NAME = 'MenuContent';
 const [$213e4d2df823067d$var$MenuContentProvider, $213e4d2df823067d$var$useMenuContentContext] = $213e4d2df823067d$var$createMenuContext($213e4d2df823067d$var$CONTENT_NAME);
 const $213e4d2df823067d$export$479f0f2f71193efe = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
-    const { forceMount: forceMount , ...contentProps } = props;
+    const portalContext = $213e4d2df823067d$var$usePortalContext($213e4d2df823067d$var$CONTENT_NAME, props.__scopeMenu);
+    const { forceMount: forceMount = portalContext.forceMount , ...contentProps } = props;
     const context = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$CONTENT_NAME, props.__scopeMenu);
+    const rootContext = $213e4d2df823067d$var$useMenuRootContext($213e4d2df823067d$var$CONTENT_NAME, props.__scopeMenu);
     return /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$Collection.Provider, {
         scope: props.__scopeMenu
     }, /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactpresence.Presence, {
         present: forceMount || context.open
     }, /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$Collection.Slot, {
         scope: props.__scopeMenu
-    }, context.isSubmenu ? /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuSubContent, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({}, contentProps, {
+    }, rootContext.modal ? /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuRootContentModal, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({}, contentProps, {
         ref: forwardedRef
-    })) : /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuRootContent, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({}, contentProps, {
+    })) : /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuRootContentNonModal, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({}, contentProps, {
         ref: forwardedRef
     })))));
 });
-/* ---------------------------------------------------------------------------------------------- */ const $213e4d2df823067d$var$MenuRootContent = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
-    const context = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$CONTENT_NAME, props.__scopeMenu);
-    return context.modal ? /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuRootContentModal, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({}, props, {
-        ref: forwardedRef
-    })) : /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuRootContentNonModal, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({}, props, {
-        ref: forwardedRef
-    }));
-});
-const $213e4d2df823067d$var$MenuRootContentModal = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
+/* ---------------------------------------------------------------------------------------------- */ const $213e4d2df823067d$var$MenuRootContentModal = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
     const context = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$CONTENT_NAME, props.__scopeMenu);
     const ref = $cnSS2$react.useRef(null);
     const composedRefs = $cnSS2$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref); // Hide everything from ARIA except the `MenuContent`
@@ -306,52 +277,10 @@ const $213e4d2df823067d$var$MenuRootContentNonModal = /*#__PURE__*/ $cnSS2$react
         onDismiss: ()=>context.onOpenChange(false)
     }));
 });
-/* ---------------------------------------------------------------------------------------------- */ const $213e4d2df823067d$var$MenuSubContent = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
-    const context = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$CONTENT_NAME, props.__scopeMenu);
-    const ref = $cnSS2$react.useRef(null);
-    const composedRefs = $cnSS2$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
-    return context.isSubmenu ? /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuContentImpl, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
-        id: context.contentId,
-        "aria-labelledby": context.triggerId
-    }, props, {
-        ref: composedRefs,
-        align: "start",
-        side: context.dir === 'rtl' ? 'left' : 'right',
-        portalled: true,
-        disableOutsidePointerEvents: false,
-        disableOutsideScroll: false,
-        trapFocus: false,
-        onOpenAutoFocus: (event)=>{
-            var _ref$current;
-            // when opening a submenu, focus content for keyboard users only
-            if (context.isUsingKeyboardRef.current) (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
-            event.preventDefault();
-        } // The menu might close because of focusing another menu item in the parent menu. We
-        ,
-        onCloseAutoFocus: (event)=>event.preventDefault()
-        ,
-        onFocusOutside: $cnSS2$radixuiprimitive.composeEventHandlers(props.onFocusOutside, (event)=>{
-            // We prevent closing when the trigger is focused to avoid triggering a re-open animation
-            // on pointer interaction.
-            if (event.target !== context.trigger) context.onOpenChange(false);
-        }),
-        onEscapeKeyDown: $cnSS2$radixuiprimitive.composeEventHandlers(props.onEscapeKeyDown, context.onRootClose),
-        onKeyDown: $cnSS2$radixuiprimitive.composeEventHandlers(props.onKeyDown, (event)=>{
-            // Submenu key events bubble through portals. We only care about keys in this menu.
-            const isKeyDownInside = event.currentTarget.contains(event.target);
-            const isCloseKey = $213e4d2df823067d$var$SUB_CLOSE_KEYS[context.dir].includes(event.key);
-            if (isKeyDownInside && isCloseKey) {
-                var _context$trigger;
-                context.onOpenChange(false); // We focus manually because we prevented it in `onCloseAutoFocus`
-                (_context$trigger = context.trigger) === null || _context$trigger === void 0 || _context$trigger.focus(); // prevent window from scrolling
-                event.preventDefault();
-            }
-        })
-    })) : null;
-});
 /* ---------------------------------------------------------------------------------------------- */ const $213e4d2df823067d$var$MenuContentImpl = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
-    const { __scopeMenu: __scopeMenu , loop: loop = false , trapFocus: trapFocus , onOpenAutoFocus: onOpenAutoFocus , onCloseAutoFocus: onCloseAutoFocus , disableOutsidePointerEvents: disableOutsidePointerEvents , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , disableOutsideScroll: disableOutsideScroll , allowPinchZoom: allowPinchZoom , portalled: portalled , ...contentProps } = props;
+    const { __scopeMenu: __scopeMenu , loop: loop = false , trapFocus: trapFocus , onOpenAutoFocus: onOpenAutoFocus , onCloseAutoFocus: onCloseAutoFocus , disableOutsidePointerEvents: disableOutsidePointerEvents , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , disableOutsideScroll: disableOutsideScroll , ...contentProps } = props;
     const context = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$CONTENT_NAME, __scopeMenu);
+    const rootContext = $213e4d2df823067d$var$useMenuRootContext($213e4d2df823067d$var$CONTENT_NAME, __scopeMenu);
     const popperScope = $213e4d2df823067d$var$usePopperScope(__scopeMenu);
     const rovingFocusGroupScope = $213e4d2df823067d$var$useRovingFocusGroupScope(__scopeMenu);
     const getItems = $213e4d2df823067d$var$useCollection(__scopeMenu);
@@ -364,10 +293,10 @@ const $213e4d2df823067d$var$MenuRootContentNonModal = /*#__PURE__*/ $cnSS2$react
     const pointerGraceIntentRef = $cnSS2$react.useRef(null);
     const pointerDirRef = $cnSS2$react.useRef('right');
     const lastPointerXRef = $cnSS2$react.useRef(0);
-    const PortalWrapper = portalled ? $cnSS2$radixuireactportal.Portal : $cnSS2$react.Fragment;
     const ScrollLockWrapper = disableOutsideScroll ? $cnSS2$reactremovescroll.RemoveScroll : $cnSS2$react.Fragment;
     const scrollLockWrapperProps = disableOutsideScroll ? {
-        allowPinchZoom: allowPinchZoom
+        as: $cnSS2$radixuireactslot.Slot,
+        allowPinchZoom: true
     } : undefined;
     const handleTypeaheadSearch = (key)=>{
         var _items$find, _items$find2;
@@ -405,7 +334,7 @@ const $213e4d2df823067d$var$MenuRootContentNonModal = /*#__PURE__*/ $cnSS2$react
         const isMovingTowards = pointerDirRef.current === ((_pointerGraceIntentRe = pointerGraceIntentRef.current) === null || _pointerGraceIntentRe === void 0 ? void 0 : _pointerGraceIntentRe.side);
         return isMovingTowards && $213e4d2df823067d$var$isPointerInGraceArea(event, (_pointerGraceIntentRe2 = pointerGraceIntentRef.current) === null || _pointerGraceIntentRe2 === void 0 ? void 0 : _pointerGraceIntentRe2.area);
     }, []);
-    return /*#__PURE__*/ $cnSS2$react.createElement(PortalWrapper, null, /*#__PURE__*/ $cnSS2$react.createElement(ScrollLockWrapper, scrollLockWrapperProps, /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuContentProvider, {
+    return /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuContentProvider, {
         scope: __scopeMenu,
         searchRef: searchRef,
         onItemEnter: $cnSS2$react.useCallback((event)=>{
@@ -430,7 +359,7 @@ const $213e4d2df823067d$var$MenuRootContentNonModal = /*#__PURE__*/ $cnSS2$react
         onPointerGraceIntentChange: $cnSS2$react.useCallback((intent)=>{
             pointerGraceIntentRef.current = intent;
         }, [])
-    }, /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactfocusscope.FocusScope, {
+    }, /*#__PURE__*/ $cnSS2$react.createElement(ScrollLockWrapper, scrollLockWrapperProps, /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactfocusscope.FocusScope, {
         asChild: true,
         trapped: trapFocus,
         onMountAutoFocus: $cnSS2$radixuiprimitive.composeEventHandlers(onOpenAutoFocus, (event)=>{
@@ -452,20 +381,20 @@ const $213e4d2df823067d$var$MenuRootContentNonModal = /*#__PURE__*/ $cnSS2$react
     }, /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactrovingfocus.Root, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
         asChild: true
     }, rovingFocusGroupScope, {
-        dir: context.dir,
+        dir: rootContext.dir,
         orientation: "vertical",
         loop: loop,
         currentTabStopId: currentItemId,
         onCurrentTabStopIdChange: setCurrentItemId,
         onEntryFocus: (event)=>{
             // only focus first item when using keyboard
-            if (!context.isUsingKeyboardRef.current) event.preventDefault();
+            if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
         }
     }), /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactpopper.Content, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
         role: "menu",
         "aria-orientation": "vertical",
         "data-state": $213e4d2df823067d$var$getOpenState(context.open),
-        dir: context.dir
+        dir: rootContext.dir
     }, popperScope, contentProps, {
         ref: composedRefs,
         style: {
@@ -475,7 +404,7 @@ const $213e4d2df823067d$var$MenuRootContentNonModal = /*#__PURE__*/ $cnSS2$react
         onKeyDown: $cnSS2$radixuiprimitive.composeEventHandlers(contentProps.onKeyDown, (event)=>{
             // submenu key events bubble through portals. We only care about keys in this menu.
             const target = event.target;
-            const isKeyDownInside = event.currentTarget.contains(target);
+            const isKeyDownInside = target.closest('[role="menu"]') === event.currentTarget;
             const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
             const isCharacterKey = event.key.length === 1;
             if (isKeyDownInside) {
@@ -511,7 +440,7 @@ const $213e4d2df823067d$var$MenuRootContentNonModal = /*#__PURE__*/ $cnSS2$react
                 lastPointerXRef.current = event.clientX;
             }
         }))
-    }))))))));
+    })))))));
 });
 /*#__PURE__*/ Object.assign($213e4d2df823067d$export$479f0f2f71193efe, {
     displayName: $213e4d2df823067d$var$CONTENT_NAME
@@ -549,14 +478,14 @@ const $213e4d2df823067d$var$ITEM_SELECT = 'menu.itemSelect';
 const $213e4d2df823067d$export$2ce376c2cc3355c8 = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
     const { disabled: disabled = false , onSelect: onSelect , ...itemProps } = props;
     const ref = $cnSS2$react.useRef(null);
-    const context = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$ITEM_NAME, props.__scopeMenu);
+    const rootContext = $213e4d2df823067d$var$useMenuRootContext($213e4d2df823067d$var$ITEM_NAME, props.__scopeMenu);
     const contentContext = $213e4d2df823067d$var$useMenuContentContext($213e4d2df823067d$var$ITEM_NAME, props.__scopeMenu);
     const composedRefs = $cnSS2$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
     const isPointerDownRef = $cnSS2$react.useRef(false);
     const handleSelect = ()=>{
         const menuItem = ref.current;
         if (!disabled && menuItem) {
-            const itemSelectEvent = new Event($213e4d2df823067d$var$ITEM_SELECT, {
+            const itemSelectEvent = new CustomEvent($213e4d2df823067d$var$ITEM_SELECT, {
                 bubbles: true,
                 cancelable: true
             });
@@ -564,9 +493,9 @@ const $213e4d2df823067d$export$2ce376c2cc3355c8 = /*#__PURE__*/ $cnSS2$react.for
             , {
                 once: true
             });
-            menuItem.dispatchEvent(itemSelectEvent);
+            $cnSS2$radixuireactprimitive.dispatchDiscreteCustomEvent(menuItem, itemSelectEvent);
             if (itemSelectEvent.defaultPrevented) isPointerDownRef.current = false;
-            else context.onRootClose();
+            else rootContext.onClose();
         }
     };
     return /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuItemImpl, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({}, itemProps, {
@@ -603,137 +532,13 @@ const $213e4d2df823067d$export$2ce376c2cc3355c8 = /*#__PURE__*/ $cnSS2$react.for
 /*#__PURE__*/ Object.assign($213e4d2df823067d$export$2ce376c2cc3355c8, {
     displayName: $213e4d2df823067d$var$ITEM_NAME
 });
-/* -------------------------------------------------------------------------------------------------
- * MenuSubTrigger
- * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$SUB_TRIGGER_NAME = 'MenuSubTrigger';
-const $213e4d2df823067d$export$5fbbb3ba7297405f = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
-    const context = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$SUB_TRIGGER_NAME, props.__scopeMenu);
-    const contentContext = $213e4d2df823067d$var$useMenuContentContext($213e4d2df823067d$var$SUB_TRIGGER_NAME, props.__scopeMenu);
-    const openTimerRef = $cnSS2$react.useRef(null);
-    const { pointerGraceTimerRef: pointerGraceTimerRef , onPointerGraceIntentChange: onPointerGraceIntentChange  } = contentContext;
-    const scope = {
-        __scopeMenu: props.__scopeMenu
-    };
-    const clearOpenTimer = $cnSS2$react.useCallback(()=>{
-        if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
-        openTimerRef.current = null;
-    }, []);
-    $cnSS2$react.useEffect(()=>clearOpenTimer
-    , [
-        clearOpenTimer
-    ]);
-    $cnSS2$react.useEffect(()=>{
-        const pointerGraceTimer = pointerGraceTimerRef.current;
-        return ()=>{
-            window.clearTimeout(pointerGraceTimer);
-            onPointerGraceIntentChange(null);
-        };
-    }, [
-        pointerGraceTimerRef,
-        onPointerGraceIntentChange
-    ]);
-    return context.isSubmenu ? /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$export$9fa5ebd18bee4d43, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
-        asChild: true
-    }, scope), /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuItemImpl, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
-        id: context.triggerId,
-        "aria-haspopup": "menu",
-        "aria-expanded": context.open,
-        "aria-controls": context.contentId,
-        "data-state": $213e4d2df823067d$var$getOpenState(context.open)
-    }, props, {
-        ref: $cnSS2$radixuireactcomposerefs.composeRefs(forwardedRef, context.onTriggerChange) // This is redundant for mouse users but we cannot determine pointer type from
-        ,
-        onClick: (event)=>{
-            var _props$onClick;
-            (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, event);
-            if (props.disabled || event.defaultPrevented) return;
-            /**
-       * We manually focus because iOS Safari doesn't always focus on click (e.g. buttons)
-       * and we rely heavily on `onFocusOutside` for submenus to close when switching
-       * between separate submenus.
-       */ event.currentTarget.focus();
-            if (!context.open) context.onOpenChange(true);
-        },
-        onPointerMove: $cnSS2$radixuiprimitive.composeEventHandlers(props.onPointerMove, $213e4d2df823067d$var$whenMouse((event)=>{
-            contentContext.onItemEnter(event);
-            if (event.defaultPrevented) return;
-            if (!props.disabled && !context.open && !openTimerRef.current) {
-                contentContext.onPointerGraceIntentChange(null);
-                openTimerRef.current = window.setTimeout(()=>{
-                    context.onOpenChange(true);
-                    clearOpenTimer();
-                }, 100);
-            }
-        })),
-        onPointerLeave: $cnSS2$radixuiprimitive.composeEventHandlers(props.onPointerLeave, $213e4d2df823067d$var$whenMouse((event)=>{
-            var _context$content;
-            clearOpenTimer();
-            const contentRect = (_context$content = context.content) === null || _context$content === void 0 ? void 0 : _context$content.getBoundingClientRect();
-            if (contentRect) {
-                var _context$content2;
-                // TODO: make sure to update this when we change positioning logic
-                const side = (_context$content2 = context.content) === null || _context$content2 === void 0 ? void 0 : _context$content2.dataset.side;
-                const rightSide = side === 'right';
-                const bleed = rightSide ? -5 : 5;
-                const contentNearEdge = contentRect[rightSide ? 'left' : 'right'];
-                const contentFarEdge = contentRect[rightSide ? 'right' : 'left'];
-                contentContext.onPointerGraceIntentChange({
-                    area: [
-                        // consistently within polygon bounds
-                        {
-                            x: event.clientX + bleed,
-                            y: event.clientY
-                        },
-                        {
-                            x: contentNearEdge,
-                            y: contentRect.top
-                        },
-                        {
-                            x: contentFarEdge,
-                            y: contentRect.top
-                        },
-                        {
-                            x: contentFarEdge,
-                            y: contentRect.bottom
-                        },
-                        {
-                            x: contentNearEdge,
-                            y: contentRect.bottom
-                        }
-                    ],
-                    side: side
-                });
-                window.clearTimeout(pointerGraceTimerRef.current);
-                pointerGraceTimerRef.current = window.setTimeout(()=>contentContext.onPointerGraceIntentChange(null)
-                , 300);
-            } else {
-                contentContext.onTriggerLeave(event);
-                if (event.defaultPrevented) return; // There's 100ms where the user may leave an item before the submenu was opened.
-                contentContext.onPointerGraceIntentChange(null);
-            }
-        })),
-        onKeyDown: $cnSS2$radixuiprimitive.composeEventHandlers(props.onKeyDown, (event)=>{
-            const isTypingAhead = contentContext.searchRef.current !== '';
-            if (props.disabled || isTypingAhead && event.key === ' ') return;
-            if ($213e4d2df823067d$var$SUB_OPEN_KEYS[context.dir].includes(event.key)) {
-                var _context$content3;
-                context.onOpenChange(true); // The trigger may hold focus if opened via pointer interaction
-                // so we ensure content is given focus again when switching to keyboard.
-                (_context$content3 = context.content) === null || _context$content3 === void 0 || _context$content3.focus(); // prevent window from scrolling
-                event.preventDefault();
-            }
-        })
-    }))) : null;
-});
-/*#__PURE__*/ Object.assign($213e4d2df823067d$export$5fbbb3ba7297405f, {
-    displayName: $213e4d2df823067d$var$SUB_TRIGGER_NAME
-});
 /* ---------------------------------------------------------------------------------------------- */ const $213e4d2df823067d$var$MenuItemImpl = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
     const { __scopeMenu: __scopeMenu , disabled: disabled = false , textValue: textValue , ...itemProps } = props;
     const contentContext = $213e4d2df823067d$var$useMenuContentContext($213e4d2df823067d$var$ITEM_NAME, __scopeMenu);
     const rovingFocusGroupScope = $213e4d2df823067d$var$useRovingFocusGroupScope(__scopeMenu);
     const ref = $cnSS2$react.useRef(null);
-    const composedRefs = $cnSS2$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref); // get the item's `.textContent` as default strategy for typeahead `textValue`
+    const composedRefs = $cnSS2$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
+    const [isFocused, setIsFocused] = $cnSS2$react.useState(false); // get the item's `.textContent` as default strategy for typeahead `textValue`
     const [textContent, setTextContent] = $cnSS2$react.useState('');
     $cnSS2$react.useEffect(()=>{
         const menuItem = ref.current;
@@ -754,6 +559,7 @@ const $213e4d2df823067d$export$5fbbb3ba7297405f = /*#__PURE__*/ $cnSS2$react.for
         focusable: !disabled
     }), /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
         role: "menuitem",
+        "data-highlighted": isFocused ? '' : undefined,
         "aria-disabled": disabled || undefined,
         "data-disabled": disabled ? '' : undefined
     }, itemProps, {
@@ -769,7 +575,11 @@ const $213e4d2df823067d$export$5fbbb3ba7297405f = /*#__PURE__*/ $cnSS2$react.for
             }
         })),
         onPointerLeave: $cnSS2$radixuiprimitive.composeEventHandlers(props.onPointerLeave, $213e4d2df823067d$var$whenMouse((event)=>contentContext.onItemLeave(event)
-        ))
+        )),
+        onFocus: $cnSS2$radixuiprimitive.composeEventHandlers(props.onFocus, ()=>setIsFocused(true)
+        ),
+        onBlur: $cnSS2$radixuiprimitive.composeEventHandlers(props.onBlur, ()=>setIsFocused(false)
+        )
     }))));
 });
 /* -------------------------------------------------------------------------------------------------
@@ -890,6 +700,227 @@ const $213e4d2df823067d$export$bcdda4773debf5fa = /*#__PURE__*/ $cnSS2$react.for
 /*#__PURE__*/ Object.assign($213e4d2df823067d$export$bcdda4773debf5fa, {
     displayName: $213e4d2df823067d$var$ARROW_NAME
 });
+/* -------------------------------------------------------------------------------------------------
+ * MenuSub
+ * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$SUB_NAME = 'MenuSub';
+const [$213e4d2df823067d$var$MenuSubProvider, $213e4d2df823067d$var$useMenuSubContext] = $213e4d2df823067d$var$createMenuContext($213e4d2df823067d$var$SUB_NAME);
+const $213e4d2df823067d$export$71bdb9d1e2909932 = (props)=>{
+    const { __scopeMenu: __scopeMenu , children: children , open: open = false , onOpenChange: onOpenChange  } = props;
+    const parentMenuContext = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$SUB_NAME, __scopeMenu);
+    const popperScope = $213e4d2df823067d$var$usePopperScope(__scopeMenu);
+    const [trigger, setTrigger] = $cnSS2$react.useState(null);
+    const [content, setContent] = $cnSS2$react.useState(null);
+    const handleOpenChange = $cnSS2$radixuireactusecallbackref.useCallbackRef(onOpenChange); // Prevent the parent menu from reopening with open submenus.
+    $cnSS2$react.useEffect(()=>{
+        if (parentMenuContext.open === false) handleOpenChange(false);
+        return ()=>handleOpenChange(false)
+        ;
+    }, [
+        parentMenuContext.open,
+        handleOpenChange
+    ]);
+    return /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactpopper.Root, popperScope, /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuProvider, {
+        scope: __scopeMenu,
+        open: open,
+        onOpenChange: handleOpenChange,
+        content: content,
+        onContentChange: setContent
+    }, /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuSubProvider, {
+        scope: __scopeMenu,
+        contentId: $cnSS2$radixuireactid.useId(),
+        triggerId: $cnSS2$radixuireactid.useId(),
+        trigger: trigger,
+        onTriggerChange: setTrigger
+    }, children)));
+};
+/*#__PURE__*/ Object.assign($213e4d2df823067d$export$71bdb9d1e2909932, {
+    displayName: $213e4d2df823067d$var$SUB_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * MenuSubTrigger
+ * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$SUB_TRIGGER_NAME = 'MenuSubTrigger';
+const $213e4d2df823067d$export$5fbbb3ba7297405f = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
+    const context = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$SUB_TRIGGER_NAME, props.__scopeMenu);
+    const rootContext = $213e4d2df823067d$var$useMenuRootContext($213e4d2df823067d$var$SUB_TRIGGER_NAME, props.__scopeMenu);
+    const subContext = $213e4d2df823067d$var$useMenuSubContext($213e4d2df823067d$var$SUB_TRIGGER_NAME, props.__scopeMenu);
+    const contentContext = $213e4d2df823067d$var$useMenuContentContext($213e4d2df823067d$var$SUB_TRIGGER_NAME, props.__scopeMenu);
+    const openTimerRef = $cnSS2$react.useRef(null);
+    const { pointerGraceTimerRef: pointerGraceTimerRef , onPointerGraceIntentChange: onPointerGraceIntentChange  } = contentContext;
+    const scope = {
+        __scopeMenu: props.__scopeMenu
+    };
+    const clearOpenTimer = $cnSS2$react.useCallback(()=>{
+        if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
+        openTimerRef.current = null;
+    }, []);
+    $cnSS2$react.useEffect(()=>clearOpenTimer
+    , [
+        clearOpenTimer
+    ]);
+    $cnSS2$react.useEffect(()=>{
+        const pointerGraceTimer = pointerGraceTimerRef.current;
+        return ()=>{
+            window.clearTimeout(pointerGraceTimer);
+            onPointerGraceIntentChange(null);
+        };
+    }, [
+        pointerGraceTimerRef,
+        onPointerGraceIntentChange
+    ]);
+    return /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$export$9fa5ebd18bee4d43, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
+        asChild: true
+    }, scope), /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuItemImpl, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
+        id: subContext.triggerId,
+        "aria-haspopup": "menu",
+        "aria-expanded": context.open,
+        "aria-controls": subContext.contentId,
+        "data-state": $213e4d2df823067d$var$getOpenState(context.open)
+    }, props, {
+        ref: $cnSS2$radixuireactcomposerefs.composeRefs(forwardedRef, subContext.onTriggerChange) // This is redundant for mouse users but we cannot determine pointer type from
+        ,
+        onClick: (event)=>{
+            var _props$onClick;
+            (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, event);
+            if (props.disabled || event.defaultPrevented) return;
+            /**
+       * We manually focus because iOS Safari doesn't always focus on click (e.g. buttons)
+       * and we rely heavily on `onFocusOutside` for submenus to close when switching
+       * between separate submenus.
+       */ event.currentTarget.focus();
+            if (!context.open) context.onOpenChange(true);
+        },
+        onPointerMove: $cnSS2$radixuiprimitive.composeEventHandlers(props.onPointerMove, $213e4d2df823067d$var$whenMouse((event)=>{
+            contentContext.onItemEnter(event);
+            if (event.defaultPrevented) return;
+            if (!props.disabled && !context.open && !openTimerRef.current) {
+                contentContext.onPointerGraceIntentChange(null);
+                openTimerRef.current = window.setTimeout(()=>{
+                    context.onOpenChange(true);
+                    clearOpenTimer();
+                }, 100);
+            }
+        })),
+        onPointerLeave: $cnSS2$radixuiprimitive.composeEventHandlers(props.onPointerLeave, $213e4d2df823067d$var$whenMouse((event)=>{
+            var _context$content;
+            clearOpenTimer();
+            const contentRect = (_context$content = context.content) === null || _context$content === void 0 ? void 0 : _context$content.getBoundingClientRect();
+            if (contentRect) {
+                var _context$content2;
+                // TODO: make sure to update this when we change positioning logic
+                const side = (_context$content2 = context.content) === null || _context$content2 === void 0 ? void 0 : _context$content2.dataset.side;
+                const rightSide = side === 'right';
+                const bleed = rightSide ? -5 : 5;
+                const contentNearEdge = contentRect[rightSide ? 'left' : 'right'];
+                const contentFarEdge = contentRect[rightSide ? 'right' : 'left'];
+                contentContext.onPointerGraceIntentChange({
+                    area: [
+                        // consistently within polygon bounds
+                        {
+                            x: event.clientX + bleed,
+                            y: event.clientY
+                        },
+                        {
+                            x: contentNearEdge,
+                            y: contentRect.top
+                        },
+                        {
+                            x: contentFarEdge,
+                            y: contentRect.top
+                        },
+                        {
+                            x: contentFarEdge,
+                            y: contentRect.bottom
+                        },
+                        {
+                            x: contentNearEdge,
+                            y: contentRect.bottom
+                        }
+                    ],
+                    side: side
+                });
+                window.clearTimeout(pointerGraceTimerRef.current);
+                pointerGraceTimerRef.current = window.setTimeout(()=>contentContext.onPointerGraceIntentChange(null)
+                , 300);
+            } else {
+                contentContext.onTriggerLeave(event);
+                if (event.defaultPrevented) return; // There's 100ms where the user may leave an item before the submenu was opened.
+                contentContext.onPointerGraceIntentChange(null);
+            }
+        })),
+        onKeyDown: $cnSS2$radixuiprimitive.composeEventHandlers(props.onKeyDown, (event)=>{
+            const isTypingAhead = contentContext.searchRef.current !== '';
+            if (props.disabled || isTypingAhead && event.key === ' ') return;
+            if ($213e4d2df823067d$var$SUB_OPEN_KEYS[rootContext.dir].includes(event.key)) {
+                var _context$content3;
+                context.onOpenChange(true); // The trigger may hold focus if opened via pointer interaction
+                // so we ensure content is given focus again when switching to keyboard.
+                (_context$content3 = context.content) === null || _context$content3 === void 0 || _context$content3.focus(); // prevent window from scrolling
+                event.preventDefault();
+            }
+        })
+    })));
+});
+/*#__PURE__*/ Object.assign($213e4d2df823067d$export$5fbbb3ba7297405f, {
+    displayName: $213e4d2df823067d$var$SUB_TRIGGER_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * MenuSubContent
+ * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$SUB_CONTENT_NAME = 'MenuSubContent';
+const $213e4d2df823067d$export$e7142ab31822bde6 = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
+    const portalContext = $213e4d2df823067d$var$usePortalContext($213e4d2df823067d$var$CONTENT_NAME, props.__scopeMenu);
+    const { forceMount: forceMount = portalContext.forceMount , ...subContentProps } = props;
+    const context = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$CONTENT_NAME, props.__scopeMenu);
+    const rootContext = $213e4d2df823067d$var$useMenuRootContext($213e4d2df823067d$var$CONTENT_NAME, props.__scopeMenu);
+    const subContext = $213e4d2df823067d$var$useMenuSubContext($213e4d2df823067d$var$SUB_CONTENT_NAME, props.__scopeMenu);
+    const ref = $cnSS2$react.useRef(null);
+    const composedRefs = $cnSS2$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
+    return /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$Collection.Provider, {
+        scope: props.__scopeMenu
+    }, /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactpresence.Presence, {
+        present: forceMount || context.open
+    }, /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$Collection.Slot, {
+        scope: props.__scopeMenu
+    }, /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuContentImpl, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
+        id: subContext.contentId,
+        "aria-labelledby": subContext.triggerId
+    }, subContentProps, {
+        ref: composedRefs,
+        align: "start",
+        side: rootContext.dir === 'rtl' ? 'left' : 'right',
+        disableOutsidePointerEvents: false,
+        disableOutsideScroll: false,
+        trapFocus: false,
+        onOpenAutoFocus: (event)=>{
+            var _ref$current;
+            // when opening a submenu, focus content for keyboard users only
+            if (rootContext.isUsingKeyboardRef.current) (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
+            event.preventDefault();
+        } // The menu might close because of focusing another menu item in the parent menu. We
+        ,
+        onCloseAutoFocus: (event)=>event.preventDefault()
+        ,
+        onFocusOutside: $cnSS2$radixuiprimitive.composeEventHandlers(props.onFocusOutside, (event)=>{
+            // We prevent closing when the trigger is focused to avoid triggering a re-open animation
+            // on pointer interaction.
+            if (event.target !== subContext.trigger) context.onOpenChange(false);
+        }),
+        onEscapeKeyDown: $cnSS2$radixuiprimitive.composeEventHandlers(props.onEscapeKeyDown, rootContext.onClose),
+        onKeyDown: $cnSS2$radixuiprimitive.composeEventHandlers(props.onKeyDown, (event)=>{
+            // Submenu key events bubble through portals. We only care about keys in this menu.
+            const isKeyDownInside = event.currentTarget.contains(event.target);
+            const isCloseKey = $213e4d2df823067d$var$SUB_CLOSE_KEYS[rootContext.dir].includes(event.key);
+            if (isKeyDownInside && isCloseKey) {
+                var _subContext$trigger;
+                context.onOpenChange(false); // We focus manually because we prevented it in `onCloseAutoFocus`
+                (_subContext$trigger = subContext.trigger) === null || _subContext$trigger === void 0 || _subContext$trigger.focus(); // prevent window from scrolling
+                event.preventDefault();
+            }
+        })
+    })))));
+});
+/*#__PURE__*/ Object.assign($213e4d2df823067d$export$e7142ab31822bde6, {
+    displayName: $213e4d2df823067d$var$SUB_CONTENT_NAME
+});
 /* -----------------------------------------------------------------------------------------------*/ function $213e4d2df823067d$var$getOpenState(open) {
     return open ? 'open' : 'closed';
 }
@@ -969,9 +1000,8 @@ function $213e4d2df823067d$var$whenMouse(handler) {
     ;
 }
 const $213e4d2df823067d$export$be92b6f5f03c0fe9 = $213e4d2df823067d$export$d9b273488cd8ce6f;
-const $213e4d2df823067d$export$d7a01e11500dfb6f = $213e4d2df823067d$export$71bdb9d1e2909932;
 const $213e4d2df823067d$export$b688253958b8dfe7 = $213e4d2df823067d$export$9fa5ebd18bee4d43;
-const $213e4d2df823067d$export$2ea8a7a591ac5eac = $213e4d2df823067d$export$5fbbb3ba7297405f;
+const $213e4d2df823067d$export$602eac185826482c = $213e4d2df823067d$export$793392f970497feb;
 const $213e4d2df823067d$export$7c6e2c02157bb7d2 = $213e4d2df823067d$export$479f0f2f71193efe;
 const $213e4d2df823067d$export$eb2fcfdbd7ba97d4 = $213e4d2df823067d$export$22a631d1f72787bb;
 const $213e4d2df823067d$export$b04be29aa201d4f5 = $213e4d2df823067d$export$dd37bec0e8a99143;
@@ -982,9 +1012,11 @@ const $213e4d2df823067d$export$371ab307eab489c0 = $213e4d2df823067d$export$69bd2
 const $213e4d2df823067d$export$c3468e2714d175fa = $213e4d2df823067d$export$a2593e23056970a3;
 const $213e4d2df823067d$export$1ff3c3f08ae963c0 = $213e4d2df823067d$export$1cec7dcdd713e220;
 const $213e4d2df823067d$export$21b07c8f274aebd5 = $213e4d2df823067d$export$bcdda4773debf5fa;
+const $213e4d2df823067d$export$d7a01e11500dfb6f = $213e4d2df823067d$export$71bdb9d1e2909932;
+const $213e4d2df823067d$export$2ea8a7a591ac5eac = $213e4d2df823067d$export$5fbbb3ba7297405f;
+const $213e4d2df823067d$export$6d4de93b380beddf = $213e4d2df823067d$export$e7142ab31822bde6;
 
 
-$parcel$exportWildcard(module.exports, $213e4d2df823067d$exports);
 
 
 //# sourceMappingURL=index.js.map