@hanwenbo/x-taro-ui 0.0.1

package/lib/components/contextMenu/contextMenu.js

@@ -0,0 +1,652 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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: 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;
+};
+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: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/contextMenu/contextMenu.tsx
+var contextMenu_exports = {};
+__export(contextMenu_exports, {
+  ContextMenu: () => ContextMenu,
+  ContextMenuTrigger: () => ContextMenuTrigger,
+  default: () => contextMenu_default
+});
+module.exports = __toCommonJS(contextMenu_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_miniapp = require("../../adapters/miniapp");
+var import_theme = require("../../theme");
+var import_patterns = require("../../patterns");
+var import_utils = require("../../utils");
+var import_configProvider = require("../configProvider");
+var import_icon = require("../icon");
+var import_portal = require("../portal");
+var MOBILE_ROOT_REM_SCALE = 0.875;
+var scaleMobileMetric = (value) => value * MOBILE_ROOT_REM_SCALE;
+var contextMenuPanelWidths = {
+  mini: 140,
+  small: 160,
+  middle: 180,
+  large: 200
+};
+var contextMenuItemLineHeights = {
+  mini: import_theme.designSystemLineHeights.caption,
+  small: import_theme.designSystemLineHeights.label,
+  middle: import_theme.designSystemLineHeights.label,
+  large: import_theme.designSystemLineHeights.body
+};
+var contextMenuDividerInlineMargins = {
+  mini: scaleMobileMetric(import_theme.designSystemSpacing["2"]),
+  small: scaleMobileMetric(import_theme.designSystemSpacing["2.5"]),
+  middle: scaleMobileMetric(import_theme.designSystemSpacing["3"]),
+  large: scaleMobileMetric(import_theme.designSystemSpacing["3.5"])
+};
+var contextMenuPanelPaddingY = scaleMobileMetric(import_theme.designSystemSpacing["1"]);
+var contextMenuShortcutPaddingY = scaleMobileMetric(import_theme.designSystemSpacing["0.5"]);
+var contextMenuShortcutPaddingX = scaleMobileMetric(import_theme.designSystemSpacing["1.5"]);
+var contextMenuShortcutRadius = scaleMobileMetric(4);
+var contextMenuDescriptionMarginTop = scaleMobileMetric(import_theme.designSystemSpacing["0.5"]);
+function getContextMenuControlTokens(size) {
+  const control = (0, import_theme.getFormControlTokens)(size);
+  return {
+    height: scaleMobileMetric(control.height),
+    inlinePadding: scaleMobileMetric(control.inlinePadding),
+    gap: scaleMobileMetric(control.gap),
+    iconSize: scaleMobileMetric(control.iconSize),
+    textSize: control.textSize,
+    lineHeight: contextMenuItemLineHeights[size]
+  };
+}
+function nodeText(node) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(nodeText).join("");
+  if (import_react.default.isValidElement(node)) {
+    return nodeText(node.props.children);
+  }
+  return "";
+}
+function renderNode(node, style) {
+  if (typeof node === "string" || typeof node === "number") {
+    return /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style }, node);
+  }
+  return node;
+}
+function itemId(item) {
+  return item.id ?? item.key;
+}
+function eventPosition(event) {
+  var _a, _b, _c, _d;
+  const touch = ((_a = event == null ? void 0 : event.changedTouches) == null ? void 0 : _a[0]) ?? ((_b = event == null ? void 0 : event.touches) == null ? void 0 : _b[0]);
+  return {
+    x: (touch == null ? void 0 : touch.clientX) ?? (event == null ? void 0 : event.clientX) ?? ((_c = event == null ? void 0 : event.detail) == null ? void 0 : _c.x) ?? 8,
+    y: (touch == null ? void 0 : touch.clientY) ?? (event == null ? void 0 : event.clientY) ?? ((_d = event == null ? void 0 : event.detail) == null ? void 0 : _d.y) ?? 8
+  };
+}
+function getAnchorPlacementStyle(placement, sideOffset) {
+  switch (placement) {
+    case "bottom-right":
+      return { top: "100%", right: 0, marginTop: sideOffset };
+    case "bottom":
+      return {
+        top: "100%",
+        left: "50%",
+        transform: "translateX(-50%)",
+        marginTop: sideOffset
+      };
+    case "top-left":
+      return { bottom: "100%", left: 0, marginBottom: sideOffset };
+    case "top-right":
+      return { bottom: "100%", right: 0, marginBottom: sideOffset };
+    case "top":
+      return {
+        bottom: "100%",
+        left: "50%",
+        transform: "translateX(-50%)",
+        marginBottom: sideOffset
+      };
+    case "left":
+      return { right: "100%", top: 0, marginRight: sideOffset };
+    case "right":
+      return { left: "100%", top: 0, marginLeft: sideOffset };
+    case "center":
+      return { top: "50%", left: "50%", transform: "translate(-50%, -50%)" };
+    case "bottom-left":
+    default:
+      return { top: "100%", left: 0, marginTop: sideOffset };
+  }
+}
+var ContextMenuTrigger = ({
+  children,
+  disabled = false,
+  delayLongPress = 500,
+  onContextMenu,
+  onLongPress,
+  onClick,
+  className,
+  style
+}) => {
+  const pointRef = (0, import_react.useRef)({ x: 8, y: 8 });
+  const pressable = (0, import_patterns.usePressable)({
+    disabled,
+    delayLongPress,
+    onLongPress: () => {
+      onLongPress == null ? void 0 : onLongPress(pointRef.current);
+      onContextMenu == null ? void 0 : onContextMenu(pointRef.current);
+    },
+    scale: 1
+  });
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      className: (0, import_utils.classNames)("x-context-menu-trigger", className),
+      style: { display: "inline-flex", ...style },
+      onContextMenu: (event) => {
+        var _a;
+        (_a = event.preventDefault) == null ? void 0 : _a.call(event);
+        pressable.handlers.onTouchCancel();
+        const point = eventPosition(event);
+        pointRef.current = point;
+        onContextMenu == null ? void 0 : onContextMenu(point);
+      },
+      onTouchStart: (event) => {
+        pointRef.current = eventPosition(event);
+        pressable.handlers.onTouchStart();
+      },
+      onTouchEnd: pressable.handlers.onTouchEnd,
+      onTouchCancel: pressable.handlers.onTouchCancel,
+      onMouseDown: pressable.handlers.onMouseDown,
+      onMouseUp: pressable.handlers.onMouseUp,
+      onMouseLeave: pressable.handlers.onMouseLeave,
+      onClick: () => {
+        pressable.handlers.onClick();
+        onClick == null ? void 0 : onClick();
+      }
+    },
+    children
+  );
+};
+ContextMenuTrigger.displayName = "ContextMenuTrigger";
+var ContextMenuRow = ({
+  item,
+  size,
+  prefixCls,
+  activeId,
+  openSubmenuId,
+  disabled: groupDisabled,
+  depth = 0,
+  submenuSide,
+  onActivate,
+  onToggleSubmenu,
+  onSelect
+}) => {
+  var _a, _b;
+  const { colors, radius } = (0, import_theme.useTokens)();
+  const control = getContextMenuControlTokens(size);
+  const id = itemId(item);
+  const hasChildren = Boolean((_a = item.children) == null ? void 0 : _a.length);
+  const active = activeId === id;
+  const submenuOpen = openSubmenuId === id;
+  const disabled = Boolean(groupDisabled || item.disabled);
+  const danger = item.variant === "danger" || item.danger;
+  const label = nodeText(item.label) || id;
+  const pressable = (0, import_patterns.usePressable)({
+    disabled,
+    onPress: () => {
+      if (hasChildren) {
+        onToggleSubmenu(submenuOpen ? void 0 : id);
+      } else {
+        onSelect(item);
+      }
+    },
+    scale: 1
+  });
+  if (item.divider) {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "context-menu-divider",
+        className: `${prefixCls}-context-menu__divider`,
+        style: {
+          height: 1,
+          marginTop: contextMenuPanelPaddingY,
+          marginRight: contextMenuDividerInlineMargins[size],
+          marginBottom: contextMenuPanelPaddingY,
+          marginLeft: contextMenuDividerInlineMargins[size],
+          backgroundColor: colors.border
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { position: "relative" } }, /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      role: "menuitem",
+      ariaLabel: `${label}${disabled ? "，已禁用" : ""}`,
+      "data-slot": "context-menu-item",
+      "data-size": size,
+      "data-active": active ? "true" : "false",
+      "data-disabled": disabled ? "true" : "false",
+      className: (0, import_utils.classNames)(
+        `${prefixCls}-context-menu__item`,
+        `${prefixCls}-context-menu__item--${size}`,
+        active && `${prefixCls}-context-menu__item--active`,
+        danger && `${prefixCls}-context-menu__item--danger`,
+        disabled && `${prefixCls}-context-menu__item--disabled`
+      ),
+      style: {
+        boxSizing: "border-box",
+        width: "100%",
+        height: item.description === void 0 ? control.height : void 0,
+        minHeight: control.height,
+        paddingLeft: control.inlinePadding,
+        paddingRight: control.inlinePadding,
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: control.gap,
+        borderRadius: 0,
+        backgroundColor: active || pressable.pressed ? colors.accent : "transparent",
+        color: danger ? colors.destructive : active ? colors["accent-foreground"] : colors.foreground,
+        opacity: disabled ? 0.5 : 1,
+        ...pressable.style,
+        transition: `${pressable.style.transition}, background-color var(--x-duration-standard) var(--x-easing-standard), color var(--x-duration-standard) var(--x-easing-standard), opacity var(--x-duration-fast) var(--x-easing-standard)`
+      },
+      onMouseEnter: () => {
+        if (disabled) return;
+        onActivate(id);
+        if (hasChildren) onToggleSubmenu(id);
+      },
+      ...pressable.handlers
+    },
+    item.icon ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: `${prefixCls}-context-menu__item-icon`,
+        style: { flexShrink: 0, display: "flex", color: colors["muted-foreground"] }
+      },
+      item.icon
+    ) : null,
+    /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { flex: 1, minWidth: 0 } }, renderNode(item.label, {
+      display: "block",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      color: danger ? colors.destructive : "inherit",
+      fontSize: control.textSize,
+      lineHeight: `${control.lineHeight}px`
+    }), item.description !== void 0 ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { marginTop: contextMenuDescriptionMarginTop } }, renderNode(item.description, {
+      display: "block",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      color: colors["muted-foreground"],
+      fontSize: import_theme.designSystemTypography.sizes.sm,
+      lineHeight: `${import_theme.designSystemLineHeights.caption}px`
+    })) : null),
+    item.badge,
+    item.suffix,
+    item.shortcut ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.Text,
+      {
+        className: `${prefixCls}-context-menu__shortcut`,
+        style: {
+          flexShrink: 0,
+          padding: `${contextMenuShortcutPaddingY}px ${contextMenuShortcutPaddingX}px`,
+          borderWidth: 1,
+          borderStyle: "solid",
+          borderColor: colors.border,
+          borderRadius: contextMenuShortcutRadius,
+          backgroundColor: colors.background,
+          color: colors["muted-foreground"],
+          fontSize: 10,
+          lineHeight: `${control.lineHeight}px`
+        }
+      },
+      item.shortcut
+    ) : null,
+    hasChildren ? /* @__PURE__ */ import_react.default.createElement(
+      import_icon.Icon,
+      {
+        name: "ChevronRight",
+        size: control.iconSize,
+        color: colors["muted-foreground"],
+        block: true
+      }
+    ) : null
+  ), hasChildren && submenuOpen ? /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      role: "menu",
+      ariaLabel: `${label}子菜单`,
+      "data-slot": "context-menu-submenu",
+      "data-side": submenuSide,
+      className: (0, import_utils.classNames)(
+        `${prefixCls}-context-menu__submenu`,
+        `${prefixCls}-context-menu__submenu--${size}`
+      ),
+      style: {
+        position: "absolute",
+        left: submenuSide === "right" ? "calc(100% - 8px)" : void 0,
+        right: submenuSide === "left" ? "calc(100% - 8px)" : void 0,
+        top: -4,
+        zIndex: 1082 + depth,
+        boxSizing: "border-box",
+        minWidth: contextMenuPanelWidths[size],
+        maxWidth: "calc(100vw - 32px)",
+        padding: `${contextMenuPanelPaddingY}px 0`,
+        overflow: "visible",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: colors.border,
+        borderRadius: radius.xl,
+        backgroundColor: colors.popover,
+        boxShadow: "var(--x-context-menu-shadow)"
+      }
+    },
+    (_b = item.children) == null ? void 0 : _b.map((child) => /* @__PURE__ */ import_react.default.createElement(
+      ContextMenuRow,
+      {
+        key: itemId(child),
+        item: child,
+        size,
+        prefixCls,
+        activeId,
+        openSubmenuId,
+        disabled: groupDisabled,
+        depth: depth + 1,
+        submenuSide,
+        onActivate,
+        onToggleSubmenu,
+        onSelect
+      }
+    ))
+  ) : null);
+};
+var ContextMenu = (props) => {
+  const hasVisibleProp = Object.prototype.hasOwnProperty.call(props, "visible");
+  const hasPositionProp = Object.prototype.hasOwnProperty.call(props, "position");
+  const {
+    items = [],
+    visible,
+    defaultVisible = false,
+    position,
+    onClose,
+    onSelect,
+    size: propSize,
+    disabled: propDisabled = false,
+    closeOnSelect = true,
+    collisionPadding = 8,
+    sideOffset = 4,
+    children,
+    title,
+    placement = "bottom-left",
+    emptyText = "暂无可执行操作",
+    onVisibleChange,
+    className,
+    style
+  } = props;
+  const config = (0, import_configProvider.useConfigProvider)();
+  const { colors, radius } = (0, import_theme.useTokens)();
+  const size = propSize ?? config.size;
+  const disabled = Boolean(propDisabled || config.disabled);
+  const [internalVisible, setInternalVisible] = (0, import_react.useState)(defaultVisible);
+  const [internalPosition, setInternalPosition] = (0, import_react.useState)(null);
+  const [measuredPanel, setMeasuredPanel] = (0, import_react.useState)(null);
+  const [activeId, setActiveId] = (0, import_react.useState)();
+  const [openSubmenuId, setOpenSubmenuId] = (0, import_react.useState)();
+  const open = hasVisibleProp ? Boolean(visible) : internalVisible;
+  const currentPosition = hasPositionProp ? position ?? null : internalPosition;
+  const panelWidth = contextMenuPanelWidths[size];
+  const control = getContextMenuControlTokens(size);
+  const reactId = (0, import_react.useId)();
+  const safeId = (0, import_react.useMemo)(() => reactId.replace(/[^a-zA-Z0-9_-]/g, ""), [reactId]);
+  const panelId = `${config.prefixCls}-context-menu-panel-${safeId}`;
+  const rootId = `${config.prefixCls}-context-menu-root-${safeId}`;
+  const panelVisible = open && Boolean(currentPosition || children);
+  const hasDocument = Boolean(globalThis["document"]);
+  const setOpen = (0, import_react.useCallback)(
+    (nextOpen) => {
+      if (!hasVisibleProp) setInternalVisible(nextOpen);
+      if (open !== nextOpen) onVisibleChange == null ? void 0 : onVisibleChange(nextOpen);
+      if (!nextOpen) {
+        if (!hasPositionProp) setInternalPosition(null);
+        setMeasuredPanel(null);
+        setActiveId(void 0);
+        setOpenSubmenuId(void 0);
+        if (open) onClose == null ? void 0 : onClose();
+      }
+    },
+    [hasPositionProp, hasVisibleProp, onClose, onVisibleChange, open]
+  );
+  (0, import_react.useEffect)(() => {
+    const ownerDocument = globalThis["document"];
+    if (!panelVisible || !(ownerDocument == null ? void 0 : ownerDocument.addEventListener) || !ownerDocument.removeEventListener) {
+      return void 0;
+    }
+    const handleEscape = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    const handleOutside = (event) => {
+      const target = event.target;
+      const root = ownerDocument.getElementById(rootId);
+      const floatingPanel = ownerDocument.getElementById(panelId);
+      if (target && root && !root.contains(target) && !(floatingPanel == null ? void 0 : floatingPanel.contains(target))) {
+        setOpen(false);
+      }
+    };
+    ownerDocument.addEventListener("keydown", handleEscape);
+    ownerDocument.addEventListener("mousedown", handleOutside);
+    ownerDocument.addEventListener("touchstart", handleOutside);
+    return () => {
+      ownerDocument.removeEventListener("keydown", handleEscape);
+      ownerDocument.removeEventListener("mousedown", handleOutside);
+      ownerDocument.removeEventListener("touchstart", handleOutside);
+    };
+  }, [panelId, panelVisible, rootId, setOpen]);
+  (0, import_react.useEffect)(() => {
+    if (!panelVisible) return;
+    let cancelled = false;
+    void (0, import_miniapp.measureNode)(`#${panelId}`).then((rect) => {
+      if (cancelled || !rect || rect.width <= 0 || rect.height <= 0) return;
+      setMeasuredPanel({ width: rect.width, height: rect.height, left: rect.left });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [items.length, panelId, panelVisible, size, title]);
+  const fixedPositionStyle = (0, import_react.useMemo)(() => {
+    if (!currentPosition) return {};
+    const viewport = (0, import_miniapp.getViewport)();
+    const resolvedWidth = (measuredPanel == null ? void 0 : measuredPanel.width) || panelWidth;
+    const estimatedItemsHeight = items.reduce(
+      (total, item) => total + (item.divider ? 1 + contextMenuPanelPaddingY * 2 : control.height),
+      0
+    );
+    const estimatedTitleHeight = title ? import_theme.designSystemLineHeights.caption + scaleMobileMetric(6) * 2 + 1 : 0;
+    const resolvedHeight = (measuredPanel == null ? void 0 : measuredPanel.height) || Math.min(
+      320,
+      Math.max(
+        control.height + contextMenuPanelPaddingY * 2 + 2,
+        estimatedItemsHeight + estimatedTitleHeight + contextMenuPanelPaddingY * 2 + 2
+      )
+    );
+    const maxX = viewport.width - resolvedWidth - collisionPadding;
+    const maxY = viewport.height - resolvedHeight - collisionPadding;
+    return {
+      position: "fixed",
+      left: Math.max(collisionPadding, Math.min(currentPosition.x, maxX)),
+      top: Math.max(collisionPadding, Math.min(currentPosition.y, maxY))
+    };
+  }, [collisionPadding, control.height, currentPosition, items, measuredPanel, panelWidth, title]);
+  const submenuSide = (0, import_react.useMemo)(() => {
+    const viewport = (0, import_miniapp.getViewport)();
+    const panelLeft = (measuredPanel == null ? void 0 : measuredPanel.left) ?? (typeof fixedPositionStyle.left === "number" ? fixedPositionStyle.left : collisionPadding);
+    const resolvedWidth = (measuredPanel == null ? void 0 : measuredPanel.width) || panelWidth;
+    const availableLeft = panelLeft - collisionPadding;
+    const availableRight = viewport.width - (panelLeft + resolvedWidth) - collisionPadding;
+    return availableRight < resolvedWidth - 8 && availableLeft > availableRight ? "left" : "right";
+  }, [collisionPadding, fixedPositionStyle.left, measuredPanel, panelWidth]);
+  const handleSelect = (0, import_react.useCallback)(
+    (item) => {
+      var _a;
+      if (disabled || item.disabled) return;
+      (_a = item.onClick) == null ? void 0 : _a.call(item);
+      const id = itemId(item);
+      if (item.id !== void 0) {
+        onSelect == null ? void 0 : onSelect(item);
+      } else {
+        onSelect == null ? void 0 : onSelect(id, item);
+      }
+      if (closeOnSelect) setOpen(false);
+    },
+    [closeOnSelect, disabled, onSelect, setOpen]
+  );
+  const trigger = children ? /* @__PURE__ */ import_react.default.createElement(
+    ContextMenuTrigger,
+    {
+      disabled,
+      onClick: () => {
+        setInternalPosition(null);
+        setOpen(!open);
+      },
+      onContextMenu: (nextPosition) => {
+        setInternalPosition(nextPosition);
+        setOpen(true);
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children)
+  ) : null;
+  const panel = panelVisible ? /* @__PURE__ */ import_react.default.createElement(import_portal.Portal, { root: Boolean(currentPosition) }, currentPosition || !hasDocument ? /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      "data-slot": "context-menu-backdrop",
+      className: `${config.prefixCls}-context-menu__backdrop`,
+      onClick: () => setOpen(false),
+      style: {
+        position: "fixed",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        zIndex: 1079,
+        backgroundColor: "transparent"
+      }
+    }
+  ) : null, /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      id: panelId,
+      role: "menu",
+      ariaLabel: nodeText(title) || "上下文菜单",
+      "data-slot": "context-menu",
+      "data-size": size,
+      className: (0, import_utils.classNames)(
+        `${config.prefixCls}-context-menu__panel`,
+        `${config.prefixCls}-context-menu__panel--${size}`,
+        disabled && `${config.prefixCls}-context-menu__panel--disabled`,
+        className
+      ),
+      style: {
+        position: currentPosition ? "fixed" : "absolute",
+        zIndex: 1080,
+        boxSizing: "border-box",
+        minWidth: panelWidth,
+        maxWidth: "calc(100vw - 32px)",
+        padding: `${contextMenuPanelPaddingY}px 0`,
+        overflow: "visible",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: colors.border,
+        borderRadius: radius.xl,
+        backgroundColor: colors.popover,
+        color: colors["popover-foreground"],
+        boxShadow: "var(--x-context-menu-shadow)",
+        ...currentPosition ? fixedPositionStyle : getAnchorPlacementStyle(placement, sideOffset),
+        ...style
+      }
+    },
+    title !== void 0 ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: `${config.prefixCls}-context-menu__title`,
+        style: {
+          padding: `${scaleMobileMetric(6)}px ${scaleMobileMetric(8)}px`,
+          borderBottomWidth: items.length > 0 ? 1 : 0,
+          borderBottomStyle: "solid",
+          borderBottomColor: colors.border
+        }
+      },
+      renderNode(title, {
+        color: colors["muted-foreground"],
+        fontSize: 12,
+        lineHeight: `${import_theme.designSystemLineHeights.caption}px`,
+        fontWeight: 600
+      })
+    ) : null,
+    items.length > 0 ? items.map((item) => /* @__PURE__ */ import_react.default.createElement(
+      ContextMenuRow,
+      {
+        key: itemId(item),
+        item,
+        size,
+        prefixCls: config.prefixCls,
+        activeId,
+        openSubmenuId,
+        disabled,
+        submenuSide,
+        onActivate: setActiveId,
+        onToggleSubmenu: setOpenSubmenuId,
+        onSelect: handleSelect
+      }
+    )) : /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: `${config.prefixCls}-context-menu__empty`,
+        style: { padding: 16, textAlign: "center" }
+      },
+      renderNode(emptyText, {
+        color: colors["muted-foreground"],
+        fontSize: (0, import_theme.getFormControlTokens)(size).textSize
+      })
+    )
+  )) : null;
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      id: rootId,
+      className: `${config.prefixCls}-context-menu`,
+      style: { position: "relative", display: children ? "inline-flex" : "contents" }
+    },
+    trigger,
+    panel
+  );
+};
+ContextMenu.displayName = "ContextMenu";
+var contextMenu_default = ContextMenu;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ContextMenu,
+  ContextMenuTrigger
+});

package/lib/components/contextMenu/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export { ContextMenu, ContextMenuTrigger } from './contextMenu';
+export { default } from './contextMenu';
+//# sourceMappingURL=index.d.ts.map