@rc-component/trigger 2.2.6 → 3.0.0

package/es/index.js

@@ -1,16 +1,12 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["prefixCls", "children", "action", "showAction", "hideAction", "popupVisible", "defaultPopupVisible", "onPopupVisibleChange", "afterPopupVisibleChange", "mouseEnterDelay", "mouseLeaveDelay", "focusDelay", "blurDelay", "mask", "maskClosable", "getPopupContainer", "forceRender", "autoDestroy", "destroyPopupOnHide", "popup", "popupClassName", "popupStyle", "popupPlacement", "builtinPlacements", "popupAlign", "zIndex", "stretch", "getPopupClassNameFromAlign", "fresh", "alignPoint", "onPopupClick", "onPopupAlign", "arrow", "popupMotion", "maskMotion", "popupTransitionName", "popupAnimation", "maskTransitionName", "maskAnimation", "className", "getTriggerDOMNode"];
 import Portal from '@rc-component/portal';
 import classNames from 'classnames';
-import ResizeObserver from 'rc-resize-observer';
-import { isDOM } from "rc-util/es/Dom/findDOMNode";
-import { getShadowRoot } from "rc-util/es/Dom/shadow";
-import useEvent from "rc-util/es/hooks/useEvent";
-import useId from "rc-util/es/hooks/useId";
-import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
-import isMobile from "rc-util/es/isMobile";
+import ResizeObserver from '@rc-component/resize-observer';
+import { isDOM } from "@rc-component/util/es/Dom/findDOMNode";
+import { getShadowRoot } from "@rc-component/util/es/Dom/shadow";
+import useEvent from "@rc-component/util/es/hooks/useEvent";
+import useId from "@rc-component/util/es/hooks/useId";
+import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
+import isMobile from "@rc-component/util/es/isMobile";
 import * as React from 'react';
 import Popup from "./Popup";
 import TriggerWrapper from "./TriggerWrapper";
@@ -19,7 +15,7 @@ import useAction from "./hooks/useAction";
 import useAlign from "./hooks/useAlign";
 import useWatch from "./hooks/useWatch";
 import useWinClick from "./hooks/useWinClick";
-import { getAlignPopupClassName, getMotion } from "./util";
+import { getAlignPopupClassName } from "./util";
 
 // Removed Props List
 // Seems this can be auto
@@ -27,106 +23,96 @@ import { getAlignPopupClassName, getMotion } from "./util";
 
 // New version will not wrap popup with `rc-trigger-popup-content` when multiple children
 
