@hi-ui/layout 4.0.0 → 5.0.0-alpha.0

package/lib/cjs/packages/icons/lib/esm/components/alert/check-outlined.js

@@ -0,0 +1,65 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var tslib = require('tslib');
+var React = require('react');
+var classname = require('@hi-ui/classname');
+var env = require('@hi-ui/env');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+/** @LICENSE
+ * @hi-ui/icons
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/icons#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var _prefix = classname.getPrefixCls('icon-check-outlined');
+var CheckOutlined = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
+    className = _a.className,
+    size = _a.size,
+    styleProp = _a.style,
+    rest = tslib.__rest(_a, ["prefixCls", "className", "children", "size", "style"]);
+  var cls = classname.cx(prefixCls, className);
+  var style = Object.assign({
+    fontSize: size
+  }, styleProp);
+  return /*#__PURE__*/React__default["default"].createElement("svg", Object.assign({
+    className: cls,
+    ref: ref,
+    role: "icon",
+    style: style
+  }, rest, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024",
+    version: "1.1"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M840.832 328.832a42.666667 42.666667 0 0 0-57.621333-62.826667l-2.709334 2.496L405.333333 643.626667l-161.834666-161.813334a42.666667 42.666667 0 0 0-57.621334-2.496l-2.709333 2.496a42.666667 42.666667 0 0 0-2.496 57.621334l2.496 2.709333 192 192a42.666667 42.666667 0 0 0 57.621333 2.496l2.709334-2.496 405.333333-405.333333z",
+    "p-id": "47651"
+  }));
+});
+if (env.__DEV__) {
+  CheckOutlined.displayName = 'CheckOutlined';
+}
+exports.CheckOutlined = CheckOutlined;

package/lib/cjs/packages/icons/lib/esm/components/direction/right-outlined.js

@@ -0,0 +1,65 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var tslib = require('tslib');
+var React = require('react');
+var classname = require('@hi-ui/classname');
+var env = require('@hi-ui/env');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+/** @LICENSE
+ * @hi-ui/icons
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/icons#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var _prefix = classname.getPrefixCls('icon-right-outlined');
+var RightOutlined = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
+    className = _a.className,
+    size = _a.size,
+    styleProp = _a.style,
+    rest = tslib.__rest(_a, ["prefixCls", "className", "children", "size", "style"]);
+  var cls = classname.cx(prefixCls, className);
+  var style = Object.assign({
+    fontSize: size
+  }, styleProp);
+  return /*#__PURE__*/React__default["default"].createElement("svg", Object.assign({
+    className: cls,
+    ref: ref,
+    role: "icon",
+    style: style
+  }, rest, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024",
+    version: "1.1"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M414.165333 225.834667a42.666667 42.666667 0 0 0-62.826666 57.621333l2.496 2.709333L579.626667 512 353.834667 737.834667a42.666667 42.666667 0 0 0-2.496 57.621333l2.496 2.709333a42.666667 42.666667 0 0 0 57.621333 2.496l2.709333-2.496 256-256a42.666667 42.666667 0 0 0 2.496-57.621333l-2.496-2.709333-256-256z",
+    "p-id": "49596"
+  }));
+});
+if (env.__DEV__) {
+  RightOutlined.displayName = 'RightOutlined';
+}
+exports.RightOutlined = RightOutlined;

package/lib/cjs/packages/ui/popover/lib/esm/Popover.js

