@tamagui/menu 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/cjs/createNonNativeMenu.native.js

@@ -4,393 +4,399 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var createNonNativeMenu_exports = {};
 __export(createNonNativeMenu_exports, {
   DROPDOWN_MENU_CONTEXT: () => DROPDOWN_MENU_CONTEXT,
   createNonNativeMenu: () => createNonNativeMenu
 });
 module.exports = __toCommonJS(createNonNativeMenu_exports);
-var import_jsx_runtime = require("react/jsx-runtime"),
-  import_create_menu = require("@tamagui/create-menu"),
-  import_use_controllable_state = require("@tamagui/use-controllable-state"),
-  import_web = require("@tamagui/web"),
-  React = __toESM(require("react"), 1),
-  import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_create_menu = require("@tamagui/create-menu");
+var import_popper = require("@tamagui/popper");
+var import_scroll_view = require("@tamagui/scroll-view");
+var import_use_controllable_state = require("@tamagui/use-controllable-state");
+var import_web = require("@tamagui/web");
+var React = __toESM(require("react"), 1);
+var import_react = require("react");
 function _instanceof(left, right) {
-  return right != null && typeof Symbol < "u" && right[Symbol.hasInstance] ? !!right[Symbol.hasInstance](left) : left instanceof right;
+  if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+    return !!right[Symbol.hasInstance](left);
+  } else {
+    return left instanceof right;
+  }
 }
 var DROPDOWN_MENU_CONTEXT = "MenuContext";
