@apdesign/web-react 1.0.0

package/es/Pagination/style/token.less

@@ -0,0 +1,72 @@
+@import '../../style/theme/default.less';
+
+@pagination-prefix-cls: ~'@{prefix}-pagination';
+
+@pagination-item-border-radius: @radius-small;
+@pagination-item-spacing: @spacing-4;
+@pagination-margin-total-spacing: @spacing-4;
+@pagination-margin-option-left: @spacing-4;
+@pagination-margin-jumper-left: @spacing-4;
+
+@pagination-size-mini: @size-mini;
+@pagination-size-small: @size-small;
+@pagination-size-default: @size-default;
+@pagination-size-large: @size-large;
+
+@pagination-size-mini-font-size: @font-size-body-1;
+@pagination-size-small-font-size: @font-size-body-3;
+@pagination-size-default-font-size: @font-size-body-3;
+@pagination-size-large-font-size: @font-size-body-3;
+
+@pagination-size-icon-arrow_mini: @size-3;
+@pagination-size-icon-arrow_small: @size-3;
+@pagination-size-icon-arrow_default: @size-3;
+@pagination-size-icon-arrow_large: 14px;
+
+@pagination-size-icon-ellipsis: @size-4;
+
+@pagination-border-width: @border-none;
+@pagination-color-bg-item: @color-transparent;
+@pagination-color-bg-item_active: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
+@pagination-color-bg-item_hover: var(~'@{arco-cssvars-prefix}-color-fill-1');
+@pagination-color-bg-item_disabled: @color-transparent;
+@pagination-color-bg-item_active_disabled: var(~'@{arco-cssvars-prefix}-color-fill-1');
+
+@pagination-color-item-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@pagination-color-item-text_hover: var(~'@{arco-cssvars-prefix}-color-text-2');
+@pagination-color-item-text_active: @color-primary-6;
+@pagination-color-item-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@pagination-color-item-text_active_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
+
+@pagination-color-item-border: @color-transparent;
+@pagination-color-item-border_active: @color-transparent;
+@pagination-color-item-border_hover: @color-transparent;
+@pagination-color-item-border_disabled: @color-transparent;
+@pagination-color-item-border_active_disabled: @color-transparent;
+
+@pagination-color-icon-arrow: var(~'@{arco-cssvars-prefix}-color-text-2');
+@pagination-color-icon-arrow-bg: @color-transparent;
+@pagination-color-icon-arrow-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-1');
+@pagination-color-icon-arrow-bg_disabled: @color-transparent;
+@pagination-color-icon-arrow-text_hover: @color-primary-6;
+@pagination-color-icon-arrow-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+
+// Simple
+@pagination-simple-input-width: @size-10;
+@pagination-simple-color-icon-arrow: var(~'@{arco-cssvars-prefix}-color-text-2');
+@pagination-simple-color-icon-arrow-bg: @color-transparent;
+@pagination-simple-color-icon-arrow-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-1');
+@pagination-simple-color-icon-arrow-bg_disabled: @color-transparent;
+@pagination-simple-color-icon-arrow-text_hover: @color-primary-6;
+@pagination-simple-color-icon-arrow-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+
+@pagination-simple-margin-prev-right: @spacing-2;
+@pagination-simple-margin-next-left: @spacing-6;
+@pagination-simple-margin-separator-left: @spacing-6;
+@pagination-simple-margin-separator-right: @spacing-6;
+// jumper
+@patination-jumper-input-width: @size-10;
+@pagination-color-jumper-goto: var(~'@{arco-cssvars-prefix}-color-text-2');
+
+// total text
+@pagination-color-text-total: var(~'@{arco-cssvars-prefix}-color-text-1');

package/es/Popconfirm/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { PopconfirmProps } from './interface';
+declare const PopconfirmComponent: React.ForwardRefExoticComponent<PopconfirmProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;
+export default PopconfirmComponent;
+export { PopconfirmProps };

