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

package/dist/index.module.js

@@ -1,57 +1,25 @@
 import $epM9y$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
 import {useState as $epM9y$useState, useRef as $epM9y$useRef, useEffect as $epM9y$useEffect, createElement as $epM9y$createElement, useCallback as $epM9y$useCallback, forwardRef as $epM9y$forwardRef, Fragment as $epM9y$Fragment} from "react";
-import {RemoveScroll as $epM9y$RemoveScroll} from "react-remove-scroll";
-import {hideOthers as $epM9y$hideOthers} from "aria-hidden";
 import {composeEventHandlers as $epM9y$composeEventHandlers} from "@radix-ui/primitive";
 import {createCollection as $epM9y$createCollection} from "@radix-ui/react-collection";
 import {useComposedRefs as $epM9y$useComposedRefs, composeRefs as $epM9y$composeRefs} from "@radix-ui/react-compose-refs";
 import {createContextScope as $epM9y$createContextScope} from "@radix-ui/react-context";
+import {useDirection as $epM9y$useDirection} from "@radix-ui/react-direction";
 import {DismissableLayer as $epM9y$DismissableLayer} from "@radix-ui/react-dismissable-layer";
+import {useFocusGuards as $epM9y$useFocusGuards} from "@radix-ui/react-focus-guards";
 import {FocusScope as $epM9y$FocusScope} from "@radix-ui/react-focus-scope";
-import {Presence as $epM9y$Presence} from "@radix-ui/react-presence";
-import {Primitive as $epM9y$Primitive} from "@radix-ui/react-primitive";
+import {useId as $epM9y$useId} from "@radix-ui/react-id";
 import {createPopperScope as $epM9y$createPopperScope, Root as $epM9y$Root, Anchor as $epM9y$Anchor, Content as $epM9y$Content, Arrow as $epM9y$Arrow} from "@radix-ui/react-popper";
 import {Portal as $epM9y$Portal} from "@radix-ui/react-portal";
+import {Presence as $epM9y$Presence} from "@radix-ui/react-presence";
+import {Primitive as $epM9y$Primitive, dispatchDiscreteCustomEvent as $epM9y$dispatchDiscreteCustomEvent} from "@radix-ui/react-primitive";
 import {createRovingFocusGroupScope as $epM9y$createRovingFocusGroupScope, Root as $epM9y$Root1, Item as $epM9y$Item} from "@radix-ui/react-roving-focus";
-import {useDirection as $epM9y$useDirection} from "@radix-ui/react-direction";
+import {Slot as $epM9y$Slot} from "@radix-ui/react-slot";
 import {useCallbackRef as $epM9y$useCallbackRef} from "@radix-ui/react-use-callback-ref";
-import {useFocusGuards as $epM9y$useFocusGuards} from "@radix-ui/react-focus-guards";
-import {useId as $epM9y$useId} from "@radix-ui/react-id";
+import {hideOthers as $epM9y$hideOthers} from "aria-hidden";
+import {RemoveScroll as $epM9y$RemoveScroll} from "react-remove-scroll";
 
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-var $6cc32821e9371a1c$exports = {};
 
