@radix-ui/react-menu 0.1.7-rc.21 → 0.1.7-rc.22

package/dist/index.js

@@ -44,23 +44,22 @@ 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, "MenuSub", () => $213e4d2df823067d$export$71bdb9d1e2909932);
+$parcel$export($213e4d2df823067d$exports, "MenuSubTrigger", () => $213e4d2df823067d$export$5fbbb3ba7297405f);
+$parcel$export($213e4d2df823067d$exports, "MenuSubContent", () => $213e4d2df823067d$export$e7142ab31822bde6);
 $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);
@@ -71,6 +70,9 @@ $parcel$export($213e4d2df823067d$exports, "RadioItem", () => $213e4d2df823067d$e
 $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($213e4d2df823067d$exports, "Sub", () => $213e4d2df823067d$export$d7a01e11500dfb6f);
+$parcel$export($213e4d2df823067d$exports, "SubTrigger", () => $213e4d2df823067d$export$2ea8a7a591ac5eac);
+$parcel$export($213e4d2df823067d$exports, "SubContent", () => $213e4d2df823067d$export$6d4de93b380beddf);
 
 
 
@@ -140,6 +142,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 +183,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';
@@ -253,27 +221,20 @@ const [$213e4d2df823067d$var$MenuContentProvider, $213e4d2df823067d$var$useMenuC
 const $213e4d2df823067d$export$479f0f2f71193efe = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
     const { forceMount: 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 +267,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 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);
@@ -452,20 +371,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: {
@@ -549,7 +468,7 @@ 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);
@@ -566,7 +485,7 @@ const $213e4d2df823067d$export$2ce376c2cc3355c8 = /*#__PURE__*/ $cnSS2$react.for
             });
             $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,131 +522,6 @@ 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);
@@ -896,6 +690,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 { forceMount: 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',
+        portalled: true,
+        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';
 }
@@ -975,9 +990,7 @@ 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$7c6e2c02157bb7d2 = $213e4d2df823067d$export$479f0f2f71193efe;
 const $213e4d2df823067d$export$eb2fcfdbd7ba97d4 = $213e4d2df823067d$export$22a631d1f72787bb;
 const $213e4d2df823067d$export$b04be29aa201d4f5 = $213e4d2df823067d$export$dd37bec0e8a99143;
@@ -988,6 +1001,9 @@ 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);