package/es/Popconfirm/index.js

@@ -0,0 +1,131 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React, { useState, forwardRef, useContext, useEffect } from 'react';
+import FocusLock from 'react-focus-lock';
+import cs from '../_util/classNames';
+import Tooltip from '../Tooltip';
+import Button from '../Button';
+import IconExclamationCircleFill from '../../icon/react-icon/IconExclamationCircleFill';
+import { ConfigContext } from '../ConfigProvider';
+import useMergeValue from '../_util/hooks/useMergeValue';
+import useMergeProps from '../_util/hooks/useMergeProps';
+import { isFunction, isNullOrUndefined } from '../_util/is';
+var defaultProps = {
+    position: 'top',
+    okType: 'primary',
+    icon: React.createElement(IconExclamationCircleFill, null),
+    blurToHide: true,
+    unmountOnExit: true,
+    trigger: 'click',
+    escToClose: true,
+};
+function Popconfirm(baseProps, ref) {
+    var _a;
+    var _b = useContext(ConfigContext), getPrefixCls = _b.getPrefixCls, locale = _b.locale, componentConfig = _b.componentConfig, rtl = _b.rtl;
+    var props = useMergeProps(baseProps, defaultProps, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.Popconfirm);
+    var style = props.style, className = props.className, children = props.children, position = props.position, getPopupContainer = props.getPopupContainer, blurToHide = props.blurToHide, unmountOnExit = props.unmountOnExit, trigger = props.trigger, escToClose = props.escToClose, onVisibleChange = props.onVisibleChange, triggerProps = props.triggerProps, title = props.title, icon = props.icon, okText = props.okText, cancelText = props.cancelText, okType = props.okType, okButtonProps = props.okButtonProps, cancelButtonProps = props.cancelButtonProps, autoFocus = props.autoFocus, focusLock = props.focusLock, content = props.content, rest = __rest(props, ["style", "className", "children", "position", "getPopupContainer", "blurToHide", "unmountOnExit", "trigger", "escToClose", "onVisibleChange", "triggerProps", "title", "icon", "okText", "cancelText", "okType", "okButtonProps", "cancelButtonProps", "autoFocus", "focusLock", "content"]);
+    var _c = __read(useMergeValue(false, {
+        defaultValue: props.defaultPopupVisible,
+        value: props.popupVisible,
+    }), 2), popupVisible = _c[0], setPopupVisible = _c[1];
+    var _d = __read(useState(false), 2), buttonLoading = _d[0], setLoading = _d[1];
+    var prefixCls = getPrefixCls('popconfirm');
+    var hasContent = !isNullOrUndefined(content);
+    var handleVisibleChange = function (visible) {
+        if (!('popupVisible' in props)) {
+            setPopupVisible(visible);
+        }
+        if (triggerProps && triggerProps.onVisibleChange) {
+            triggerProps.onVisibleChange(visible);
+        }
+        onVisibleChange && onVisibleChange(visible);
+    };
+    var closePopconfirm = function () {
+        handleVisibleChange(false);
+    };
+    var onCancelPopconfirm = function (e) {
+        closePopconfirm();
+        props.onCancel && props.onCancel(e);
+    };
+    var onConfirmPopconfirm = function (e) {
+        var _onConfirm = props.onOk || props.onConfirm;
+        var ret;
+        if (_onConfirm) {
+            ret = _onConfirm(e);
+        }
+        if (ret && ret.then) {
+            setLoading(true);
+            ret.then(function () {
+                closePopconfirm();
+            }, function (e) {
+                setLoading(false);
+                console.error(e);
+            });
+        }
+        if (!ret) {
+            closePopconfirm();
+        }
+    };
+    var renderPopconfirmContent = function () {
+        var element = (React.createElement(React.Fragment, null,
+            React.createElement(Button, __assign({ onClick: onCancelPopconfirm, size: "mini" }, cancelButtonProps), cancelText || locale.Popconfirm.cancelText),
+            React.createElement(Button, __assign({ loading: buttonLoading, onClick: onConfirmPopconfirm, size: "mini", type: okType }, okButtonProps), okText || locale.Popconfirm.okText)));
+        return (React.createElement("div", { className: prefixCls + "-wrapper" },
+            React.createElement("div", { className: prefixCls + "-title" },
+                icon && React.createElement("span", { className: prefixCls + "-title-icon" }, icon),
+                React.createElement("div", { className: prefixCls + "-title-text" }, isFunction(title) ? title() : title)),
+            hasContent && (React.createElement("div", { className: prefixCls + "-inner-content" }, isFunction(content) ? content() : content)),
+            focusLock ? (React.createElement(FocusLock, { returnFocus: true, as: "div", className: prefixCls + "-btn", crossFrame: false, disabled: !popupVisible, autoFocus: !!autoFocus }, element)) : (React.createElement("div", { className: prefixCls + "-btn" }, element))));
+    };
+    useEffect(function () {
+        if (!popupVisible && buttonLoading) {
+            setLoading(false);
+        }
+        return function () {
+            setLoading(false);
+        };
+    }, [popupVisible]);
+    return (React.createElement(Tooltip, __assign({}, rest, { ref: ref, style: __assign({ maxWidth: 350 }, style), className: cs(className, (_a = {},
+            _a[prefixCls + "-rtl"] = rtl,
+            _a[prefixCls + "-has-content"] = hasContent,
+            _a)), prefixCls: prefixCls, getPopupContainer: getPopupContainer, position: position, trigger: trigger, escToClose: escToClose, popupVisible: popupVisible, content: renderPopconfirmContent, unmountOnExit: unmountOnExit, blurToHide: blurToHide, popupHoverStay: true, triggerProps: triggerProps, onVisibleChange: handleVisibleChange, childrenPrefix: prefixCls }), typeof children === 'string' ? React.createElement("span", null, children) : children));
+}
+var PopconfirmComponent = forwardRef(Popconfirm);
+PopconfirmComponent.displayName = 'Popconfirm';
+export default PopconfirmComponent;