+function useMenuTriggerSetup(open) {
+  var triggerStateSettersRef = React.useRef(/* @__PURE__ */new Map());
+  var activeTriggerIdRef = React.useRef(null);
+  var setActiveTrigger = (0, import_web.useEvent)(function (id) {
+    var prevId = activeTriggerIdRef.current;
+    if (prevId === id) return;
+    if (prevId) {
+      var _triggerStateSettersRef_current_get;
+      (_triggerStateSettersRef_current_get = triggerStateSettersRef.current.get(prevId)) === null || _triggerStateSettersRef_current_get === void 0 ? void 0 : _triggerStateSettersRef_current_get(false);
+    }
+    activeTriggerIdRef.current = id;
+    if (id && open) {
+      var _triggerStateSettersRef_current_get1;
+      (_triggerStateSettersRef_current_get1 = triggerStateSettersRef.current.get(id)) === null || _triggerStateSettersRef_current_get1 === void 0 ? void 0 : _triggerStateSettersRef_current_get1(true);
+    }
+  });
+  var registerTrigger = (0, import_web.useEvent)(function (id, setOpenState) {
+    triggerStateSettersRef.current.set(id, setOpenState);
+    setOpenState(activeTriggerIdRef.current === id && open);
+  });
+  var unregisterTrigger = (0, import_web.useEvent)(function (id) {
+    triggerStateSettersRef.current.delete(id);
+    if (activeTriggerIdRef.current === id) {
+      activeTriggerIdRef.current = null;
+    }
+  });
+  React.useEffect(function () {
+    if (!open) {
+      setActiveTrigger(null);
+      return;
+    }
+    var activeId = activeTriggerIdRef.current;
+    if (activeId) {
+      var _triggerStateSettersRef_current_get;
+      (_triggerStateSettersRef_current_get = triggerStateSettersRef.current.get(activeId)) === null || _triggerStateSettersRef_current_get === void 0 ? void 0 : _triggerStateSettersRef_current_get(true);
+    }
+  }, [open, setActiveTrigger]);
+  return {
+    setActiveTrigger,
+    registerTrigger,
+    unregisterTrigger
+  };
+}
 function createNonNativeMenu(params) {
   var {
-      Menu
-    } = (0, import_create_menu.createBaseMenu)(params),
-    DROPDOWN_MENU_NAME = "Menu",
-    {
-      Provider: MenuProvider,
-      useStyledContext: useMenuContext
-    } = (0, import_web.createStyledContext)(),
-    MenuComp = function (props) {
-      var {
-          scope,
-          children,
-          dir,
-          open: openProp,
-          defaultOpen,
-          onOpenChange,
-          modal = !0,
-          ...rest
-        } = props,
-        triggerRef = React.useRef(null),
-        [open = !1, setOpen] = (0, import_use_controllable_state.useControllableState)({
-          prop: openProp,
-          defaultProp: defaultOpen,
-          onChange: onOpenChange
+    Menu
+  } = (0, import_create_menu.createBaseMenu)(params);
+  var DROPDOWN_MENU_NAME = "Menu";
+  var {
+    Provider: MenuProvider,
+    useStyledContext: useMenuContext
+  } = (0, import_web.createStyledContext)();
+  var MenuComp = function (props) {
+    var {
+      scope,
+      children,
+      dir,
+      open: openProp,
+      defaultOpen,
+      onOpenChange,
+      modal = true,
+      ...rest
+    } = props;
+    var triggerRef = React.useRef(null);
+    var [open = false, setOpen] = (0, import_use_controllable_state.useControllableState)({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
+    });
+    var openRef = React.useRef(open);
+    openRef.current = open;
+    var {
+      setActiveTrigger,
+      registerTrigger,
+      unregisterTrigger
+    } = useMenuTriggerSetup(open);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(MenuProvider, {
+      scope,
+      triggerId: (0, import_react.useId)(),
+      triggerRef,
+      contentId: (0, import_react.useId)(),
+      openRef,
+      onOpenChange: React.useCallback(function (nextOpen) {
+        return setOpen(nextOpen);
+      }, [setOpen]),
+      onOpenToggle: React.useCallback(function () {
+        return setOpen(function (prevOpen) {
+          return !prevOpen;
         });
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(MenuProvider, {
-        scope,
-        triggerId: (0, import_react.useId)(),
-        // TODO
-        triggerRef,
-        contentId: (0, import_react.useId)(),
+      }, [setOpen]),
+      modal,
+      setActiveTrigger,
+      registerTrigger,
+      unregisterTrigger,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu, {
+        scope: scope || DROPDOWN_MENU_CONTEXT,
         open,
         onOpenChange: setOpen,
-        onOpenToggle: React.useCallback(function () {
-          return setOpen(function (prevOpen) {
-            return !prevOpen;
-          });
-        }, [setOpen]),
+        dir,
         modal,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu, {
-          scope: scope || DROPDOWN_MENU_CONTEXT,
-          open,
-          onOpenChange: setOpen,
-          dir,
-          modal,
-          ...rest,
-          children
-        })
-      });
-    };
+        ...rest,
+        children
+      })
+    });
+  };
   MenuComp.displayName = DROPDOWN_MENU_NAME;
