chore: update deps

Author: li-jia-nan

docs/examples/safe-hover.tsx

@@ -1,7 +1,28 @@
-import Trigger from '@rc-component/trigger';
+import Trigger, { type TriggerRef } from '@rc-component/trigger';
 import React from 'react';
+import {
+  getSafeHoverAreaPolygons,
+  type SafeHoverPoint,
+} from '../../src/util/safeHover';
 import '../../assets/index.less';
 
+type SafeHoverPolygon = {
+  points: SafeHoverPoint[];
+  fill: string;
+  stroke: string;
+};
+
+const safeHoverPolygonStyles = [
+  {
+    fill: 'rgba(255, 176, 32, 0.22)',
+    stroke: 'rgba(222, 121, 0, 0.6)',
+  },
+  {
+    fill: 'rgba(22, 119, 255, 0.16)',
+    stroke: 'rgba(22, 119, 255, 0.55)',
+  },
+];
+
 const builtinPlacements = {
   top: {
     points: ['bc', 'tc'],
@@ -18,16 +39,77 @@ const popupStyle: React.CSSProperties = {
 };
 
 const SafeHoverDemo = () => {
+  const triggerRef = React.useRef<TriggerRef>(null);
+
+  const [safeHoverPolygons, setSafeHoverPolygons] = React.useState<
+    SafeHoverPolygon[]
+  >([]);
+
+  const updateSafeHoverPolygons = (
+    event: React.MouseEvent<HTMLElement> | React.PointerEvent<HTMLElement>,
+  ) => {
+    const target = triggerRef.current?.nativeElement;
+    const popup = triggerRef.current?.popupElement;
+
+    if (!target || !popup) {
+      setSafeHoverPolygons([]);
+      return;
+    }
+
+    const leavePoint: SafeHoverPoint = [event.clientX, event.clientY];
+    setSafeHoverPolygons(
+      getSafeHoverAreaPolygons(
+        leavePoint,
+        target.getBoundingClientRect(),
+        popup.getBoundingClientRect(),
+      ).map((points, index) => ({
+        points,
+        ...safeHoverPolygonStyles[index],
+      })),
+    );
+  };
+
   return (
     <div style={{ minHeight: 320, padding: '160px 80px 80px' }}>
+      {safeHoverPolygons.length > 0 && (
+        <svg
+          aria-hidden
+          style={{
+            position: 'fixed',
+            inset: 0,
+            width: '100vw',
+            height: '100vh',
+            pointerEvents: 'none',
+            zIndex: 999,
+          }}
+        >
+          {safeHoverPolygons.map(({ points, fill, stroke }, index) => (
+            <polygon
+              // eslint-disable-next-line react/no-array-index-key
+              key={index}
+              points={points.map((point) => point.join(',')).join(' ')}
+              fill={fill}
+              stroke={stroke}
+              strokeDasharray="4 3"
+              strokeWidth={1}
+            />
+          ))}
+        </svg>
+      )}
       <Trigger
+        ref={triggerRef}
         action={['hover']}
         mouseLeaveDelay={0.12}
         popupPlacement="top"
         builtinPlacements={builtinPlacements}
         popupStyle={popupStyle}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) {
+            setSafeHoverPolygons([]);
+          }
+        }}
         popup={
-          <div>
+          <div onMouseEnter={() => setSafeHoverPolygons([])}>
             <strong>Safe hover popup</strong>
             <div style={{ marginTop: 8 }}>
               Move through the gap to reach me.
@@ -38,7 +120,12 @@ const SafeHoverDemo = () => {
           </div>
         }
       >
-        <button style={{ padding: '8px 16px' }} type="button">
+        <button
+          style={{ padding: '8px 16px' }}
+          type="button"
+          onMouseLeave={updateSafeHoverPolygons}
+          onPointerLeave={updateSafeHoverPolygons}
+        >
           Hover target
         </button>
       </Trigger>

src/util/safeHover.ts

@@ -161,8 +161,7 @@ function getSafeHoverIntentPolygon(
   }
 }
 
-export function isPointInSafeHoverArea(
-  point: SafeHoverPoint,
+export function getSafeHoverAreaPolygons(
   leavePoint: SafeHoverPoint,
   targetRect: SafeHoverRect,
   popupRect: SafeHoverRect,
@@ -171,6 +170,30 @@ export function isPointInSafeHoverArea(
   const side = getSafeHoverSide(targetRect, popupRect);
 
   if (!side || !isLeavePointTowardsPopup(side, leavePoint, targetRect)) {
+    return [];
+  }
+
+  return [
+    getSafeHoverGapPolygon(side, targetRect, popupRect, buffer),
+    getSafeHoverIntentPolygon(side, leavePoint, popupRect, buffer),
+  ];
+}
+
+export function isPointInSafeHoverArea(
+  point: SafeHoverPoint,
+  leavePoint: SafeHoverPoint,
+  targetRect: SafeHoverRect,
+  popupRect: SafeHoverRect,
+  buffer = 0.5,
+) {
+  const safeHoverPolygons = getSafeHoverAreaPolygons(
+    leavePoint,
+    targetRect,
+    popupRect,
+    buffer,
+  );
+
+  if (!safeHoverPolygons.length) {
     return false;
   }
 
@@ -180,14 +203,5 @@ export function isPointInSafeHoverArea(
 
   // The gap polygon keeps the straight corridor open; the intent polygon
   // catches diagonal movement toward the popup edge.
-  return (
-    isPointInPolygon(
-      point,
-      getSafeHoverGapPolygon(side, targetRect, popupRect, buffer),
-    ) ||
-    isPointInPolygon(
-      point,
-      getSafeHoverIntentPolygon(side, leavePoint, popupRect, buffer),
-    )
-  );
+  return safeHoverPolygons.some((polygon) => isPointInPolygon(point, polygon));
 }