package/es/Popconfirm/interface.d.ts

@@ -0,0 +1,128 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { TriggerProps } from '../Trigger';
+import { ButtonProps } from '../Button';
+/**
+ * @title Popconfirm
+ */
+export interface PopconfirmProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 弹出挂载的节点
+     * @en The parent node which the confirmation box will be rendered to.
+     */
+    getPopupContainer?: (node: HTMLElement) => Element;
+    /**
+     * @zh 弹出框的方位，有 12 个方位可供选择
+     * @en The position of the confirmation box relative to the target.
+     * @defaultValue top
+     */
+    position?: 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';
+    /**
+     * @zh 标题。 函数类型在 `2.48.0` 支持
+     * @en Title of Popconfirm. Function types are supported in `2.48.0`
+     */
+    title?: ReactNode | (() => ReactNode);
+    /**
+     * @zh 内容.函数类型在 `2.48.0` 支持
+     * @en Content of Popconfirm   Function types are supported in `2.48.0`
+     * @version 2.44.0
+     */
+    content?: ReactNode | (() => ReactNode);
+    /**
+     * @zh 是否禁用
+     * @en whether to disabled
+     * @version 2.11.0
+     */
+    disabled?: boolean;
+    /**
+     * @zh 取消按钮文字
+     * @en The text of the cancel button
+     */
+    cancelText?: ReactNode;
+    /**
+     * @zh 确认按钮文字
+     * @en The text of the ok button
+     */
+    okText?: ReactNode;
+    /**
+     * @zh 确认按钮的类型
+     * @en The type of the ok button
+     * @defaultValue primary
+     */
+    okType?: ButtonProps['type'];
+    /**
+     * @zh 确定按钮的参数，可接受 `Button` 组件的所有参数
+     * @en The props of the ok button
+     */
+    okButtonProps?: ButtonProps;
+    /**
+     * @zh 取消按钮的参数，可接受 `Button` 组件的所有参数
+     * @en The props of the cancel button
+     */
+    cancelButtonProps?: ButtonProps;
+    /**
+     * @zh 点击确认按钮的回调函数。回调函数 `event` 参数在 `2.29.0` 支持
+     * @en Callback when click the ok button. Callback `event` params is supported in `2.29.0`
+     */
+    onOk?: (e: React.MouseEvent) => Promise<any> | void;
+    /**
+     * @deprecated 统一为 onOk, onConfirm 保留，不建议使用
+     */
+    onConfirm?: (e: React.MouseEvent) => Promise<any> | void;
+    /**
+     * @zh 点击取消按钮的回调函数。 回调函数 `event` 参数在 `2.29.0` 支持
+     * @en Callback when click the cancel button. Callback `event` params is supported in `2.29.0`
+     */
+    onCancel?: (e: React.MouseEvent) => void;
+    /**
+     * @zh 默认弹出框是打开还是关闭
+     * @en Whether the confirmation box is visible by default
+     */
+    defaultPopupVisible?: boolean;
+    /**
+     * @zh 弹出框是打开还是关闭。(受控)
+     * @en Whether the confirmation box is visible
+     */
+    popupVisible?: boolean;
+    /**
+     * @zh 弹出打开和关闭触发的回调
+     * @en Callback when the visibility of the confirmation box is changed
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * @zh 标题前的图标
+     * @en Customize icon of the confirmation box
+     * @defaultValue <IconExclamationCircleFill />
+     */
+    icon?: ReactNode;
+    blurToHide?: boolean;
+    /**
+     * @zh 是否在隐藏的时候销毁 DOM 节点
+     * @en Whether to destroy the confirmation box when hidden
+     * @defaultValue true
+     */
+    unmountOnExit?: boolean;
+    /**
+     * @zh 触发方式
+     * @en Trigger mode
+     * @defaultValue click
+     */
+    trigger?: TriggerProps['trigger'];
+    escToClose?: TriggerProps['escToClose'];
+    /**
+     * @zh 可以接受所有 Trigger 的参数
+     * @en The Props of the `Trigger` component
+     */
+    triggerProps?: Partial<TriggerProps>;
+    /**
+     * @zh 是否自动聚焦弹出框内的可聚焦元素
+     * @en Whether to automatically focus the first focusable element in the confirmation box
+     */
+    autoFocus?: boolean;
+    /**
+     * @zh 是否将焦点锁定在弹出框内
+     * @en Whether to lock the focus in the confirmation box
+     */
+    focusLock?: boolean;
+}

