@rc-component/trigger 1.11.0 → 1.12.1

package/assets/index.css

@@ -31,34 +31,34 @@
   animation-play-state: running;
 }
 .rc-trigger-popup-arrow {
+  z-index: 1;
   width: 0px;
   height: 0px;
   background: #000;
   border-radius: 100vw;
   box-shadow: 0 0 0 3px black;
-  z-index: 1;
 }
 @keyframes rcTriggerZoomIn {
   0% {
     transform: scale(0, 0);
-    transform-origin: 50% 50%;
+    transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
     opacity: 0;
   }
   100% {
     transform: scale(1, 1);
-    transform-origin: 50% 50%;
+    transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
     opacity: 1;
   }
 }
 @keyframes rcTriggerZoomOut {
   0% {
     transform: scale(1, 1);
-    transform-origin: 50% 50%;
+    transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
     opacity: 1;
   }
   100% {
     transform: scale(0, 0);
-    transform-origin: 50% 50%;
+    transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
     opacity: 0;
   }
 }

package/assets/index.less

@@ -41,35 +41,35 @@
   }
 
   &-arrow {
+    z-index: 1;
     width: 0px;
     height: 0px;
     background: #000;
     border-radius: 100vw;
     box-shadow: 0 0 0 3px black;
-    z-index: 1;
   }
 
   @keyframes rcTriggerZoomIn {
     0% {
       transform: scale(0, 0);
-      transform-origin: 50% 50%;
+      transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
       opacity: 0;
     }
     100% {
       transform: scale(1, 1);
-      transform-origin: 50% 50%;
+      transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
       opacity: 1;
     }
   }
   @keyframes rcTriggerZoomOut {
     0% {
       transform: scale(1, 1);
-      transform-origin: 50% 50%;
+      transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
       opacity: 1;
     }
     100% {
       transform: scale(0, 0);
-      transform-origin: 50% 50%;
+      transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
       opacity: 0;
     }
   }

package/es/Popup/Arrow.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import type { AlignType, ArrowType } from '../interface';
+import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
 export interface ArrowProps {
     prefixCls: string;
     align: AlignType;
-    arrow: ArrowType;
+    arrow: ArrowTypeOuter;
+    arrowPos: ArrowPos;
 }
 export default function Arrow(props: ArrowProps): React.JSX.Element;

package/es/Popup/Arrow.js

@@ -1,15 +1,17 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 export default function Arrow(props) {
   var prefixCls = props.prefixCls,
     align = props.align,
-    arrow = props.arrow;
+    arrow = props.arrow,
+    arrowPos = props.arrowPos;
   var _ref = arrow || {},
-    _ref$x = _ref.x,
-    x = _ref$x === void 0 ? 0 : _ref$x,
-    _ref$y = _ref.y,
-    y = _ref$y === void 0 ? 0 : _ref$y,
-    className = _ref.className;
+    className = _ref.className,
+    content = _ref.content;
+  var _arrowPos$x = arrowPos.x,
+    x = _arrowPos$x === void 0 ? 0 : _arrowPos$x,
+    _arrowPos$y = arrowPos.y,
+    y = _arrowPos$y === void 0 ? 0 : _arrowPos$y;
   var arrowRef = React.useRef();
 
   // Skip if no align
@@ -51,5 +53,5 @@ export default function Arrow(props) {
     ref: arrowRef,
     className: classNames("".concat(prefixCls, "-arrow"), className),
     style: alignStyle
-  });
+  }, content);
 }

package/es/Popup/index.d.ts

@@ -1,7 +1,7 @@
 import type { CSSMotionProps } from 'rc-motion';
 import * as React from 'react';
 import type { TriggerProps } from '../';
