@tamagui/context-menu 2.7.7 → 3.0.0-beta.637.1

package/dist/esm/createNonNativeContextMenu.native.js

@@ -1,430 +1,374 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createRefComponent } from "@tamagui/compose-refs";
 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 { Slot, View, composeEventHandlers, composeRefs, createStyledContext, createStyledHOC, isAndroid, isWeb, withStaticProperties } from "@tamagui/web";
 import React, { useId } from "react";
+
 function _instanceof(left, right) {
-  if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
-    return !!right[Symbol.hasInstance](left);
-  } else {
-    return 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
-  } = createBaseMenu(params);
-  var CONTEXT_MENU_NAME = "ContextMenu";
-  var {
-    Provider: ContextMenuProvider,
-    useStyledContext: useContextMenuContext
-  } = createStyledContext();
-  var ContextMenuComp = function (props) {
-    var {
-      scope,
-      children,
-      onOpenChange,
-      dir,
-      modal = true,
-      ...rest
-    } = props;
-    var [open, setOpen] = React.useState(false);
-    var triggerRef = React.useRef(null);
-    var handleOpenChange = React.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__ */_jsx(ContextMenuProvider, {
-      scope,
-      triggerId: useId(),
-      triggerRef,
-      contentId: useId(),
-      open,
-      onOpenChange: handleOpenChange,
-      modal,
-      children: /* @__PURE__ */_jsx(Menu, {
-        scope: scope || CONTEXTMENU_CONTEXT,
-        dir,
-        open,
-        onOpenChange: handleOpenChange,
-        modal,
-        ...rest,
-        children
-      })
-    });
-  };
-  ContextMenuComp.displayName = CONTEXT_MENU_NAME;
-  var TRIGGER_NAME = "ContextMenuTrigger";
-  var ContextMenuTrigger = View.styleable(function (props, forwardedRef) {
-    var {
-      scope,
-      style,
-      disabled = false,
-      asChild,
-      children,
-      ...triggerProps
-    } = props;
-    var context = useContextMenuContext(scope);
-    var pointRef = React.useRef({
-      x: 0,
-      y: 0
-    });
-    var virtualRef = React.useMemo(function () {
-      return {
-        current: {
-          getBoundingClientRect: function () {
-            if (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
-              });
-            }
-            return {
-              width: 0,
-              height: 0,
-              top: 0,
-              left: 0,
-              ...pointRef.current
-            };
-          },
-          ...(!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 = React.useRef(0);
-    var clearLongPress = React.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 (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
-        };
-      }
-      var openChangeEvent = createOpenChangeEvent();
-      context.onOpenChange(true, openChangeEvent);
-      return openChangeEvent;
-    };
-    React.useEffect(function () {
-      return clearLongPress;
-    }, [clearLongPress]);
-    React.useEffect(function () {
-      return void (disabled && clearLongPress());
-    }, [disabled, clearLongPress]);
-    var Comp = asChild ? Slot : View;
-    return /* @__PURE__ */_jsxs(_Fragment, {
-      children: [/* @__PURE__ */_jsx(Menu.Anchor, {
-        scope: scope || CONTEXTMENU_CONTEXT,
-        virtualRef
-      }), /* @__PURE__ */_jsx(Comp, {
-        render: "span",
-        componentName: TRIGGER_NAME,
-        id: context.triggerId,
-        "data-state": context.open ? "open" : "closed",
-        "data-disabled": disabled ? "" : void 0,
-        ...triggerProps,
-        ref: composeRefs(forwardedRef, context.triggerRef),
-        style: isWeb ? {
-          WebkitTouchCallout: "none",
-          ...style
-        } : null,
-        ...(isWeb && {
-          onContextMenu: disabled ? props.onContextMenu : composeEventHandlers(props.onContextMenu, function (event) {
-            clearLongPress();
-            var openChangeEvent = handleOpen(event);
-            if (!openChangeEvent.defaultPrevented) {
-              event.preventDefault();
-            }
-          }),
-          onPointerDown: disabled ? props.onPointerDown : composeEventHandlers(props.onPointerDown, function (event) {
-            if (event.pointerType === "mouse") return;
-            clearLongPress();
-            longPressTimerRef.current = window.setTimeout(function () {
-              return handleOpen(event);
-            }, 700);
-          }),
-          onPointerMove: disabled ? props.onPointerMove : composeEventHandlers(props.onPointerMove, function (event) {
-            if (event.pointerType === "mouse") return;
-            clearLongPress();
-          }),
-          onPointerCancel: disabled ? props.onPointerCancel : composeEventHandlers(props.onPointerCancel, function (event) {
-            if (event.pointerType === "mouse") return;
-            clearLongPress();
-          }),
-          onPointerUp: disabled ? props.onPointerUp : composeEventHandlers(props.onPointerUp, function (event) {
-            if (event.pointerType === "mouse") return;
-            clearLongPress();
-          })
-        }),
-        ...(!isWeb && {
-          onLongPress: disabled ? props.onLongPress : composeEventHandlers(props.onLongPress, function (event) {
-            clearLongPress();
-            var openChangeEvent = handleOpen(event);
-            if (!openChangeEvent.defaultPrevented) {
-              event.preventDefault();
-            }
-          })
-        }),
-        children
-      })]
-    });
-  });
-  ContextMenuTrigger.displayName = TRIGGER_NAME;
-  var PORTAL_NAME = "ContextMenuPortal";
-  var ContextMenuPortal = function (props) {
-    var {
-      scope,
-      children,
-      ...portalProps
-    } = props;
-    var context = isAndroid ? useContextMenuContext(scope) : null;
-    var content = isAndroid ? /* @__PURE__ */_jsx(ContextMenuProvider, {
-      ...context,
-      children
-    }) : children;
-    return /* @__PURE__ */_jsx(Menu.Portal, {
-      scope: scope || CONTEXTMENU_CONTEXT,
-      ...portalProps,
-      children: content
-    });
-  };
-  ContextMenuPortal.displayName = PORTAL_NAME;
-  var CONTENT_NAME = "ContextMenuContent";
-  var ContextMenuContent = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-    var {
-      scope,
-      ...contentProps
-    } = props;
-    var context = useContextMenuContext(scope);
-    var hasInteractedOutsideRef = React.useRef(false);
-    return /* @__PURE__ */_jsx(Menu.Content, {
-      id: context.contentId,
-      "aria-labelledby": context.triggerId,
-      scope: scope || CONTEXTMENU_CONTEXT,
-      ...contentProps,
-      ref: forwardedRef,
-      onCloseAutoFocus: 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: 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";
-  var ContextMenuItem = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-    var {
-      scope,
-      ...itemProps
-    } = props;
-    return /* @__PURE__ */_jsx(Menu.Item, {
-      componentName: ITEM_NAME,
-      scope: scope || CONTEXTMENU_CONTEXT,
-      ...itemProps,
-      ref: forwardedRef
-    });
-  });
-  ContextMenuItem.displayName = ITEM_NAME;
-  var CHECKBOX_ITEM_NAME = "ContextMenuCheckboxItem";
-  var ContextMenuCheckboxItem = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-    var {
-      scope,
-      ...checkboxItemProps
-    } = props;
-    return /* @__PURE__ */_jsx(Menu.CheckboxItem, {
-      componentName: CHECKBOX_ITEM_NAME,
-      scope: scope || CONTEXTMENU_CONTEXT,
-      ...checkboxItemProps,
-      ref: forwardedRef
-    });
-  });
-  ContextMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
-  var RADIO_GROUP_NAME = "ContextMenuRadioGroup";
-  var ContextMenuRadioGroup = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-    var {
-      scope,
-      ...radioGroupProps
-    } = props;
-    return /* @__PURE__ */_jsx(Menu.RadioGroup, {
-      scope: scope || CONTEXTMENU_CONTEXT,
-      ...radioGroupProps,
-      ref: forwardedRef
-    });
-  });
-  ContextMenuRadioGroup.displayName = RADIO_GROUP_NAME;
-  var RADIO_ITEM_NAME = "ContextMenuRadioItem";
-  var ContextMenuRadioItem = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-    var {
-      scope,
-      ...radioItemProps
-    } = props;
-    return /* @__PURE__ */_jsx(Menu.RadioItem, {
-      componentName: RADIO_ITEM_NAME,
-      scope: scope || CONTEXTMENU_CONTEXT,
-      ...radioItemProps,
-      ref: forwardedRef
-    });
-  });
-  ContextMenuRadioItem.displayName = RADIO_ITEM_NAME;
-  var INDICATOR_NAME = "ContextMenuItemIndicator";
-  var ContextMenuItemIndicator = Menu.ItemIndicator.styleable(function (props, forwardedRef) {
-    var {
-      scope,
-      ...itemIndicatorProps
-    } = props;
-    return /* @__PURE__ */_jsx(Menu.ItemIndicator, {
-      componentName: INDICATOR_NAME,
-      scope: scope || CONTEXTMENU_CONTEXT,
-      ...itemIndicatorProps,
-      ref: forwardedRef
-    });
-  });
-  ContextMenuItemIndicator.displayName = INDICATOR_NAME;
-  var SUB_NAME = "ContextMenuSub";
-  var ContextMenuSub = function (props) {
-    var {
-      scope,
-      children,
-      onOpenChange,
-      open: openProp,
-      defaultOpen,
-      ...rest
-    } = props;
-    var [open, setOpen] = useControllableState({
-      prop: openProp,
-      defaultProp: defaultOpen,
-      onChange: onOpenChange
-    });
-    return /* @__PURE__ */_jsx(Menu.Sub, {
-      scope: scope || CONTEXTMENU_CONTEXT,
-      open,
-      onOpenChange: setOpen,
-      ...rest,
-      children
-    });
-  };
-  ContextMenuSub.displayName = SUB_NAME;
-  var SUB_TRIGGER_NAME = "ContextMenuSubTrigger";
-  var ContextMenuSubTrigger = View.styleable(function (props, forwardedRef) {
-    var {
-      scope,
-      ...subTriggerProps
-    } = props;
-    return /* @__PURE__ */_jsx(Menu.SubTrigger, {
-      componentName: SUB_TRIGGER_NAME,
-      scope: scope || CONTEXTMENU_CONTEXT,
-      ...subTriggerProps,
-      ref: forwardedRef
-    });
-  });
-  ContextMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
-  var SUB_CONTENT_NAME = "ContextMenuSubContent";
-  var ContextMenuSubContent = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-    var {
-      scope,
-      ...subContentProps
-    } = props;
-    return /* @__PURE__ */_jsx(Menu.SubContent, {
-      scope: scope || CONTEXTMENU_CONTEXT,
-      ...subContentProps,
-      ref: forwardedRef,
-      style: 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
-    });
-  });
-  ContextMenuSubContent.displayName = SUB_CONTENT_NAME;
-  var ARROW_NAME = "ContextMenuArrow";
-  var ContextMenuArrow = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-    var {
-      scope,
-      ...arrowProps
-    } = props;
-    return /* @__PURE__ */_jsx(Menu.Arrow, {
-      componentName: ARROW_NAME,
-      scope: scope || CONTEXTMENU_CONTEXT,
-      ...arrowProps,
-      ref: forwardedRef
-    });
-  });
-  ContextMenuArrow.displayName = ARROW_NAME;
-  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 withStaticProperties(ContextMenuComp, {
-    Root: ContextMenuComp,
-    Trigger: ContextMenuTrigger,
-    Portal: ContextMenuPortal,
-    Content: ContextMenuContent,
-    Group: ContextMenuGroup,
-    Label: ContextMenuLabel,
-    Item: ContextMenuItem,
-    CheckboxItem: ContextMenuCheckboxItem,
-    RadioGroup: ContextMenuRadioGroup,
-    RadioItem: ContextMenuRadioItem,
-    ItemIndicator: ContextMenuItemIndicator,
-    Separator: ContextMenuSeparator,
-    Arrow: ContextMenuArrow,
-    Sub: ContextMenuSub,
-    SubTrigger: ContextMenuSubTrigger,
-    SubContent: ContextMenuSubContent,
-    ItemTitle: ContextMenuItemTitle,
-    ItemSubtitle: ContextMenuItemSubTitle,
-    ItemIcon: ContextMenuItemIcon,
-    ItemImage: ContextMenuItemImage,
-    Preview: ContextMenuPreview
-  });
+function createNonNativeContextMenu() {
+	var { Menu } = createBaseMenu();
+	var CONTEXT_MENU_NAME = "ContextMenu";
+	var { Provider: ContextMenuProvider, useStyledContext: useContextMenuContext } = createStyledContext();
+	var ContextMenuComp = function(props) {
+		var { scope, children, onOpenChange, open: openProp, defaultOpen, dir, modal = true, ...rest } = props;
+		var [open, setOpen] = useControllableState({
+			prop: openProp,
+			defaultProp: defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false
+		});
+		var triggerRef = React.useRef(null);
+		var handleOpenChange = React.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, setOpen]);
+		return /* @__PURE__ */ jsx(ContextMenuProvider, {
+			scope,
+			triggerId: useId(),
+			triggerRef,
+			contentId: useId(),
+			open,
+			onOpenChange: handleOpenChange,
+			modal,
+			children: /* @__PURE__ */ jsx(Menu, {
+				scope: scope || "ContextMenuContext",
+				dir,
+				open,
+				onOpenChange: handleOpenChange,
+				modal,
+				...rest,
+				children
+			})
+		});
+	};
+	ContextMenuComp.displayName = CONTEXT_MENU_NAME;
+	var TRIGGER_NAME = "ContextMenuTrigger";
+	var ContextMenuTrigger = createStyledHOC(View, function(props, forwardedRef) {
+		var { scope, style, className, disabled = false, asChild, children, ...triggerProps } = props;
+		var context = useContextMenuContext(scope);
+		var pointRef = React.useRef({
+			x: 0,
+			y: 0
+		});
+		var virtualRef = React.useMemo(function() {
+			return { current: {
+				getBoundingClientRect: function() {
+					if (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
+						});
+					}
+					return {
+						width: 0,
+						height: 0,
+						top: 0,
+						left: 0,
+						...pointRef.current
+					};
+				},
+				...!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 = React.useRef(0);
+		var clearLongPress = React.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 (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
+				};
+			}
+			var openChangeEvent = createOpenChangeEvent();
+			context.onOpenChange(true, openChangeEvent);
+			return openChangeEvent;
+		};
+		React.useEffect(function() {
+			return clearLongPress;
+		}, [clearLongPress]);
+		React.useEffect(function() {
+			return void (disabled && clearLongPress());
+		}, [disabled, clearLongPress]);
+		var Comp = asChild ? Slot : View;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Menu.Anchor, {
+			scope: scope || "ContextMenuContext",
+			virtualRef
+		}), /* @__PURE__ */ jsx(Comp, {
+			render: "span",
+			className: `is_${TRIGGER_NAME} ${className || ""}`.trim(),
+			id: context.triggerId,
+			"data-state": context.open ? "open" : "closed",
+			"data-disabled": disabled ? "" : void 0,
+			...triggerProps,
+			ref: composeRefs(forwardedRef, context.triggerRef),
+			style: isWeb ? {
+				WebkitTouchCallout: "none",
+				...style
+			} : null,
+			...isWeb && {
+				onContextMenu: disabled ? props.onContextMenu : composeEventHandlers(props.onContextMenu, function(event) {
+					clearLongPress();
+					var openChangeEvent = handleOpen(event);
+					if (!openChangeEvent.defaultPrevented) {
+						event.preventDefault();
+					}
+				}),
+				onPointerDown: disabled ? props.onPointerDown : composeEventHandlers(props.onPointerDown, function(event) {
+					if (event.pointerType === "mouse") return;
+					clearLongPress();
+					longPressTimerRef.current = window.setTimeout(function() {
+						return handleOpen(event);
+					}, 700);
+				}),
+				onPointerMove: disabled ? props.onPointerMove : composeEventHandlers(props.onPointerMove, function(event) {
+					if (event.pointerType === "mouse") return;
+					clearLongPress();
+				}),
+				onPointerCancel: disabled ? props.onPointerCancel : composeEventHandlers(props.onPointerCancel, function(event) {
+					if (event.pointerType === "mouse") return;
+					clearLongPress();
+				}),
+				onPointerUp: disabled ? props.onPointerUp : composeEventHandlers(props.onPointerUp, function(event) {
+					if (event.pointerType === "mouse") return;
+					clearLongPress();
+				})
+			},
+			...!isWeb && { onLongPress: disabled ? props.onLongPress : composeEventHandlers(props.onLongPress, function(event) {
+				clearLongPress();
+				var openChangeEvent = handleOpen(event);
+				if (!openChangeEvent.defaultPrevented) {
+					event.preventDefault();
+				}
+			}) },
+			children
+		})] });
+	});
+	ContextMenuTrigger.displayName = TRIGGER_NAME;
+	var PORTAL_NAME = "ContextMenuPortal";
+	var ContextMenuPortal = function(props) {
+		var { scope, children, ...portalProps } = props;
+		var context = isAndroid ? useContextMenuContext(scope) : null;
+		var content = isAndroid ? /* @__PURE__ */ jsx(ContextMenuProvider, {
+			...context,
+			children
+		}) : children;
+		return /* @__PURE__ */ jsx(Menu.Portal, {
+			scope: scope || "ContextMenuContext",
+			...portalProps,
+			children: content
+		});
+	};
+	ContextMenuPortal.displayName = PORTAL_NAME;
+	var CONTENT_NAME = "ContextMenuContent";
+	var ContextMenuContent = createStyledHOC(Menu.Content, function(props, forwardedRef) {
+		var { scope, ...contentProps } = props;
+		var context = useContextMenuContext(scope);
+		var hasInteractedOutsideRef = React.useRef(false);
+		return /* @__PURE__ */ jsx(Menu.Content, {
+			id: context.contentId,
+			"aria-labelledby": context.triggerId,
+			scope: scope || "ContextMenuContext",
+			...contentProps,
+			ref: forwardedRef,
+			onCloseAutoFocus: 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.cancel();
+			}),
+			onInteractOutside: composeEventHandlers(props.onInteractOutside, function(event) {
+				if (event.interaction !== "pointer" || !event.event) return;
+				var originalEvent = event.event;
+				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";
+	var ContextMenuItem = createRefComponent(function(props, forwardedRef) {
+		var { scope, className, ...itemProps } = props;
+		return /* @__PURE__ */ jsx(Menu.Item, {
+			className: `is_${ITEM_NAME} ${className || ""}`.trim(),
+			scope: scope || "ContextMenuContext",
+			...itemProps,
+			ref: forwardedRef
+		});
+	});
+	ContextMenuItem.displayName = ITEM_NAME;
+	var CHECKBOX_ITEM_NAME = "ContextMenuCheckboxItem";
+	var ContextMenuCheckboxItem = createRefComponent(function(props, forwardedRef) {
+		var { scope, className, ...checkboxItemProps } = props;
+		return /* @__PURE__ */ jsx(Menu.CheckboxItem, {
+			className: `is_${CHECKBOX_ITEM_NAME} ${className || ""}`.trim(),
+			scope: scope || "ContextMenuContext",
+			...checkboxItemProps,
+			ref: forwardedRef
+		});
+	});
+	ContextMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
+	var RADIO_GROUP_NAME = "ContextMenuRadioGroup";
+	var ContextMenuRadioGroup = createRefComponent(function(props, forwardedRef) {
+		var { scope, ...radioGroupProps } = props;
+		return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+			scope: scope || "ContextMenuContext",
+			...radioGroupProps,
+			ref: forwardedRef
+		});
+	});
+	ContextMenuRadioGroup.displayName = RADIO_GROUP_NAME;
+	var RADIO_ITEM_NAME = "ContextMenuRadioItem";
+	var ContextMenuRadioItem = createRefComponent(function(props, forwardedRef) {
+		var { scope, className, ...radioItemProps } = props;
+		return /* @__PURE__ */ jsx(Menu.RadioItem, {
+			className: `is_${RADIO_ITEM_NAME} ${className || ""}`.trim(),
+			scope: scope || "ContextMenuContext",
+			...radioItemProps,
+			ref: forwardedRef
+		});
+	});
+	ContextMenuRadioItem.displayName = RADIO_ITEM_NAME;
+	var INDICATOR_NAME = "ContextMenuItemIndicator";
+	var ContextMenuItemIndicator = createStyledHOC(Menu.ItemIndicator, function(props, forwardedRef) {
+		var { scope, className, ...itemIndicatorProps } = props;
+		return /* @__PURE__ */ jsx(Menu.ItemIndicator, {
+			className: `is_${INDICATOR_NAME} ${className || ""}`.trim(),
+			scope: scope || "ContextMenuContext",
+			...itemIndicatorProps,
+			ref: forwardedRef
+		});
+	});
+	ContextMenuItemIndicator.displayName = INDICATOR_NAME;
+	var SUB_NAME = "ContextMenuSub";
+	var ContextMenuSub = function(props) {
+		var { scope, children, onOpenChange, open: openProp, defaultOpen, ...rest } = props;
+		var [open, setOpen] = useControllableState({
+			prop: openProp,
+			defaultProp: defaultOpen,
+			onChange: onOpenChange
+		});
+		return /* @__PURE__ */ jsx(Menu.Sub, {
+			scope: scope || "ContextMenuContext",
+			open,
+			onOpenChange: setOpen,
+			...rest,
+			children
+		});
+	};
+	ContextMenuSub.displayName = SUB_NAME;
+	var SUB_TRIGGER_NAME = "ContextMenuSubTrigger";
+	var ContextMenuSubTrigger = createStyledHOC(View, function(props, forwardedRef) {
+		var { scope, className, ...subTriggerProps } = props;
+		return /* @__PURE__ */ jsx(Menu.SubTrigger, {
+			className: `is_${SUB_TRIGGER_NAME} ${className || ""}`.trim(),
+			scope: scope || "ContextMenuContext",
+			...subTriggerProps,
+			ref: forwardedRef
+		});
+	});
+	ContextMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
+	var SUB_CONTENT_NAME = "ContextMenuSubContent";
+	var ContextMenuSubContent = createStyledHOC(Menu.SubContent, function(props, forwardedRef) {
+		var { scope, ...subContentProps } = props;
+		return /* @__PURE__ */ jsx(Menu.SubContent, {
+			scope: scope || "ContextMenuContext",
+			...subContentProps,
+			ref: forwardedRef,
+			style: 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
+		});
+	});
+	ContextMenuSubContent.displayName = SUB_CONTENT_NAME;
+	var ARROW_NAME = "ContextMenuArrow";
+	var ContextMenuArrow = createRefComponent(function(props, forwardedRef) {
+		var { scope, className, ...arrowProps } = props;
+		return /* @__PURE__ */ jsx(Menu.Arrow, {
+			className: `is_${ARROW_NAME} ${className || ""}`.trim(),
+			scope: scope || "ContextMenuContext",
+			...arrowProps,
+			ref: forwardedRef
+		});
+	});
+	ContextMenuArrow.displayName = ARROW_NAME;
+	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 withStaticProperties(ContextMenuComp, {
+		Root: ContextMenuComp,
+		Trigger: ContextMenuTrigger,
+		Portal: ContextMenuPortal,
+		Content: ContextMenuContent,
+		Group: ContextMenuGroup,
+		Label: ContextMenuLabel,
+		Item: ContextMenuItem,
+		CheckboxItem: ContextMenuCheckboxItem,
+		RadioGroup: ContextMenuRadioGroup,
+		RadioItem: ContextMenuRadioItem,
+		ItemIndicator: ContextMenuItemIndicator,
+		Separator: ContextMenuSeparator,
+		Arrow: ContextMenuArrow,
+		Sub: ContextMenuSub,
+		SubTrigger: ContextMenuSubTrigger,
+		SubContent: ContextMenuSubContent,
+		ItemTitle: ContextMenuItemTitle,
+		ItemSubtitle: ContextMenuItemSubTitle,
+		ItemIcon: ContextMenuItemIcon,
+		ItemImage: ContextMenuItemImage,
+		Preview: ContextMenuPreview
+	});
 }
+
 export { CONTEXTMENU_CONTEXT, createNonNativeContextMenu };
 //# sourceMappingURL=createNonNativeContextMenu.native.js.map