package/es/Popconfirm/interface.js

@@ -0,0 +1 @@
+export {};

package/es/Popconfirm/style/css.js

@@ -0,0 +1,5 @@
+import '../../style/index.css';
+import '../../Button/style/css.js';
+import '../../Tooltip/style/css.js';
+import '../../Popover/style/css.js';
+import './index.css';

package/es/Popconfirm/style/index.css

@@ -0,0 +1 @@
+.arco-popconfirm-content{padding:16px 16px;box-sizing:border-box}.arco-popconfirm-title{position:relative;margin-bottom:16px;font-size:14px;color:var(--color-text-1);display:flex;align-items:flex-start}.arco-popconfirm-title-icon{font-size:18px;margin-right:8px;display:inline-flex;align-items:center;height:22.001px}.arco-popconfirm-title-icon .arco-icon-exclamation-circle-fill{color:rgb(var(--warning-6))}.arco-popconfirm-has-content .arco-popconfirm-title{margin-bottom:0;font-weight:500}.arco-popconfirm-inner-content{margin-top:4px;margin-bottom:16px;padding-left:26px}.arco-popconfirm .arco-popconfirm-btn{text-align:right}.arco-popconfirm .arco-popconfirm-btn>button{margin-left:8px}.arco-popconfirm-rtl .arco-popconfirm-title-icon{margin-left:8px;margin-right:0}.arco-popconfirm-rtl .arco-popconfirm-inner-content{padding-left:0;padding-right:26px}.arco-popconfirm-rtl .arco-popconfirm-btn{text-align:left}.arco-popconfirm-rtl .arco-popconfirm-btn>button{margin-right:8px;margin-left:0}

