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

package/dist/jsx/createNonNativeContextMenu.native.js

@@ -4,401 +4,445 @@ 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 createNonNativeContextMenu_exports = {};
 __export(createNonNativeContextMenu_exports, {
   CONTEXTMENU_CONTEXT: () => CONTEXTMENU_CONTEXT,
   createNonNativeContextMenu: () => createNonNativeContextMenu
 });
 module.exports = __toCommonJS(createNonNativeContextMenu_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"),
-  import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_create_menu = require("@tamagui/create-menu");
+var import_use_controllable_state = require("@tamagui/use-controllable-state");
+var import_web = require("@tamagui/web");
+var import_react = __toESM(require("react"), 1);
 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 CONTEXTMENU_CONTEXT = "ContextMenuContext";
 function createNonNativeContextMenu(params) {
   var {
-      Menu
-    } = (0, import_create_menu.createBaseMenu)(params),
-    CONTEXT_MENU_NAME = "ContextMenu",
-    {
-      Provider: ContextMenuProvider,
-      useStyledContext: useContextMenuContext
-    } = (0, import_web.createStyledContext)(),
-    ContextMenuComp = function (props) {
-      var {
-          scope,
-          children,
-          onOpenChange,
-          dir,
-          modal = !0,
-          ...rest
-        } = props,
-        [open, setOpen] = import_react.default.useState(!1),
-        triggerRef = import_react.default.useRef(null),
-        handleOpenChange = import_react.default.useCallback(function (open2) {
-          setOpen(open2), onOpenChange?.(open2);
-        }, [onOpenChange]);
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ContextMenuProvider, {
-        scope,
-        triggerId: (0, import_react.useId)(),
-        triggerRef,
-        contentId: (0, import_react.useId)(),
+    Menu
+  } = (0, import_create_menu.createBaseMenu)(params);
+  var CONTEXT_MENU_NAME = "ContextMenu";
+  var {
+    Provider: ContextMenuProvider,
+    useStyledContext: useContextMenuContext
+  } = (0, import_web.createStyledContext)();
+  var ContextMenuComp = function (props) {
+    var {
+      scope,
+      children,
+      onOpenChange,
+      dir,
+      modal = true,
+      ...rest
+    } = props;
+    var [open, setOpen] = import_react.default.useState(false);
+    var triggerRef = import_react.default.useRef(null);
+    var handleOpenChange = import_react.default.useCallback(function (open2, event) {
+      onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(open2, event);
+      if (event === null || event === void 0 ? void 0 : event.defaultPrevented) return;
+      setOpen(open2);
+    }, [onOpenChange]);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ContextMenuProvider, {
+      scope,
+      triggerId: (0, import_react.useId)(),
+      triggerRef,
+      contentId: (0, import_react.useId)(),
+      open,
+      onOpenChange: handleOpenChange,
+      modal,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu, {
+        scope: scope || CONTEXTMENU_CONTEXT,
+        dir,
         open,
         onOpenChange: handleOpenChange,
         modal,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu, {
-          scope: scope || CONTEXTMENU_CONTEXT,
-          dir,
-          open,
-          onOpenChange: handleOpenChange,
-          modal,
-          ...rest,
-          children
-        })
-      });
-    };
+        ...rest,
+        children
+      })
+    });
+  };
   ContextMenuComp.displayName = CONTEXT_MENU_NAME;
