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

package/lib/esm/packages/hooks/use-toggle/lib/esm/index.js

@@ -0,0 +1,66 @@
+/** @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.
+ */
+import { useMemo } from 'react';
+import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
+import { useLatestCallback } from '../../../use-latest/lib/esm/index.js';
+
+/** @LICENSE
+ * @hi-ui/use-toggle
+ * https://github.com/XiaoMi/hiui/tree/master/packages/hooks/use-toggle#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.
+ */
+/**
+ * Handles uncontrolled boolean switching by `on`, `off`, `not`
+ */
+function useUncontrolledToggle(_ref) {
+  var _ref$defaultVisible = _ref.defaultVisible,
+    defaultVisible = _ref$defaultVisible === void 0 ? false : _ref$defaultVisible,
+    visibleProp = _ref.visible,
+    onClose = _ref.onClose,
+    onOpen = _ref.onOpen,
+    onToggle = _ref.onToggle,
+    isEqual = _ref.isEqual,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var onVisibleChange = useLatestCallback(function (nextVisible) {
+    var callback = nextVisible ? onOpen : onClose;
+    callback === null || callback === void 0 ? void 0 : callback();
+    onToggle === null || onToggle === void 0 ? void 0 : onToggle(nextVisible);
+  });
+  var _useUncontrolledState = useUncontrolledState(defaultVisible, visibleProp, onVisibleChange, isEqual),
+    bool = _useUncontrolledState[0],
+    setBool = _useUncontrolledState[1];
+  var proxySetBool = useLatestCallback(function (stateOrFunction) {
+    if (disabled) return;
+    setBool(stateOrFunction);
+  });
+  var toggle = useMemo(function () {
+    return {
+      set: proxySetBool,
+      on: function on() {
+        proxySetBool(true);
+      },
+      off: function off() {
+        proxySetBool(false);
+      },
+      not: function not() {
+        proxySetBool(function (prev) {
+          return !prev;
+        });
+      }
+    };
+  }, [proxySetBool]);
+  return [bool, toggle];
+}
+export { useUncontrolledToggle };

package/lib/esm/packages/hooks/use-unmount-effect/lib/esm/index.js