-$parcel$export($6cc32821e9371a1c$exports, "createMenuScope", () => $6cc32821e9371a1c$export$4027731b685e72eb);
-$parcel$export($6cc32821e9371a1c$exports, "Menu", () => $6cc32821e9371a1c$export$d9b273488cd8ce6f);
-$parcel$export($6cc32821e9371a1c$exports, "MenuSub", () => $6cc32821e9371a1c$export$71bdb9d1e2909932);
-$parcel$export($6cc32821e9371a1c$exports, "MenuAnchor", () => $6cc32821e9371a1c$export$9fa5ebd18bee4d43);
-$parcel$export($6cc32821e9371a1c$exports, "MenuContent", () => $6cc32821e9371a1c$export$479f0f2f71193efe);
-$parcel$export($6cc32821e9371a1c$exports, "MenuGroup", () => $6cc32821e9371a1c$export$22a631d1f72787bb);
-$parcel$export($6cc32821e9371a1c$exports, "MenuLabel", () => $6cc32821e9371a1c$export$dd37bec0e8a99143);
-$parcel$export($6cc32821e9371a1c$exports, "MenuItem", () => $6cc32821e9371a1c$export$2ce376c2cc3355c8);
-$parcel$export($6cc32821e9371a1c$exports, "MenuSubTrigger", () => $6cc32821e9371a1c$export$5fbbb3ba7297405f);
-$parcel$export($6cc32821e9371a1c$exports, "MenuCheckboxItem", () => $6cc32821e9371a1c$export$f6f243521332502d);
-$parcel$export($6cc32821e9371a1c$exports, "MenuRadioGroup", () => $6cc32821e9371a1c$export$ea2200c9eee416b3);
-$parcel$export($6cc32821e9371a1c$exports, "MenuRadioItem", () => $6cc32821e9371a1c$export$69bd225e9817f6d0);
-$parcel$export($6cc32821e9371a1c$exports, "MenuItemIndicator", () => $6cc32821e9371a1c$export$a2593e23056970a3);
-$parcel$export($6cc32821e9371a1c$exports, "MenuSeparator", () => $6cc32821e9371a1c$export$1cec7dcdd713e220);
-$parcel$export($6cc32821e9371a1c$exports, "MenuArrow", () => $6cc32821e9371a1c$export$bcdda4773debf5fa);
-$parcel$export($6cc32821e9371a1c$exports, "Root", () => $6cc32821e9371a1c$export$be92b6f5f03c0fe9);
-$parcel$export($6cc32821e9371a1c$exports, "Sub", () => $6cc32821e9371a1c$export$d7a01e11500dfb6f);
-$parcel$export($6cc32821e9371a1c$exports, "Anchor", () => $6cc32821e9371a1c$export$b688253958b8dfe7);
-$parcel$export($6cc32821e9371a1c$exports, "SubTrigger", () => $6cc32821e9371a1c$export$2ea8a7a591ac5eac);
-$parcel$export($6cc32821e9371a1c$exports, "Content", () => $6cc32821e9371a1c$export$7c6e2c02157bb7d2);
-$parcel$export($6cc32821e9371a1c$exports, "Group", () => $6cc32821e9371a1c$export$eb2fcfdbd7ba97d4);
-$parcel$export($6cc32821e9371a1c$exports, "Label", () => $6cc32821e9371a1c$export$b04be29aa201d4f5);
-$parcel$export($6cc32821e9371a1c$exports, "Item", () => $6cc32821e9371a1c$export$6d08773d2e66f8f2);
-$parcel$export($6cc32821e9371a1c$exports, "CheckboxItem", () => $6cc32821e9371a1c$export$16ce288f89fa631c);
-$parcel$export($6cc32821e9371a1c$exports, "RadioGroup", () => $6cc32821e9371a1c$export$a98f0dcb43a68a25);
-$parcel$export($6cc32821e9371a1c$exports, "RadioItem", () => $6cc32821e9371a1c$export$371ab307eab489c0);
-$parcel$export($6cc32821e9371a1c$exports, "ItemIndicator", () => $6cc32821e9371a1c$export$c3468e2714d175fa);
-$parcel$export($6cc32821e9371a1c$exports, "Separator", () => $6cc32821e9371a1c$export$1ff3c3f08ae963c0);
-$parcel$export($6cc32821e9371a1c$exports, "Arrow", () => $6cc32821e9371a1c$export$21b07c8f274aebd5);
 
 
 