-  var TRIGGER_NAME = "ContextMenuTrigger",
-    ContextMenuTrigger = import_web.View.styleable(function (props, forwardedRef) {
-      var {
-          scope,
-          style,
-          disabled = !1,
-          asChild,
-          children,
-          ...triggerProps
-        } = props,
-        context = useContextMenuContext(scope),
-        pointRef = import_react.default.useRef({
-          x: 0,
-          y: 0
-        }),
-        virtualRef = import_react.default.useMemo(function () {
-          return {
-            current: {
-              getBoundingClientRect: function () {
-                if (import_web.isWeb) {
-                  var scrollX = window.scrollX || document.documentElement.scrollLeft,
-                    scrollY = window.scrollY || document.documentElement.scrollTop;
-                  return DOMRect.fromRect({
-                    width: 0,
-                    height: 0,
-                    x: pointRef.current.x - scrollX,
-                    y: pointRef.current.y - scrollY
-                  });
-                }
-                return {
-                  width: 0,
-                  height: 0,
-                  top: 0,
-                  left: 0,
-                  ...pointRef.current
-                };
-              },
-              ...(!import_web.isWeb && {
-                measure: function (c) {
-                  return c(pointRef.current.x, pointRef.current.y, 0, 0);
-                },
-                measureInWindow: function (c) {
-                  return c(pointRef.current.x, pointRef.current.y, 0, 0);
-                }
-              })
+  var TRIGGER_NAME = "ContextMenuTrigger";
+  var ContextMenuTrigger = import_web.View.styleable(function (props, forwardedRef) {
+    var {
+      scope,
+      style,
+      disabled = false,
+      asChild,
+      children,
+      ...triggerProps
+    } = props;
+    var context = useContextMenuContext(scope);
+    var pointRef = import_react.default.useRef({
+      x: 0,
+      y: 0
+    });
+    var virtualRef = import_react.default.useMemo(function () {
+      return {
+        current: {
+          getBoundingClientRect: function () {
+            if (import_web.isWeb) {
+              var scrollX = window.scrollX || document.documentElement.scrollLeft;
+              var scrollY = window.scrollY || document.documentElement.scrollTop;
+              return DOMRect.fromRect({
+                width: 0,
+                height: 0,
+                x: pointRef.current.x - scrollX,
+                y: pointRef.current.y - scrollY
+              });
             }
-          };
-        }, [pointRef.current.x, pointRef.current.y]),
-        longPressTimerRef = import_react.default.useRef(0),
-        clearLongPress = import_react.default.useCallback(function () {
-          return window.clearTimeout(longPressTimerRef.current);
-        }, []),
-        handleOpen = function (event) {
-          import_web.isWeb && (_instanceof(event, MouseEvent) || _instanceof(event, PointerEvent)) ? pointRef.current = {
-            x: event.clientX,
-            y: event.clientY
-          } : pointRef.current = {
-            x: event.nativeEvent.pageX,
-            y: event.nativeEvent.pageY
-          }, context.onOpenChange(!0);
+            return {
+              width: 0,
+              height: 0,
+              top: 0,
+              left: 0,
+              ...pointRef.current
+            };
+          },
+          ...(!import_web.isWeb && {
+            measure: function (c) {
+              return c(pointRef.current.x, pointRef.current.y, 0, 0);
+            },
+            measureInWindow: function (c) {
+              return c(pointRef.current.x, pointRef.current.y, 0, 0);
+            }
+          })
+        }
+      };
+    }, [pointRef.current.x, pointRef.current.y]);
+    var longPressTimerRef = import_react.default.useRef(0);
+    var clearLongPress = import_react.default.useCallback(function () {
+      return window.clearTimeout(longPressTimerRef.current);
+    }, []);
+    var createOpenChangeEvent = function () {
+      var defaultPrevented = false;
+      return {
+        get defaultPrevented() {
+          return defaultPrevented;
+        },
+        preventDefault() {
+          defaultPrevented = true;
+        }
+      };
+    };
+    var handleOpen = function (event) {
+      if (import_web.isWeb && (_instanceof(event, MouseEvent) || _instanceof(event, PointerEvent))) {
+        pointRef.current = {
+          x: event.clientX,
+          y: event.clientY
+        };
+      } else {
+        pointRef.current = {
+          x: event.nativeEvent.pageX,
+          y: event.nativeEvent.pageY
         };
-      import_react.default.useEffect(function () {
-        return clearLongPress;
-      }, [clearLongPress]), import_react.default.useEffect(function () {
-        disabled && clearLongPress();
-      }, [disabled, clearLongPress]);
-      var Comp = asChild ? import_web.Slot : import_web.View;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Anchor, {
-          scope: scope || CONTEXTMENU_CONTEXT,
-          virtualRef
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Comp, {
-          render: "span",
-          componentName: TRIGGER_NAME,
-          id: context.triggerId,
-          "data-state": context.open ? "open" : "closed",
-          "data-disabled": disabled ? "" : void 0,
-          ...triggerProps,
-          ref: (0, import_web.composeRefs)(forwardedRef, context.triggerRef),
-          style: import_web.isWeb ? {
-            WebkitTouchCallout: "none",
-            ...style
-          } : null,
-          ...(import_web.isWeb && {
-            onContextMenu: disabled ? props.onContextMenu : (0, import_web.composeEventHandlers)(props.onContextMenu, function (event) {
-              clearLongPress(), handleOpen(event), event.preventDefault();
-            }),
-            onPointerDown: disabled ? props.onPointerDown : (0, import_web.composeEventHandlers)(props.onPointerDown, function (event) {
-              event.pointerType !== "mouse" && (clearLongPress(), longPressTimerRef.current = window.setTimeout(function () {
-                return handleOpen(event);
-              }, 700));
-            }),
-            onPointerMove: disabled ? props.onPointerMove : (0, import_web.composeEventHandlers)(props.onPointerMove, function (event) {
-              event.pointerType !== "mouse" && clearLongPress();
-            }),
-            onPointerCancel: disabled ? props.onPointerCancel : (0, import_web.composeEventHandlers)(props.onPointerCancel, function (event) {
-              event.pointerType !== "mouse" && clearLongPress();
-            }),
-            onPointerUp: disabled ? props.onPointerUp : (0, import_web.composeEventHandlers)(props.onPointerUp, function (event) {
-              event.pointerType !== "mouse" && clearLongPress();
-            })
+      }
+      var openChangeEvent = createOpenChangeEvent();
+      context.onOpenChange(true, openChangeEvent);
+      return openChangeEvent;
+    };
+    import_react.default.useEffect(function () {
+      return clearLongPress;
+    }, [clearLongPress]);
+    import_react.default.useEffect(function () {
+      return void (disabled && clearLongPress());
+    }, [disabled, clearLongPress]);
+    var Comp = asChild ? import_web.Slot : import_web.View;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Anchor, {
+        scope: scope || CONTEXTMENU_CONTEXT,
+        virtualRef
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Comp, {
+        render: "span",
+        componentName: TRIGGER_NAME,
+        id: context.triggerId,
+        "data-state": context.open ? "open" : "closed",
+        "data-disabled": disabled ? "" : void 0,
+        ...triggerProps,
+        ref: (0, import_web.composeRefs)(forwardedRef, context.triggerRef),
+        style: import_web.isWeb ? {
+          WebkitTouchCallout: "none",
+          ...style
+        } : null,
+        ...(import_web.isWeb && {
+          onContextMenu: disabled ? props.onContextMenu : (0, import_web.composeEventHandlers)(props.onContextMenu, function (event) {
+            clearLongPress();
+            var openChangeEvent = handleOpen(event);
+            if (!openChangeEvent.defaultPrevented) {
+              event.preventDefault();
+            }
           }),
-          ...(!import_web.isWeb && {
-            onLongPress: disabled ? props.onLongPress : (0, import_web.composeEventHandlers)(props.onLongPress, function (event) {
-              clearLongPress(), handleOpen(event), event.preventDefault();
-            })
+          onPointerDown: disabled ? props.onPointerDown : (0, import_web.composeEventHandlers)(props.onPointerDown, function (event) {
+            if (event.pointerType === "mouse") return;
+            clearLongPress();
+            longPressTimerRef.current = window.setTimeout(function () {
+              return handleOpen(event);
+            }, 700);
+          }),
+          onPointerMove: disabled ? props.onPointerMove : (0, import_web.composeEventHandlers)(props.onPointerMove, function (event) {
+            if (event.pointerType === "mouse") return;
+            clearLongPress();
           }),
-          children
-        })]
-      });
+          onPointerCancel: disabled ? props.onPointerCancel : (0, import_web.composeEventHandlers)(props.onPointerCancel, function (event) {
+            if (event.pointerType === "mouse") return;
+            clearLongPress();
+          }),
+          onPointerUp: disabled ? props.onPointerUp : (0, import_web.composeEventHandlers)(props.onPointerUp, function (event) {
+            if (event.pointerType === "mouse") return;
+            clearLongPress();
+          })
+        }),
+        ...(!import_web.isWeb && {
+          onLongPress: disabled ? props.onLongPress : (0, import_web.composeEventHandlers)(props.onLongPress, function (event) {
+            clearLongPress();
+            var openChangeEvent = handleOpen(event);
+            if (!openChangeEvent.defaultPrevented) {
+              event.preventDefault();
+            }
+          })
+        }),
+        children
+      })]
     });
+  });
   ContextMenuTrigger.displayName = TRIGGER_NAME;
-  var PORTAL_NAME = "ContextMenuPortal",
-    ContextMenuPortal = function (props) {
-      var {
-          scope,
-          children,
-          ...portalProps
-        } = props,
-        context = import_web.isAndroid ? useContextMenuContext(scope) : null,
-        content = import_web.isAndroid ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ContextMenuProvider, {
-          ...context,
-          children
-        }) : children;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Portal, {
-        scope: scope || CONTEXTMENU_CONTEXT,
-        ...portalProps,
-        children: content
-      });
-    };
+  var PORTAL_NAME = "ContextMenuPortal";
+  var ContextMenuPortal = function (props) {
+    var {
+      scope,
+      children,
+      ...portalProps
+    } = props;
+    var context = import_web.isAndroid ? useContextMenuContext(scope) : null;
+    var content = import_web.isAndroid ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ContextMenuProvider, {
+      ...context,
+      children
+    }) : children;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Portal, {
+      scope: scope || CONTEXTMENU_CONTEXT,
+      ...portalProps,
+      children: content
+    });
+  };
   ContextMenuPortal.displayName = PORTAL_NAME;
