@tamagui/menu 1.138.5 → 1.138.6

package/dist/esm/createNonNativeMenu.js

@@ -0,0 +1,324 @@
+import { createBaseMenu } from "@tamagui/create-menu";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import {
+  composeEventHandlers,
+  composeRefs,
+  createStyledContext,
+  isAndroid,
+  isWeb,
+  Slot,
+  View,
+  withStaticProperties
+} from "@tamagui/web";
+import * as React from "react";
+import { useId } from "react";
+import { jsx } from "react/jsx-runtime";
+const DROPDOWN_MENU_CONTEXT = "MenuContext";
+function createNonNativeMenu(params) {
+  const { Menu } = createBaseMenu(params), DROPDOWN_MENU_NAME = "Menu", { Provider: MenuProvider, useStyledContext: useMenuContext } = createStyledContext(), MenuComp = (props) => {
+    const {
+      scope,
+      children,
+      dir,
+      open: openProp,
+      defaultOpen,
+      onOpenChange,
+      modal = !0,
+      ...rest
+    } = props, triggerRef = React.useRef(null), [open = !1, setOpen] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
+    });
+    return /* @__PURE__ */ jsx(
+      MenuProvider,
+      {
+        scope,
+        triggerId: useId(),
+        triggerRef,
+        contentId: useId(),
+        open,
+        onOpenChange: setOpen,
+        onOpenToggle: React.useCallback(
+          () => setOpen((prevOpen) => !prevOpen),
+          [setOpen]
+        ),
+        modal,
+        children: /* @__PURE__ */ jsx(
+          Menu,
+          {
+            scope: scope || DROPDOWN_MENU_CONTEXT,
+            open,
+            onOpenChange: setOpen,
+            dir,
+            modal,
+            ...rest,
+            children
+          }
+        )
+      }
+    );
+  };
+  MenuComp.displayName = DROPDOWN_MENU_NAME;
+  const TRIGGER_NAME = "MenuTrigger", MenuTriggerFrame = Menu.Anchor, MenuTrigger = View.styleable(
+    (props, forwardedRef) => {
+      const {
+        scope,
+        asChild,
+        children,
+        disabled = !1,
+        onKeydown,
+        ...triggerProps
+      } = props, context = useMenuContext(scope);
+      return /* @__PURE__ */ jsx(
+        MenuTriggerFrame,
+        {
+          asChild: !0,
+          componentName: TRIGGER_NAME,
+          scope: scope || DROPDOWN_MENU_CONTEXT,
+          children: /* @__PURE__ */ jsx(
+            asChild ? Slot : View,
+            {
+              tag: "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,
+              disabled,
+              ref: composeRefs(forwardedRef, context.triggerRef),
+              [isWeb ? "onPointerDown" : "onPress"]: composeEventHandlers(
+                //@ts-ignore
+                props[isWeb ? "onPointerDown" : "onPress"],
+                (event) => {
+                  if (!disabled) {
+                    if (isWeb && event instanceof PointerEvent && event.button !== 0 && event.ctrlKey === !0)
+                      return;
+                    context.onOpenToggle(), context.open || event.preventDefault();
+                  }
+                }
+              ),
+              ...isWeb && {
+                onKeyDown: composeEventHandlers(onKeydown, (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;
+  const PORTAL_NAME = "MenuPortal", MenuPortal = (props) => {
+    const { scope, children, ...portalProps } = props, context = isAndroid ? useMenuContext(scope) : null, content = isAndroid ? /* @__PURE__ */ jsx(MenuProvider, { ...context, children }) : children;
+    return /* @__PURE__ */ jsx(Menu.Portal, { scope: scope || DROPDOWN_MENU_CONTEXT, ...portalProps, children: content });
+  };
+  MenuPortal.displayName = PORTAL_NAME;
+  const CONTENT_NAME = "MenuContent", MenuContent = React.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, ...contentProps } = props, context = useMenuContext(scope), hasInteractedOutsideRef = React.useRef(!1);
+      return /* @__PURE__ */ jsx(
+        Menu.Content,
+        {
+          id: context.contentId,
+          "aria-labelledby": context.triggerId,
+          scope: scope || DROPDOWN_MENU_CONTEXT,
+          ...contentProps,
+          ref: forwardedRef,
+          onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
+            hasInteractedOutsideRef.current || context.triggerRef.current?.focus(), hasInteractedOutsideRef.current = !1, event.preventDefault();
+          }),
+          onInteractOutside: composeEventHandlers(props.onInteractOutside, (event) => {
+            const originalEvent = event.detail.originalEvent, ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0, isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+            (!context.modal || isRightClick) && (hasInteractedOutsideRef.current = !0);
+          }),
+          ...props.style
+        }
+      );
+    }
+  );
+  MenuContent.displayName = CONTENT_NAME;
+  const GROUP_NAME = "MenuGroup", MenuGroup = Menu.Group;
+  MenuGroup.displayName = GROUP_NAME;
+  const LABEL_NAME = "MenuLabel", MenuLabel = Menu.Label;
+  MenuLabel.displayName = LABEL_NAME;
+  const ITEM_NAME = "MenuItem", MenuItemFrame = Menu.Item, MenuItem = React.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, ...itemProps } = props;
+      return /* @__PURE__ */ jsx(
+        MenuItemFrame,
+        {
+          componentName: ITEM_NAME,
+          scope: scope || DROPDOWN_MENU_CONTEXT,
+          ...itemProps,
+          ref: forwardedRef
+        }
+      );
+    }
+  );
+  MenuItem.displayName = ITEM_NAME;
+  const ITEM_TITLE_NAME = "MenuItemTitle", MenuItemTitle = Menu.ItemTitle;
+  MenuItemTitle.displayName = ITEM_TITLE_NAME;
+  const ITEM_SUB_TITLE_NAME = "MenuItemSubTitle", MenuItemSubTitle = Menu.ItemSubtitle;
+  MenuItemSubTitle.displayName = ITEM_SUB_TITLE_NAME;
+  const ITEM_IMAGE_NAME = "MenuItemImage", MenuItemImage = Menu.ItemImage;
+  MenuItemImage.displayName = ITEM_IMAGE_NAME;
+  const ITEM_ICON_NAME = "MenuItemIcon", MenuItemIcon = Menu.ItemIcon;
+  MenuItemIcon.displayName = ITEM_ICON_NAME;
+  const CHECKBOX_ITEM_NAME = "MenuCheckboxItem", MenuCheckboxItemFrame = Menu.CheckboxItem, MenuCheckboxItem = React.forwardRef((props, forwardedRef) => {
+    const { scope, ...checkboxItemProps } = props;
+    return /* @__PURE__ */ jsx(
+      MenuCheckboxItemFrame,
+      {
+        componentName: CHECKBOX_ITEM_NAME,
+        scope: scope || DROPDOWN_MENU_CONTEXT,
+        ...checkboxItemProps,
+        ref: forwardedRef
+      }
+    );
+  });
+  MenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
+  const RADIO_GROUP_NAME = "MenuRadioGroup", MenuRadioGroup = React.forwardRef((props, forwardedRef) => {
+    const { scope, ...radioGroupProps } = props;
+    return /* @__PURE__ */ jsx(
+      Menu.RadioGroup,
+      {
+        scope: scope || DROPDOWN_MENU_CONTEXT,
+        ...radioGroupProps,
+        ref: forwardedRef
+      }
+    );
+  });
+  MenuRadioGroup.displayName = RADIO_GROUP_NAME;
+  const RADIO_ITEM_NAME = "MenuRadioItem", MenuRadioItemFrame = Menu.RadioItem, MenuRadioItem = React.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, ...radioItemProps } = props;
+      return (
+        // @ts-ignore explanation: deeply nested types typescript limitation
+        /* @__PURE__ */ jsx(
+          MenuRadioItemFrame,
+          {
+            componentName: RADIO_ITEM_NAME,
+            scope: scope || DROPDOWN_MENU_CONTEXT,
+            ...radioItemProps,
+            ref: forwardedRef
+          }
+        )
+      );
+    }
+  );
+  MenuRadioItem.displayName = RADIO_ITEM_NAME;
+  const INDICATOR_NAME = "MenuItemIndicator", MenuItemIndicatorFrame = Menu.ItemIndicator, MenuItemIndicator = MenuItemIndicatorFrame.styleable((props, forwardedRef) => {
+    const { scope, ...itemIndicatorProps } = props;
+    return /* @__PURE__ */ jsx(
+      MenuItemIndicatorFrame,
+      {
+        componentName: INDICATOR_NAME,
+        scope: scope || DROPDOWN_MENU_CONTEXT,
+        ...itemIndicatorProps,
+        ref: forwardedRef
+      }
+    );
+  });
+  MenuItemIndicator.displayName = INDICATOR_NAME;
+  const SEPARATOR_NAME = "MenuSeparator", MenuSeparator = Menu.Separator;
+  MenuSeparator.displayName = SEPARATOR_NAME;
+  const ARROW_NAME = "MenuArrow", MenuArrow = React.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, ...arrowProps } = props;
+      return /* @__PURE__ */ jsx(
+        Menu.Arrow,
+        {
+          componentName: ARROW_NAME,
+          scope: scope || DROPDOWN_MENU_CONTEXT,
+          ...arrowProps,
+          ref: forwardedRef
+        }
+      );
+    }
+  );
+  MenuArrow.displayName = ARROW_NAME;
+  const DROPDOWN_MENU_SUB_NAME = "MenuSub", MenuSub = (props) => {
+    const { scope, children, open: openProp, onOpenChange, defaultOpen, ...rest } = props, [open = !1, setOpen] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
+    });
+    return /* @__PURE__ */ jsx(
+      Menu.Sub,
+      {
+        scope: scope || DROPDOWN_MENU_CONTEXT,
+        open,
+        onOpenChange: setOpen,
+        ...rest,
+        children
+      }
+    );
+  };
+  MenuSub.displayName = DROPDOWN_MENU_SUB_NAME;
+  const SUB_TRIGGER_NAME = "MenuSubTrigger", MenuSubTrigger = View.styleable(
+    (props, forwardedRef) => {
+      const { scope, asChild, ...subTriggerProps } = props;
+      return /* @__PURE__ */ jsx(
+        Menu.SubTrigger,
+        {
+          componentName: SUB_TRIGGER_NAME,
+          scope: scope || DROPDOWN_MENU_CONTEXT,
+          ...subTriggerProps,
+          ref: forwardedRef
+        }
+      );
+    }
+  );
+  MenuSubTrigger.displayName = SUB_TRIGGER_NAME;
+  const SUB_CONTENT_NAME = "MenuSubContent", MenuSubContent = React.forwardRef((props, forwardedRef) => {
+    const { scope, ...subContentProps } = props;
+    return /* @__PURE__ */ jsx(
+      Menu.SubContent,
+      {
+        scope: scope || DROPDOWN_MENU_CONTEXT,
+        ...subContentProps,
+        ref: forwardedRef,
+        style: 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
+      }
+    );
+  });
+  return MenuSubContent.displayName = SUB_CONTENT_NAME, withStaticProperties(MenuComp, {
+    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
+  });
+}
+export {
+  DROPDOWN_MENU_CONTEXT,
+  createNonNativeMenu
+};
+//# sourceMappingURL=createNonNativeMenu.js.map