@@ -121,6 +89,7 @@ const [$6cc32821e9371a1c$var$createMenuContext, $6cc32821e9371a1c$export$4027731
 const $6cc32821e9371a1c$var$usePopperScope = $epM9y$createPopperScope();
 const $6cc32821e9371a1c$var$useRovingFocusGroupScope = $epM9y$createRovingFocusGroupScope();
 const [$6cc32821e9371a1c$var$MenuProvider, $6cc32821e9371a1c$var$useMenuContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$MENU_NAME);
+const [$6cc32821e9371a1c$var$MenuRootProvider, $6cc32821e9371a1c$var$useMenuRootContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$MENU_NAME);
 const $6cc32821e9371a1c$export$d9b273488cd8ce6f = (props)=>{
     const { __scopeMenu: __scopeMenu , open: open = false , children: children , dir: dir , onOpenChange: onOpenChange , modal: modal = true  } = props;
     const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
@@ -161,59 +130,24 @@ const $6cc32821e9371a1c$export$d9b273488cd8ce6f = (props)=>{
     }, []);
     return /*#__PURE__*/ $epM9y$createElement($epM9y$Root, popperScope, /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuProvider, {
         scope: __scopeMenu,
-        isSubmenu: false,
-        isUsingKeyboardRef: isUsingKeyboardRef,
-        dir: direction,
         open: open,
         onOpenChange: handleOpenChange,
         content: content,
-        onContentChange: setContent,
-        onRootClose: $epM9y$useCallback(()=>handleOpenChange(false)
+        onContentChange: setContent
+    }, /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuRootProvider, {
+        scope: __scopeMenu,
+        onClose: $epM9y$useCallback(()=>handleOpenChange(false)
         , [
             handleOpenChange
         ]),
+        isUsingKeyboardRef: isUsingKeyboardRef,
+        dir: direction,
         modal: modal
-    }, children));
+    }, children)));
 };
 /*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$d9b273488cd8ce6f, {
     displayName: $6cc32821e9371a1c$var$MENU_NAME
 });
-/* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$SUB_NAME = 'MenuSub';
-const $6cc32821e9371a1c$export$71bdb9d1e2909932 = (props)=>{
-    const { __scopeMenu: __scopeMenu , children: children , open: open = false , onOpenChange: onOpenChange  } = props;
-    const parentMenuContext = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$SUB_NAME, __scopeMenu);
-    const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
-    const [trigger, setTrigger] = $epM9y$useState(null);
-    const [content, setContent] = $epM9y$useState(null);
-    const handleOpenChange = $epM9y$useCallbackRef(onOpenChange); // Prevent the parent menu from reopening with open submenus.
-    $epM9y$useEffect(()=>{
-        if (parentMenuContext.open === false) handleOpenChange(false);
-        return ()=>handleOpenChange(false)
-        ;
-    }, [
-        parentMenuContext.open,
-        handleOpenChange
-    ]);
-    return /*#__PURE__*/ $epM9y$createElement($epM9y$Root, popperScope, /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuProvider, {
-        scope: __scopeMenu,
-        isSubmenu: true,
-        isUsingKeyboardRef: parentMenuContext.isUsingKeyboardRef,
-        dir: parentMenuContext.dir,
-        open: open,
-        onOpenChange: handleOpenChange,
-        content: content,
-        onContentChange: setContent,
-        onRootClose: parentMenuContext.onRootClose,
-        contentId: $epM9y$useId(),
-        trigger: trigger,
-        onTriggerChange: setTrigger,
-        triggerId: $epM9y$useId(),
-        modal: false
-    }, children));
-};
-/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$71bdb9d1e2909932, {
-    displayName: $6cc32821e9371a1c$var$SUB_NAME
-});
 /* -------------------------------------------------------------------------------------------------
  * MenuAnchor
  * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$ANCHOR_NAME = 'MenuAnchor';
@@ -227,34 +161,50 @@ const $6cc32821e9371a1c$export$9fa5ebd18bee4d43 = /*#__PURE__*/ $epM9y$forwardRe
 /*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$9fa5ebd18bee4d43, {
     displayName: $6cc32821e9371a1c$var$ANCHOR_NAME
 });
+/* -------------------------------------------------------------------------------------------------
+ * MenuPortal
+ * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$PORTAL_NAME = 'MenuPortal';
+const [$6cc32821e9371a1c$var$PortalProvider, $6cc32821e9371a1c$var$usePortalContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, {
+    forceMount: undefined
+});
+const $6cc32821e9371a1c$export$793392f970497feb = (props)=>{
+    const { __scopeMenu: __scopeMenu , forceMount: forceMount , children: children , container: container  } = props;
+    const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, __scopeMenu);
+    return /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$PortalProvider, {
+        scope: __scopeMenu,
+        forceMount: forceMount
+    }, /*#__PURE__*/ $epM9y$createElement($epM9y$Presence, {
+        present: forceMount || context.open
+    }, /*#__PURE__*/ $epM9y$createElement($epM9y$Portal, {
+        asChild: true,
+        container: container
+    }, children)));
+};
+/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$793392f970497feb, {
+    displayName: $6cc32821e9371a1c$var$PORTAL_NAME
+});
 /* -------------------------------------------------------------------------------------------------
  * MenuContent
  * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$CONTENT_NAME = 'MenuContent';
 const [$6cc32821e9371a1c$var$MenuContentProvider, $6cc32821e9371a1c$var$useMenuContentContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$CONTENT_NAME);
 const $6cc32821e9371a1c$export$479f0f2f71193efe = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
-    const { forceMount: forceMount , ...contentProps } = props;
+    const portalContext = $6cc32821e9371a1c$var$usePortalContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
+    const { forceMount: forceMount = portalContext.forceMount , ...contentProps } = props;
     const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
+    const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
     return /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$Collection.Provider, {
         scope: props.__scopeMenu
     }, /*#__PURE__*/ $epM9y$createElement($epM9y$Presence, {
         present: forceMount || context.open
     }, /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$Collection.Slot, {
         scope: props.__scopeMenu
-    }, context.isSubmenu ? /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuSubContent, $epM9y$babelruntimehelpersesmextends({}, contentProps, {
+    }, rootContext.modal ? /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuRootContentModal, $epM9y$babelruntimehelpersesmextends({}, contentProps, {
         ref: forwardedRef
-    })) : /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuRootContent, $epM9y$babelruntimehelpersesmextends({}, contentProps, {
+    })) : /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuRootContentNonModal, $epM9y$babelruntimehelpersesmextends({}, contentProps, {
         ref: forwardedRef
     })))));
 });
-/* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$MenuRootContent = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
-    const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
-    return context.modal ? /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuRootContentModal, $epM9y$babelruntimehelpersesmextends({}, props, {
-        ref: forwardedRef
-    })) : /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuRootContentNonModal, $epM9y$babelruntimehelpersesmextends({}, props, {
-        ref: forwardedRef
-    }));
-});
-const $6cc32821e9371a1c$var$MenuRootContentModal = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
+/* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$MenuRootContentModal = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
     const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
     const ref = $epM9y$useRef(null);
     const composedRefs = $epM9y$useComposedRefs(forwardedRef, ref); // Hide everything from ARIA except the `MenuContent`
@@ -287,52 +237,10 @@ const $6cc32821e9371a1c$var$MenuRootContentNonModal = /*#__PURE__*/ $epM9y$forwa
         onDismiss: ()=>context.onOpenChange(false)
     }));
 });