-import type { AlignType, ArrowType } from '../interface';
+import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
 export interface PopupProps {
     prefixCls: string;
     className?: string;
@@ -14,7 +14,8 @@ export interface PopupProps {
     mask?: boolean;
     onVisibleChanged: (visible: boolean) => void;
     align?: AlignType;
-    arrow?: ArrowType;
+    arrow?: ArrowTypeOuter;
+    arrowPos: ArrowPos;
     open: boolean;
     /** Tell Portal that should keep in screen. e.g. should wait all motion end */
     keepDom: boolean;

package/es/Popup/index.js

@@ -22,6 +22,7 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick = props.onClick,
     mask = props.mask,
     arrow = props.arrow,
+    arrowPos = props.arrowPos,
     align = props.align,
     motion = props.motion,
     maskMotion = props.maskMotion,
@@ -129,7 +130,10 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return /*#__PURE__*/React.createElement("div", {
         ref: composeRef(resizeObserverRef, ref, motionRef),
         className: cls,
-        style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, offsetStyle), miscStyle), motionStyle), {}, {
+        style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+          '--arrow-x': "".concat(arrowPos.x || 0, "px"),
+          '--arrow-y': "".concat(arrowPos.y || 0, "px")
+        }, offsetStyle), miscStyle), motionStyle), {}, {
           boxSizing: 'border-box',
           zIndex: zIndex
         }, style),
@@ -139,6 +143,7 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }, arrow && /*#__PURE__*/React.createElement(Arrow, {
         prefixCls: prefixCls,
         arrow: arrow,
+        arrowPos: arrowPos,
         align: align
       }), /*#__PURE__*/React.createElement(PopupContent, {
         cache: !open

package/es/index.js

@@ -448,10 +448,11 @@ export function generateTrigger() {
 
     // Child Node
     var triggerNode = /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, mergedChildrenProps), passedProps));