package/es/Popconfirm/style/index.d.ts

@@ -0,0 +1,5 @@
+import '../../style/index.less';
+import '../../Button/style';
+import '../../Tooltip/style';
+import '../../Popover/style';
+import './index.less';

package/es/Popconfirm/style/index.js

@@ -0,0 +1,5 @@
+import '../../style/index.less';
+import '../../Button/style';
+import '../../Tooltip/style';
+import '../../Popover/style';
+import './index.less';

package/es/Popconfirm/style/index.less

@@ -0,0 +1,75 @@
+@import './token.less';
+
+@popconfirm-prefix-cls: ~'@{prefix}-popconfirm';
+
+.@{popconfirm-prefix-cls} {
+  &-content {
+    padding: @popconfirm-padding-vertical @popconfirm-padding-horizontal;
+    box-sizing: border-box;
+  }
+
+  &-title {
+    position: relative;
+    margin-bottom: @popconfirm-margin-title-bottom;
+    font-size: @popconfirm-font-title-size;
+    color: @popconfirm-color-title-text;
+    display: flex;
+    align-items: flex-start;
+
+    &-icon {
+      font-size: @popconfirm-size-title-icon;
+      margin-right: @popconfirm-margin-icon-right;
+      display: inline-flex;
+      align-items: center;
+      height: @line-height-base * @popconfirm-font-title-size;
+
+      .@{prefix}-icon-exclamation-circle-fill {
+        color: @color-warning-6;
+      }
+    }
+  }
+
+  &-has-content &-title {
+    margin-bottom: 0;
+    font-weight: @font-weight-500;
+  }
+
+  &-inner-content {
+    margin-top: @popconfirm-margin-content-top;
+    margin-bottom: @popconfirm-margin-content-bottom;
+    padding-left: @popconfirm-size-title-icon + @popconfirm-margin-icon-right;
+  }
+
+  .@{popconfirm-prefix-cls}-btn {
+    text-align: right;
+
+    > button {
+      margin-left: @popconfirm-margin-button-left;
+    }
+  }
+}
+
+.@{popconfirm-prefix-cls}-rtl {
+  .@{popconfirm-prefix-cls} {
+    &-title {
+      &-icon {
+        margin-left: @popconfirm-margin-icon-right;
+        margin-right: 0;
+      }
+    }
+
+    &-inner-content {
+      padding-left: 0;
+      padding-right: @popconfirm-size-title-icon + @popconfirm-margin-icon-right;
+    }
+
+    &-btn {
+      text-align: left;
+
+      > button {
+        margin-right: @popconfirm-margin-button-left;
+        margin-left: 0;
+      }
+    }
+  }
+}

package/es/Popconfirm/style/token.less

@@ -0,0 +1,12 @@
+@import '../../style/theme/default.less';
+
+@popconfirm-padding-horizontal: @spacing-7;
+@popconfirm-padding-vertical: @spacing-7;
+@popconfirm-margin-title-bottom: @spacing-7;
+@popconfirm-margin-content-top: @spacing-2;
+@popconfirm-margin-content-bottom: @popconfirm-margin-title-bottom;
+@popconfirm-size-title-icon: 18px;
+@popconfirm-margin-icon-right: @spacing-4;
+@popconfirm-margin-button-left: @spacing-4;
+@popconfirm-font-title-size: @font-size-body-3;
+@popconfirm-color-title-text: var(~'@{arco-cssvars-prefix}-color-text-1');