@@ -0,0 +1,39 @@
+/** @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.
+ */
+import { useRef, useEffect } from 'react';
+import { useLatestCallback } from '../../../use-latest/lib/esm/index.js';
+
+/** @LICENSE
+ * @hi-ui/use-unmount-effect
+ * https://github.com/XiaoMi/hiui/tree/master/packages/hooks/use-unmount-effect#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.
+ */
+
+/**
+ * A hook for running when component unmount, will return unmountRef sign
+ */
+var useUnmountEffect = function useUnmountEffect(cleanup) {
+  var cleanupLatest = useLatestCallback(cleanup);
+  var unmountRef = useRef(false);
+  useEffect(function () {
+    return function () {
+      unmountRef.current = true;
+      cleanupLatest();
+    };
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  return unmountRef;
+};
+export { useUnmountEffect };

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

@@ -0,0 +1,53 @@
+/** @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.
+ */
+import { __rest } from 'tslib';
+import React, { forwardRef } from 'react';
+import { getPrefixCls, cx } from '@hi-ui/classname';
+import { __DEV__ } from '@hi-ui/env';
+
+/** @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 = getPrefixCls('icon-check-outlined');
+var CheckOutlined = /*#__PURE__*/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 = __rest(_a, ["prefixCls", "className", "children", "size", "style"]);
+  var cls = cx(prefixCls, className);
+  var style = Object.assign({
+    fontSize: size
+  }, styleProp);
+  return /*#__PURE__*/React.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.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 (__DEV__) {
+  CheckOutlined.displayName = 'CheckOutlined';
+}
+export { CheckOutlined };

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

@@ -0,0 +1,53 @@
+/** @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.
+ */
+import { __rest } from 'tslib';
+import React, { forwardRef } from 'react';
+import { getPrefixCls, cx } from '@hi-ui/classname';
+import { __DEV__ } from '@hi-ui/env';
+
+/** @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 = getPrefixCls('icon-right-outlined');
+var RightOutlined = /*#__PURE__*/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 = __rest(_a, ["prefixCls", "className", "children", "size", "style"]);
+  var cls = cx(prefixCls, className);
+  var style = Object.assign({
+    fontSize: size
+  }, styleProp);
+  return /*#__PURE__*/React.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.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 (__DEV__) {
+  RightOutlined.displayName = 'RightOutlined';
+}
+export { RightOutlined };

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

@@ -0,0 +1,97 @@
+/** @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.
+ */
+import { __rest } from 'tslib';
+import React, { forwardRef, useImperativeHandle, useMemo, isValidElement, cloneElement } from 'react';
+import { getPrefixCls, cx } from '@hi-ui/classname';
+import { __DEV__, invariant } from '@hi-ui/env';
+import Popper from '@hi-ui/popper';
+import { usePopover } from './use-popover.js';
+import { isString } from '../../../../utils/type-assertion/lib/esm/index.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 _role = 'popover';
+var prefix = getPrefixCls(_role);
+/**
+ * 气泡卡片
+ */
+var Popover = /*#__PURE__*/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 = __rest(_a, ["prefixCls", "innerRef", "className", "children", "title", "content", "shouldWrapChildren", "autoWrapChildren", "wrapTagName", "showTitleDivider"]);
+  var _usePopover = usePopover(rest),
+    rootProps = _usePopover.rootProps,
+    getTriggerProps = _usePopover.getTriggerProps,
+    getPopperProps = _usePopover.getPopperProps,
+    getOverlayProps = _usePopover.getOverlayProps,
+    visibleAction = _usePopover.visibleAction;
+  useImperativeHandle(innerRef, function () {
+    return {
+      open: visibleAction.on,
+      close: visibleAction.off
+    };
+  });
+  var triggerMemo = useMemo(function () {
+    var trigger;
+    if ( /*#__PURE__*/isValidElement(children)) {
+      trigger = /*#__PURE__*/cloneElement(children,
+      // @ts-ignore
+      getTriggerProps(children.props, children.ref));
+    } else {
+      var TagName = wrapTagName;
+      if (shouldWrapChildren || autoWrapChildren && isString(children)) {
+        trigger = /*#__PURE__*/React.createElement(TagName, Object.assign({
+          tabIndex: 0
+        }, getTriggerProps()), children);
+      } else {
+        trigger = children;
+        if (__DEV__) {
+          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 = cx(prefixCls, showTitleDivider && prefixCls + "--divided", className);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, triggerMemo, /*#__PURE__*/React.createElement(Popper, Object.assign({}, getPopperProps(), getOverlayProps(), {
+    autoFocus: false
+  }), /*#__PURE__*/React.createElement("div", Object.assign({
+    ref: ref,
+    className: cls
+  }, rootProps), title ? /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__title"
+  }, title) : null, /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__content"
+  }, content))));
+});
+if (__DEV__) {
+  Popover.displayName = 'Popover';
+}
+export { Popover, prefix };

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

@@ -0,0 +1,25 @@
+/** @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.
+ */
+import './styles/index.scss.js';
+import { Popover as Popover$1 } from './Popover.js';
+export { prefix } from './Popover.js';
+import { withPopover } from './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 = withPopover(Popover$1);
+export { Popover, Popover as default };

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

