@dpocean/chatui 1.0.0

package/lib/components/Modal/Base.js

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Base = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _useMount2 = _interopRequireDefault(require("../../hooks/useMount"));
+var _Backdrop = require("../Backdrop");
+var _IconButton = require("../IconButton");
+var _Button = require("../Button");
+var _useNextId = _interopRequireDefault(require("../../hooks/useNextId"));
+var _toggleClass = _interopRequireDefault(require("../../utils/toggleClass"));
+var _ConfigProvider = require("../ConfigProvider");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function clearModal() {
+  if (!document.querySelector('.Modal') && !document.querySelector('.Popup')) {
+    (0, _toggleClass.default)('S--modalOpen', false);
+  }
+}
+var Base = exports.Base = function Base(props) {
+  var baseClass = props.baseClass,
+    active = props.active,
+    className = props.className,
+    title = props.title,
+    subTitle = props.subTitle,
+    _props$showClose = props.showClose,
+    showClose = _props$showClose === void 0 ? true : _props$showClose,
+    _props$autoFocus = props.autoFocus,
+    autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
+    _props$backdrop = props.backdrop,
+    backdrop = _props$backdrop === void 0 ? true : _props$backdrop,
+    height = props.height,
+    overflow = props.overflow,
+    actions = props.actions,
+    _props$vertical = props.vertical,
+    vertical = _props$vertical === void 0 ? true : _props$vertical,
+    btnVariant = props.btnVariant,
+    bgColor = props.bgColor,
+    avatar = props.avatar,
+    children = props.children,
+    onBackdropClick = props.onBackdropClick,
+    onClose = props.onClose;
+  var mid = (0, _useNextId.default)('modal-');
+  var titleId = props.titleId || mid;
+  var configCtx = (0, _ConfigProvider.useConfig)();
+  var wrapper = (0, _react.useRef)(null);
+  var _useMount = (0, _useMount2.default)({
+      active: active,
+      ref: wrapper
+    }),
+    didMount = _useMount.didMount,
+    isShow = _useMount.isShow;
+  (0, _react.useEffect)(function () {
+    setTimeout(function () {
+      if (autoFocus && wrapper.current) {
+        wrapper.current.focus();
+      }
+    });
+  }, [autoFocus]);
+  (0, _react.useEffect)(function () {
+    if (isShow) {
+      (0, _toggleClass.default)('S--modalOpen', isShow);
+    }
+  }, [isShow]);
+  (0, _react.useEffect)(function () {
+    if (!active && !didMount) {
+      clearModal();
+    }
+  }, [active, didMount]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      clearModal();
+    };
+  }, []);
+  if (!didMount) return null;
+  var isPopup = baseClass === 'Popup';
+  var hasAvatar = avatar && baseClass === 'Modal';
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)(baseClass, className, {
+      active: isShow
+    }),
+    tabIndex: -1,
+    "data-elder-mode": configCtx.elderMode,
+    ref: wrapper
+  }, backdrop && /*#__PURE__*/_react.default.createElement(_Backdrop.Backdrop, {
+    active: isShow,
+    onClick: backdrop === true ? onBackdropClick || onClose : undefined
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)("".concat(baseClass, "-dialog"), {
+      'pb-safe': isPopup && !actions
+    }),
+    "data-bg-color": bgColor,
+    "data-height": isPopup && height ? height : undefined,
+    "data-has-avatar": hasAvatar,
+    role: "dialog",
+    "aria-labelledby": titleId,
+    "aria-modal": true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(baseClass, "-content")
+  }, hasAvatar && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(baseClass, "-avatar"),
+    style: {
+      '--avatar': "url(".concat(avatar, ")")
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(baseClass, "-header")
+  }, /*#__PURE__*/_react.default.createElement("h5", {
+    className: "".concat(baseClass, "-title"),
+    id: titleId
+  }, title), isPopup && subTitle && /*#__PURE__*/_react.default.createElement("h6", {
+    className: "".concat(baseClass, "-subtitle")
+  }, subTitle), showClose && onClose && /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    className: "".concat(baseClass, "-close"),
+    icon: "close",
+    size: "lg",
+    onClick: onClose,
+    "aria-label": "\u5173\u95ED"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)("".concat(baseClass, "-body"), {
+      overflow: overflow
+    })
+  }, children), actions && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(baseClass, "-footer ").concat(baseClass, "-footer--").concat(vertical ? 'v' : 'h'),
+    "data-variant": btnVariant || 'round'
+  }, actions.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_Button.Button, (0, _extends2.default)({
+      size: "lg",
+      block: isPopup,
+      variant: btnVariant
+    }, item, {
+      key: item.label
+    }));
+  }))))), document.body);
+};

