@arco-design/mobile-react 2.31.5 → 2.32.0

package/esnext/popover/hooks/usePosition.js

@@ -0,0 +1,419 @@
+import { isObject } from '@arco-design/mobile-utils';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { getDefaultValue, useRefState } from '../../_helpers';
+const defaultPosition = {
+    left: null,
+    top: null,
+    bottom: null,
+    width: null,
+    height: null,
+    arrowLeft: 0,
+};
+/**
+ * 安全边界距离默认值
+ * @en Default safe boundary distance
+ */
+const defaultEdgeOffsetValue = 14;
+/**
+ * 安全距离默认值
+ * @en Default safe distance
+ */
+const defaultEdgeOffset = {
+    top: defaultEdgeOffsetValue,
+    right: defaultEdgeOffsetValue,
+    bottom: defaultEdgeOffsetValue,
+    left: defaultEdgeOffsetValue,
+};
+/**
+ * 自适应默认值
+ * @en Default autoDirection
+ */
+export const defaultAutoDirection = true;
+export const usePosition = (props, popoverRef, childRef, wrapperRef) => {
+    const { direction = 'topRight', verticalOffset = 10, horizontalOffset = 8, edgeOffset = defaultEdgeOffsetValue, arrowWidth = 9, mode = 'follow', useAutoDirection = defaultAutoDirection, } = props;
+    /**
+     * 气泡的位置信息
+     * @en Position information of the bubbles
+     */
+    const [position, setPosition] = useState(defaultPosition);
+    /**
+     * 是否在计算气泡位置
+     * @en Whether to calculate the bubble position
+     */
+    const isCalcPosition = useMemo(() => {
+        const { top, bottom, height, left, width } = position;
+        if (left || width || top || height || bottom) {
+            return false;
+        }
+        return true;
+    }, [position]);
+    /**
+     * 缩放动画中心，尖角的顶部
+     * @en Scale animation center, top of sharp corners
+     */
+    const [transformOrigin, setTransformOrigin] = useState({
+        x: '0',
+        y: '0',
+    });
+    /**
+     * 气泡方向，可以会自适应变化
+     * @en Bubble direction, can be adaptively changed
+     */
+    const [directionState, directionStateRef, setDirectionState] = useRefState(direction);
+    const getOffset = useCallback((dir) => getDefaultValue(isObject(edgeOffset) ? edgeOffset[dir] : edgeOffset, defaultEdgeOffset[dir]), [edgeOffset]);
+    const getAutoDirection = useCallback((dir) => getDefaultValue(isObject(useAutoDirection) ? useAutoDirection[dir] : useAutoDirection, defaultAutoDirection), [useAutoDirection]);
+    useEffect(() => {
+        setDirectionState(direction);
+    }, [direction]);
+    /**
+     * 调整尖角图标的位置
+     * @en Adjust the position of the sharp corner icon
+     */
+    function adjustArrow({ childRect, 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({ childRect, config }) {
+        const newConfig = { ...config, adjustOffset: 0 };
+        newConfig.arrowLeft = adjustArrow({
+            childRect,
+            config,
+        });
+        const screenWidth = screen.availWidth;
+        const [topOffset, rightOffset, bottomOffset, leftOffset] = [
+            getOffset('top'),
+            getOffset('right'),
+            getOffset('bottom'),
+            getOffset('left'),
+        ];
+        const [verticalAuto, horizontalAuto] = [
+            getAutoDirection('vertical'),
+            getAutoDirection('horizontal'),
+        ];
+        // 水平方向安全距离自动调整
+        // @en Automatic adjustment of safety distance in horizontal direction
+        if (horizontalAuto) {
+            if (directionState.indexOf('Right') !== -1) {
+                let overflow = Number(config.width) - childRect.left - childRect.width;
+                // 左边是否溢出，向右平移安全距离
+                // @en Whether the left overflows, pan to the right by a safe distance
+                if (overflow > 0) {
+                    const 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;
+                    const adjustOffset = -(overflow - (screenWidth - childRect.right));
+                    newConfig.left = Number(newConfig.left) + adjustOffset;
+                    newConfig.adjustOffset = adjustOffset;
+                }
+            }
+            else if (directionState.indexOf('Center') !== -1) {
+                const beyondChildEdge = (Number(config.width) - childRect.width) / 2;
+                const rightOverflow = beyondChildEdge - (screenWidth - childRect.right);
+                const leftOverflow = beyondChildEdge - childRect.left;
+                // 右边是否溢出
+                // @en Whether to overflow on the right
+                if (rightOverflow > 0) {
+                    const adjustOffset = -(rightOverflow + rightOffset);
+                    newConfig.left = Number(newConfig.left) + adjustOffset;
+                    newConfig.arrowLeft -= adjustOffset;
+                    newConfig.adjustOffset = adjustOffset;
+                }
+                // 左边是否溢出
+                // @en Whether the left overflow
+                if (leftOverflow > 0) {
+                    const adjustOffset = leftOverflow + leftOffset;
+                    newConfig.left = Number(newConfig.left) + adjustOffset;
+                    newConfig.arrowLeft -= adjustOffset;
+                    newConfig.adjustOffset = adjustOffset;
+                }
+            }
+            else if (directionState.indexOf('Left') !== -1) {
+                let overflow = Number(config.width) - childRect.width - (screenWidth - childRect.right);
+                // 右边是否溢出
+                // @en Whether to overflow on the right
+                if (overflow > 0) {
+                    const adjustOffset = -(overflow + rightOffset);
+                    newConfig.left = Number(newConfig.left) + adjustOffset;
+                    newConfig.arrowLeft -= adjustOffset;
+                    newConfig.adjustOffset = adjustOffset;
+                }
+                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) {
+            const popoverTop = childRect.bottom -
+                (newConfig.bottom && newConfig.height ? newConfig.bottom + newConfig.height : 0);
+            const 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') {
+            const wrapperEl = wrapperRef.current;
+            if (!wrapperEl)
+                return newConfig;
+            const { top, left, bottom } = wrapperEl.getBoundingClientRect();
+            if (newConfig.left !== null)
+                newConfig.left += left;
+            if (newConfig.top !== null)
+                newConfig.top += top;
+            if (newConfig.bottom !== null) {
+                const windowInnerHeight = window.innerHeight || document.documentElement.clientHeight;
+                newConfig.bottom = windowInnerHeight - (bottom - newConfig.bottom);
+            }
+        }
+        return newConfig;
+    }
+    /**
+     * 计算缩放动画中心尖角顶部的位置
+     */
+    function getOrigin(config, adjustOffset) {
+        const { arrowLeft } = config;
+        const width = config.width || 0;
+        const height = config.height || 0;
+        const halfArrowWidth = arrowWidth / 2;
+        let x = `${width / 2}px`;
+        const 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, y };
+    }
+    /**
+     * 调整边界并更新气泡位置
+     * @en Adjust bounds and update bubble position
+     */
+    function judgeAndUpdatePosition(childRect, config) {
+        const { adjustOffset, ...newConfig } = adjustEdge({
+            childRect,
+            config,
+        });
+        const newTransformOrigin = getOrigin(newConfig, adjustOffset);
+        setTransformOrigin(newTransformOrigin);
+        setPosition(newConfig);
+    }
+    /* eslint-disable react-hooks/exhaustive-deps */
+    const setTopRightOffset = ({ popoverWidth, popoverHeight, childRect }) => {
+        const left = -(popoverWidth - childRect.width - horizontalOffset);
+        const bottom = verticalOffset + childRect.height;
+        const config = {
+            left,
+            width: popoverWidth,
+            top: null,
+            height: popoverHeight,
+            bottom,
+            arrowLeft: 0,
+        };
+        judgeAndUpdatePosition(childRect, config);
+    };
+    const setTopCenterOffset = ({ popoverWidth, popoverHeight, childRect }) => {
+        const left = -(popoverWidth - childRect.width) / 2;
+        const bottom = verticalOffset + childRect.height;
+        const config = {
+            left,
+            width: popoverWidth,
+            top: null,
+            height: popoverHeight,
+            bottom,
+            arrowLeft: 0,
+        };
+        judgeAndUpdatePosition(childRect, config);
+    };
+    const setTopLeftOffset = ({ popoverWidth, popoverHeight, childRect }) => {
+        const left = -horizontalOffset;
+        const bottom = verticalOffset + childRect.height;
+        const config = {
+            left,
+            width: popoverWidth,
+            top: null,
+            height: popoverHeight,
+            bottom,
+            arrowLeft: 0,
+        };
+        judgeAndUpdatePosition(childRect, config);
+    };
+    const setBottomRightOffset = ({ popoverWidth, popoverHeight, childRect }) => {
+        const left = -(popoverWidth - childRect.width - horizontalOffset);
+        const top = verticalOffset + childRect.height;
+        const config = {
+            left,
+            width: popoverWidth,
+            bottom: null,
+            height: popoverHeight,
+            top,
+            arrowLeft: 0,
+        };
+        judgeAndUpdatePosition(childRect, config);
+    };
+    const setBottomCenterOffset = ({ popoverWidth, popoverHeight, childRect }) => {
+        const left = -(popoverWidth - childRect.width) / 2;
+        const top = verticalOffset + childRect.height;
+        const config = {
+            left,
+            width: popoverWidth,
+            bottom: null,
+            height: popoverHeight,
+            top,
+            arrowLeft: 0,
+        };
+        judgeAndUpdatePosition(childRect, config);
+    };
+    const setBottomLeftOffset = ({ popoverWidth, popoverHeight, childRect }) => {
+        const left = -horizontalOffset;
+        const top = verticalOffset + childRect.height;
+        const config = {
+            left,
+            width: popoverWidth,
+            bottom: null,
+            height: popoverHeight,
+            arrowLeft: 0,
+            top,
+        };
+        judgeAndUpdatePosition(childRect, config);
+    };
+    /**
+     * 计算气泡内容的位置
+     * @en Calculate the position of the content of the bubble
+     */
+    const computedChildAndPopoverOffset = useCallback(() => {
+        const popoverEle = popoverRef.current?.content;
+        if (!popoverEle)
+            return;
+        const popoverWidth = popoverEle.offsetWidth;
+        const popoverHeight = popoverEle.offsetHeight;
+        if (popoverWidth === 0 || popoverHeight === 0)
+            return;
+        const childEle = childRef.current;
+        if (!childEle) {
+            return;
+        }
+        const childRect = childEle.getBoundingClientRect();
+        const config = {
+            popoverWidth,
+            popoverHeight,
+            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,
+    ]);
+    const resetPosition = () => {
+        setPosition(defaultPosition);
+        setDirectionState(direction);
+    };
+    /**
+     * 调整气泡垂直方向回调
+     * @en Callback when adjusting the vertical direction of the bubble
+     */
+    const onAdjustDirection = (vertical) => {
+        if (directionState.indexOf(vertical) === -1) {
+            const newDirection = directionState.replace(/top|bottom/, vertical);
+            setDirectionState(newDirection);
+            directionStateRef.current = newDirection;
+        }
+    };
+    /**
+     * 判断垂直方向是否需要调整
+     * @en Determine whether the vertical direction needs to be adjusted
+     */
+    const adjustVerticalDirection = useCallback(() => {
+        const popover = popoverRef.current;
+        if (!popover) {
+            return;
+        }
+        const popoverEle = popover.content;
+        if (!popoverEle)
+            return;
+        const { top, bottom } = popoverEle.getBoundingClientRect();
+        // 顶部安全距离不够，调整到底部
+        // @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,
+        isCalcPosition,
+        arrowWidth,
+        transformOrigin,
+        computedChildAndPopoverOffset,
+        resetPosition,
+        onAdjustDirection,
+        adjustVerticalDirection,
+    };
+};

package/esnext/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/esnext/popover/index.js

@@ -0,0 +1,20 @@
+import { componentWrapper } from '@arco-design/mobile-utils';
+import { componentGenerator } from './menu';
+import { Popover } from './popover';
+export * from './type';
+/**
+ * 气泡菜单
+ * @en Bubble menu
+ */
+const 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,
+});

package/esnext/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/esnext/popover/menu.js

@@ -0,0 +1,80 @@
+import { cls } from '@arco-design/mobile-utils';
+import React, { useContext, useMemo, useState, useRef, forwardRef, useImperativeHandle, } from 'react';
+import { GlobalContext } from '../context-provider';
+import { useUpdateEffect } from '../_helpers';
+export function componentGenerator(Comp) {
+    return forwardRef((props, ref) => {
+        const { menu, menuLayout = 'vertical', onSelect, onClickMenuItem, className = '', useClickStatus = false, clickStatusDuration = 300, clickSelfToClose = true, touchSelfToClose = props.touchToClose === void 0 ? false : props.touchToClose, defaultVisible = false, visible, onChange, ...restProps } = props;
+        const { prefixCls } = useContext(GlobalContext);
+        const [activeIndex, setActiveIndex] = useState(-1);
+        const activeTimer = useRef(0);
+        const formattedMenu = useMemo(() => {
+            return menu.map(item => {
+                if (typeof item === 'string') {
+                    return {
+                        text: item,
+                    };
+                }
+                return item;
+            });
+        }, [menu]);
+        const [visibleState, setVisibleState] = useState(visible === void 0 ? defaultVisible : visible);
+        useUpdateEffect(() => {
+            setVisibleState(Boolean(visible));
+        }, [visible]);
+        const popoverRef = useRef(null);
+        useImperativeHandle(ref, () => popoverRef.current);
+        const onVisibleChange = newVisible => {
+            const 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();
+            }
+        };
+        const content = useMemo(() => (React.createElement("div", { className: cls(`${prefixCls}-popover-menu-content`, `${menuLayout}-menu`) }, formattedMenu.map((item, index) => {
+            const defaultValue = typeof item.text === 'string' ? item.text : `menu_item_${index}`;
+            const { text, value = defaultValue, disabled = false, icon } = item;
+            return (React.createElement("div", { className: cls(`${prefixCls}-popover-menu-item`, {
+                    disabled,
+                    active: activeIndex === index,
+                }), key: value, onTouchStart: () => {
+                    if (useClickStatus && !disabled) {
+                        clearTimeout(activeTimer.current);
+                        setActiveIndex(index);
+                        activeTimer.current = window.setTimeout(() => {
+                            setActiveIndex(-1);
+                            activeTimer.current = 0;
+                        }, clickStatusDuration);
+                    }
+                }, onClick: () => {
+                    onClickMenuItem && onClickMenuItem(value, menu[index]);
+                    if (disabled)
+                        return;
+                    onSelect && onSelect(value, menu[index]);
+                } },
+                icon && (React.createElement("div", { className: cls(`${prefixCls}-popover-menu-icon`) }, icon)),
+                React.createElement("div", { className: cls(`${prefixCls}-popover-menu-text`) }, text)));
+        }))), [
+            prefixCls,
+            menuLayout,
+            formattedMenu,
+            activeIndex,
+            useClickStatus,
+            clickStatusDuration,
+            onClickMenuItem,
+            onSelect,
+        ]);
+        return (React.createElement(Comp, Object.assign({ ref: popoverRef, visible: visibleState, clickSelfToClose: clickSelfToClose, touchSelfToClose: touchSelfToClose, onChange: onVisibleChange }, restProps, { content: content, className: cls(className, `${prefixCls}-popover-menu`) })));
+    });
+}

package/esnext/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>>;

package/esnext/popover/popover-inner.js

@@ -0,0 +1,79 @@
+import React, { forwardRef, useImperativeHandle, useRef, useContext, useEffect } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import IconClose from '../icon/IconClose';
+import { getStyleWithVendor, useMountedState } from '../_helpers';
+import { GlobalContext } from '../context-provider';
+export const PopoverInner = forwardRef((props, ref) => {
+    const { prefixCls } = useContext(GlobalContext);
+    const { className, needShadow, content, direction, position, minWidth, maxWidth, arrowWidth, transformOrigin, mode, showCloseIcon = false, textSuffix = null, renderArrow, onClickCloseIcon, onClickTextSuffix, } = props;
+    const domRef = useRef(null);
+    const contentRef = useRef(null);
+    const [show, setShow] = useMountedState(false);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        content: contentRef.current,
+    }));
+    useEffect(() => {
+        const { top, bottom, height, left, width } = position;
+        if (left || width || top || height || bottom) {
+            if (!show) {
+                setTimeout(() => {
+                    setShow(true);
+                }, 0);
+            }
+        }
+    }, [position, show]);
+    /**
+     * 计算容器的样式
+     * @en Calculate the stylesheet of the container
+     */
+    const getWrapperStyle = () => {
+        const { top, bottom, height, left } = position;
+        const obj = {
+            height: `${height}px`,
+            left: `${left}px`,
+            minWidth,
+            maxWidth,
+        };
+        if (top) {
+            obj.top = `${top}px`;
+        }
+        else if (bottom) {
+            obj.bottom = `${bottom}px`;
+        }
+        // 用于执行缩放动画
+        // @en Used to perform zoom animations
+        obj.transformOrigin = `${transformOrigin.x} ${transformOrigin.y}`;
+        return getStyleWithVendor(obj);
+    };
+    /**
+     * 计算icon的样式
+     * @en Calculate the stylesheet of the icon
+     */
+    const getArrowStyle = () => {
+        const { arrowLeft } = position;
+        return {
+            width: arrowWidth,
+            height: arrowWidth,
+            marginLeft: arrowLeft ? `${arrowLeft}px` : null,
+            marginRight: arrowLeft ? `${arrowLeft}px` : null,
+        };
+    };
+    return (React.createElement("div", { ref: domRef, className: cls(`${prefixCls}-popover-inner`, 'popover-inner', 'all-border-box', `${mode}-mode`, className, {
+            show,
+            'with-shadow': needShadow,
+            'with-suffix': showCloseIcon || textSuffix,
+            'custom-content': typeof content !== 'string',
+        }), style: getWrapperStyle() },
+        React.createElement("div", { className: "popover-bg" }, renderArrow ? (renderArrow({ arrowWidth, arrowLeft: position.arrowLeft, direction })) : (React.createElement("div", { className: `popover-arrow ${direction}`, style: getArrowStyle() },
+            React.createElement("div", { className: "popover-arrow-content" })))),
+        React.createElement("div", { className: cls('popover-content', direction, {
+                'show-close-icon': showCloseIcon,
+            }), ref: contentRef }, typeof content === 'string' ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "content-text" }, content),
+            showCloseIcon && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "icon-divider" }),
+                React.createElement("div", { className: "text-close-icon", onClick: onClickCloseIcon },
+                    React.createElement(IconClose, null)))),
+            textSuffix && (React.createElement("div", { className: "text-suffix", onClick: onClickTextSuffix }, textSuffix)))) : (content))));
+});

package/esnext/popover/popover.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PopoverRef } from './type';
+export declare const Popover: React.ForwardRefExoticComponent<Partial<import("./type").DefaultPopoverProps> & React.RefAttributes<PopoverRef>>;