@rc-component/trigger 2.2.5 → 3.0.0

package/es/mock.js

@@ -1,19 +1,16 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import { generateTrigger } from "./index";
-var MockPortal = function MockPortal(_ref) {
-  var open = _ref.open,
-    autoDestroy = _ref.autoDestroy,
-    children = _ref.children,
-    getContainer = _ref.getContainer;
-  var _React$useState = React.useState(open),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    visible = _React$useState2[0],
-    setVisible = _React$useState2[1];
-  React.useEffect(function () {
-    getContainer === null || getContainer === void 0 || getContainer();
+const MockPortal = ({
+  open,
+  autoDestroy,
+  children,
+  getContainer
+}) => {
+  const [visible, setVisible] = React.useState(open);
+  React.useEffect(() => {
+    getContainer?.();
   });
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (open) {
       setVisible(true);
     } else if (autoDestroy) {

package/es/util.d.ts

@@ -1,8 +1,5 @@
-import type { CSSMotionProps } from 'rc-motion';
-import type { AlignType, AnimationType, BuildInPlacements, TransitionNameType } from './interface';
+import type { AlignType, BuildInPlacements } from './interface';
 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;
 /**
  * Get all the scrollable parent elements of the element

package/es/util.js

@@ -1,43 +1,22 @@
-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] : [];
-  var isAlignPoint = arguments.length > 2 ? arguments[2] : undefined;
+function isPointsEq(a1 = [], a2 = [], isAlignPoint) {
   if (isAlignPoint) {
     return a1[0] === a2[0];
   }
   return a1[0] === a2[0] && a1[1] === a2[1];
 }
 export function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
-  var points = align.points;
-  var placements = Object.keys(builtinPlacements);
-  for (var i = 0; i < placements.length; i += 1) {
-    var _builtinPlacements$pl;
-    var placement = placements[i];
-    if (isPointsEq((_builtinPlacements$pl = builtinPlacements[placement]) === null || _builtinPlacements$pl === void 0 ? void 0 : _builtinPlacements$pl.points, points, isAlignPoint)) {
-      return "".concat(prefixCls, "-placement-").concat(placement);
+  const {
+    points
+  } = align;
+  const placements = Object.keys(builtinPlacements);
+  for (let i = 0; i < placements.length; i += 1) {
+    const placement = placements[i];
+    if (isPointsEq(builtinPlacements[placement]?.points, points, isAlignPoint)) {
+      return `${prefixCls}-placement-${placement}`;
     }
   }
   return '';
 }
-
-/** @deprecated We should not use this if we can refactor all deps */
-export function getMotion(prefixCls, motion, animation, transitionName) {
-  if (motion) {
-    return motion;
-  }
-  if (animation) {
-    return {
-      motionName: "".concat(prefixCls, "-").concat(animation)
-    };
-  }
-  if (transitionName) {
-    return {
-      motionName: transitionName
-    };
-  }
-  return null;
-}
 export function getWin(ele) {
   return ele.ownerDocument.defaultView;
 }
@@ -48,25 +27,23 @@ export function getWin(ele) {
  * @param areaOnly  Only return the parent which will cut visible area
  */
 export function collectScroller(ele) {
-  var scrollerList = [];
-  var current = ele === null || ele === void 0 ? void 0 : ele.parentElement;
-  var scrollStyle = ['hidden', 'scroll', 'clip', 'auto'];
+  const scrollerList = [];
+  let current = ele?.parentElement;
+  const scrollStyle = ['hidden', 'scroll', 'clip', 'auto'];
   while (current) {
-    var _getWin$getComputedSt = getWin(current).getComputedStyle(current),
-      overflowX = _getWin$getComputedSt.overflowX,
-      overflowY = _getWin$getComputedSt.overflowY,
-      overflow = _getWin$getComputedSt.overflow;
-    if ([overflowX, overflowY, overflow].some(function (o) {
-      return scrollStyle.includes(o);
-    })) {
+    const {
+      overflowX,
+      overflowY,
+      overflow
+    } = getWin(current).getComputedStyle(current);
+    if ([overflowX, overflowY, overflow].some(o => scrollStyle.includes(o))) {
       scrollerList.push(current);
     }
     current = current.parentElement;
   }
   return scrollerList;
 }
-export function toNum(num) {
-  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+export function toNum(num, defaultValue = 1) {
   return Number.isNaN(num) ? defaultValue : num;
 }
 function getPxValue(val) {
@@ -95,56 +72,61 @@ function getPxValue(val) {
  * Get visible area of element
  */
 export function getVisibleArea(initArea, scrollerList) {
-  var visibleArea = _objectSpread({}, initArea);
-  (scrollerList || []).forEach(function (ele) {
+  const visibleArea = {
+    ...initArea
+  };
+  (scrollerList || []).forEach(ele => {
     if (ele instanceof HTMLBodyElement || ele instanceof HTMLHtmlElement) {
       return;
     }
 
     // Skip if static position which will not affect visible area
-    var _getWin$getComputedSt2 = getWin(ele).getComputedStyle(ele),
-      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);
+    const {
+      overflow,
+      overflowClipMargin,
+      borderTopWidth,
+      borderBottomWidth,
+      borderLeftWidth,
+      borderRightWidth
+    } = getWin(ele).getComputedStyle(ele);
+    const eleRect = ele.getBoundingClientRect();
+    const {
+      offsetHeight: eleOutHeight,
+      clientHeight: eleInnerHeight,
+      offsetWidth: eleOutWidth,
+      clientWidth: eleInnerWidth
+    } = ele;
+    const borderTopNum = getPxValue(borderTopWidth);
+    const borderBottomNum = getPxValue(borderBottomWidth);
+    const borderLeftNum = getPxValue(borderLeftWidth);
+    const borderRightNum = getPxValue(borderRightWidth);
+    const scaleX = toNum(Math.round(eleRect.width / eleOutWidth * 1000) / 1000);
+    const scaleY = toNum(Math.round(eleRect.height / eleOutHeight * 1000) / 1000);
 
     // Original visible area
-    var eleScrollWidth = (eleOutWidth - eleInnerWidth - borderLeftNum - borderRightNum) * scaleX;
-    var eleScrollHeight = (eleOutHeight - eleInnerHeight - borderTopNum - borderBottomNum) * scaleY;
+    const eleScrollWidth = (eleOutWidth - eleInnerWidth - borderLeftNum - borderRightNum) * scaleX;
+    const 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;
+    const scaledBorderTopWidth = borderTopNum * scaleY;
+    const scaledBorderBottomWidth = borderBottomNum * scaleY;
+    const scaledBorderLeftWidth = borderLeftNum * scaleX;
+    const scaledBorderRightWidth = borderRightNum * scaleX;
 
     // Clip margin
-    var clipMarginWidth = 0;
-    var clipMarginHeight = 0;
+    let clipMarginWidth = 0;
+    let clipMarginHeight = 0;
     if (overflow === 'clip') {
-      var clipNum = getPxValue(overflowClipMargin);
+      const 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;
+    const eleLeft = eleRect.x + scaledBorderLeftWidth - clipMarginWidth;
+    const eleTop = eleRect.y + scaledBorderTopWidth - clipMarginHeight;
+    const eleRight = eleLeft + eleRect.width + 2 * clipMarginWidth - scaledBorderLeftWidth - scaledBorderRightWidth - eleScrollWidth;
+    const 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);

package/lib/Popup/Arrow.js

@@ -1,43 +1,47 @@
 "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 = Arrow;
 var _classnames = _interopRequireDefault(require("classnames"));
 var React = _interopRequireWildcard(require("react"));
+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 Arrow(props) {
-  var prefixCls = props.prefixCls,
-    align = props.align,
-    arrow = props.arrow,
-    arrowPos = props.arrowPos;
-  var _ref = arrow || {},
-    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();
+  const {
+    prefixCls,
+    align,
+    arrow,
+    arrowPos
+  } = props;
+  const {
+    className,
+    content
+  } = arrow || {};
+  const {
+    x = 0,
+    y = 0
+  } = arrowPos;
+  const arrowRef = React.useRef();
 
   // Skip if no align
   if (!align || !align.points) {
     return null;
   }
-  var alignStyle = {
+  const alignStyle = {
     position: 'absolute'
   };
 
   // Skip if no need to align
   if (align.autoArrow !== false) {
-    var popupPoints = align.points[0];
-    var targetPoints = align.points[1];
-    var popupTB = popupPoints[0];
-    var popupLR = popupPoints[1];
-    var targetTB = targetPoints[0];
-    var targetLR = targetPoints[1];
+    const popupPoints = align.points[0];
+    const targetPoints = align.points[1];
+    const popupTB = popupPoints[0];
+    const popupLR = popupPoints[1];
+    const targetTB = targetPoints[0];
+    const targetLR = targetPoints[1];
 
     // Top & Bottom
     if (popupTB === targetTB || !['t', 'b'].includes(popupTB)) {
@@ -59,7 +63,7 @@ function Arrow(props) {
   }
   return /*#__PURE__*/React.createElement("div", {
     ref: arrowRef,
-    className: (0, _classnames.default)("".concat(prefixCls, "-arrow"), className),
+    className: (0, _classnames.default)(`${prefixCls}-arrow`, className),
     style: alignStyle
   }, content);
 }

package/lib/Popup/Mask.d.ts

@@ -1,4 +1,4 @@
-import type { CSSMotionProps } from 'rc-motion';
+import type { CSSMotionProps } from '@rc-component/motion';
 import * as React from 'react';
 export interface MaskProps {
     prefixCls: string;

package/lib/Popup/Mask.js

@@ -1,35 +1,37 @@
 "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 = Mask;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _rcMotion = _interopRequireDefault(require("rc-motion"));
+var _motion = _interopRequireDefault(require("@rc-component/motion"));
 var React = _interopRequireWildcard(require("react"));
+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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function Mask(props) {
-  var prefixCls = props.prefixCls,
-    open = props.open,
-    zIndex = props.zIndex,
-    mask = props.mask,
-    motion = props.motion;
+  const {
+    prefixCls,
+    open,
+    zIndex,
+    mask,
+    motion
+  } = props;
   if (!mask) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(_rcMotion.default, (0, _extends2.default)({}, motion, {
+  return /*#__PURE__*/React.createElement(_motion.default, _extends({}, motion, {
     motionAppear: true,
     visible: open,
     removeOnLeave: true
-  }), function (_ref) {
-    var className = _ref.className;
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        zIndex: zIndex
-      },
-      className: (0, _classnames.default)("".concat(prefixCls, "-mask"), className)
-    });
-  });
+  }), ({
+    className
+  }) => /*#__PURE__*/React.createElement("div", {
+    style: {
+      zIndex
+    },
+    className: (0, _classnames.default)(`${prefixCls}-mask`, className)
+  }));
 }

package/lib/Popup/PopupContent.js

@@ -1,17 +1,15 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
-var PopupContent = /*#__PURE__*/React.memo(function (_ref) {
-  var children = _ref.children;
-  return children;
-}, function (_, next) {
-  return next.cache;
-});
+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; }
+const PopupContent = /*#__PURE__*/React.memo(({
+  children
+}) => children, (_, next) => next.cache);
 if (process.env.NODE_ENV !== 'production') {
   PopupContent.displayName = 'PopupContent';
 }

package/lib/Popup/index.d.ts

@@ -1,4 +1,4 @@
-import type { CSSMotionProps } from 'rc-motion';
+import type { CSSMotionProps } from '@rc-component/motion';
 import * as React from 'react';
 import type { TriggerProps } from '../';
 import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';

package/lib/Popup/index.js

@@ -1,73 +1,77 @@
 "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 = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _rcMotion = _interopRequireDefault(require("rc-motion"));
-var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
-var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
-var _ref2 = require("rc-util/lib/ref");
+var _motion = _interopRequireDefault(require("@rc-component/motion"));
+var _resizeObserver = _interopRequireDefault(require("@rc-component/resize-observer"));
+var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/hooks/useLayoutEffect"));
+var _ref = require("@rc-component/util/lib/ref");
 var React = _interopRequireWildcard(require("react"));
 var _Arrow = _interopRequireDefault(require("./Arrow"));
 var _Mask = _interopRequireDefault(require("./Mask"));
 var _PopupContent = _interopRequireDefault(require("./PopupContent"));
-var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var popup = props.popup,
-    className = props.className,
-    prefixCls = props.prefixCls,
-    style = props.style,
-    target = props.target,
-    _onVisibleChanged = props.onVisibleChanged,
-    open = props.open,
-    keepDom = props.keepDom,
-    fresh = props.fresh,
-    onClick = props.onClick,
-    mask = props.mask,
-    arrow = props.arrow,
-    arrowPos = props.arrowPos,
-    align = props.align,
-    motion = props.motion,
-    maskMotion = props.maskMotion,
-    forceRender = props.forceRender,
-    getPopupContainer = props.getPopupContainer,
-    autoDestroy = props.autoDestroy,
-    Portal = props.portal,
-    zIndex = props.zIndex,
-    onMouseEnter = props.onMouseEnter,
-    onMouseLeave = props.onMouseLeave,
-    onPointerEnter = props.onPointerEnter,
-    onPointerDownCapture = props.onPointerDownCapture,
-    ready = props.ready,
-    offsetX = props.offsetX,
-    offsetY = props.offsetY,
-    offsetR = props.offsetR,
-    offsetB = props.offsetB,
-    onAlign = props.onAlign,
-    onPrepare = props.onPrepare,
-    stretch = props.stretch,
-    targetWidth = props.targetWidth,
-    targetHeight = props.targetHeight;
-  var childNode = typeof popup === 'function' ? popup() : popup;
+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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    popup,
+    className,
+    prefixCls,
+    style,
+    target,
+    onVisibleChanged,
+    // Open
+    open,
+    keepDom,
+    fresh,
+    // Click
+    onClick,
+    // Mask
+    mask,
+    // Arrow
+    arrow,
+    arrowPos,
+    align,
+    // Motion
+    motion,
+    maskMotion,
+    // Portal
+    forceRender,
+    getPopupContainer,
+    autoDestroy,
+    portal: Portal,
+    zIndex,
+    onMouseEnter,
+    onMouseLeave,
+    onPointerEnter,
+    onPointerDownCapture,
+    ready,
+    offsetX,
+    offsetY,
+    offsetR,
+    offsetB,
+    onAlign,
+    onPrepare,
+    stretch,
+    targetWidth,
+    targetHeight
+  } = props;
+  const childNode = typeof popup === 'function' ? popup() : popup;
 
   // We can not remove holder only when motion finished.
-  var isNodeVisible = open || keepDom;
+  const isNodeVisible = open || keepDom;
 
   // ======================= Container ========================
-  var getPopupContainerNeedParams = (getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer.length) > 0;
-  var _React$useState = React.useState(!getPopupContainer || !getPopupContainerNeedParams),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    show = _React$useState2[0],
-    setShow = _React$useState2[1];
+  const getPopupContainerNeedParams = getPopupContainer?.length > 0;
+  const [show, setShow] = React.useState(!getPopupContainer || !getPopupContainerNeedParams);
 
   // Delay to show since `getPopupContainer` need target element
-  (0, _useLayoutEffect.default)(function () {
+  (0, _useLayoutEffect.default)(() => {
     if (!show && getPopupContainerNeedParams && target) {
       setShow(true);
     }
@@ -79,8 +83,8 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
 
   // >>>>> Offset
-  var AUTO = 'auto';
-  var offsetStyle = {
+  const AUTO = 'auto';
+  const offsetStyle = {
     left: '-1000vw',
     top: '-1000vh',
     right: AUTO,
@@ -89,11 +93,12 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   // Set align style
   if (ready || !open) {
-    var _experimental;
-    var points = align.points;
-    var dynamicInset = align.dynamicInset || ((_experimental = align._experimental) === null || _experimental === void 0 ? void 0 : _experimental.dynamicInset);
-    var alignRight = dynamicInset && points[0][1] === 'r';
-    var alignBottom = dynamicInset && points[0][0] === 'b';
+    const {
+      points
+    } = align;
+    const dynamicInset = align.dynamicInset || align._experimental?.dynamicInset;
+    const alignRight = dynamicInset && points[0][1] === 'r';
+    const alignBottom = dynamicInset && points[0][0] === 'b';
     if (alignRight) {
       offsetStyle.right = offsetR;
       offsetStyle.left = AUTO;
@@ -111,7 +116,7 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
 
   // >>>>> Misc
-  var miscStyle = {};
+  const miscStyle = {};
   if (stretch) {
     if (stretch.includes('height') && targetHeight) {
       miscStyle.height = targetHeight;
@@ -129,9 +134,7 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
   return /*#__PURE__*/React.createElement(Portal, {
     open: forceRender || isNodeVisible,
-    getContainer: getPopupContainer && function () {
-      return getPopupContainer(target);
-    },
+    getContainer: getPopupContainer && (() => getPopupContainer(target)),
     autoDestroy: autoDestroy
   }, /*#__PURE__*/React.createElement(_Mask.default, {
     prefixCls: prefixCls,
@@ -139,40 +142,43 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     zIndex: zIndex,
     mask: mask,
     motion: maskMotion
-  }), /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
+  }), /*#__PURE__*/React.createElement(_resizeObserver.default, {
     onResize: onAlign,
     disabled: !open
-  }, function (resizeObserverRef) {
-    return /*#__PURE__*/React.createElement(_rcMotion.default, (0, _extends2.default)({
+  }, resizeObserverRef => {
+    return /*#__PURE__*/React.createElement(_motion.default, _extends({
       motionAppear: true,
       motionEnter: true,
       motionLeave: true,
       removeOnLeave: false,
       forceRender: forceRender,
-      leavedClassName: "".concat(prefixCls, "-hidden")
+      leavedClassName: `${prefixCls}-hidden`
     }, motion, {
       onAppearPrepare: onPrepare,
       onEnterPrepare: onPrepare,
       visible: open,
-      onVisibleChanged: function onVisibleChanged(nextVisible) {
-        var _motion$onVisibleChan;
-        motion === null || motion === void 0 || (_motion$onVisibleChan = motion.onVisibleChanged) === null || _motion$onVisibleChan === void 0 || _motion$onVisibleChan.call(motion, nextVisible);
-        _onVisibleChanged(nextVisible);
+      onVisibleChanged: nextVisible => {
+        motion?.onVisibleChanged?.(nextVisible);
+        onVisibleChanged(nextVisible);
       }
-    }), function (_ref, motionRef) {
-      var motionClassName = _ref.className,
-        motionStyle = _ref.style;
-      var cls = (0, _classnames.default)(prefixCls, motionClassName, className);
+    }), ({
+      className: motionClassName,
+      style: motionStyle
+    }, motionRef) => {
+      const cls = (0, _classnames.default)(prefixCls, motionClassName, className);
       return /*#__PURE__*/React.createElement("div", {
-        ref: (0, _ref2.composeRef)(resizeObserverRef, ref, motionRef),
+        ref: (0, _ref.composeRef)(resizeObserverRef, ref, motionRef),
         className: cls,
-        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), {}, {
+        style: {
+          '--arrow-x': `${arrowPos.x || 0}px`,
+          '--arrow-y': `${arrowPos.y || 0}px`,
+          ...offsetStyle,
+          ...miscStyle,
+          ...motionStyle,
           boxSizing: 'border-box',
-          zIndex: zIndex
-        }, style),
+          zIndex,
+          ...style
+        },
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
         onPointerEnter: onPointerEnter,