@rc-component/trigger 2.0.0-0 → 2.1.0

package/es/Popup/index.js

@@ -147,7 +147,7 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
       visible: open,
       onVisibleChanged: function onVisibleChanged(nextVisible) {
         var _motion$onVisibleChan;
-        motion === null || motion === void 0 ? void 0 : (_motion$onVisibleChan = motion.onVisibleChanged) === null || _motion$onVisibleChan === void 0 ? void 0 : _motion$onVisibleChan.call(motion, nextVisible);
+        motion === null || motion === void 0 || (_motion$onVisibleChan = motion.onVisibleChanged) === null || _motion$onVisibleChan === void 0 || _motion$onVisibleChan.call(motion, nextVisible);
         _onVisibleChanged(nextVisible);
       }
     }), function (_ref, motionRef) {

package/es/hooks/useAlign.js

@@ -118,13 +118,14 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       var originTop = popupElement.style.top;
       var originRight = popupElement.style.right;
       var originBottom = popupElement.style.bottom;
+      var originOverflow = popupElement.style.overflow;
 
       // Placement
       var placementInfo = _objectSpread(_objectSpread({}, builtinPlacements[placement]), popupAlign);
 
       // placeholder element
       var placeholderElement = doc.createElement('div');
-      (_popupElement$parentE = popupElement.parentElement) === null || _popupElement$parentE === void 0 ? void 0 : _popupElement$parentE.appendChild(placeholderElement);
+      (_popupElement$parentE = popupElement.parentElement) === null || _popupElement$parentE === void 0 || _popupElement$parentE.appendChild(placeholderElement);
       placeholderElement.style.left = "".concat(popupElement.offsetLeft, "px");
       placeholderElement.style.top = "".concat(popupElement.offsetTop, "px");
       placeholderElement.style.position = popupPosition;
@@ -136,6 +137,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       popupElement.style.top = '0';
       popupElement.style.right = 'auto';
       popupElement.style.bottom = 'auto';
+      popupElement.style.overflow = 'hidden';
 
       // Calculate align style, we should consider `transform` case
       var targetRect;
@@ -208,7 +210,8 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       popupElement.style.top = originTop;
       popupElement.style.right = originRight;
       popupElement.style.bottom = originBottom;
-      (_popupElement$parentE2 = popupElement.parentElement) === null || _popupElement$parentE2 === void 0 ? void 0 : _popupElement$parentE2.removeChild(placeholderElement);
+      popupElement.style.overflow = originOverflow;
+      (_popupElement$parentE2 = popupElement.parentElement) === null || _popupElement$parentE2 === void 0 || _popupElement$parentE2.removeChild(placeholderElement);
 
       // Calculate scale
       var _scaleX = toNum(Math.round(popupWidth / parseFloat(width) * 1000) / 1000);
@@ -465,7 +468,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       var minBottom = Math.min(popupBottom, targetBottom);
       var yCenter = (maxTop + minBottom) / 2;
       var nextArrowY = yCenter - popupTop;
-      onPopupAlign === null || onPopupAlign === void 0 ? void 0 : onPopupAlign(popupEle, nextAlignInfo);
+      onPopupAlign === null || onPopupAlign === void 0 || onPopupAlign(popupEle, nextAlignInfo);
 
       // Additional calculate right & bottom position
       var offsetX4Right = popupMirrorRect.right - popupRect.x - (nextOffsetX + popupRect.width);

package/es/hooks/useWinClick.js

@@ -1,85 +1,44 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { warning } from 'rc-util';
 import { getShadowRoot } from "rc-util/es/Dom/shadow";
-import raf from "rc-util/es/raf";
+import { warning } from "rc-util/es/warning";
 import * as React from 'react';
 import { getWin } from "../util";
 export default function useWinClick(open, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen) {
   var openRef = React.useRef(open);
-
-  // Window click to hide should be lock to avoid trigger lock immediately
-  var lockRef = React.useRef(false);
-  if (openRef.current !== open) {
-    lockRef.current = true;
-    openRef.current = open;
-  }
-  React.useEffect(function () {
-    var id = raf(function () {
-      lockRef.current = false;
-    });
-    return function () {
-      raf.cancel(id);
-    };
-  }, [open]);
+  openRef.current = open;
 
   // Click to hide is special action since click popup element should not hide
   React.useEffect(function () {
     if (clickToHide && popupEle && (!mask || maskClosable)) {
-      var genClickEvents = function genClickEvents() {
-        var clickInside = false;
-
-        // User may mouseDown inside and drag out of popup and mouse up
-        // Record here to prevent close
-        var onWindowMouseDown = function onWindowMouseDown(_ref) {
-          var target = _ref.target;
-          clickInside = inPopupOrChild(target);
-        };
-        var onWindowClick = function onWindowClick(_ref2) {
-          var target = _ref2.target;
-          if (!lockRef.current && openRef.current && !clickInside && !inPopupOrChild(target)) {
-            triggerOpen(false);
-          }
-        };
-        return [onWindowMouseDown, onWindowClick];
+      var onTriggerClose = function onTriggerClose(_ref) {
+        var target = _ref.target;
+        if (openRef.current && !inPopupOrChild(target)) {
+          triggerOpen(false);
+        }
       };
-
-      // Events
-      var _genClickEvents = genClickEvents(),
-        _genClickEvents2 = _slicedToArray(_genClickEvents, 2),
-        onWinMouseDown = _genClickEvents2[0],
-        onWinClick = _genClickEvents2[1];
-      var _genClickEvents3 = genClickEvents(),
-        _genClickEvents4 = _slicedToArray(_genClickEvents3, 2),
-        onShadowMouseDown = _genClickEvents4[0],
-        onShadowClick = _genClickEvents4[1];
       var win = getWin(popupEle);
-      win.addEventListener('mousedown', onWinMouseDown, true);
-      win.addEventListener('click', onWinClick, true);
-      win.addEventListener('contextmenu', onWinClick, true);
+      win.addEventListener('mousedown', onTriggerClose, true);
+      win.addEventListener('contextmenu', onTriggerClose, true);
 
       // shadow root
       var targetShadowRoot = getShadowRoot(targetEle);
       if (targetShadowRoot) {
-        targetShadowRoot.addEventListener('mousedown', onShadowMouseDown, true);
-        targetShadowRoot.addEventListener('click', onShadowClick, true);
-        targetShadowRoot.addEventListener('contextmenu', onShadowClick, true);
+        targetShadowRoot.addEventListener('mousedown', onTriggerClose, true);
+        targetShadowRoot.addEventListener('contextmenu', onTriggerClose, true);
       }
 
       // Warning if target and popup not in same root
       if (process.env.NODE_ENV !== 'production') {
         var _targetEle$getRootNod, _popupEle$getRootNode;
-        var targetRoot = targetEle === null || targetEle === void 0 ? void 0 : (_targetEle$getRootNod = targetEle.getRootNode) === null || _targetEle$getRootNod === void 0 ? void 0 : _targetEle$getRootNod.call(targetEle);
+        var targetRoot = targetEle === null || targetEle === void 0 || (_targetEle$getRootNod = targetEle.getRootNode) === null || _targetEle$getRootNod === void 0 ? void 0 : _targetEle$getRootNod.call(targetEle);
         var popupRoot = (_popupEle$getRootNode = popupEle.getRootNode) === null || _popupEle$getRootNode === void 0 ? void 0 : _popupEle$getRootNode.call(popupEle);
         warning(targetRoot === popupRoot, "trigger element and popup element should in same shadow root.");
       }
       return function () {
-        win.removeEventListener('mousedown', onWinMouseDown, true);
-        win.removeEventListener('click', onWinClick, true);
-        win.removeEventListener('contextmenu', onWinClick, true);
+        win.removeEventListener('mousedown', onTriggerClose, true);
+        win.removeEventListener('contextmenu', onTriggerClose, true);
         if (targetShadowRoot) {
-          targetShadowRoot.removeEventListener('mousedown', onShadowMouseDown, true);
-          targetShadowRoot.removeEventListener('click', onShadowClick, true);
-          targetShadowRoot.removeEventListener('contextmenu', onShadowClick, true);
+          targetShadowRoot.removeEventListener('mousedown', onTriggerClose, true);
+          targetShadowRoot.removeEventListener('contextmenu', onTriggerClose, true);
         }
       };
     }

package/es/index.d.ts

@@ -1,8 +1,10 @@
 import type { CSSMotionProps } from 'rc-motion';
 import * as React from 'react';
 import type { ActionType, AlignType, AnimationType, ArrowTypeOuter, BuildInPlacements, TransitionNameType } from './interface';
-export type { BuildInPlacements, AlignType, ActionType, ArrowTypeOuter as ArrowType, };
+export type { ActionType, AlignType, ArrowTypeOuter as ArrowType, BuildInPlacements, };
 export interface TriggerRef {
+    nativeElement: HTMLElement;
+    popupElement: HTMLElement;
     forceAlign: VoidFunction;
 }
 export interface TriggerProps {

package/es/index.js

@@ -12,20 +12,21 @@ import useId from "rc-util/es/hooks/useId";
 import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
 import isMobile from "rc-util/es/isMobile";
 import * as React from 'react';
-import { flushSync } from 'react-dom';
+import Popup from "./Popup";
+import TriggerWrapper from "./TriggerWrapper";
 import TriggerContext from "./context";
 import useAction from "./hooks/useAction";
 import useAlign from "./hooks/useAlign";
 import useWatch from "./hooks/useWatch";
 import useWinClick from "./hooks/useWinClick";
-import Popup from "./Popup";
-import TriggerWrapper from "./TriggerWrapper";
 import { getAlignPopupClassName, getMotion } from "./util";
 
 // Removed Props List
 // Seems this can be auto
 // getDocument?: (element?: HTMLElement) => Document;
+
 // 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) {
@@ -94,7 +95,7 @@ export function generateTrigger() {
       return {
         registerSubPopup: function registerSubPopup(id, subPopupEle) {
           subPopupElements.current[id] = subPopupEle;
-          parentContext === null || parentContext === void 0 ? void 0 : parentContext.registerSubPopup(id, subPopupEle);
+          parentContext === null || parentContext === void 0 || parentContext.registerSubPopup(id, subPopupEle);
         }
       };
     }, [parentContext]);
@@ -105,11 +106,15 @@ export function generateTrigger() {
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       popupEle = _React$useState4[0],
       setPopupEle = _React$useState4[1];
+
+    // Used for forwardRef popup. Not use internal
+    var externalPopupRef = React.useRef(null);
     var setPopupRef = useEvent(function (node) {
+      externalPopupRef.current = node;
       if (isDOM(node) && popupEle !== node) {
         setPopupEle(node);
       }
-      parentContext === null || parentContext === void 0 ? void 0 : parentContext.registerSubPopup(id, node);
+      parentContext === null || parentContext === void 0 || parentContext.registerSubPopup(id, node);
     });
 
     // =========================== Target ===========================
@@ -118,9 +123,13 @@ export function generateTrigger() {
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       targetEle = _React$useState6[0],
       setTargetEle = _React$useState6[1];
+
+    // Used for forwardRef target. Not use internal
+    var externalForwardRef = React.useRef(null);
     var setTargetRef = useEvent(function (node) {
       if (isDOM(node) && targetEle !== node) {
         setTargetEle(node);
+        externalForwardRef.current = node;
       }
     });
 
@@ -160,15 +169,19 @@ export function generateTrigger() {
     }, [popupVisible]);
     var openRef = React.useRef(mergedOpen);
     openRef.current = mergedOpen;
+    var lastTriggerRef = React.useRef([]);
+    lastTriggerRef.current = [];
     var internalTriggerOpen = useEvent(function (nextOpen) {
+      var _lastTriggerRef$curre;
+      setMergedOpen(nextOpen);
+
       // Enter or Pointer will both trigger open state change
       // We only need take one to avoid duplicated change event trigger
-      flushSync(function () {
-        if (mergedOpen !== nextOpen) {
-          setMergedOpen(nextOpen);
-          onPopupVisibleChange === null || onPopupVisibleChange === void 0 ? void 0 : onPopupVisibleChange(nextOpen);
-        }
-      });
+      // 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) {
+        lastTriggerRef.current.push(nextOpen);
+        onPopupVisibleChange === null || onPopupVisibleChange === void 0 || onPopupVisibleChange(nextOpen);
+      }
     });
 
     // Trigger for delay
@@ -258,8 +271,12 @@ export function generateTrigger() {
       var baseClassName = getAlignPopupClassName(builtinPlacements, prefixCls, alignInfo, alignPoint);
       return classNames(baseClassName, getPopupClassNameFromAlign === null || getPopupClassNameFromAlign === void 0 ? void 0 : getPopupClassNameFromAlign(alignInfo));
     }, [alignInfo, getPopupClassNameFromAlign, builtinPlacements, prefixCls, alignPoint]);
+
+    // ============================ Refs ============================
     React.useImperativeHandle(ref, function () {
       return {
+        nativeElement: externalForwardRef.current,
+        popupElement: externalPopupRef.current,
         forceAlign: triggerAlign
       };
     });
@@ -289,7 +306,7 @@ export function generateTrigger() {
     var onVisibleChanged = function onVisibleChanged(visible) {
       setInMotion(false);
       onAlign();
-      afterPopupVisibleChange === null || afterPopupVisibleChange === void 0 ? void 0 : afterPopupVisibleChange(visible);
+      afterPopupVisibleChange === null || afterPopupVisibleChange === void 0 || afterPopupVisibleChange(visible);
     };
 
     // We will trigger align when motion is in prepare
@@ -316,14 +333,14 @@ export function generateTrigger() {
     function wrapperAction(eventName, nextOpen, delay, preEvent) {
       cloneProps[eventName] = function (event) {
         var _originChildProps$eve;
-        preEvent === null || preEvent === void 0 ? void 0 : preEvent(event);
+        preEvent === null || preEvent === 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));
+        (_originChildProps$eve = originChildProps[eventName]) === null || _originChildProps$eve === void 0 || _originChildProps$eve.call.apply(_originChildProps$eve, [originChildProps, event].concat(args));
       };
     }
 
@@ -342,7 +359,7 @@ export function generateTrigger() {
         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));
+        (_originChildProps$onC = originChildProps.onClick) === null || _originChildProps$onC === void 0 || _originChildProps$onC.call.apply(_originChildProps$onC, [originChildProps, event].concat(args));
       };
     }
 
@@ -362,9 +379,9 @@ export function generateTrigger() {
       wrapperAction('onPointerEnter', true, mouseEnterDelay, function (event) {
         setMousePosByEvent(event);
       });
-      onPopupMouseEnter = function onPopupMouseEnter() {
+      onPopupMouseEnter = function onPopupMouseEnter(event) {
         // Only trigger re-open when popup is visible
-        if (mergedOpen || inMotion) {
+        if ((mergedOpen || inMotion) && popupEle !== null && popupEle !== void 0 && popupEle.contains(event.target)) {
           triggerOpen(true, mouseEnterDelay);
         }
       };
@@ -374,7 +391,7 @@ export function generateTrigger() {
         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$onM = originChildProps.onMouseMove) === null || _originChildProps$onM === void 0 || _originChildProps$onM.call(originChildProps, event);
         };
       }
     }
@@ -410,7 +427,7 @@ export function generateTrigger() {
         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 ? void 0 : _originChildProps$onC2.call.apply(_originChildProps$onC2, [originChildProps, event].concat(args));
+        (_originChildProps$onC2 = originChildProps.onContextMenu) === null || _originChildProps$onC2 === void 0 || _originChildProps$onC2.call.apply(_originChildProps$onC2, [originChildProps, event].concat(args));
       };
     }
 
