@ssaprt/tooltip 1.0.3 → 1.0.4

package/dist/index.js

@@ -963,6 +963,63 @@ var INTERACTIVE_RECHECK_INTERVAL = 50;
 var TOUCH_MOVE_THRESHOLD = 10;
 var TOUCH_MAX_TAP_DURATION = 600;
 var TOUCH_FOCUS_SUPPRESSION = 700;
+var activeTooltipSession = null;
+var inputModality = "pointer";
+var inputModalitySubscribers = 0;
+var handleGlobalPointerDown = () => {
+  inputModality = "pointer";
+};
+var keyboardFocusKeys = /* @__PURE__ */ new Set([
+  "Tab",
+  "Enter",
+  " ",
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown"
+]);
+var handleGlobalKeyDown = (event) => {
+  if (event.metaKey || event.ctrlKey || event.altKey || !keyboardFocusKeys.has(event.key)) {
+    return;
+  }
+  inputModality = "keyboard";
+};
+var subscribeInputModality = () => {
+  inputModalitySubscribers += 1;
+  if (inputModalitySubscribers !== 1) {
+    return;
+  }
+  document.addEventListener("pointerdown", handleGlobalPointerDown, true);
+  document.addEventListener("keydown", handleGlobalKeyDown, true);
+};
+var unsubscribeInputModality = () => {
+  inputModalitySubscribers = Math.max(0, inputModalitySubscribers - 1);
+  if (inputModalitySubscribers !== 0) {
+    return;
+  }
+  document.removeEventListener("pointerdown", handleGlobalPointerDown, true);
+  document.removeEventListener("keydown", handleGlobalKeyDown, true);
+};
+var requestTooltipActivation = (session, point) => {
+  const currentSession = activeTooltipSession;
+  if (currentSession && currentSession.owner !== session.owner) {
+    if (point && currentSession.interactive && currentSession.protectsPoint(point)) {
+      return false;
+    }
+    currentSession.close();
+  }
+  activeTooltipSession = session;
+  return true;
+};
+var clearTooltipActivation = (owner) => {
+  if (activeTooltipSession?.owner === owner) {
+    activeTooltipSession = null;
+  }
+};
 var oppositePlacement = {
   top: "bottom",
   bottom: "top",
@@ -1088,6 +1145,7 @@ var useTooltip = ({
 }) => {
   const tooltipRef = (0, import_react.useRef)(null);
   const bodyRef = (0, import_react.useRef)(null);
+  const ownerRef = (0, import_react.useRef)(/* @__PURE__ */ Symbol("tooltip"));
   const hideTimerRef = (0, import_react.useRef)(null);
   const firstFrameRef = (0, import_react.useRef)(null);
   const secondFrameRef = (0, import_react.useRef)(null);
@@ -1100,6 +1158,7 @@ var useTooltip = ({
     y: Number.NaN,
     pointerType: ""
   });
+  const interactiveAreaAtPointRef = (0, import_react.useRef)(() => "outside");
   const touchGestureRef = (0, import_react.useRef)(null);
   const suppressFocusUntilRef = (0, import_react.useRef)(0);
   const [mounted, setMounted] = (0, import_react.useState)(false);
@@ -1238,7 +1297,7 @@ var useTooltip = ({
     });
   }, [anchor, getAvailableSpace, preferredPlacement]);
   const isFocusInsideTooltipRegion = (0, import_react.useCallback)(() => {
-    if (!anchor || typeof document === "undefined") {
+    if (!anchor || typeof document === "undefined" || inputModality !== "keyboard") {
       return false;
     }
     const activeElement = document.activeElement;
@@ -1246,50 +1305,60 @@ var useTooltip = ({
     if (!(activeElement instanceof Node)) {
       return false;
     }
-    if (interactive && tooltip?.contains(activeElement)) {
-      return true;
-    }
-    return anchor.contains(activeElement) && activeElement instanceof Element && activeElement.matches(":focus-visible");
+    return anchor.contains(activeElement) || Boolean(interactive && tooltip?.contains(activeElement));
   }, [anchor, interactive]);
+  const getInteractivePointerAreaAtPoint = (0, import_react.useCallback)(
+    (point) => {
+      if (!interactive || !anchor) {
+        return "outside";
+      }
+      const tooltip = tooltipRef.current;
+      if (!tooltip || !Number.isFinite(point.x) || !Number.isFinite(point.y)) {
+        return "outside";
+      }
+      const anchorRect = anchor.getBoundingClientRect();
+      const tooltipRect = tooltip.getBoundingClientRect();
+      if (isPointInsideRect(
+        point,
+        anchorRect,
+        INTERACTIVE_DIRECT_PADDING
+      ) || isPointInsideRect(
+        point,
+        tooltipRect,
+        INTERACTIVE_DIRECT_PADDING
+      )) {
+        return "direct";
+      }
+      const bridge = createInteractiveBridge(
+        anchorRect,
+        tooltipRect,
+        placement
+      );
+      return isPointInsidePolygon(point, bridge) ? "bridge" : "outside";
+    },
+    [anchor, interactive, placement]
+  );
+  (0, import_react.useLayoutEffect)(() => {
+    interactiveAreaAtPointRef.current = getInteractivePointerAreaAtPoint;
+  }, [getInteractivePointerAreaAtPoint]);
   const getInteractivePointerArea = (0, import_react.useCallback)(() => {
-    if (!interactive || !anchor) {
-      return "outside";
-    }
     const pointer = pointerRef.current;
-    const tooltip = tooltipRef.current;
-    if (!tooltip || pointer.pointerType !== "mouse" && pointer.pointerType !== "pen" || !Number.isFinite(pointer.x) || !Number.isFinite(pointer.y)) {
+    if (pointer.pointerType !== "mouse" && pointer.pointerType !== "pen" || !Number.isFinite(pointer.x) || !Number.isFinite(pointer.y)) {
       return "outside";
     }
-    const point = {
+    return getInteractivePointerAreaAtPoint({
       x: pointer.x,
       y: pointer.y
-    };
-    const anchorRect = anchor.getBoundingClientRect();
-    const tooltipRect = tooltip.getBoundingClientRect();
-    if (isPointInsideRect(
-      point,
-      anchorRect,
-      INTERACTIVE_DIRECT_PADDING
-    ) || isPointInsideRect(
-      point,
-      tooltipRect,
-      INTERACTIVE_DIRECT_PADDING
-    )) {
-      return "direct";
-    }
-    const bridge = createInteractiveBridge(
-      anchorRect,
-      tooltipRect,
-      placement
-    );
-    return isPointInsidePolygon(point, bridge) ? "bridge" : "outside";
-  }, [anchor, interactive, placement]);
+    });
+  }, [getInteractivePointerAreaAtPoint]);
   const removeTooltip = (0, import_react.useCallback)(() => {
     clearHideTimer();
     clearEnterFrames();
     clearInteractiveFrame();
     pendingHideRef.current = false;
     interactiveBridgeDeadlineRef.current = 0;
+    clearTooltipActivation(ownerRef.current);
+    setMounted(false);
     updatePhase("hidden");
   }, [clearEnterFrames, clearHideTimer, clearInteractiveFrame, updatePhase]);
   const runHide = (0, import_react.useCallback)(() => {
@@ -1365,21 +1434,51 @@ var useTooltip = ({
       runHide
     ]
   );
-  const showTooltip = (0, import_react.useCallback)(() => {
-    if (!anchor || disabled) {
-      return;
-    }
-    clearHideTimer();
-    clearEnterFrames();
-    interactiveBridgeDeadlineRef.current = 0;
-    pendingHideRef.current = false;
-    setMounted(true);
-    if (phaseRef.current === "entering" || phaseRef.current === "visible") {
-      return;
-    }
-    updatePhase("preparing");
-    setShowVersion((value) => value + 1);
-  }, [anchor, clearEnterFrames, clearHideTimer, disabled, updatePhase]);
+  const showTooltip = (0, import_react.useCallback)(
+    (activationPoint) => {
+      if (!anchor || disabled) {
+        return;
+      }
+      const activated = requestTooltipActivation(
+        {
+          owner: ownerRef.current,
+          interactive,
+          protectsPoint: (point) => {
+            if (phaseRef.current === "hidden") {
+              return false;
+            }
+            return interactiveAreaAtPointRef.current(point) !== "outside";
+          },
+          close: () => {
+            hideTooltip(true);
+          }
+        },
+        activationPoint
+      );
+      if (!activated) {
+        return;
+      }
+      clearHideTimer();
+      clearEnterFrames();
+      interactiveBridgeDeadlineRef.current = 0;
+      pendingHideRef.current = false;
+      setMounted(true);
+      if (phaseRef.current === "entering" || phaseRef.current === "visible") {
+        return;
+      }
+      updatePhase("preparing");
+      setShowVersion((value) => value + 1);
+    },
+    [
+      anchor,
+      clearEnterFrames,
+      clearHideTimer,
+      disabled,
+      hideTooltip,
+      interactive,
+      updatePhase
+    ]
+  );
   const keepTooltipOpen = (0, import_react.useCallback)(() => {
     if (!interactive || disabled) {
       return;
@@ -1469,6 +1568,13 @@ var useTooltip = ({
     showVersion,
     updatePhase
   ]);
+  (0, import_react.useEffect)(() => {
+    subscribeInputModality();
+    return () => {
+      unsubscribeInputModality();
+      clearTooltipActivation(ownerRef.current);
+    };
+  }, []);
   (0, import_react.useEffect)(() => {
     if (!anchor) {
       removeTooltip();
@@ -1486,7 +1592,10 @@ var useTooltip = ({
       if (event.pointerType === "touch") {
         return;
       }
-      showTooltip();
+      showTooltip({
+        x: event.clientX,
+        y: event.clientY
+      });
     };
     const onPointerLeave = (event) => {
       updatePointer(event);
@@ -1558,7 +1667,10 @@ var useTooltip = ({
         return;
       }
       if (phaseRef.current === "hidden" || phaseRef.current === "leaving") {
-        showTooltip();
+        showTooltip({
+          x: event.clientX,
+          y: event.clientY
+        });
       } else {
         hideTooltip(true);
       }
@@ -1655,7 +1767,9 @@ var useTooltip = ({
       scheduleInteractivePointerProcessing();
     };
     const onFocusIn = () => {
-      keepTooltipOpen();
+      if (inputModality === "keyboard") {
+        keepTooltipOpen();
+      }
     };
     const onFocusOut = (event) => {
       const relatedTarget = event.relatedTarget;