@arco-design/mobile-react 2.19.0

package/esm/popover/hooks/usePosition.js

@@ -0,0 +1,524 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["adjustOffset"];
+import { isObject } from '@arco-design/mobile-utils';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { getDefaultValue, useRefState } from '../../_helpers';
+var defaultPosition = {
+  left: null,
+  top: null,
+  bottom: null,
+  width: null,
+  height: null,
+  arrowLeft: 0
+};
+/**
+ * 安全边界距离默认值
+ * @en Default safe boundary distance
+ */
+
+var defaultEdgeOffsetValue = 14;
+/**
+ * 安全距离默认值
+ * @en Default safe distance
+ */
+
+var defaultEdgeOffset = {
+  top: defaultEdgeOffsetValue,
+  right: defaultEdgeOffsetValue,
+  bottom: defaultEdgeOffsetValue,
+  left: defaultEdgeOffsetValue
+};
+/**
+ * 自适应默认值
+ * @en Default autoDirection
+ */
+
+export var defaultAutoDirection = true;
+export var usePosition = function usePosition(props, popoverRef, childRef, wrapperRef) {
+  var _props$direction = props.direction,
+      direction = _props$direction === void 0 ? 'topRight' : _props$direction,
+      _props$verticalOffset = props.verticalOffset,
+      verticalOffset = _props$verticalOffset === void 0 ? 10 : _props$verticalOffset,
+      _props$horizontalOffs = props.horizontalOffset,
+      horizontalOffset = _props$horizontalOffs === void 0 ? 8 : _props$horizontalOffs,
+      _props$edgeOffset = props.edgeOffset,
+      edgeOffset = _props$edgeOffset === void 0 ? defaultEdgeOffsetValue : _props$edgeOffset,
+      _props$arrowWidth = props.arrowWidth,
+      arrowWidth = _props$arrowWidth === void 0 ? 9 : _props$arrowWidth,
+      _props$mode = props.mode,
+      mode = _props$mode === void 0 ? 'follow' : _props$mode,
+      _props$useAutoDirecti = props.useAutoDirection,
+      useAutoDirection = _props$useAutoDirecti === void 0 ? defaultAutoDirection : _props$useAutoDirecti;
+  /**
+   * 气泡的位置信息
+   * @en Position information of the bubbles
+   */
+
+  var _useState = useState(defaultPosition),
+      position = _useState[0],
+      setPosition = _useState[1];
+  /**
+   * 是否在计算气泡位置
+   * @en Whether to calculate the bubble position
+   */
+
+
+  var isCalcPosition = useMemo(function () {
+    var top = position.top,
+        bottom = position.bottom,
+        height = position.height,
+        left = position.left,
+        width = position.width;
+
+    if (left || width || top || height || bottom) {
+      return false;
+    }
+
+    return true;
+  }, [position]);
+  /**
+   * 缩放动画中心，尖角的顶部
+   * @en Scale animation center, top of sharp corners
+   */
+
+  var _useState2 = useState({
+    x: '0',
+    y: '0'
+  }),
+      transformOrigin = _useState2[0],
+      setTransformOrigin = _useState2[1];
+  /**
+   * 气泡方向，可以会自适应变化
+   * @en Bubble direction, can be adaptively changed
+   */
+
+
+  var _useRefState = useRefState(direction),
+      directionState = _useRefState[0],
+      directionStateRef = _useRefState[1],
+      setDirectionState = _useRefState[2];
+
+  var getOffset = useCallback(function (dir) {
+    return getDefaultValue(isObject(edgeOffset) ? edgeOffset[dir] : edgeOffset, defaultEdgeOffset[dir]);
+  }, [edgeOffset]);
+  var getAutoDirection = useCallback(function (dir) {
+    return getDefaultValue(isObject(useAutoDirection) ? useAutoDirection[dir] : useAutoDirection, defaultAutoDirection);
+  }, [useAutoDirection]);
+  useEffect(function () {
+    setDirectionState(direction);
+  }, [direction]);
+  /**
+   * 调整尖角图标的位置
+   * @en Adjust the position of the sharp corner icon
+   */
+
+  function adjustArrow(_ref) {
+    var childRect = _ref.childRect,
+        config = _ref.config;
+
+    if (directionState.indexOf('Left') !== -1 || directionState.indexOf('Right') !== -1) {
+      return (childRect.width - arrowWidth) / 2 + horizontalOffset;
+    }
+
+    return (config.width - arrowWidth) / 2;
+  }
+  /**
+   * 如果提示框超出屏幕，则向屏幕中间调整一下
+   * @en If the prompt box is beyond the screen, adjust it to the middle of the screen
+   */
+
+
+  function adjustEdge(_ref2) {
+    var childRect = _ref2.childRect,
+        config = _ref2.config;
+
+    var newConfig = _extends({}, config, {
+      adjustOffset: 0
+    });
+
+    newConfig.arrowLeft = adjustArrow({
+      childRect: childRect,
+      config: config
+    });
+    var screenWidth = screen.availWidth;
+    var _ref3 = [getOffset('top'), getOffset('right'), getOffset('bottom'), getOffset('left')],
+        topOffset = _ref3[0],
+        rightOffset = _ref3[1],
+        bottomOffset = _ref3[2],
+        leftOffset = _ref3[3];
+    var _ref4 = [getAutoDirection('vertical'), getAutoDirection('horizontal')],
+        verticalAuto = _ref4[0],
+        horizontalAuto = _ref4[1]; // 水平方向安全距离自动调整
+    // @en Automatic adjustment of safety distance in horizontal direction
+
+    if (horizontalAuto) {
+      if (directionState.indexOf('Right') !== -1) {
+        var overflow = Number(config.width) - childRect.left - childRect.width; // 左边是否溢出，向右平移安全距离
+        // @en Whether the left overflows, pan to the right by a safe distance
+
+        if (overflow > 0) {
+          var adjustOffset = overflow + leftOffset;
+          newConfig.left = Number(newConfig.left) + adjustOffset;
+          newConfig.arrowLeft += adjustOffset;
+          newConfig.adjustOffset = adjustOffset;
+        } // 右边是否溢出，向左平移
+        // @en Whether to overflow on the right, pan to the left
+
+
+        if (screenWidth - childRect.right < rightOffset) {
+          overflow = rightOffset;
+
+          var _adjustOffset = -(overflow - (screenWidth - childRect.right));
+
+          newConfig.left = Number(newConfig.left) + _adjustOffset;
+          newConfig.adjustOffset = _adjustOffset;
+        }
+      } else if (directionState.indexOf('Center') !== -1) {
+        var beyondChildEdge = (Number(config.width) - childRect.width) / 2;
+        var rightOverflow = beyondChildEdge - (screenWidth - childRect.right);
+        var leftOverflow = beyondChildEdge - childRect.left; // 右边是否溢出
+        // @en Whether to overflow on the right
+
+        if (rightOverflow > 0) {
+          var _adjustOffset2 = -(rightOverflow + rightOffset);
+
+          newConfig.left = Number(newConfig.left) + _adjustOffset2;
+          newConfig.arrowLeft -= _adjustOffset2;
+          newConfig.adjustOffset = _adjustOffset2;
+        } // 左边是否溢出
+        // @en Whether the left overflow
+
+
+        if (leftOverflow > 0) {
+          var _adjustOffset3 = leftOverflow + leftOffset;
+
+          newConfig.left = Number(newConfig.left) + _adjustOffset3;
+          newConfig.arrowLeft -= _adjustOffset3;
+          newConfig.adjustOffset = _adjustOffset3;
+        }
+      } else if (directionState.indexOf('Left') !== -1) {
+        var _overflow = Number(config.width) - childRect.width - (screenWidth - childRect.right); // 右边是否溢出
+        // @en Whether to overflow on the right
+
+
+        if (_overflow > 0) {
+          var _adjustOffset4 = -(_overflow + rightOffset);
+
+          newConfig.left = Number(newConfig.left) + _adjustOffset4;
+          newConfig.arrowLeft -= _adjustOffset4;
+          newConfig.adjustOffset = _adjustOffset4;
+        }
+
+        if (childRect.left < leftOffset) {
+          // 左边是否不够
+          // @en Whether the left is not enough
+          _overflow = leftOffset;
+          newConfig.left = Number(newConfig.left) + _overflow;
+          newConfig.adjustOffset = leftOffset;
+        }
+      }
+    } // 垂直方向安全距离调整
+    // @en Vertical safety distance adjustment
+
+
+    if (verticalAuto) {
+      var popoverTop = childRect.bottom - (newConfig.bottom && newConfig.height ? newConfig.bottom + newConfig.height : 0);
+      var popoverBottom = childRect.top + (newConfig.top && newConfig.height ? newConfig.top + newConfig.height : 0); // 顶部安全距离不够，调整到底部
+      // @en The top safety distance is not enough, adjust to the bottom
+
+      if (directionState.indexOf('top') !== -1 && popoverTop < topOffset) {
+        newConfig.top = verticalOffset + childRect.height;
+        newConfig.bottom = null;
+        onAdjustDirection('bottom');
+      } else if (directionState.indexOf('bottom') !== -1 && popoverBottom + bottomOffset > window.innerHeight) {
+        // 底部安全距离不够，调整到顶部
+        // @en The bottom safety distance is not enough, adjust to the top
+        newConfig.top = null;
+        newConfig.bottom = verticalOffset + childRect.height;
+        onAdjustDirection('top');
+      }
+    } // 挂载在全局的气泡需要计算相对屏幕的位置
+    // @en Bubble mounted in the global needs to calculate the position relative to the screen
+
+
+    if (mode === 'global') {
+      var wrapperEl = wrapperRef.current;
+      if (!wrapperEl) return newConfig;
+
+      var _wrapperEl$getBoundin = wrapperEl.getBoundingClientRect(),
+          top = _wrapperEl$getBoundin.top,
+          left = _wrapperEl$getBoundin.left,
+          bottom = _wrapperEl$getBoundin.bottom;
+
+      if (newConfig.left !== null) newConfig.left += left;
+      if (newConfig.top !== null) newConfig.top += top;
+
+      if (newConfig.bottom !== null) {
+        var windowInnerHeight = window.innerHeight || document.documentElement.clientHeight;
+        newConfig.bottom = windowInnerHeight - (bottom - newConfig.bottom);
+      }
+    }
+
+    return newConfig;
+  }
+  /**
+   * 计算缩放动画中心尖角顶部的位置
+   */
+
+
+  function getOrigin(config, adjustOffset) {
+    var arrowLeft = config.arrowLeft;
+    var width = config.width || 0;
+    var height = config.height || 0;
+    var halfArrowWidth = arrowWidth / 2;
+    var x = width / 2 + "px";
+    var y = directionStateRef.current.indexOf('top') > -1 ? halfArrowWidth + height + "px" : "-" + halfArrowWidth + "px";
+
+    if (directionStateRef.current.indexOf('Left') > -1) {
+      x = arrowLeft + halfArrowWidth + "px";
+    } else if (directionStateRef.current.indexOf('Right') > -1) {
+      x = width - (arrowLeft + halfArrowWidth) + "px";
+    } else {
+      x = width / 2 - adjustOffset + "px";
+    }
+
+    return {
+      x: x,
+      y: y
+    };
+  }
+  /**
+   * 调整边界并更新气泡位置
+   * @en Adjust bounds and update bubble position
+   */
+
+
+  function judgeAndUpdatePosition(childRect, config) {
+    var _adjustEdge = adjustEdge({
+      childRect: childRect,
+      config: config
+    }),
+        adjustOffset = _adjustEdge.adjustOffset,
+        newConfig = _objectWithoutPropertiesLoose(_adjustEdge, _excluded);
+
+    var newTransformOrigin = getOrigin(newConfig, adjustOffset);
+    setTransformOrigin(newTransformOrigin);
+    setPosition(newConfig);
+  }
+  /* eslint-disable react-hooks/exhaustive-deps */
+
+
+  var setTopRightOffset = function setTopRightOffset(_ref5) {
+    var popoverWidth = _ref5.popoverWidth,
+        popoverHeight = _ref5.popoverHeight,
+        childRect = _ref5.childRect;
+    var left = -(popoverWidth - childRect.width - horizontalOffset);
+    var bottom = verticalOffset + childRect.height;
+    var config = {
+      left: left,
+      width: popoverWidth,
+      top: null,
+      height: popoverHeight,
+      bottom: bottom,
+      arrowLeft: 0
+    };
+    judgeAndUpdatePosition(childRect, config);
+  };
+
+  var setTopCenterOffset = function setTopCenterOffset(_ref6) {
+    var popoverWidth = _ref6.popoverWidth,
+        popoverHeight = _ref6.popoverHeight,
+        childRect = _ref6.childRect;
+    var left = -(popoverWidth - childRect.width) / 2;
+    var bottom = verticalOffset + childRect.height;
+    var config = {
+      left: left,
+      width: popoverWidth,
+      top: null,
+      height: popoverHeight,
+      bottom: bottom,
+      arrowLeft: 0
+    };
+    judgeAndUpdatePosition(childRect, config);
+  };
+
+  var setTopLeftOffset = function setTopLeftOffset(_ref7) {
+    var popoverWidth = _ref7.popoverWidth,
+        popoverHeight = _ref7.popoverHeight,
+        childRect = _ref7.childRect;
+    var left = -horizontalOffset;
+    var bottom = verticalOffset + childRect.height;
+    var config = {
+      left: left,
+      width: popoverWidth,
+      top: null,
+      height: popoverHeight,
+      bottom: bottom,
+      arrowLeft: 0
+    };
+    judgeAndUpdatePosition(childRect, config);
+  };
+
+  var setBottomRightOffset = function setBottomRightOffset(_ref8) {
+    var popoverWidth = _ref8.popoverWidth,
+        popoverHeight = _ref8.popoverHeight,
+        childRect = _ref8.childRect;
+    var left = -(popoverWidth - childRect.width - horizontalOffset);
+    var top = verticalOffset + childRect.height;
+    var config = {
+      left: left,
+      width: popoverWidth,
+      bottom: null,
+      height: popoverHeight,
+      top: top,
+      arrowLeft: 0
+    };
+    judgeAndUpdatePosition(childRect, config);
+  };
+
+  var setBottomCenterOffset = function setBottomCenterOffset(_ref9) {
+    var popoverWidth = _ref9.popoverWidth,
+        popoverHeight = _ref9.popoverHeight,
+        childRect = _ref9.childRect;
+    var left = -(popoverWidth - childRect.width) / 2;
+    var top = verticalOffset + childRect.height;
+    var config = {
+      left: left,
+      width: popoverWidth,
+      bottom: null,
+      height: popoverHeight,
+      top: top,
+      arrowLeft: 0
+    };
+    judgeAndUpdatePosition(childRect, config);
+  };
+
+  var setBottomLeftOffset = function setBottomLeftOffset(_ref10) {
+    var popoverWidth = _ref10.popoverWidth,
+        popoverHeight = _ref10.popoverHeight,
+        childRect = _ref10.childRect;
+    var left = -horizontalOffset;
+    var top = verticalOffset + childRect.height;
+    var config = {
+      left: left,
+      width: popoverWidth,
+      bottom: null,
+      height: popoverHeight,
+      arrowLeft: 0,
+      top: top
+    };
+    judgeAndUpdatePosition(childRect, config);
+  };
+  /**
+   * 计算气泡内容的位置
+   * @en Calculate the position of the content of the bubble
+   */
+
+
+  var computedChildAndPopoverOffset = useCallback(function () {
+    var _popoverRef$current;
+
+    var popoverEle = (_popoverRef$current = popoverRef.current) == null ? void 0 : _popoverRef$current.content;
+    if (!popoverEle) return;
+    var popoverWidth = popoverEle.offsetWidth;
+    var popoverHeight = popoverEle.offsetHeight;
+    if (popoverWidth === 0 || popoverHeight === 0) return;
+    var childEle = childRef.current;
+
+    if (!childEle) {
+      return;
+    }
+
+    var childRect = childEle.getBoundingClientRect();
+    var config = {
+      popoverWidth: popoverWidth,
+      popoverHeight: popoverHeight,
+      childRect: childRect
+    };
+
+    switch (directionState) {
+      case 'topRight':
+        setTopRightOffset(config);
+        break;
+
+      case 'topCenter':
+        setTopCenterOffset(config);
+        break;
+
+      case 'topLeft':
+        setTopLeftOffset(config);
+        break;
+
+      case 'bottomRight':
+        setBottomRightOffset(config);
+        break;
+
+      case 'bottomCenter':
+        setBottomCenterOffset(config);
+        break;
+
+      case 'bottomLeft':
+        setBottomLeftOffset(config);
+        break;
+
+      default:
+        break;
+    }
+  }, [childRef, directionState, popoverRef, setTopRightOffset, setTopCenterOffset, setTopLeftOffset, setBottomRightOffset, setBottomCenterOffset, setBottomLeftOffset]);
+
+  var resetPosition = function resetPosition() {
+    setPosition(defaultPosition);
+    setDirectionState(direction);
+  };
+  /**
+   * 调整气泡垂直方向回调
+   * @en Callback when adjusting the vertical direction of the bubble
+   */
+
+
+  var onAdjustDirection = function onAdjustDirection(vertical) {
+    if (directionState.indexOf(vertical) === -1) {
+      var newDirection = directionState.replace(/top|bottom/, vertical);
+      setDirectionState(newDirection);
+      directionStateRef.current = newDirection;
+    }
+  };
+  /**
+   * 判断垂直方向是否需要调整
+   * @en Determine whether the vertical direction needs to be adjusted
+   */
+
+
+  var adjustVerticalDirection = useCallback(function () {
+    var popover = popoverRef.current;
+
+    if (!popover) {
+      return;
+    }
+
+    var popoverEle = popover.content;
+    if (!popoverEle) return;
+
+    var _popoverEle$getBoundi = popoverEle.getBoundingClientRect(),
+        top = _popoverEle$getBoundi.top,
+        bottom = _popoverEle$getBoundi.bottom; // 顶部安全距离不够，调整到底部
+    // @en The top safety distance is not enough, adjust to the bottom
+
+
+    if (directionState.indexOf('top') !== -1 && top < getOffset('top') || directionState.indexOf('bottom') !== -1 && bottom + getOffset('bottom') > window.innerHeight) {
+      computedChildAndPopoverOffset();
+    }
+  }, [directionState, popoverRef, computedChildAndPopoverOffset, getOffset]);
+  return {
+    direction: directionState,
+    position: position,
+    isCalcPosition: isCalcPosition,
+    arrowWidth: arrowWidth,
+    transformOrigin: transformOrigin,
+    computedChildAndPopoverOffset: computedChildAndPopoverOffset,
+    resetPosition: resetPosition,
+    onAdjustDirection: onAdjustDirection,
+    adjustVerticalDirection: adjustVerticalDirection
+  };
+};

