@rc-component/trigger 1.14.4 → 1.15.0

package/es/index.js

@@ -12,6 +12,7 @@ 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 TriggerContext from "./context";
 import useAction from "./hooks/useAction";
 import useAlign from "./hooks/useAlign";
@@ -159,10 +160,14 @@ export function generateTrigger() {
     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);
-      }
+      // 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);
+        }
+      });
     });
 
     // Trigger for delay
@@ -294,8 +299,10 @@ export function generateTrigger() {
       showActions = _useAction2[0],
       hideActions = _useAction2[1];
 
-    // Util wrapper for trigger action
-    var wrapperAction = function wrapperAction(eventName, nextOpen, delay, preEvent) {
+    /**
+     * Util wrapper for trigger action
+     */
+    function wrapperAction(eventName, nextOpen, delay, preEvent) {
       cloneProps[eventName] = function (event) {
         var _originChildProps$eve;
         preEvent === null || preEvent === void 0 ? void 0 : preEvent(event);
@@ -307,7 +314,7 @@ export function generateTrigger() {
         }
         (_originChildProps$eve = originChildProps[eventName]) === null || _originChildProps$eve === void 0 ? void 0 : _originChildProps$eve.call.apply(_originChildProps$eve, [originChildProps, event].concat(args));
       };
-    };
+    }
 
     // ======================= Action: Click ========================
     var clickToShow = showActions.has('click');
@@ -339,9 +346,13 @@ export function generateTrigger() {
     var onPopupMouseEnter;
     var onPopupMouseLeave;
     if (hoverToShow) {
+      // Compatible with old browser which not support pointer event
       wrapperAction('onMouseEnter', true, mouseEnterDelay, function (event) {
         setMousePosByEvent(event);
       });
+      wrapperAction('onPointerEnter', true, mouseEnterDelay, function (event) {
+        setMousePosByEvent(event);
+      });
       onPopupMouseEnter = function onPopupMouseEnter() {
         // Only trigger re-open when popup is visible
         if (mergedOpen || inMotion) {
@@ -360,6 +371,7 @@ export function generateTrigger() {
     }
     if (hoverToHide) {
       wrapperAction('onMouseLeave', false, mouseLeaveDelay);
+      wrapperAction('onPointerLeave', false, mouseLeaveDelay);
       onPopupMouseLeave = function onPopupMouseLeave() {
         triggerOpen(false, mouseLeaveDelay);
       };

package/lib/index.js

@@ -20,6 +20,7 @@ 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 _context = _interopRequireDefault(require("./context"));
 var _useAction3 = _interopRequireDefault(require("./hooks/useAction"));
 var _useAlign3 = _interopRequireDefault(require("./hooks/useAlign"));
@@ -169,10 +170,14 @@ function generateTrigger() {
     var openRef = React.useRef(mergedOpen);
     openRef.current = mergedOpen;
     var internalTriggerOpen = (0, _useEvent.default)(function (nextOpen) {
-      if (mergedOpen !== nextOpen) {
-        setMergedOpen(nextOpen);
-        onPopupVisibleChange === null || onPopupVisibleChange === void 0 ? void 0 : onPopupVisibleChange(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);
+        }
+      });
     });
 
     // Trigger for delay
@@ -304,8 +309,10 @@ function generateTrigger() {
       showActions = _useAction2[0],
       hideActions = _useAction2[1];
 
-    // Util wrapper for trigger action
-    var wrapperAction = function wrapperAction(eventName, nextOpen, delay, preEvent) {
+    /**
+     * Util wrapper for trigger action
+     */
+    function wrapperAction(eventName, nextOpen, delay, preEvent) {
       cloneProps[eventName] = function (event) {
         var _originChildProps$eve;
         preEvent === null || preEvent === void 0 ? void 0 : preEvent(event);
@@ -317,7 +324,7 @@ function generateTrigger() {
         }
         (_originChildProps$eve = originChildProps[eventName]) === null || _originChildProps$eve === void 0 ? void 0 : _originChildProps$eve.call.apply(_originChildProps$eve, [originChildProps, event].concat(args));
       };
-    };
+    }
 
     // ======================= Action: Click ========================
     var clickToShow = showActions.has('click');
@@ -349,9 +356,13 @@ function generateTrigger() {
     var onPopupMouseEnter;
     var onPopupMouseLeave;
     if (hoverToShow) {
+      // Compatible with old browser which not support pointer event
       wrapperAction('onMouseEnter', true, mouseEnterDelay, function (event) {
         setMousePosByEvent(event);
       });
+      wrapperAction('onPointerEnter', true, mouseEnterDelay, function (event) {
+        setMousePosByEvent(event);
+      });
       onPopupMouseEnter = function onPopupMouseEnter() {
         // Only trigger re-open when popup is visible
         if (mergedOpen || inMotion) {
@@ -370,6 +381,7 @@ function generateTrigger() {
     }
     if (hoverToHide) {
       wrapperAction('onMouseLeave', false, mouseLeaveDelay);
+      wrapperAction('onPointerLeave', false, mouseLeaveDelay);
       onPopupMouseLeave = function onPopupMouseLeave() {
         triggerOpen(false, mouseLeaveDelay);
       };

package/package.json

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