-  var CONTENT_NAME = "ContextMenuContent",
-    ContextMenuContent = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
-      var {
-          scope,
-          ...contentProps
-        } = props,
-        context = useContextMenuContext(scope),
-        hasInteractedOutsideRef = import_react.default.useRef(!1);
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Content, {
-        id: context.contentId,
-        "aria-labelledby": context.triggerId,
-        scope: scope || CONTEXTMENU_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();
-        }),
-        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);
-        })
-      });
+  var CONTENT_NAME = "ContextMenuContent";
+  var ContextMenuContent = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
+    var {
+      scope,
+      ...contentProps
+    } = props;
+    var context = useContextMenuContext(scope);
+    var hasInteractedOutsideRef = import_react.default.useRef(false);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Content, {
+      id: context.contentId,
+      "aria-labelledby": context.triggerId,
+      scope: scope || CONTEXTMENU_CONTEXT,
+      ...contentProps,
+      ref: forwardedRef,
+      onCloseAutoFocus: (0, import_web.composeEventHandlers)(props.onCloseAutoFocus, function (event) {
+        var _context_triggerRef_current;
+        if (!hasInteractedOutsideRef.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;
+      })
     });
+  });
   ContextMenuContent.displayName = CONTENT_NAME;
-  var ITEM_NAME = "ContextMenuItem",
-    ContextMenuItem = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
-      var {
-        scope,
-        ...itemProps
-      } = props;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Item, {
-        componentName: ITEM_NAME,
-        scope: scope || CONTEXTMENU_CONTEXT,
-        ...itemProps,
-        ref: forwardedRef
-      });
+  var ITEM_NAME = "ContextMenuItem";
+  var ContextMenuItem = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
+    var {
+      scope,
+      ...itemProps
+    } = props;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Item, {
+      componentName: ITEM_NAME,
+      scope: scope || CONTEXTMENU_CONTEXT,
+      ...itemProps,
+      ref: forwardedRef
     });