package/esm/popover/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export * from './type';
+declare const _default: import("react").ForwardRefExoticComponent<Partial<import("./type").DefaultPopoverProps> & import("react").RefAttributes<import("./type").PopoverRef>> & {
+    Menu: import("react").ForwardRefExoticComponent<import("./type").PopoverMenuProps & import("react").RefAttributes<import("./type").PopoverRef>>;
+};
+/**
+ * 气泡卡片，支持六个方向，小箭头在各个方向均基于挂载的子元素居中放置，支持受控和非受控模式。
+ * @en Bubble card, supports six directions, small arrows are centered in each direction based on the mounted sub-elements, and supports controlled and uncontrolled modes.
+ * @name 气泡卡片
+ * @name_en Popover
+ * @type 数据展示
+ * @type_en Data Display
+ */
+export default _default;

package/esm/popover/index.js

@@ -0,0 +1,22 @@
+import { componentWrapper } from '@arco-design/mobile-utils';
+import { componentGenerator } from './menu';
+import { Popover } from './popover';
+export * from './type';
+/**
+ * 气泡菜单
+ * @en Bubble menu
+ */
+
+var Menu = componentGenerator(Popover);
+/**
+ * 气泡卡片，支持六个方向，小箭头在各个方向均基于挂载的子元素居中放置，支持受控和非受控模式。
+ * @en Bubble card, supports six directions, small arrows are centered in each direction based on the mounted sub-elements, and supports controlled and uncontrolled modes.
+ * @name 气泡卡片
+ * @name_en Popover
+ * @type 数据展示
+ * @type_en Data Display
+ */
+
+export default componentWrapper(Popover, {
+  Menu: Menu
+});