package/es/Popover/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { PopoverProps } from './interface';
+declare const PopoverComponent: React.ForwardRefExoticComponent<PopoverProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;
+export default PopoverComponent;
+export { PopoverProps };

package/es/Popover/index.js

@@ -0,0 +1,49 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef, useContext } from 'react';
+import Tooltip from '../Tooltip';
+import { ConfigContext } from '../ConfigProvider';
+import useMergeProps from '../_util/hooks/useMergeProps';
+import cs from '../_util/classNames';
+import { isFunction, isEmptyReactNode } from '../_util/is';
+var defaultProps = {
+    position: 'top',
+    trigger: 'hover',
+    unmountOnExit: true,
+};
+function Popover(baseProps, ref) {
+    var _a;
+    var _b = useContext(ConfigContext), getPrefixCls = _b.getPrefixCls, componentConfig = _b.componentConfig, rtl = _b.rtl;
+    var props = useMergeProps(baseProps, defaultProps, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.Popover);
+    var style = props.style, className = props.className, children = props.children, position = props.position, getPopupContainer = props.getPopupContainer, trigger = props.trigger, defaultPopupVisible = props.defaultPopupVisible, popupVisible = props.popupVisible, triggerProps = props.triggerProps, unmountOnExit = props.unmountOnExit, onVisibleChange = props.onVisibleChange, content = props.content, title = props.title, rest = __rest(props, ["style", "className", "children", "position", "getPopupContainer", "trigger", "defaultPopupVisible", "popupVisible", "triggerProps", "unmountOnExit", "onVisibleChange", "content", "title"]);
+    var prefixCls = getPrefixCls('popover');
+    var usedTitle = isFunction(title) ? title() : title;
+    var usedContent = isFunction(content) ? content() : content;
+    var renderContent = isEmptyReactNode(usedTitle, true) && isEmptyReactNode(usedContent, true) ? null : (React.createElement("div", { className: cs(prefixCls + "-inner", (_a = {}, _a[prefixCls + "-inner-rtl"] = rtl, _a)) },
+        usedTitle ? React.createElement("div", { className: prefixCls + "-title" }, usedTitle) : null,
+        React.createElement("div", { className: prefixCls + "-inner-content" }, usedContent)));
+    return (React.createElement(Tooltip, __assign({}, rest, { ref: ref, style: __assign({ maxWidth: 350 }, style), className: className, prefixCls: prefixCls, getPopupContainer: getPopupContainer, position: position, trigger: trigger, content: renderContent, popupHoverStay: true, unmountOnExit: unmountOnExit, triggerProps: triggerProps, defaultPopupVisible: defaultPopupVisible, onVisibleChange: onVisibleChange || (triggerProps ? triggerProps.onVisibleChange : undefined), childrenPrefix: prefixCls }, ('popupVisible' in props ? { popupVisible: popupVisible } : {})), typeof children === 'string' ? React.createElement("span", null, children) : children));
+}
+var PopoverComponent = forwardRef(Popover);
+PopoverComponent.displayName = 'Popover';
+export default PopoverComponent;

package/es/Popover/interface.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties, ReactNode } from 'react';
+import { TooltipProps } from '../Tooltip';
+/**
+ * @title Popover
+ */
+export interface PopoverProps extends Omit<TooltipProps, 'mini'> {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 标题.  函数类型在 `2.48.0` 支持
+     * @en Title of the popup card. Function types are supported in `2.48.0`
+     */
+    title?: ReactNode | (() => ReactNode);
+    /**
+     * @zh 是否禁用
+     * @en Whether to disabled
+     * @version 2.11.0
+     */
+    disabled?: boolean;
+}

package/es/Popover/interface.js

@@ -0,0 +1 @@
+export {};

package/es/Popover/style/css.js

@@ -0,0 +1,3 @@
+import '../../style/index.css';
+import '../../Tooltip/style/css.js';
+import './index.css';

package/es/Popover/style/index.css