-/* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$MenuSubContent = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
-    const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
-    const ref = $epM9y$useRef(null);
-    const composedRefs = $epM9y$useComposedRefs(forwardedRef, ref);
-    return context.isSubmenu ? /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuContentImpl, $epM9y$babelruntimehelpersesmextends({
-        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: $epM9y$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: $epM9y$composeEventHandlers(props.onEscapeKeyDown, context.onRootClose),
-        onKeyDown: $epM9y$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 = $6cc32821e9371a1c$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 $6cc32821e9371a1c$var$MenuContentImpl = /*#__PURE__*/ $epM9y$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 = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, __scopeMenu);
+    const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$CONTENT_NAME, __scopeMenu);
     const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
     const rovingFocusGroupScope = $6cc32821e9371a1c$var$useRovingFocusGroupScope(__scopeMenu);
     const getItems = $6cc32821e9371a1c$var$useCollection(__scopeMenu);
@@ -345,10 +253,10 @@ const $6cc32821e9371a1c$var$MenuRootContentNonModal = /*#__PURE__*/ $epM9y$forwa
     const pointerGraceIntentRef = $epM9y$useRef(null);
     const pointerDirRef = $epM9y$useRef('right');
     const lastPointerXRef = $epM9y$useRef(0);
-    const PortalWrapper = portalled ? $epM9y$Portal : $epM9y$Fragment;
     const ScrollLockWrapper = disableOutsideScroll ? $epM9y$RemoveScroll : $epM9y$Fragment;
     const scrollLockWrapperProps = disableOutsideScroll ? {
-        allowPinchZoom: allowPinchZoom
+        as: $epM9y$Slot,
+        allowPinchZoom: true
     } : undefined;
     const handleTypeaheadSearch = (key)=>{
         var _items$find, _items$find2;
@@ -386,7 +294,7 @@ const $6cc32821e9371a1c$var$MenuRootContentNonModal = /*#__PURE__*/ $epM9y$forwa
         const isMovingTowards = pointerDirRef.current === ((_pointerGraceIntentRe = pointerGraceIntentRef.current) === null || _pointerGraceIntentRe === void 0 ? void 0 : _pointerGraceIntentRe.side);
         return isMovingTowards && $6cc32821e9371a1c$var$isPointerInGraceArea(event, (_pointerGraceIntentRe2 = pointerGraceIntentRef.current) === null || _pointerGraceIntentRe2 === void 0 ? void 0 : _pointerGraceIntentRe2.area);
     }, []);
-    return /*#__PURE__*/ $epM9y$createElement(PortalWrapper, null, /*#__PURE__*/ $epM9y$createElement(ScrollLockWrapper, scrollLockWrapperProps, /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuContentProvider, {
+    return /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuContentProvider, {
         scope: __scopeMenu,
         searchRef: searchRef,
         onItemEnter: $epM9y$useCallback((event)=>{
@@ -411,7 +319,7 @@ const $6cc32821e9371a1c$var$MenuRootContentNonModal = /*#__PURE__*/ $epM9y$forwa
         onPointerGraceIntentChange: $epM9y$useCallback((intent)=>{
             pointerGraceIntentRef.current = intent;
         }, [])
-    }, /*#__PURE__*/ $epM9y$createElement($epM9y$FocusScope, {
+    }, /*#__PURE__*/ $epM9y$createElement(ScrollLockWrapper, scrollLockWrapperProps, /*#__PURE__*/ $epM9y$createElement($epM9y$FocusScope, {
         asChild: true,
         trapped: trapFocus,
         onMountAutoFocus: $epM9y$composeEventHandlers(onOpenAutoFocus, (event)=>{
@@ -433,20 +341,20 @@ const $6cc32821e9371a1c$var$MenuRootContentNonModal = /*#__PURE__*/ $epM9y$forwa
     }, /*#__PURE__*/ $epM9y$createElement($epM9y$Root1, $epM9y$babelruntimehelpersesmextends({
         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__*/ $epM9y$createElement($epM9y$Content, $epM9y$babelruntimehelpersesmextends({
         role: "menu",
         "aria-orientation": "vertical",
         "data-state": $6cc32821e9371a1c$var$getOpenState(context.open),
-        dir: context.dir
+        dir: rootContext.dir
     }, popperScope, contentProps, {
         ref: composedRefs,
         style: {
@@ -456,7 +364,7 @@ const $6cc32821e9371a1c$var$MenuRootContentNonModal = /*#__PURE__*/ $epM9y$forwa
         onKeyDown: $epM9y$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) {
@@ -492,7 +400,7 @@ const $6cc32821e9371a1c$var$MenuRootContentNonModal = /*#__PURE__*/ $epM9y$forwa
                 lastPointerXRef.current = event.clientX;
             }
         }))
-    }))))))));
+    })))))));
 });
 /*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$479f0f2f71193efe, {
     displayName: $6cc32821e9371a1c$var$CONTENT_NAME
@@ -530,14 +438,14 @@ const $6cc32821e9371a1c$var$ITEM_SELECT = 'menu.itemSelect';
 const $6cc32821e9371a1c$export$2ce376c2cc3355c8 = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
     const { disabled: disabled = false , onSelect: onSelect , ...itemProps } = props;
     const ref = $epM9y$useRef(null);
-    const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$ITEM_NAME, props.__scopeMenu);
+    const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$ITEM_NAME, props.__scopeMenu);
     const contentContext = $6cc32821e9371a1c$var$useMenuContentContext($6cc32821e9371a1c$var$ITEM_NAME, props.__scopeMenu);
     const composedRefs = $epM9y$useComposedRefs(forwardedRef, ref);
     const isPointerDownRef = $epM9y$useRef(false);
     const handleSelect = ()=>{
         const menuItem = ref.current;
         if (!disabled && menuItem) {
-            const itemSelectEvent = new Event($6cc32821e9371a1c$var$ITEM_SELECT, {
+            const itemSelectEvent = new CustomEvent($6cc32821e9371a1c$var$ITEM_SELECT, {
                 bubbles: true,
                 cancelable: true
             });
@@ -545,9 +453,9 @@ const $6cc32821e9371a1c$export$2ce376c2cc3355c8 = /*#__PURE__*/ $epM9y$forwardRe
             , {
                 once: true
             });