package/lib/components/Modal/Confirm.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ModalProps } from './Base';
+export declare const Confirm: ({ className, vertical: oVertical, actions, ...other }: ModalProps) => React.JSX.Element;

package/lib/components/Modal/Confirm.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Confirm = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Base = require("./Base");
+var _ConfigProvider = require("../ConfigProvider");
+var _excluded = ["className", "vertical", "actions"];
+var isPrimary = function isPrimary(btn) {
+  return btn.color === 'primary';
+};
+var Confirm = exports.Confirm = function Confirm(_ref) {
+  var className = _ref.className,
+    oVertical = _ref.vertical,
+    actions = _ref.actions,
+    other = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useLocale = (0, _ConfigProvider.useLocale)(),
+    _useLocale$locale = _useLocale.locale,
+    locale = _useLocale$locale === void 0 ? '' : _useLocale$locale;
+  var isZh = locale.includes('zh');
+  // 中文默认横排
+  var vertical = oVertical != null ? oVertical : !isZh;
+  if (Array.isArray(actions)) {
+    // 主按钮排序：横排主按钮在后，竖排主按钮在前
+    actions.sort(function (a, b) {
+      if (isPrimary(a)) {
+        return vertical ? -1 : 1;
+      }
+      if (isPrimary(b)) {
+        return vertical ? 1 : -1;
+      }
+      return 0;
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(_Base.Base, (0, _extends2.default)({
+    baseClass: "Modal",
+    className: (0, _clsx.default)('Confirm', className),
+    showClose: false,
+    btnVariant: "outline",
+    vertical: vertical,
+    actions: actions
+  }, other));
+};

package/lib/components/Modal/Modal.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ModalProps } from './Base';
+export declare const Modal: (props: ModalProps) => React.JSX.Element;

package/lib/components/Modal/Modal.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Modal = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _Base = require("./Base");
+var Modal = exports.Modal = function Modal(props) {
+  return /*#__PURE__*/_react.default.createElement(_Base.Base, (0, _extends2.default)({
+    baseClass: "Modal",
+    btnVariant: props.vertical === false ? undefined : 'outline'
+  }, props));
+};

package/lib/components/Modal/Popup.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ModalProps } from './Base';
+export declare const Popup: (props: ModalProps) => React.JSX.Element;

package/lib/components/Modal/Popup.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Popup = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _Base = require("./Base");
+var Popup = exports.Popup = function Popup(props) {
+  return /*#__PURE__*/_react.default.createElement(_Base.Base, (0, _extends2.default)({
+    baseClass: "Popup",
+    overflow: true
+  }, props));
+};

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

@@ -0,0 +1,4 @@
+export { Modal } from './Modal';
+export { Confirm } from './Confirm';
+export { Popup } from './Popup';
+export type { ModalProps } from './Base';

package/lib/components/Modal/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Confirm", {
+  enumerable: true,
+  get: function get() {
+    return _Confirm.Confirm;
+  }
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function get() {
+    return _Modal.Modal;
+  }
+});
+Object.defineProperty(exports, "Popup", {
+  enumerable: true,
+  get: function get() {
+    return _Popup.Popup;
+  }
+});
+var _Modal = require("./Modal");
+var _Confirm = require("./Confirm");
+var _Popup = require("./Popup");

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface MultiRedPacketProps {
+    className?: string;
+    name: string;
+    count?: number;
+    total?: number;
+    variant?: 'redPacket' | 'cash';
+    btnText?: string;
+    onClick?: (e: React.MouseEvent) => void;
+}
+export declare const MultiRedPacket: (props: MultiRedPacketProps) => React.JSX.Element;