@@ -432,7 +449,7 @@ export function generateTrigger() {
           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));
+          (_mergedChildrenProps$ = mergedChildrenProps[eventName]) === null || _mergedChildrenProps$ === void 0 || _mergedChildrenProps$.call.apply(_mergedChildrenProps$, [mergedChildrenProps].concat(args));
           restProps[eventName].apply(restProps, args);
         };
       }

package/es/mock.js

@@ -11,12 +11,12 @@ var MockPortal = function MockPortal(_ref) {
     visible = _React$useState2[0],
     setVisible = _React$useState2[1];
   React.useEffect(function () {
-    getContainer === null || getContainer === void 0 ? void 0 : getContainer();
+    getContainer === null || getContainer === void 0 || getContainer();
   });
   React.useEffect(function () {
     if (open) {
       setVisible(true);
-    } else if (!open && autoDestroy) {
+    } else if (autoDestroy) {
       setVisible(false);
     }
   }, [open, autoDestroy]);

package/lib/Popup/PopupContent.js

@@ -15,5 +15,4 @@ var PopupContent = /*#__PURE__*/React.memo(function (_ref) {
 if (process.env.NODE_ENV !== 'production') {
   PopupContent.displayName = 'PopupContent';
 }
-var _default = PopupContent;
-exports.default = _default;
+var _default = exports.default = PopupContent;

package/lib/Popup/index.js

@@ -155,7 +155,7 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
       visible: open,
       onVisibleChanged: function onVisibleChanged(nextVisible) {
         var _motion$onVisibleChan;
-        motion === null || motion === void 0 ? void 0 : (_motion$onVisibleChan = motion.onVisibleChanged) === null || _motion$onVisibleChan === void 0 ? void 0 : _motion$onVisibleChan.call(motion, nextVisible);
+        motion === null || motion === void 0 || (_motion$onVisibleChan = motion.onVisibleChanged) === null || _motion$onVisibleChan === void 0 || _motion$onVisibleChan.call(motion, nextVisible);
         _onVisibleChanged(nextVisible);
       }
     }), function (_ref, motionRef) {
@@ -190,5 +190,4 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
 if (process.env.NODE_ENV !== 'production') {
   Popup.displayName = 'Popup';
 }
-var _default = Popup;
-exports.default = _default;
+var _default = exports.default = Popup;

package/lib/TriggerWrapper.js

@@ -24,5 +24,4 @@ var TriggerWrapper = /*#__PURE__*/React.forwardRef(function (props, ref) {
 if (process.env.NODE_ENV !== 'production') {
   TriggerWrapper.displayName = 'TriggerWrapper';
 }
-var _default = TriggerWrapper;
-exports.default = _default;
+var _default = exports.default = TriggerWrapper;

package/lib/context.js

@@ -7,5 +7,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var TriggerContext = /*#__PURE__*/React.createContext(null);
-var _default = TriggerContext;
-exports.default = _default;
+var _default = exports.default = TriggerContext;

package/lib/hooks/useAlign.js

@@ -126,13 +126,14 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       var originTop = popupElement.style.top;
       var originRight = popupElement.style.right;
       var originBottom = popupElement.style.bottom;
+      var originOverflow = popupElement.style.overflow;
 
       // Placement
       var placementInfo = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, builtinPlacements[placement]), popupAlign);
 
       // placeholder element
       var placeholderElement = doc.createElement('div');
-      (_popupElement$parentE = popupElement.parentElement) === null || _popupElement$parentE === void 0 ? void 0 : _popupElement$parentE.appendChild(placeholderElement);
+      (_popupElement$parentE = popupElement.parentElement) === null || _popupElement$parentE === void 0 || _popupElement$parentE.appendChild(placeholderElement);
       placeholderElement.style.left = "".concat(popupElement.offsetLeft, "px");
       placeholderElement.style.top = "".concat(popupElement.offsetTop, "px");
       placeholderElement.style.position = popupPosition;
@@ -144,6 +145,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       popupElement.style.top = '0';
       popupElement.style.right = 'auto';
       popupElement.style.bottom = 'auto';
+      popupElement.style.overflow = 'hidden';
 
       // Calculate align style, we should consider `transform` case
       var targetRect;
@@ -216,7 +218,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       popupElement.style.top = originTop;
       popupElement.style.right = originRight;
       popupElement.style.bottom = originBottom;
-      (_popupElement$parentE2 = popupElement.parentElement) === null || _popupElement$parentE2 === void 0 ? void 0 : _popupElement$parentE2.removeChild(placeholderElement);
+      popupElement.style.overflow = originOverflow;
+      (_popupElement$parentE2 = popupElement.parentElement) === null || _popupElement$parentE2 === void 0 || _popupElement$parentE2.removeChild(placeholderElement);
 
       // Calculate scale
       var _scaleX = (0, _util.toNum)(Math.round(popupWidth / parseFloat(width) * 1000) / 1000);
@@ -473,7 +476,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       var minBottom = Math.min(popupBottom, targetBottom);
       var yCenter = (maxTop + minBottom) / 2;
       var nextArrowY = yCenter - popupTop;
-      onPopupAlign === null || onPopupAlign === void 0 ? void 0 : onPopupAlign(popupEle, nextAlignInfo);
+      onPopupAlign === null || onPopupAlign === void 0 || onPopupAlign(popupEle, nextAlignInfo);
 
       // Additional calculate right & bottom position
       var offsetX4Right = popupMirrorRect.right - popupRect.x - (nextOffsetX + popupRect.width);

package/lib/hooks/useWinClick.js

@@ -1,93 +1,51 @@
 "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 = useWinClick;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _rcUtil = require("rc-util");
 var _shadow = require("rc-util/lib/Dom/shadow");
-var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
+var _warning = require("rc-util/lib/warning");
 var React = _interopRequireWildcard(require("react"));
 var _util = require("../util");
 function useWinClick(open, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen) {
   var openRef = React.useRef(open);
-
-  // Window click to hide should be lock to avoid trigger lock immediately
-  var lockRef = React.useRef(false);
-  if (openRef.current !== open) {
-    lockRef.current = true;
-    openRef.current = open;
-  }
-  React.useEffect(function () {
-    var id = (0, _raf.default)(function () {
-      lockRef.current = false;
-    });
-    return function () {
-      _raf.default.cancel(id);
-    };
-  }, [open]);
+  openRef.current = open;
 
   // Click to hide is special action since click popup element should not hide
   React.useEffect(function () {
     if (clickToHide && popupEle && (!mask || maskClosable)) {
-      var genClickEvents = function genClickEvents() {
-        var clickInside = false;
-
-        // User may mouseDown inside and drag out of popup and mouse up
-        // Record here to prevent close
-        var onWindowMouseDown = function onWindowMouseDown(_ref) {
-          var target = _ref.target;
-          clickInside = inPopupOrChild(target);
-        };
-        var onWindowClick = function onWindowClick(_ref2) {
-          var target = _ref2.target;
-          if (!lockRef.current && openRef.current && !clickInside && !inPopupOrChild(target)) {
-            triggerOpen(false);
-          }
-        };
-        return [onWindowMouseDown, onWindowClick];
+      var onTriggerClose = function onTriggerClose(_ref) {
+        var target = _ref.target;
+        if (openRef.current && !inPopupOrChild(target)) {
+          triggerOpen(false);
+        }
       };
-
-      // Events
-      var _genClickEvents = genClickEvents(),
-        _genClickEvents2 = (0, _slicedToArray2.default)(_genClickEvents, 2),
-        onWinMouseDown = _genClickEvents2[0],
-        onWinClick = _genClickEvents2[1];
-      var _genClickEvents3 = genClickEvents(),
-        _genClickEvents4 = (0, _slicedToArray2.default)(_genClickEvents3, 2),
-        onShadowMouseDown = _genClickEvents4[0],
-        onShadowClick = _genClickEvents4[1];
       var win = (0, _util.getWin)(popupEle);
-      win.addEventListener('mousedown', onWinMouseDown, true);
-      win.addEventListener('click', onWinClick, true);
-      win.addEventListener('contextmenu', onWinClick, true);
+      win.addEventListener('mousedown', onTriggerClose, true);
+      win.addEventListener('contextmenu', onTriggerClose, true);
 
       // shadow root
       var targetShadowRoot = (0, _shadow.getShadowRoot)(targetEle);
       if (targetShadowRoot) {
-        targetShadowRoot.addEventListener('mousedown', onShadowMouseDown, true);
-        targetShadowRoot.addEventListener('click', onShadowClick, true);
-        targetShadowRoot.addEventListener('contextmenu', onShadowClick, true);
+        targetShadowRoot.addEventListener('mousedown', onTriggerClose, true);
+        targetShadowRoot.addEventListener('contextmenu', onTriggerClose, true);
       }
 
       // Warning if target and popup not in same root
       if (process.env.NODE_ENV !== 'production') {
         var _targetEle$getRootNod, _popupEle$getRootNode;
-        var targetRoot = targetEle === null || targetEle === void 0 ? void 0 : (_targetEle$getRootNod = targetEle.getRootNode) === null || _targetEle$getRootNod === void 0 ? void 0 : _targetEle$getRootNod.call(targetEle);
+        var targetRoot = targetEle === null || targetEle === void 0 || (_targetEle$getRootNod = targetEle.getRootNode) === null || _targetEle$getRootNod === void 0 ? void 0 : _targetEle$getRootNod.call(targetEle);
         var popupRoot = (_popupEle$getRootNode = popupEle.getRootNode) === null || _popupEle$getRootNode === void 0 ? void 0 : _popupEle$getRootNode.call(popupEle);
-        (0, _rcUtil.warning)(targetRoot === popupRoot, "trigger element and popup element should in same shadow root.");
+        (0, _warning.warning)(targetRoot === popupRoot, "trigger element and popup element should in same shadow root.");
       }
       return function () {
-        win.removeEventListener('mousedown', onWinMouseDown, true);
-        win.removeEventListener('click', onWinClick, true);
-        win.removeEventListener('contextmenu', onWinClick, true);
+        win.removeEventListener('mousedown', onTriggerClose, true);
+        win.removeEventListener('contextmenu', onTriggerClose, true);
         if (targetShadowRoot) {
-          targetShadowRoot.removeEventListener('mousedown', onShadowMouseDown, true);
-          targetShadowRoot.removeEventListener('click', onShadowClick, true);
-          targetShadowRoot.removeEventListener('contextmenu', onShadowClick, true);
+          targetShadowRoot.removeEventListener('mousedown', onTriggerClose, true);
+          targetShadowRoot.removeEventListener('contextmenu', onTriggerClose, true);
         }
       };
     }

package/lib/index.d.ts

@@ -1,8 +1,10 @@
 import type { CSSMotionProps } from 'rc-motion';
 import * as React from 'react';
 import type { ActionType, AlignType, AnimationType, ArrowTypeOuter, BuildInPlacements, TransitionNameType } from './interface';
-export type { BuildInPlacements, AlignType, ActionType, ArrowTypeOuter as ArrowType, };
+export type { ActionType, AlignType, ArrowTypeOuter as ArrowType, BuildInPlacements, };
 export interface TriggerRef {
+    nativeElement: HTMLElement;
+    popupElement: HTMLElement;
     forceAlign: VoidFunction;
 }
 export interface TriggerProps {

package/lib/index.js

@@ -20,14 +20,13 @@ var _useId = _interopRequireDefault(require("rc-util/lib/hooks/useId"));
 var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
 var _isMobile = _interopRequireDefault(require("rc-util/lib/isMobile"));
 var React = _interopRequireWildcard(require("react"));
-var _reactDom = require("react-dom");
+var _Popup = _interopRequireDefault(require("./Popup"));
+var _TriggerWrapper = _interopRequireDefault(require("./TriggerWrapper"));
 var _context = _interopRequireDefault(require("./context"));
 var _useAction3 = _interopRequireDefault(require("./hooks/useAction"));
 var _useAlign3 = _interopRequireDefault(require("./hooks/useAlign"));
 var _useWatch = _interopRequireDefault(require("./hooks/useWatch"));
 var _useWinClick = _interopRequireDefault(require("./hooks/useWinClick"));
-var _Popup = _interopRequireDefault(require("./Popup"));
-var _TriggerWrapper = _interopRequireDefault(require("./TriggerWrapper"));
 var _util = require("./util");
 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"];
 // Removed Props List
@@ -104,7 +103,7 @@ function generateTrigger() {
       return {
         registerSubPopup: function registerSubPopup(id, subPopupEle) {
           subPopupElements.current[id] = subPopupEle;
-          parentContext === null || parentContext === void 0 ? void 0 : parentContext.registerSubPopup(id, subPopupEle);
+          parentContext === null || parentContext === void 0 || parentContext.registerSubPopup(id, subPopupEle);
         }
       };
     }, [parentContext]);
@@ -115,11 +114,15 @@ function generateTrigger() {
       _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
       popupEle = _React$useState4[0],
       setPopupEle = _React$useState4[1];
+
+    // Used for forwardRef popup. Not use internal
+    var externalPopupRef = React.useRef(null);
     var setPopupRef = (0, _useEvent.default)(function (node) {
+      externalPopupRef.current = node;
       if ((0, _findDOMNode.isDOM)(node) && popupEle !== node) {
         setPopupEle(node);
       }
-      parentContext === null || parentContext === void 0 ? void 0 : parentContext.registerSubPopup(id, node);
+      parentContext === null || parentContext === void 0 || parentContext.registerSubPopup(id, node);
     });
 
     // =========================== Target ===========================
@@ -128,9 +131,13 @@ function generateTrigger() {
       _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
       targetEle = _React$useState6[0],
       setTargetEle = _React$useState6[1];
+
+    // Used for forwardRef target. Not use internal
+    var externalForwardRef = React.useRef(null);
     var setTargetRef = (0, _useEvent.default)(function (node) {
       if ((0, _findDOMNode.isDOM)(node) && targetEle !== node) {
         setTargetEle(node);
+        externalForwardRef.current = node;
       }
     });
 
@@ -170,15 +177,19 @@ function generateTrigger() {
     }, [popupVisible]);
     var openRef = React.useRef(mergedOpen);
     openRef.current = mergedOpen;
+    var lastTriggerRef = React.useRef([]);
+    lastTriggerRef.current = [];
     var internalTriggerOpen = (0, _useEvent.default)(function (nextOpen) {
+      var _lastTriggerRef$curre;
+      setMergedOpen(nextOpen);
+
       // Enter or Pointer will both trigger open state change
       // We only need take one to avoid duplicated change event trigger
-      (0, _reactDom.flushSync)(function () {
-        if (mergedOpen !== nextOpen) {
-          setMergedOpen(nextOpen);
-          onPopupVisibleChange === null || onPopupVisibleChange === void 0 ? void 0 : onPopupVisibleChange(nextOpen);
-        }
-      });
+      // 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) {
+        lastTriggerRef.current.push(nextOpen);
+        onPopupVisibleChange === null || onPopupVisibleChange === void 0 || onPopupVisibleChange(nextOpen);
+      }
     });
 
     // Trigger for delay
@@ -268,8 +279,12 @@ function generateTrigger() {
       var baseClassName = (0, _util.getAlignPopupClassName)(builtinPlacements, prefixCls, alignInfo, alignPoint);
       return (0, _classnames.default)(baseClassName, getPopupClassNameFromAlign === null || getPopupClassNameFromAlign === void 0 ? void 0 : getPopupClassNameFromAlign(alignInfo));
     }, [alignInfo, getPopupClassNameFromAlign, builtinPlacements, prefixCls, alignPoint]);
+
+    // ============================ Refs ============================
     React.useImperativeHandle(ref, function () {
       return {
+        nativeElement: externalForwardRef.current,
+        popupElement: externalPopupRef.current,
         forceAlign: triggerAlign
       };
     });
@@ -299,7 +314,7 @@ function generateTrigger() {
     var onVisibleChanged = function onVisibleChanged(visible) {
       setInMotion(false);
       onAlign();
-      afterPopupVisibleChange === null || afterPopupVisibleChange === void 0 ? void 0 : afterPopupVisibleChange(visible);
+      afterPopupVisibleChange === null || afterPopupVisibleChange === void 0 || afterPopupVisibleChange(visible);
     };
 
     // We will trigger align when motion is in prepare
@@ -326,14 +341,14 @@ function generateTrigger() {
     function wrapperAction(eventName, nextOpen, delay, preEvent) {
       cloneProps[eventName] = function (event) {
         var _originChildProps$eve;
-        preEvent === null || preEvent === void 0 ? void 0 : preEvent(event);
+        preEvent === null || preEvent === 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));
+        (_originChildProps$eve = originChildProps[eventName]) === null || _originChildProps$eve === void 0 || _originChildProps$eve.call.apply(_originChildProps$eve, [originChildProps, event].concat(args));
       };
     }
 
@@ -352,7 +367,7 @@ function generateTrigger() {
         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));
+        (_originChildProps$onC = originChildProps.onClick) === null || _originChildProps$onC === void 0 || _originChildProps$onC.call.apply(_originChildProps$onC, [originChildProps, event].concat(args));
       };
     }
 
@@ -372,9 +387,9 @@ function generateTrigger() {
       wrapperAction('onPointerEnter', true, mouseEnterDelay, function (event) {
         setMousePosByEvent(event);
       });
-      onPopupMouseEnter = function onPopupMouseEnter() {
+      onPopupMouseEnter = function onPopupMouseEnter(event) {
         // Only trigger re-open when popup is visible
-        if (mergedOpen || inMotion) {
+        if ((mergedOpen || inMotion) && popupEle !== null && popupEle !== void 0 && popupEle.contains(event.target)) {
           triggerOpen(true, mouseEnterDelay);
         }
       };
@@ -384,7 +399,7 @@ function generateTrigger() {
         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$onM = originChildProps.onMouseMove) === null || _originChildProps$onM === void 0 || _originChildProps$onM.call(originChildProps, event);
         };
       }
     }
@@ -420,7 +435,7 @@ function generateTrigger() {
         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 ? void 0 : _originChildProps$onC2.call.apply(_originChildProps$onC2, [originChildProps, event].concat(args));
+        (_originChildProps$onC2 = originChildProps.onContextMenu) === null || _originChildProps$onC2 === void 0 || _originChildProps$onC2.call.apply(_originChildProps$onC2, [originChildProps, event].concat(args));
       };
     }
 
@@ -442,7 +457,7 @@ function generateTrigger() {
           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));
