@kdcloudjs/kdesign 1.0.2

package/lib/_utils/usePopper.js

@@ -0,0 +1,645 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Triggers = exports.Placements = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _type = require("../_utils/type");
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
+
+var _hooks = require("./hooks");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Placements = (0, _type.tuple)('top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom');
+exports.Placements = Placements;
+var Triggers = (0, _type.tuple)('hover', 'focus', 'click', 'contextMenu');
+exports.Triggers = Triggers;
+
+function getTranslate(node, param) {
+  var _a;
+
+  var translates = ((_a = document.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(node, null).transform.substring(7)) || '';
+  var result = translates.match(/\(([^)]*)\)/);
+  var matrix = result ? result[1].split(',') : translates.split(',');
+
+  if (param === 'x' || param === undefined) {
+    return matrix.length > 6 ? parseFloat(matrix[12]) : parseFloat(matrix[4]);
+  } else if (param === 'y') {
+    return matrix.length > 6 ? parseFloat(matrix[13]) : parseFloat(matrix[5]);
+  } else if (param === 'z') {
+    return matrix.length > 6 ? parseFloat(matrix[14]) : 0;
+  } else if (param === 'rotate') {
+    return matrix.length > 6 ? getRotate([parseFloat(matrix[0]), parseFloat(matrix[1]), parseFloat(matrix[4]), parseFloat(matrix[5])]) : getRotate((0, _map.default)(matrix).call(matrix, function (i) {
+      return parseFloat(i);
+    }));
+  }
+}
+
+function getRotate(matrix) {
+  var aa = Math.round(180 * Math.asin(matrix[0]) / Math.PI);
+  var bb = Math.round(180 * Math.acos(matrix[1]) / Math.PI);
+  var cc = Math.round(180 * Math.asin(matrix[2]) / Math.PI);
+  var dd = Math.round(180 * Math.acos(matrix[3]) / Math.PI);
+  var deg = 0;
+
+  if (aa === bb || -aa === bb) {
+    deg = dd;
+  } else if (-aa + bb === 180) {
+    deg = 180 + cc;
+  } else if (aa + bb === 180) {
+    deg = 360 - cc || 360 - dd;
+  }
+
+  return deg >= 360 ? 0 : deg;
+}
+
+var getTranslatePos = function getTranslatePos(el) {
+  var elPos = {
+    top: getTranslate(el, 'y') || 0,
+    left: getTranslate(el, 'x') || 0
+  };
+
+  if (el.parentElement) {
+    var parentPos = getTranslatePos(el.parentElement);
+    elPos.top += parentPos.top;
+    elPos.left += parentPos.left;
+  }
+
+  return elPos;
+};
+
+var getOffsetPos = function getOffsetPos(el) {
+  var elPos = {
+    top: el.offsetTop,
+    left: el.offsetLeft
+  };
+
+  if (el.offsetParent) {
+    var parentPos = getOffsetPos(el.offsetParent);
+    elPos.top += parentPos.top;
+    elPos.left += parentPos.left;
+  }
+
+  return elPos;
+};
+
+var getScrollDist = function getScrollDist(el, container) {
+  var elScroll = {
+    top: el.scrollTop,
+    left: el.scrollLeft
+  };
+  var isFixed = getComputedStyle(el, null).getPropertyValue('position') === 'fixed';
+
+  if (isFixed) {
+    elScroll.top -= document.documentElement.scrollTop;
+    elScroll.left -= document.documentElement.scrollLeft;
+  } else if (el.parentElement && container.contains(el.parentElement)) {
+    var parentScroll = getScrollDist(el.parentElement, container);
+    elScroll.top += parentScroll.top;
+    elScroll.left += parentScroll.left;
+  }
+
+  return elScroll;
+};
+
+function usePopper(locatorElement, popperElement, props) {
+  var _context, _context2, _arrowStyle;
+
+  var prefixCls = props.prefixCls,
+      onTrigger = props.onTrigger,
+      popperStyle = props.popperStyle,
+      _props$arrow = props.arrow,
+      arrow = _props$arrow === void 0 ? false : _props$arrow,
+      onVisibleChange = props.onVisibleChange,
+      popperClassName = props.popperClassName,
+      _props$arrowOffset = props.arrowOffset,
+      arrowOffset = _props$arrowOffset === void 0 ? 12 : _props$arrowOffset,
+      _props$arrowSize = props.arrowSize,
+      arrowSize = _props$arrowSize === void 0 ? 4.25 : _props$arrowSize,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$trigger = props.trigger,
+      trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
+      _props$placement = props.placement,
+      placement = _props$placement === void 0 ? 'top' : _props$placement,
+      _props$gap = props.gap,
+      defalutGap = _props$gap === void 0 ? 4 : _props$gap,
+      _props$scrollHidden = props.scrollHidden,
+      scrollHidden = _props$scrollHidden === void 0 ? false : _props$scrollHidden,
+      _props$mouseEnterDela = props.mouseEnterDelay,
+      mouseEnterDelay = _props$mouseEnterDela === void 0 ? 0.1 : _props$mouseEnterDela,
+      _props$mouseLeaveDela = props.mouseLeaveDelay,
+      mouseLeaveDelay = _props$mouseLeaveDela === void 0 ? 0.1 : _props$mouseLeaveDela,
+      _props$defaultVisible = props.defaultVisible,
+      defaultVisible = _props$defaultVisible === void 0 ? false : _props$defaultVisible,
+      _props$getTriggerElem = props.getTriggerElement,
+      getTriggerElement = _props$getTriggerElem === void 0 ? function (locatorNode) {
+    return locatorNode;
+  } : _props$getTriggerElem,
+      _props$getPopupContai = props.getPopupContainer,
+      getPopupContainer = _props$getPopupContai === void 0 ? function () {
+    return document.body;
+  } : _props$getPopupContai;
+  var arrowWidth = Math.sqrt(2 * Math.pow(arrowSize, 2));
+  var componentName = (prefixCls === null || prefixCls === void 0 ? void 0 : prefixCls.split('-')[1]) || '';
+  (0, _devwarning.default)(Placements.indexOf(placement) === -1, componentName, (0, _concat.default)(_context = "cannot found ".concat(componentName, " placement '")).call(_context, placement, "'"));
+  var isWrongTrigger = Array.isArray(trigger) ? trigger.some(function (v) {
+    return !(0, _includes.default)(Triggers).call(Triggers, v);
+  }) : Triggers.indexOf(trigger) === -1;
+  (0, _devwarning.default)(isWrongTrigger, componentName, (0, _concat.default)(_context2 = "cannot found ".concat(componentName, " trigger '")).call(_context2, trigger, "'"));
+  var locatorEl = (0, _react.useRef)();
+  var popperEl = (0, _react.useRef)();
+  var locatorRef = locatorElement.ref || locatorEl;
+  var popperRef = popperElement.ref || popperEl;
+  var container = getPopupContainer(locatorRef.current || document.body);
+
+  _promise.default.resolve().then(function () {
+    var triggerNode = getTriggerElement(locatorRef.current);
+    var container = getPopupContainer(locatorRef.current);
+    (0, _devwarning.default)(!triggerNode, componentName, "getTriggerElement() must return a HTMLElement, but now it does not return anything");
+    (0, _devwarning.default)(!container, componentName, "getPopupContainer() must return a HTMLElement, but now it does not return anything");
+  });
+
+  var initPos = {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 0,
+    width: 0
+  };
+  var initAlign = {
+    top: 0,
+    left: 0
+  };
+  var gap = defalutGap + (arrow ? 10 : 0);
+
+  var _useState = (0, _react.useState)(initPos),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      mousePos = _useState2[0],
+      setMousePos = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(initAlign),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      arrowPos = _useState4[0],
+      setArrowPos = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(!!props.visible || defaultVisible),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      exist = _useState6[0],
+      setExist = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(!!props.visible || defaultVisible),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      canAlign = _useState8[0],
+      setCanAlign = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      visible = _useState10[0],
+      setVisible = _useState10[1];
+
+  (0, _react.useEffect)(function () {
+    if (props.visible) {
+      !exist && setExist(true);
+      setCanAlign(true);
+      setVisible(true);
+    } else {
+      setVisible(false);
+    }
+  }, [exist, props.visible]);
+
+  var _useState11 = (0, _react.useState)(''),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      evType = _useState12[0],
+      setEvType = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      align = _useState14[0],
+      setAlign = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(placement),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      currentPlacement = _useState16[0],
+      setCurrentPlacement = _useState16[1];
+
+  var alignPopper = (0, _react.useCallback)(function () {
+    if ((locatorRef === null || locatorRef === void 0 ? void 0 : locatorRef.current) && (popperRef === null || popperRef === void 0 ? void 0 : popperRef.current)) {
+      var _popperRef$current$ge = popperRef.current.getBoundingClientRect(),
+          popperWidth = _popperRef$current$ge.width,
+          popperHeight = _popperRef$current$ge.height;
+
+      var _locatorRef$current$g = locatorRef.current.getBoundingClientRect(),
+          top = _locatorRef$current$g.top,
+          bottom = _locatorRef$current$g.bottom,
+          left = _locatorRef$current$g.left,
+          right = _locatorRef$current$g.right,
+          height = _locatorRef$current$g.height,
+          width = _locatorRef$current$g.width;
+
+      var _getOffsetPos = getOffsetPos(container),
+          containerTop = _getOffsetPos.top,
+          containerLeft = _getOffsetPos.left;
+
+      var _getOffsetPos2 = getOffsetPos(locatorRef.current),
+          locatorTop = _getOffsetPos2.top,
+          locatorLeft = _getOffsetPos2.left;
+
+      var _getScrollDist = getScrollDist(locatorRef.current.parentElement, container),
+          scrollTop = _getScrollDist.top,
+          scrollLeft = _getScrollDist.left;
+
+      var _getTranslatePos = getTranslatePos(locatorRef.current),
+          translateTop = _getTranslatePos.top,
+          translateLeft = _getTranslatePos.left;
+
+      var locatorPos = {
+        width: width,
+        height: height,
+        top: locatorTop + translateTop - containerTop - scrollTop,
+        left: locatorLeft + translateLeft - containerLeft - scrollLeft,
+        right: locatorLeft + translateLeft + width - containerLeft - scrollLeft,
+        bottom: locatorTop + translateTop + height - containerTop - scrollTop
+      };
+      var currentPos = trigger === 'contextMenu' ? mousePos : locatorPos;
+      var _currentPlacement = placement;
+
+      if (top - gap - popperHeight <= 5 && bottom + gap + popperHeight < document.body.clientHeight - 5) {
+        _currentPlacement = _currentPlacement.replace('top', 'bottom');
+      }
+
+      if (bottom + gap + popperHeight >= document.body.clientHeight - 5 && top - gap - popperHeight > 5) {
+        _currentPlacement = _currentPlacement.replace('bottom', 'top');
+      }
+
+      if (left + popperWidth >= document.body.clientWidth - 5 && right - popperWidth > 5) {
+        _currentPlacement = _currentPlacement.replace('Left', 'Right');
+      }
+
+      if (right - popperWidth <= 5 && left + popperWidth < document.body.clientWidth - 5) {
+        _currentPlacement = _currentPlacement.replace('Right', 'Left');
+      }
+
+      if (top + popperHeight >= document.body.clientHeight - 5 && bottom - popperHeight > 5) {
+        _currentPlacement = _currentPlacement.replace('Top', 'Bottom');
+      }
+
+      if (bottom - popperHeight <= 5 && top + popperHeight < document.body.clientHeight - 5) {
+        _currentPlacement = _currentPlacement.replace('Bottom', 'Top');
+      }
+
+      if (left - gap - popperWidth <= 5 && right + gap + popperWidth < document.body.clientWidth - 5) {
+        _currentPlacement = _currentPlacement.replace('left', 'right');
+      }
+
+      if (right + gap + popperWidth >= document.body.clientWidth - 5 && left - gap - popperWidth > 5) {
+        _currentPlacement = _currentPlacement.replace('right', 'left');
+      }
+
+      var leftLeft = currentPos.left - popperWidth - gap;
+      var topTop = currentPos.top - gap - popperHeight;
+      var bottomTop = currentPos.top + currentPos.height + gap;
+      var rightLeft = currentPos.left + currentPos.width - popperWidth;
+      var centerLeft = currentPos.left + (currentPos.width - popperWidth) / 2;
+      var centerTop = currentPos.top - (popperHeight - currentPos.height) / 2;
+      var topBottom = currentPos.bottom - popperHeight;
+      var leftRight = currentPos.right + gap;
+      var mapAlign = {
+        topLeft: {
+          left: currentPos.left,
+          top: topTop
+        },
+        top: {
+          left: centerLeft,
+          top: topTop
+        },
+        topRight: {
+          left: rightLeft,
+          top: topTop
+        },
+        bottomLeft: {
+          left: currentPos.left,
+          top: bottomTop
+        },
+        bottom: {
+          left: centerLeft,
+          top: bottomTop
+        },
+        bottomRight: {
+          left: rightLeft,
+          top: bottomTop
+        },
+        leftTop: {
+          left: leftLeft,
+          top: currentPos.top
+        },
+        left: {
+          left: leftLeft,
+          top: centerTop
+        },
+        leftBottom: {
+          left: leftLeft,
+          top: topBottom
+        },
+        rightTop: {
+          left: leftRight,
+          top: currentPos.top
+        },
+        right: {
+          left: leftRight,
+          top: centerTop
+        },
+        rightBottom: {
+          left: leftRight,
+          top: topBottom
+        }
+      };
+      var alignPos = mapAlign[_currentPlacement];
+      var _arrowPos = {
+        top: 0,
+        left: 0
+      };
+
+      if (/left/.test(_currentPlacement) || /right/.test(_currentPlacement)) {
+        if (/Top/.test(_currentPlacement)) {
+          _arrowPos.top = arrowOffset;
+        } else if (/Bottom/.test(_currentPlacement)) {
+          _arrowPos.top = popperHeight - arrowOffset - 2 * arrowSize;
+        } else {
+          _arrowPos.top = (popperHeight - arrowWidth) / 2 - 1;
+        }
+
+        if (top <= 0) {
+          alignPos.top = locatorPos.top;
+          _arrowPos.top = arrowOffset;
+        } else if (bottom - height / 4 >= document.body.clientHeight) {
+          alignPos.top = locatorPos.bottom - popperHeight;
+          _arrowPos.top = popperHeight - arrowOffset - 2 * arrowSize;
+        } else {
+          var _scrollTop = alignPos.top - window.pageYOffset;
+
+          var scrollBottom = alignPos.top + popperHeight - 5 - window.pageYOffset;
+
+          if (_scrollTop < 0) {
+            alignPos.top -= _scrollTop;
+            _arrowPos.top += _scrollTop;
+          }
+
+          if (scrollBottom > document.body.clientHeight) {
+            alignPos.top += document.body.clientHeight - scrollBottom;
+            _arrowPos.top += scrollBottom - document.body.clientHeight;
+          }
+        }
+      }
+
+      if (/top/.test(_currentPlacement) || /bottom/.test(_currentPlacement)) {
+        if (/Left/.test(_currentPlacement)) {
+          _arrowPos.left = arrowOffset;
+        } else if (/Right/.test(_currentPlacement)) {
+          _arrowPos.left = popperWidth - arrowOffset - 2 * arrowSize;
+        } else {
+          _arrowPos.left = (popperWidth - arrowWidth) / 2 - 1;
+        }
+      }
+
+      setAlign(alignPos);
+      setArrowPos(_arrowPos);
+      setCurrentPlacement(_currentPlacement);
+    }
+  }, [locatorRef, popperRef, container, trigger, mousePos, placement, gap, arrowOffset, arrowSize, arrowWidth]);
+  (0, _react.useEffect)(function () {
+    if (canAlign) {
+      alignPopper();
+      setCanAlign(false);
+      props.visible === undefined && setVisible(true);
+      onVisibleChange && onVisibleChange(true);
+    }
+  }, [alignPopper, canAlign, onVisibleChange, props]);
+  var arrowStyle = (_arrowStyle = {}, (0, _defineProperty2.default)(_arrowStyle, "--arrowSize", arrowSize + 'px'), (0, _defineProperty2.default)(_arrowStyle, "--arrowSpill", arrowWidth / -2 + 'px'), _arrowStyle);
+  if (arrowPos.top) arrowStyle["--arrowTop"] = arrowPos.top + 'px';
+  if (arrowPos.left) arrowStyle["--arrowLeft"] = arrowPos.left + 'px';
+  var popperContainerStyle = (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
+    position: 'absolute'
+  }, popperStyle), align), arrow ? arrowStyle : {});
+  var popperProps = {
+    ref: popperRef,
+    style: popperContainerStyle,
+    className: (0, _classnames.default)(prefixCls, popperClassName, currentPlacement, (0, _defineProperty2.default)({
+      arrow: arrow,
+      hidden: !visible
+    }, "".concat(currentPlacement, "-active"), visible))
+  };
+  var popperNode = popperRef.current;
+  var locatorNode = locatorRef.current;
+  (0, _hooks.useResizeObserver)(popperNode, alignPopper);
+  (0, _hooks.useResizeObserver)(locatorNode, alignPopper);
+  var showPopper = (0, _react.useCallback)(function (evType) {
+    if (!disabled) {
+      !exist && setExist(true);
+      setEvType(evType);
+
+      if (onTrigger) {
+        var mapTrigger = {
+          mouseenter: 'hover',
+          mouseup: 'click',
+          focus: 'focus',
+          contextmenu: 'contextMenu'
+        };
+        onTrigger(mapTrigger[evType]);
+      }
+
+      if (!visible || evType === 'contextmenu') {
+        setCanAlign(true);
+      }
+    }
+  }, [disabled, exist, onTrigger, visible]);
+  var hidePopper = (0, _react.useCallback)(function () {
+    setEvType('');
+    props.visible === undefined && setVisible(false);
+    onVisibleChange && onVisibleChange(false);
+  }, [onVisibleChange, props.visible]);
+  (0, _react.useEffect)(function () {
+    if (exist && visible) {
+      var mouseleaveTimer;
+
+      var handleHidePopper = function handleHidePopper(e) {
+        var triggerNode = getTriggerElement(locatorRef.current);
+        var triggerRect = triggerNode.getBoundingClientRect();
+        var popperRect = popperRef.current.getBoundingClientRect();
+        var left = /left/.test(currentPlacement) ? popperRect.right : triggerRect.left;
+        var right = /right/.test(currentPlacement) ? popperRect.left : triggerRect.right;
+        var top = /top/.test(currentPlacement) ? popperRect.bottom : triggerRect.top;
+        var bottom = /bottom/.test(currentPlacement) ? popperRect.top : triggerRect.bottom;
+        var X = e.clientX,
+            Y = e.clientY;
+        var inTriggerRect = X > left - 2 && X < right + 2 && Y > top - 2 && Y < bottom + 2;
+        var inPopperRect = X > popperRect.left && X < popperRect.right && Y > popperRect.top && Y < popperRect.bottom;
+        var ableArea = evType === 'contextmenu' ? inPopperRect : inTriggerRect || inPopperRect;
+
+        if (ableArea) {
+          mouseleaveTimer && clearTimeout(mouseleaveTimer);
+          evType === 'focus' && triggerNode.focus();
+        } else {
+          evType === 'mouseenter' ? mouseleaveTimer = window.setTimeout(hidePopper, mouseLeaveDelay * 1000) : hidePopper();
+        }
+      };
+
+      var debounceHidePopper = (0, _debounce.default)(handleHidePopper, 10, {
+        leading: true
+      });
+      var mapEvent = {
+        mouseenter: 'mousemove',
+        mouseup: 'mousedown',
+        focus: 'mousedown',
+        contextmenu: 'mousedown'
+      };
+      document.addEventListener(mapEvent[evType], debounceHidePopper);
+      return function () {
+        document.removeEventListener(mapEvent[evType], debounceHidePopper);
+      };
+    }
+  }, [currentPlacement, evType, exist, getTriggerElement, hidePopper, locatorRef, mouseLeaveDelay, popperRef, visible]);
+  (0, _react.useEffect)(function () {
+    if (visible) {
+      var scrollAlign = (0, _debounce.default)(function (e) {
+        var isPopperScroll = e.target === popperRef.current || popperRef.current.contains(e.target);
+
+        if (scrollHidden && !isPopperScroll) {
+          props.visible === undefined && setVisible(false);
+          onVisibleChange && onVisibleChange(false);
+        }
+
+        alignPopper();
+      }, 10);
+      window.addEventListener('resize', alignPopper);
+      document.addEventListener('scroll', scrollAlign, true);
+      locatorNode === null || locatorNode === void 0 ? void 0 : locatorNode.addEventListener('DOMSubtreeModified', alignPopper);
+      exist && (popperNode === null || popperNode === void 0 ? void 0 : popperNode.addEventListener('DOMSubtreeModified', alignPopper));
+      return function () {
+        window.removeEventListener('resize', alignPopper);
+        document.removeEventListener('scroll', scrollAlign, true);
+        locatorNode === null || locatorNode === void 0 ? void 0 : locatorNode.removeEventListener('DOMSubtreeModified', alignPopper);
+        exist && (popperNode === null || popperNode === void 0 ? void 0 : popperNode.removeEventListener('DOMSubtreeModified', alignPopper));
+      };
+    }
+  }, [alignPopper, exist, onVisibleChange, popperNode, props.visible, scrollHidden, locatorNode, visible, popperRef]);
+
+  _react.default.useEffect(function () {
+    var triggerNode = getTriggerElement(locatorRef.current);
+
+    if (triggerNode) {
+      var mouseenterTimer;
+
+      var clearMouseLeave = function clearMouseLeave() {
+        return clearTimeout(mouseenterTimer);
+      };
+
+      var addAction = function addAction(action) {
+        if (action === 'hover') {
+          triggerNode.addEventListener('mouseenter', debounceShowPopper);
+          triggerNode.addEventListener('mouseleave', clearMouseLeave);
+        } else {
+          triggerNode.addEventListener(action, debounceShowPopper);
+        }
+      };
+
+      var removeAction = function removeAction(action) {
+        if (action === 'hover') {
+          triggerNode.removeEventListener('mouseenter', debounceShowPopper);
+          triggerNode.removeEventListener('mouseleave', clearMouseLeave);
+        } else {
+          triggerNode.removeEventListener(action, debounceShowPopper);
+        }
+      };
+
+      var handleShowPopper = function handleShowPopper(e) {
+        e.preventDefault();
+
+        if (e.type === 'contextmenu') {
+          var currentMousePos = (0, _extends2.default)((0, _extends2.default)({}, mousePos), {
+            left: e.pageX,
+            top: e.pageY,
+            right: e.pageX,
+            bottom: e.pageY
+          });
+          setMousePos(currentMousePos);
+        }
+
+        if (e.type === 'mouseenter') {
+          mouseenterTimer = window.setTimeout(function () {
+            return showPopper(e.type);
+          }, mouseEnterDelay * 1000);
+        } else if (e.type === 'mouseup' && visible) {
+          hidePopper();
+        } else {
+          showPopper(e.type);
+        }
+      };
+
+      var debounceShowPopper = (0, _debounce.default)(handleShowPopper, 10, {
+        leading: true
+      });
+      var mapEvent = {
+        hover: 'hover',
+        click: 'mouseup',
+        focus: 'focus',
+        contextMenu: 'contextmenu'
+      };
+      Array.isArray(trigger) ? trigger.forEach(function (action) {
+        return addAction(mapEvent[action]);
+      }) : addAction(mapEvent[trigger]);
+      return function () {
+        Array.isArray(trigger) ? trigger.forEach(function (action) {
+          return removeAction(mapEvent[action]);
+        }) : removeAction(mapEvent[trigger]);
+      };
+    }
+  }, [getTriggerElement, hidePopper, locatorRef, mouseEnterDelay, mousePos, showPopper, trigger, visible]);
+
+  var Locator = /*#__PURE__*/(0, _react.cloneElement)(locatorElement, {
+    ref: locatorRef
+  });
+
+  var Popper = /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, popperProps), popperElement);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Locator, exist && container && /*#__PURE__*/_reactDom.default.createPortal(Popper, container));
+}
+
+var _default = usePopper;
+exports.default = _default;

package/lib/alert/alert.d.ts

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+export declare const AlertTypes: ["success", "info", "warning", "error"];
+export declare type AlertType = typeof AlertTypes[number];
+declare type BannerOffsetType = [number, number];
+export declare const allBannerAlertPortals: Map<string, HTMLElement>;
+export interface IAlertProps {
+    type?: AlertType;
+    message?: ReactNode;
+    showIcon?: boolean;
+    icon?: ReactNode;
+    closable?: boolean;
+    closeNode?: ReactNode;
+    delayOffTime?: number;
+    className?: string;
+    prefixCls?: string;
+    onClose?: () => void;
+    extra?: ReactNode;
+    banner?: boolean;
+    bannerOffset?: BannerOffsetType;
+}
+declare const Alert: React.FC<IAlertProps>;
+export default Alert;