@tamagui/create-menu 2.0.0-rc.9 → 2.0.0

package/dist/cjs/createNativeMenu/createNativeMenu.cjs

@@ -2,173 +2,291 @@ 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 createNativeMenu_exports = {};
 __export(createNativeMenu_exports, {
   createNativeMenu: () => createNativeMenu
 });
 module.exports = __toCommonJS(createNativeMenu_exports);
-var import_native = require("@tamagui/native"),
-  import_web = require("@tamagui/web"),
-  import_react = __toESM(require("react"), 1),
-  import_jsx_runtime = require("react/jsx-runtime");
-const createNativeMenu = MenuType => {
-  if (import_web.isWeb) return {
-    Menu: (0, import_web.withStaticProperties)({}, {
-      Trigger: {},
-      Content: {},
-      Item: {},
-      ItemTitle: {},
-      ItemSubtitle: {},
-      SubTrigger: {},
-      Group: {},
-      ItemIcon: {},
-      Separator: {},
-      CheckboxItem: {},
-      ItemIndicator: {},
-      ItemImage: {},
-      Label: {},
-      Arrow: {},
-      Sub: {},
-      SubContent: {},
-      Preview: {},
-      Portal: {},
-      RadioGroup: {},
-      RadioItem: {},
-      Auxiliary: {}
-    })
+var import_native = require("@tamagui/native");
+var import_web = require("@tamagui/web");
+var import_react = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+const MAPPED_TYPES = ["SubContent", "SubTrigger", "Content", "Sub", "Group", "CheckboxItem"];
+const CONTAINER_TYPES = ["SubContent", "Content", "Sub", "Group"];
+function getComponentType(displayName) {
+  for (const type of MAPPED_TYPES) {
+    if (displayName === type || displayName.includes(`(${type})`)) {
+      return type;
+    }
+  }
+  return null;
+}
+function isItemLike(props, displayName) {
+  if (getComponentType(displayName)) return false;
+  return "onSelect" in props || "textValue" in props;
+}
+function isPortalLike(displayName) {
+  return displayName === "Portal" || displayName.includes("Portal");
+}
+function isTriggerLike(displayName) {
+  return displayName === "Trigger" || displayName.includes("(Trigger)");
+}
+function composeHandlers(first, second) {
+  return (...args) => {
+    first?.(...args);
+    second?.(...args);
   };
-  const zeego = (0, import_native.getZeego)();
-  if (!zeego.isEnabled) return console.warn("Warning: Must call import '@tamagui/native/setup-zeego' at your app entry point to use native menus"), {
-    Menu: {}
+}
+function getTriggerDebugName(menuType, props) {
+  const childProps = import_react.default.isValidElement(props.children) && props.children.props ? props.children.props : null;
+  const prefix = menuType === "ContextMenu" ? "ContextMenuTrigger" : "MenuTrigger";
+  const detail = childProps?.testID ?? childProps?.accessibilityLabel ?? (typeof props.textValue === "string" ? props.textValue : null);
+  return [prefix, detail].filter(Boolean).join(":") || prefix;
+}
+const emptyStub = () => null;
+function createWebStubs() {
+  return {
+    Menu: (0, import_web.withStaticProperties)(emptyStub, {
+      Trigger: emptyStub,
+      Content: emptyStub,
+      Item: emptyStub,
+      ItemTitle: emptyStub,
+      ItemSubtitle: emptyStub,
+      SubTrigger: emptyStub,
+      Group: emptyStub,
+      ItemIcon: emptyStub,
+      Separator: emptyStub,
+      CheckboxItem: emptyStub,
+      ItemIndicator: emptyStub,
+      ItemImage: emptyStub,
+      Label: emptyStub,
+      Arrow: emptyStub,
+      Sub: emptyStub,
+      SubContent: emptyStub,
+      Preview: emptyStub,
+      Portal: emptyStub,
+      RadioGroup: emptyStub,
+      RadioItem: emptyStub,
+      Auxiliary: emptyStub
+    })
   };
-  const {
-      DropdownMenu: ZeegoDropdownMenu,
-      ContextMenu: ZeegoContextMenu
-    } = zeego.state,
-    isContextMenu = MenuType === "ContextMenu",
-    ZeegoMenu = isContextMenu ? ZeegoContextMenu : ZeegoDropdownMenu,
-    COMPONENT_MAP = {
-      SubContent: ZeegoMenu.SubContent,
-      Content: ZeegoMenu.Content,
-      Sub: ZeegoMenu.Sub,
-      Group: ZeegoMenu.Group,
-      SubTrigger: ZeegoMenu.SubTrigger
-    },
-    CONTAINER_TYPES = ["SubContent", "Content", "Sub", "Group"],
-    getComponentType = displayName => {
-      for (const type of ["SubContent", "SubTrigger", "Content", "Sub", "Group", "CheckboxItem"]) if (displayName === type || displayName.includes(`(${type})`)) return type;
+}
+const createNativeMenu = MenuType => {
+  if (import_web.isWeb) {
+    return createWebStubs();
+  }
+  const isContextMenu = MenuType === "ContextMenu";
+  const isAndroid = !import_web.isIos && !import_web.isWeb;
+  let resolved = null;
+  let warned = false;
+  function resolve() {
+    if (resolved) return resolved;
+    const zeego = (0, import_native.getZeego)();
+    if (!zeego.isEnabled) {
+      if (!warned) {
+        warned = true;
+        console.warn(`Warning: Must call import '@tamagui/native/setup-zeego' at your app entry point to use native menus`);
+      }
       return null;
-    },
-    isItemLike = (props, displayName) => getComponentType(displayName) ? !1 : "onSelect" in props || "textValue" in props,
-    isPortal = displayName => displayName === "Portal" || displayName.includes("Portal"),
-    transformForZeego = (children, shouldReverseOnIos = !1) => {
-      const result = [];
-      return import_react.default.Children.forEach(children, child => {
-        if (!import_react.default.isValidElement(child)) {
-          result.push(child);
-          return;
-        }
-        const displayName = child.type?.displayName || "",
-          props = child.props;
-        if (isPortal(displayName)) {
-          const portalChildren = transformForZeego(props.children, !1);
-          import_react.default.Children.forEach(portalChildren, c => result.push(c));
-          return;
-        }
-        const componentType = getComponentType(displayName);
-        if (componentType === "CheckboxItem") {
-          const {
-              checked,
-              onCheckedChange,
-              value,
-              onValueChange,
-              children: children2,
-              ...rest
-            } = props,
-            finalValue = value ?? (checked ? "on" : "off"),
-            finalOnValueChange = onValueChange ?? (onCheckedChange && (v => onCheckedChange(v === "on"))),
-            cleanChildren = import_react.default.Children.map(children2, child2 => import_react.default.isValidElement(child2) && (child2.type?.displayName || "").includes("ItemIndicator") ? null : child2);
-          result.push(import_react.default.createElement(ZeegoMenu.CheckboxItem, {
-            ...rest,
-            key: child.key,
-            value: finalValue,
-            onValueChange: finalOnValueChange
-          }, cleanChildren));
-          return;
-        }
-        if (componentType) {
-          const {
-              children: childChildren,
-              ...restProps
-            } = props,
-            isContainer = CONTAINER_TYPES.includes(componentType),
-            shouldReverseChildren = componentType === "Content" || componentType === "SubContent";
-          result.push(import_react.default.createElement(COMPONENT_MAP[componentType], {
-            ...restProps,
-            key: child.key
-          }, isContainer ? transformForZeego(childChildren, shouldReverseChildren) : childChildren));
-          return;
-        }
-        if (isItemLike(props, displayName)) {
-          const {
-            children: itemChildren,
-            ...itemProps
-          } = props;
-          result.push(import_react.default.createElement(ZeegoMenu.Item, {
-            ...itemProps,
-            key: child.key
-          }, itemChildren));
-          return;
-        }
+    }
+    const menu = isContextMenu ? zeego.state.ContextMenu : zeego.state.DropdownMenu;
+    resolved = {
+      menu,
+      componentMap: {
+        SubContent: menu.SubContent,
+        Content: menu.Content,
+        Sub: menu.Sub,
+        Group: menu.Group,
+        SubTrigger: menu.SubTrigger
+      }
+    };
+    return resolved;
+  }
+  function transformChildren(menu, map, children, shouldReverseOnIos = false, triggerBoundaryHandlers, radioContext) {
+    const result = [];
+    import_react.default.Children.forEach(children, child => {
+      if (!import_react.default.isValidElement(child)) {
         result.push(child);
-      }), import_web.isIos && shouldReverseOnIos && !isContextMenu && result.reverse(), result;
-    },
-    Trigger = ZeegoMenu.Trigger,
-    Content = ZeegoMenu.Content,
-    Item = ZeegoMenu.Item,
-    ItemTitle = ZeegoMenu.ItemTitle,
-    ItemSubtitle = ZeegoMenu.ItemSubtitle,
-    ItemIcon = ZeegoMenu.ItemIcon,
-    ItemImage = ZeegoMenu.ItemImage,
-    ItemIndicator = ZeegoMenu.ItemIndicator,
-    Group = ZeegoMenu.Group,
-    Label = ZeegoMenu.Label,
-    Separator = ZeegoMenu.Separator,
-    Sub = ZeegoMenu.Sub,
-    SubTrigger = ZeegoMenu.SubTrigger,
-    SubContent = ZeegoMenu.SubContent,
-    Portal = ({
-      children
-    }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
-      children
+        return;
+      }
+      const displayName = child.type?.displayName || "";
+      const props = child.props;
+      if (isPortalLike(displayName)) {
+        const inner = transformChildren(menu, map, props.children, false, triggerBoundaryHandlers, radioContext);
+        import_react.default.Children.forEach(inner, c => result.push(c));
+        return;
+      }
+      if (displayName.includes("ScrollView")) {
+        const inner = transformChildren(menu, map, props.children, false, triggerBoundaryHandlers, radioContext);
+        import_react.default.Children.forEach(inner, c => result.push(c));
+        return;
+      }
+      if (isTriggerLike(displayName)) {
+        const debugName = getTriggerDebugName(MenuType, props);
+        const claim = () => triggerBoundaryHandlers?.claim(debugName);
+        const release = () => triggerBoundaryHandlers?.release(debugName);
+        result.push(import_react.default.cloneElement(child, {
+          onTouchStart: composeHandlers(claim, props.onTouchStart),
+          onTouchEnd: composeHandlers(props.onTouchEnd, release),
+          onTouchCancel: composeHandlers(props.onTouchCancel, release),
+          onResponderGrant: composeHandlers(claim, props.onResponderGrant),
+          onResponderRelease: composeHandlers(props.onResponderRelease, release),
+          onResponderTerminate: composeHandlers(props.onResponderTerminate, release),
+          onPressIn: composeHandlers(claim, props.onPressIn),
+          onPressOut: composeHandlers(props.onPressOut, release)
+        }));
+        return;
+      }
+      if (displayName.includes("RadioGroup")) {
+        const {
+          value: rgValue,
+          onValueChange: rgOnValueChange,
+          children: rgChildren,
+          ...rest
+        } = props;
+        result.push(import_react.default.createElement(menu.Group, {
+          ...rest,
+          key: child.key
+        }, transformChildren(menu, map, rgChildren, false, triggerBoundaryHandlers, {
+          value: rgValue,
+          onValueChange: rgOnValueChange
+        })));
+        return;
+      }
+      if (displayName.includes("RadioItem") && radioContext) {
+        const {
+          value: itemValue,
+          children: rChildren,
+          ...rest
+        } = props;
+        const cleanChildren = import_react.default.Children.map(rChildren, c => {
+          if (!import_react.default.isValidElement(c)) return c;
+          const dn = c.type?.displayName || "";
+          if (dn.includes("ItemIndicator")) return null;
+          return c;
+        });
+        result.push(import_react.default.createElement(menu.CheckboxItem, {
+          ...rest,
+          key: child.key,
+          value: itemValue === radioContext.value ? "on" : "off",
+          onValueChange: () => radioContext.onValueChange?.(itemValue)
+        }, cleanChildren));
+        return;
+      }
+      const componentType = getComponentType(displayName);
+      if (componentType === "CheckboxItem") {
+        const {
+          checked,
+          onCheckedChange,
+          value,
+          onValueChange,
+          children: cbChildren,
+          ...rest
+        } = props;
+        const finalValue = value ?? (checked ? "on" : "off");
+        const finalOnValueChange = onValueChange ?? (onCheckedChange && (v => onCheckedChange(v === "on")));
+        const cleanChildren = import_react.default.Children.map(cbChildren, c => {
+          if (!import_react.default.isValidElement(c)) return c;
+          const dn = c.type?.displayName || "";
+          if (dn.includes("ItemIndicator")) return null;
+          return c;
+        });
+        result.push(import_react.default.createElement(menu.CheckboxItem, {
+          ...rest,
+          key: child.key,
+          value: finalValue,
+          onValueChange: finalOnValueChange
+        }, cleanChildren));
+        return;
+      }
+      if (componentType) {
+        const {
+          children: childChildren,
+          ...restProps
+        } = props;
+        const isContainer = CONTAINER_TYPES.includes(componentType);
+        const shouldReverse = componentType === "Content" || componentType === "SubContent";
+        result.push(import_react.default.createElement(map[componentType], {
+          ...restProps,
+          key: child.key
+        }, isContainer ? transformChildren(menu, map, childChildren, shouldReverse, triggerBoundaryHandlers, radioContext) : childChildren));
+        return;
+      }
+      if (isItemLike(props, displayName)) {
+        const {
+          children: itemChildren,
+          ...itemProps
+        } = props;
+        result.push(import_react.default.createElement(menu.Item, {
+          ...itemProps,
+          key: child.key
+        }, itemChildren));
+        return;
+      }
+      result.push(child);
     });
+    if (import_web.isIos && shouldReverseOnIos && !isContextMenu) {
+      result.reverse();
+    }
+    return result;
+  }
+  function lazyZeego(name, displayName) {
+    const Comp = props => {
+      const z = resolve();
+      if (!z) return null;
+      return import_react.default.createElement(z.menu[name], props);
+    };
+    Comp.displayName = displayName || name;
+    return Comp;
+  }
+  const Trigger = lazyZeego("Trigger");
+  const Content = lazyZeego("Content");
+  const Item = lazyZeego("Item");
+  const ItemTitle = lazyZeego("ItemTitle");
+  const ItemSubtitle = lazyZeego("ItemSubtitle");
+  const ItemIcon = lazyZeego("ItemIcon");
+  const ItemImage = lazyZeego("ItemImage");
+  const ItemIndicator = lazyZeego("ItemIndicator");
+  const Group = lazyZeego("Group");
+  const Label = lazyZeego("Label");
+  const Separator = lazyZeego("Separator");
+  const Sub = lazyZeego("Sub");
+  const SubTrigger = lazyZeego("SubTrigger");
+  const SubContent = lazyZeego("SubContent");
+  const Portal = ({
+    children
+  }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children
+  });
   Portal.displayName = "Portal";
   const Arrow = () => null;
   Arrow.displayName = "Arrow";
@@ -184,26 +302,67 @@ const createNativeMenu = MenuType => {
     children
   });
   RadioItem.displayName = `${MenuType}RadioItem`;
-  const CheckboxItem = props => null;
+  const CheckboxItem = () => null;
   CheckboxItem.displayName = "CheckboxItem";
-  const Preview = isContextMenu ? ZeegoContextMenu.Preview : () => null;
+  const Preview = isContextMenu ? lazyZeego("Preview", `${MenuType}Preview`) : () => null;
   Preview.displayName = `${MenuType}Preview`;
-  const Auxiliary = isContextMenu ? ZeegoContextMenu.Auxiliary : () => null;
+  const Auxiliary = isContextMenu ? lazyZeego("Auxiliary", `${MenuType}Auxiliary`) : () => null;
   Auxiliary.displayName = `${MenuType}Auxiliary`;
   const Menu = ({
     children,
     onOpenChange,
     onOpenWillChange
   }) => {
+    const triggerOwnerRef = import_react.default.useRef(null);
+    const claimTriggerBoundary = import_react.default.useCallback(debugName => {
+      if (triggerOwnerRef.current) {
+        (0, import_native.unstable_releaseExternalPressOwnership)(triggerOwnerRef.current, debugName);
+      }
+      triggerOwnerRef.current = (0, import_native.unstable_claimExternalPressOwnership)(debugName);
+    }, []);
+    const releaseTriggerBoundary = import_react.default.useCallback(debugName => {
+      if (!triggerOwnerRef.current) return;
+      (0, import_native.unstable_releaseExternalPressOwnership)(triggerOwnerRef.current, debugName);
+      triggerOwnerRef.current = null;
+    }, []);
+    import_react.default.useEffect(() => releaseTriggerBoundary, [releaseTriggerBoundary]);
+    const z = resolve();
+    if (!z) return null;
+    const handleOpenChange = import_react.default.useCallback(isOpen => {
+      if (!isOpen) {
+        releaseTriggerBoundary();
+      }
+      onOpenChange?.(isOpen);
+    }, [onOpenChange, releaseTriggerBoundary]);
+    const handleOpenWillChange = import_react.default.useCallback(willOpen => {
+      if (!willOpen) {
+        releaseTriggerBoundary();
+      }
+      onOpenWillChange?.(willOpen);
+    }, [onOpenWillChange, releaseTriggerBoundary]);
     const rootProps = {
-      onOpenChange
+      onOpenChange: handleOpenChange
     };
-    return isContextMenu && onOpenWillChange && (rootProps.onOpenWillChange = onOpenWillChange), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ZeegoMenu.Root, {
+    if (isContextMenu && onOpenWillChange) {
+      rootProps.onOpenWillChange = handleOpenWillChange;
+    }
+    const content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(z.menu.Root, {
       ...rootProps,
-      children: transformForZeego(children)
+      children: transformChildren(z.menu, z.componentMap, children, false, {
+        claim: claimTriggerBoundary,
+        release: releaseTriggerBoundary
+      })
     });
+    if (isAndroid) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_native.NativeMenuContext.Provider, {
+        value: true,
+        children: content
+      });
+    }
+    return content;
   };
-  return Menu.displayName = MenuType, {
+  Menu.displayName = MenuType;
+  return {
     Menu: (0, import_web.withStaticProperties)(Menu, {
       Trigger,
       Content,