@hanwenbo/x-taro-ui 0.0.1

package/es/components/contextMenu/contextMenu.js

@@ -0,0 +1,652 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { Text, View } from '@tarojs/components';
+import { getViewport, measureNode } from "../../adapters/miniapp";
+import { designSystemLineHeights, designSystemSpacing, designSystemTypography, getFormControlTokens, useTokens } from "../../theme";
+import { usePressable } from "../../patterns";
+import { classNames } from "../../utils";
+import { useConfigProvider } from "../configProvider";
+import { Icon } from "../icon";
+import { Portal } from "../portal";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var MOBILE_ROOT_REM_SCALE = 0.875;
+var scaleMobileMetric = function scaleMobileMetric(value) {
+  return value * MOBILE_ROOT_REM_SCALE;
+};
+var contextMenuPanelWidths = {
+  mini: 140,
+  small: 160,
+  middle: 180,
+  large: 200
+};
+var contextMenuItemLineHeights = {
+  mini: designSystemLineHeights.caption,
+  small: designSystemLineHeights.label,
+  middle: designSystemLineHeights.label,
+  large: designSystemLineHeights.body
+};
+var contextMenuDividerInlineMargins = {
+  mini: scaleMobileMetric(designSystemSpacing['2']),
+  small: scaleMobileMetric(designSystemSpacing['2.5']),
+  middle: scaleMobileMetric(designSystemSpacing['3']),
+  large: scaleMobileMetric(designSystemSpacing['3.5'])
+};
+var contextMenuPanelPaddingY = scaleMobileMetric(designSystemSpacing['1']);
+var contextMenuShortcutPaddingY = scaleMobileMetric(designSystemSpacing['0.5']);
+var contextMenuShortcutPaddingX = scaleMobileMetric(designSystemSpacing['1.5']);
+var contextMenuShortcutRadius = scaleMobileMetric(4);
+var contextMenuDescriptionMarginTop = scaleMobileMetric(designSystemSpacing['0.5']);
+function getContextMenuControlTokens(size) {
+  var control = 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 ( /*#__PURE__*/React.isValidElement(node)) {
+    return nodeText(node.props.children);
+  }
+  return '';
+}
+function renderNode(node, style) {
+  if (typeof node === 'string' || typeof node === 'number') {
+    return /*#__PURE__*/_jsx(Text, {
+      style: style,
+      children: node
+    });
+  }
+  return node;
+}
+function itemId(item) {
+  var _item$id;
+  return (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : item.key;
+}
+function eventPosition(event) {
+  var _event$changedTouches, _event$changedTouches2, _event$touches, _ref, _ref2, _touch$clientX, _event$detail, _ref3, _ref4, _touch$clientY, _event$detail2;
+  var touch = (_event$changedTouches = event === null || event === void 0 || (_event$changedTouches2 = event.changedTouches) === null || _event$changedTouches2 === void 0 ? void 0 : _event$changedTouches2[0]) !== null && _event$changedTouches !== void 0 ? _event$changedTouches : event === null || event === void 0 || (_event$touches = event.touches) === null || _event$touches === void 0 ? void 0 : _event$touches[0];
+  return {
+    x: (_ref = (_ref2 = (_touch$clientX = touch === null || touch === void 0 ? void 0 : touch.clientX) !== null && _touch$clientX !== void 0 ? _touch$clientX : event === null || event === void 0 ? void 0 : event.clientX) !== null && _ref2 !== void 0 ? _ref2 : event === null || event === void 0 || (_event$detail = event.detail) === null || _event$detail === void 0 ? void 0 : _event$detail.x) !== null && _ref !== void 0 ? _ref : 8,
+    y: (_ref3 = (_ref4 = (_touch$clientY = touch === null || touch === void 0 ? void 0 : touch.clientY) !== null && _touch$clientY !== void 0 ? _touch$clientY : event === null || event === void 0 ? void 0 : event.clientY) !== null && _ref4 !== void 0 ? _ref4 : event === null || event === void 0 || (_event$detail2 = event.detail) === null || _event$detail2 === void 0 ? void 0 : _event$detail2.y) !== null && _ref3 !== void 0 ? _ref3 : 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
+      };
+  }
+}
+export var ContextMenuTrigger = function ContextMenuTrigger(_ref5) {
+  var children = _ref5.children,
+    _ref5$disabled = _ref5.disabled,
+    disabled = _ref5$disabled === void 0 ? false : _ref5$disabled,
+    _ref5$delayLongPress = _ref5.delayLongPress,
+    delayLongPress = _ref5$delayLongPress === void 0 ? 500 : _ref5$delayLongPress,
+    _onContextMenu = _ref5.onContextMenu,
+    _onLongPress = _ref5.onLongPress,
+    _onClick = _ref5.onClick,
+    className = _ref5.className,
+    style = _ref5.style;
+  var pointRef = useRef({
+    x: 8,
+    y: 8
+  });
+  var pressable = usePressable({
+    disabled: disabled,
+    delayLongPress: delayLongPress,
+    onLongPress: function onLongPress() {
+      _onLongPress === null || _onLongPress === void 0 || _onLongPress(pointRef.current);
+      _onContextMenu === null || _onContextMenu === void 0 || _onContextMenu(pointRef.current);
+    },
+    scale: 1
+  });
+  return /*#__PURE__*/_jsx(View, {
+    className: classNames('x-context-menu-trigger', className),
+    style: _objectSpread({
+      display: 'inline-flex'
+    }, style),
+    onContextMenu: function onContextMenu(event) {
+      var _event$preventDefault;
+      (_event$preventDefault = event.preventDefault) === null || _event$preventDefault === void 0 || _event$preventDefault.call(event);
+      pressable.handlers.onTouchCancel();
+      var point = eventPosition(event);
+      pointRef.current = point;
+      _onContextMenu === null || _onContextMenu === void 0 || _onContextMenu(point);
+    },
+    onTouchStart: function 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: function onClick() {
+      pressable.handlers.onClick();
+      _onClick === null || _onClick === void 0 || _onClick();
+    },
+    children: children
+  });
+};
+ContextMenuTrigger.displayName = 'ContextMenuTrigger';
+var ContextMenuRow = function ContextMenuRow(_ref6) {
+  var _item$children, _item$children2;
+  var item = _ref6.item,
+    size = _ref6.size,
+    prefixCls = _ref6.prefixCls,
+    activeId = _ref6.activeId,
+    openSubmenuId = _ref6.openSubmenuId,
+    groupDisabled = _ref6.disabled,
+    _ref6$depth = _ref6.depth,
+    depth = _ref6$depth === void 0 ? 0 : _ref6$depth,
+    submenuSide = _ref6.submenuSide,
+    onActivate = _ref6.onActivate,
+    onToggleSubmenu = _ref6.onToggleSubmenu,
+    onSelect = _ref6.onSelect;
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors,
+    radius = _useTokens.radius;
+  var control = getContextMenuControlTokens(size);
+  var id = itemId(item);
+  var hasChildren = Boolean((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length);
+  var active = activeId === id;
+  var submenuOpen = openSubmenuId === id;
+  var disabled = Boolean(groupDisabled || item.disabled);
+  var danger = item.variant === 'danger' || item.danger;
+  var label = nodeText(item.label) || id;
+  var pressable = usePressable({
+    disabled: disabled,
+    onPress: function onPress() {
+      if (hasChildren) {
+        onToggleSubmenu(submenuOpen ? undefined : id);
+      } else {
+        onSelect(item);
+      }
+    },
+    scale: 1
+  });
+  if (item.divider) {
+    return /*#__PURE__*/_jsx(View, {
+      "data-slot": "context-menu-divider",
+      className: "".concat(prefixCls, "-context-menu__divider"),
+      style: {
+        height: 1,
+        marginTop: contextMenuPanelPaddingY,
+        marginRight: contextMenuDividerInlineMargins[size],
+        marginBottom: contextMenuPanelPaddingY,
+        marginLeft: contextMenuDividerInlineMargins[size],
+        backgroundColor: colors.border
+      }
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      position: 'relative'
+    },
+    children: [/*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread({
+      role: "menuitem",
+      ariaLabel: "".concat(label).concat(disabled ? '，已禁用' : ''),
+      "data-slot": "context-menu-item",
+      "data-size": size,
+      "data-active": active ? 'true' : 'false',
+      "data-disabled": disabled ? 'true' : 'false',
+      className: classNames("".concat(prefixCls, "-context-menu__item"), "".concat(prefixCls, "-context-menu__item--").concat(size), active && "".concat(prefixCls, "-context-menu__item--active"), danger && "".concat(prefixCls, "-context-menu__item--danger"), disabled && "".concat(prefixCls, "-context-menu__item--disabled")),
+      style: _objectSpread(_objectSpread({
+        boxSizing: 'border-box',
+        width: '100%',
+        height: item.description === undefined ? control.height : undefined,
+        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: "".concat(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: function onMouseEnter() {
+        if (disabled) return;
+        onActivate(id);
+        if (hasChildren) onToggleSubmenu(id);
+      }
+    }, pressable.handlers), {}, {
+      children: [item.icon ? /*#__PURE__*/_jsx(View, {
+        className: "".concat(prefixCls, "-context-menu__item-icon"),
+        style: {
+          flexShrink: 0,
+          display: 'flex',
+          color: colors['muted-foreground']
+        },
+        children: item.icon
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1,
+          minWidth: 0
+        },
+        children: [renderNode(item.label, {
+          display: 'block',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          color: danger ? colors.destructive : 'inherit',
+          fontSize: control.textSize,
+          lineHeight: "".concat(control.lineHeight, "px")
+        }), item.description !== undefined ? /*#__PURE__*/_jsx(View, {
+          style: {
+            marginTop: contextMenuDescriptionMarginTop
+          },
+          children: renderNode(item.description, {
+            display: 'block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            color: colors['muted-foreground'],
+            fontSize: designSystemTypography.sizes.sm,
+            lineHeight: "".concat(designSystemLineHeights.caption, "px")
+          })
+        }) : null]
+      }), item.badge, item.suffix, item.shortcut ? /*#__PURE__*/_jsx(Text, {
+        className: "".concat(prefixCls, "-context-menu__shortcut"),
+        style: {
+          flexShrink: 0,
+          padding: "".concat(contextMenuShortcutPaddingY, "px ").concat(contextMenuShortcutPaddingX, "px"),
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: colors.border,
+          borderRadius: contextMenuShortcutRadius,
+          backgroundColor: colors.background,
+          color: colors['muted-foreground'],
+          fontSize: 10,
+          lineHeight: "".concat(control.lineHeight, "px")
+        },
+        children: item.shortcut
+      }) : null, hasChildren ? /*#__PURE__*/_jsx(Icon, {
+        name: "ChevronRight",
+        size: control.iconSize,
+        color: colors['muted-foreground'],
+        block: true
+      }) : null]
+    })), hasChildren && submenuOpen ? /*#__PURE__*/_jsx(View, {
+      role: "menu",
+      ariaLabel: "".concat(label, "\u5B50\u83DC\u5355"),
+      "data-slot": "context-menu-submenu",
+      "data-side": submenuSide,
+      className: classNames("".concat(prefixCls, "-context-menu__submenu"), "".concat(prefixCls, "-context-menu__submenu--").concat(size)),
+      style: {
+        position: 'absolute',
+        left: submenuSide === 'right' ? 'calc(100% - 8px)' : undefined,
+        right: submenuSide === 'left' ? 'calc(100% - 8px)' : undefined,
+        top: -4,
+        zIndex: 1082 + depth,
+        boxSizing: 'border-box',
+        minWidth: contextMenuPanelWidths[size],
+        maxWidth: 'calc(100vw - 32px)',
+        padding: "".concat(contextMenuPanelPaddingY, "px 0"),
+        overflow: 'visible',
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: colors.border,
+        borderRadius: radius.xl,
+        backgroundColor: colors.popover,
+        boxShadow: 'var(--x-context-menu-shadow)'
+      },
+      children: (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.map(function (child) {
+        return /*#__PURE__*/_jsx(ContextMenuRow, {
+          item: child,
+          size: size,
+          prefixCls: prefixCls,
+          activeId: activeId,
+          openSubmenuId: openSubmenuId,
+          disabled: groupDisabled,
+          depth: depth + 1,
+          submenuSide: submenuSide,
+          onActivate: onActivate,
+          onToggleSubmenu: onToggleSubmenu,
+          onSelect: onSelect
+        }, itemId(child));
+      })
+    }) : null]
+  });
+};
+export var ContextMenu = function ContextMenu(props) {
+  var hasVisibleProp = Object.prototype.hasOwnProperty.call(props, 'visible');
+  var hasPositionProp = Object.prototype.hasOwnProperty.call(props, 'position');
+  var _props$items = props.items,
+    items = _props$items === void 0 ? [] : _props$items,
+    visible = props.visible,
+    _props$defaultVisible = props.defaultVisible,
+    defaultVisible = _props$defaultVisible === void 0 ? false : _props$defaultVisible,
+    position = props.position,
+    onClose = props.onClose,
+    onSelect = props.onSelect,
+    propSize = props.size,
+    _props$disabled = props.disabled,
+    propDisabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$closeOnSelect = props.closeOnSelect,
+    closeOnSelect = _props$closeOnSelect === void 0 ? true : _props$closeOnSelect,
+    _props$collisionPaddi = props.collisionPadding,
+    collisionPadding = _props$collisionPaddi === void 0 ? 8 : _props$collisionPaddi,
+    _props$sideOffset = props.sideOffset,
+    sideOffset = _props$sideOffset === void 0 ? 4 : _props$sideOffset,
+    children = props.children,
+    title = props.title,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottom-left' : _props$placement,
+    _props$emptyText = props.emptyText,
+    emptyText = _props$emptyText === void 0 ? '暂无可执行操作' : _props$emptyText,
+    onVisibleChange = props.onVisibleChange,
+    className = props.className,
+    style = props.style;
+  var config = useConfigProvider();
+  var _useTokens2 = useTokens(),
+    colors = _useTokens2.colors,
+    radius = _useTokens2.radius;
+  var size = propSize !== null && propSize !== void 0 ? propSize : config.size;
+  var disabled = Boolean(propDisabled || config.disabled);
+  var _useState = useState(defaultVisible),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalVisible = _useState2[0],
+    setInternalVisible = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalPosition = _useState4[0],
+    setInternalPosition = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    measuredPanel = _useState6[0],
+    setMeasuredPanel = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    activeId = _useState8[0],
+    setActiveId = _useState8[1];
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    openSubmenuId = _useState10[0],
+    setOpenSubmenuId = _useState10[1];
+  var open = hasVisibleProp ? Boolean(visible) : internalVisible;
+  var currentPosition = hasPositionProp ? position !== null && position !== void 0 ? position : null : internalPosition;
+  var panelWidth = contextMenuPanelWidths[size];
+  var control = getContextMenuControlTokens(size);
+  var reactId = useId();
+  var safeId = useMemo(function () {
+    return reactId.replace(/[^a-zA-Z0-9_-]/g, '');
+  }, [reactId]);
+  var panelId = "".concat(config.prefixCls, "-context-menu-panel-").concat(safeId);
+  var rootId = "".concat(config.prefixCls, "-context-menu-root-").concat(safeId);
+  var panelVisible = open && Boolean(currentPosition || children);
+  var hasDocument = Boolean(globalThis['document']);
+  var setOpen = useCallback(function (nextOpen) {
+    if (!hasVisibleProp) setInternalVisible(nextOpen);
+    if (open !== nextOpen) onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(nextOpen);
+    if (!nextOpen) {
+      if (!hasPositionProp) setInternalPosition(null);
+      setMeasuredPanel(null);
+      setActiveId(undefined);
+      setOpenSubmenuId(undefined);
+      if (open) onClose === null || onClose === void 0 || onClose();
+    }
+  }, [hasPositionProp, hasVisibleProp, onClose, onVisibleChange, open]);
+  useEffect(function () {
+    var ownerDocument = globalThis['document'];
+    if (!panelVisible || !(ownerDocument !== null && ownerDocument !== void 0 && ownerDocument.addEventListener) || !ownerDocument.removeEventListener) {
+      return undefined;
+    }
+    var handleEscape = function handleEscape(event) {
+      if (event.key === 'Escape') setOpen(false);
+    };
+    var handleOutside = function handleOutside(event) {
+      var target = event.target;
+      var root = ownerDocument.getElementById(rootId);
+      var floatingPanel = ownerDocument.getElementById(panelId);
+      if (target && root && !root.contains(target) && !(floatingPanel !== null && floatingPanel !== void 0 && floatingPanel.contains(target))) {
+        setOpen(false);
+      }
+    };
+    ownerDocument.addEventListener('keydown', handleEscape);
+    ownerDocument.addEventListener('mousedown', handleOutside);
+    ownerDocument.addEventListener('touchstart', handleOutside);
+    return function () {
+      ownerDocument.removeEventListener('keydown', handleEscape);
+      ownerDocument.removeEventListener('mousedown', handleOutside);
+      ownerDocument.removeEventListener('touchstart', handleOutside);
+    };
+  }, [panelId, panelVisible, rootId, setOpen]);
+  useEffect(function () {
+    if (!panelVisible) return;
+    var cancelled = false;
+    void measureNode("#".concat(panelId)).then(function (rect) {
+      if (cancelled || !rect || rect.width <= 0 || rect.height <= 0) return;
+      setMeasuredPanel({
+        width: rect.width,
+        height: rect.height,
+        left: rect.left
+      });
+    });
+    return function () {
+      cancelled = true;
+    };
+  }, [items.length, panelId, panelVisible, size, title]);
+  var fixedPositionStyle = useMemo(function () {
+    if (!currentPosition) return {};
+    var viewport = getViewport();
+    var resolvedWidth = (measuredPanel === null || measuredPanel === void 0 ? void 0 : measuredPanel.width) || panelWidth;
+    var estimatedItemsHeight = items.reduce(function (total, item) {
+      return total + (item.divider ? 1 + contextMenuPanelPaddingY * 2 : control.height);
+    }, 0);
+    var estimatedTitleHeight = title ? designSystemLineHeights.caption + scaleMobileMetric(6) * 2 + 1 : 0;
+    var resolvedHeight = (measuredPanel === null || measuredPanel === void 0 ? void 0 : measuredPanel.height) || Math.min(320, Math.max(control.height + contextMenuPanelPaddingY * 2 + 2, estimatedItemsHeight + estimatedTitleHeight + contextMenuPanelPaddingY * 2 + 2));
+    var maxX = viewport.width - resolvedWidth - collisionPadding;
+    var 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]);
+  var submenuSide = useMemo(function () {
+    var _measuredPanel$left;
+    var viewport = getViewport();
+    var panelLeft = (_measuredPanel$left = measuredPanel === null || measuredPanel === void 0 ? void 0 : measuredPanel.left) !== null && _measuredPanel$left !== void 0 ? _measuredPanel$left : typeof fixedPositionStyle.left === 'number' ? fixedPositionStyle.left : collisionPadding;
+    var resolvedWidth = (measuredPanel === null || measuredPanel === void 0 ? void 0 : measuredPanel.width) || panelWidth;
+    var availableLeft = panelLeft - collisionPadding;
+    var availableRight = viewport.width - (panelLeft + resolvedWidth) - collisionPadding;
+    return availableRight < resolvedWidth - 8 && availableLeft > availableRight ? 'left' : 'right';
+  }, [collisionPadding, fixedPositionStyle.left, measuredPanel, panelWidth]);
+  var handleSelect = useCallback(function (item) {
+    var _item$onClick;
+    if (disabled || item.disabled) return;
+    (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item);
+    var id = itemId(item);
+    if (item.id !== undefined) {
+      onSelect === null || onSelect === void 0 || onSelect(item);
+    } else {
+      onSelect === null || onSelect === void 0 || onSelect(id, item);
+    }
+    if (closeOnSelect) setOpen(false);
+  }, [closeOnSelect, disabled, onSelect, setOpen]);
+  var trigger = children ? /*#__PURE__*/_jsx(ContextMenuTrigger, {
+    disabled: disabled,
+    onClick: function onClick() {
+      setInternalPosition(null);
+      setOpen(!open);
+    },
+    onContextMenu: function onContextMenu(nextPosition) {
+      setInternalPosition(nextPosition);
+      setOpen(true);
+    },
+    children: /*#__PURE__*/_jsx(_Fragment, {
+      children: children
+    })
+  }) : null;
+  var panel = panelVisible ? /*#__PURE__*/_jsxs(Portal, {
+    root: Boolean(currentPosition),
+    children: [currentPosition || !hasDocument ? /*#__PURE__*/_jsx(View, {
+      "data-slot": "context-menu-backdrop",
+      className: "".concat(config.prefixCls, "-context-menu__backdrop"),
+      onClick: function onClick() {
+        return setOpen(false);
+      },
+      style: {
+        position: 'fixed',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        zIndex: 1079,
+        backgroundColor: 'transparent'
+      }
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      id: panelId,
+      role: "menu",
+      ariaLabel: nodeText(title) || '上下文菜单',
+      "data-slot": "context-menu",
+      "data-size": size,
+      className: classNames("".concat(config.prefixCls, "-context-menu__panel"), "".concat(config.prefixCls, "-context-menu__panel--").concat(size), disabled && "".concat(config.prefixCls, "-context-menu__panel--disabled"), className),
+      style: _objectSpread(_objectSpread({
+        position: currentPosition ? 'fixed' : 'absolute',
+        zIndex: 1080,
+        boxSizing: 'border-box',
+        minWidth: panelWidth,
+        maxWidth: 'calc(100vw - 32px)',
+        padding: "".concat(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),
+      children: [title !== undefined ? /*#__PURE__*/_jsx(View, {
+        className: "".concat(config.prefixCls, "-context-menu__title"),
+        style: {
+          padding: "".concat(scaleMobileMetric(6), "px ").concat(scaleMobileMetric(8), "px"),
+          borderBottomWidth: items.length > 0 ? 1 : 0,
+          borderBottomStyle: 'solid',
+          borderBottomColor: colors.border
+        },
+        children: renderNode(title, {
+          color: colors['muted-foreground'],
+          fontSize: 12,
+          lineHeight: "".concat(designSystemLineHeights.caption, "px"),
+          fontWeight: 600
+        })
+      }) : null, items.length > 0 ? items.map(function (item) {
+        return /*#__PURE__*/_jsx(ContextMenuRow, {
+          item: item,
+          size: size,
+          prefixCls: config.prefixCls,
+          activeId: activeId,
+          openSubmenuId: openSubmenuId,
+          disabled: disabled,
+          submenuSide: submenuSide,
+          onActivate: setActiveId,
+          onToggleSubmenu: setOpenSubmenuId,
+          onSelect: handleSelect
+        }, itemId(item));
+      }) : /*#__PURE__*/_jsx(View, {
+        className: "".concat(config.prefixCls, "-context-menu__empty"),
+        style: {
+          padding: 16,
+          textAlign: 'center'
+        },
+        children: renderNode(emptyText, {
+          color: colors['muted-foreground'],
+          fontSize: getFormControlTokens(size).textSize
+        })
+      })]
+    })]
+  }) : null;
+  return /*#__PURE__*/_jsxs(View, {
+    id: rootId,
+    className: "".concat(config.prefixCls, "-context-menu"),
+    style: {
+      position: 'relative',
+      display: children ? 'inline-flex' : 'contents'
+    },
+    children: [trigger, panel]
+  });
+};
+ContextMenu.displayName = 'ContextMenu';
+export default ContextMenu;

package/es/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

package/es/components/contextMenu/index.js

@@ -0,0 +1,3 @@
+export * from "./types";
+export { ContextMenu, ContextMenuTrigger } from "./contextMenu";
+export { default } from "./contextMenu";