+  });
   ContextMenuItem.displayName = ITEM_NAME;
-  var CHECKBOX_ITEM_NAME = "ContextMenuCheckboxItem",
-    ContextMenuCheckboxItem = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
-      var {
-        scope,
-        ...checkboxItemProps
-      } = props;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.CheckboxItem, {
-        componentName: CHECKBOX_ITEM_NAME,
-        scope: scope || CONTEXTMENU_CONTEXT,
-        ...checkboxItemProps,
-        ref: forwardedRef
-      });
+  var CHECKBOX_ITEM_NAME = "ContextMenuCheckboxItem";
+  var ContextMenuCheckboxItem = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
+    var {
+      scope,
+      ...checkboxItemProps
+    } = props;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.CheckboxItem, {
+      componentName: CHECKBOX_ITEM_NAME,
+      scope: scope || CONTEXTMENU_CONTEXT,
+      ...checkboxItemProps,
+      ref: forwardedRef
     });
+  });
   ContextMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
-  var RADIO_GROUP_NAME = "ContextMenuRadioGroup",
-    ContextMenuRadioGroup = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
-      var {
-        scope,
-        ...radioGroupProps
-      } = props;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.RadioGroup, {
-        scope: scope || CONTEXTMENU_CONTEXT,
-        ...radioGroupProps,
-        ref: forwardedRef
-      });
+  var RADIO_GROUP_NAME = "ContextMenuRadioGroup";
+  var ContextMenuRadioGroup = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
+    var {
+      scope,
+      ...radioGroupProps
+    } = props;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.RadioGroup, {
+      scope: scope || CONTEXTMENU_CONTEXT,
+      ...radioGroupProps,
+      ref: forwardedRef
     });