-    var innerArrow = arrow ? _objectSpread(_objectSpread({}, arrow !== true ? arrow : {}), {}, {
+    var arrowPos = {
       x: arrowX,
       y: arrowY
-    }) : null;
+    };
+    var innerArrow = arrow ? _objectSpread({}, arrow !== true ? arrow : {}) : null;
 
     // Render
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, {
@@ -497,7 +498,8 @@ export function generateTrigger() {
       // Arrow
       ,
       align: alignInfo,
-      arrow: innerArrow
+      arrow: innerArrow,
+      arrowPos: arrowPos
       // Align
       ,
       ready: ready,

package/es/interface.d.ts

@@ -57,8 +57,9 @@ export interface AlignType {
 }
 export interface ArrowTypeOuter {
     className?: string;
+    content?: React.ReactNode;
 }
-export declare type ArrowType = ArrowTypeOuter & {
+export declare type ArrowPos = {
     x?: number;
     y?: number;
 };

package/es/util.d.ts

@@ -10,13 +10,35 @@ export declare function getWin(ele: HTMLElement): Window & typeof globalThis;
  * @param areaOnly  Only return the parent which will cut visible area
  */
 export declare function collectScroller(ele: HTMLElement): HTMLElement[];
-export declare function toNum(num: number): number;
+export declare function toNum(num: number, defaultValue?: number): number;
 export interface VisibleArea {
     left: number;
     top: number;
     right: number;
     bottom: number;
 }
+/**
+ *
+ *
+ *  **************************************
+ *  *              Border                *
+ *  *     **************************     *
+ *  *     *                  *     *     *
+ *  *  B  *                  *  S  *  B  *
+ *  *  o  *                  *  c  *  o  *
+ *  *  r  *      Content     *  r  *  r  *
+ *  *  d  *                  *  o  *  d  *
+ *  *  e  *                  *  l  *  e  *
+ *  *  r  ********************  l  *  r  *
+ *  *     *        Scroll          *     *
+ *  *     **************************     *
+ *  *              Border                *
+ *  **************************************
+ *
+ */
+/**
+ * Get visible area of element
+ */
 export declare function getVisibleArea(initArea: VisibleArea, scrollerList?: HTMLElement[]): {
     left: number;
     top: number;

package/es/util.js

@@ -50,12 +50,15 @@ export function getWin(ele) {
 export function collectScroller(ele) {
   var scrollerList = [];
   var current = ele === null || ele === void 0 ? void 0 : ele.parentElement;
-  var scrollStyle = ['hidden', 'scroll', 'auto'];
+  var scrollStyle = ['hidden', 'scroll', 'clip', '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)) {
+      overflowY = _getWin$getComputedSt.overflowY,
+      overflow = _getWin$getComputedSt.overflow;
+    if ([overflowX, overflowY, overflow].some(function (o) {
+      return scrollStyle.includes(o);
+    })) {
       scrollerList.push(current);
     }
     current = current.parentElement;
@@ -63,8 +66,34 @@ export function collectScroller(ele) {
   return scrollerList;
 }
 export function toNum(num) {
-  return Number.isNaN(num) ? 1 : num;
+  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  return Number.isNaN(num) ? defaultValue : num;
 }
+function getPxValue(val) {
+  return toNum(parseFloat(val), 0);
+}
+/**
+ *
+ *
+ *  **************************************
+ *  *              Border                *
+ *  *     **************************     *
+ *  *     *                  *     *     *
+ *  *  B  *                  *  S  *  B  *
+ *  *  o  *                  *  c  *  o  *
+ *  *  r  *      Content     *  r  *  r  *
+ *  *  d  *                  *  o  *  d  *
+ *  *  e  *                  *  l  *  e  *
+ *  *  r  ********************  l  *  r  *
+ *  *     *        Scroll          *     *
+ *  *     **************************     *
+ *  *              Border                *
+ *  **************************************
+ *
+ */
+/**
+ * Get visible area of element
+ */
 export function getVisibleArea(initArea, scrollerList) {
   var visibleArea = _objectSpread({}, initArea);
   (scrollerList || []).forEach(function (ele) {
@@ -74,23 +103,50 @@ export function getVisibleArea(initArea, scrollerList) {
 
     // Skip if static position which will not affect visible area
     var _getWin$getComputedSt2 = getWin(ele).getComputedStyle(ele),
-      position = _getWin$getComputedSt2.position;
-    if (position === 'static') {
-      return;
-    }
+      overflow = _getWin$getComputedSt2.overflow,
+      overflowClipMargin = _getWin$getComputedSt2.overflowClipMargin,
+      borderTopWidth = _getWin$getComputedSt2.borderTopWidth,
+      borderBottomWidth = _getWin$getComputedSt2.borderBottomWidth,
+      borderLeftWidth = _getWin$getComputedSt2.borderLeftWidth,
+      borderRightWidth = _getWin$getComputedSt2.borderRightWidth;
     var eleRect = ele.getBoundingClientRect();
     var eleOutHeight = ele.offsetHeight,
       eleInnerHeight = ele.clientHeight,
       eleOutWidth = ele.offsetWidth,
       eleInnerWidth = ele.clientWidth;
+    var borderTopNum = getPxValue(borderTopWidth);
+    var borderBottomNum = getPxValue(borderBottomWidth);
+    var borderLeftNum = getPxValue(borderLeftWidth);
+    var borderRightNum = getPxValue(borderRightWidth);
     var scaleX = toNum(Math.round(eleRect.width / eleOutWidth * 1000) / 1000);
     var scaleY = toNum(Math.round(eleRect.height / eleOutHeight * 1000) / 1000);
-    var eleScrollWidth = (eleOutWidth - eleInnerWidth) * scaleX;
-    var eleScrollHeight = (eleOutHeight - eleInnerHeight) * scaleY;
-    var eleRight = eleRect.x + eleRect.width - eleScrollWidth;
-    var eleBottom = eleRect.y + eleRect.height - eleScrollHeight;
-    visibleArea.left = Math.max(visibleArea.left, eleRect.x);
-    visibleArea.top = Math.max(visibleArea.top, eleRect.y);
+
+    // Original visible area
+    var eleScrollWidth = (eleOutWidth - eleInnerWidth - borderLeftNum - borderRightNum) * scaleX;
+    var eleScrollHeight = (eleOutHeight - eleInnerHeight - borderTopNum - borderBottomNum) * scaleY;
+
+    // Cut border size
+    var scaledBorderTopWidth = borderTopNum * scaleY;
+    var scaledBorderBottomWidth = borderBottomNum * scaleY;
+    var scaledBorderLeftWidth = borderLeftNum * scaleX;
+    var scaledBorderRightWidth = borderRightNum * scaleX;
+
+    // Clip margin
+    var clipMarginWidth = 0;
+    var clipMarginHeight = 0;
+    if (overflow === 'clip') {
+      var clipNum = getPxValue(overflowClipMargin);
+      clipMarginWidth = clipNum * scaleX;
+      clipMarginHeight = clipNum * scaleY;
+    }
+
+    // Region
+    var eleLeft = eleRect.x + scaledBorderLeftWidth - clipMarginWidth;
+    var eleTop = eleRect.y + scaledBorderTopWidth - clipMarginHeight;
+    var eleRight = eleLeft + eleRect.width + 2 * clipMarginWidth - scaledBorderLeftWidth - scaledBorderRightWidth - eleScrollWidth;
+    var eleBottom = eleTop + eleRect.height + 2 * clipMarginHeight - scaledBorderTopWidth - scaledBorderBottomWidth - eleScrollHeight;
+    visibleArea.left = Math.max(visibleArea.left, eleLeft);
+    visibleArea.top = Math.max(visibleArea.top, eleTop);
     visibleArea.right = Math.min(visibleArea.right, eleRight);
     visibleArea.bottom = Math.min(visibleArea.bottom, eleBottom);
   });

package/lib/Popup/Arrow.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import type { AlignType, ArrowType } from '../interface';
+import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
 export interface ArrowProps {
     prefixCls: string;
     align: AlignType;
-    arrow: ArrowType;
+    arrow: ArrowTypeOuter;
+    arrowPos: ArrowPos;
 }
 export default function Arrow(props: ArrowProps): React.JSX.Element;

package/lib/Popup/Arrow.js

@@ -1,23 +1,25 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Arrow;
-var React = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var React = _interopRequireWildcard(require("react"));
 function Arrow(props) {
   var prefixCls = props.prefixCls,
     align = props.align,
-    arrow = props.arrow;
+    arrow = props.arrow,
+    arrowPos = props.arrowPos;
   var _ref = arrow || {},
-    _ref$x = _ref.x,
-    x = _ref$x === void 0 ? 0 : _ref$x,
-    _ref$y = _ref.y,
-    y = _ref$y === void 0 ? 0 : _ref$y,
-    className = _ref.className;
+    className = _ref.className,
+    content = _ref.content;
+  var _arrowPos$x = arrowPos.x,
+    x = _arrowPos$x === void 0 ? 0 : _arrowPos$x,
+    _arrowPos$y = arrowPos.y,
+    y = _arrowPos$y === void 0 ? 0 : _arrowPos$y;
   var arrowRef = React.useRef();
 
   // Skip if no align
@@ -59,5 +61,5 @@ function Arrow(props) {
     ref: arrowRef,
     className: (0, _classnames.default)("".concat(prefixCls, "-arrow"), className),
     style: alignStyle
-  });
+  }, content);
 }

package/lib/Popup/index.d.ts

@@ -1,7 +1,7 @@
 import type { CSSMotionProps } from 'rc-motion';
 import * as React from 'react';
 import type { TriggerProps } from '../';
-import type { AlignType, ArrowType } from '../interface';
+import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
 export interface PopupProps {
     prefixCls: string;
     className?: string;
@@ -14,7 +14,8 @@ export interface PopupProps {
     mask?: boolean;
     onVisibleChanged: (visible: boolean) => void;
     align?: AlignType;
-    arrow?: ArrowType;
+    arrow?: ArrowTypeOuter;
+    arrowPos: ArrowPos;
     open: boolean;
     /** Tell Portal that should keep in screen. e.g. should wait all motion end */
     keepDom: boolean;

package/lib/Popup/index.js

@@ -30,6 +30,7 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick = props.onClick,
     mask = props.mask,
     arrow = props.arrow,
+    arrowPos = props.arrowPos,
     align = props.align,
     motion = props.motion,
     maskMotion = props.maskMotion,
@@ -137,7 +138,10 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return /*#__PURE__*/React.createElement("div", {
         ref: (0, _ref2.composeRef)(resizeObserverRef, ref, motionRef),
         className: cls,
-        style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, offsetStyle), miscStyle), motionStyle), {}, {
+        style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
+          '--arrow-x': "".concat(arrowPos.x || 0, "px"),
+          '--arrow-y': "".concat(arrowPos.y || 0, "px")
+        }, offsetStyle), miscStyle), motionStyle), {}, {
           boxSizing: 'border-box',
           zIndex: zIndex
         }, style),
@@ -147,6 +151,7 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }, arrow && /*#__PURE__*/React.createElement(_Arrow.default, {
         prefixCls: prefixCls,
         arrow: arrow,
+        arrowPos: arrowPos,
         align: align
       }), /*#__PURE__*/React.createElement(_PopupContent.default, {
         cache: !open

package/lib/index.js

@@ -457,10 +457,11 @@ function generateTrigger() {
 
     // Child Node
     var triggerNode = /*#__PURE__*/React.cloneElement(child, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedChildrenProps), passedProps));
-    var innerArrow = arrow ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, arrow !== true ? arrow : {}), {}, {
+    var arrowPos = {
       x: arrowX,
       y: arrowY
-    }) : null;
+    };
+    var innerArrow = arrow ? (0, _objectSpread2.default)({}, arrow !== true ? arrow : {}) : null;
 
     // Render
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
@@ -506,7 +507,8 @@ function generateTrigger() {
       // Arrow
       ,
       align: alignInfo,
-      arrow: innerArrow
+      arrow: innerArrow,
+      arrowPos: arrowPos
       // Align
       ,
       ready: ready,

package/lib/interface.d.ts

@@ -57,8 +57,9 @@ export interface AlignType {
 }
 export interface ArrowTypeOuter {
     className?: string;
+    content?: React.ReactNode;
 }
-export declare type ArrowType = ArrowTypeOuter & {
+export declare type ArrowPos = {
     x?: number;
     y?: number;
 };

package/lib/util.d.ts

@@ -10,13 +10,35 @@ export declare function getWin(ele: HTMLElement): Window & typeof globalThis;
  * @param areaOnly  Only return the parent which will cut visible area
  */
 export declare function collectScroller(ele: HTMLElement): HTMLElement[];
-export declare function toNum(num: number): number;
+export declare function toNum(num: number, defaultValue?: number): number;
 export interface VisibleArea {
     left: number;
     top: number;
     right: number;
     bottom: number;
 }
+/**
+ *
+ *
+ *  **************************************
+ *  *              Border                *
+ *  *     **************************     *
+ *  *     *                  *     *     *
+ *  *  B  *                  *  S  *  B  *
+ *  *  o  *                  *  c  *  o  *
+ *  *  r  *      Content     *  r  *  r  *
+ *  *  d  *                  *  o  *  d  *
+ *  *  e  *                  *  l  *  e  *
+ *  *  r  ********************  l  *  r  *
+ *  *     *        Scroll          *     *
+ *  *     **************************     *
+ *  *              Border                *
+ *  **************************************
+ *
+ */
+/**
+ * Get visible area of element
+ */
 export declare function getVisibleArea(initArea: VisibleArea, scrollerList?: HTMLElement[]): {
     left: number;
     top: number;

package/lib/util.js

@@ -62,12 +62,15 @@ function getWin(ele) {
 function collectScroller(ele) {
   var scrollerList = [];
   var current = ele === null || ele === void 0 ? void 0 : ele.parentElement;
-  var scrollStyle = ['hidden', 'scroll', 'auto'];
+  var scrollStyle = ['hidden', 'scroll', 'clip', '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)) {
+      overflowY = _getWin$getComputedSt.overflowY,
+      overflow = _getWin$getComputedSt.overflow;
+    if ([overflowX, overflowY, overflow].some(function (o) {
+      return scrollStyle.includes(o);
+    })) {
       scrollerList.push(current);
     }
     current = current.parentElement;
@@ -75,8 +78,34 @@ function collectScroller(ele) {
   return scrollerList;
 }
 function toNum(num) {
-  return Number.isNaN(num) ? 1 : num;
+  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  return Number.isNaN(num) ? defaultValue : num;
 }
+function getPxValue(val) {
+  return toNum(parseFloat(val), 0);
+}
+/**
+ *
+ *
+ *  **************************************
+ *  *              Border                *
+ *  *     **************************     *
+ *  *     *                  *     *     *
+ *  *  B  *                  *  S  *  B  *
+ *  *  o  *                  *  c  *  o  *
+ *  *  r  *      Content     *  r  *  r  *
+ *  *  d  *                  *  o  *  d  *
+ *  *  e  *                  *  l  *  e  *
+ *  *  r  ********************  l  *  r  *
+ *  *     *        Scroll          *     *
+ *  *     **************************     *
+ *  *              Border                *
+ *  **************************************
+ *
+ */
+/**
+ * Get visible area of element
+ */
 function getVisibleArea(initArea, scrollerList) {
   var visibleArea = (0, _objectSpread2.default)({}, initArea);
   (scrollerList || []).forEach(function (ele) {
@@ -86,23 +115,50 @@ function getVisibleArea(initArea, scrollerList) {
 
     // Skip if static position which will not affect visible area
     var _getWin$getComputedSt2 = getWin(ele).getComputedStyle(ele),
-      position = _getWin$getComputedSt2.position;
-    if (position === 'static') {
-      return;
-    }
+      overflow = _getWin$getComputedSt2.overflow,
+      overflowClipMargin = _getWin$getComputedSt2.overflowClipMargin,
+      borderTopWidth = _getWin$getComputedSt2.borderTopWidth,
+      borderBottomWidth = _getWin$getComputedSt2.borderBottomWidth,
+      borderLeftWidth = _getWin$getComputedSt2.borderLeftWidth,
+      borderRightWidth = _getWin$getComputedSt2.borderRightWidth;
     var eleRect = ele.getBoundingClientRect();
     var eleOutHeight = ele.offsetHeight,
       eleInnerHeight = ele.clientHeight,
       eleOutWidth = ele.offsetWidth,
       eleInnerWidth = ele.clientWidth;
+    var borderTopNum = getPxValue(borderTopWidth);
+    var borderBottomNum = getPxValue(borderBottomWidth);
+    var borderLeftNum = getPxValue(borderLeftWidth);
+    var borderRightNum = getPxValue(borderRightWidth);
     var scaleX = toNum(Math.round(eleRect.width / eleOutWidth * 1000) / 1000);
     var scaleY = toNum(Math.round(eleRect.height / eleOutHeight * 1000) / 1000);
-    var eleScrollWidth = (eleOutWidth - eleInnerWidth) * scaleX;
-    var eleScrollHeight = (eleOutHeight - eleInnerHeight) * scaleY;
-    var eleRight = eleRect.x + eleRect.width - eleScrollWidth;
-    var eleBottom = eleRect.y + eleRect.height - eleScrollHeight;
-    visibleArea.left = Math.max(visibleArea.left, eleRect.x);
-    visibleArea.top = Math.max(visibleArea.top, eleRect.y);
+
+    // Original visible area
+    var eleScrollWidth = (eleOutWidth - eleInnerWidth - borderLeftNum - borderRightNum) * scaleX;
+    var eleScrollHeight = (eleOutHeight - eleInnerHeight - borderTopNum - borderBottomNum) * scaleY;
+
+    // Cut border size
+    var scaledBorderTopWidth = borderTopNum * scaleY;
+    var scaledBorderBottomWidth = borderBottomNum * scaleY;
+    var scaledBorderLeftWidth = borderLeftNum * scaleX;
+    var scaledBorderRightWidth = borderRightNum * scaleX;
+
+    // Clip margin
+    var clipMarginWidth = 0;
+    var clipMarginHeight = 0;
+    if (overflow === 'clip') {
+      var clipNum = getPxValue(overflowClipMargin);
+      clipMarginWidth = clipNum * scaleX;
+      clipMarginHeight = clipNum * scaleY;
+    }
+
+    // Region
+    var eleLeft = eleRect.x + scaledBorderLeftWidth - clipMarginWidth;
+    var eleTop = eleRect.y + scaledBorderTopWidth - clipMarginHeight;
+    var eleRight = eleLeft + eleRect.width + 2 * clipMarginWidth - scaledBorderLeftWidth - scaledBorderRightWidth - eleScrollWidth;
+    var eleBottom = eleTop + eleRect.height + 2 * clipMarginHeight - scaledBorderTopWidth - scaledBorderBottomWidth - eleScrollHeight;
+    visibleArea.left = Math.max(visibleArea.left, eleLeft);
+    visibleArea.top = Math.max(visibleArea.top, eleTop);
     visibleArea.right = Math.min(visibleArea.right, eleRight);
     visibleArea.bottom = Math.min(visibleArea.bottom, eleBottom);
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/trigger",
-  "version": "1.11.0",
+  "version": "1.12.1",
   "description": "base abstract trigger component for react",
   "engines": {
     "node": ">=8.x"