@rc-component/trigger 1.1.2 → 1.3.0

package/es/hooks/useAlign.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import useEvent from "rc-util/es/hooks/useEvent";
 import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
 import * as React from 'react';
-import { getWin } from "../util";
+import { collectScroller, getWin } from "../util";
 function toNum(num) {
   return Number.isNaN(num) ? 1 : num;
 }
@@ -68,6 +68,14 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
     offsetInfo = _React$useState2[0],
     setOffsetInfo = _React$useState2[1];
   var alignCountRef = React.useRef(0);
+  var scrollerList = React.useMemo(function () {
+    if (!popupEle) {
+      return [];
+    }
+    return collectScroller(popupEle);
+  }, [popupEle]);
+
+  // ========================= Align =========================
   var onAlign = useEvent(function () {
     if (popupEle && target && open) {
       var popupElement = popupEle;
@@ -81,12 +89,23 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       popupElement.style.top = '0';
 
       // Calculate align style, we should consider `transform` case
-      var targetRect = Array.isArray(target) ? {
-        x: target[0],
-        y: target[1],
-        width: 0,
-        height: 0
-      } : target.getBoundingClientRect();
+      var targetRect;
+      if (Array.isArray(target)) {
+        targetRect = {
+          x: target[0],
+          y: target[1],
+          width: 0,
+          height: 0
+        };
+      } else {
+        var rect = target.getBoundingClientRect();
+        targetRect = {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height
+        };
+      }
       var popupRect = popupElement.getBoundingClientRect();
       var _win$getComputedStyle = win.getComputedStyle(popupElement),
         width = _win$getComputedStyle.width,
@@ -97,6 +116,31 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       var popupHeight = popupRect.height;
       var popupWidth = popupRect.width;
 
+      // Get bounding of visible area
+      var visibleArea = {
+        left: 0,
+        top: 0,
+        right: clientWidth,
+        bottom: clientHeight
+      };
+      (scrollerList || []).forEach(function (ele) {
+        var eleRect = ele.getBoundingClientRect();
+        var eleOutHeight = ele.offsetHeight,
+          eleInnerHeight = ele.clientHeight,
+          eleOutWidth = ele.offsetWidth,
+          eleInnerWidth = ele.clientWidth;
+        var scaleX = toNum(Math.round(eleRect.width / eleOutWidth * 1000) / 1000);
+        var scaleY = toNum(Math.round(eleRect.height / eleOutHeight * 1000) / 1000);
+        var scrollWidth = (eleOutWidth - eleInnerWidth) * scaleX;
+        var scrollHeight = (eleOutHeight - eleInnerHeight) * scaleY;
+        var eleRight = eleRect.x + eleRect.width - scrollWidth;
+        var eleBottom = eleRect.y + eleRect.height - scrollHeight;
+        visibleArea.left = Math.max(visibleArea.left, eleRect.left);
+        visibleArea.top = Math.max(visibleArea.top, eleRect.top);
+        visibleArea.right = Math.min(visibleArea.right, eleRight);
+        visibleArea.bottom = Math.min(visibleArea.bottom, eleBottom);
+      });
+
       // Reset back
       popupElement.style.left = originLeft;
       popupElement.style.top = originTop;
@@ -107,10 +151,30 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
 
       // Placement
       var placementInfo = builtinPlacements[placement] || popupAlign || {};
-      var _ref = placementInfo.points || [],
+
+      // Offset
+      var offset = placementInfo.offset,
+        targetOffset = placementInfo.targetOffset;
+      var _ref = offset || [],
         _ref2 = _slicedToArray(_ref, 2),
-        popupPoint = _ref2[0],
-        targetPoint = _ref2[1];
+        _ref2$ = _ref2[0],
+        popupOffsetX = _ref2$ === void 0 ? 0 : _ref2$,
+        _ref2$2 = _ref2[1],
+        popupOffsetY = _ref2$2 === void 0 ? 0 : _ref2$2;
+      var _ref3 = targetOffset || [],
+        _ref4 = _slicedToArray(_ref3, 2),
+        _ref4$ = _ref4[0],
+        targetOffsetX = _ref4$ === void 0 ? 0 : _ref4$,
+        _ref4$2 = _ref4[1],
+        targetOffsetY = _ref4$2 === void 0 ? 0 : _ref4$2;
+      targetRect.x += targetOffsetX;
+      targetRect.y += targetOffsetY;
+
+      // Points
+      var _ref5 = placementInfo.points || [],
+        _ref6 = _slicedToArray(_ref5, 2),
+        popupPoint = _ref6[0],
+        targetPoint = _ref6[1];
       var targetPoints = splitPoints(targetPoint);
       var popupPoints = splitPoints(popupPoint);
       var targetAlignPoint = getAlignPoint(targetRect, targetPoints);
@@ -119,16 +183,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       // Real align info may not same as origin one
       var nextAlignInfo = _objectSpread({}, placementInfo);
 
-      // Offset
-      var offset = placementInfo.offset;
-      var _ref3 = offset || [],
-        _ref4 = _slicedToArray(_ref3, 2),
-        _ref4$ = _ref4[0],
-        popupOffsetX = _ref4$ === void 0 ? 0 : _ref4$,
-        _ref4$2 = _ref4[1],
-        popupOffsetY = _ref4$2 === void 0 ? 0 : _ref4$2;
-
-      // Placement
+      // Next Offset
       var nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
       var nextOffsetY = targetAlignPoint.y - popupAlignPoint.y + popupOffsetY;
 
@@ -149,13 +204,13 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       var needAdjustY = adjustY === true || adjustY >= 0;
 
       // Bottom to Top
-      if (needAdjustY && popupPoints[0] === 't' && nextPopupBottom > clientHeight) {
+      if (needAdjustY && popupPoints[0] === 't' && nextPopupBottom > visibleArea.bottom) {
         nextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
         nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
       }
 
       // Top to Bottom
-      if (needAdjustY && popupPoints[0] === 'b' && nextPopupY < 0) {
+      if (needAdjustY && popupPoints[0] === 'b' && nextPopupY < visibleArea.top) {
         nextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
         nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
       }
@@ -167,13 +222,13 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
 
       // >>>>> Flip
       // Right to Left
-      if (needAdjustX && popupPoints[1] === 'l' && nextPopupRight > clientWidth) {
+      if (needAdjustX && popupPoints[1] === 'l' && nextPopupRight > visibleArea.right) {
         nextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
         nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
       }
 
       // Left to Right
-      if (needAdjustX && popupPoints[1] === 'r' && nextPopupX < 0) {
+      if (needAdjustX && popupPoints[1] === 'r' && nextPopupX < visibleArea.left) {
         nextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
         nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
       }
@@ -182,36 +237,36 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       var numShiftX = shiftX === true ? 0 : shiftX;
       if (typeof numShiftX === 'number') {
         // Left
-        if (nextPopupX < 0) {
-          nextOffsetX -= nextPopupX;
-          if (targetRect.x + targetRect.width < numShiftX) {
-            nextOffsetX += targetRect.x + targetRect.width - numShiftX;
+        if (nextPopupX < visibleArea.left) {
+          nextOffsetX -= nextPopupX - visibleArea.left;
+          if (targetRect.x + targetRect.width < visibleArea.left + numShiftX) {
+            nextOffsetX += targetRect.x - visibleArea.left + targetRect.width - numShiftX;
           }
         }
 
         // Right
-        if (nextPopupRight > clientWidth) {
-          nextOffsetX -= nextPopupRight - clientWidth;
-          if (targetRect.x > clientWidth - numShiftX) {
-            nextOffsetX += targetRect.x - clientWidth + numShiftX;
+        if (nextPopupRight > visibleArea.right) {
+          nextOffsetX -= nextPopupRight - visibleArea.right;
+          if (targetRect.x > visibleArea.right - numShiftX) {
+            nextOffsetX += targetRect.x - visibleArea.right + numShiftX;
           }
         }
       }
       var numShiftY = shiftY === true ? 0 : shiftY;
       if (typeof numShiftY === 'number') {
         // Top
-        if (nextPopupY < 0) {
-          nextOffsetY -= nextPopupY;
-          if (targetRect.y + targetRect.height < numShiftY) {
-            nextOffsetY += targetRect.y + targetRect.height - numShiftY;
+        if (nextPopupY < visibleArea.top) {
+          nextOffsetY -= nextPopupY - visibleArea.top;
+          if (targetRect.y + targetRect.height < visibleArea.top + numShiftY) {
+            nextOffsetY += targetRect.y - visibleArea.top + targetRect.height - numShiftY;
           }
         }
 
         // Bottom
-        if (nextPopupBottom > clientHeight) {
-          nextOffsetY -= nextPopupBottom - clientHeight;
-          if (targetRect.y > clientHeight - numShiftY) {
-            nextOffsetY += targetRect.y - clientHeight + numShiftY;
+        if (nextPopupBottom > visibleArea.bottom) {
+          nextOffsetY -= nextPopupBottom - visibleArea.bottom;
+          if (targetRect.y > visibleArea.bottom - numShiftY) {
+            nextOffsetY += targetRect.y - visibleArea.bottom + numShiftY;
           }
         }
       }

package/es/hooks/useWatch.js

@@ -1,21 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
-import { getWin } from "../util";
-function collectScroller(ele) {
-  var scrollerList = [];
-  var current = ele === null || ele === void 0 ? void 0 : ele.parentElement;
-  var scrollStyle = ['hidden', 'scroll', 'auto'];
-  while (current) {
-    var _getWin$getComputedSt = getWin(current).getComputedStyle(current),
-      overflowX = _getWin$getComputedSt.overflowX,
-      overflowY = _getWin$getComputedSt.overflowY;
-    if (scrollStyle.includes(overflowX) || scrollStyle.includes(overflowY)) {
-      scrollerList.push(current);
-    }
-    current = current.parentElement;
-  }
-  return scrollerList;
-}
+import { collectScroller, getWin } from "../util";
 export default function useWatch(open, target, popup, onAlign) {
   useLayoutEffect(function () {
     if (open && target && popup) {

package/es/interface.d.ts

@@ -20,6 +20,7 @@ export interface AlignType {
      * offset target node by offset[0] in x and offset[1] in y.
      * If targetOffset contains percentage string value, it is relative to targetNode region.
      */
+    targetOffset?: number[];
     /**
      * If adjustX field is true, will adjust source node in x direction if source node is invisible.
      * If adjustY field is true, will adjust source node in y direction if source node is invisible.

package/es/util.d.ts

@@ -1,7 +1,7 @@
 import type { CSSMotionProps } from 'rc-motion';
 import type { AlignType, AnimationType, BuildInPlacements, TransitionNameType } from './interface';
-export declare function getAlignFromPlacement(builtinPlacements: BuildInPlacements, placementStr: string, align: AlignType): AlignType;
 export declare function getAlignPopupClassName(builtinPlacements: BuildInPlacements, prefixCls: string, align: AlignType, isAlignPoint: boolean): string;
 /** @deprecated We should not use this if we can refactor all deps */
 export declare function getMotion(prefixCls: string, motion: CSSMotionProps, animation: AnimationType, transitionName: TransitionNameType): CSSMotionProps;
 export declare function getWin(ele: HTMLElement): Window & typeof globalThis;
+export declare function collectScroller(ele: HTMLElement): HTMLElement[];

package/es/util.js

@@ -1,4 +1,3 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 function isPointsEq() {
   var a1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var a2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -8,10 +7,6 @@ function isPointsEq() {
   }
   return a1[0] === a2[0] && a1[1] === a2[1];
 }
-export function getAlignFromPlacement(builtinPlacements, placementStr, align) {
-  var baseAlign = builtinPlacements[placementStr] || {};
-  return _objectSpread(_objectSpread({}, baseAlign), align);
-}
 export function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
   var points = align.points;
   var placements = Object.keys(builtinPlacements);
@@ -44,4 +39,19 @@ export function getMotion(prefixCls, motion, animation, transitionName) {
 }
 export function getWin(ele) {
   return ele.ownerDocument.defaultView;
+}
+export function collectScroller(ele) {
+  var scrollerList = [];
+  var current = ele === null || ele === void 0 ? void 0 : ele.parentElement;
+  var scrollStyle = ['hidden', 'scroll', 'auto'];
+  while (current) {
+    var _getWin$getComputedSt = getWin(current).getComputedStyle(current),
+      overflowX = _getWin$getComputedSt.overflowX,
+      overflowY = _getWin$getComputedSt.overflowY;
+    if (scrollStyle.includes(overflowX) || scrollStyle.includes(overflowY)) {
+      scrollerList.push(current);
+    }
+    current = current.parentElement;
+  }
+  return scrollerList;
 }

package/lib/hooks/useAlign.js

@@ -76,6 +76,14 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
     offsetInfo = _React$useState2[0],
     setOffsetInfo = _React$useState2[1];
   var alignCountRef = React.useRef(0);
+  var scrollerList = React.useMemo(function () {
+    if (!popupEle) {
+      return [];
+    }
+    return (0, _util.collectScroller)(popupEle);
+  }, [popupEle]);
+
+  // ========================= Align =========================
   var onAlign = (0, _useEvent.default)(function () {
     if (popupEle && target && open) {
       var popupElement = popupEle;
@@ -89,12 +97,23 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       popupElement.style.top = '0';
 
       // Calculate align style, we should consider `transform` case
-      var targetRect = Array.isArray(target) ? {
-        x: target[0],
-        y: target[1],
-        width: 0,
-        height: 0
-      } : target.getBoundingClientRect();
+      var targetRect;
+      if (Array.isArray(target)) {
+        targetRect = {
+          x: target[0],
+          y: target[1],
+          width: 0,
+          height: 0
+        };
+      } else {
+        var rect = target.getBoundingClientRect();
+        targetRect = {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height
+        };
+      }
       var popupRect = popupElement.getBoundingClientRect();
       var _win$getComputedStyle = win.getComputedStyle(popupElement),
         width = _win$getComputedStyle.width,
@@ -105,6 +124,31 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       var popupHeight = popupRect.height;
       var popupWidth = popupRect.width;
 
+      // Get bounding of visible area
+      var visibleArea = {
+        left: 0,
+        top: 0,
+        right: clientWidth,
+        bottom: clientHeight
+      };
+      (scrollerList || []).forEach(function (ele) {
+        var eleRect = ele.getBoundingClientRect();
+        var eleOutHeight = ele.offsetHeight,
+          eleInnerHeight = ele.clientHeight,
+          eleOutWidth = ele.offsetWidth,
+          eleInnerWidth = ele.clientWidth;
+        var scaleX = toNum(Math.round(eleRect.width / eleOutWidth * 1000) / 1000);
+        var scaleY = toNum(Math.round(eleRect.height / eleOutHeight * 1000) / 1000);
+        var scrollWidth = (eleOutWidth - eleInnerWidth) * scaleX;
+        var scrollHeight = (eleOutHeight - eleInnerHeight) * scaleY;
+        var eleRight = eleRect.x + eleRect.width - scrollWidth;
+        var eleBottom = eleRect.y + eleRect.height - scrollHeight;
+        visibleArea.left = Math.max(visibleArea.left, eleRect.left);
+        visibleArea.top = Math.max(visibleArea.top, eleRect.top);
+        visibleArea.right = Math.min(visibleArea.right, eleRight);
+        visibleArea.bottom = Math.min(visibleArea.bottom, eleBottom);
+      });
+
       // Reset back
       popupElement.style.left = originLeft;
       popupElement.style.top = originTop;
@@ -115,10 +159,30 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 
       // Placement
       var placementInfo = builtinPlacements[placement] || popupAlign || {};
-      var _ref = placementInfo.points || [],
+
+      // Offset
+      var offset = placementInfo.offset,
+        targetOffset = placementInfo.targetOffset;
+      var _ref = offset || [],
         _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-        popupPoint = _ref2[0],
-        targetPoint = _ref2[1];
+        _ref2$ = _ref2[0],
+        popupOffsetX = _ref2$ === void 0 ? 0 : _ref2$,
+        _ref2$2 = _ref2[1],
+        popupOffsetY = _ref2$2 === void 0 ? 0 : _ref2$2;
+      var _ref3 = targetOffset || [],
+        _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+        _ref4$ = _ref4[0],
+        targetOffsetX = _ref4$ === void 0 ? 0 : _ref4$,
+        _ref4$2 = _ref4[1],
+        targetOffsetY = _ref4$2 === void 0 ? 0 : _ref4$2;
+      targetRect.x += targetOffsetX;
+      targetRect.y += targetOffsetY;
+
+      // Points
+      var _ref5 = placementInfo.points || [],
+        _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
+        popupPoint = _ref6[0],
+        targetPoint = _ref6[1];
       var targetPoints = splitPoints(targetPoint);
       var popupPoints = splitPoints(popupPoint);
       var targetAlignPoint = getAlignPoint(targetRect, targetPoints);
@@ -127,16 +191,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       // Real align info may not same as origin one
       var nextAlignInfo = (0, _objectSpread2.default)({}, placementInfo);
 
-      // Offset
-      var offset = placementInfo.offset;
-      var _ref3 = offset || [],
-        _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-        _ref4$ = _ref4[0],
-        popupOffsetX = _ref4$ === void 0 ? 0 : _ref4$,
-        _ref4$2 = _ref4[1],
-        popupOffsetY = _ref4$2 === void 0 ? 0 : _ref4$2;
-
-      // Placement
+      // Next Offset
       var nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
       var nextOffsetY = targetAlignPoint.y - popupAlignPoint.y + popupOffsetY;
 
@@ -157,13 +212,13 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       var needAdjustY = adjustY === true || adjustY >= 0;
 
       // Bottom to Top
-      if (needAdjustY && popupPoints[0] === 't' && nextPopupBottom > clientHeight) {
+      if (needAdjustY && popupPoints[0] === 't' && nextPopupBottom > visibleArea.bottom) {
         nextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
         nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
       }
 
       // Top to Bottom
-      if (needAdjustY && popupPoints[0] === 'b' && nextPopupY < 0) {
+      if (needAdjustY && popupPoints[0] === 'b' && nextPopupY < visibleArea.top) {
         nextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
         nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
       }
@@ -175,13 +230,13 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 
       // >>>>> Flip
       // Right to Left
-      if (needAdjustX && popupPoints[1] === 'l' && nextPopupRight > clientWidth) {
+      if (needAdjustX && popupPoints[1] === 'l' && nextPopupRight > visibleArea.right) {
         nextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
         nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
       }
 
       // Left to Right
-      if (needAdjustX && popupPoints[1] === 'r' && nextPopupX < 0) {
+      if (needAdjustX && popupPoints[1] === 'r' && nextPopupX < visibleArea.left) {
         nextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
         nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
       }
@@ -190,36 +245,36 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       var numShiftX = shiftX === true ? 0 : shiftX;
       if (typeof numShiftX === 'number') {
         // Left
-        if (nextPopupX < 0) {
-          nextOffsetX -= nextPopupX;
-          if (targetRect.x + targetRect.width < numShiftX) {
-            nextOffsetX += targetRect.x + targetRect.width - numShiftX;
+        if (nextPopupX < visibleArea.left) {
+          nextOffsetX -= nextPopupX - visibleArea.left;
+          if (targetRect.x + targetRect.width < visibleArea.left + numShiftX) {
+            nextOffsetX += targetRect.x - visibleArea.left + targetRect.width - numShiftX;
           }
         }
 
         // Right
-        if (nextPopupRight > clientWidth) {
-          nextOffsetX -= nextPopupRight - clientWidth;
-          if (targetRect.x > clientWidth - numShiftX) {
-            nextOffsetX += targetRect.x - clientWidth + numShiftX;
+        if (nextPopupRight > visibleArea.right) {
+          nextOffsetX -= nextPopupRight - visibleArea.right;
+          if (targetRect.x > visibleArea.right - numShiftX) {
+            nextOffsetX += targetRect.x - visibleArea.right + numShiftX;
           }
         }
       }
       var numShiftY = shiftY === true ? 0 : shiftY;
       if (typeof numShiftY === 'number') {
         // Top
-        if (nextPopupY < 0) {
-          nextOffsetY -= nextPopupY;
-          if (targetRect.y + targetRect.height < numShiftY) {
-            nextOffsetY += targetRect.y + targetRect.height - numShiftY;
+        if (nextPopupY < visibleArea.top) {
+          nextOffsetY -= nextPopupY - visibleArea.top;
+          if (targetRect.y + targetRect.height < visibleArea.top + numShiftY) {
+            nextOffsetY += targetRect.y - visibleArea.top + targetRect.height - numShiftY;
           }
         }
 
         // Bottom
-        if (nextPopupBottom > clientHeight) {
-          nextOffsetY -= nextPopupBottom - clientHeight;
-          if (targetRect.y > clientHeight - numShiftY) {
-            nextOffsetY += targetRect.y - clientHeight + numShiftY;
+        if (nextPopupBottom > visibleArea.bottom) {
+          nextOffsetY -= nextPopupBottom - visibleArea.bottom;
+          if (targetRect.y > visibleArea.bottom - numShiftY) {
+            nextOffsetY += targetRect.y - visibleArea.bottom + numShiftY;
           }
         }
       }

package/lib/hooks/useWatch.js

@@ -8,28 +8,13 @@ exports.default = useWatch;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
 var _util = require("../util");
-function collectScroller(ele) {
-  var scrollerList = [];
-  var current = ele === null || ele === void 0 ? void 0 : ele.parentElement;
-  var scrollStyle = ['hidden', 'scroll', 'auto'];
-  while (current) {
-    var _getWin$getComputedSt = (0, _util.getWin)(current).getComputedStyle(current),
-      overflowX = _getWin$getComputedSt.overflowX,
-      overflowY = _getWin$getComputedSt.overflowY;
-    if (scrollStyle.includes(overflowX) || scrollStyle.includes(overflowY)) {
-      scrollerList.push(current);
-    }
-    current = current.parentElement;
-  }
-  return scrollerList;
-}
 function useWatch(open, target, popup, onAlign) {
   (0, _useLayoutEffect.default)(function () {
     if (open && target && popup) {
       var targetElement = target;
       var popupElement = popup;
-      var targetScrollList = collectScroller(targetElement);
-      var popupScrollList = collectScroller(popupElement);
+      var targetScrollList = (0, _util.collectScroller)(targetElement);
+      var popupScrollList = (0, _util.collectScroller)(popupElement);
       var win = (0, _util.getWin)(popupElement);
       var mergedList = new Set([win].concat((0, _toConsumableArray2.default)(targetScrollList), (0, _toConsumableArray2.default)(popupScrollList)));
       function notifyScroll() {

package/lib/interface.d.ts

@@ -20,6 +20,7 @@ export interface AlignType {
      * offset target node by offset[0] in x and offset[1] in y.
      * If targetOffset contains percentage string value, it is relative to targetNode region.
      */
+    targetOffset?: number[];
     /**
      * If adjustX field is true, will adjust source node in x direction if source node is invisible.
      * If adjustY field is true, will adjust source node in y direction if source node is invisible.

package/lib/util.d.ts

@@ -1,7 +1,7 @@
 import type { CSSMotionProps } from 'rc-motion';
 import type { AlignType, AnimationType, BuildInPlacements, TransitionNameType } from './interface';
-export declare function getAlignFromPlacement(builtinPlacements: BuildInPlacements, placementStr: string, align: AlignType): AlignType;
 export declare function getAlignPopupClassName(builtinPlacements: BuildInPlacements, prefixCls: string, align: AlignType, isAlignPoint: boolean): string;
 /** @deprecated We should not use this if we can refactor all deps */
 export declare function getMotion(prefixCls: string, motion: CSSMotionProps, animation: AnimationType, transitionName: TransitionNameType): CSSMotionProps;
 export declare function getWin(ele: HTMLElement): Window & typeof globalThis;
+export declare function collectScroller(ele: HTMLElement): HTMLElement[];

package/lib/util.js

@@ -1,14 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getAlignFromPlacement = getAlignFromPlacement;
+exports.collectScroller = collectScroller;
 exports.getAlignPopupClassName = getAlignPopupClassName;
 exports.getMotion = getMotion;
 exports.getWin = getWin;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 function isPointsEq() {
   var a1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var a2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -18,10 +16,6 @@ function isPointsEq() {
   }
   return a1[0] === a2[0] && a1[1] === a2[1];
 }
-function getAlignFromPlacement(builtinPlacements, placementStr, align) {
-  var baseAlign = builtinPlacements[placementStr] || {};
-  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, baseAlign), align);
-}
 function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
   var points = align.points;
   var placements = Object.keys(builtinPlacements);
@@ -54,4 +48,19 @@ function getMotion(prefixCls, motion, animation, transitionName) {
 }
 function getWin(ele) {
   return ele.ownerDocument.defaultView;
+}
+function collectScroller(ele) {
+  var scrollerList = [];
+  var current = ele === null || ele === void 0 ? void 0 : ele.parentElement;
+  var scrollStyle = ['hidden', 'scroll', 'auto'];
+  while (current) {
+    var _getWin$getComputedSt = getWin(current).getComputedStyle(current),
+      overflowX = _getWin$getComputedSt.overflowX,
+      overflowY = _getWin$getComputedSt.overflowY;
+    if (scrollStyle.includes(overflowX) || scrollStyle.includes(overflowY)) {
+      scrollerList.push(current);
+    }
+    current = current.parentElement;
+  }
+  return scrollerList;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/trigger",
-  "version": "1.1.2",
+  "version": "1.3.0",
   "description": "base abstract trigger component for react",
   "engines": {
     "node": ">=8.x"
@@ -65,7 +65,7 @@
     "classnames": "^2.3.2",
     "rc-align": "^4.0.0",
     "rc-motion": "^2.0.0",
-    "rc-resize-observer": "^1.3.0",
+    "rc-resize-observer": "^1.3.1",
     "rc-util": "^5.27.1"
   },
   "peerDependencies": {