@@ -0,0 +1,111 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var tslib = require('tslib');
+var React = require('react');
+var classname = require('@hi-ui/classname');
+var env = require('@hi-ui/env');
+var Popper = require('@hi-ui/popper');
+var usePopover = require('./use-popover.js');
+var index = require('../../../../utils/type-assertion/lib/esm/index.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var Popper__default = /*#__PURE__*/_interopDefaultCompat(Popper);
+
+/** @LICENSE
+ * @hi-ui/popover
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/popover#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var _role = 'popover';
+var prefix = classname.getPrefixCls(_role);
+/**
+ * 气泡卡片
+ */
+var Popover = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? prefix : _a$prefixCls,
+    innerRef = _a.innerRef,
+    className = _a.className,
+    children = _a.children,
+    title = _a.title,
+    content = _a.content,
+    _a$shouldWrapChildren = _a.shouldWrapChildren,
+    shouldWrapChildren = _a$shouldWrapChildren === void 0 ? false : _a$shouldWrapChildren,
+    _a$autoWrapChildren = _a.autoWrapChildren,
+    autoWrapChildren = _a$autoWrapChildren === void 0 ? true : _a$autoWrapChildren,
+    _a$wrapTagName = _a.wrapTagName,
+    wrapTagName = _a$wrapTagName === void 0 ? 'span' : _a$wrapTagName,
+    _a$showTitleDivider = _a.showTitleDivider,
+    showTitleDivider = _a$showTitleDivider === void 0 ? false : _a$showTitleDivider,
+    rest = tslib.__rest(_a, ["prefixCls", "innerRef", "className", "children", "title", "content", "shouldWrapChildren", "autoWrapChildren", "wrapTagName", "showTitleDivider"]);
+  var _usePopover = usePopover.usePopover(rest),
+    rootProps = _usePopover.rootProps,
+    getTriggerProps = _usePopover.getTriggerProps,
+    getPopperProps = _usePopover.getPopperProps,
+    getOverlayProps = _usePopover.getOverlayProps,
+    visibleAction = _usePopover.visibleAction;
+  React.useImperativeHandle(innerRef, function () {
+    return {
+      open: visibleAction.on,
+      close: visibleAction.off
+    };
+  });
+  var triggerMemo = React.useMemo(function () {
+    var trigger;
+    if ( /*#__PURE__*/React.isValidElement(children)) {
+      trigger = /*#__PURE__*/React.cloneElement(children,
+      // @ts-ignore
+      getTriggerProps(children.props, children.ref));
+    } else {
+      var TagName = wrapTagName;
+      if (shouldWrapChildren || autoWrapChildren && index.isString(children)) {
+        trigger = /*#__PURE__*/React__default["default"].createElement(TagName, Object.assign({
+          tabIndex: 0
+        }, getTriggerProps()), children);
+      } else {
+        trigger = children;
+        if (env.__DEV__) {
+          env.invariant(false, 'Make sure that the children supports the event corresponding to the trigger, you can set `shouldWrapChildren=true` to solve it.');
+        }
+      }
+    }
+    return trigger;
+  }, [children, getTriggerProps, autoWrapChildren, shouldWrapChildren, wrapTagName]);
+  var cls = classname.cx(prefixCls, showTitleDivider && prefixCls + "--divided", className);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, triggerMemo, /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], Object.assign({}, getPopperProps(), getOverlayProps(), {
+    autoFocus: false
+  }), /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+    ref: ref,
+    className: cls
+  }, rootProps), title ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: prefixCls + "__title"
+  }, title) : null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: prefixCls + "__content"
+  }, content))));
+});
+if (env.__DEV__) {
+  Popover.displayName = 'Popover';
+}
+exports.Popover = Popover;
+exports.prefix = prefix;

package/lib/cjs/packages/ui/popover/lib/esm/index.js