package/dist/esm/createNonNativeMenu.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/createNonNativeMenu.tsx"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/createNonNativeMenu.mjs

@@ -0,0 +1,341 @@
+import { createBaseMenu } from "@tamagui/create-menu";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import { composeEventHandlers, composeRefs, createStyledContext, isAndroid, isWeb, Slot, View, withStaticProperties } from "@tamagui/web";
+import * as React from "react";
+import { useId } from "react";
+import { jsx } from "react/jsx-runtime";
+const DROPDOWN_MENU_CONTEXT = "MenuContext";
+function createNonNativeMenu(params) {
+  const {
+      Menu
+    } = createBaseMenu(params),
+    DROPDOWN_MENU_NAME = "Menu",
+    {
+      Provider: MenuProvider,
+      useStyledContext: useMenuContext
+    } = createStyledContext(),
+    MenuComp = props => {
+      const {
+          scope,
+          children,
+          dir,
+          open: openProp,
+          defaultOpen,
+          onOpenChange,
+          modal = !0,
+          ...rest
+        } = props,
+        triggerRef = React.useRef(null),
+        [open = !1, setOpen] = useControllableState({
+          prop: openProp,
+          defaultProp: defaultOpen,
+          onChange: onOpenChange
+        });
+      return /* @__PURE__ */jsx(MenuProvider, {
+        scope,
+        triggerId: useId(),
+        triggerRef,
+        contentId: useId(),
+        open,
+        onOpenChange: setOpen,
+        onOpenToggle: React.useCallback(() => setOpen(prevOpen => !prevOpen), [setOpen]),
+        modal,
+        children: /* @__PURE__ */jsx(Menu, {
+          scope: scope || DROPDOWN_MENU_CONTEXT,
+          open,
+          onOpenChange: setOpen,
+          dir,
+          modal,
+          ...rest,
+          children
+        })
+      });
+    };
+  MenuComp.displayName = DROPDOWN_MENU_NAME;
+  const TRIGGER_NAME = "MenuTrigger",
+    MenuTriggerFrame = Menu.Anchor,
+    MenuTrigger = View.styleable((props, forwardedRef) => {
+      const {
+          scope,
+          asChild,
+          children,
+          disabled = !1,
+          onKeydown,
+          ...triggerProps
+        } = props,
+        context = useMenuContext(scope);
+      return /* @__PURE__ */jsx(MenuTriggerFrame, {
+        asChild: !0,
+        componentName: TRIGGER_NAME,
+        scope: scope || DROPDOWN_MENU_CONTEXT,
+        children: /* @__PURE__ */jsx(asChild ? Slot : View, {
+          tag: "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,
+          disabled,
+          ref: composeRefs(forwardedRef, context.triggerRef),
+          [isWeb ? "onPointerDown" : "onPress"]: composeEventHandlers(
+          //@ts-ignore
+          props[isWeb ? "onPointerDown" : "onPress"], event => {
+            if (!disabled) {
+              if (isWeb && event instanceof PointerEvent && event.button !== 0 && event.ctrlKey === !0) return;
+              context.onOpenToggle(), context.open || event.preventDefault();
+            }
+          }),
+          ...(isWeb && {
+            onKeyDown: composeEventHandlers(onKeydown, 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;
+  const PORTAL_NAME = "MenuPortal",
+    MenuPortal = props => {
+      const {
+          scope,
+          children,
+          ...portalProps
+        } = props,
+        context = isAndroid ? useMenuContext(scope) : null,
+        content = isAndroid ? /* @__PURE__ */jsx(MenuProvider, {
+          ...context,
+          children
+        }) : children;
+      return /* @__PURE__ */jsx(Menu.Portal, {
+        scope: scope || DROPDOWN_MENU_CONTEXT,
+        ...portalProps,
+        children: content
+      });
+    };
+  MenuPortal.displayName = PORTAL_NAME;
+  const CONTENT_NAME = "MenuContent",
+    MenuContent = React.forwardRef((props, forwardedRef) => {
+      const {
+          scope,
+          ...contentProps
+        } = props,
+        context = useMenuContext(scope),
+        hasInteractedOutsideRef = React.useRef(!1);
+      return /* @__PURE__ */jsx(Menu.Content, {
+        id: context.contentId,
+        "aria-labelledby": context.triggerId,
+        scope: scope || DROPDOWN_MENU_CONTEXT,
+        ...contentProps,
+        ref: forwardedRef,
+        onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, event => {
+          hasInteractedOutsideRef.current || context.triggerRef.current?.focus(), hasInteractedOutsideRef.current = !1, event.preventDefault();
+        }),
+        onInteractOutside: composeEventHandlers(props.onInteractOutside, event => {
+          const originalEvent = event.detail.originalEvent,
+            ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0,
+            isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+          (!context.modal || isRightClick) && (hasInteractedOutsideRef.current = !0);
+        }),
+        ...props.style
+      });
+    });
+  MenuContent.displayName = CONTENT_NAME;
+  const GROUP_NAME = "MenuGroup",
+    MenuGroup = Menu.Group;
+  MenuGroup.displayName = GROUP_NAME;
+  const LABEL_NAME = "MenuLabel",
+    MenuLabel = Menu.Label;
+  MenuLabel.displayName = LABEL_NAME;
+  const ITEM_NAME = "MenuItem",
+    MenuItemFrame = Menu.Item,
+    MenuItem = React.forwardRef((props, forwardedRef) => {
+      const {
+        scope,
+        ...itemProps
+      } = props;
+      return /* @__PURE__ */jsx(MenuItemFrame, {
+        componentName: ITEM_NAME,
+        scope: scope || DROPDOWN_MENU_CONTEXT,
+        ...itemProps,
+        ref: forwardedRef
+      });
+    });
+  MenuItem.displayName = ITEM_NAME;
+  const ITEM_TITLE_NAME = "MenuItemTitle",
+    MenuItemTitle = Menu.ItemTitle;
+  MenuItemTitle.displayName = ITEM_TITLE_NAME;
+  const ITEM_SUB_TITLE_NAME = "MenuItemSubTitle",
+    MenuItemSubTitle = Menu.ItemSubtitle;
+  MenuItemSubTitle.displayName = ITEM_SUB_TITLE_NAME;
+  const ITEM_IMAGE_NAME = "MenuItemImage",
+    MenuItemImage = Menu.ItemImage;
+  MenuItemImage.displayName = ITEM_IMAGE_NAME;
+  const ITEM_ICON_NAME = "MenuItemIcon",
+    MenuItemIcon = Menu.ItemIcon;
+  MenuItemIcon.displayName = ITEM_ICON_NAME;
+  const CHECKBOX_ITEM_NAME = "MenuCheckboxItem",
+    MenuCheckboxItemFrame = Menu.CheckboxItem,
+    MenuCheckboxItem = React.forwardRef((props, forwardedRef) => {
+      const {
+        scope,
+        ...checkboxItemProps
+      } = props;
+      return /* @__PURE__ */jsx(MenuCheckboxItemFrame, {
+        componentName: CHECKBOX_ITEM_NAME,
+        scope: scope || DROPDOWN_MENU_CONTEXT,
+        ...checkboxItemProps,
+        ref: forwardedRef
+      });
+    });
+  MenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
+  const RADIO_GROUP_NAME = "MenuRadioGroup",
+    MenuRadioGroup = React.forwardRef((props, forwardedRef) => {
+      const {
+        scope,
+        ...radioGroupProps
+      } = props;
+      return /* @__PURE__ */jsx(Menu.RadioGroup, {
+        scope: scope || DROPDOWN_MENU_CONTEXT,
+        ...radioGroupProps,
+        ref: forwardedRef
+      });
+    });
+  MenuRadioGroup.displayName = RADIO_GROUP_NAME;
+  const RADIO_ITEM_NAME = "MenuRadioItem",
+    MenuRadioItemFrame = Menu.RadioItem,
+    MenuRadioItem = React.forwardRef((props, forwardedRef) => {
+      const {
+        scope,
+        ...radioItemProps
+      } = props;
+      return (
+        // @ts-ignore explanation: deeply nested types typescript limitation
+        /* @__PURE__ */
+        jsx(MenuRadioItemFrame, {
+          componentName: RADIO_ITEM_NAME,
+          scope: scope || DROPDOWN_MENU_CONTEXT,
+          ...radioItemProps,
+          ref: forwardedRef
+        })
+      );
+    });
+  MenuRadioItem.displayName = RADIO_ITEM_NAME;
+  const INDICATOR_NAME = "MenuItemIndicator",
+    MenuItemIndicatorFrame = Menu.ItemIndicator,
+    MenuItemIndicator = MenuItemIndicatorFrame.styleable((props, forwardedRef) => {
+      const {
+        scope,
+        ...itemIndicatorProps
+      } = props;
+      return /* @__PURE__ */jsx(MenuItemIndicatorFrame, {
+        componentName: INDICATOR_NAME,
+        scope: scope || DROPDOWN_MENU_CONTEXT,
+        ...itemIndicatorProps,
+        ref: forwardedRef
+      });
+    });
+  MenuItemIndicator.displayName = INDICATOR_NAME;
+  const SEPARATOR_NAME = "MenuSeparator",
+    MenuSeparator = Menu.Separator;
+  MenuSeparator.displayName = SEPARATOR_NAME;
+  const ARROW_NAME = "MenuArrow",
+    MenuArrow = React.forwardRef((props, forwardedRef) => {
+      const {
+        scope,
+        ...arrowProps
+      } = props;
+      return /* @__PURE__ */jsx(Menu.Arrow, {
+        componentName: ARROW_NAME,
+        scope: scope || DROPDOWN_MENU_CONTEXT,
+        ...arrowProps,
+        ref: forwardedRef
+      });
+    });
+  MenuArrow.displayName = ARROW_NAME;
+  const DROPDOWN_MENU_SUB_NAME = "MenuSub",
+    MenuSub = props => {
+      const {
+          scope,
+          children,
+          open: openProp,
+          onOpenChange,
+          defaultOpen,
+          ...rest
+        } = props,
+        [open = !1, setOpen] = useControllableState({
+          prop: openProp,
+          defaultProp: defaultOpen,
+          onChange: onOpenChange
+        });
+      return /* @__PURE__ */jsx(Menu.Sub, {
+        scope: scope || DROPDOWN_MENU_CONTEXT,
+        open,
+        onOpenChange: setOpen,
+        ...rest,
+        children
+      });
+    };
+  MenuSub.displayName = DROPDOWN_MENU_SUB_NAME;
+  const SUB_TRIGGER_NAME = "MenuSubTrigger",
+    MenuSubTrigger = View.styleable((props, forwardedRef) => {
+      const {
+        scope,
+        asChild,
+        ...subTriggerProps
+      } = props;
+      return /* @__PURE__ */jsx(Menu.SubTrigger, {
+        componentName: SUB_TRIGGER_NAME,
+        scope: scope || DROPDOWN_MENU_CONTEXT,
+        ...subTriggerProps,
+        ref: forwardedRef
+      });
+    });
+  MenuSubTrigger.displayName = SUB_TRIGGER_NAME;
+  const SUB_CONTENT_NAME = "MenuSubContent",
+    MenuSubContent = React.forwardRef((props, forwardedRef) => {
+      const {
+        scope,
+        ...subContentProps
+      } = props;
+      return /* @__PURE__ */jsx(Menu.SubContent, {
+        scope: scope || DROPDOWN_MENU_CONTEXT,
+        ...subContentProps,
+        ref: forwardedRef,
+        style: 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
+      });
+    });
+  return MenuSubContent.displayName = SUB_CONTENT_NAME, withStaticProperties(MenuComp, {
+    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
+  });
+}
+export { DROPDOWN_MENU_CONTEXT, createNonNativeMenu };
+//# sourceMappingURL=createNonNativeMenu.mjs.map