@rc-component/trigger 1.0.1 → 1.0.2

package/es/index.js

@@ -2,6 +2,7 @@ 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", "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 useEvent from "rc-util/es/hooks/useEvent";
@@ -16,434 +17,439 @@ import useWatch from "./hooks/useWatch";
 import Popup from "./Popup";
 import TriggerWrapper from "./TriggerWrapper";
 import { getAlignPopupClassName, getMotion, getWin } from "./util";
-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,
-    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() {
+  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,
+      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;
 
-  // ========================== Context ===========================
-  var subPopupElements = React.useRef({});
-  var parentContext = React.useContext(TriggerContext);
-  var context = React.useMemo(function () {
-    return {
-      registerSubPopup: function registerSubPopup(id, subPopupEle) {
-        subPopupElements.current[id] = subPopupEle;
-        parentContext === null || parentContext === void 0 ? void 0 : parentContext.registerSubPopup(id, subPopupEle);
-      }
-    };
-  }, [parentContext]);
+    // ========================== Context ===========================
+    var subPopupElements = React.useRef({});
+    var parentContext = React.useContext(TriggerContext);
+    var context = React.useMemo(function () {
+      return {
+        registerSubPopup: function registerSubPopup(id, subPopupEle) {
+          subPopupElements.current[id] = subPopupEle;
+          parentContext === null || parentContext === void 0 ? void 0 : parentContext.registerSubPopup(id, subPopupEle);
+        }
+      };
+    }, [parentContext]);
 
-  // =========================== Popup ============================
-  var id = useId();
-  var _React$useState = React.useState(null),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    popupEle = _React$useState2[0],
-    setPopupEle = _React$useState2[1];
-  var setPopupRef = React.useCallback(function (node) {
-    if (node instanceof HTMLElement) {
-      setPopupEle(node);
-    }
-    parentContext === null || parentContext === void 0 ? void 0 : parentContext.registerSubPopup(id, node);
-  }, []);
+    // =========================== Popup ============================
+    var id = useId();
+    var _React$useState = React.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      popupEle = _React$useState2[0],
+      setPopupEle = _React$useState2[1];
+    var setPopupRef = React.useCallback(function (node) {
+      if (node instanceof HTMLElement) {
+        setPopupEle(node);
+      }
+      parentContext === null || parentContext === void 0 ? void 0 : parentContext.registerSubPopup(id, node);
+    }, []);
 
-  // =========================== Target ===========================
-  // Use state to control here since `useRef` update not trigger render
-  var _React$useState3 = React.useState(null),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    targetEle = _React$useState4[0],
-    setTargetEle = _React$useState4[1];
-  var setTargetRef = React.useCallback(function (node) {
-    if (node instanceof HTMLElement) {
-      setTargetEle(node);
-    }
-  }, []);
+    // =========================== Target ===========================
+    // Use state to control here since `useRef` update not trigger render
+    var _React$useState3 = React.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      targetEle = _React$useState4[0],
+      setTargetEle = _React$useState4[1];
+    var setTargetRef = React.useCallback(function (node) {
+      if (node instanceof HTMLElement) {
+        setTargetEle(node);
+      }
+    }, []);
 
-  // ========================== 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 childDOM = targetEle;
-    return (childDOM === null || childDOM === void 0 ? void 0 : childDOM.contains(ele)) || ele === childDOM || (popupEle === null || popupEle === void 0 ? void 0 : popupEle.contains(ele)) || ele === popupEle || Object.values(subPopupElements.current).some(function (subPopupEle) {
-      return subPopupEle.contains(ele) || ele === subPopupEle;
+    // ========================== 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 childDOM = targetEle;
+      return (childDOM === null || childDOM === void 0 ? void 0 : childDOM.contains(ele)) || ele === childDOM || (popupEle === null || popupEle === void 0 ? void 0 : popupEle.contains(ele)) || ele === popupEle || Object.values(subPopupElements.current).some(function (subPopupEle) {
+        return subPopupEle.contains(ele) || ele === subPopupEle;
+      });
     });
-  });
 
