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

package/dist/esm/createNativeMenu/createNativeMenu.native.js

@@ -1,189 +1,307 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { getZeego } from "@tamagui/native";
+import { getZeego, NativeMenuContext, unstable_claimExternalPressOwnership, unstable_releaseExternalPressOwnership } from "@tamagui/native";
 import { isWeb, withStaticProperties, isIos } from "@tamagui/web";
 import React from "react";
+var MAPPED_TYPES = ["SubContent", "SubTrigger", "Content", "Sub", "Group", "CheckboxItem"];
+var CONTAINER_TYPES = ["SubContent", "Content", "Sub", "Group"];
+function getComponentType(displayName) {
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
+    _iteratorError = void 0;
+  try {
+    for (var _iterator = MAPPED_TYPES[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var type = _step.value;
+      if (displayName === type || displayName.includes(`(${type})`)) {
+        return type;
+      }
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+  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 function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    first === null || first === void 0 ? void 0 : first(...args);
+    second === null || second === void 0 ? void 0 : second(...args);
+  };
+}
+function getTriggerDebugName(menuType, props) {
+  var childProps = /* @__PURE__ */React.isValidElement(props.children) && props.children.props ? props.children.props : null;
+  var prefix = menuType === "ContextMenu" ? "ContextMenuTrigger" : "MenuTrigger";
+  var _childProps_testID, _ref;
+  var detail = (_ref = (_childProps_testID = childProps === null || childProps === void 0 ? void 0 : childProps.testID) !== null && _childProps_testID !== void 0 ? _childProps_testID : childProps === null || childProps === void 0 ? void 0 : childProps.accessibilityLabel) !== null && _ref !== void 0 ? _ref : typeof props.textValue === "string" ? props.textValue : null;
+  return [prefix, detail].filter(Boolean).join(":") || prefix;
+}
+var emptyStub = function () {
+  return null;
+};
+function createWebStubs() {
+  return {
+    Menu: 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
+    })
+  };
+}
 var createNativeMenu = function (MenuType) {
   if (isWeb) {
-    var Menu = {},
-      Trigger = {},
-      Content = {},
-      Preview = {},
-      Item = {},
-      ItemIcon = {},
-      ItemImage = {},
-      SubTrigger = {},
-      ItemTitle = {},
-      ItemSubtitle = {},
-      Group = {},
-      Separator = {},
-      CheckboxItem = {},
-      ItemIndicator = {},
-      Label = {},
-      Arrow = {},
-      Sub = {},
-      SubContent = {},
-      Portal = {},
-      RadioGroup = {},
-      RadioItem = {},
-      Auxiliary = {};
-    return {
-      Menu: withStaticProperties(Menu, {
-        Trigger,
-        Content,
-        Item,
-        ItemTitle,
-        ItemSubtitle,
-        SubTrigger,
-        Group,
-        ItemIcon,
-        Separator,
-        CheckboxItem,
-        ItemIndicator,
-        ItemImage,
-        Label,
-        Arrow,
-        Sub,
-        SubContent,
-        Preview,
-        Portal,
-        RadioGroup,
-        RadioItem,
-        Auxiliary
-      })
-    };
+    return createWebStubs();
   }
-  var zeego = 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: {}
-  };
-  var {
-      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 = function (displayName) {
-      for (var _i = 0, _iter = ["SubContent", "SubTrigger", "Content", "Sub", "Group", "CheckboxItem"]; _i < _iter.length; _i++) {
-        var type = _iter[_i];
-        if (displayName === type || displayName.includes(`(${type})`)) return type;
+  var isContextMenu = MenuType === "ContextMenu";
+  var isAndroid = !isIos && !isWeb;
+  var resolved = null;
+  var warned = false;
+  function resolve() {
+    if (resolved) return resolved;
+    var zeego = 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 = function (props, displayName) {
-      return getComponentType(displayName) ? !1 : "onSelect" in props || "textValue" in props;
-    },
-    isPortal = function (displayName) {
-      return displayName === "Portal" || displayName.includes("Portal");
-    },
-    transformForZeego = function (children) {
-      var shouldReverseOnIos = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1,
-        result = [];
-      return React.Children.forEach(children, function (child) {
-        var _child_type;
-        if (! /* @__PURE__ */React.isValidElement(child)) {
-          result.push(child);
-          return;
-        }
-        var displayName = ((_child_type = child.type) === null || _child_type === void 0 ? void 0 : _child_type.displayName) || "",
-          props = child.props;
-        if (isPortal(displayName)) {
-          var portalChildren = transformForZeego(props.children, !1);
-          React.Children.forEach(portalChildren, function (c) {
-            return result.push(c);
-          });
-          return;
-        }
-        var componentType = getComponentType(displayName);
-        if (componentType === "CheckboxItem") {
-          var {
-              checked,
-              onCheckedChange,
-              value,
-              onValueChange,
-              children: _$children,
-              ...rest
-            } = props,
-            finalValue = value ?? (checked ? "on" : "off"),
-            finalOnValueChange = onValueChange ?? (onCheckedChange && function (v) {
-              return onCheckedChange(v === "on");
-            }),
-            cleanChildren = React.Children.map(_$children, function (child2) {
-              var _child_type2;
-              if (! /* @__PURE__ */React.isValidElement(child2)) return child2;
-              var childDisplayName = ((_child_type2 = child2.type) === null || _child_type2 === void 0 ? void 0 : _child_type2.displayName) || "";
-              return childDisplayName.includes("ItemIndicator") ? null : child2;
-            });
-          result.push(/* @__PURE__ */React.createElement(ZeegoMenu.CheckboxItem, {
-            ...rest,
-            key: child.key,
-            value: finalValue,
-            onValueChange: finalOnValueChange
-          }, cleanChildren));
-          return;
-        }
-        if (componentType) {
-          var {
-              children: childChildren,
-              ...restProps
-            } = props,
-            isContainer = CONTAINER_TYPES.includes(componentType),
-            shouldReverseChildren = componentType === "Content" || componentType === "SubContent";
-          result.push(/* @__PURE__ */React.createElement(COMPONENT_MAP[componentType], {
-            ...restProps,
-            key: child.key
-          }, isContainer ? transformForZeego(childChildren, shouldReverseChildren) : childChildren));
-          return;
-        }
-        if (isItemLike(props, displayName)) {
-          var {
-            children: itemChildren,
-            ...itemProps
-          } = props;
-          result.push(/* @__PURE__ */React.createElement(ZeegoMenu.Item, {
-            ...itemProps,
-            key: child.key
-          }, itemChildren));
-          return;
-        }
+    }
+    var 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) {
+    var shouldReverseOnIos = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false,
+      triggerBoundaryHandlers = arguments.length > 4 ? arguments[4] : void 0,
+      radioContext = arguments.length > 5 ? arguments[5] : void 0;
+    var result = [];
+    React.Children.forEach(children, function (child) {
+      var _child_type;
+      if (! /* @__PURE__ */React.isValidElement(child)) {
         result.push(child);
-      }), isIos && shouldReverseOnIos && !isContextMenu && result.reverse(), result;
-    },
-    Trigger1 = ZeegoMenu.Trigger,
-    Content1 = ZeegoMenu.Content,
-    Item1 = ZeegoMenu.Item,
-    ItemTitle1 = ZeegoMenu.ItemTitle,
-    ItemSubtitle1 = ZeegoMenu.ItemSubtitle,
-    ItemIcon1 = ZeegoMenu.ItemIcon,
-    ItemImage1 = ZeegoMenu.ItemImage,
-    ItemIndicator1 = ZeegoMenu.ItemIndicator,
-    Group1 = ZeegoMenu.Group,
-    Label1 = ZeegoMenu.Label,
-    Separator1 = ZeegoMenu.Separator,
-    Sub1 = ZeegoMenu.Sub,
-    SubTrigger1 = ZeegoMenu.SubTrigger,
-    SubContent1 = ZeegoMenu.SubContent,
-    Portal1 = function (param) {
-      var {
-        children
-      } = param;
-      return /* @__PURE__ */_jsx(_Fragment, {
-        children
-      });
+        return;
+      }
+      var displayName = ((_child_type = child.type) === null || _child_type === void 0 ? void 0 : _child_type.displayName) || "";
+      var props = child.props;
+      if (isPortalLike(displayName)) {
+        var inner = transformChildren(menu, map, props.children, false, triggerBoundaryHandlers, radioContext);
+        React.Children.forEach(inner, function (c) {
+          return result.push(c);
+        });
+        return;
+      }
+      if (displayName.includes("ScrollView")) {
+        var inner1 = transformChildren(menu, map, props.children, false, triggerBoundaryHandlers, radioContext);
+        React.Children.forEach(inner1, function (c) {
+          return result.push(c);
+        });
+        return;
+      }
+      if (isTriggerLike(displayName)) {
+        var debugName = getTriggerDebugName(MenuType, props);
+        var claim = function () {
+          return triggerBoundaryHandlers === null || triggerBoundaryHandlers === void 0 ? void 0 : triggerBoundaryHandlers.claim(debugName);
+        };
+        var release = function () {
+          return triggerBoundaryHandlers === null || triggerBoundaryHandlers === void 0 ? void 0 : triggerBoundaryHandlers.release(debugName);
+        };
+        result.push(/* @__PURE__ */React.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")) {
+        var {
+          value: rgValue,
+          onValueChange: rgOnValueChange,
+          children: rgChildren,
+          ...rest
+        } = props;
+        result.push(/* @__PURE__ */React.createElement(menu.Group, {
+          ...rest,
+          key: child.key
+        }, transformChildren(menu, map, rgChildren, false, triggerBoundaryHandlers, {
+          value: rgValue,
+          onValueChange: rgOnValueChange
+        })));
+        return;
+      }
+      if (displayName.includes("RadioItem") && radioContext) {
+        var {
+          value: itemValue,
+          children: rChildren,
+          ...rest1
+        } = props;
+        var cleanChildren = React.Children.map(rChildren, function (c) {
+          var _c_type;
+          if (! /* @__PURE__ */React.isValidElement(c)) return c;
+          var dn = ((_c_type = c.type) === null || _c_type === void 0 ? void 0 : _c_type.displayName) || "";
+          if (dn.includes("ItemIndicator")) return null;
+          return c;
+        });
+        result.push(/* @__PURE__ */React.createElement(menu.CheckboxItem, {
+          ...rest1,
+          key: child.key,
+          value: itemValue === radioContext.value ? "on" : "off",
+          onValueChange: function () {
+            var _radioContext_onValueChange;
+            return (_radioContext_onValueChange = radioContext.onValueChange) === null || _radioContext_onValueChange === void 0 ? void 0 : _radioContext_onValueChange.call(radioContext, itemValue);
+          }
+        }, cleanChildren));
+        return;
+      }
+      var componentType = getComponentType(displayName);
+      if (componentType === "CheckboxItem") {
+        var {
+          checked,
+          onCheckedChange,
+          value,
+          onValueChange,
+          children: cbChildren,
+          ...rest2
+        } = props;
+        var finalValue = value !== null && value !== void 0 ? value : checked ? "on" : "off";
+        var finalOnValueChange = onValueChange !== null && onValueChange !== void 0 ? onValueChange : onCheckedChange && function (v) {
+          return onCheckedChange(v === "on");
+        };
+        var cleanChildren1 = React.Children.map(cbChildren, function (c) {
+          var _c_type;
+          if (! /* @__PURE__ */React.isValidElement(c)) return c;
+          var dn = ((_c_type = c.type) === null || _c_type === void 0 ? void 0 : _c_type.displayName) || "";
+          if (dn.includes("ItemIndicator")) return null;
+          return c;
+        });
+        result.push(/* @__PURE__ */React.createElement(menu.CheckboxItem, {
+          ...rest2,
+          key: child.key,
+          value: finalValue,
+          onValueChange: finalOnValueChange
+        }, cleanChildren1));
+        return;
+      }
+      if (componentType) {
+        var {
+          children: childChildren,
+          ...restProps
+        } = props;
+        var isContainer = CONTAINER_TYPES.includes(componentType);
+        var shouldReverse = componentType === "Content" || componentType === "SubContent";
+        result.push(/* @__PURE__ */React.createElement(map[componentType], {
+          ...restProps,
+          key: child.key
+        }, isContainer ? transformChildren(menu, map, childChildren, shouldReverse, triggerBoundaryHandlers, radioContext) : childChildren));
+        return;
+      }
+      if (isItemLike(props, displayName)) {
+        var {
+          children: itemChildren,
+          ...itemProps
+        } = props;
+        result.push(/* @__PURE__ */React.createElement(menu.Item, {
+          ...itemProps,
+          key: child.key
+        }, itemChildren));
+        return;
+      }
+      result.push(child);
+    });
+    if (isIos && shouldReverseOnIos && !isContextMenu) {
+      result.reverse();
+    }
+    return result;
+  }
+  function lazyZeego(name, displayName) {
+    var Comp = function (props) {
+      var z = resolve();
+      if (!z) return null;
+      return /* @__PURE__ */React.createElement(z.menu[name], props);
     };
-  Portal1.displayName = "Portal";
-  var Arrow1 = function () {
+    Comp.displayName = displayName || name;
+    return Comp;
+  }
+  var Trigger = lazyZeego("Trigger");
+  var Content = lazyZeego("Content");
+  var Item = lazyZeego("Item");
+  var ItemTitle = lazyZeego("ItemTitle");
+  var ItemSubtitle = lazyZeego("ItemSubtitle");
+  var ItemIcon = lazyZeego("ItemIcon");
+  var ItemImage = lazyZeego("ItemImage");
+  var ItemIndicator = lazyZeego("ItemIndicator");
+  var Group = lazyZeego("Group");
+  var Label = lazyZeego("Label");
+  var Separator = lazyZeego("Separator");
+  var Sub = lazyZeego("Sub");
+  var SubTrigger = lazyZeego("SubTrigger");
+  var SubContent = lazyZeego("SubContent");
+  var Portal = function (param) {
+    var {
+      children
+    } = param;
+    return /* @__PURE__ */_jsx(_Fragment, {
+      children
+    });
+  };
+  Portal.displayName = "Portal";
+  var Arrow = function () {
     return null;
   };
-  Arrow1.displayName = "Arrow";
-  var RadioGroup1 = function (param) {
+  Arrow.displayName = "Arrow";
+  var RadioGroup = function (param) {
     var {
       children
     } = param;
@@ -191,8 +309,8 @@ var createNativeMenu = function (MenuType) {
       children
     });
   };
-  RadioGroup1.displayName = `${MenuType}RadioGroup`;
-  var RadioItem1 = function (param) {
+  RadioGroup.displayName = `${MenuType}RadioGroup`;
+  var RadioItem = function (param) {
     var {
       children
     } = param;
@@ -200,56 +318,99 @@ var createNativeMenu = function (MenuType) {
       children
     });
   };
-  RadioItem1.displayName = `${MenuType}RadioItem`;
-  var CheckboxItem1 = function (props) {
+  RadioItem.displayName = `${MenuType}RadioItem`;
+  var CheckboxItem = function () {
     return null;
   };
-  CheckboxItem1.displayName = "CheckboxItem";
-  var Preview1 = isContextMenu ? ZeegoContextMenu.Preview : function () {
+  CheckboxItem.displayName = "CheckboxItem";
+  var Preview = isContextMenu ? lazyZeego("Preview", `${MenuType}Preview`) : function () {
     return null;
   };
-  Preview1.displayName = `${MenuType}Preview`;
-  var Auxiliary1 = isContextMenu ? ZeegoContextMenu.Auxiliary : function () {
+  Preview.displayName = `${MenuType}Preview`;
+  var Auxiliary = isContextMenu ? lazyZeego("Auxiliary", `${MenuType}Auxiliary`) : function () {
     return null;
   };
-  Auxiliary1.displayName = `${MenuType}Auxiliary`;
-  var Menu1 = function (param) {
+  Auxiliary.displayName = `${MenuType}Auxiliary`;
+  var Menu = function (param) {
     var {
-        children,
-        onOpenChange,
-        onOpenWillChange
-      } = param,
-      rootProps = {
-        onOpenChange
-      };
-    return isContextMenu && onOpenWillChange && (rootProps.onOpenWillChange = onOpenWillChange), /* @__PURE__ */_jsx(ZeegoMenu.Root, {
+      children,
+      onOpenChange,
+      onOpenWillChange
+    } = param;
+    var triggerOwnerRef = React.useRef(null);
+    var claimTriggerBoundary = React.useCallback(function (debugName) {
+      if (triggerOwnerRef.current) {
+        unstable_releaseExternalPressOwnership(triggerOwnerRef.current, debugName);
+      }
+      triggerOwnerRef.current = unstable_claimExternalPressOwnership(debugName);
+    }, []);
+    var releaseTriggerBoundary = React.useCallback(function (debugName) {
+      if (!triggerOwnerRef.current) return;
+      unstable_releaseExternalPressOwnership(triggerOwnerRef.current, debugName);
+      triggerOwnerRef.current = null;
+    }, []);
+    React.useEffect(function () {
+      return releaseTriggerBoundary;
+    }, [releaseTriggerBoundary]);
+    var z = resolve();
+    if (!z) return null;
+    var handleOpenChange = React.useCallback(function (isOpen) {
+      if (!isOpen) {
+        releaseTriggerBoundary();
+      }
+      onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
+    }, [onOpenChange, releaseTriggerBoundary]);
+    var handleOpenWillChange = React.useCallback(function (willOpen) {
+      if (!willOpen) {
+        releaseTriggerBoundary();
+      }
+      onOpenWillChange === null || onOpenWillChange === void 0 ? void 0 : onOpenWillChange(willOpen);
+    }, [onOpenWillChange, releaseTriggerBoundary]);
+    var rootProps = {
+      onOpenChange: handleOpenChange
+    };
+    if (isContextMenu && onOpenWillChange) {
+      rootProps.onOpenWillChange = handleOpenWillChange;
+    }
+    var content = /* @__PURE__ */_jsx(z.menu.Root, {
       ...rootProps,
-      children: transformForZeego(children)
+      children: transformChildren(z.menu, z.componentMap, children, false, {
+        claim: claimTriggerBoundary,
+        release: releaseTriggerBoundary
+      })
     });
+    if (isAndroid) {
+      return /* @__PURE__ */_jsx(NativeMenuContext.Provider, {
+        value: true,
+        children: content
+      });
+    }
+    return content;
   };
-  return Menu1.displayName = MenuType, {
-    Menu: withStaticProperties(Menu1, {
-      Trigger: Trigger1,
-      Content: Content1,
-      Item: Item1,
-      ItemTitle: ItemTitle1,
-      ItemSubtitle: ItemSubtitle1,
-      ItemIcon: ItemIcon1,
-      ItemImage: ItemImage1,
-      ItemIndicator: ItemIndicator1,
-      Group: Group1,
-      Label: Label1,
-      Separator: Separator1,
-      Sub: Sub1,
-      SubTrigger: SubTrigger1,
-      SubContent: SubContent1,
-      CheckboxItem: CheckboxItem1,
-      Portal: Portal1,
-      RadioGroup: RadioGroup1,
-      RadioItem: RadioItem1,
-      Arrow: Arrow1,
-      Preview: Preview1,
-      Auxiliary: Auxiliary1
+  Menu.displayName = MenuType;
+  return {
+    Menu: withStaticProperties(Menu, {
+      Trigger,
+      Content,
+      Item,
+      ItemTitle,
+      ItemSubtitle,
+      ItemIcon,
+      ItemImage,
+      ItemIndicator,
+      Group,
+      Label,
+      Separator,
+      Sub,
+      SubTrigger,
+      SubContent,
+      CheckboxItem,
+      Portal,
+      RadioGroup,
+      RadioItem,
+      Arrow,
+      Preview,
+      Auxiliary
     })
   };
 };