-            menuItem.dispatchEvent(itemSelectEvent);
+            $epM9y$dispatchDiscreteCustomEvent(menuItem, itemSelectEvent);
             if (itemSelectEvent.defaultPrevented) isPointerDownRef.current = false;
-            else context.onRootClose();
+            else rootContext.onClose();
         }
     };
     return /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuItemImpl, $epM9y$babelruntimehelpersesmextends({}, itemProps, {
@@ -584,137 +492,13 @@ const $6cc32821e9371a1c$export$2ce376c2cc3355c8 = /*#__PURE__*/ $epM9y$forwardRe
 /*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$2ce376c2cc3355c8, {
     displayName: $6cc32821e9371a1c$var$ITEM_NAME
 });
-/* -------------------------------------------------------------------------------------------------
- * MenuSubTrigger
- * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$SUB_TRIGGER_NAME = 'MenuSubTrigger';
-const $6cc32821e9371a1c$export$5fbbb3ba7297405f = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
-    const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$SUB_TRIGGER_NAME, props.__scopeMenu);
-    const contentContext = $6cc32821e9371a1c$var$useMenuContentContext($6cc32821e9371a1c$var$SUB_TRIGGER_NAME, props.__scopeMenu);
-    const openTimerRef = $epM9y$useRef(null);
-    const { pointerGraceTimerRef: pointerGraceTimerRef , onPointerGraceIntentChange: onPointerGraceIntentChange  } = contentContext;
-    const scope = {
-        __scopeMenu: props.__scopeMenu
-    };
-    const clearOpenTimer = $epM9y$useCallback(()=>{
-        if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
-        openTimerRef.current = null;
-    }, []);
-    $epM9y$useEffect(()=>clearOpenTimer
-    , [
-        clearOpenTimer
-    ]);
-    $epM9y$useEffect(()=>{
-        const pointerGraceTimer = pointerGraceTimerRef.current;
-        return ()=>{
-            window.clearTimeout(pointerGraceTimer);
-            onPointerGraceIntentChange(null);
-        };
-    }, [
-        pointerGraceTimerRef,
-        onPointerGraceIntentChange
-    ]);
-    return context.isSubmenu ? /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$export$9fa5ebd18bee4d43, $epM9y$babelruntimehelpersesmextends({
-        asChild: true
-    }, scope), /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuItemImpl, $epM9y$babelruntimehelpersesmextends({
-        id: context.triggerId,
-        "aria-haspopup": "menu",
-        "aria-expanded": context.open,
-        "aria-controls": context.contentId,
-        "data-state": $6cc32821e9371a1c$var$getOpenState(context.open)
-    }, props, {
-        ref: $epM9y$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: $epM9y$composeEventHandlers(props.onPointerMove, $6cc32821e9371a1c$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: $epM9y$composeEventHandlers(props.onPointerLeave, $6cc32821e9371a1c$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: $epM9y$composeEventHandlers(props.onKeyDown, (event)=>{
-            const isTypingAhead = contentContext.searchRef.current !== '';
-            if (props.disabled || isTypingAhead && event.key === ' ') return;
-            if ($6cc32821e9371a1c$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($6cc32821e9371a1c$export$5fbbb3ba7297405f, {
-    displayName: $6cc32821e9371a1c$var$SUB_TRIGGER_NAME
-});
 /* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$MenuItemImpl = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
     const { __scopeMenu: __scopeMenu , disabled: disabled = false , textValue: textValue , ...itemProps } = props;
     const contentContext = $6cc32821e9371a1c$var$useMenuContentContext($6cc32821e9371a1c$var$ITEM_NAME, __scopeMenu);
     const rovingFocusGroupScope = $6cc32821e9371a1c$var$useRovingFocusGroupScope(__scopeMenu);
     const ref = $epM9y$useRef(null);
-    const composedRefs = $epM9y$useComposedRefs(forwardedRef, ref); // get the item's `.textContent` as default strategy for typeahead `textValue`
+    const composedRefs = $epM9y$useComposedRefs(forwardedRef, ref);
+    const [isFocused, setIsFocused] = $epM9y$useState(false); // get the item's `.textContent` as default strategy for typeahead `textValue`
     const [textContent, setTextContent] = $epM9y$useState('');
     $epM9y$useEffect(()=>{
         const menuItem = ref.current;
@@ -735,6 +519,7 @@ const $6cc32821e9371a1c$export$5fbbb3ba7297405f = /*#__PURE__*/ $epM9y$forwardRe
         focusable: !disabled
     }), /*#__PURE__*/ $epM9y$createElement($epM9y$Primitive.div, $epM9y$babelruntimehelpersesmextends({
         role: "menuitem",
+        "data-highlighted": isFocused ? '' : undefined,
         "aria-disabled": disabled || undefined,
         "data-disabled": disabled ? '' : undefined
     }, itemProps, {
@@ -750,7 +535,11 @@ const $6cc32821e9371a1c$export$5fbbb3ba7297405f = /*#__PURE__*/ $epM9y$forwardRe
             }
         })),
         onPointerLeave: $epM9y$composeEventHandlers(props.onPointerLeave, $6cc32821e9371a1c$var$whenMouse((event)=>contentContext.onItemLeave(event)
-        ))
+        )),
+        onFocus: $epM9y$composeEventHandlers(props.onFocus, ()=>setIsFocused(true)
+        ),
+        onBlur: $epM9y$composeEventHandlers(props.onBlur, ()=>setIsFocused(false)
+        )
     }))));
 });
 /* -------------------------------------------------------------------------------------------------
@@ -871,6 +660,227 @@ const $6cc32821e9371a1c$export$bcdda4773debf5fa = /*#__PURE__*/ $epM9y$forwardRe
 /*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$bcdda4773debf5fa, {
     displayName: $6cc32821e9371a1c$var$ARROW_NAME
 });
+/* -------------------------------------------------------------------------------------------------
+ * MenuSub
+ * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$SUB_NAME = 'MenuSub';
+const [$6cc32821e9371a1c$var$MenuSubProvider, $6cc32821e9371a1c$var$useMenuSubContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$SUB_NAME);
+const $6cc32821e9371a1c$export$71bdb9d1e2909932 = (props)=>{
+    const { __scopeMenu: __scopeMenu , children: children , open: open = false , onOpenChange: onOpenChange  } = props;
+    const parentMenuContext = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$SUB_NAME, __scopeMenu);
+    const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
+    const [trigger, setTrigger] = $epM9y$useState(null);
+    const [content, setContent] = $epM9y$useState(null);
+    const handleOpenChange = $epM9y$useCallbackRef(onOpenChange); // Prevent the parent menu from reopening with open submenus.
+    $epM9y$useEffect(()=>{
+        if (parentMenuContext.open === false) handleOpenChange(false);
+        return ()=>handleOpenChange(false)
+        ;
+    }, [
+        parentMenuContext.open,
+        handleOpenChange
+    ]);
+    return /*#__PURE__*/ $epM9y$createElement($epM9y$Root, popperScope, /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuProvider, {
+        scope: __scopeMenu,
+        open: open,
+        onOpenChange: handleOpenChange,
+        content: content,
+        onContentChange: setContent
+    }, /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuSubProvider, {
+        scope: __scopeMenu,
+        contentId: $epM9y$useId(),
+        triggerId: $epM9y$useId(),
+        trigger: trigger,
+        onTriggerChange: setTrigger
+    }, children)));
+};
+/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$71bdb9d1e2909932, {
+    displayName: $6cc32821e9371a1c$var$SUB_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * MenuSubTrigger
+ * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$SUB_TRIGGER_NAME = 'MenuSubTrigger';
+const $6cc32821e9371a1c$export$5fbbb3ba7297405f = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
+    const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$SUB_TRIGGER_NAME, props.__scopeMenu);
+    const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$SUB_TRIGGER_NAME, props.__scopeMenu);
+    const subContext = $6cc32821e9371a1c$var$useMenuSubContext($6cc32821e9371a1c$var$SUB_TRIGGER_NAME, props.__scopeMenu);
+    const contentContext = $6cc32821e9371a1c$var$useMenuContentContext($6cc32821e9371a1c$var$SUB_TRIGGER_NAME, props.__scopeMenu);
+    const openTimerRef = $epM9y$useRef(null);
+    const { pointerGraceTimerRef: pointerGraceTimerRef , onPointerGraceIntentChange: onPointerGraceIntentChange  } = contentContext;
+    const scope = {
+        __scopeMenu: props.__scopeMenu
+    };
+    const clearOpenTimer = $epM9y$useCallback(()=>{
+        if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
+        openTimerRef.current = null;
+    }, []);
+    $epM9y$useEffect(()=>clearOpenTimer
+    , [
+        clearOpenTimer
+    ]);
+    $epM9y$useEffect(()=>{
+        const pointerGraceTimer = pointerGraceTimerRef.current;
+        return ()=>{
+            window.clearTimeout(pointerGraceTimer);
+            onPointerGraceIntentChange(null);
+        };
+    }, [
+        pointerGraceTimerRef,
+        onPointerGraceIntentChange
+    ]);
+    return /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$export$9fa5ebd18bee4d43, $epM9y$babelruntimehelpersesmextends({
+        asChild: true
+    }, scope), /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuItemImpl, $epM9y$babelruntimehelpersesmextends({
+        id: subContext.triggerId,
+        "aria-haspopup": "menu",
+        "aria-expanded": context.open,
+        "aria-controls": subContext.contentId,
+        "data-state": $6cc32821e9371a1c$var$getOpenState(context.open)
+    }, props, {
+        ref: $epM9y$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: $epM9y$composeEventHandlers(props.onPointerMove, $6cc32821e9371a1c$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: $epM9y$composeEventHandlers(props.onPointerLeave, $6cc32821e9371a1c$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: $epM9y$composeEventHandlers(props.onKeyDown, (event)=>{
+            const isTypingAhead = contentContext.searchRef.current !== '';
+            if (props.disabled || isTypingAhead && event.key === ' ') return;
+            if ($6cc32821e9371a1c$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($6cc32821e9371a1c$export$5fbbb3ba7297405f, {
+    displayName: $6cc32821e9371a1c$var$SUB_TRIGGER_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * MenuSubContent
+ * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$SUB_CONTENT_NAME = 'MenuSubContent';
+const $6cc32821e9371a1c$export$e7142ab31822bde6 = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
+    const portalContext = $6cc32821e9371a1c$var$usePortalContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
+    const { forceMount: forceMount = portalContext.forceMount , ...subContentProps } = props;
+    const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
+    const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
+    const subContext = $6cc32821e9371a1c$var$useMenuSubContext($6cc32821e9371a1c$var$SUB_CONTENT_NAME, props.__scopeMenu);
+    const ref = $epM9y$useRef(null);
+    const composedRefs = $epM9y$useComposedRefs(forwardedRef, ref);
+    return /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$Collection.Provider, {
+        scope: props.__scopeMenu
+    }, /*#__PURE__*/ $epM9y$createElement($epM9y$Presence, {
+        present: forceMount || context.open
+    }, /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$Collection.Slot, {
+        scope: props.__scopeMenu
+    }, /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuContentImpl, $epM9y$babelruntimehelpersesmextends({
+        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: $epM9y$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: $epM9y$composeEventHandlers(props.onEscapeKeyDown, rootContext.onClose),
+        onKeyDown: $epM9y$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 = $6cc32821e9371a1c$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($6cc32821e9371a1c$export$e7142ab31822bde6, {
+    displayName: $6cc32821e9371a1c$var$SUB_CONTENT_NAME
+});
 /* -----------------------------------------------------------------------------------------------*/ function $6cc32821e9371a1c$var$getOpenState(open) {
     return open ? 'open' : 'closed';
 }
@@ -950,9 +960,8 @@ function $6cc32821e9371a1c$var$whenMouse(handler) {
     ;
 }
 const $6cc32821e9371a1c$export$be92b6f5f03c0fe9 = $6cc32821e9371a1c$export$d9b273488cd8ce6f;
-const $6cc32821e9371a1c$export$d7a01e11500dfb6f = $6cc32821e9371a1c$export$71bdb9d1e2909932;
 const $6cc32821e9371a1c$export$b688253958b8dfe7 = $6cc32821e9371a1c$export$9fa5ebd18bee4d43;
-const $6cc32821e9371a1c$export$2ea8a7a591ac5eac = $6cc32821e9371a1c$export$5fbbb3ba7297405f;
+const $6cc32821e9371a1c$export$602eac185826482c = $6cc32821e9371a1c$export$793392f970497feb;
 const $6cc32821e9371a1c$export$7c6e2c02157bb7d2 = $6cc32821e9371a1c$export$479f0f2f71193efe;
 const $6cc32821e9371a1c$export$eb2fcfdbd7ba97d4 = $6cc32821e9371a1c$export$22a631d1f72787bb;
 const $6cc32821e9371a1c$export$b04be29aa201d4f5 = $6cc32821e9371a1c$export$dd37bec0e8a99143;
@@ -963,9 +972,12 @@ const $6cc32821e9371a1c$export$371ab307eab489c0 = $6cc32821e9371a1c$export$69bd2
 const $6cc32821e9371a1c$export$c3468e2714d175fa = $6cc32821e9371a1c$export$a2593e23056970a3;
 const $6cc32821e9371a1c$export$1ff3c3f08ae963c0 = $6cc32821e9371a1c$export$1cec7dcdd713e220;
 const $6cc32821e9371a1c$export$21b07c8f274aebd5 = $6cc32821e9371a1c$export$bcdda4773debf5fa;
+const $6cc32821e9371a1c$export$d7a01e11500dfb6f = $6cc32821e9371a1c$export$71bdb9d1e2909932;
+const $6cc32821e9371a1c$export$2ea8a7a591ac5eac = $6cc32821e9371a1c$export$5fbbb3ba7297405f;
+const $6cc32821e9371a1c$export$6d4de93b380beddf = $6cc32821e9371a1c$export$e7142ab31822bde6;
 
 
 
 
-export {$6cc32821e9371a1c$export$4027731b685e72eb as createMenuScope, $6cc32821e9371a1c$export$d9b273488cd8ce6f as Menu, $6cc32821e9371a1c$export$71bdb9d1e2909932 as MenuSub, $6cc32821e9371a1c$export$9fa5ebd18bee4d43 as MenuAnchor, $6cc32821e9371a1c$export$479f0f2f71193efe as MenuContent, $6cc32821e9371a1c$export$22a631d1f72787bb as MenuGroup, $6cc32821e9371a1c$export$dd37bec0e8a99143 as MenuLabel, $6cc32821e9371a1c$export$2ce376c2cc3355c8 as MenuItem, $6cc32821e9371a1c$export$5fbbb3ba7297405f as MenuSubTrigger, $6cc32821e9371a1c$export$f6f243521332502d as MenuCheckboxItem, $6cc32821e9371a1c$export$ea2200c9eee416b3 as MenuRadioGroup, $6cc32821e9371a1c$export$69bd225e9817f6d0 as MenuRadioItem, $6cc32821e9371a1c$export$a2593e23056970a3 as MenuItemIndicator, $6cc32821e9371a1c$export$1cec7dcdd713e220 as MenuSeparator, $6cc32821e9371a1c$export$bcdda4773debf5fa as MenuArrow, $6cc32821e9371a1c$export$be92b6f5f03c0fe9 as Root, $6cc32821e9371a1c$export$d7a01e11500dfb6f as Sub, $6cc32821e9371a1c$export$b688253958b8dfe7 as Anchor, $6cc32821e9371a1c$export$2ea8a7a591ac5eac as SubTrigger, $6cc32821e9371a1c$export$7c6e2c02157bb7d2 as Content, $6cc32821e9371a1c$export$eb2fcfdbd7ba97d4 as Group, $6cc32821e9371a1c$export$b04be29aa201d4f5 as Label, $6cc32821e9371a1c$export$6d08773d2e66f8f2 as Item, $6cc32821e9371a1c$export$16ce288f89fa631c as CheckboxItem, $6cc32821e9371a1c$export$a98f0dcb43a68a25 as RadioGroup, $6cc32821e9371a1c$export$371ab307eab489c0 as RadioItem, $6cc32821e9371a1c$export$c3468e2714d175fa as ItemIndicator, $6cc32821e9371a1c$export$1ff3c3f08ae963c0 as Separator, $6cc32821e9371a1c$export$21b07c8f274aebd5 as Arrow};
+export {$6cc32821e9371a1c$export$4027731b685e72eb as createMenuScope, $6cc32821e9371a1c$export$d9b273488cd8ce6f as Menu, $6cc32821e9371a1c$export$9fa5ebd18bee4d43 as MenuAnchor, $6cc32821e9371a1c$export$793392f970497feb as MenuPortal, $6cc32821e9371a1c$export$479f0f2f71193efe as MenuContent, $6cc32821e9371a1c$export$22a631d1f72787bb as MenuGroup, $6cc32821e9371a1c$export$dd37bec0e8a99143 as MenuLabel, $6cc32821e9371a1c$export$2ce376c2cc3355c8 as MenuItem, $6cc32821e9371a1c$export$f6f243521332502d as MenuCheckboxItem, $6cc32821e9371a1c$export$ea2200c9eee416b3 as MenuRadioGroup, $6cc32821e9371a1c$export$69bd225e9817f6d0 as MenuRadioItem, $6cc32821e9371a1c$export$a2593e23056970a3 as MenuItemIndicator, $6cc32821e9371a1c$export$1cec7dcdd713e220 as MenuSeparator, $6cc32821e9371a1c$export$bcdda4773debf5fa as MenuArrow, $6cc32821e9371a1c$export$71bdb9d1e2909932 as MenuSub, $6cc32821e9371a1c$export$5fbbb3ba7297405f as MenuSubTrigger, $6cc32821e9371a1c$export$e7142ab31822bde6 as MenuSubContent, $6cc32821e9371a1c$export$be92b6f5f03c0fe9 as Root, $6cc32821e9371a1c$export$b688253958b8dfe7 as Anchor, $6cc32821e9371a1c$export$602eac185826482c as Portal, $6cc32821e9371a1c$export$7c6e2c02157bb7d2 as Content, $6cc32821e9371a1c$export$eb2fcfdbd7ba97d4 as Group, $6cc32821e9371a1c$export$b04be29aa201d4f5 as Label, $6cc32821e9371a1c$export$6d08773d2e66f8f2 as Item, $6cc32821e9371a1c$export$16ce288f89fa631c as CheckboxItem, $6cc32821e9371a1c$export$a98f0dcb43a68a25 as RadioGroup, $6cc32821e9371a1c$export$371ab307eab489c0 as RadioItem, $6cc32821e9371a1c$export$c3468e2714d175fa as ItemIndicator, $6cc32821e9371a1c$export$1ff3c3f08ae963c0 as Separator, $6cc32821e9371a1c$export$21b07c8f274aebd5 as Arrow, $6cc32821e9371a1c$export$d7a01e11500dfb6f as Sub, $6cc32821e9371a1c$export$2ea8a7a591ac5eac as SubTrigger, $6cc32821e9371a1c$export$6d4de93b380beddf as SubContent};
 //# sourceMappingURL=index.module.js.map