-  // =========================== Motion ===========================
-  var mergePopupMotion = getMotion(prefixCls, popupMotion, popupAnimation, popupTransitionName);
-  var mergeMaskMotion = getMotion(prefixCls, maskMotion, maskAnimation, maskTransitionName);
+    // =========================== Motion ===========================
+    var mergePopupMotion = getMotion(prefixCls, popupMotion, popupAnimation, popupTransitionName);
+    var mergeMaskMotion = getMotion(prefixCls, maskMotion, maskAnimation, maskTransitionName);
 
-  // ============================ Open ============================
-  var _useMergedState = useMergedState(defaultPopupVisible || false, {
-      value: popupVisible
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    mergedOpen = _useMergedState2[0],
-    setMergedOpen = _useMergedState2[1];
-  var openRef = React.useRef(mergedOpen);
-  openRef.current = mergedOpen;
-  var internalTriggerOpen = useEvent(function (nextOpen) {
-    if (mergedOpen !== nextOpen) {
-      setMergedOpen(nextOpen);
-      onPopupVisibleChange === null || onPopupVisibleChange === void 0 ? void 0 : onPopupVisibleChange(nextOpen);
-    }
-  });
+    // ============================ Open ============================
+    var _useMergedState = useMergedState(defaultPopupVisible || false, {
+        value: popupVisible
+      }),
+      _useMergedState2 = _slicedToArray(_useMergedState, 2),
+      mergedOpen = _useMergedState2[0],
+      setMergedOpen = _useMergedState2[1];
+    var openRef = React.useRef(mergedOpen);
+    openRef.current = mergedOpen;
+    var internalTriggerOpen = useEvent(function (nextOpen) {
+      if (mergedOpen !== nextOpen) {
+        setMergedOpen(nextOpen);
+        onPopupVisibleChange === null || onPopupVisibleChange === void 0 ? void 0 : onPopupVisibleChange(nextOpen);
+      }
+    });
 
-  // Trigger for delay
-  var delayRef = React.useRef();
-  var clearDelay = function clearDelay() {
-    clearTimeout(delayRef.current);
-  };
-  var triggerOpen = function triggerOpen(nextOpen) {
-    var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    clearDelay();
-    if (delay === 0) {
-      internalTriggerOpen(nextOpen);
-    } else {
-      delayRef.current = setTimeout(function () {
+    // Trigger for delay
+    var delayRef = React.useRef();
+    var clearDelay = function clearDelay() {
+      clearTimeout(delayRef.current);
+    };
+    var triggerOpen = function triggerOpen(nextOpen) {
+      var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      clearDelay();
+      if (delay === 0) {
         internalTriggerOpen(nextOpen);
-      }, delay * 1000);
-    }
-  };
-  React.useEffect(function () {
-    return clearDelay;
-  }, []);
-
-  // ========================== Motion ============================
-  var _React$useState5 = React.useState(false),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    inMotion = _React$useState6[0],
-    setInMotion = _React$useState6[1];
-  useLayoutEffect(function () {
-    setInMotion(true);
-  }, [mergedOpen]);
-  var _React$useState7 = React.useState(null),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    motionPrepareResolve = _React$useState8[0],
-    setMotionPrepareResolve = _React$useState8[1];
-
-  // =========================== Align ============================
-  var _React$useState9 = React.useState([0, 0]),
-    _React$useState10 = _slicedToArray(_React$useState9, 2),
-    mousePos = _React$useState10[0],
-    setMousePos = _React$useState10[1];
-  var setMousePosByEvent = function setMousePosByEvent(event) {
-    setMousePos([event.clientX, event.clientY]);
-  };
-  var _useAlign = useAlign(mergedOpen, popupEle, alignPoint ? mousePos : targetEle, popupPlacement, builtinPlacements, popupAlign, onPopupAlign),
-    _useAlign2 = _slicedToArray(_useAlign, 9),
-    ready = _useAlign2[0],
-    offsetX = _useAlign2[1],
-    offsetY = _useAlign2[2],
-    arrowX = _useAlign2[3],
-    arrowY = _useAlign2[4],
-    scaleX = _useAlign2[5],
-    scaleY = _useAlign2[6],
-    alignInfo = _useAlign2[7],
-    onAlign = _useAlign2[8];
-  var triggerAlign = useEvent(function () {
-    if (!inMotion) {
-      onAlign();
-    }
-  });
-  useWatch(mergedOpen, targetEle, popupEle, triggerAlign);
-  useLayoutEffect(function () {
-    triggerAlign();
-  }, [mousePos]);
-  var alignedClassName = React.useMemo(function () {
-    var baseClassName = getAlignPopupClassName(builtinPlacements, prefixCls, alignInfo, alignPoint);
-    return classNames(baseClassName, getPopupClassNameFromAlign === null || getPopupClassNameFromAlign === void 0 ? void 0 : getPopupClassNameFromAlign(alignInfo));
-  }, [alignInfo, getPopupClassNameFromAlign, builtinPlacements, prefixCls, alignPoint]);
-  React.useImperativeHandle(ref, function () {
-    return {
-      forceAlign: triggerAlign
+      } else {
+        delayRef.current = setTimeout(function () {
+          internalTriggerOpen(nextOpen);
+        }, delay * 1000);
+      }
     };
-  });
+    React.useEffect(function () {
+      return clearDelay;
+    }, []);
 
-  // ========================== Motion ============================
-  var onVisibleChanged = function onVisibleChanged(visible) {
-    setInMotion(false);
-    onAlign();
-    afterPopupVisibleChange === null || afterPopupVisibleChange === void 0 ? void 0 : afterPopupVisibleChange(visible);
-  };
+    // ========================== Motion ============================
+    var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      inMotion = _React$useState6[0],
+      setInMotion = _React$useState6[1];
+    useLayoutEffect(function () {
+      setInMotion(true);
+    }, [mergedOpen]);
+    var _React$useState7 = React.useState(null),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      motionPrepareResolve = _React$useState8[0],
+      setMotionPrepareResolve = _React$useState8[1];
 
-  // We will trigger align when motion is in prepare
-  var onPrepare = function onPrepare() {
-    return new Promise(function (resolve) {
-      setMotionPrepareResolve(function () {
-        return resolve;
-      });
+    // =========================== Align ============================
+    var _React$useState9 = React.useState([0, 0]),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      mousePos = _React$useState10[0],
+      setMousePos = _React$useState10[1];
+    var setMousePosByEvent = function setMousePosByEvent(event) {
+      setMousePos([event.clientX, event.clientY]);
+    };
+    var _useAlign = useAlign(mergedOpen, popupEle, alignPoint ? mousePos : targetEle, popupPlacement, builtinPlacements, popupAlign, onPopupAlign),
+      _useAlign2 = _slicedToArray(_useAlign, 9),
+      ready = _useAlign2[0],
+      offsetX = _useAlign2[1],
+      offsetY = _useAlign2[2],
+      arrowX = _useAlign2[3],
+      arrowY = _useAlign2[4],
+      scaleX = _useAlign2[5],
+      scaleY = _useAlign2[6],
+      alignInfo = _useAlign2[7],
+      onAlign = _useAlign2[8];
+    var triggerAlign = useEvent(function () {
+      if (!inMotion) {
+        onAlign();
+      }
+    });
+    useWatch(mergedOpen, targetEle, popupEle, triggerAlign);
+    useLayoutEffect(function () {
+      triggerAlign();
+    }, [mousePos]);
+    var alignedClassName = React.useMemo(function () {
+      var baseClassName = getAlignPopupClassName(builtinPlacements, prefixCls, alignInfo, alignPoint);
+      return classNames(baseClassName, getPopupClassNameFromAlign === null || getPopupClassNameFromAlign === void 0 ? void 0 : getPopupClassNameFromAlign(alignInfo));
+    }, [alignInfo, getPopupClassNameFromAlign, builtinPlacements, prefixCls, alignPoint]);
+    React.useImperativeHandle(ref, function () {
+      return {
+        forceAlign: triggerAlign
+      };
     });
-  };
-  useLayoutEffect(function () {
-    if (motionPrepareResolve) {
-      onAlign();
-      motionPrepareResolve();
-      setMotionPrepareResolve(null);
-    }
-  }, [motionPrepareResolve]);
-
-  // ========================== Stretch ===========================
-  var _React$useState11 = React.useState(0),
-    _React$useState12 = _slicedToArray(_React$useState11, 2),
-    targetWidth = _React$useState12[0],
-    setTargetWidth = _React$useState12[1];
-  var _React$useState13 = React.useState(0),
-    _React$useState14 = _slicedToArray(_React$useState13, 2),
-    targetHeight = _React$useState14[0],
-    setTargetHeight = _React$useState14[1];
-  var onTargetResize = function onTargetResize(_, ele) {
-    triggerAlign();
-    if (stretch) {
-      var rect = ele.getBoundingClientRect();
-      setTargetWidth(rect.width);
-      setTargetHeight(rect.height);
-    }
-  };
-
-  // =========================== Action ===========================
-  var _useAction = useAction(action, showAction, hideAction),
-    _useAction2 = _slicedToArray(_useAction, 2),
-    showActions = _useAction2[0],
-    hideActions = _useAction2[1];
-
-  // Util wrapper for trigger action
-  var wrapperAction = function wrapperAction(eventName, nextOpen, delay, preEvent) {
-    cloneProps[eventName] = function (event) {
-      var _originChildProps$eve;
-      preEvent === null || preEvent === void 0 ? void 0 : 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 ? void 0 : _originChildProps$eve.call.apply(_originChildProps$eve, [originChildProps, event].concat(args));
+    // ========================== Motion ============================
+    var onVisibleChanged = function onVisibleChanged(visible) {
+      setInMotion(false);
+      onAlign();
+      afterPopupVisibleChange === null || afterPopupVisibleChange === void 0 ? void 0 : afterPopupVisibleChange(visible);
     };
-  };
 
-  // ======================= Action: Click ========================
-  var clickToShow = showActions.has('click');
-  var clickToHide = hideActions.has('click') || hideActions.has('contextMenu');
-  if (clickToShow || clickToHide) {
-    cloneProps.onClick = function (event) {
-      var _originChildProps$onC;
-      if (openRef.current && clickToHide) {
-        triggerOpen(false);
-      } else if (!openRef.current && clickToShow) {
-        setMousePosByEvent(event);
-        triggerOpen(true);
+    // We will trigger align when motion is in prepare
+    var onPrepare = function onPrepare() {
+      return new Promise(function (resolve) {
+        setMotionPrepareResolve(function () {
+          return resolve;
+        });
+      });
+    };
+    useLayoutEffect(function () {
+      if (motionPrepareResolve) {
+        onAlign();
+        motionPrepareResolve();
+        setMotionPrepareResolve(null);
       }
+    }, [motionPrepareResolve]);
 
-      // 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];
+    // ========================== Stretch ===========================
+    var _React$useState11 = React.useState(0),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      targetWidth = _React$useState12[0],
+      setTargetWidth = _React$useState12[1];
+    var _React$useState13 = React.useState(0),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      targetHeight = _React$useState14[0],
+      setTargetHeight = _React$useState14[1];
+    var onTargetResize = function onTargetResize(_, ele) {
+      triggerAlign();
+      if (stretch) {
+        var rect = ele.getBoundingClientRect();
+        setTargetWidth(rect.width);
+        setTargetHeight(rect.height);
       }
-      (_originChildProps$onC = originChildProps.onClick) === null || _originChildProps$onC === void 0 ? void 0 : _originChildProps$onC.call.apply(_originChildProps$onC, [originChildProps, event].concat(args));
     };
-  }
 
-  // Click to hide is special action since click popup element should not hide
-  React.useEffect(function () {
-    if (clickToHide && popupEle && (!mask || maskClosable)) {
-      var onWindowClick = function onWindowClick(_ref) {
-        var target = _ref.target;
-        if (openRef.current && !inPopupOrChild(target)) {
-          triggerOpen(false);
+    // =========================== Action ===========================
+    var _useAction = useAction(action, showAction, hideAction),
+      _useAction2 = _slicedToArray(_useAction, 2),
+      showActions = _useAction2[0],
+      hideActions = _useAction2[1];
+
+    // Util wrapper for trigger action
+    var wrapperAction = function wrapperAction(eventName, nextOpen, delay, preEvent) {
+      cloneProps[eventName] = function (event) {
+        var _originChildProps$eve;
+        preEvent === null || preEvent === void 0 ? void 0 : 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 ? void 0 : _originChildProps$eve.call.apply(_originChildProps$eve, [originChildProps, event].concat(args));
       };
-      var win = getWin(popupEle);
-      win.addEventListener('click', onWindowClick);
-      return function () {
-        win.removeEventListener('click', onWindowClick);
-      };
-    }
-  }, [clickToHide, popupEle, mask, maskClosable]);
-
-  // ======================= Action: Hover ========================
-  var hoverToShow = showActions.has('hover');
-  var hoverToHide = hideActions.has('hover');
-  var onPopupMouseEnter;
-  var onPopupMouseLeave;
-  if (hoverToShow) {
-    wrapperAction('onMouseEnter', true, mouseEnterDelay, function (event) {
-      setMousePosByEvent(event);
-    });
-    onPopupMouseEnter = function onPopupMouseEnter() {
-      triggerOpen(true, mouseEnterDelay);
     };
 
-    // Align Point
-    if (alignPoint) {
-      cloneProps.onMouseMove = function (event) {
-        var _originChildProps$onM;
-        // setMousePosByEvent(event);
-        (_originChildProps$onM = originChildProps.onMouseMove) === null || _originChildProps$onM === void 0 ? void 0 : _originChildProps$onM.call(originChildProps, event);
+    // ======================= Action: Click ========================
+    var clickToShow = showActions.has('click');
+    var clickToHide = hideActions.has('click') || hideActions.has('contextMenu');
+    if (clickToShow || clickToHide) {
+      cloneProps.onClick = function (event) {
+        var _originChildProps$onC;
+        if (openRef.current && clickToHide) {
+          triggerOpen(false);
+        } else if (!openRef.current && clickToShow) {
+          setMousePosByEvent(event);
+          triggerOpen(true);
+        }
+
+        // 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 ? void 0 : _originChildProps$onC.call.apply(_originChildProps$onC, [originChildProps, event].concat(args));
       };
     }
-  }
-  if (hoverToHide) {
-    wrapperAction('onMouseLeave', false, mouseLeaveDelay);
-    onPopupMouseLeave = function onPopupMouseLeave() {
-      triggerOpen(false, mouseLeaveDelay);
-    };
-  }
 
-  // ======================= Action: Focus ========================
-  if (showActions.has('focus')) {
-    wrapperAction('onFocus', true, focusDelay);
-  }
-  if (hideActions.has('focus')) {
-    wrapperAction('onBlur', false, blurDelay);
-  }
+    // Click to hide is special action since click popup element should not hide
+    React.useEffect(function () {
+      if (clickToHide && popupEle && (!mask || maskClosable)) {
+        var onWindowClick = function onWindowClick(_ref) {
+          var target = _ref.target;
+          if (openRef.current && !inPopupOrChild(target)) {
+            triggerOpen(false);
+          }
+        };
+        var win = getWin(popupEle);
+        win.addEventListener('click', onWindowClick);
+        return function () {
+          win.removeEventListener('click', onWindowClick);
+        };
+      }
+    }, [clickToHide, popupEle, mask, maskClosable]);
 
-  // ==================== Action: ContextMenu =====================
-  if (showActions.has('contextMenu')) {
-    cloneProps.onContextMenu = function (event) {
-      var _originChildProps$onC2;
-      setMousePosByEvent(event);
-      triggerOpen(true);
-      event.preventDefault();
+    // ======================= Action: Hover ========================
+    var hoverToShow = showActions.has('hover');
+    var hoverToHide = hideActions.has('hover');
+    var onPopupMouseEnter;
+    var onPopupMouseLeave;
+    if (hoverToShow) {
+      wrapperAction('onMouseEnter', true, mouseEnterDelay, function (event) {
+        setMousePosByEvent(event);
+      });
+      onPopupMouseEnter = function onPopupMouseEnter() {
+        triggerOpen(true, mouseEnterDelay);
+      };
 
-      // 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];
+      // Align Point
+      if (alignPoint) {
+        cloneProps.onMouseMove = function (event) {
+          var _originChildProps$onM;
+          // setMousePosByEvent(event);
+          (_originChildProps$onM = originChildProps.onMouseMove) === null || _originChildProps$onM === void 0 ? void 0 : _originChildProps$onM.call(originChildProps, event);
+        };
       }
-      (_originChildProps$onC2 = originChildProps.onContextMenu) === null || _originChildProps$onC2 === void 0 ? void 0 : _originChildProps$onC2.call.apply(_originChildProps$onC2, [originChildProps, event].concat(args));
-    };
-  }
+    }
+    if (hoverToHide) {
+      wrapperAction('onMouseLeave', false, mouseLeaveDelay);
+      onPopupMouseLeave = function onPopupMouseLeave() {
+        triggerOpen(false, mouseLeaveDelay);
+      };
+    }
 
-  // ========================= ClassName ==========================
-  if (className) {
-    cloneProps.className = classNames(originChildProps.className, className);
-  }
+    // ======================= Action: Focus ========================
+    if (showActions.has('focus')) {
+      wrapperAction('onFocus', true, focusDelay);
+    }
+    if (hideActions.has('focus')) {
+      wrapperAction('onBlur', false, blurDelay);
+    }
 
-  // =========================== Render ===========================
-  var mergedChildrenProps = _objectSpread(_objectSpread({}, originChildProps), cloneProps);
+    // ==================== Action: ContextMenu =====================
+    if (showActions.has('contextMenu')) {
+      cloneProps.onContextMenu = function (event) {
+        var _originChildProps$onC2;
+        setMousePosByEvent(event);
+        triggerOpen(true);
+        event.preventDefault();
 
-  // Pass props into cloneProps for nest usage
-  var passedProps = {};
-  var passedEventList = ['onContextMenu', 'onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter', 'onMouseLeave', 'onFocus', 'onBlur'];
-  passedEventList.forEach(function (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];
+        // 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];
         }
-        (_mergedChildrenProps$ = mergedChildrenProps[eventName]) === null || _mergedChildrenProps$ === void 0 ? void 0 : _mergedChildrenProps$.call.apply(_mergedChildrenProps$, [mergedChildrenProps].concat(args));
-        restProps[eventName].apply(restProps, args);
+        (_originChildProps$onC2 = originChildProps.onContextMenu) === null || _originChildProps$onC2 === void 0 ? void 0 : _originChildProps$onC2.call.apply(_originChildProps$onC2, [originChildProps, event].concat(args));
       };
     }
-  });
 
-  // Child Node
-  var triggerNode = /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, mergedChildrenProps), passedProps));
+    // ========================= ClassName ==========================
+    if (className) {
+      cloneProps.className = classNames(originChildProps.className, className);
+    }
+
+    // =========================== Render ===========================
+    var mergedChildrenProps = _objectSpread(_objectSpread({}, 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) {
+      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 ? void 0 : _mergedChildrenProps$.call.apply(_mergedChildrenProps$, [mergedChildrenProps].concat(args));
+          restProps[eventName].apply(restProps, args);
+        };
+      }
+    });
+
+    // Child Node
+    var triggerNode = /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, mergedChildrenProps), passedProps));
 
-  // Render
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TriggerContext.Provider, {
-    value: context
-  }, /*#__PURE__*/React.createElement(Popup, {
-    ref: setPopupRef,
-    prefixCls: prefixCls,
-    popup: popup,
-    className: classNames(popupClassName, alignedClassName),
-    style: popupStyle,
-    target: targetEle,
-    onMouseEnter: onPopupMouseEnter,
-    onMouseLeave: onPopupMouseLeave,
-    zIndex: zIndex
-    // Open
-    ,
-    open: mergedOpen,
-    keepDom: inMotion
-    // Click
-    ,
-    onClick: onPopupClick
-    // Mask
-    ,
-    mask: mask
-    // Motion
-    ,
-    motion: mergePopupMotion,
-    maskMotion: mergeMaskMotion,
-    onVisibleChanged: onVisibleChanged,
-    onPrepare: onPrepare
-    // Portal
-    ,
-    forceRender: forceRender,
-    autoDestroy: mergedAutoDestroy,
-    getPopupContainer: getPopupContainer
-    // Arrow
-    ,
-    align: alignInfo,
-    arrow: arrow
-    // Align
-    ,
-    ready: ready,
-    offsetX: offsetX,
-    offsetY: offsetY,
-    arrowX: arrowX,
-    arrowY: arrowY,
-    onAlign: triggerAlign
-    // Stretch
-    ,
-    stretch: stretch,
-    targetWidth: targetWidth / scaleX,
-    targetHeight: targetHeight / scaleY
-  })), /*#__PURE__*/React.createElement(ResizeObserver, {
-    disabled: !mergedOpen,
-    ref: setTargetRef,
-    onResize: onTargetResize
-  }, /*#__PURE__*/React.createElement(TriggerWrapper, {
-    getTriggerDOMNode: getTriggerDOMNode
-  }, triggerNode)));
-});
-if (process.env.NODE_ENV !== 'production') {
-  Trigger.displayName = 'Trigger';
+    // Render
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TriggerContext.Provider, {
+      value: context
+    }, /*#__PURE__*/React.createElement(Popup, {
+      portal: PortalComponent,
+      ref: setPopupRef,
+      prefixCls: prefixCls,
+      popup: popup,
+      className: classNames(popupClassName, alignedClassName),
+      style: popupStyle,
+      target: targetEle,
+      onMouseEnter: onPopupMouseEnter,
+      onMouseLeave: onPopupMouseLeave,
+      zIndex: zIndex
+      // Open
+      ,
+      open: mergedOpen,
+      keepDom: inMotion
+      // Click
+      ,
+      onClick: onPopupClick
+      // Mask
+      ,
+      mask: mask
+      // Motion
+      ,
+      motion: mergePopupMotion,
+      maskMotion: mergeMaskMotion,
+      onVisibleChanged: onVisibleChanged,
+      onPrepare: onPrepare
+      // Portal
+      ,
+      forceRender: forceRender,
+      autoDestroy: mergedAutoDestroy,
+      getPopupContainer: getPopupContainer
+      // Arrow
+      ,
+      align: alignInfo,
+      arrow: arrow
+      // Align
+      ,
+      ready: ready,
+      offsetX: offsetX,
+      offsetY: offsetY,
+      arrowX: arrowX,
+      arrowY: arrowY,
+      onAlign: triggerAlign
+      // Stretch
+      ,
+      stretch: stretch,
+      targetWidth: targetWidth / scaleX,
+      targetHeight: targetHeight / scaleY
+    })), /*#__PURE__*/React.createElement(ResizeObserver, {
+      disabled: !mergedOpen,
+      ref: setTargetRef,
+      onResize: onTargetResize
+    }, /*#__PURE__*/React.createElement(TriggerWrapper, {
+      getTriggerDOMNode: getTriggerDOMNode
+    }, triggerNode)));
+  });
+  if (process.env.NODE_ENV !== 'production') {
+    Trigger.displayName = 'Trigger';
+  }
+  return Trigger;
 }
-export default Trigger;
+export default generateTrigger(Portal);