-  var TRIGGER_NAME = "MenuTrigger",
-    MenuTriggerFrame = Menu.Anchor,
-    MenuTrigger = import_web.View.styleable(function (props, forwardedRef) {
-      var {
-          scope,
-          asChild,
-          children,
-          disabled = !1,
-          onKeydown,
-          ...triggerProps
-        } = props,
-        context = useMenuContext(scope),
-        Comp = asChild ? import_web.Slot : import_web.View,
-        isTouchDevice = (0, import_web.useIsTouchDevice)(),
-        pressEvent = import_web.isWeb ? isTouchDevice ? "onClick" : "onPointerDown" : "onPress";
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(MenuTriggerFrame, {
-        asChild: !0,
-        componentName: TRIGGER_NAME,
-        scope: scope || DROPDOWN_MENU_CONTEXT,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Comp, {
-          role: "button",
-          id: context.triggerId,
-          "aria-haspopup": "menu",
-          "aria-expanded": context.open,
-          "aria-controls": context.open ? context.contentId : void 0,
-          "data-state": context.open ? "open" : "closed",
-          "data-disabled": disabled ? "" : void 0,
-          "aria-disabled": disabled || void 0,
-          ref: (0, import_web.composeRefs)(forwardedRef, context.triggerRef),
-          [pressEvent]: (0, import_web.composeEventHandlers)(
-          //@ts-ignore
-          props[pressEvent], function (event) {
-            if (!disabled) {
-              if (import_web.isWeb && _instanceof(event, PointerEvent) && event.button !== 0 && event.ctrlKey === !0) return;
-              context.onOpenToggle(), context.open || event.preventDefault();
+  var TRIGGER_NAME = "MenuTrigger";
+  var MenuTriggerFrame = Menu.Anchor;
+  var MenuTrigger = import_web.View.styleable(function (props, forwardedRef) {
+    var {
+      scope,
+      asChild,
+      children,
+      disabled = false,
+      onKeydown,
+      ...triggerProps
+    } = props;
+    var context = useMenuContext(scope);
+    var popperCtx = (0, import_popper.usePopperContextSlow)(scope || DROPDOWN_MENU_CONTEXT);
+    var Comp = asChild ? import_web.Slot : import_web.View;
+    var isTouchDevice = (0, import_web.useIsTouchDevice)();
+    var triggerElRef = React.useRef(null);
+    var triggerId = React.useId();
+    var [triggerOpen, setTriggerOpen] = React.useState(false);
+    var {
+      registerTrigger,
+      unregisterTrigger
+    } = context;
+    React.useEffect(function () {
+      registerTrigger(triggerId, setTriggerOpen);
+      return function () {
+        return unregisterTrigger(triggerId);
+      };
+    }, [registerTrigger, unregisterTrigger, triggerId]);
+    var activateSelf = React.useCallback(function () {
+      context.setActiveTrigger(triggerId);
+      var el = triggerElRef.current;
+      if (el) {
+        context.triggerRef.current = el;
+        if (_instanceof(el, HTMLElement)) {
+          var _popperCtx_refs;
+          (_popperCtx_refs = popperCtx.refs) === null || _popperCtx_refs === void 0 ? void 0 : _popperCtx_refs.setReference(el);
+          requestAnimationFrame(function () {
+            var _popperCtx_update;
+            return (_popperCtx_update = popperCtx.update) === null || _popperCtx_update === void 0 ? void 0 : _popperCtx_update.call(popperCtx);
+          });
+        }
+      }
+    }, [context, triggerId, popperCtx]);
+    var pressEvent = import_web.isWeb ? isTouchDevice ? "onClick" : "onPointerDown" : "onPress";
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(MenuTriggerFrame, {
+      asChild: true,
+      componentName: TRIGGER_NAME,
+      scope: scope || DROPDOWN_MENU_CONTEXT,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Comp, {
+        role: "button",
+        id: context.triggerId,
+        "aria-haspopup": "menu",
+        "aria-expanded": triggerOpen,
+        "aria-controls": triggerOpen ? context.contentId : void 0,
+        "data-state": triggerOpen ? "open" : "closed",
+        "data-disabled": disabled ? "" : void 0,
+        "aria-disabled": disabled || void 0,
+        ref: (0, import_web.composeRefs)(forwardedRef, context.triggerRef, triggerElRef),
+        [pressEvent]: (0, import_web.composeEventHandlers)(
+        //@ts-ignore
+        props[pressEvent], function (event) {
+          if (!disabled) {
+            if (import_web.isWeb && _instanceof(event, PointerEvent) && event.button !== 0 && event.ctrlKey === true) return;
+            if (context.openRef.current) {
+              context.setActiveTrigger(null);
+            } else {
+              activateSelf();
             }
-          }),
-          ...(import_web.isWeb && {
-            onKeyDown: (0, import_web.composeEventHandlers)(onKeydown, function (event) {
-              disabled || (["Enter", " "].includes(event.key) && context.onOpenToggle(), event.key === "ArrowDown" && context.onOpenChange(!0), ["Enter", " ", "ArrowDown"].includes(event.key) && event.preventDefault());
-            })
-          }),
-          ...triggerProps,
-          children
-        })
-      });
-    });
-  MenuTrigger.displayName = TRIGGER_NAME;
-  var PORTAL_NAME = "MenuPortal",
-    MenuPortal = function (props) {
-      var {
-          scope,
-          children,
-          ...portalProps
-        } = props,
-        context = import_web.isAndroid ? useMenuContext(scope) : null,
-        content = import_web.isAndroid ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(MenuProvider, {
-          ...context,
-          children
-        }) : children;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Portal, {
-        scope: scope || DROPDOWN_MENU_CONTEXT,
-        ...portalProps,
-        children: content
-      });
-    };
-  MenuPortal.displayName = PORTAL_NAME;
-  var CONTENT_NAME = "MenuContent",
-    MenuContent = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-      var {
-          scope,
-          ...contentProps
-        } = props,
-        context = useMenuContext(scope),
-        hasInteractedOutsideRef = React.useRef(!1);
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Content, {
-        id: context.contentId,
-        "aria-labelledby": context.triggerId,
-        scope: scope || DROPDOWN_MENU_CONTEXT,
-        ...contentProps,
-        ref: forwardedRef,
-        onCloseAutoFocus: (0, import_web.composeEventHandlers)(props.onCloseAutoFocus, function (event) {
-          var _context_triggerRef_current;
-          hasInteractedOutsideRef.current || (_context_triggerRef_current = context.triggerRef.current) === null || _context_triggerRef_current === void 0 || _context_triggerRef_current.focus(), hasInteractedOutsideRef.current = !1, event.preventDefault();
+            context.onOpenToggle();
+            if (!context.openRef.current) event.preventDefault();
+          }
         }),
-        onInteractOutside: (0, import_web.composeEventHandlers)(props.onInteractOutside, function (event) {
-          var originalEvent = event.detail.originalEvent,
-            ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0,
-            isRightClick = originalEvent.button === 2 || ctrlLeftClick;
-          (!context.modal || isRightClick) && (hasInteractedOutsideRef.current = !0);
+        ...(import_web.isWeb && {
+          onKeyDown: (0, import_web.composeEventHandlers)(onKeydown, function (event) {
+            if (disabled) return;
+            if (["Enter", " "].includes(event.key)) {
+              if (context.openRef.current) {
+                context.setActiveTrigger(null);
+              } else {
+                activateSelf();
+              }
+              context.onOpenToggle();
+            }
+            if (event.key === "ArrowDown") {
+              activateSelf();
+              context.onOpenChange(true);
+            }
+            if (["Enter", " ", "ArrowDown"].includes(event.key)) event.preventDefault();
+          })
         }),
-        ...props.style
-      });
-    });
-  MenuContent.displayName = CONTENT_NAME;
-  var GROUP_NAME = "MenuGroup",
-    MenuGroup = Menu.Group;
-  MenuGroup.displayName = GROUP_NAME;
-  var LABEL_NAME = "MenuLabel",
-    MenuLabel = Menu.Label;
-  MenuLabel.displayName = LABEL_NAME;
-  var ITEM_NAME = "MenuItem",
-    MenuItemFrame = Menu.Item,
-    MenuItem = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-      var {
-        scope,
-        ...itemProps
-      } = props;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(MenuItemFrame, {
-        componentName: ITEM_NAME,
-        scope: scope || DROPDOWN_MENU_CONTEXT,
-        ...itemProps,
-        ref: forwardedRef
-      });
-    });
-  MenuItem.displayName = ITEM_NAME;
-  var ITEM_TITLE_NAME = "MenuItemTitle",
-    MenuItemTitle = Menu.ItemTitle;
-  MenuItemTitle.displayName = ITEM_TITLE_NAME;
-  var ITEM_SUB_TITLE_NAME = "MenuItemSubTitle",
-    MenuItemSubTitle = Menu.ItemSubtitle;
-  MenuItemSubTitle.displayName = ITEM_SUB_TITLE_NAME;
-  var ITEM_IMAGE_NAME = "MenuItemImage",
-    MenuItemImage = Menu.ItemImage;
-  MenuItemImage.displayName = ITEM_IMAGE_NAME;
-  var ITEM_ICON_NAME = "MenuItemIcon",
-    MenuItemIcon = Menu.ItemIcon;
-  MenuItemIcon.displayName = ITEM_ICON_NAME;
-  var CHECKBOX_ITEM_NAME = "MenuCheckboxItem",
-    MenuCheckboxItemFrame = Menu.CheckboxItem,
-    MenuCheckboxItem = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-      var {
-        scope,
-        ...checkboxItemProps
-      } = props;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(MenuCheckboxItemFrame, {
-        componentName: CHECKBOX_ITEM_NAME,
-        scope: scope || DROPDOWN_MENU_CONTEXT,
-        ...checkboxItemProps,
-        ref: forwardedRef
-      });
+        ...triggerProps,
+        children
+      })
     });