@@ -0,0 +1 @@
+.arco-popover-content{padding:12px 16px}.arco-popover-title{font-size:16px;color:var(--color-text-1);font-weight:500}.arco-popover-title+.arco-popover-inner-content{margin-top:4px}.arco-popconfirm-content,.arco-popover-content{color:var(--color-text-2);background-color:var(--color-bg-popup);box-shadow:0 4px 10px rgba(0,0,0,.1);max-width:none;width:100%;font-size:14px;border-radius:var(--border-radius-medium);line-height:1.5715;box-sizing:border-box;border:1px solid var(--color-neutral-3)}.arco-popconfirm-content-inner,.arco-popover-content-inner{word-wrap:break-word;text-align:left}.arco-popconfirm-arrow.arco-trigger-arrow,.arco-popover-arrow.arco-trigger-arrow{background-color:var(--color-bg-popup);border:1px solid var(--color-neutral-3);z-index:1}.arco-popover-inner-rtl{direction:rtl;text-align:right}

package/es/Popover/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../style/index.less';
+import '../../Tooltip/style';
+import './index.less';

package/es/Popover/style/index.js

@@ -0,0 +1,3 @@
+import '../../style/index.less';
+import '../../Tooltip/style';
+import './index.less';

package/es/Popover/style/index.less

@@ -0,0 +1,52 @@
+@import './token.less';
+
+@popover-prefix-cls: ~'@{prefix}-popover';
+@popconfirm-prefix-cls: ~'@{prefix}-popconfirm';
+
+.@{popover-prefix-cls} {
+  &-content {
+    padding: @popup-padding-vertical @popup-padding-horizontal;
+  }
+
+  &-title {
+    font-size: @popup-font-title-size;
+    color: @popup-color-title-text;
+    font-weight: @font-weight-500;
+  }
+
+  &-title + &-inner-content {
+    margin-top: @popup-margin-content-top;
+  }
+}
+
+.@{popover-prefix-cls},
+.@{popconfirm-prefix-cls} {
+  &-content {
+    color: @popup-color-content-text;
+    background-color: @popup-color-content-bg;
+    box-shadow: @popup-shadow;
+    max-width: none;
+    width: 100%;
+    font-size: @popup-font-size;
+    border-radius: @popup-border-radius;
+    line-height: @line-height-base;
+    box-sizing: border-box;
+    border: @border-1 solid @popup-color-border;
+
+    &-inner {
+      word-wrap: break-word;
+      text-align: left;
+    }
+  }
+
+  &-arrow.@{prefix}-trigger-arrow {
+    background-color: @popup-color-content-bg;
+    border: @border-1 solid @popup-color-border;
+    z-index: 1;
+  }
+}
+
+.@{popover-prefix-cls}-inner-rtl {
+  direction: rtl;
+  text-align: right;
+}

package/es/Popover/style/token.less

@@ -0,0 +1,13 @@
+@import '../../style/theme/default.less';
+
+@popup-color-content-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@popup-color-content-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');
+@popup-shadow: @shadow2-down;
+@popup-padding-horizontal: @spacing-7;
+@popup-padding-vertical: @spacing-6;
+@popup-color-title-text: var(~'@{arco-cssvars-prefix}-color-text-1');
+@popup-font-title-size: @font-size-title-1;
+@popup-margin-content-top: @spacing-2;
+@popup-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
+@popup-font-size: @font-size-body-3;
+@popup-border-radius: @radius-medium;

package/es/Portal/Portal.d.ts

@@ -0,0 +1,15 @@
+import { Component, ReactNode } from 'react';
+export interface PortalProps {
+    /** Portal 挂载的容器 */
+    getContainer?: () => Element;
+    children?: ReactNode;
+}
+declare class Portal extends Component<PortalProps> {
+    container: Element | null | void;
+    timer: any;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    createContainer(): void;
+    render(): import("react").ReactPortal;
+}
+export default Portal;