package/esm/popover/menu.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PopoverMenuProps, PopoverProps, PopoverRef } from './type';
+export declare function componentGenerator<P extends PopoverProps = PopoverProps, R extends PopoverRef = PopoverRef>(Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>): React.ForwardRefExoticComponent<PopoverMenuProps & React.RefAttributes<R>>;

package/esm/popover/menu.js

@@ -0,0 +1,132 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["menu", "menuLayout", "onSelect", "onClickMenuItem", "className", "useClickStatus", "clickStatusDuration", "clickSelfToClose", "touchSelfToClose", "defaultVisible", "visible", "onChange"];
+import { cls } from '@arco-design/mobile-utils';
+import React, { useContext, useMemo, useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { GlobalContext } from '../context-provider';
+export function componentGenerator(Comp) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    var menu = props.menu,
+        _props$menuLayout = props.menuLayout,
+        menuLayout = _props$menuLayout === void 0 ? 'vertical' : _props$menuLayout,
+        onSelect = props.onSelect,
+        onClickMenuItem = props.onClickMenuItem,
+        _props$className = props.className,
+        className = _props$className === void 0 ? '' : _props$className,
+        _props$useClickStatus = props.useClickStatus,
+        useClickStatus = _props$useClickStatus === void 0 ? false : _props$useClickStatus,
+        _props$clickStatusDur = props.clickStatusDuration,
+        clickStatusDuration = _props$clickStatusDur === void 0 ? 300 : _props$clickStatusDur,
+        _props$clickSelfToClo = props.clickSelfToClose,
+        clickSelfToClose = _props$clickSelfToClo === void 0 ? true : _props$clickSelfToClo,
+        _props$touchSelfToClo = props.touchSelfToClose,
+        touchSelfToClose = _props$touchSelfToClo === void 0 ? props.touchToClose === void 0 ? false : props.touchToClose : _props$touchSelfToClo,
+        _props$defaultVisible = props.defaultVisible,
+        defaultVisible = _props$defaultVisible === void 0 ? false : _props$defaultVisible,
+        visible = props.visible,
+        onChange = props.onChange,
+        restProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+    var _useContext = useContext(GlobalContext),
+        prefixCls = _useContext.prefixCls;
+
+    var _useState = useState(-1),
+        activeIndex = _useState[0],
+        setActiveIndex = _useState[1];
+
+    var activeTimer = useRef(0);
+    var formattedMenu = useMemo(function () {
+      return menu.map(function (item) {
+        if (typeof item === 'string') {
+          return {
+            text: item
+          };
+        }
+
+        return item;
+      });
+    }, [menu]);
+
+    var _useState2 = useState(visible === void 0 ? defaultVisible : visible),
+        visibleState = _useState2[0],
+        setVisibleState = _useState2[1];
+
+    useEffect(function () {
+      setVisibleState(Boolean(visible));
+    }, [visible]);
+    var popoverRef = useRef(null);
+    useImperativeHandle(ref, function () {
+      return popoverRef.current;
+    });
+
+    var onVisibleChange = function onVisibleChange(newVisible) {
+      var handleVisibleChange = function handleVisibleChange() {
+        if (onChange && typeof onChange === 'function') {
+          onChange(newVisible);
+        }
+
+        if (visible === void 0) {
+          setVisibleState(newVisible);
+        }
+      }; // 如果设置了点击效果则延时回调onChange函数，留出点击效果的时间
+      // @en If the click effect is set, the onChange function is delayed and called back, leaving time for the click effect
+
+
+      if (!newVisible && useClickStatus) {
+        window.setTimeout(handleVisibleChange, Math.max(0, clickStatusDuration - 300));
+      } else {
+        handleVisibleChange();
+      }
+    };
+
+    var content = useMemo(function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: cls(prefixCls + "-popover-menu-content", menuLayout + "-menu")
+      }, formattedMenu.map(function (item, index) {
+        var defaultValue = typeof item.text === 'string' ? item.text : "menu_item_" + index;
+        var text = item.text,
+            _item$value = item.value,
+            value = _item$value === void 0 ? defaultValue : _item$value,
+            _item$disabled = item.disabled,
+            disabled = _item$disabled === void 0 ? false : _item$disabled,
+            icon = item.icon;
+        return /*#__PURE__*/React.createElement("div", {
+          className: cls(prefixCls + "-popover-menu-item", {
+            disabled: disabled,
+            active: activeIndex === index
+          }),
+          key: value,
+          onTouchStart: function onTouchStart() {
+            if (useClickStatus && !disabled) {
+              clearTimeout(activeTimer.current);
+              setActiveIndex(index);
+              activeTimer.current = window.setTimeout(function () {
+                setActiveIndex(-1);
+                activeTimer.current = 0;
+              }, clickStatusDuration);
+            }
+          },
+          onClick: function onClick() {
+            onClickMenuItem && onClickMenuItem(value, menu[index]);
+            if (disabled) return;
+            onSelect && onSelect(value, menu[index]);
+          }
+        }, icon && /*#__PURE__*/React.createElement("div", {
+          className: cls(prefixCls + "-popover-menu-icon")
+        }, icon), /*#__PURE__*/React.createElement("div", {
+          className: cls(prefixCls + "-popover-menu-text")
+        }, text));
+      }));
+    }, [prefixCls, menuLayout, formattedMenu, activeIndex, useClickStatus, clickStatusDuration, onClickMenuItem, onSelect]);
+    return /*#__PURE__*/React.createElement(Comp, _extends({
+      ref: popoverRef,
+      visible: visibleState,
+      clickSelfToClose: clickSelfToClose,
+      touchSelfToClose: touchSelfToClose,
+      onChange: onVisibleChange
+    }, restProps, {
+      content: content,
+      className: cls(className, prefixCls + "-popover-menu")
+    }));
+  });
+}

package/esm/popover/popover-inner.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PopoverInnerProps, PopoverInnerRef } from './type';
+export declare const PopoverInner: React.ForwardRefExoticComponent<PopoverInnerProps & React.RefAttributes<PopoverInnerRef>>;