-  MenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
-  var RADIO_GROUP_NAME = "MenuRadioGroup",
-    MenuRadioGroup = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-      var {
-        scope,
-        ...radioGroupProps
-      } = props;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.RadioGroup, {
-        scope: scope || DROPDOWN_MENU_CONTEXT,
-        ...radioGroupProps,
-        ref: forwardedRef
-      });
+  });
+  MenuTrigger.displayName = TRIGGER_NAME;
+  var PORTAL_NAME = "MenuPortal";
+  var MenuPortal = function (props) {
+    var {
+      scope,
+      children,
+      ...portalProps
+    } = props;
+    var context = import_web.isAndroid ? useMenuContext(scope) : null;
+    var content = import_web.isAndroid ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(MenuProvider, {
+      ...context,
+      children
+    }) : children;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Portal, {
+      scope: scope || DROPDOWN_MENU_CONTEXT,
+      ...portalProps,
+      children: content
     });
-  MenuRadioGroup.displayName = RADIO_GROUP_NAME;
-  var RADIO_ITEM_NAME = "MenuRadioItem",
-    MenuRadioItemFrame = Menu.RadioItem,
-    MenuRadioItem = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-      var {
-        scope,
-        ...radioItemProps
-      } = props;
-      return (
-        // @ts-ignore explanation: deeply nested types typescript limitation
-        /* @__PURE__ */
-        (0, import_jsx_runtime.jsx)(MenuRadioItemFrame, {
-          componentName: RADIO_ITEM_NAME,
-          scope: scope || DROPDOWN_MENU_CONTEXT,
-          ...radioItemProps,
-          ref: forwardedRef
-        })
-      );
+  };
+  MenuPortal.displayName = PORTAL_NAME;
+  var CONTENT_NAME = "MenuContent";
+  var MenuContent = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+    var {
+      scope,
+      ...contentProps
+    } = props;
+    var context = useMenuContext(scope);
+    var hasInteractedOutsideRef = React.useRef(false);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Content, {
+      id: context.contentId,
+      "aria-labelledby": context.triggerId,
+      scope: scope || DROPDOWN_MENU_CONTEXT,
+      ...contentProps,
+      ref: forwardedRef,
+      onCloseAutoFocus: (0, import_web.composeEventHandlers)(props.onCloseAutoFocus, function (event) {
+        if (!hasInteractedOutsideRef.current) {
+          requestAnimationFrame(function () {
+            var activeEl = document.activeElement;
+            if (!activeEl || activeEl === document.body) {
+              var _context_triggerRef_current;
+              (_context_triggerRef_current = context.triggerRef.current) === null || _context_triggerRef_current === void 0 ? void 0 : _context_triggerRef_current.focus();
+            }
+          });
+        }
+        hasInteractedOutsideRef.current = false;
+        event.preventDefault();
+      }),
+      onInteractOutside: (0, import_web.composeEventHandlers)(props.onInteractOutside, function (event) {
+        var originalEvent = event.detail.originalEvent;
+        var ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+        var isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+        if (!context.modal || isRightClick) hasInteractedOutsideRef.current = true;
+      }),
+      style: import_web.isWeb ? {
+        ...props.style,
+        ...{
+          "--tamagui-menu-content-transform-origin": "var(--tamagui-popper-transform-origin)",
+          "--tamagui-menu-content-available-width": "var(--tamagui-popper-available-width)",
+          "--tamagui-menu-content-available-height": "var(--tamagui-popper-available-height)",
+          "--tamagui-menu-trigger-width": "var(--tamagui-popper-anchor-width)",
+          "--tamagui-menu-trigger-height": "var(--tamagui-popper-anchor-height)"
+        }
+      } : props.style
     });