package/lib/components/MultiRedPacket/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiRedPacket = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _RedPacket = require("../RedPacket");
+var imageMap = {
+  redPacket: 'https://gw.alicdn.com/imgextra/i2/O1CN01IAmvNz27AIyYyGXL7_!!6000000007756-55-tps-72-72.svg',
+  cash: 'https://gw.alicdn.com/imgextra/i4/O1CN01Zgq0Nb281tJdBdhm2_!!6000000007873-55-tps-72-72.svg'
+};
+var MultiRedPacket = exports.MultiRedPacket = function MultiRedPacket(props) {
+  var className = props.className,
+    name = props.name,
+    count = props.count,
+    total = props.total,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'redPacket' : _props$variant,
+    btnText = props.btnText,
+    onClick = props.onClick;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('MultiRedPacket', className),
+    "data-variant": variant
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "MultiRedPacket-stack"
+  }), /*#__PURE__*/_react.default.createElement(_RedPacket.RedPacket, {
+    image: imageMap[variant],
+    name: name,
+    btnText: btnText,
+    desc: /*#__PURE__*/_react.default.createElement("div", null, count && /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("strong", null, count), " \u4E2A"), total && /*#__PURE__*/_react.default.createElement("span", null, "\u5171 ", /*#__PURE__*/_react.default.createElement("strong", null, total), " \u5143")),
+    onClick: onClick
+  }));
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { IconButtonProps } from '../IconButton';
+export type NavbarProps = {
+    title: string;
+    className?: string;
+    logo?: string;
+    leftContent?: IconButtonProps;
+    rightContent?: IconButtonProps[];
+    rightSlot?: React.ReactNode;
+    desc?: React.ReactNode;
+    align?: 'left' | 'center';
+};
+export declare const Navbar: (props: NavbarProps) => React.JSX.Element;

package/lib/components/Navbar/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Navbar = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _IconButton = require("../IconButton");
+var Navbar = exports.Navbar = function Navbar(props) {
+  var className = props.className,
+    title = props.title,
+    logo = props.logo,
+    desc = props.desc,
+    leftContent = props.leftContent,
+    _props$rightContent = props.rightContent,
+    rightContent = _props$rightContent === void 0 ? [] : _props$rightContent,
+    rightSlot = props.rightSlot,
+    align = props.align;
+  var isLeft = align === 'left';
+  var showTitle = isLeft ? true : !logo;
+  return /*#__PURE__*/_react.default.createElement("header", {
+    className: (0, _clsx.default)('Navbar', {
+      'Navbar--left': isLeft
+    }, className)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "Navbar-left"
+  }, leftContent && /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, (0, _extends2.default)({
+    size: "lg"
+  }, leftContent))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Navbar-main"
+  }, logo && /*#__PURE__*/_react.default.createElement("div", {
+    className: "Navbar-brand"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: "Navbar-logo",
+    src: logo,
+    alt: title
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Navbar-inner"
+  }, showTitle && /*#__PURE__*/_react.default.createElement("h2", {
+    className: "Navbar-title"
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Navbar-desc"
+  }, desc))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Navbar-right"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "Navbar-rightSlot"
+  }, rightSlot), rightContent.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, (0, _extends2.default)({
+      size: "lg",
+      key: item.icon
+    }, item));
+  })));
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface NoticeProps {
+    content: string;
+    closable?: boolean;
+    leftIcon?: string;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onClose?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+export declare const Notice: (props: NoticeProps) => React.JSX.Element;

package/lib/components/Notice/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Notice = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Icon = require("../Icon");
+var _IconButton = require("../IconButton");
+var _Text = require("../Text");
+var Notice = exports.Notice = function Notice(props) {
+  var content = props.content,
+    _props$closable = props.closable,
+    closable = _props$closable === void 0 ? true : _props$closable,
+    _props$leftIcon = props.leftIcon,
+    leftIcon = _props$leftIcon === void 0 ? 'bullhorn' : _props$leftIcon,
+    onClick = props.onClick,
+    onClose = props.onClose;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "Notice",
+    role: "alert",
+    "aria-atomic": true,
+    "aria-live": "assertive"
+  }, leftIcon && /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    className: "Notice-icon",
+    type: leftIcon
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Notice-content",
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    className: "Notice-text",
+    truncate: true
+  }, content)), closable && /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    className: "Notice-close",
+    icon: "close",
+    onClick: onClose,
+    "aria-label": "\u5173\u95ED\u901A\u77E5"
+  }));
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { GoodsProps } from '../Goods';
+export type OrderObjectProps = {
+    className?: string;
+    title?: string;
+    list: GoodsProps[];
+    count?: number;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+};
+export declare const OrderObject: (props: OrderObjectProps) => React.JSX.Element;

