@tamagui/context-menu 2.0.0-1

package/dist/esm/createNonNativeContextMenu.js

@@ -0,0 +1,307 @@
+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 React, { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const CONTEXTMENU_CONTEXT = "ContextMenuContext";
+function createNonNativeContextMenu(params) {
+  const { Menu } = createBaseMenu(params), CONTEXT_MENU_NAME = "ContextMenu", { Provider: ContextMenuProvider, useStyledContext: useContextMenuContext } = createStyledContext(), ContextMenuComp = (props) => {
+    const { scope, children, onOpenChange, dir, modal = !0, ...rest } = props, [open, setOpen] = React.useState(!1), triggerRef = React.useRef(null), handleOpenChange = React.useCallback(
+      (open2) => {
+        setOpen(open2), onOpenChange?.(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;
+  const TRIGGER_NAME = "ContextMenuTrigger", ContextMenuTrigger = View.styleable(
+    (props, forwardedRef) => {
+      const { scope, style, disabled = !1, asChild, children, ...triggerProps } = props, context = useContextMenuContext(scope), pointRef = React.useRef({ x: 0, y: 0 }), virtualRef = React.useMemo(
+        () => ({
+          current: {
+            getBoundingClientRect: () => isWeb ? DOMRect.fromRect({ width: 0, height: 0, ...pointRef.current }) : { width: 0, height: 0, top: 0, left: 0, ...pointRef.current },
+            ...!isWeb && {
+              measure: (c) => c(pointRef.current.x, pointRef.current.y, 0, 0),
+              measureInWindow: (c) => c(pointRef.current.x, pointRef.current.y, 0, 0)
+            }
+          }
+        }),
+        [pointRef.current.x, pointRef.current.y]
+      ), longPressTimerRef = React.useRef(0), clearLongPress = React.useCallback(
+        () => window.clearTimeout(longPressTimerRef.current),
+        []
+      ), handleOpen = (event) => {
+        isWeb && (event instanceof MouseEvent || event instanceof PointerEvent) ? pointRef.current = { x: event.clientX, y: event.clientY } : pointRef.current = {
+          x: event.nativeEvent.pageX,
+          y: event.nativeEvent.pageY
+        }, context.onOpenChange(!0);
+      };
+      React.useEffect(() => clearLongPress, [clearLongPress]), React.useEffect(
+        () => void (disabled && clearLongPress()),
+        [disabled, clearLongPress]
+      );
+      const Comp = asChild ? Slot : View;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Menu.Anchor, { scope: scope || CONTEXTMENU_CONTEXT, virtualRef }),
+        /* @__PURE__ */ jsx(
+          Comp,
+          {
+            tag: "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, (event) => {
+                clearLongPress(), handleOpen(event), event.preventDefault();
+              }),
+              onPointerDown: disabled ? props.onPointerDown : composeEventHandlers(props.onPointerDown, (event) => {
+                event.pointerType !== "mouse" && (clearLongPress(), longPressTimerRef.current = window.setTimeout(
+                  () => handleOpen(event),
+                  700
+                ));
+              }),
+              onPointerMove: disabled ? props.onPointerMove : composeEventHandlers(props.onPointerMove, (event) => {
+                event.pointerType !== "mouse" && clearLongPress();
+              }),
+              onPointerCancel: disabled ? props.onPointerCancel : composeEventHandlers(props.onPointerCancel, (event) => {
+                event.pointerType !== "mouse" && clearLongPress();
+              }),
+              onPointerUp: disabled ? props.onPointerUp : composeEventHandlers(props.onPointerUp, (event) => {
+                event.pointerType !== "mouse" && clearLongPress();
+              })
+            },
+            ...!isWeb && {
+              onLongPress: disabled ? props.onLongPress : composeEventHandlers(props.onLongPress, (event) => {
+                clearLongPress(), handleOpen(event), event.preventDefault();
+              })
+            },
+            children
+          }
+        )
+      ] });
+    }
+  );
+  ContextMenuTrigger.displayName = TRIGGER_NAME;
+  const PORTAL_NAME = "ContextMenuPortal", ContextMenuPortal = (props) => {
+    const { scope, children, ...portalProps } = props, context = isAndroid ? useContextMenuContext(scope) : null, content = isAndroid ? /* @__PURE__ */ jsx(ContextMenuProvider, { ...context, children }) : children;
+    return /* @__PURE__ */ jsx(Menu.Portal, { scope: scope || CONTEXTMENU_CONTEXT, ...portalProps, children: content });
+  };
+  ContextMenuPortal.displayName = PORTAL_NAME;
+  const CONTENT_NAME = "ContextMenuContent", ContextMenuContent = React.forwardRef((props, forwardedRef) => {
+    const { scope, ...contentProps } = props, context = useContextMenuContext(scope), hasInteractedOutsideRef = React.useRef(!1);
+    return /* @__PURE__ */ jsx(
+      Menu.Content,
+      {
+        id: context.contentId,
+        "aria-labelledby": context.triggerId,
+        scope: scope || CONTEXTMENU_CONTEXT,
+        ...contentProps,
+        ref: forwardedRef,
+        onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
+          hasInteractedOutsideRef.current || context.triggerRef.current?.focus(), hasInteractedOutsideRef.current = !1, event.preventDefault();
+        }),
+        onInteractOutside: composeEventHandlers(props.onInteractOutside, (event) => {
+          const originalEvent = event.detail.originalEvent, ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0, isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+          (!context.modal || isRightClick) && (hasInteractedOutsideRef.current = !0);
+        })
+      }
+    );
+  });
+  ContextMenuContent.displayName = CONTENT_NAME;
+  const ITEM_NAME = "ContextMenuItem", ContextMenuItem = React.forwardRef((props, forwardedRef) => {
+    const { scope, ...itemProps } = props;
+    return /* @__PURE__ */ jsx(
+      Menu.Item,
+      {
+        componentName: ITEM_NAME,
+        scope: scope || CONTEXTMENU_CONTEXT,
+        ...itemProps,
+        ref: forwardedRef
+      }
+    );
+  });
+  ContextMenuItem.displayName = ITEM_NAME;
+  const CHECKBOX_ITEM_NAME = "ContextMenuCheckboxItem", ContextMenuCheckboxItem = React.forwardRef((props, forwardedRef) => {
+    const { scope, ...checkboxItemProps } = props;
+    return /* @__PURE__ */ jsx(
+      Menu.CheckboxItem,
+      {
+        componentName: CHECKBOX_ITEM_NAME,
+        scope: scope || CONTEXTMENU_CONTEXT,
+        ...checkboxItemProps,
+        ref: forwardedRef
+      }
+    );
+  });
+  ContextMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
+  const RADIO_GROUP_NAME = "ContextMenuRadioGroup", ContextMenuRadioGroup = React.forwardRef((props, forwardedRef) => {
+    const { scope, ...radioGroupProps } = props;
+    return /* @__PURE__ */ jsx(
+      Menu.RadioGroup,
+      {
+        scope: scope || CONTEXTMENU_CONTEXT,
+        ...radioGroupProps,
+        ref: forwardedRef
+      }
+    );
+  });
+  ContextMenuRadioGroup.displayName = RADIO_GROUP_NAME;
+  const RADIO_ITEM_NAME = "ContextMenuRadioItem", ContextMenuRadioItem = React.forwardRef((props, forwardedRef) => {
+    const { scope, ...radioItemProps } = props;
+    return /* @__PURE__ */ jsx(
+      Menu.RadioItem,
+      {
+        componentName: RADIO_ITEM_NAME,
+        scope: scope || CONTEXTMENU_CONTEXT,
+        ...radioItemProps,
+        ref: forwardedRef
+      }
+    );
+  });
+  ContextMenuRadioItem.displayName = RADIO_ITEM_NAME;
+  const INDICATOR_NAME = "ContextMenuItemIndicator", ContextMenuItemIndicator = Menu.ItemIndicator.styleable((props, forwardedRef) => {
+    const { scope, ...itemIndicatorProps } = props;
+    return /* @__PURE__ */ jsx(
+      Menu.ItemIndicator,
+      {
+        componentName: INDICATOR_NAME,
+        scope: scope || CONTEXTMENU_CONTEXT,
+        ...itemIndicatorProps,
+        ref: forwardedRef
+      }
+    );
+  });
+  ContextMenuItemIndicator.displayName = INDICATOR_NAME;
+  const SUB_NAME = "ContextMenuSub", ContextMenuSub = (props) => {
+    const { scope, children, onOpenChange, open: openProp, defaultOpen, ...rest } = props, [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;
+  const SUB_TRIGGER_NAME = "ContextMenuSubTrigger", ContextMenuSubTrigger = View.styleable(
+    (props, forwardedRef) => {
+      const { scope, ...subTriggerProps } = props;
+      return /* @__PURE__ */ jsx(
+        Menu.SubTrigger,
+        {
+          componentName: SUB_TRIGGER_NAME,
+          scope: scope || CONTEXTMENU_CONTEXT,
+          ...subTriggerProps,
+          ref: forwardedRef
+        }
+      );
+    }
+  );
+  ContextMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
+  const SUB_CONTENT_NAME = "ContextMenuSubContent", ContextMenuSubContent = React.forwardRef((props, forwardedRef) => {
+    const { 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;
+  const ARROW_NAME = "ContextMenuArrow", ContextMenuArrow = React.forwardRef((props, forwardedRef) => {
+    const { scope, ...arrowProps } = props;
+    return /* @__PURE__ */ jsx(
+      Menu.Arrow,
+      {
+        componentName: ARROW_NAME,
+        scope: scope || CONTEXTMENU_CONTEXT,
+        ...arrowProps,
+        ref: forwardedRef
+      }
+    );
+  });
+  ContextMenuArrow.displayName = ARROW_NAME;
+  const ContextMenuGroup = Menu.Group, ContextMenuLabel = Menu.Label, ContextMenuSeparator = Menu.Separator, ContextMenuItemTitle = Menu.ItemTitle, ContextMenuItemSubTitle = Menu.ItemSubtitle, ContextMenuItemImage = Menu.ItemImage, ContextMenuItemIcon = Menu.ItemIcon;
+  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: () => null
+  });
+}
+export {
+  CONTEXTMENU_CONTEXT,
+  createNonNativeContextMenu
+};
+//# sourceMappingURL=createNonNativeContextMenu.js.map

package/dist/esm/createNonNativeContextMenu.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/createNonNativeContextMenu.tsx"],
+  "mappings": "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",
+  "names": ["open"]
+}

package/dist/esm/createNonNativeContextMenu.mjs

@@ -0,0 +1,359 @@
+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 React, { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const CONTEXTMENU_CONTEXT = "ContextMenuContext";
+function createNonNativeContextMenu(params) {
+  const {
+      Menu
+    } = createBaseMenu(params),
+    CONTEXT_MENU_NAME = "ContextMenu",
+    {
+      Provider: ContextMenuProvider,
+      useStyledContext: useContextMenuContext
+    } = createStyledContext(),
+    ContextMenuComp = props => {
+      const {
+          scope,
+          children,
+          onOpenChange,
+          dir,
+          modal = !0,
+          ...rest
+        } = props,
+        [open, setOpen] = React.useState(!1),
+        triggerRef = React.useRef(null),
+        handleOpenChange = React.useCallback(open2 => {
+          setOpen(open2), onOpenChange?.(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;
+  const TRIGGER_NAME = "ContextMenuTrigger",
+    ContextMenuTrigger = View.styleable((props, forwardedRef) => {
+      const {
+          scope,
+          style,
+          disabled = !1,
+          asChild,
+          children,
+          ...triggerProps
+        } = props,
+        context = useContextMenuContext(scope),
+        pointRef = React.useRef({
+          x: 0,
+          y: 0
+        }),
+        virtualRef = React.useMemo(() => ({
+          current: {
+            getBoundingClientRect: () => isWeb ? DOMRect.fromRect({
+              width: 0,
+              height: 0,
+              ...pointRef.current
+            }) : {
+              width: 0,
+              height: 0,
+              top: 0,
+              left: 0,
+              ...pointRef.current
+            },
+            ...(!isWeb && {
+              measure: c => c(pointRef.current.x, pointRef.current.y, 0, 0),
+              measureInWindow: c => c(pointRef.current.x, pointRef.current.y, 0, 0)
+            })
+          }
+        }), [pointRef.current.x, pointRef.current.y]),
+        longPressTimerRef = React.useRef(0),
+        clearLongPress = React.useCallback(() => window.clearTimeout(longPressTimerRef.current), []),
+        handleOpen = event => {
+          isWeb && (event instanceof MouseEvent || event instanceof PointerEvent) ? pointRef.current = {
+            x: event.clientX,
+            y: event.clientY
+          } : pointRef.current = {
+            x: event.nativeEvent.pageX,
+            y: event.nativeEvent.pageY
+          }, context.onOpenChange(!0);
+        };
+      React.useEffect(() => clearLongPress, [clearLongPress]), React.useEffect(() => void (disabled && clearLongPress()), [disabled, clearLongPress]);
+      const Comp = asChild ? Slot : View;
+      return /* @__PURE__ */jsxs(Fragment, {
+        children: [/* @__PURE__ */jsx(Menu.Anchor, {
+          scope: scope || CONTEXTMENU_CONTEXT,
+          virtualRef
+        }), /* @__PURE__ */jsx(Comp, {
+          tag: "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, event => {
+              clearLongPress(), handleOpen(event), event.preventDefault();
+            }),
+            onPointerDown: disabled ? props.onPointerDown : composeEventHandlers(props.onPointerDown, event => {
+              event.pointerType !== "mouse" && (clearLongPress(), longPressTimerRef.current = window.setTimeout(() => handleOpen(event), 700));
+            }),
+            onPointerMove: disabled ? props.onPointerMove : composeEventHandlers(props.onPointerMove, event => {
+              event.pointerType !== "mouse" && clearLongPress();
+            }),
+            onPointerCancel: disabled ? props.onPointerCancel : composeEventHandlers(props.onPointerCancel, event => {
+              event.pointerType !== "mouse" && clearLongPress();
+            }),
+            onPointerUp: disabled ? props.onPointerUp : composeEventHandlers(props.onPointerUp, event => {
+              event.pointerType !== "mouse" && clearLongPress();
+            })
+          }),
+          ...(!isWeb && {
+            onLongPress: disabled ? props.onLongPress : composeEventHandlers(props.onLongPress, event => {
+              clearLongPress(), handleOpen(event), event.preventDefault();
+            })
+          }),
+          children
+        })]
+      });
+    });
+  ContextMenuTrigger.displayName = TRIGGER_NAME;
+  const PORTAL_NAME = "ContextMenuPortal",
+    ContextMenuPortal = props => {
+      const {
+          scope,
+          children,
+          ...portalProps
+        } = props,
+        context = isAndroid ? useContextMenuContext(scope) : null,
+        content = isAndroid ? /* @__PURE__ */jsx(ContextMenuProvider, {
+          ...context,
+          children
+        }) : children;
+      return /* @__PURE__ */jsx(Menu.Portal, {
+        scope: scope || CONTEXTMENU_CONTEXT,
+        ...portalProps,
+        children: content
+      });
+    };
+  ContextMenuPortal.displayName = PORTAL_NAME;
+  const CONTENT_NAME = "ContextMenuContent",
+    ContextMenuContent = React.forwardRef((props, forwardedRef) => {
+      const {
+          scope,
+          ...contentProps
+        } = props,
+        context = useContextMenuContext(scope),
+        hasInteractedOutsideRef = React.useRef(!1);
+      return /* @__PURE__ */jsx(Menu.Content, {
+        id: context.contentId,
+        "aria-labelledby": context.triggerId,
+        scope: scope || CONTEXTMENU_CONTEXT,
+        ...contentProps,
+        ref: forwardedRef,
+        onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, event => {
+          hasInteractedOutsideRef.current || context.triggerRef.current?.focus(), hasInteractedOutsideRef.current = !1, event.preventDefault();
+        }),
+        onInteractOutside: composeEventHandlers(props.onInteractOutside, event => {
+          const originalEvent = event.detail.originalEvent,
+            ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0,
+            isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+          (!context.modal || isRightClick) && (hasInteractedOutsideRef.current = !0);
+        })
+      });
+    });
+  ContextMenuContent.displayName = CONTENT_NAME;
+  const ITEM_NAME = "ContextMenuItem",
+    ContextMenuItem = React.forwardRef((props, forwardedRef) => {
+      const {
+        scope,
+        ...itemProps
+      } = props;
+      return /* @__PURE__ */jsx(Menu.Item, {
+        componentName: ITEM_NAME,
+        scope: scope || CONTEXTMENU_CONTEXT,
+        ...itemProps,
+        ref: forwardedRef
+      });
+    });
+  ContextMenuItem.displayName = ITEM_NAME;
+  const CHECKBOX_ITEM_NAME = "ContextMenuCheckboxItem",
+    ContextMenuCheckboxItem = React.forwardRef((props, forwardedRef) => {
+      const {
+        scope,
+        ...checkboxItemProps
+      } = props;
+      return /* @__PURE__ */jsx(Menu.CheckboxItem, {
+        componentName: CHECKBOX_ITEM_NAME,
+        scope: scope || CONTEXTMENU_CONTEXT,
+        ...checkboxItemProps,
+        ref: forwardedRef
+      });
+    });
+  ContextMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
+  const RADIO_GROUP_NAME = "ContextMenuRadioGroup",
+    ContextMenuRadioGroup = React.forwardRef((props, forwardedRef) => {
+      const {
+        scope,
+        ...radioGroupProps
+      } = props;
+      return /* @__PURE__ */jsx(Menu.RadioGroup, {
+        scope: scope || CONTEXTMENU_CONTEXT,
+        ...radioGroupProps,
+        ref: forwardedRef
+      });
+    });
+  ContextMenuRadioGroup.displayName = RADIO_GROUP_NAME;
+  const RADIO_ITEM_NAME = "ContextMenuRadioItem",
+    ContextMenuRadioItem = React.forwardRef((props, forwardedRef) => {
+      const {
+        scope,
+        ...radioItemProps
+      } = props;
+      return /* @__PURE__ */jsx(Menu.RadioItem, {
+        componentName: RADIO_ITEM_NAME,
+        scope: scope || CONTEXTMENU_CONTEXT,
+        ...radioItemProps,
+        ref: forwardedRef
+      });
+    });
+  ContextMenuRadioItem.displayName = RADIO_ITEM_NAME;
+  const INDICATOR_NAME = "ContextMenuItemIndicator",
+    ContextMenuItemIndicator = Menu.ItemIndicator.styleable((props, forwardedRef) => {
+      const {
+        scope,
+        ...itemIndicatorProps
+      } = props;
+      return /* @__PURE__ */jsx(Menu.ItemIndicator, {
+        componentName: INDICATOR_NAME,
+        scope: scope || CONTEXTMENU_CONTEXT,
+        ...itemIndicatorProps,
+        ref: forwardedRef
+      });
+    });
+  ContextMenuItemIndicator.displayName = INDICATOR_NAME;
+  const SUB_NAME = "ContextMenuSub",
+    ContextMenuSub = props => {
+      const {
+          scope,
+          children,
+          onOpenChange,
+          open: openProp,
+          defaultOpen,
+          ...rest
+        } = props,
+        [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;
+  const SUB_TRIGGER_NAME = "ContextMenuSubTrigger",
+    ContextMenuSubTrigger = View.styleable((props, forwardedRef) => {
+      const {
+        scope,
+        ...subTriggerProps
+      } = props;
+      return /* @__PURE__ */jsx(Menu.SubTrigger, {
+        componentName: SUB_TRIGGER_NAME,
+        scope: scope || CONTEXTMENU_CONTEXT,
+        ...subTriggerProps,
+        ref: forwardedRef
+      });
+    });
+  ContextMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
+  const SUB_CONTENT_NAME = "ContextMenuSubContent",
+    ContextMenuSubContent = React.forwardRef((props, forwardedRef) => {
+      const {
+        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;
+  const ARROW_NAME = "ContextMenuArrow",
+    ContextMenuArrow = React.forwardRef((props, forwardedRef) => {
+      const {
+        scope,
+        ...arrowProps
+      } = props;
+      return /* @__PURE__ */jsx(Menu.Arrow, {
+        componentName: ARROW_NAME,
+        scope: scope || CONTEXTMENU_CONTEXT,
+        ...arrowProps,
+        ref: forwardedRef
+      });
+    });
+  ContextMenuArrow.displayName = ARROW_NAME;
+  const ContextMenuGroup = Menu.Group,
+    ContextMenuLabel = Menu.Label,
+    ContextMenuSeparator = Menu.Separator,
+    ContextMenuItemTitle = Menu.ItemTitle,
+    ContextMenuItemSubTitle = Menu.ItemSubtitle,
+    ContextMenuItemImage = Menu.ItemImage,
+    ContextMenuItemIcon = Menu.ItemIcon;
+  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: () => null
+  });
+}
+export { CONTEXTMENU_CONTEXT, createNonNativeContextMenu };
+//# sourceMappingURL=createNonNativeContextMenu.mjs.map