-  MenuRadioItem.displayName = RADIO_ITEM_NAME;
-  var INDICATOR_NAME = "MenuItemIndicator",
-    MenuItemIndicatorFrame = Menu.ItemIndicator,
-    MenuItemIndicator = MenuItemIndicatorFrame.styleable(function (props, forwardedRef) {
-      var {
-        scope,
-        ...itemIndicatorProps
-      } = props;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(MenuItemIndicatorFrame, {
-        componentName: INDICATOR_NAME,
-        scope: scope || DROPDOWN_MENU_CONTEXT,
-        ...itemIndicatorProps,
-        ref: forwardedRef
-      });
+  });
+  MenuContent.displayName = CONTENT_NAME;
+  var DROPDOWN_MENU_SUB_NAME = "MenuSub";
+  var MenuSub = function (props) {
+    var {
+      scope,
+      children,
+      open: openProp,
+      onOpenChange,
+      defaultOpen,
+      ...rest
+    } = props;
+    var [open = false, setOpen] = (0, import_use_controllable_state.useControllableState)({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
     });
-  MenuItemIndicator.displayName = INDICATOR_NAME;
-  var SEPARATOR_NAME = "MenuSeparator",
-    MenuSeparator = Menu.Separator;
-  MenuSeparator.displayName = SEPARATOR_NAME;
-  var ARROW_NAME = "MenuArrow",
-    MenuArrow = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-      var {
-        scope,
-        ...arrowProps
-      } = props;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Arrow, {
-        componentName: ARROW_NAME,
-        scope: scope || DROPDOWN_MENU_CONTEXT,
-        ...arrowProps,
-        ref: forwardedRef
-      });
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Sub, {
+      scope: scope || DROPDOWN_MENU_CONTEXT,
+      open,
+      onOpenChange: setOpen,
+      ...rest,
+      children
     });