package/lib/components/OrderObject/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OrderObject = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Goods = require("../Goods");
+var _Flex = require("../Flex");
+var _ImageList = require("../ImageList");
+var _Icon = require("../Icon");
+var OrderObject = exports.OrderObject = function OrderObject(props) {
+  var className = props.className,
+    title = props.title,
+    _props$list = props.list,
+    list = _props$list === void 0 ? [] : _props$list,
+    _props$count = props.count,
+    count = _props$count === void 0 ? list.length : _props$count,
+    onClick = props.onClick;
+  var firstOrder = list[0];
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('OrderObject', className),
+    onClick: onClick
+  }, title && /*#__PURE__*/_react.default.createElement("div", {
+    className: "OrderObject-title"
+  }, title), count > 1 ? /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_Flex.FlexItem, null, /*#__PURE__*/_react.default.createElement(_ImageList.ImageList, {
+    list: list.slice(0, 3).map(function (t) {
+      return {
+        src: t.img
+      };
+    })
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "OrderObject-count"
+  }, "\u5171".concat(count, "\u4EF6")), /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    type: "chevron-right"
+  })) : /*#__PURE__*/_react.default.createElement(_Goods.Goods, (0, _extends2.default)({
+    type: "order",
+    variant: "compact"
+  }, firstOrder)));
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export type PopoverProps = {
+    className?: string;
+    active: boolean;
+    target: HTMLElement;
+    onClose: () => void;
+    children?: React.ReactNode;
+};
+export declare const Popover: (props: PopoverProps) => React.ReactPortal | null;

package/lib/components/Popover/index.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Popover = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _useMount2 = _interopRequireDefault(require("../../hooks/useMount"));
+var _useClickOutside = _interopRequireDefault(require("../../hooks/useClickOutside"));
+var _useWindowResize = _interopRequireDefault(require("../../hooks/useWindowResize"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var Popover = exports.Popover = function Popover(props) {
+  var className = props.className,
+    active = props.active,
+    target = props.target,
+    children = props.children,
+    onClose = props.onClose;
+  var wrapper = (0, _useClickOutside.default)(onClose, 'mousedown');
+  var _useMount = (0, _useMount2.default)({
+      active: active,
+      ref: wrapper
+    }),
+    didMount = _useMount.didMount,
+    isShow = _useMount.isShow;
+  var _useState = (0, _react.useState)({}),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    style = _useState2[0],
+    setStyle = _useState2[1];
+  var updatePos = (0, _react.useCallback)(function () {
+    if (!wrapper.current) return;
+    var targetRect = target.getBoundingClientRect();
+    var rect = wrapper.current.getBoundingClientRect();
+    setStyle({
+      top: "".concat(targetRect.top - rect.height, "px"),
+      left: "".concat(targetRect.left, "px")
+    });
+  }, [target, wrapper]);
+  (0, _react.useEffect)(function () {
+    if (wrapper.current) {
+      wrapper.current.focus();
+      updatePos();
+    }
+  }, [didMount, updatePos, wrapper]);
+  (0, _useWindowResize.default)(updatePos);
+  if (!didMount) return null;
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('Popover', className, {
+      active: isShow
+    }),
+    ref: wrapper,
+    style: style
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "Popover-body"
+  }, children), /*#__PURE__*/_react.default.createElement("svg", {
+    className: "Popover-arrow",
+    viewBox: "0 0 9 5"
+  }, /*#__PURE__*/_react.default.createElement("polygon", {
+    points: "0,0 5,5, 9,0"
+  }))), document.body);
+};

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

@@ -0,0 +1,8 @@
+type Container = React.RefObject<any> | Element | (() => Element) | null;
+export interface PortalProps {
+    container?: Container;
+    onRendered?: () => void;
+    children?: React.ReactNode;
+}
+export declare const Portal: (props: PortalProps) => import("react").ReactPortal | null;
+export {};

package/lib/components/Portal/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Portal = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _reactDom = require("react-dom");
+function getEl(el) {
+  if (!el) return null;
+  if (el instanceof Element) {
+    return el;
+  }
+  return typeof el === 'function' ? el() : el.current || el;
+}
+var Portal = exports.Portal = function Portal(props) {
+  var children = props.children,
+    _props$container = props.container,
+    container = _props$container === void 0 ? document.body : _props$container,
+    onRendered = props.onRendered;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    mountNode = _useState2[0],
+    setMountNode = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setMountNode(getEl(container));
+  }, [container]);
+  (0, _react.useLayoutEffect)(function () {
+    if (onRendered && mountNode) {
+      onRendered();
+    }
+  }, [mountNode, onRendered]);
+  return mountNode ? /*#__PURE__*/(0, _reactDom.createPortal)(children, mountNode) : mountNode;
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface PriceProps {
+    price: number;
+    className?: string;
+    locale?: string;
+    currency?: string;
+    original?: boolean;
+    autoFit?: boolean;
+}
+export declare const Price: React.ForwardRefExoticComponent<PriceProps & React.RefAttributes<HTMLDivElement>>;