+  });
   ContextMenuRadioGroup.displayName = RADIO_GROUP_NAME;
-  var RADIO_ITEM_NAME = "ContextMenuRadioItem",
-    ContextMenuRadioItem = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
-      var {
-        scope,
-        ...radioItemProps
-      } = props;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.RadioItem, {
-        componentName: RADIO_ITEM_NAME,
-        scope: scope || CONTEXTMENU_CONTEXT,
-        ...radioItemProps,
-        ref: forwardedRef
-      });
+  var RADIO_ITEM_NAME = "ContextMenuRadioItem";
+  var ContextMenuRadioItem = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
+    var {
+      scope,
+      ...radioItemProps
+    } = props;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.RadioItem, {
+      componentName: RADIO_ITEM_NAME,
+      scope: scope || CONTEXTMENU_CONTEXT,
+      ...radioItemProps,
+      ref: forwardedRef
     });
+  });
   ContextMenuRadioItem.displayName = RADIO_ITEM_NAME;
-  var INDICATOR_NAME = "ContextMenuItemIndicator",
-    ContextMenuItemIndicator = Menu.ItemIndicator.styleable(function (props, forwardedRef) {
-      var {
-        scope,
-        ...itemIndicatorProps
-      } = props;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.ItemIndicator, {
-        componentName: INDICATOR_NAME,
-        scope: scope || CONTEXTMENU_CONTEXT,
-        ...itemIndicatorProps,
-        ref: forwardedRef
-      });
+  var INDICATOR_NAME = "ContextMenuItemIndicator";
+  var ContextMenuItemIndicator = Menu.ItemIndicator.styleable(function (props, forwardedRef) {
+    var {
+      scope,
+      ...itemIndicatorProps
+    } = props;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.ItemIndicator, {
+      componentName: INDICATOR_NAME,
+      scope: scope || CONTEXTMENU_CONTEXT,
+      ...itemIndicatorProps,
+      ref: forwardedRef
     });
+  });
   ContextMenuItemIndicator.displayName = INDICATOR_NAME;
-  var SUB_NAME = "ContextMenuSub",
-    ContextMenuSub = function (props) {
-      var {
-          scope,
-          children,
-          onOpenChange,
-          open: openProp,
-          defaultOpen,
-          ...rest
-        } = props,
-        [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
-          prop: openProp,
-          defaultProp: defaultOpen,
-          onChange: onOpenChange
-        });
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Sub, {
-        scope: scope || CONTEXTMENU_CONTEXT,
-        open,
-        onOpenChange: setOpen,
-        ...rest,
-        children
-      });
-    };
+  var SUB_NAME = "ContextMenuSub";
+  var ContextMenuSub = function (props) {
+    var {
+      scope,
+      children,
+      onOpenChange,
+      open: openProp,
+      defaultOpen,
+      ...rest
+    } = props;
+    var [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
+    });
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Sub, {
+      scope: scope || CONTEXTMENU_CONTEXT,
+      open,
+      onOpenChange: setOpen,
+      ...rest,
+      children
+    });
+  };
   ContextMenuSub.displayName = SUB_NAME;