-  MenuArrow.displayName = ARROW_NAME;
-  var DROPDOWN_MENU_SUB_NAME = "MenuSub",
-    MenuSub = function (props) {
-      var {
-          scope,
-          children,
-          open: openProp,
-          onOpenChange,
-          defaultOpen,
-          ...rest
-        } = props,
-        [open = !1, setOpen] = (0, import_use_controllable_state.useControllableState)({
-          prop: openProp,
-          defaultProp: defaultOpen,
-          onChange: onOpenChange
-        });
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Sub, {
-        scope: scope || DROPDOWN_MENU_CONTEXT,
-        open,
-        onOpenChange: setOpen,
-        ...rest,
-        children
-      });
-    };
+  };
   MenuSub.displayName = DROPDOWN_MENU_SUB_NAME;
-  var SUB_TRIGGER_NAME = "MenuSubTrigger",
-    MenuSubTrigger = import_web.View.styleable(function (props, forwardedRef) {
-      var {
-        scope,
-        asChild,
-        ...subTriggerProps
-      } = props;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.SubTrigger, {
-        componentName: SUB_TRIGGER_NAME,
-        scope: scope || DROPDOWN_MENU_CONTEXT,
-        ...subTriggerProps,
-        ref: forwardedRef
-      });
-    });
-  MenuSubTrigger.displayName = SUB_TRIGGER_NAME;
-  var SUB_CONTENT_NAME = "MenuSubContent",
-    MenuSubContent = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-      var {
-        scope,
-        ...subContentProps
-      } = props;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.SubContent, {
-        scope: scope || DROPDOWN_MENU_CONTEXT,
-        ...subContentProps,
-        ref: forwardedRef,
-        style: import_web.isWeb ? {
-          ...props.style,
+  var SUB_CONTENT_NAME = "MenuSubContent";
+  var MenuSubContent = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+    var {
+      scope,
+      ...subContentProps
+    } = props;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.SubContent, {
+      scope: scope || DROPDOWN_MENU_CONTEXT,
+      ...subContentProps,
+      ref: forwardedRef,
+      style: import_web.isWeb ? {
+        ...props.style,
+        ...{
           "--tamagui-menu-content-transform-origin": "var(--tamagui-popper-transform-origin)",
           "--tamagui-menu-content-available-width": "var(--tamagui-popper-available-width)",
           "--tamagui-menu-content-available-height": "var(--tamagui-popper-available-height)",
           "--tamagui-menu-trigger-width": "var(--tamagui-popper-anchor-width)",
           "--tamagui-menu-trigger-height": "var(--tamagui-popper-anchor-height)"
-        } : null
-      });
+        }
+      } : null
     });