@@ -0,0 +1,31 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+require('./styles/index.scss.js');
+var Popover$1 = require('./Popover.js');
+var withApi = require('./with-api.js');
+
+/** @LICENSE
+ * @hi-ui/popover
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/popover#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Popover = withApi.withPopover(Popover$1.Popover);
+exports.prefix = Popover$1.prefix;
+exports.Popover = Popover;
+exports["default"] = Popover;

package/lib/cjs/packages/ui/popover/lib/esm/styles/index.scss.js

@@ -0,0 +1,35 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var __styleInject__ = require('@hi-ui/style-inject');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var __styleInject____default = /*#__PURE__*/_interopDefaultCompat(__styleInject__);
+
+/** @LICENSE
+ * @hi-ui/popover
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/popover#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var css_248z = ".hi-v5-popover {overflow-wrap: break-word;font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);background: var(--hi-v5-color-static-white, #fff);padding: var(--hi-v5-spacing-6, 12px) var(--hi-v5-spacing-8, 16px);border-radius: var(--hi-v5-border-radius-xl, 8px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-popover__title {-webkit-box-sizing: border-box;box-sizing: border-box;margin-bottom: var(--hi-v5-spacing-2, 4px);color: var(--hi-v5-color-gray-700, #1a1d26);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-medium, 500);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-popover--divided > .hi-v5-popover__title {padding-bottom: var(--hi-v5-spacing-6, 12px);margin-bottom: var(--hi-v5-spacing-6, 12px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);border-bottom: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-popover__content {-webkit-box-sizing: border-box;box-sizing: border-box;color: var(--hi-v5-color-gray-700, #1a1d26);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);font-size: var(--hi-v5-text-size-md, 0.875rem);}";
+__styleInject____default["default"](css_248z);
+exports["default"] = css_248z;

package/lib/cjs/packages/ui/popover/lib/esm/types.js

@@ -0,0 +1,31 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+/** @LICENSE
+ * @hi-ui/popover
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/popover#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var PopoverTriggerActionEnum = {
+  CLICK: 'click',
+  CONTEXTMENU: 'contextmenu',
+  HOVER: 'hover',
+  FOCUS: 'focus'
+};
+exports.PopoverTriggerActionEnum = PopoverTriggerActionEnum;

package/lib/cjs/packages/ui/popover/lib/esm/use-popover.js

@@ -0,0 +1,187 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var tslib = require('tslib');
+var React = require('react');
+var types = require('./types.js');
+var index = require('../../../../hooks/use-toggle/lib/esm/index.js');
+var Popper = require('@hi-ui/popper');
+var index$5 = require('../../../../utils/dom-utils/lib/esm/index.js');
+var index$6 = require('../../../../utils/react-utils/lib/esm/index.js');
+var index$3 = require('../../../../hooks/use-id/lib/esm/index.js');
+var index$2 = require('../../../../hooks/use-unmount-effect/lib/esm/index.js');
+var index$7 = require('../../../../utils/array-utils/lib/esm/index.js');
+var index$1 = require('../../../../hooks/use-timeout/lib/esm/index.js');
+var index$4 = require('../../../../hooks/use-latest/lib/esm/index.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+/** @LICENSE
+ * @hi-ui/popover
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/popover#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// TODO: 和 Tooltip 复用
+var usePopover = function usePopover(_a) {
+  var visibleProp = _a.visible,
+    onOpen = _a.onOpen,
+    _onClose = _a.onClose,
+    _a$trigger = _a.trigger,
+    triggerProp = _a$trigger === void 0 ? 'click' : _a$trigger,
+    _a$mouseEnterDelay = _a.mouseEnterDelay,
+    mouseEnterDelay = _a$mouseEnterDelay === void 0 ? 100 : _a$mouseEnterDelay,
+    _a$mouseLeaveDelay = _a.mouseLeaveDelay,
+    mouseLeaveDelay = _a$mouseLeaveDelay === void 0 ? 100 : _a$mouseLeaveDelay,
+    attachEl = _a.attachEl,
+    popperClassName = _a.popperClassName,
+    restProps = tslib.__rest(_a, ["visible", "onOpen", "onClose", "trigger", "mouseEnterDelay", "mouseLeaveDelay", "attachEl", "popperClassName"]);
+  // TODO: 移除 popper，使用 hook 重写
+  var _omitPopperOverlayPro = Popper.omitPopperOverlayProps(restProps),
+    popper = _omitPopperOverlayPro[0],
+    rest = _omitPopperOverlayPro[1];
+  var _useUncontrolledToggl = index.useUncontrolledToggle({
+      defaultVisible: false,
+      visible: visibleProp,
+      onOpen: onOpen,
+      onClose: function onClose() {
+        clearToggleTimer();
+        _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+      }
+    }),
+    visible = _useUncontrolledToggl[0],
+    visibleAction = _useUncontrolledToggl[1];
+  var _useTimeout = index$1.useTimeout(function () {
+      visibleAction.on();
+    }, mouseEnterDelay),
+    startOpenTimer = _useTimeout.start,
+    clearOpenTimer = _useTimeout.clear;
+  var _useTimeout2 = index$1.useTimeout(function () {
+      if (hoveringRef.current) return;
+      visibleAction.off();
+    }, mouseLeaveDelay),
+    startCloseTimer = _useTimeout2.start,
+    clearCloseTimer = _useTimeout2.clear;
+  var clearToggleTimer = React.useCallback(function () {
+    clearOpenTimer();
+    clearCloseTimer();
+  }, [clearOpenTimer, clearCloseTimer]);
+  index$2.useUnmountEffect(clearToggleTimer);
+  var _React$useState = React__default["default"].useState(null),
+    triggerEl = _React$useState[0],
+    setTriggerEl = _React$useState[1];
+  var hoveringRef = React__default["default"].useRef(false);
+  var trigger = index$7.normalizeArray(triggerProp);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  var triggersMemo = React__default["default"].useMemo(function () {
+    return trigger;
+  }, trigger);
+  var popoverId = index$3.useUID('popover');
+  var handlePopoverLeave = index$4.useLatestCallback(function () {
+    hoveringRef.current = false;
+    clearOpenTimer();
+    startCloseTimer();
+  });
+  var handlePopoverEnter = index$4.useLatestCallback(function () {
+    hoveringRef.current = true;
+    startOpenTimer();
+  });
+  var getOverlayProps = React__default["default"].useCallback(function (props, ref) {
+    if (props === void 0) {
+      props = {};
+    }
+    if (ref === void 0) {
+      ref = null;
+    }
+    var popoverProps = Object.assign(Object.assign({}, props), {
+      ref: ref,
+      role: 'dialog',
+      id: popoverId
+    });
+    if (triggersMemo.includes(types.PopoverTriggerActionEnum.HOVER)) {
+      popoverProps.onMouseEnter = index$5.mockDefaultHandlers(props.onMouseEnter, function () {
+        hoveringRef.current = true;
+      });
+      popoverProps.onMouseLeave = index$5.mockDefaultHandlers(props.onMouseLeave, handlePopoverLeave);
+    }
+    return popoverProps;
+  }, [triggersMemo, popoverId, handlePopoverLeave]);
+  var getTriggerProps = React__default["default"].useCallback(function (props, ref) {
+    if (props === void 0) {
+      props = {};
+    }
+    if (ref === void 0) {
+      ref = null;
+    }
+    var triggerProps = Object.assign(Object.assign({}, props), {
+      ref: index$6.mergeRefs(setTriggerEl, ref),
+      'aria-controls': popoverId,
+      'aria-haspopup': 'dialog',
+      'aria-expanded': visible
+    });
+    if (triggersMemo.includes(types.PopoverTriggerActionEnum.CLICK)) {
+      triggerProps.onClick = index$5.mockDefaultHandlers(props.onClick, visibleAction.not);
+    }
+    if (triggersMemo.includes(types.PopoverTriggerActionEnum.HOVER)) {
+      // @ref https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html
+      triggerProps.onFocus = index$5.mockDefaultHandlers(props.onFocus, visibleAction.on);
+      triggerProps.onBlur = index$5.mockDefaultHandlers(props.onBlur, visibleAction.off);
+      triggerProps.onMouseEnter = index$5.mockDefaultHandlers(props.onMouseEnter, handlePopoverEnter);
+      triggerProps.onMouseLeave = index$5.mockDefaultHandlers(props.onMouseLeave, handlePopoverLeave);
+    } else if (triggersMemo.includes(types.PopoverTriggerActionEnum.FOCUS)) {
+      triggerProps.onFocus = index$5.mockDefaultHandlers(props.onFocus, visibleAction.on);
+      triggerProps.onBlur = index$5.mockDefaultHandlers(props.onBlur, visibleAction.off);
+    }
+    if (triggersMemo.includes(types.PopoverTriggerActionEnum.CONTEXTMENU)) {
+      triggerProps.onContextMenu = index$5.mockDefaultHandlers(props.onContextMenu, function (evt) {
+        evt.preventDefault();
+        visibleAction.not();
+      });
+    }
+    return triggerProps;
+  }, [triggersMemo, popoverId, visibleAction, visible, handlePopoverEnter, handlePopoverLeave]);
+  var getPopperProps = React__default["default"].useCallback(function () {
+    var popperProps = index$6.withDefaultProps(popper, {
+      arrow: true,
+      placement: 'top',
+      // @DesignToken zIndex: `popper`
+      zIndex: 1030,
+      // @DesignToken 10
+      gutterGap: 14
+    });
+    return Object.assign(Object.assign({}, popperProps), {
+      visible: visible,
+      attachEl: attachEl !== null && attachEl !== void 0 ? attachEl : triggerEl,
+      onClose: visibleAction.off,
+      className: popperClassName
+    });
+  }, [popper, visible, attachEl, triggerEl, visibleAction.off, popperClassName]);
+  return {
+    rootProps: rest,
+    getOverlayProps: getOverlayProps,
+    getTriggerProps: getTriggerProps,
+    getPopperProps: getPopperProps,
+    visibleAction: visibleAction
+  };
+};
+exports.usePopover = usePopover;

package/lib/cjs/packages/ui/popover/lib/esm/utils/container/lib/esm/index.js

@@ -0,0 +1,67 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+/** @LICENSE
+ * @hi-ui/popover
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/popover#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/** @LICENSE
+ * @hi-ui/container
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/container#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * 获取用于承载组件的容器，将挂载在 body 下面
+ *
+ * @param selector 以 `.` 开头的选择器类
+ * @returns 容器元素
+ */
+var getContainer = function getContainer(selector, doc, customWrapper) {
+  if (doc === void 0) {
+    doc = document;
+  }
+  var rootElm = doc.querySelector(selector);
+  if (rootElm) return rootElm;
+  rootElm = doc.createElement('div');
+  rootElm.className = selector.slice(1);
+  var wrapper = customWrapper !== null && customWrapper !== void 0 ? customWrapper : doc.body;
+  wrapper.appendChild(rootElm);
+  return rootElm;
+};
+/**
+ * 从 DOM 中移除指定的承载容器
+ *
+ * @param selector 以 `.` 开头的选择器类
+ */
+var removeContainer = function removeContainer(selector, doc) {
+  if (doc === void 0) {
+    doc = document;
+  }
+  var rootElm = doc.querySelector(selector);
+  if (rootElm && rootElm.parentNode) {
+    rootElm.parentNode.removeChild(rootElm);
+  }
+};
+exports.getContainer = getContainer;
+exports.removeContainer = removeContainer;

