@tamagui/create-menu 2.0.0-rc.3 → 2.0.0-rc.31

package/dist/cjs/MenuPredefined.cjs

@@ -134,7 +134,7 @@ const GROUP_NAME = "MenuGroup",
           // use focusStyle for highlight since hover triggers focus via onPointerMove
           // this ensures a single unified highlight for both mouse and keyboard
           focusStyle: {
-            backgroundColor: "$backgroundFocus"
+            backgroundColor: "$backgroundHover"
           },
           pressStyle: {
             backgroundColor: "$backgroundPress"

package/dist/cjs/MenuPredefined.native.js

@@ -136,7 +136,7 @@ var import_image = require("@tamagui/image"),
           // use focusStyle for highlight since hover triggers focus via onPointerMove
           // this ensures a single unified highlight for both mouse and keyboard
           focusStyle: {
-            backgroundColor: "$backgroundFocus"
+            backgroundColor: "$backgroundHover"
           },
           pressStyle: {
             backgroundColor: "$backgroundPress"

package/dist/cjs/createBaseMenu.cjs

@@ -89,19 +89,29 @@ function createBaseMenu({
   Label: _Label = import_MenuPredefined.MenuPredefined.MenuLabel
 }) {
   const MenuComp = props => {
-      const {
+      const direction = (0, import_use_direction.useDirection)(props.dir),
+        defaultPlacement = direction === "rtl" ? "bottom-end" : "bottom-start",
+        {
           scope = MENU_CONTEXT,
           open = !1,
           children,
           dir,
           onOpenChange,
           modal = !0,
+          allowFlip = {
+            padding: 10
+          },
+          stayInFrame = {
+            padding: 10
+          },
+          placement = defaultPlacement,
+          resize = !0,
+          offset = 10,
           ...rest
         } = props,
         [content, setContent] = React.useState(null),
         isUsingKeyboardRef = React.useRef(!1),
-        handleOpenChange = (0, import_use_callback_ref.useCallbackRef)(onOpenChange),
-        direction = (0, import_use_direction.useDirection)(dir);
+        handleOpenChange = (0, import_use_callback_ref.useCallbackRef)(onOpenChange);
       return import_web.isWeb && React.useEffect(() => {
         const handleKeyDown = () => {
             isUsingKeyboardRef.current = !0, document.addEventListener("pointerdown", handlePointer, {
@@ -126,6 +136,12 @@ function createBaseMenu({
         };
       }, []), /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopperPrimitive.Popper, {
         scope,
+        open,
+        placement,
+        allowFlip,
+        stayInFrame,
+        resize,
+        offset,
         ...rest,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(MenuProvider, {
           scope,
@@ -217,6 +233,7 @@ function createBaseMenu({
         type: "presence",
         present: isPresent,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.Portal, {
+          stackZIndex: !0,
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PortalProvider, {
               scope,
@@ -242,7 +259,9 @@ function createBaseMenu({
       Provider: MenuContentProvider,
       useStyledContext: useMenuContentContext
     } = (0, import_web.createStyledContext)(),
-    MenuContent = React.forwardRef((props, forwardedRef) => {
+    MenuContent = (0, import_web.styled)(PopperPrimitive.PopperContentFrame, {
+      name: CONTENT_NAME
+    }).styleable((props, forwardedRef) => {
       const scope = props.scope || MENU_CONTEXT,
         portalContext = usePortalContext(scope),
         {
@@ -319,6 +338,7 @@ function createBaseMenu({
         getItems = useCollection(scope),
         [currentItemId, setCurrentItemId] = React.useState(null),
         contentRef = React.useRef(null),
+        focusableContentRef = React.useRef(null),
         composedRefs = (0, import_web.useComposedRefs)(forwardedRef, contentRef, context.onContentChange),
         timerRef = React.useRef(0),
         searchRef = React.useRef(""),
@@ -339,9 +359,17 @@ function createBaseMenu({
           })(search), newItem && setTimeout(() => newItem.focus());
         };
       React.useEffect(() => () => clearTimeout(timerRef.current), []), React.useEffect(() => {
+        if (!import_web.isWeb || !context.open) return;
+        const frame = requestAnimationFrame(() => {
+          const el = contentRef.current?.querySelector("[data-tamagui-menu-content]");
+          el && (focusableContentRef.current = el);
+        });
+        return () => cancelAnimationFrame(frame);
+      }, [context.open]), React.useEffect(() => {
         if (!import_web.isWeb || disableDismissOnScroll || !context.open) return;
-        const handleScroll = () => {
-          onDismiss?.();
+        const handleScroll = event => {
+          const target = event.target;
+          contentRef.current?.contains(target) || onDismiss?.();
         };
         return window.addEventListener("scroll", handleScroll, {
           capture: !0,
@@ -359,8 +387,9 @@ function createBaseMenu({
         }, []),
         content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopperPrimitive.PopperContent, {
           role: "menu",
+          tabIndex: -1,
+          unstyled,
           ...(!unstyled && {
-            padding: 4,
             backgroundColor: "$background",
             borderWidth: 1,
             borderColor: "$borderColor",
@@ -413,7 +442,7 @@ function createBaseMenu({
           isPointerMovingToSubmenu(event) && event.preventDefault();
         }, [isPointerMovingToSubmenu]),
         onItemLeave: React.useCallback(event => {
-          isPointerMovingToSubmenu(event) || (contentRef.current?.focus(), setCurrentItemId(null));
+          isPointerMovingToSubmenu(event) || (focusableContentRef.current?.focus(), setCurrentItemId(null));
         }, [isPointerMovingToSubmenu]),
         onTriggerLeave: React.useCallback(event => {
           isPointerMovingToSubmenu(event) && event.preventDefault();
@@ -428,7 +457,9 @@ function createBaseMenu({
             asChild: !1,
             trapped: trapFocus,
             onMountAutoFocus: (0, import_web.composeEventHandlers)(onOpenAutoFocus, event => {
-              event.preventDefault(), document.querySelector("[data-tamagui-menu-content]")?.focus();
+              event.preventDefault(), document.querySelector("[data-tamagui-menu-content]")?.focus({
+                preventScroll: !0
+              });
             }),
             onUnmountAutoFocus: onCloseAutoFocus,
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dismissable.Dismissable, {
@@ -460,10 +491,11 @@ function createBaseMenu({
   MenuContent.displayName = CONTENT_NAME;
   const ITEM_NAME = "MenuItem",
     ITEM_SELECT = "menu.itemSelect",
-    MenuItem = React.forwardRef((props, forwardedRef) => {
+    MenuItem = _Item.styleable((props, forwardedRef) => {
       const {
           disabled = !1,
           onSelect,
+          preventCloseOnSelect,
           children,
           scope = MENU_CONTEXT,
           // filter out native-only props that shouldn't reach the DOM
@@ -492,10 +524,10 @@ function createBaseMenu({
               });
             menuItemEl.addEventListener(ITEM_SELECT, event => onSelect?.(event), {
               once: !0
-            }), (0, import_dismissable.dispatchDiscreteCustomEvent)(menuItemEl, itemSelectEvent), itemSelectEvent.defaultPrevented ? isPointerDownRef.current = !1 : rootContext.onClose();
+            }), (0, import_dismissable.dispatchDiscreteCustomEvent)(menuItemEl, itemSelectEvent), itemSelectEvent.defaultPrevented || preventCloseOnSelect ? isPointerDownRef.current = !1 : rootContext.onClose();
           } else onSelect?.({
             target: menuItem
-          }), isPointerDownRef.current = !1, rootContext.onClose();
+          }), isPointerDownRef.current = !1, preventCloseOnSelect || rootContext.onClose();
         },
         content = typeof children == "string" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_web.Text, {
           children
@@ -546,12 +578,8 @@ function createBaseMenu({
           asChild: !0,
           __scopeRovingFocusGroup: scope,
           focusable: !disabled,
-          ...(!unstyled && {
-            flexDirection: "row",
-            alignItems: "center"
-          }),
-          ...itemProps,
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(_Item, {
+            unstyled,
             componentName: ITEM_NAME,
             role: "menuitem",
             "data-highlighted": isFocused ? "" : void 0,
@@ -624,7 +652,7 @@ function createBaseMenu({
     });
   MenuItemIcon.displayName = ITEM_ICON;
   const CHECKBOX_ITEM_NAME = "MenuCheckboxItem",
-    MenuCheckboxItem = React.forwardRef((props, forwardedRef) => {
+    MenuCheckboxItem = _Item.styleable((props, forwardedRef) => {
       const {
         checked = !1,
         onCheckedChange,
@@ -680,7 +708,7 @@ function createBaseMenu({
     });
   MenuRadioGroup.displayName = RADIO_GROUP_NAME;
   const RADIO_ITEM_NAME = "MenuRadioItem",
-    MenuRadioItem = React.forwardRef((props, forwardedRef) => {
+    MenuRadioItem = _Item.styleable((props, forwardedRef) => {
       const {
           value,
           scope = MENU_CONTEXT,
@@ -738,6 +766,7 @@ function createBaseMenu({
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopperPrimitive.PopperArrow, {
         scope,
         componentName: "PopperArrow",
+        unstyled,
         ...(!unstyled && {
           backgroundColor: "$background"
         }),
@@ -751,24 +780,48 @@ function createBaseMenu({
       useStyledContext: useMenuSubContext
     } = (0, import_web.createStyledContext)(),
     MenuSub = props => {
-      const {
-          scope = MENU_CONTEXT,
+      const isTouchDevice = (0, import_web.useIsTouchDevice)(),
+        {
+          scope = MENU_CONTEXT
+        } = props,
+        rootContext = useMenuRootContext(scope),
+        parentSide = PopperPrimitive.usePopperContext(scope).placement?.split("-")[0],
+        isNestedSubmenu = parentSide === "left" || parentSide === "right",
+        defaultPlacement = isTouchDevice ? "bottom" : isNestedSubmenu ? `${parentSide}-start` : rootContext.dir === "rtl" ? "left-start" : "right-start",
+        {
           children,
           open = !1,
           onOpenChange,
-          allowFlip = {
+          allowFlip: allowFlipProp = {
             padding: 10
           },
           stayInFrame = {
             padding: 10
           },
+          placement = defaultPlacement,
           ...rest
         } = props,
+        allowFlip = React.useMemo(() => {
+          if (!isNestedSubmenu || typeof allowFlipProp == "boolean" || allowFlipProp.fallbackPlacements) return allowFlipProp;
+          const side = placement.split("-")[0],
+            align = placement.split("-")[1] || "start",
+            otherAlign = align === "start" ? "end" : "start";
+          if (side === "left" || side === "right") {
+            const oppositeSide = side === "right" ? "left" : "right";
+            return {
+              ...(typeof allowFlipProp == "object" ? allowFlipProp : {}),
+              fallbackPlacements: [`${side}-${otherAlign}`, `${oppositeSide}-${align}`, `${oppositeSide}-${otherAlign}`]
+            };
+          }
+          return allowFlipProp;
+        }, [isNestedSubmenu, allowFlipProp, placement]),
         parentMenuContext = useMenuContext(scope),
         [trigger, setTrigger] = React.useState(null),
         [content, setContent] = React.useState(null),
         handleOpenChange = (0, import_use_callback_ref.useCallbackRef)(onOpenChange);
       return React.useEffect(() => (parentMenuContext.open === !1 && handleOpenChange(!1), () => handleOpenChange(!1)), [parentMenuContext.open, handleOpenChange]), /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopperPrimitive.Popper, {
+        open,
+        placement,
         allowFlip,
         stayInFrame,
         ...rest,
@@ -804,8 +857,7 @@ function createBaseMenu({
           pointerGraceTimerRef,
           onPointerGraceIntentChange
         } = contentContext,
-        placementSide = popperContext.placement?.split("-")[0],
-        effectiveDir = placementSide === "left" ? "rtl" : placementSide === "right" ? "ltr" : rootContext.dir,
+        effectiveDir = rootContext.dir,
         clearOpenTimer = React.useCallback(() => {
           openTimerRef.current && window.clearTimeout(openTimerRef.current), openTimerRef.current = null;
         }, []);
@@ -874,8 +926,8 @@ function createBaseMenu({
             } else if (import_web.isWeb && subContext.trigger) {
               const triggerRect = subContext.trigger?.getBoundingClientRect();
               if (triggerRect) {
-                const placementSide2 = popperContext.placement?.split("-")[0],
-                  side = placementSide2 === "left" || placementSide2 === "right" ? placementSide2 : rootContext.dir === "rtl" ? "left" : "right",
+                const placementSide = popperContext.placement?.split("-")[0],
+                  side = placementSide === "left" || placementSide === "right" ? placementSide : rootContext.dir === "rtl" ? "left" : "right",
                   rightSide = side === "right",
                   bleed = rightSide ? -5 : 5,
                   nearEdge = rightSide ? triggerRect.right + 4 : triggerRect.left - 4,
@@ -934,7 +986,9 @@ function createBaseMenu({
     });
   MenuSubTrigger.displayName = SUB_TRIGGER_NAME;
   const SUB_CONTENT_NAME = "MenuSubContent",
-    MenuSubContent = React.forwardRef((props, forwardedRef) => {
+    MenuSubContent = (0, import_web.styled)(PopperPrimitive.PopperContentFrame, {
+      name: SUB_CONTENT_NAME
+    }).styleable((props, forwardedRef) => {
       const scope = props.scope || MENU_CONTEXT,
         portalContext = usePortalContext(scope),
         {
@@ -949,7 +1003,7 @@ function createBaseMenu({
         composedRefs = (0, import_web.useComposedRefs)(forwardedRef, ref),
         placementSide = popperContext.placement?.split("-")[0],
         dataSide = placementSide === "left" || placementSide === "right" ? placementSide : rootContext.dir === "rtl" ? "left" : "right",
-        effectiveDir = placementSide === "left" ? "rtl" : placementSide === "right" ? "ltr" : rootContext.dir;
+        effectiveDir = rootContext.dir;
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Collection.Provider, {
         scope,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Collection.Slot, {
@@ -964,7 +1018,13 @@ function createBaseMenu({
             disableOutsideScroll: !1,
             trapFocus: !1,
             onOpenAutoFocus: event => {
-              rootContext.isUsingKeyboardRef.current && document.querySelector("[data-tamagui-menu-content][data-side]")?.focus(), event.preventDefault();
+              if (rootContext.isUsingKeyboardRef.current) {
+                const root = ref.current;
+                (root?.querySelector?.("[data-tamagui-menu-content]") || root)?.focus({
+                  preventScroll: !0
+                });
+              }
+              event.preventDefault();
             },
             onCloseAutoFocus: event => event.preventDefault(),
             onFocusOutside: (0, import_web.composeEventHandlers)(props.onFocusOutside, event => {
@@ -1047,6 +1107,7 @@ function getCheckedState(checked) {
 function focusFirst(candidates, options) {
   const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
   for (const candidate of candidates) if (candidate === PREVIOUSLY_FOCUSED_ELEMENT || (candidate.focus({
+    preventScroll: !0,
     focusVisible: options?.focusVisible
   }), document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT)) return;
 }

package/dist/cjs/createBaseMenu.native.js

@@ -53,6 +53,11 @@ var import_jsx_runtime = require("react/jsx-runtime"),
   React = __toESM(require("react"), 1),
   import_react = require("react"),
   import_MenuPredefined = require("./MenuPredefined.native.js");
+function _type_of(obj) {
+  "@swc/helpers - typeof";
+
+  return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
 function whenMouse(handler) {
   return function (event) {
     return event.pointerType === "mouse" ? handler(event) : void 0;
@@ -94,19 +99,29 @@ function createBaseMenu(param) {
       Label: _Label = import_MenuPredefined.MenuPredefined.MenuLabel
     } = param,
     MenuComp = function (props) {
-      var {
+      var direction = (0, import_use_direction.useDirection)(props.dir),
+        defaultPlacement = direction === "rtl" ? "bottom-end" : "bottom-start",
+        {
           scope = MENU_CONTEXT,
           open = !1,
           children,
           dir,
           onOpenChange,
           modal = !0,
+          allowFlip = {
+            padding: 10
+          },
+          stayInFrame = {
+            padding: 10
+          },
+          placement = defaultPlacement,
+          resize = !0,
+          offset = 10,
           ...rest
         } = props,
         [content, setContent] = React.useState(null),
         isUsingKeyboardRef = React.useRef(!1),
-        handleOpenChange = (0, import_use_callback_ref.useCallbackRef)(onOpenChange),
-        direction = (0, import_use_direction.useDirection)(dir);
+        handleOpenChange = (0, import_use_callback_ref.useCallbackRef)(onOpenChange);
       return import_web.isWeb && React.useEffect(function () {
         var handleKeyDown = function () {
             isUsingKeyboardRef.current = !0, document.addEventListener("pointerdown", handlePointer, {
@@ -133,6 +148,12 @@ function createBaseMenu(param) {
         };
       }, []), /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopperPrimitive.Popper, {
         scope,
+        open,
+        placement,
+        allowFlip,
+        stayInFrame,
+        resize,
+        offset,
         ...rest,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(MenuProvider, {
           scope,
@@ -229,6 +250,7 @@ function createBaseMenu(param) {
         type: "presence",
         present: isPresent,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.Portal, {
+          stackZIndex: !0,
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PortalProvider, {
               scope,
@@ -256,7 +278,10 @@ function createBaseMenu(param) {
       Provider: MenuContentProvider,
       useStyledContext: useMenuContentContext
     } = (0, import_web.createStyledContext)(),
-    MenuContent = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+    MenuContentFrame = (0, import_web.styled)(PopperPrimitive.PopperContentFrame, {
+      name: CONTENT_NAME
+    }),
+    MenuContent = MenuContentFrame.styleable(function (props, forwardedRef) {
       var scope = props.scope || MENU_CONTEXT,
         portalContext = usePortalContext(scope),
         {
@@ -345,6 +370,7 @@ function createBaseMenu(param) {
         getItems = useCollection(scope),
         [currentItemId, setCurrentItemId] = React.useState(null),
         contentRef = React.useRef(null),
+        focusableContentRef = React.useRef(null),
         composedRefs = (0, import_web.useComposedRefs)(forwardedRef, contentRef, context.onContentChange),
         timerRef = React.useRef(0),
         searchRef = React.useRef(""),
@@ -383,9 +409,22 @@ function createBaseMenu(param) {
           return clearTimeout(timerRef.current);
         };
       }, []), React.useEffect(function () {
+        if (!(!import_web.isWeb || !context.open)) {
+          var frame = requestAnimationFrame(function () {
+            var container = contentRef.current,
+              el = container?.querySelector("[data-tamagui-menu-content]");
+            el && (focusableContentRef.current = el);
+          });
+          return function () {
+            return cancelAnimationFrame(frame);
+          };
+        }
+      }, [context.open]), React.useEffect(function () {
         if (!(!import_web.isWeb || disableDismissOnScroll || !context.open)) {
-          var handleScroll = function () {
-            onDismiss?.();
+          var handleScroll = function (event) {
+            var _contentRef_current,
+              target = event.target;
+            !((_contentRef_current = contentRef.current) === null || _contentRef_current === void 0) && _contentRef_current.contains(target) || onDismiss?.();
           };
           return window.addEventListener("scroll", handleScroll, {
             capture: !0,
@@ -406,8 +445,11 @@ function createBaseMenu(param) {
         }, []),
         content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopperPrimitive.PopperContent, {
           role: "menu",
+          // tabIndex allows the content to be focusable so that onItemLeave can
+          // focus the content frame and properly blur the previously focused item
+          tabIndex: -1,
+          unstyled,
           ...(!unstyled && {
-            padding: 4,
             backgroundColor: "$background",
             borderWidth: 1,
             borderColor: "$borderColor",
@@ -472,8 +514,8 @@ function createBaseMenu(param) {
           isPointerMovingToSubmenu(event) && event.preventDefault();
         }, [isPointerMovingToSubmenu]),
         onItemLeave: React.useCallback(function (event) {
-          var _contentRef_current;
-          isPointerMovingToSubmenu(event) || ((_contentRef_current = contentRef.current) === null || _contentRef_current === void 0 || _contentRef_current.focus(), setCurrentItemId(null));
+          var _focusableContentRef_current;
+          isPointerMovingToSubmenu(event) || ((_focusableContentRef_current = focusableContentRef.current) === null || _focusableContentRef_current === void 0 || _focusableContentRef_current.focus(), setCurrentItemId(null));
         }, [isPointerMovingToSubmenu]),
         onTriggerLeave: React.useCallback(function (event) {
           isPointerMovingToSubmenu(event) && event.preventDefault();
@@ -490,7 +532,9 @@ function createBaseMenu(param) {
             onMountAutoFocus: (0, import_web.composeEventHandlers)(onOpenAutoFocus, function (event) {
               event.preventDefault();
               var content2 = document.querySelector("[data-tamagui-menu-content]");
-              content2?.focus();
+              content2?.focus({
+                preventScroll: !0
+              });
             }),
             onUnmountAutoFocus: onCloseAutoFocus,
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dismissable.Dismissable, {
@@ -522,10 +566,11 @@ function createBaseMenu(param) {
   MenuContent.displayName = CONTENT_NAME;
   var ITEM_NAME = "MenuItem",
     ITEM_SELECT = "menu.itemSelect",
-    MenuItem = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+    MenuItem = _Item.styleable(function (props, forwardedRef) {
       var {
           disabled = !1,
           onSelect,
+          preventCloseOnSelect,
           children,
           scope = MENU_CONTEXT,
           // filter out native-only props that shouldn't reach the DOM
@@ -556,10 +601,10 @@ function createBaseMenu(param) {
               return onSelect?.(event);
             }, {
               once: !0
-            }), (0, import_dismissable.dispatchDiscreteCustomEvent)(menuItemEl, itemSelectEvent), itemSelectEvent.defaultPrevented ? isPointerDownRef.current = !1 : rootContext.onClose();
+            }), (0, import_dismissable.dispatchDiscreteCustomEvent)(menuItemEl, itemSelectEvent), itemSelectEvent.defaultPrevented || preventCloseOnSelect ? isPointerDownRef.current = !1 : rootContext.onClose();
           } else onSelect?.({
             target: menuItem
-          }), isPointerDownRef.current = !1, rootContext.onClose();
+          }), isPointerDownRef.current = !1, preventCloseOnSelect || rootContext.onClose();
         },
         content = typeof children == "string" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_web.Text, {
           children
@@ -621,12 +666,8 @@ function createBaseMenu(param) {
           asChild: !0,
           __scopeRovingFocusGroup: scope,
           focusable: !disabled,
-          ...(!unstyled && {
-            flexDirection: "row",
-            alignItems: "center"
-          }),
-          ...itemProps,
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(_Item, {
+            unstyled,
             componentName: ITEM_NAME,
             role: "menuitem",
             "data-highlighted": isFocused ? "" : void 0,
@@ -723,7 +764,7 @@ function createBaseMenu(param) {
     });
   MenuItemIcon.displayName = ITEM_ICON;
   var CHECKBOX_ITEM_NAME = "MenuCheckboxItem",
-    MenuCheckboxItem = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+    MenuCheckboxItem = _Item.styleable(function (props, forwardedRef) {
       var {
         checked = !1,
         onCheckedChange,
@@ -781,7 +822,7 @@ function createBaseMenu(param) {
     });
   MenuRadioGroup.displayName = RADIO_GROUP_NAME;
   var RADIO_ITEM_NAME = "MenuRadioItem",
-    MenuRadioItem = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+    MenuRadioItem = _Item.styleable(function (props, forwardedRef) {
       var {
           value,
           scope = MENU_CONTEXT,
@@ -842,6 +883,7 @@ function createBaseMenu(param) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopperPrimitive.PopperArrow, {
         scope,
         componentName: "PopperArrow",
+        unstyled,
         ...(!unstyled && {
           backgroundColor: "$background"
         }),
@@ -855,19 +897,43 @@ function createBaseMenu(param) {
       useStyledContext: useMenuSubContext
     } = (0, import_web.createStyledContext)(),
     MenuSub = function (props) {
-      var {
-          scope = MENU_CONTEXT,
+      var _parentPopperContext_placement,
+        isTouchDevice = (0, import_web.useIsTouchDevice)(),
+        {
+          scope = MENU_CONTEXT
+        } = props,
+        rootContext = useMenuRootContext(scope),
+        parentPopperContext = PopperPrimitive.usePopperContext(scope),
+        parentSide = (_parentPopperContext_placement = parentPopperContext.placement) === null || _parentPopperContext_placement === void 0 ? void 0 : _parentPopperContext_placement.split("-")[0],
+        isNestedSubmenu = parentSide === "left" || parentSide === "right",
+        defaultPlacement = isTouchDevice ? "bottom" : isNestedSubmenu ? `${parentSide}-start` : rootContext.dir === "rtl" ? "left-start" : "right-start",
+        {
           children,
           open = !1,
           onOpenChange,
-          allowFlip = {
+          allowFlip: allowFlipProp = {
             padding: 10
           },
           stayInFrame = {
             padding: 10
           },
+          placement = defaultPlacement,
           ...rest
         } = props,
+        allowFlip = React.useMemo(function () {
+          if (!isNestedSubmenu || typeof allowFlipProp == "boolean" || allowFlipProp.fallbackPlacements) return allowFlipProp;
+          var side = placement.split("-")[0],
+            align = placement.split("-")[1] || "start",
+            otherAlign = align === "start" ? "end" : "start";
+          if (side === "left" || side === "right") {
+            var oppositeSide = side === "right" ? "left" : "right";
+            return {
+              ...((typeof allowFlipProp > "u" ? "undefined" : _type_of(allowFlipProp)) === "object" ? allowFlipProp : {}),
+              fallbackPlacements: [`${side}-${otherAlign}`, `${oppositeSide}-${align}`, `${oppositeSide}-${otherAlign}`]
+            };
+          }
+          return allowFlipProp;
+        }, [isNestedSubmenu, allowFlipProp, placement]),
         parentMenuContext = useMenuContext(scope),
         [trigger, setTrigger] = React.useState(null),
         [content, setContent] = React.useState(null),
@@ -877,6 +943,8 @@ function createBaseMenu(param) {
           return handleOpenChange(!1);
         };
       }, [parentMenuContext.open, handleOpenChange]), /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopperPrimitive.Popper, {
+        open,
+        placement,
         allowFlip,
         stayInFrame,
         ...rest,
@@ -901,8 +969,7 @@ function createBaseMenu(param) {
   MenuSub.displayName = SUB_NAME;
   var SUB_TRIGGER_NAME = "MenuSubTrigger",
     MenuSubTrigger = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-      var _popperContext_placement,
-        scope = props.scope || MENU_CONTEXT,
+      var scope = props.scope || MENU_CONTEXT,
         context = useMenuContext(scope),
         rootContext = useMenuRootContext(scope),
         subContext = useMenuSubContext(scope),
@@ -913,8 +980,7 @@ function createBaseMenu(param) {
           pointerGraceTimerRef,
           onPointerGraceIntentChange
         } = contentContext,
-        placementSide = (_popperContext_placement = popperContext.placement) === null || _popperContext_placement === void 0 ? void 0 : _popperContext_placement.split("-")[0],
-        effectiveDir = placementSide === "left" ? "rtl" : placementSide === "right" ? "ltr" : rootContext.dir,
+        effectiveDir = rootContext.dir,
         clearOpenTimer = React.useCallback(function () {
           openTimerRef.current && window.clearTimeout(openTimerRef.current), openTimerRef.current = null;
         }, []);
@@ -995,9 +1061,9 @@ function createBaseMenu(param) {
               var triggerEl = subContext.trigger,
                 triggerRect = triggerEl?.getBoundingClientRect();
               if (triggerRect) {
-                var _popperContext_placement2,
-                  placementSide2 = (_popperContext_placement2 = popperContext.placement) === null || _popperContext_placement2 === void 0 ? void 0 : _popperContext_placement2.split("-")[0],
-                  side1 = placementSide2 === "left" || placementSide2 === "right" ? placementSide2 : rootContext.dir === "rtl" ? "left" : "right",
+                var _popperContext_placement,
+                  placementSide = (_popperContext_placement = popperContext.placement) === null || _popperContext_placement === void 0 ? void 0 : _popperContext_placement.split("-")[0],
+                  side1 = placementSide === "left" || placementSide === "right" ? placementSide : rootContext.dir === "rtl" ? "left" : "right",
                   rightSide1 = side1 === "right",
                   bleed1 = rightSide1 ? -5 : 5,
                   nearEdge = rightSide1 ? triggerRect.right + 4 : triggerRect.left - 4,
@@ -1064,7 +1130,10 @@ function createBaseMenu(param) {
     });
   MenuSubTrigger.displayName = SUB_TRIGGER_NAME;
   var SUB_CONTENT_NAME = "MenuSubContent",
-    MenuSubContent = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+    MenuSubContentFrame = (0, import_web.styled)(PopperPrimitive.PopperContentFrame, {
+      name: SUB_CONTENT_NAME
+    }),
+    MenuSubContent = MenuSubContentFrame.styleable(function (props, forwardedRef) {
       var _popperContext_placement,
         scope = props.scope || MENU_CONTEXT,
         portalContext = usePortalContext(scope),
@@ -1080,7 +1149,7 @@ function createBaseMenu(param) {
         composedRefs = (0, import_web.useComposedRefs)(forwardedRef, ref),
         placementSide = (_popperContext_placement = popperContext.placement) === null || _popperContext_placement === void 0 ? void 0 : _popperContext_placement.split("-")[0],
         dataSide = placementSide === "left" || placementSide === "right" ? placementSide : rootContext.dir === "rtl" ? "left" : "right",
-        effectiveDir = placementSide === "left" ? "rtl" : placementSide === "right" ? "ltr" : rootContext.dir;
+        effectiveDir = rootContext.dir;
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Collection.Provider, {
         scope,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Collection.Slot, {
@@ -1096,8 +1165,13 @@ function createBaseMenu(param) {
             trapFocus: !1,
             onOpenAutoFocus: function (event) {
               if (rootContext.isUsingKeyboardRef.current) {
-                var content = document.querySelector("[data-tamagui-menu-content][data-side]");
-                content?.focus();
+                var _root_querySelector,
+                  _this,
+                  root = ref.current,
+                  content = root == null || (_root_querySelector = root.querySelector) === null || _root_querySelector === void 0 ? void 0 : _root_querySelector.call(root, "[data-tamagui-menu-content]");
+                (_this = content || root) === null || _this === void 0 || _this.focus({
+                  preventScroll: !0
+                });
               }
               event.preventDefault();
             },
@@ -1212,6 +1286,7 @@ function focusFirst(candidates, options) {
     for (var _iterator = candidates[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
       var candidate = _step.value;
       if (candidate === PREVIOUSLY_FOCUSED_ELEMENT || (candidate.focus({
+        preventScroll: !0,
         focusVisible: options?.focusVisible
       }), document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT)) return;
     }