@tamagui/menu 1.138.0 → 1.138.2

package/dist/cjs/createNonNativeMenu.cjs

@@ -0,0 +1,376 @@
+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 __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, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    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);
+var createNonNativeMenu_exports = {};
+__export(createNonNativeMenu_exports, {
+  DROPDOWN_MENU_CONTEXT: () => DROPDOWN_MENU_CONTEXT,
+  createNonNativeMenu: () => createNonNativeMenu
+});
+module.exports = __toCommonJS(createNonNativeMenu_exports);
+var 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")),
+  import_react = require("react"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const DROPDOWN_MENU_CONTEXT = "MenuContext";
+function createNonNativeMenu(params) {
+  const {
+      Menu
+    } = (0, import_create_menu.createBaseMenu)(params),
+    DROPDOWN_MENU_NAME = "Menu",
+    {
+      Provider: MenuProvider,
+      useStyledContext: useMenuContext
+    } = (0, import_web.createStyledContext)(),
+    MenuComp = props => {
+      const {
+          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
+        });
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(MenuProvider, {
+        scope,
+        triggerId: (0, import_react.useId)(),
+        triggerRef,
+        contentId: (0, import_react.useId)(),
+        open,
+        onOpenChange: setOpen,
+        onOpenToggle: React.useCallback(() => setOpen(prevOpen => !prevOpen), [setOpen]),
+        modal,
+        children: /* @__PURE__ */(0, import_jsx_runtime.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 = import_web.View.styleable((props, forwardedRef) => {
+      const {
+          scope,
+          asChild,
+          children,
+          disabled = !1,
+          onKeydown,
+          ...triggerProps
+        } = props,
+        context = useMenuContext(scope);
+      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)(asChild ? import_web.Slot : import_web.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: (0, import_web.composeRefs)(forwardedRef, context.triggerRef),
+          [import_web.isWeb ? "onPointerDown" : "onPress"]: (0, import_web.composeEventHandlers)(
+          //@ts-ignore
+          props[import_web.isWeb ? "onPointerDown" : "onPress"], event => {
+            if (!disabled) {
+              if (import_web.isWeb && event instanceof PointerEvent && event.button !== 0 && event.ctrlKey === !0) return;
+              context.onOpenToggle(), context.open || event.preventDefault();
+            }
+          }),
+          ...(import_web.isWeb && {
+            onKeyDown: (0, import_web.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 = 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;
+  const CONTENT_NAME = "MenuContent",
+    MenuContent = React.forwardRef((props, forwardedRef) => {
+      const {
+          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, event => {
+          hasInteractedOutsideRef.current || context.triggerRef.current?.focus(), hasInteractedOutsideRef.current = !1, event.preventDefault();
+        }),
+        onInteractOutside: (0, import_web.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__ */(0, import_jsx_runtime.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__ */(0, import_jsx_runtime.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__ */(0, import_jsx_runtime.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__ */
+        (0, import_jsx_runtime.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__ */(0, import_jsx_runtime.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__ */(0, import_jsx_runtime.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] = (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;
+  const SUB_TRIGGER_NAME = "MenuSubTrigger",
+    MenuSubTrigger = import_web.View.styleable((props, forwardedRef) => {
+      const {
+        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;
+  const SUB_CONTENT_NAME = "MenuSubContent",
+    MenuSubContent = React.forwardRef((props, forwardedRef) => {
+      const {
+        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
+      });
+    });
+  return MenuSubContent.displayName = SUB_CONTENT_NAME, (0, import_web.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
+  });
+}