package/lib/cjs/packages/ui/popover/lib/esm/with-api.js

@@ -0,0 +1,84 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var tslib = require('tslib');
+var React = require('react');
+var require$$2 = require('react-dom');
+var index$1 = require('./utils/container/lib/esm/index.js');
+var index = require('../../../../hooks/use-id/lib/esm/index.js');
+var Popover = require('./Popover.js');
+
+/** @LICENSE
+ * @hi-ui/popover
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/popover#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var prefixCls = Popover.prefix;
+var selector = "." + prefixCls + "-wrapper";
+var popoverInstanceCache = {};
+var open = function open(target, _a) {
+  var key = _a.key,
+    disabledPortal = _a.disabledPortal,
+    rest = tslib.__rest(_a, ["key", "disabledPortal"]);
+  if (!key) {
+    key = index.uuid();
+  }
+  var selectId = selector + "__" + key;
+  var container = index$1.getContainer(selectId, undefined, disabledPortal ? target.parentNode : undefined);
+  var popoverRef = /*#__PURE__*/React.createRef();
+  var ClonedPopover = /*#__PURE__*/React.createElement(Popover.Popover, Object.assign({
+    innerRef: popoverRef,
+    container: container,
+    attachEl: target,
+    closeOnOutsideClick: false,
+    shouldWrapChildren: true,
+    onExited: function onExited() {
+      // 卸载
+      if (container) {
+        require$$2.unmountComponentAtNode(container);
+        index$1.removeContainer(selectId);
+      }
+      container = undefined;
+    }
+  }, rest));
+  requestAnimationFrame(function () {
+    require$$2.render(ClonedPopover, container);
+    popoverRef.current.open();
+  });
+  var close = function close() {
+    var _a;
+    (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
+  };
+  if (key) {
+    popoverInstanceCache[key] = close;
+  }
+  return key;
+};
+var close = function close(key) {
+  if (typeof popoverInstanceCache[key] === 'function') {
+    popoverInstanceCache[key]();
+  }
+  delete popoverInstanceCache[key];
+};
+function withPopover(instance) {
+  return Object.assign(instance, {
+    open: open,
+    close: close
+  });
+}
+exports.withPopover = withPopover;