-  var SUB_TRIGGER_NAME = "ContextMenuSubTrigger",
-    ContextMenuSubTrigger = import_web.View.styleable(function (props, forwardedRef) {
-      var {
-        scope,
-        ...subTriggerProps
-      } = props;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.SubTrigger, {
-        componentName: SUB_TRIGGER_NAME,
-        scope: scope || CONTEXTMENU_CONTEXT,
-        ...subTriggerProps,
-        ref: forwardedRef
-      });
+  var SUB_TRIGGER_NAME = "ContextMenuSubTrigger";
+  var ContextMenuSubTrigger = import_web.View.styleable(function (props, forwardedRef) {
+    var {
+      scope,
+      ...subTriggerProps
+    } = props;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.SubTrigger, {
+      componentName: SUB_TRIGGER_NAME,
+      scope: scope || CONTEXTMENU_CONTEXT,
+      ...subTriggerProps,
+      ref: forwardedRef
     });
+  });
   ContextMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
-  var SUB_CONTENT_NAME = "ContextMenuSubContent",
-    ContextMenuSubContent = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
-      var {
-        scope,
-        ...subContentProps
-      } = props;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.SubContent, {
-        scope: scope || CONTEXTMENU_CONTEXT,
-        ...subContentProps,
-        ref: forwardedRef,
-        style: import_web.isWeb ? {
-          ...props.style,
+  var SUB_CONTENT_NAME = "ContextMenuSubContent";
+  var ContextMenuSubContent = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
+    var {
+      scope,
+      ...subContentProps
+    } = props;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.SubContent, {
+      scope: scope || CONTEXTMENU_CONTEXT,
+      ...subContentProps,
+      ref: forwardedRef,
+      style: import_web.isWeb ? {
+        ...props.style,
+        ...{
           "--tamagui-context-menu-content-transform-origin": "var(--tamagui-popper-transform-origin)",
           "--tamagui-context-menu-content-available-width": "var(--tamagui-popper-available-width)",
           "--tamagui-context-menu-content-available-height": "var(--tamagui-popper-available-height)",
           "--tamagui-context-menu-trigger-width": "var(--tamagui-popper-anchor-width)",
           "--tamagui-context-menu-trigger-height": "var(--tamagui-popper-anchor-height)"
-        } : null
-      });
+        }
+      } : null
     });
+  });
   ContextMenuSubContent.displayName = SUB_CONTENT_NAME;
-  var ARROW_NAME = "ContextMenuArrow",
-    ContextMenuArrow = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
-      var {
-        scope,
-        ...arrowProps
-      } = props;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Arrow, {
-        componentName: ARROW_NAME,
-        scope: scope || CONTEXTMENU_CONTEXT,
-        ...arrowProps,
-        ref: forwardedRef
-      });
+  var ARROW_NAME = "ContextMenuArrow";
+  var ContextMenuArrow = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
+    var {
+      scope,
+      ...arrowProps
+    } = props;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Arrow, {
+      componentName: ARROW_NAME,
+      scope: scope || CONTEXTMENU_CONTEXT,
+      ...arrowProps,
+      ref: forwardedRef
     });
+  });
   ContextMenuArrow.displayName = ARROW_NAME;
-  var ContextMenuGroup = Menu.Group,
-    ContextMenuLabel = Menu.Label,
-    ContextMenuSeparator = Menu.Separator,
-    ContextMenuItemTitle = Menu.ItemTitle,
-    ContextMenuItemSubTitle = Menu.ItemSubtitle,
-    ContextMenuItemImage = Menu.ItemImage,
-    ContextMenuItemIcon = Menu.ItemIcon,
-    ContextMenuPreview = function () {
-      return null;
-    };
+  var ContextMenuGroup = Menu.Group;
+  var ContextMenuLabel = Menu.Label;
+  var ContextMenuSeparator = Menu.Separator;
+  var ContextMenuItemTitle = Menu.ItemTitle;
+  var ContextMenuItemSubTitle = Menu.ItemSubtitle;
+  var ContextMenuItemImage = Menu.ItemImage;
+  var ContextMenuItemIcon = Menu.ItemIcon;
+  var ContextMenuPreview = function () {
+    return null;
+  };
   return (0, import_web.withStaticProperties)(ContextMenuComp, {
     Root: ContextMenuComp,
     Trigger: ContextMenuTrigger,