feat: add safe hover polygon handling

Author: li-jia-nan

package.json

@@ -44,7 +44,7 @@
     "@rc-component/motion": "^1.1.4",
     "@rc-component/portal": "^2.2.0",
     "@rc-component/resize-observer": "^1.1.1",
-    "@rc-component/util": "^1.2.1",
+    "@rc-component/util": "^1.11.1",
     "clsx": "^2.1.1"
   },
   "devDependencies": {

src/index.tsx

@@ -21,6 +21,7 @@ import useAlign from './hooks/useAlign';
 import useDelay from './hooks/useDelay';
 import useWatch from './hooks/useWatch';
 import useWinClick from './hooks/useWinClick';
+import { isInSafeHoverArea } from './safeHover';
 import type { PortalProps } from '@rc-component/portal';
 
 import type {
@@ -476,6 +477,80 @@ export function generateTrigger(
       isMobile,
     );
 
+    const safeHoverCleanupRef = React.useRef<VoidFunction>(() => {});
+
+    const stopSafeHoverMonitor = useEvent(() => {
+      safeHoverCleanupRef.current();
+      safeHoverCleanupRef.current = () => {};
+    });
+
+    const startSafeHoverMonitor = useEvent(
+      (event: React.MouseEvent | React.PointerEvent) => {
+        stopSafeHoverMonitor();
+
+        const currentTargetEle = targetEle || externalForwardRef.current;
+        const currentPopupEle = popupEle || externalPopupRef.current;
+
+        if (
+          !currentTargetEle ||
+          !currentPopupEle ||
+          !openRef.current ||
+          !mouseLeaveDelay
+        ) {
+          return;
+        }
+
+        const doc = currentTargetEle.ownerDocument;
+        const originX = event.clientX;
+        const originY = event.clientY;
+
+        const onMouseMove = (mouseEvent: MouseEvent) => {
+          const nextTargetEle = targetEle || currentTargetEle;
+          const nextPopupEle =
+            popupEle || externalPopupRef.current || currentPopupEle;
+
+          if (!nextTargetEle || !nextPopupEle) {
+            stopSafeHoverMonitor();
+            return;
+          }
+
+          const nextInSafeArea = isInSafeHoverArea({
+            clientX: mouseEvent.clientX,
+            clientY: mouseEvent.clientY,
+            originX,
+            originY,
+            target: nextTargetEle,
+            popup: nextPopupEle,
+            align: alignInfo,
+          });
+
+          if (nextInSafeArea) {
+            triggerOpen(false, mouseLeaveDelay);
+          } else {
+            stopSafeHoverMonitor();
+            triggerOpen(false, mouseLeaveDelay);
+          }
+        };
+
+        doc.addEventListener('mousemove', onMouseMove);
+        safeHoverCleanupRef.current = () => {
+          doc.removeEventListener('mousemove', onMouseMove);
+        };
+      },
+    );
+
+    React.useEffect(() => {
+      return () => {
+        stopSafeHoverMonitor();
+      };
+    }, [stopSafeHoverMonitor]);
+
+    useLayoutEffect(() => {
+      if (!mergedOpen) {
+        stopSafeHoverMonitor();
+      }
+    }, [mergedOpen, stopSafeHoverMonitor]);
+
     const [showActions, hideActions] = useAction(
       action,
       showAction,
@@ -688,6 +763,7 @@ export function generateTrigger(
       );
 
       onPopupMouseEnter = (event) => {
+        stopSafeHoverMonitor();
         // Only trigger re-open when popup is visible
         if (
           (mergedOpen || inMotion) &&
@@ -706,22 +782,24 @@ export function generateTrigger(
     }
 
     if (hoverToHide) {
-      wrapperAction(
-        'onMouseLeave',
-        false,
-        mouseLeaveDelay,
-        undefined,
-        ignoreMouseTrigger,
-      );
-      wrapperAction(
-        'onPointerLeave',
-        false,
-        mouseLeaveDelay,
-        undefined,
-        ignoreMouseTrigger,
-      );
+      const onTargetMouseLeave = (
+        event: React.MouseEvent | React.PointerEvent,
+        ...args: any[]
+      ) => {
+        if (!ignoreMouseTrigger()) {
+          startSafeHoverMonitor(event);
+          triggerOpen(false, mouseLeaveDelay);
+        }
+        originChildProps[
+          event.type === 'pointerleave' ? 'onPointerLeave' : 'onMouseLeave'
+        ]?.(event, ...args);
+      };
+
+      cloneProps.onMouseLeave = onTargetMouseLeave;
+      cloneProps.onPointerLeave = onTargetMouseLeave;
 
       onPopupMouseLeave = () => {
+        stopSafeHoverMonitor();
         triggerOpen(false, mouseLeaveDelay);
       };
     }