@rc-component/trigger 2.2.5 → 3.0.0

package/lib/hooks/useAlign.js

@@ -1,44 +1,38 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useAlign;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _findDOMNode = require("rc-util/lib/Dom/findDOMNode");
-var _isVisible = _interopRequireDefault(require("rc-util/lib/Dom/isVisible"));
-var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
-var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
+var _findDOMNode = require("@rc-component/util/lib/Dom/findDOMNode");
+var _isVisible = _interopRequireDefault(require("@rc-component/util/lib/Dom/isVisible"));
+var _useEvent = _interopRequireDefault(require("@rc-component/util/lib/hooks/useEvent"));
+var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/hooks/useLayoutEffect"));
 var React = _interopRequireWildcard(require("react"));
 var _util = require("../util");
-function getUnitOffset(size) {
-  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  var offsetStr = "".concat(offset);
-  var cells = offsetStr.match(/^(.*)\%$/);
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function getUnitOffset(size, offset = 0) {
+  const offsetStr = `${offset}`;
+  const cells = offsetStr.match(/^(.*)\%$/);
   if (cells) {
     return size * (parseFloat(cells[1]) / 100);
   }
   return parseFloat(offsetStr);
 }
 function getNumberOffset(rect, offset) {
-  var _ref = offset || [],
-    _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-    offsetX = _ref2[0],
-    offsetY = _ref2[1];
+  const [offsetX, offsetY] = offset || [];
   return [getUnitOffset(rect.width, offsetX), getUnitOffset(rect.height, offsetY)];
 }
-function splitPoints() {
-  var points = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+function splitPoints(points = '') {
   return [points[0], points[1]];
 }
 function getAlignPoint(rect, points) {
-  var topBottom = points[0];
-  var leftRight = points[1];
-  var x;
-  var y;
+  const topBottom = points[0];
+  const leftRight = points[1];
+  let x;
+  let y;
 
   // Top & Bottom
   if (topBottom === 't') {
@@ -58,18 +52,18 @@ function getAlignPoint(rect, points) {
     x = rect.x + rect.width / 2;
   }
   return {
-    x: x,
-    y: y
+    x,
+    y
   };
 }
 function reversePoints(points, index) {
-  var reverseMap = {
+  const reverseMap = {
     t: 'b',
     b: 't',
     l: 'r',
     r: 'l'
   };
-  return points.map(function (point, i) {
+  return points.map((point, i) => {
     if (i === index) {
       return reverseMap[point] || 'c';
     }
@@ -77,23 +71,20 @@ function reversePoints(points, index) {
   }).join('');
 }
 function useAlign(open, popupEle, target, placement, builtinPlacements, popupAlign, onPopupAlign) {
-  var _React$useState = React.useState({
-      ready: false,
-      offsetX: 0,
-      offsetY: 0,
-      offsetR: 0,
-      offsetB: 0,
-      arrowX: 0,
-      arrowY: 0,
-      scaleX: 1,
-      scaleY: 1,
-      align: builtinPlacements[placement] || {}
-    }),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    offsetInfo = _React$useState2[0],
-    setOffsetInfo = _React$useState2[1];
-  var alignCountRef = React.useRef(0);
-  var scrollerList = React.useMemo(function () {
+  const [offsetInfo, setOffsetInfo] = React.useState({
+    ready: false,
+    offsetX: 0,
+    offsetY: 0,
+    offsetR: 0,
+    offsetB: 0,
+    arrowX: 0,
+    arrowY: 0,
+    scaleX: 1,
+    scaleY: 1,
+    align: builtinPlacements[placement] || {}
+  });
+  const alignCountRef = React.useRef(0);
+  const scrollerList = React.useMemo(() => {
     if (!popupEle) {
       return [];
     }
@@ -103,8 +94,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
   // ========================= Flip ==========================
   // We will memo flip info.
   // If size change to make flip, it will memo the flip info and use it in next align.
-  var prevFlipRef = React.useRef({});
-  var resetFlipCache = function resetFlipCache() {
+  const prevFlipRef = React.useRef({});
+  const resetFlipCache = () => {
     prevFlipRef.current = {};
   };
   if (!open) {
@@ -112,33 +103,36 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
   }
 
   // ========================= Align =========================
-  var onAlign = (0, _useEvent.default)(function () {
+  const onAlign = (0, _useEvent.default)(() => {
     if (popupEle && target && open) {
-      var _popupElement$parentE, _popupRect$x, _popupRect$y, _popupElement$parentE2;
-      var popupElement = popupEle;
-      var doc = popupElement.ownerDocument;
-      var win = (0, _util.getWin)(popupElement);
-      var _win$getComputedStyle = win.getComputedStyle(popupElement),
-        width = _win$getComputedStyle.width,
-        height = _win$getComputedStyle.height,
-        popupPosition = _win$getComputedStyle.position;
-      var originLeft = popupElement.style.left;
-      var originTop = popupElement.style.top;
-      var originRight = popupElement.style.right;
-      var originBottom = popupElement.style.bottom;
-      var originOverflow = popupElement.style.overflow;
+      const popupElement = popupEle;
+      const doc = popupElement.ownerDocument;
+      const win = (0, _util.getWin)(popupElement);
+      const {
+        width,
+        height,
+        position: popupPosition
+      } = win.getComputedStyle(popupElement);
+      const originLeft = popupElement.style.left;
+      const originTop = popupElement.style.top;
+      const originRight = popupElement.style.right;
+      const originBottom = popupElement.style.bottom;
+      const originOverflow = popupElement.style.overflow;
 
       // Placement
-      var placementInfo = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, builtinPlacements[placement]), popupAlign);
+      const placementInfo = {
+        ...builtinPlacements[placement],
+        ...popupAlign
+      };
 
       // placeholder element
-      var placeholderElement = doc.createElement('div');
-      (_popupElement$parentE = popupElement.parentElement) === null || _popupElement$parentE === void 0 || _popupElement$parentE.appendChild(placeholderElement);
-      placeholderElement.style.left = "".concat(popupElement.offsetLeft, "px");
-      placeholderElement.style.top = "".concat(popupElement.offsetTop, "px");
+      const placeholderElement = doc.createElement('div');
+      popupElement.parentElement?.appendChild(placeholderElement);
+      placeholderElement.style.left = `${popupElement.offsetLeft}px`;
+      placeholderElement.style.top = `${popupElement.offsetTop}px`;
       placeholderElement.style.position = popupPosition;
-      placeholderElement.style.height = "".concat(popupElement.offsetHeight, "px");
-      placeholderElement.style.width = "".concat(popupElement.offsetWidth, "px");
+      placeholderElement.style.height = `${popupElement.offsetHeight}px`;
+      placeholderElement.style.width = `${popupElement.offsetWidth}px`;
 
       // Reset first
       popupElement.style.left = '0';
@@ -148,7 +142,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       popupElement.style.overflow = 'hidden';
 
       // Calculate align style, we should consider `transform` case
-      var targetRect;
+      let targetRect;
       if (Array.isArray(target)) {
         targetRect = {
           x: target[0],
@@ -157,10 +151,9 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           height: 0
         };
       } else {
-        var _rect$x, _rect$y;
-        var rect = target.getBoundingClientRect();
-        rect.x = (_rect$x = rect.x) !== null && _rect$x !== void 0 ? _rect$x : rect.left;
-        rect.y = (_rect$y = rect.y) !== null && _rect$y !== void 0 ? _rect$y : rect.top;
+        const rect = target.getBoundingClientRect();
+        rect.x = rect.x ?? rect.left;
+        rect.y = rect.y ?? rect.top;
         targetRect = {
           x: rect.x,
           y: rect.y,
@@ -168,55 +161,58 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           height: rect.height
         };
       }
-      var popupRect = popupElement.getBoundingClientRect();
-      popupRect.x = (_popupRect$x = popupRect.x) !== null && _popupRect$x !== void 0 ? _popupRect$x : popupRect.left;
-      popupRect.y = (_popupRect$y = popupRect.y) !== null && _popupRect$y !== void 0 ? _popupRect$y : popupRect.top;
-      var _doc$documentElement = doc.documentElement,
-        clientWidth = _doc$documentElement.clientWidth,
-        clientHeight = _doc$documentElement.clientHeight,
-        scrollWidth = _doc$documentElement.scrollWidth,
-        scrollHeight = _doc$documentElement.scrollHeight,
-        scrollTop = _doc$documentElement.scrollTop,
-        scrollLeft = _doc$documentElement.scrollLeft;
-      var popupHeight = popupRect.height;
-      var popupWidth = popupRect.width;
-      var targetHeight = targetRect.height;
-      var targetWidth = targetRect.width;
+      const popupRect = popupElement.getBoundingClientRect();
+      popupRect.x = popupRect.x ?? popupRect.left;
+      popupRect.y = popupRect.y ?? popupRect.top;
+      const {
+        clientWidth,
+        clientHeight,
+        scrollWidth,
+        scrollHeight,
+        scrollTop,
+        scrollLeft
+      } = doc.documentElement;
+      const popupHeight = popupRect.height;
+      const popupWidth = popupRect.width;
+      const targetHeight = targetRect.height;
+      const targetWidth = targetRect.width;
 
       // Get bounding of visible area
-      var visibleRegion = {
+      const visibleRegion = {
         left: 0,
         top: 0,
         right: clientWidth,
         bottom: clientHeight
       };
-      var scrollRegion = {
+      const scrollRegion = {
         left: -scrollLeft,
         top: -scrollTop,
         right: scrollWidth - scrollLeft,
         bottom: scrollHeight - scrollTop
       };
-      var htmlRegion = placementInfo.htmlRegion;
-      var VISIBLE = 'visible';
-      var VISIBLE_FIRST = 'visibleFirst';
+      let {
+        htmlRegion
+      } = placementInfo;
+      const VISIBLE = 'visible';
+      const VISIBLE_FIRST = 'visibleFirst';
       if (htmlRegion !== 'scroll' && htmlRegion !== VISIBLE_FIRST) {
         htmlRegion = VISIBLE;
       }
-      var isVisibleFirst = htmlRegion === VISIBLE_FIRST;
-      var scrollRegionArea = (0, _util.getVisibleArea)(scrollRegion, scrollerList);
-      var visibleRegionArea = (0, _util.getVisibleArea)(visibleRegion, scrollerList);
-      var visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
+      const isVisibleFirst = htmlRegion === VISIBLE_FIRST;
+      const scrollRegionArea = (0, _util.getVisibleArea)(scrollRegion, scrollerList);
+      const visibleRegionArea = (0, _util.getVisibleArea)(visibleRegion, scrollerList);
+      const visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
 
       // When set to `visibleFirst`,
       // the check `adjust` logic will use `visibleRegion` for check first.
-      var adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
+      const adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
 
       // Record right & bottom align data
       popupElement.style.left = 'auto';
       popupElement.style.top = 'auto';
       popupElement.style.right = '0';
       popupElement.style.bottom = '0';
-      var popupMirrorRect = popupElement.getBoundingClientRect();
+      const popupMirrorRect = popupElement.getBoundingClientRect();
 
       // Reset back
       popupElement.style.left = originLeft;
@@ -224,78 +220,74 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       popupElement.style.right = originRight;
       popupElement.style.bottom = originBottom;
       popupElement.style.overflow = originOverflow;
-      (_popupElement$parentE2 = popupElement.parentElement) === null || _popupElement$parentE2 === void 0 || _popupElement$parentE2.removeChild(placeholderElement);
+      popupElement.parentElement?.removeChild(placeholderElement);
 
       // Calculate scale
-      var _scaleX = (0, _util.toNum)(Math.round(popupWidth / parseFloat(width) * 1000) / 1000);
-      var _scaleY = (0, _util.toNum)(Math.round(popupHeight / parseFloat(height) * 1000) / 1000);
+      const scaleX = (0, _util.toNum)(Math.round(popupWidth / parseFloat(width) * 1000) / 1000);
+      const scaleY = (0, _util.toNum)(Math.round(popupHeight / parseFloat(height) * 1000) / 1000);
 
       // No need to align since it's not visible in view
-      if (_scaleX === 0 || _scaleY === 0 || (0, _findDOMNode.isDOM)(target) && !(0, _isVisible.default)(target)) {
+      if (scaleX === 0 || scaleY === 0 || (0, _findDOMNode.isDOM)(target) && !(0, _isVisible.default)(target)) {
         return;
       }
 
       // Offset
-      var offset = placementInfo.offset,
-        targetOffset = placementInfo.targetOffset;
-      var _getNumberOffset = getNumberOffset(popupRect, offset),
-        _getNumberOffset2 = (0, _slicedToArray2.default)(_getNumberOffset, 2),
-        popupOffsetX = _getNumberOffset2[0],
-        popupOffsetY = _getNumberOffset2[1];
-      var _getNumberOffset3 = getNumberOffset(targetRect, targetOffset),
-        _getNumberOffset4 = (0, _slicedToArray2.default)(_getNumberOffset3, 2),
-        targetOffsetX = _getNumberOffset4[0],
-        targetOffsetY = _getNumberOffset4[1];
+      const {
+        offset,
+        targetOffset
+      } = placementInfo;
+      let [popupOffsetX, popupOffsetY] = getNumberOffset(popupRect, offset);
+      const [targetOffsetX, targetOffsetY] = getNumberOffset(targetRect, targetOffset);
       targetRect.x -= targetOffsetX;
       targetRect.y -= targetOffsetY;
 
       // Points
-      var _ref3 = placementInfo.points || [],
-        _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-        popupPoint = _ref4[0],
-        targetPoint = _ref4[1];
-      var targetPoints = splitPoints(targetPoint);
-      var popupPoints = splitPoints(popupPoint);
-      var targetAlignPoint = getAlignPoint(targetRect, targetPoints);
-      var popupAlignPoint = getAlignPoint(popupRect, popupPoints);
+      const [popupPoint, targetPoint] = placementInfo.points || [];
+      const targetPoints = splitPoints(targetPoint);
+      const popupPoints = splitPoints(popupPoint);
+      const targetAlignPoint = getAlignPoint(targetRect, targetPoints);
+      const popupAlignPoint = getAlignPoint(popupRect, popupPoints);
 
       // Real align info may not same as origin one
-      var nextAlignInfo = (0, _objectSpread2.default)({}, placementInfo);
+      const nextAlignInfo = {
+        ...placementInfo
+      };
 
       // Next Offset
-      var nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
-      var nextOffsetY = targetAlignPoint.y - popupAlignPoint.y + popupOffsetY;
+      let nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
+      let nextOffsetY = targetAlignPoint.y - popupAlignPoint.y + popupOffsetY;
 
       // ============== Intersection ===============
       // Get area by position. Used for check if flip area is better
-      function getIntersectionVisibleArea(offsetX, offsetY) {
-        var area = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : visibleArea;
-        var l = popupRect.x + offsetX;
-        var t = popupRect.y + offsetY;
-        var r = l + popupWidth;
-        var b = t + popupHeight;
-        var visibleL = Math.max(l, area.left);
-        var visibleT = Math.max(t, area.top);
-        var visibleR = Math.min(r, area.right);
-        var visibleB = Math.min(b, area.bottom);
+      function getIntersectionVisibleArea(offsetX, offsetY, area = visibleArea) {
+        const l = popupRect.x + offsetX;
+        const t = popupRect.y + offsetY;
+        const r = l + popupWidth;
+        const b = t + popupHeight;
+        const visibleL = Math.max(l, area.left);
+        const visibleT = Math.max(t, area.top);
+        const visibleR = Math.min(r, area.right);
+        const visibleB = Math.min(b, area.bottom);
         return Math.max(0, (visibleR - visibleL) * (visibleB - visibleT));
       }
-      var originIntersectionVisibleArea = getIntersectionVisibleArea(nextOffsetX, nextOffsetY);
+      const originIntersectionVisibleArea = getIntersectionVisibleArea(nextOffsetX, nextOffsetY);
 
       // As `visibleFirst`, we prepare this for check
-      var originIntersectionRecommendArea = getIntersectionVisibleArea(nextOffsetX, nextOffsetY, visibleRegionArea);
+      const originIntersectionRecommendArea = getIntersectionVisibleArea(nextOffsetX, nextOffsetY, visibleRegionArea);
 
       // ========================== Overflow ===========================
-      var targetAlignPointTL = getAlignPoint(targetRect, ['t', 'l']);
-      var popupAlignPointTL = getAlignPoint(popupRect, ['t', 'l']);
-      var targetAlignPointBR = getAlignPoint(targetRect, ['b', 'r']);
-      var popupAlignPointBR = getAlignPoint(popupRect, ['b', 'r']);
-      var overflow = placementInfo.overflow || {};
-      var adjustX = overflow.adjustX,
-        adjustY = overflow.adjustY,
-        shiftX = overflow.shiftX,
-        shiftY = overflow.shiftY;
-      var supportAdjust = function supportAdjust(val) {
+      const targetAlignPointTL = getAlignPoint(targetRect, ['t', 'l']);
+      const popupAlignPointTL = getAlignPoint(popupRect, ['t', 'l']);
+      const targetAlignPointBR = getAlignPoint(targetRect, ['b', 'r']);
+      const popupAlignPointBR = getAlignPoint(popupRect, ['b', 'r']);
+      const overflow = placementInfo.overflow || {};
+      const {
+        adjustX,
+        adjustY,
+        shiftX,
+        shiftY
+      } = overflow;
+      const supportAdjust = val => {
         if (typeof val === 'boolean') {
           return val;
         }
@@ -303,10 +295,10 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       };
 
       // Prepare position
-      var nextPopupY;
-      var nextPopupBottom;
-      var nextPopupX;
-      var nextPopupRight;
+      let nextPopupY;
+      let nextPopupBottom;
+      let nextPopupX;
+      let nextPopupRight;
       function syncNextPopupPosition() {
         nextPopupY = popupRect.y + nextOffsetY;
         nextPopupBottom = nextPopupY + popupHeight;
@@ -316,19 +308,19 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       syncNextPopupPosition();
 
       // >>>>>>>>>> Top & Bottom
-      var needAdjustY = supportAdjust(adjustY);
-      var sameTB = popupPoints[0] === targetPoints[0];
+      const needAdjustY = supportAdjust(adjustY);
+      const sameTB = popupPoints[0] === targetPoints[0];
 
       // Bottom to Top
       if (needAdjustY && popupPoints[0] === 't' && (nextPopupBottom > adjustCheckVisibleArea.bottom || prevFlipRef.current.bt)) {
-        var tmpNextOffsetY = nextOffsetY;
+        let tmpNextOffsetY = nextOffsetY;
         if (sameTB) {
           tmpNextOffsetY -= popupHeight - targetHeight;
         } else {
           tmpNextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
         }
-        var newVisibleArea = getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY);
-        var newVisibleRecommendArea = getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY, visibleRegionArea);
+        const newVisibleArea = getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY);
+        const newVisibleRecommendArea = getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY, visibleRegionArea);
         if (
         // Of course use larger one
         newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst ||
@@ -345,21 +337,21 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 
       // Top to Bottom
       if (needAdjustY && popupPoints[0] === 'b' && (nextPopupY < adjustCheckVisibleArea.top || prevFlipRef.current.tb)) {
-        var _tmpNextOffsetY = nextOffsetY;
+        let tmpNextOffsetY = nextOffsetY;
         if (sameTB) {
-          _tmpNextOffsetY += popupHeight - targetHeight;
+          tmpNextOffsetY += popupHeight - targetHeight;
         } else {
-          _tmpNextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
+          tmpNextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
         }
-        var _newVisibleArea = getIntersectionVisibleArea(nextOffsetX, _tmpNextOffsetY);
-        var _newVisibleRecommendArea = getIntersectionVisibleArea(nextOffsetX, _tmpNextOffsetY, visibleRegionArea);
+        const newVisibleArea = getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY);
+        const newVisibleRecommendArea = getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY, visibleRegionArea);
         if (
         // Of course use larger one
-        _newVisibleArea > originIntersectionVisibleArea || _newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst ||
+        newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst ||
         // Choose recommend one
-        _newVisibleRecommendArea >= originIntersectionRecommendArea)) {
+        newVisibleRecommendArea >= originIntersectionRecommendArea)) {
           prevFlipRef.current.tb = true;
-          nextOffsetY = _tmpNextOffsetY;
+          nextOffsetY = tmpNextOffsetY;
           popupOffsetY = -popupOffsetY;
           nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
         } else {
@@ -368,26 +360,26 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       }
 
       // >>>>>>>>>> Left & Right
-      var needAdjustX = supportAdjust(adjustX);
+      const needAdjustX = supportAdjust(adjustX);
 
       // >>>>> Flip
-      var sameLR = popupPoints[1] === targetPoints[1];
+      const sameLR = popupPoints[1] === targetPoints[1];
 
       // Right to Left
       if (needAdjustX && popupPoints[1] === 'l' && (nextPopupRight > adjustCheckVisibleArea.right || prevFlipRef.current.rl)) {
-        var tmpNextOffsetX = nextOffsetX;
+        let tmpNextOffsetX = nextOffsetX;
         if (sameLR) {
           tmpNextOffsetX -= popupWidth - targetWidth;
         } else {
           tmpNextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
         }
-        var _newVisibleArea2 = getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY);
-        var _newVisibleRecommendArea2 = getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY, visibleRegionArea);
+        const newVisibleArea = getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY);
+        const newVisibleRecommendArea = getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY, visibleRegionArea);
         if (
         // Of course use larger one
-        _newVisibleArea2 > originIntersectionVisibleArea || _newVisibleArea2 === originIntersectionVisibleArea && (!isVisibleFirst ||
+        newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst ||
         // Choose recommend one
-        _newVisibleRecommendArea2 >= originIntersectionRecommendArea)) {
+        newVisibleRecommendArea >= originIntersectionRecommendArea)) {
           prevFlipRef.current.rl = true;
           nextOffsetX = tmpNextOffsetX;
           popupOffsetX = -popupOffsetX;
@@ -399,21 +391,21 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 
       // Left to Right
       if (needAdjustX && popupPoints[1] === 'r' && (nextPopupX < adjustCheckVisibleArea.left || prevFlipRef.current.lr)) {
-        var _tmpNextOffsetX = nextOffsetX;
+        let tmpNextOffsetX = nextOffsetX;
         if (sameLR) {
-          _tmpNextOffsetX += popupWidth - targetWidth;
+          tmpNextOffsetX += popupWidth - targetWidth;
         } else {
-          _tmpNextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
+          tmpNextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
         }
-        var _newVisibleArea3 = getIntersectionVisibleArea(_tmpNextOffsetX, nextOffsetY);
-        var _newVisibleRecommendArea3 = getIntersectionVisibleArea(_tmpNextOffsetX, nextOffsetY, visibleRegionArea);
+        const newVisibleArea = getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY);
+        const newVisibleRecommendArea = getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY, visibleRegionArea);
         if (
         // Of course use larger one
-        _newVisibleArea3 > originIntersectionVisibleArea || _newVisibleArea3 === originIntersectionVisibleArea && (!isVisibleFirst ||
+        newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst ||
         // Choose recommend one
-        _newVisibleRecommendArea3 >= originIntersectionRecommendArea)) {
+        newVisibleRecommendArea >= originIntersectionRecommendArea)) {
           prevFlipRef.current.lr = true;
-          nextOffsetX = _tmpNextOffsetX;
+          nextOffsetX = tmpNextOffsetX;
           popupOffsetX = -popupOffsetX;
           nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
         } else {
@@ -423,7 +415,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 
       // ============================ Shift ============================
       syncNextPopupPosition();
-      var numShiftX = shiftX === true ? 0 : shiftX;
+      const numShiftX = shiftX === true ? 0 : shiftX;
       if (typeof numShiftX === 'number') {
         // Left
         if (nextPopupX < visibleRegionArea.left) {
@@ -441,7 +433,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           }
         }
       }
-      var numShiftY = shiftY === true ? 0 : shiftY;
+      const numShiftY = shiftY === true ? 0 : shiftY;
       if (typeof numShiftY === 'number') {
         // Top
         if (nextPopupY < visibleRegionArea.top) {
@@ -465,56 +457,56 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 
       // ============================ Arrow ============================
       // Arrow center align
-      var popupLeft = popupRect.x + nextOffsetX;
-      var popupRight = popupLeft + popupWidth;
-      var popupTop = popupRect.y + nextOffsetY;
-      var popupBottom = popupTop + popupHeight;
-      var targetLeft = targetRect.x;
-      var targetRight = targetLeft + targetWidth;
-      var targetTop = targetRect.y;
-      var targetBottom = targetTop + targetHeight;
-      var maxLeft = Math.max(popupLeft, targetLeft);
-      var minRight = Math.min(popupRight, targetRight);
-      var xCenter = (maxLeft + minRight) / 2;
-      var nextArrowX = xCenter - popupLeft;
-      var maxTop = Math.max(popupTop, targetTop);
-      var minBottom = Math.min(popupBottom, targetBottom);
-      var yCenter = (maxTop + minBottom) / 2;
-      var nextArrowY = yCenter - popupTop;
-      onPopupAlign === null || onPopupAlign === void 0 || onPopupAlign(popupEle, nextAlignInfo);
+      const popupLeft = popupRect.x + nextOffsetX;
+      const popupRight = popupLeft + popupWidth;
+      const popupTop = popupRect.y + nextOffsetY;
+      const popupBottom = popupTop + popupHeight;
+      const targetLeft = targetRect.x;
+      const targetRight = targetLeft + targetWidth;
+      const targetTop = targetRect.y;
+      const targetBottom = targetTop + targetHeight;
+      const maxLeft = Math.max(popupLeft, targetLeft);
+      const minRight = Math.min(popupRight, targetRight);
+      const xCenter = (maxLeft + minRight) / 2;
+      const nextArrowX = xCenter - popupLeft;
+      const maxTop = Math.max(popupTop, targetTop);
+      const minBottom = Math.min(popupBottom, targetBottom);
+      const yCenter = (maxTop + minBottom) / 2;
+      const nextArrowY = yCenter - popupTop;
+      onPopupAlign?.(popupEle, nextAlignInfo);
 
       // Additional calculate right & bottom position
-      var offsetX4Right = popupMirrorRect.right - popupRect.x - (nextOffsetX + popupRect.width);
-      var offsetY4Bottom = popupMirrorRect.bottom - popupRect.y - (nextOffsetY + popupRect.height);
-      if (_scaleX === 1) {
+      let offsetX4Right = popupMirrorRect.right - popupRect.x - (nextOffsetX + popupRect.width);
+      let offsetY4Bottom = popupMirrorRect.bottom - popupRect.y - (nextOffsetY + popupRect.height);
+      if (scaleX === 1) {
         nextOffsetX = Math.round(nextOffsetX);
         offsetX4Right = Math.round(offsetX4Right);
       }
-      if (_scaleY === 1) {
+      if (scaleY === 1) {
         nextOffsetY = Math.round(nextOffsetY);
         offsetY4Bottom = Math.round(offsetY4Bottom);
       }
-      var nextOffsetInfo = {
+      const nextOffsetInfo = {
         ready: true,
-        offsetX: nextOffsetX / _scaleX,
-        offsetY: nextOffsetY / _scaleY,
-        offsetR: offsetX4Right / _scaleX,
-        offsetB: offsetY4Bottom / _scaleY,
-        arrowX: nextArrowX / _scaleX,
-        arrowY: nextArrowY / _scaleY,
-        scaleX: _scaleX,
-        scaleY: _scaleY,
+        offsetX: nextOffsetX / scaleX,
+        offsetY: nextOffsetY / scaleY,
+        offsetR: offsetX4Right / scaleX,
+        offsetB: offsetY4Bottom / scaleY,
+        arrowX: nextArrowX / scaleX,
+        arrowY: nextArrowY / scaleY,
+        scaleX,
+        scaleY,
         align: nextAlignInfo
       };
       setOffsetInfo(nextOffsetInfo);
     }
   });
-  var triggerAlign = function triggerAlign() {
+  const triggerAlign = () => {
     alignCountRef.current += 1;
-    var id = alignCountRef.current;
+    const id = alignCountRef.current;
 
     // Merge all align requirement into one frame
-    Promise.resolve().then(function () {
+    Promise.resolve().then(() => {
       if (alignCountRef.current === id) {
         onAlign();
       }
@@ -522,15 +514,14 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
   };
 
   // Reset ready status when placement & open changed
-  var resetReady = function resetReady() {
-    setOffsetInfo(function (ori) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, ori), {}, {
-        ready: false
-      });
-    });
+  const resetReady = () => {
+    setOffsetInfo(ori => ({
+      ...ori,
+      ready: false
+    }));
   };
   (0, _useLayoutEffect.default)(resetReady, [placement]);
-  (0, _useLayoutEffect.default)(function () {
+  (0, _useLayoutEffect.default)(() => {
     if (!open) {
       resetReady();
     }