+  });
   MenuSubContent.displayName = SUB_CONTENT_NAME;
-  var Root = MenuComp,
-    Trigger = MenuTrigger,
-    Portal = MenuPortal,
-    Content = MenuContent,
-    Group = MenuGroup,
-    Label = MenuLabel,
-    Item = MenuItem,
-    CheckboxItem = MenuCheckboxItem,
-    RadioGroup = MenuRadioGroup,
-    RadioItem = MenuRadioItem,
-    ItemIndicator = MenuItemIndicator,
-    Separator = MenuSeparator,
-    Arrow = MenuArrow,
-    Sub = MenuSub,
-    SubTrigger = MenuSubTrigger,
-    SubContent = MenuSubContent,
-    ItemTitle = MenuItemTitle,
-    ItemSubtitle = MenuItemSubTitle,
-    ItemImage = MenuItemImage,
-    ItemIcon = MenuItemIcon;
+  var MenuScrollView = (0, import_web.styled)(import_scroll_view.ScrollView, {
+    flexShrink: 1,
+    alignSelf: "stretch",
+    showsHorizontalScrollIndicator: false,
+    showsVerticalScrollIndicator: false,
+    "$platform-web": {
+      maxHeight: "var(--tamagui-menu-content-available-height)"
+    }
+  });
+  var Group = Menu.Group;
+  var Label = Menu.Label;
+  var Item = Menu.Item;
+  var CheckboxItem = Menu.CheckboxItem;
+  var RadioGroup = Menu.RadioGroup;
+  var RadioItem = Menu.RadioItem;
+  var ItemIndicator = Menu.ItemIndicator;
+  var Separator = Menu.Separator;
+  var Arrow = Menu.Arrow;
+  var SubTrigger = Menu.SubTrigger;
+  var ItemTitle = Menu.ItemTitle;
+  var ItemSubtitle = Menu.ItemSubtitle;
+  var ItemImage = Menu.ItemImage;
+  var ItemIcon = Menu.ItemIcon;
   return (0, import_web.withStaticProperties)(MenuComp, {
-    Root,
-    Trigger,
-    Portal,
-    Content,
+    Root: MenuComp,
+    Trigger: MenuTrigger,
+    Portal: MenuPortal,
+    Content: MenuContent,
     Group,
     Label,
     Item,
@@ -400,13 +406,14 @@ function createNonNativeMenu(params) {
     ItemIndicator,
     Separator,
     Arrow,
-    Sub,
+    Sub: MenuSub,
     SubTrigger,
-    SubContent,
+    SubContent: MenuSubContent,
     ItemTitle,
     ItemSubtitle,
     ItemImage,
-    ItemIcon
+    ItemIcon,
+    ScrollView: MenuScrollView
   });
 }
 //# sourceMappingURL=createNonNativeMenu.native.js.map