@ssaprt/tooltip 1.0.3 → 1.0.5

package/dist/index.mjs

@@ -168,20 +168,19 @@ var presets = {
     animation: animations.bounce
   }),
   manga: createTheme({
-    background: "radial-gradient(circle at 2px 2px, rgba(0, 0, 0, 0.2) 1px, transparent 1.5px) 0 0 / 6px 6px, #ffffff",
+    background: "linear-gradient(145deg, #ffffff, #f4f4f5)",
     color: "#000000",
     fontFamily: "Impact, Haettenschweiler, Arial Narrow Bold, sans-serif",
     fontSize: "13px",
     fontWeight: 900,
     border: "3px solid #000000",
-    borderRadius: "18px 5px 18px 5px",
-    filter: "drop-shadow(4px 4px 0 #000000)",
+    borderRadius: "10px 3px 10px 3px",
     padding: "9px 15px",
     letterSpacing: "0.04em",
     textTransform: "uppercase",
-    arrowSize: "11px",
+    arrowSize: "10px",
     arrowWidth: "17px",
-    animation: animations.snap
+    animation: animations.pop
   }),
   newspaper: createTheme({
     background: "repeating-linear-gradient(0deg, rgba(68, 64, 60, 0.035) 0, rgba(68, 64, 60, 0.035) 1px, transparent 1px, transparent 4px), #f5f0e6",
@@ -237,54 +236,48 @@ var presets = {
     }
   }),
   terminal: createTheme({
-    background: "linear-gradient(180deg, #020617, #000000)",
-    color: "#22c55e",
+    background: "#020a04",
+    color: "#4ade80",
     fontFamily: "Consolas, Monaco, Courier New, monospace",
     fontSize: "12px",
     fontWeight: 600,
     border: "1px solid #22c55e",
     borderRadius: "3px",
-    filter: "drop-shadow(0 0 5px rgba(34, 197, 94, 0.65))",
     padding: "8px 12px",
     letterSpacing: "0.035em",
-    textShadow: "0 0 5px rgba(34, 197, 94, 0.9)",
     textAlign: "left",
     arrowSize: "7px",
     arrowWidth: "13px",
-    animation: animations.instant
+    animation: animations.soft
   }),
   crt: createTheme({
-    background: "repeating-linear-gradient(0deg, rgba(34, 197, 94, 0.08) 0, rgba(34, 197, 94, 0.08) 1px, transparent 1px, transparent 3px), radial-gradient(circle at center, #07150b, #000000)",
+    background: "linear-gradient(180deg, #07150b, #020804)",
     color: "#86efac",
     fontFamily: "Lucida Console, Monaco, monospace",
     fontSize: "12px",
     fontWeight: 600,
     border: "2px solid #166534",
-    borderRadius: "18px",
-    filter: "drop-shadow(0 0 8px rgba(34, 197, 94, 0.5)) drop-shadow(0 0 18px rgba(34, 197, 94, 0.18))",
+    borderRadius: "12px",
     padding: "10px 15px",
-    textShadow: "0 0 6px rgba(134, 239, 172, 0.85)",
     arrowSize: "8px",
     arrowWidth: "18px",
-    animation: animations.blur
+    animation: animations.soft
   }),
   pixel: createTheme({
-    background: "linear-gradient(135deg, #4c1d95 25%, #581c87 25%, #581c87 50%, #4c1d95 50%, #4c1d95 75%, #581c87 75%) 0 0 / 8px 8px",
+    background: "linear-gradient(135deg, #4c1d95, #581c87)",
     color: "#fef08a",
-    fontFamily: "Press Start 2P, Courier New, monospace",
+    fontFamily: "Courier New, monospace",
     fontSize: "10px",
     fontWeight: 700,
     lineHeight: 1.7,
     border: "4px solid #fef08a",
     borderRadius: "0px",
-    filter: "drop-shadow(6px 6px 0 #18181b)",
     padding: "10px 14px",
     letterSpacing: "0.03em",
-    textShadow: "2px 2px 0 #18181b",
     textTransform: "uppercase",
     arrowSize: "10px",
     arrowWidth: "18px",
-    animation: animations.snap
+    animation: animations.pop
   }),
   arcade: createTheme({
     background: "radial-gradient(circle at 20% 0%, rgba(34, 211, 238, 0.45), transparent 38%), radial-gradient(circle at 90% 100%, rgba(236, 72, 153, 0.55), transparent 45%), #150629",
@@ -498,20 +491,19 @@ var presets = {
     animation: animations.blur
   }),
   toxic: createTheme({
-    background: "repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.17) 0, rgba(0, 0, 0, 0.17) 5px, transparent 5px, transparent 10px), #a3e635",
+    background: "linear-gradient(135deg, #bef264, #84cc16)",
     color: "#1a2e05",
     fontFamily: "Arial Black, Impact, sans-serif",
     fontSize: "12px",
     fontWeight: 900,
     border: "3px solid #1a2e05",
-    borderRadius: "2px 12px 2px 12px",
-    filter: "drop-shadow(4px 5px 0 #365314)",
+    borderRadius: "3px 10px 3px 10px",
     padding: "9px 14px",
     letterSpacing: "0.08em",
     textTransform: "uppercase",
     arrowSize: "10px",
     arrowWidth: "20px",
-    animation: animations.snap
+    animation: animations.pop
   }),
   radioactive: createTheme({
     background: "conic-gradient(from 45deg at 50% 50%, #facc15 0 12.5%, #18181b 12.5% 25%, #facc15 25% 37.5%, #18181b 37.5% 50%, #facc15 50% 62.5%, #18181b 62.5% 75%, #facc15 75% 87.5%, #18181b 87.5%)",
@@ -531,20 +523,18 @@ var presets = {
     animation: animations.zoom
   }),
   hazard: createTheme({
-    background: "repeating-linear-gradient(135deg, #f97316 0, #f97316 10px, #18181b 10px, #18181b 20px)",
+    background: "linear-gradient(135deg, #fb923c, #ea580c)",
     color: "#ffffff",
     fontFamily: "Arial Black, Impact, sans-serif",
     fontSize: "12px",
     fontWeight: 900,
     border: "3px solid #18181b",
     borderRadius: "4px",
-    filter: "drop-shadow(5px 5px 0 rgba(24, 24, 27, 0.6))",
     padding: "9px 15px",
-    textShadow: "2px 2px 0 #18181b, -1px -1px 0 #18181b",
     textTransform: "uppercase",
     arrowSize: "10px",
     arrowWidth: "20px",
-    animation: animations.snap
+    animation: animations.pop
   }),
   policeTape: createTheme({
     background: "repeating-linear-gradient(135deg, #f8fafc 0, #f8fafc 11px, #2563eb 11px, #2563eb 22px)",
@@ -662,21 +652,20 @@ var presets = {
     animation: animations.slide
   }),
   dossier: createTheme({
-    background: "linear-gradient(90deg, rgba(127, 29, 29, 0.15) 0 4px, transparent 4px), repeating-linear-gradient(0deg, transparent 0 14px, rgba(120, 83, 36, 0.13) 14px 15px), #e7d7b5",
+    background: "linear-gradient(180deg, #f2e5c8, #dfc99f)",
     color: "#3f2d1d",
     fontFamily: "Courier New, monospace",
     fontSize: "11px",
     fontWeight: 800,
     border: "2px solid #92400e",
-    borderRadius: "1px 8px 1px 8px",
-    filter: "drop-shadow(5px 7px 0 rgba(120, 53, 15, 0.35))",
+    borderRadius: "2px 7px 2px 7px",
     padding: "11px 16px",
     letterSpacing: "0.08em",
     textTransform: "uppercase",
     textAlign: "left",
     arrowSize: "8px",
     arrowWidth: "17px",
-    animation: animations.snap
+    animation: animations.soft
   }),
   medical: createTheme({
     background: "linear-gradient(90deg, transparent 44%, rgba(14, 165, 233, 0.08) 44% 56%, transparent 56%), linear-gradient(0deg, transparent 44%, rgba(14, 165, 233, 0.08) 44% 56%, transparent 56%), #f8fafc",
@@ -712,20 +701,18 @@ var presets = {
     }
   }),
   circuit: createTheme({
-    background: "linear-gradient(90deg, transparent 48%, rgba(34, 197, 94, 0.2) 48% 52%, transparent 52%) 0 0 / 18px 18px, linear-gradient(0deg, transparent 48%, rgba(34, 197, 94, 0.2) 48% 52%, transparent 52%) 0 0 / 18px 18px, radial-gradient(circle at 9px 9px, #22c55e 0 1.5px, transparent 2px) 0 0 / 18px 18px, #052e16",
+    background: "linear-gradient(135deg, #052e16, #022c22)",
     color: "#bbf7d0",
     fontFamily: "Consolas, monospace",
     fontSize: "11px",
     fontWeight: 700,
     border: "2px solid #22c55e",
     borderRadius: "5px",
-    filter: "drop-shadow(0 0 7px rgba(34, 197, 94, 0.55))",
     padding: "9px 14px",
     letterSpacing: "0.05em",
-    textShadow: "0 0 4px rgba(34, 197, 94, 0.75)",
     arrowSize: "8px",
     arrowWidth: "16px",
-    animation: animations.snap
+    animation: animations.soft
   }),
   galaxy: createTheme({
     background: "radial-gradient(circle at 12% 25%, #ffffff 0 1px, transparent 1.5px), radial-gradient(circle at 76% 18%, #c4b5fd 0 1px, transparent 1.5px), radial-gradient(circle at 63% 78%, #ffffff 0 1.2px, transparent 1.8px), radial-gradient(circle at 28% 72%, rgba(236, 72, 153, 0.55), transparent 22%), radial-gradient(circle at 70% 20%, rgba(99, 102, 241, 0.55), transparent 32%), #09051f",
@@ -901,27 +888,24 @@ var presets = {
     fontWeight: 900,
     border: "4px solid #000000",
     borderRadius: "0px",
-    filter: "drop-shadow(7px 7px 0 #ef4444)",
     padding: "10px 16px",
     letterSpacing: "-0.03em",
     textTransform: "uppercase",
     textAlign: "left",
     arrowSize: "11px",
     arrowWidth: "19px",
-    animation: animations.snap
+    animation: animations.pop
   }),
   chalkboard: createTheme({
-    background: "repeating-linear-gradient(175deg, rgba(255, 255, 255, 0.018) 0, rgba(255, 255, 255, 0.018) 2px, transparent 2px, transparent 7px), #163a2c",
+    background: "linear-gradient(145deg, #183f30, #102a21)",
     color: "#f5f5dc",
     fontFamily: "Comic Sans MS, Chalkboard, cursive",
     fontSize: "13px",
     fontWeight: 600,
     border: "3px solid #8b5e3c",
     borderRadius: "2px",
-    filter: "drop-shadow(4px 6px 0 rgba(66, 32, 6, 0.45))",
     padding: "10px 16px",
     letterSpacing: "0.025em",
-    textShadow: "0 0 2px rgba(255, 255, 255, 0.55)",
     textAlign: "left",
     arrowSize: "9px",
     arrowWidth: "18px",
@@ -951,6 +935,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",
@@ -1076,6 +1117,7 @@ var useTooltip = ({
 }) => {
   const tooltipRef = useRef(null);
   const bodyRef = useRef(null);
+  const ownerRef = useRef(/* @__PURE__ */ Symbol("tooltip"));
   const hideTimerRef = useRef(null);
   const firstFrameRef = useRef(null);
   const secondFrameRef = useRef(null);
@@ -1088,6 +1130,7 @@ var useTooltip = ({
     y: Number.NaN,
     pointerType: ""
   });
+  const interactiveAreaAtPointRef = useRef(() => "outside");
   const touchGestureRef = useRef(null);
   const suppressFocusUntilRef = useRef(0);
   const [mounted, setMounted] = useState(false);
@@ -1226,7 +1269,7 @@ var useTooltip = ({
     });
   }, [anchor, getAvailableSpace, preferredPlacement]);
   const isFocusInsideTooltipRegion = useCallback(() => {
-    if (!anchor || typeof document === "undefined") {
+    if (!anchor || typeof document === "undefined" || inputModality !== "keyboard") {
       return false;
     }
     const activeElement = document.activeElement;
@@ -1234,50 +1277,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 = 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]
+  );
+  useLayoutEffect(() => {
+    interactiveAreaAtPointRef.current = getInteractivePointerAreaAtPoint;
+  }, [getInteractivePointerAreaAtPoint]);
   const getInteractivePointerArea = 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 = useCallback(() => {
     clearHideTimer();
     clearEnterFrames();
     clearInteractiveFrame();
     pendingHideRef.current = false;
     interactiveBridgeDeadlineRef.current = 0;
+    clearTooltipActivation(ownerRef.current);
+    setMounted(false);
     updatePhase("hidden");
   }, [clearEnterFrames, clearHideTimer, clearInteractiveFrame, updatePhase]);
   const runHide = useCallback(() => {
@@ -1353,21 +1406,51 @@ var useTooltip = ({
       runHide
     ]
   );
-  const showTooltip = 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 = 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 = useCallback(() => {
     if (!interactive || disabled) {
       return;
@@ -1457,6 +1540,13 @@ var useTooltip = ({
     showVersion,
     updatePhase
   ]);
+  useEffect(() => {
+    subscribeInputModality();
+    return () => {
+      unsubscribeInputModality();
+      clearTooltipActivation(ownerRef.current);
+    };
+  }, []);
   useEffect(() => {
     if (!anchor) {
       removeTooltip();
@@ -1474,7 +1564,10 @@ var useTooltip = ({
       if (event.pointerType === "touch") {
         return;
       }
-      showTooltip();
+      showTooltip({
+        x: event.clientX,
+        y: event.clientY
+      });
     };
     const onPointerLeave = (event) => {
       updatePointer(event);
@@ -1546,7 +1639,10 @@ var useTooltip = ({
         return;
       }
       if (phaseRef.current === "hidden" || phaseRef.current === "leaving") {
-        showTooltip();
+        showTooltip({
+          x: event.clientX,
+          y: event.clientY
+        });
       } else {
         hideTooltip(true);
       }
@@ -1643,7 +1739,9 @@ var useTooltip = ({
       scheduleInteractivePointerProcessing();
     };
     const onFocusIn = () => {
-      keepTooltipOpen();
+      if (inputModality === "keyboard") {
+        keepTooltipOpen();
+      }
     };
     const onFocusOut = (event) => {
       const relatedTarget = event.relatedTarget;