-export function generateTrigger() {
-  var PortalComponent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Portal;
-  var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
-    var _props$prefixCls = props.prefixCls,
-      prefixCls = _props$prefixCls === void 0 ? 'rc-trigger-popup' : _props$prefixCls,
-      children = props.children,
-      _props$action = props.action,
-      action = _props$action === void 0 ? 'hover' : _props$action,
-      showAction = props.showAction,
-      hideAction = props.hideAction,
-      popupVisible = props.popupVisible,
-      defaultPopupVisible = props.defaultPopupVisible,
-      onPopupVisibleChange = props.onPopupVisibleChange,
-      afterPopupVisibleChange = props.afterPopupVisibleChange,
-      mouseEnterDelay = props.mouseEnterDelay,
-      _props$mouseLeaveDela = props.mouseLeaveDelay,
-      mouseLeaveDelay = _props$mouseLeaveDela === void 0 ? 0.1 : _props$mouseLeaveDela,
-      focusDelay = props.focusDelay,
-      blurDelay = props.blurDelay,
-      mask = props.mask,
-      _props$maskClosable = props.maskClosable,
-      maskClosable = _props$maskClosable === void 0 ? true : _props$maskClosable,
-      getPopupContainer = props.getPopupContainer,
-      forceRender = props.forceRender,
-      autoDestroy = props.autoDestroy,
-      destroyPopupOnHide = props.destroyPopupOnHide,
-      popup = props.popup,
-      popupClassName = props.popupClassName,
-      popupStyle = props.popupStyle,
-      popupPlacement = props.popupPlacement,
-      _props$builtinPlaceme = props.builtinPlacements,
-      builtinPlacements = _props$builtinPlaceme === void 0 ? {} : _props$builtinPlaceme,
-      popupAlign = props.popupAlign,
-      zIndex = props.zIndex,
-      stretch = props.stretch,
-      getPopupClassNameFromAlign = props.getPopupClassNameFromAlign,
-      fresh = props.fresh,
-      alignPoint = props.alignPoint,
-      onPopupClick = props.onPopupClick,
-      onPopupAlign = props.onPopupAlign,
-      arrow = props.arrow,
-      popupMotion = props.popupMotion,
-      maskMotion = props.maskMotion,
-      popupTransitionName = props.popupTransitionName,
-      popupAnimation = props.popupAnimation,
-      maskTransitionName = props.maskTransitionName,
-      maskAnimation = props.maskAnimation,
-      className = props.className,
-      getTriggerDOMNode = props.getTriggerDOMNode,
-      restProps = _objectWithoutProperties(props, _excluded);
-    var mergedAutoDestroy = autoDestroy || destroyPopupOnHide || false;
+export function generateTrigger(PortalComponent = Portal) {
+  const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
+    const {
+      prefixCls = 'rc-trigger-popup',
+      children,
+      // Action
+      action = 'hover',
+      showAction,
+      hideAction,
+      // Open
+      popupVisible,
+      defaultPopupVisible,
+      onPopupVisibleChange,
+      afterPopupVisibleChange,
+      // Delay
+      mouseEnterDelay,
+      mouseLeaveDelay = 0.1,
+      focusDelay,
+      blurDelay,
+      // Mask
+      mask,
+      maskClosable = true,
+      // Portal
+      getPopupContainer,
+      forceRender,
+      autoDestroy,
+      // Popup
+      popup,
+      popupClassName,
+      popupStyle,
+      popupPlacement,
+      builtinPlacements = {},
+      popupAlign,
+      zIndex,
+      stretch,
+      getPopupClassNameFromAlign,
+      fresh,
+      alignPoint,
+      onPopupClick,
+      onPopupAlign,
+      // Arrow
+      arrow,
+      // Motion
+      popupMotion,
+      maskMotion,
+      // Private
+      getTriggerDOMNode,
+      ...restProps
+    } = props;
+    const mergedAutoDestroy = autoDestroy || false;
 
     // =========================== Mobile ===========================
-    var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      mobile = _React$useState2[0],
-      setMobile = _React$useState2[1];
-    useLayoutEffect(function () {
+    const [mobile, setMobile] = React.useState(false);
+    useLayoutEffect(() => {
       setMobile(isMobile());
     }, []);
 
     // ========================== Context ===========================
-    var subPopupElements = React.useRef({});
-    var parentContext = React.useContext(TriggerContext);
-    var context = React.useMemo(function () {
+    const subPopupElements = React.useRef({});
+    const parentContext = React.useContext(TriggerContext);
+    const context = React.useMemo(() => {
       return {
-        registerSubPopup: function registerSubPopup(id, subPopupEle) {
+        registerSubPopup: (id, subPopupEle) => {
           subPopupElements.current[id] = subPopupEle;
-          parentContext === null || parentContext === void 0 || parentContext.registerSubPopup(id, subPopupEle);
+          parentContext?.registerSubPopup(id, subPopupEle);
         }
       };
     }, [parentContext]);
 
     // =========================== Popup ============================
-    var id = useId();
-    var _React$useState3 = React.useState(null),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      popupEle = _React$useState4[0],
-      setPopupEle = _React$useState4[1];
+    const id = useId();
+    const [popupEle, setPopupEle] = React.useState(null);
 
     // Used for forwardRef popup. Not use internal
-    var externalPopupRef = React.useRef(null);
-    var setPopupRef = useEvent(function (node) {
+    const externalPopupRef = React.useRef(null);
+    const setPopupRef = useEvent(node => {
       externalPopupRef.current = node;
       if (isDOM(node) && popupEle !== node) {
         setPopupEle(node);
       }
-      parentContext === null || parentContext === void 0 || parentContext.registerSubPopup(id, node);
+      parentContext?.registerSubPopup(id, node);
     });
 
     // =========================== Target ===========================
     // Use state to control here since `useRef` update not trigger render
-    var _React$useState5 = React.useState(null),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      targetEle = _React$useState6[0],
-      setTargetEle = _React$useState6[1];
+    const [targetEle, setTargetEle] = React.useState(null);
 
     // Used for forwardRef target. Not use internal
-    var externalForwardRef = React.useRef(null);
-    var setTargetRef = useEvent(function (node) {
+    const externalForwardRef = React.useRef(null);
+    const setTargetRef = useEvent(node => {
       if (isDOM(node) && targetEle !== node) {
         setTargetEle(node);
         externalForwardRef.current = node;
@@ -134,191 +120,141 @@ export function generateTrigger() {
     });
 
     // ========================== Children ==========================
-    var child = React.Children.only(children);
-    var originChildProps = (child === null || child === void 0 ? void 0 : child.props) || {};
-    var cloneProps = {};
-    var inPopupOrChild = useEvent(function (ele) {
-      var _getShadowRoot, _getShadowRoot2;
-      var childDOM = targetEle;
-      return (childDOM === null || childDOM === void 0 ? void 0 : childDOM.contains(ele)) || ((_getShadowRoot = getShadowRoot(childDOM)) === null || _getShadowRoot === void 0 ? void 0 : _getShadowRoot.host) === ele || ele === childDOM || (popupEle === null || popupEle === void 0 ? void 0 : popupEle.contains(ele)) || ((_getShadowRoot2 = getShadowRoot(popupEle)) === null || _getShadowRoot2 === void 0 ? void 0 : _getShadowRoot2.host) === ele || ele === popupEle || Object.values(subPopupElements.current).some(function (subPopupEle) {
-        return (subPopupEle === null || subPopupEle === void 0 ? void 0 : subPopupEle.contains(ele)) || ele === subPopupEle;
-      });
+    const child = React.Children.only(children);
+    const originChildProps = child?.props || {};
+    const cloneProps = {};
+    const inPopupOrChild = useEvent(ele => {
+      const childDOM = targetEle;
+      return childDOM?.contains(ele) || getShadowRoot(childDOM)?.host === ele || ele === childDOM || popupEle?.contains(ele) || getShadowRoot(popupEle)?.host === ele || ele === popupEle || Object.values(subPopupElements.current).some(subPopupEle => subPopupEle?.contains(ele) || ele === subPopupEle);
     });
 
-    // =========================== Motion ===========================
-    var mergePopupMotion = getMotion(prefixCls, popupMotion, popupAnimation, popupTransitionName);
-    var mergeMaskMotion = getMotion(prefixCls, maskMotion, maskAnimation, maskTransitionName);
-
     // ============================ Open ============================
-    var _React$useState7 = React.useState(defaultPopupVisible || false),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      internalOpen = _React$useState8[0],
-      setInternalOpen = _React$useState8[1];
+    const [internalOpen, setInternalOpen] = React.useState(defaultPopupVisible || false);
 
     // Render still use props as first priority
-    var mergedOpen = popupVisible !== null && popupVisible !== void 0 ? popupVisible : internalOpen;
+    const mergedOpen = popupVisible ?? internalOpen;
 
     // We use effect sync here in case `popupVisible` back to `undefined`
-    var setMergedOpen = useEvent(function (nextOpen) {
+    const setMergedOpen = useEvent(nextOpen => {
       if (popupVisible === undefined) {
         setInternalOpen(nextOpen);
       }
     });
-    useLayoutEffect(function () {
+    useLayoutEffect(() => {
       setInternalOpen(popupVisible || false);
     }, [popupVisible]);
-    var openRef = React.useRef(mergedOpen);
+    const openRef = React.useRef(mergedOpen);
     openRef.current = mergedOpen;
-    var lastTriggerRef = React.useRef([]);
+    const lastTriggerRef = React.useRef([]);
     lastTriggerRef.current = [];
-    var internalTriggerOpen = useEvent(function (nextOpen) {
-      var _lastTriggerRef$curre;
+    const internalTriggerOpen = useEvent(nextOpen => {
       setMergedOpen(nextOpen);
 
       // Enter or Pointer will both trigger open state change
       // We only need take one to avoid duplicated change event trigger
       // Use `lastTriggerRef` to record last open type
-      if (((_lastTriggerRef$curre = lastTriggerRef.current[lastTriggerRef.current.length - 1]) !== null && _lastTriggerRef$curre !== void 0 ? _lastTriggerRef$curre : mergedOpen) !== nextOpen) {
+      if ((lastTriggerRef.current[lastTriggerRef.current.length - 1] ?? mergedOpen) !== nextOpen) {
         lastTriggerRef.current.push(nextOpen);
-        onPopupVisibleChange === null || onPopupVisibleChange === void 0 || onPopupVisibleChange(nextOpen);
+        onPopupVisibleChange?.(nextOpen);
       }
     });
 
     // Trigger for delay
-    var delayRef = React.useRef();
-    var clearDelay = function clearDelay() {
+    const delayRef = React.useRef();
+    const clearDelay = () => {
       clearTimeout(delayRef.current);
     };
-    var triggerOpen = function triggerOpen(nextOpen) {
-      var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    const triggerOpen = (nextOpen, delay = 0) => {
       clearDelay();
       if (delay === 0) {
         internalTriggerOpen(nextOpen);
       } else {
-        delayRef.current = setTimeout(function () {
+        delayRef.current = setTimeout(() => {
           internalTriggerOpen(nextOpen);
         }, delay * 1000);
       }
     };
-    React.useEffect(function () {
-      return clearDelay;
-    }, []);
+    React.useEffect(() => clearDelay, []);
 
     // ========================== Motion ============================
-    var _React$useState9 = React.useState(false),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      inMotion = _React$useState10[0],
-      setInMotion = _React$useState10[1];
-    useLayoutEffect(function (firstMount) {
+    const [inMotion, setInMotion] = React.useState(false);
+    useLayoutEffect(firstMount => {
       if (!firstMount || mergedOpen) {
         setInMotion(true);
       }
     }, [mergedOpen]);
-    var _React$useState11 = React.useState(null),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      motionPrepareResolve = _React$useState12[0],
-      setMotionPrepareResolve = _React$useState12[1];
+    const [motionPrepareResolve, setMotionPrepareResolve] = React.useState(null);
 
     // =========================== Align ============================
-    var _React$useState13 = React.useState(null),
-      _React$useState14 = _slicedToArray(_React$useState13, 2),
-      mousePos = _React$useState14[0],
-      setMousePos = _React$useState14[1];
-    var setMousePosByEvent = function setMousePosByEvent(event) {
+    const [mousePos, setMousePos] = React.useState(null);
+    const setMousePosByEvent = event => {
       setMousePos([event.clientX, event.clientY]);
     };
-    var _useAlign = useAlign(mergedOpen, popupEle, alignPoint && mousePos !== null ? mousePos : targetEle, popupPlacement, builtinPlacements, popupAlign, onPopupAlign),
-      _useAlign2 = _slicedToArray(_useAlign, 11),
-      ready = _useAlign2[0],
-      offsetX = _useAlign2[1],
-      offsetY = _useAlign2[2],
-      offsetR = _useAlign2[3],
-      offsetB = _useAlign2[4],
-      arrowX = _useAlign2[5],
-      arrowY = _useAlign2[6],
-      scaleX = _useAlign2[7],
-      scaleY = _useAlign2[8],
-      alignInfo = _useAlign2[9],
-      onAlign = _useAlign2[10];
-    var _useAction = useAction(mobile, action, showAction, hideAction),
-      _useAction2 = _slicedToArray(_useAction, 2),
-      showActions = _useAction2[0],
-      hideActions = _useAction2[1];
-    var clickToShow = showActions.has('click');
-    var clickToHide = hideActions.has('click') || hideActions.has('contextMenu');
-    var triggerAlign = useEvent(function () {
+    const [ready, offsetX, offsetY, offsetR, offsetB, arrowX, arrowY, scaleX, scaleY, alignInfo, onAlign] = useAlign(mergedOpen, popupEle, alignPoint && mousePos !== null ? mousePos : targetEle, popupPlacement, builtinPlacements, popupAlign, onPopupAlign);
+    const [showActions, hideActions] = useAction(mobile, action, showAction, hideAction);
+    const clickToShow = showActions.has('click');
+    const clickToHide = hideActions.has('click') || hideActions.has('contextMenu');
+    const triggerAlign = useEvent(() => {
       if (!inMotion) {
         onAlign();
       }
     });
-    var onScroll = function onScroll() {
+    const onScroll = () => {
       if (openRef.current && alignPoint && clickToHide) {
         triggerOpen(false);
       }
     };
     useWatch(mergedOpen, targetEle, popupEle, triggerAlign, onScroll);
-    useLayoutEffect(function () {
+    useLayoutEffect(() => {
       triggerAlign();
     }, [mousePos, popupPlacement]);
 
     // When no builtinPlacements and popupAlign changed
-    useLayoutEffect(function () {
-      if (mergedOpen && !(builtinPlacements !== null && builtinPlacements !== void 0 && builtinPlacements[popupPlacement])) {
+    useLayoutEffect(() => {
+      if (mergedOpen && !builtinPlacements?.[popupPlacement]) {
         triggerAlign();
       }
     }, [JSON.stringify(popupAlign)]);
-    var alignedClassName = React.useMemo(function () {
-      var baseClassName = getAlignPopupClassName(builtinPlacements, prefixCls, alignInfo, alignPoint);
-      return classNames(baseClassName, getPopupClassNameFromAlign === null || getPopupClassNameFromAlign === void 0 ? void 0 : getPopupClassNameFromAlign(alignInfo));
+    const alignedClassName = React.useMemo(() => {
+      const baseClassName = getAlignPopupClassName(builtinPlacements, prefixCls, alignInfo, alignPoint);
+      return classNames(baseClassName, getPopupClassNameFromAlign?.(alignInfo));
     }, [alignInfo, getPopupClassNameFromAlign, builtinPlacements, prefixCls, alignPoint]);
 
     // ============================ Refs ============================
-    React.useImperativeHandle(ref, function () {
-      return {
-        nativeElement: externalForwardRef.current,
-        popupElement: externalPopupRef.current,
-        forceAlign: triggerAlign
-      };
-    });
+    React.useImperativeHandle(ref, () => ({
+      nativeElement: externalForwardRef.current,
+      popupElement: externalPopupRef.current,
+      forceAlign: triggerAlign
+    }));
 
     // ========================== Stretch ===========================
-    var _React$useState15 = React.useState(0),
-      _React$useState16 = _slicedToArray(_React$useState15, 2),
-      targetWidth = _React$useState16[0],
-      setTargetWidth = _React$useState16[1];
-    var _React$useState17 = React.useState(0),
-      _React$useState18 = _slicedToArray(_React$useState17, 2),
-      targetHeight = _React$useState18[0],
-      setTargetHeight = _React$useState18[1];
-    var syncTargetSize = function syncTargetSize() {
+    const [targetWidth, setTargetWidth] = React.useState(0);
+    const [targetHeight, setTargetHeight] = React.useState(0);
+    const syncTargetSize = () => {
       if (stretch && targetEle) {
-        var rect = targetEle.getBoundingClientRect();
+        const rect = targetEle.getBoundingClientRect();
         setTargetWidth(rect.width);
         setTargetHeight(rect.height);
       }
     };
-    var onTargetResize = function onTargetResize() {
+    const onTargetResize = () => {
       syncTargetSize();
       triggerAlign();
     };
 
     // ========================== Motion ============================
-    var onVisibleChanged = function onVisibleChanged(visible) {
+    const onVisibleChanged = visible => {
       setInMotion(false);
       onAlign();
-      afterPopupVisibleChange === null || afterPopupVisibleChange === void 0 || afterPopupVisibleChange(visible);
+      afterPopupVisibleChange?.(visible);
     };
 
     // We will trigger align when motion is in prepare
-    var onPrepare = function onPrepare() {
-      return new Promise(function (resolve) {
-        syncTargetSize();
-        setMotionPrepareResolve(function () {
-          return resolve;
-        });
-      });
-    };
-    useLayoutEffect(function () {
+    const onPrepare = () => new Promise(resolve => {
+      syncTargetSize();
+      setMotionPrepareResolve(() => resolve);
+    });
+    useLayoutEffect(() => {
       if (motionPrepareResolve) {
         onAlign();
         motionPrepareResolve();
@@ -331,23 +267,18 @@ export function generateTrigger() {
      * Util wrapper for trigger action
      */
     function wrapperAction(eventName, nextOpen, delay, preEvent) {
-      cloneProps[eventName] = function (event) {
-        var _originChildProps$eve;
-        preEvent === null || preEvent === void 0 || preEvent(event);
+      cloneProps[eventName] = (event, ...args) => {
+        preEvent?.(event);
         triggerOpen(nextOpen, delay);
 
         // Pass to origin
-        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-          args[_key - 1] = arguments[_key];
-        }
-        (_originChildProps$eve = originChildProps[eventName]) === null || _originChildProps$eve === void 0 || _originChildProps$eve.call.apply(_originChildProps$eve, [originChildProps, event].concat(args));
+        originChildProps[eventName]?.(event, ...args);
       };
     }
 
     // ======================= Action: Click ========================
     if (clickToShow || clickToHide) {
-      cloneProps.onClick = function (event) {
-        var _originChildProps$onC;
+      cloneProps.onClick = (event, ...args) => {
         if (openRef.current && clickToHide) {
           triggerOpen(false);
         } else if (!openRef.current && clickToShow) {
@@ -356,49 +287,45 @@ export function generateTrigger() {
         }
 
         // Pass to origin
-        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-          args[_key2 - 1] = arguments[_key2];
-        }
-        (_originChildProps$onC = originChildProps.onClick) === null || _originChildProps$onC === void 0 || _originChildProps$onC.call.apply(_originChildProps$onC, [originChildProps, event].concat(args));
+        originChildProps.onClick?.(event, ...args);
       };
     }
 
     // Click to hide is special action since click popup element should not hide
-    var onPopupPointerDown = useWinClick(mergedOpen, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen);
+    const onPopupPointerDown = useWinClick(mergedOpen, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen);
 
     // ======================= Action: Hover ========================
-    var hoverToShow = showActions.has('hover');
-    var hoverToHide = hideActions.has('hover');
-    var onPopupMouseEnter;
-    var onPopupMouseLeave;
+    const hoverToShow = showActions.has('hover');
+    const hoverToHide = hideActions.has('hover');
+    let onPopupMouseEnter;
+    let onPopupMouseLeave;
     if (hoverToShow) {
       // Compatible with old browser which not support pointer event
-      wrapperAction('onMouseEnter', true, mouseEnterDelay, function (event) {
+      wrapperAction('onMouseEnter', true, mouseEnterDelay, event => {
         setMousePosByEvent(event);
       });
-      wrapperAction('onPointerEnter', true, mouseEnterDelay, function (event) {
+      wrapperAction('onPointerEnter', true, mouseEnterDelay, event => {
         setMousePosByEvent(event);
       });
-      onPopupMouseEnter = function onPopupMouseEnter(event) {
+      onPopupMouseEnter = event => {
         // Only trigger re-open when popup is visible
-        if ((mergedOpen || inMotion) && popupEle !== null && popupEle !== void 0 && popupEle.contains(event.target)) {
+        if ((mergedOpen || inMotion) && popupEle?.contains(event.target)) {
           triggerOpen(true, mouseEnterDelay);
         }
       };
 
       // Align Point
       if (alignPoint) {
-        cloneProps.onMouseMove = function (event) {
-          var _originChildProps$onM;
+        cloneProps.onMouseMove = event => {
           // setMousePosByEvent(event);
-          (_originChildProps$onM = originChildProps.onMouseMove) === null || _originChildProps$onM === void 0 || _originChildProps$onM.call(originChildProps, event);
+          originChildProps.onMouseMove?.(event);
         };
       }
     }
     if (hoverToHide) {
       wrapperAction('onMouseLeave', false, mouseLeaveDelay);
       wrapperAction('onPointerLeave', false, mouseLeaveDelay);
-      onPopupMouseLeave = function onPopupMouseLeave() {
+      onPopupMouseLeave = () => {
         triggerOpen(false, mouseLeaveDelay);
       };
     }
@@ -413,8 +340,7 @@ export function generateTrigger() {
 
     // ==================== Action: ContextMenu =====================
     if (showActions.has('contextMenu')) {
-      cloneProps.onContextMenu = function (event) {
-        var _originChildProps$onC2;
+      cloneProps.onContextMenu = (event, ...args) => {
         if (openRef.current && hideActions.has('contextMenu')) {
           triggerOpen(false);
         } else {
@@ -424,44 +350,41 @@ export function generateTrigger() {
         event.preventDefault();
 
         // Pass to origin
-        for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
-          args[_key3 - 1] = arguments[_key3];
-        }
-        (_originChildProps$onC2 = originChildProps.onContextMenu) === null || _originChildProps$onC2 === void 0 || _originChildProps$onC2.call.apply(_originChildProps$onC2, [originChildProps, event].concat(args));
+        originChildProps.onContextMenu?.(event, ...args);
       };
     }
 
-    // ========================= ClassName ==========================
-    if (className) {
-      cloneProps.className = classNames(originChildProps.className, className);
-    }
-
     // =========================== Render ===========================
-    var mergedChildrenProps = _objectSpread(_objectSpread({}, originChildProps), cloneProps);
+    const mergedChildrenProps = {
+      ...originChildProps,
+      ...cloneProps
+    };
 
     // Pass props into cloneProps for nest usage
-    var passedProps = {};
-    var passedEventList = ['onContextMenu', 'onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter', 'onMouseLeave', 'onFocus', 'onBlur'];
-    passedEventList.forEach(function (eventName) {
+    const passedProps = {};
+    const passedEventList = ['onContextMenu', 'onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter', 'onMouseLeave', 'onFocus', 'onBlur'];
+    passedEventList.forEach(eventName => {
       if (restProps[eventName]) {
-        passedProps[eventName] = function () {
-          var _mergedChildrenProps$;
-          for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-            args[_key4] = arguments[_key4];
-          }
-          (_mergedChildrenProps$ = mergedChildrenProps[eventName]) === null || _mergedChildrenProps$ === void 0 || _mergedChildrenProps$.call.apply(_mergedChildrenProps$, [mergedChildrenProps].concat(args));
-          restProps[eventName].apply(restProps, args);
+        passedProps[eventName] = (...args) => {
+          mergedChildrenProps[eventName]?.(...args);
+          restProps[eventName](...args);
         };
       }
     });
 
     // Child Node
-    var triggerNode = /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, mergedChildrenProps), passedProps));
-    var arrowPos = {
+    const triggerNode = /*#__PURE__*/React.cloneElement(child, {
+      ...mergedChildrenProps,
+      ...passedProps
+    });
+    const arrowPos = {
       x: arrowX,
       y: arrowY
     };
-    var innerArrow = arrow ? _objectSpread({}, arrow !== true ? arrow : {}) : null;
+    const innerArrow = arrow ? {
+      // true and Object likely
+      ...(arrow !== true ? arrow : {})
+    } : null;
 
     // Render
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, {
@@ -500,8 +423,8 @@ export function generateTrigger() {
       mask: mask
       // Motion
       ,
-      motion: mergePopupMotion,
-      maskMotion: mergeMaskMotion,
+      motion: popupMotion,
+      maskMotion: maskMotion,
       onVisibleChanged: onVisibleChanged,
       onPrepare: onPrepare
       // Portal

package/es/interface.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { CSSMotionProps } from 'rc-motion';
+import type { CSSMotionProps } from '@rc-component/motion';
 export type Placement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
 export type AlignPointTopBottom = 't' | 'b' | 'c';
 export type AlignPointLeftRight = 'l' | 'r' | 'c';