+          (_mergedChildrenProps$ = mergedChildrenProps[eventName]) === null || _mergedChildrenProps$ === void 0 || _mergedChildrenProps$.call.apply(_mergedChildrenProps$, [mergedChildrenProps].concat(args));
           restProps[eventName].apply(restProps, args);
         };
       }
@@ -526,5 +541,4 @@ function generateTrigger() {
   }
   return Trigger;
 }
-var _default = generateTrigger(_portal.default);
-exports.default = _default;
+var _default = exports.default = generateTrigger(_portal.default);

package/lib/mock.js

@@ -19,16 +19,15 @@ var MockPortal = function MockPortal(_ref) {
     visible = _React$useState2[0],
     setVisible = _React$useState2[1];
   React.useEffect(function () {
-    getContainer === null || getContainer === void 0 ? void 0 : getContainer();
+    getContainer === null || getContainer === void 0 || getContainer();
   });
   React.useEffect(function () {
     if (open) {
       setVisible(true);
-    } else if (!open && autoDestroy) {
+    } else if (autoDestroy) {
       setVisible(false);
     }
   }, [open, autoDestroy]);
   return visible ? children : null;
 };
-var _default = (0, _index.generateTrigger)(MockPortal);
-exports.default = _default;
+var _default = exports.default = (0, _index.generateTrigger)(MockPortal);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/trigger",
-  "version": "2.0.0-0",
+  "version": "2.1.0",
   "description": "base abstract trigger component for react",
   "engines": {
     "node": ">=8.x"
@@ -33,7 +33,7 @@
     "start": "dumi dev",
     "build": "dumi build",
     "compile": "father build && lessc assets/index.less assets/index.css",
-    "prepublishOnly": "npm run compile && np --yolo --no-publish --branch feat/@rc-component/dom-align",
+    "prepublishOnly": "npm run compile && np --yolo --no-publish",
     "lint": "eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js",
     "test": "rc-test",
     "coverage": "rc-test --coverage",
@@ -41,29 +41,30 @@
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.0.0",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
     "@types/classnames": "^2.2.10",
-    "@types/jest": "^26.0.15",
-    "@types/react": "^16.8.19",
+    "@types/jest": "^29.5.2",
+    "@types/node": "^20.11.6",
+    "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.11",
+    "@umijs/fabric": "^4.0.1",
     "cross-env": "^7.0.1",
     "dumi": "^2.1.0",
-    "eslint": "^7.0.0",
+    "eslint": "^8.51.0",
     "father": "^4.0.0",
-    "less": "^3.10.3",
-    "np": "^8.0.4",
+    "less": "^4.2.0",
+    "np": "^9.0.0",
     "rc-test": "^7.0.13",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "regenerator-runtime": "^0.13.7",
-    "typescript": "^4.0.0"
+    "regenerator-runtime": "^0.14.0",
+    "typescript": "^5.1.6"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
     "@rc-component/portal": "^1.1.0",
     "classnames": "^2.3.2",
-    "rc-align": "5.0.0-0",
     "rc-motion": "^2.0.0",
     "rc-resize-observer": "^1.3.1",
     "rc-util": "^5.38.0"
@@ -71,9 +72,5 @@
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
-  },
-  "resolutions": {
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0"
   }
 }