@@ -0,0 +1,23 @@
+/** @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.
+ */
+import __styleInject__ from '@hi-ui/style-inject';
+
+/** @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__(css_248z);
+export { css_248z as default };

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

@@ -0,0 +1,25 @@
+/** @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.
+ */
+/** @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'
+};
+export { PopoverTriggerActionEnum };

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

@@ -0,0 +1,175 @@
+/** @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.
+ */
+import { __rest } from 'tslib';
+import React, { useCallback } from 'react';
+import { PopoverTriggerActionEnum } from './types.js';
+import { useUncontrolledToggle } from '../../../../hooks/use-toggle/lib/esm/index.js';
+import { omitPopperOverlayProps } from '@hi-ui/popper';
+import { mockDefaultHandlers } from '../../../../utils/dom-utils/lib/esm/index.js';
+import { mergeRefs, withDefaultProps } from '../../../../utils/react-utils/lib/esm/index.js';
+import { useUID } from '../../../../hooks/use-id/lib/esm/index.js';
+import { useUnmountEffect } from '../../../../hooks/use-unmount-effect/lib/esm/index.js';
+import { normalizeArray } from '../../../../utils/array-utils/lib/esm/index.js';
+import { useTimeout } from '../../../../hooks/use-timeout/lib/esm/index.js';
+import { useLatestCallback } from '../../../../hooks/use-latest/lib/esm/index.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.
+ */
+
+// 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 = __rest(_a, ["visible", "onOpen", "onClose", "trigger", "mouseEnterDelay", "mouseLeaveDelay", "attachEl", "popperClassName"]);
+  // TODO: 移除 popper，使用 hook 重写
+  var _omitPopperOverlayPro = omitPopperOverlayProps(restProps),
+    popper = _omitPopperOverlayPro[0],
+    rest = _omitPopperOverlayPro[1];
+  var _useUncontrolledToggl = 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 = useTimeout(function () {
+      visibleAction.on();
+    }, mouseEnterDelay),
+    startOpenTimer = _useTimeout.start,
+    clearOpenTimer = _useTimeout.clear;
+  var _useTimeout2 = useTimeout(function () {
+      if (hoveringRef.current) return;
+      visibleAction.off();
+    }, mouseLeaveDelay),
+    startCloseTimer = _useTimeout2.start,
+    clearCloseTimer = _useTimeout2.clear;
+  var clearToggleTimer = useCallback(function () {
+    clearOpenTimer();
+    clearCloseTimer();
+  }, [clearOpenTimer, clearCloseTimer]);
+  useUnmountEffect(clearToggleTimer);
+  var _React$useState = React.useState(null),
+    triggerEl = _React$useState[0],
+    setTriggerEl = _React$useState[1];
+  var hoveringRef = React.useRef(false);
+  var trigger = normalizeArray(triggerProp);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  var triggersMemo = React.useMemo(function () {
+    return trigger;
+  }, trigger);
+  var popoverId = useUID('popover');
+  var handlePopoverLeave = useLatestCallback(function () {
+    hoveringRef.current = false;
+    clearOpenTimer();
+    startCloseTimer();
+  });
+  var handlePopoverEnter = useLatestCallback(function () {
+    hoveringRef.current = true;
+    startOpenTimer();
+  });
+  var getOverlayProps = React.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(PopoverTriggerActionEnum.HOVER)) {
+      popoverProps.onMouseEnter = mockDefaultHandlers(props.onMouseEnter, function () {
+        hoveringRef.current = true;
+      });
+      popoverProps.onMouseLeave = mockDefaultHandlers(props.onMouseLeave, handlePopoverLeave);
+    }
+    return popoverProps;
+  }, [triggersMemo, popoverId, handlePopoverLeave]);
+  var getTriggerProps = React.useCallback(function (props, ref) {
+    if (props === void 0) {
+      props = {};
+    }
+    if (ref === void 0) {
+      ref = null;
+    }
+    var triggerProps = Object.assign(Object.assign({}, props), {
+      ref: mergeRefs(setTriggerEl, ref),
+      'aria-controls': popoverId,
+      'aria-haspopup': 'dialog',
+      'aria-expanded': visible
+    });
+    if (triggersMemo.includes(PopoverTriggerActionEnum.CLICK)) {
+      triggerProps.onClick = mockDefaultHandlers(props.onClick, visibleAction.not);
+    }
+    if (triggersMemo.includes(PopoverTriggerActionEnum.HOVER)) {
+      // @ref https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html
+      triggerProps.onFocus = mockDefaultHandlers(props.onFocus, visibleAction.on);
+      triggerProps.onBlur = mockDefaultHandlers(props.onBlur, visibleAction.off);
+      triggerProps.onMouseEnter = mockDefaultHandlers(props.onMouseEnter, handlePopoverEnter);
+      triggerProps.onMouseLeave = mockDefaultHandlers(props.onMouseLeave, handlePopoverLeave);
+    } else if (triggersMemo.includes(PopoverTriggerActionEnum.FOCUS)) {
+      triggerProps.onFocus = mockDefaultHandlers(props.onFocus, visibleAction.on);
+      triggerProps.onBlur = mockDefaultHandlers(props.onBlur, visibleAction.off);
+    }
+    if (triggersMemo.includes(PopoverTriggerActionEnum.CONTEXTMENU)) {
+      triggerProps.onContextMenu = mockDefaultHandlers(props.onContextMenu, function (evt) {
+        evt.preventDefault();
+        visibleAction.not();
+      });
+    }
+    return triggerProps;
+  }, [triggersMemo, popoverId, visibleAction, visible, handlePopoverEnter, handlePopoverLeave]);
+  var getPopperProps = React.useCallback(function () {
+    var popperProps = 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
+  };
+};
+export { usePopover };

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

@@ -0,0 +1,60 @@
+/** @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.
+ */
+/** @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);
+  }
+};
+export { getContainer, removeContainer };