@zargaryanvh/react-component-inspector 1.0.8 → 1.0.9

package/dist/InspectionTooltip.js

@@ -136,26 +136,18 @@ export const InspectionTooltip = () => {
         propsSignature: "default",
         sourceFile: "DOM",
     } : null);
-    // Compute anchor position once per element change. The value is intentionally
-    // NOT recomputed when tooltipSize updates (ResizeObserver may fire several
-    // times as the tooltip's content renders) — recomputing on every size update
-    // makes the tooltip visibly slide and shrink as it settles. Pin location is
-    // chosen as: below the element if there's room, otherwise above, right, left,
-    // and finally a fixed corner for elements that fill the viewport.
-    const tooltipSizeRef = useRef(tooltipSize);
-    tooltipSizeRef.current = tooltipSize;
-    const [anchoredPosition, setAnchoredPosition] = useState(null);
-    useEffect(() => {
-        if (!hoveredElement || !document.body.contains(hoveredElement)) {
-            setAnchoredPosition(null);
-            return;
-        }
+    // Compute anchor based on the hovered element's rect. We re-run this when
+    // either the element or the measured tooltip size changes, but the state
+    // setter keeps the previous position whenever it still fits the tooltip in
+    // the viewport. That preserves a single stable position per element while
+    // self-correcting when the tooltip grows past the viewport bound (the case
+    // where content renders larger than the initial estimate).
+    const computeAnchor = (element, w, h) => {
         const padding = 10;
         const gap = 8;
-        const { w, h } = tooltipSizeRef.current;
         const vw = window.innerWidth;
         const vh = window.innerHeight;
-        const rect = hoveredElement.getBoundingClientRect();
+        const rect = element.getBoundingClientRect();
         const spaceBelow = vh - rect.bottom;
         const spaceAbove = rect.top;
         const spaceRight = vw - rect.right;
@@ -184,8 +176,35 @@ export const InspectionTooltip = () => {
             x = cx < vw / 2 ? vw - w - padding : padding;
             y = cy < vh / 2 ? vh - h - padding : padding;
         }
-        setAnchoredPosition(clampToViewport(x, y, w, h));
-    }, [hoveredElement]);
+        return clampToViewport(x, y, w, h);
+    };
+    const [anchoredPosition, setAnchoredPosition] = useState(null);
+    const anchoredForElementRef = useRef(null);
+    useEffect(() => {
+        if (!hoveredElement || !document.body.contains(hoveredElement)) {
+            setAnchoredPosition(null);
+            anchoredForElementRef.current = null;
+            return;
+        }
+        const { w, h } = tooltipSize;
+        const padding = 10;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        setAnchoredPosition((prev) => {
+            const elementChanged = anchoredForElementRef.current !== hoveredElement;
+            const fitsNow = !!prev &&
+                prev.x >= padding &&
+                prev.y >= padding &&
+                prev.x + w <= vw - padding &&
+                prev.y + h <= vh - padding;
+            // Keep the existing anchor whenever it still fits — this is what stops
+            // the tooltip from sliding as the ResizeObserver settles content size.
+            if (!elementChanged && fitsNow)
+                return prev;
+            anchoredForElementRef.current = hoveredElement;
+            return computeAnchor(hoveredElement, w, h);
+        });
+    }, [hoveredElement, tooltipSize]);
     const positionFromElement = anchoredPosition;
     // Position is anchored to the hovered element's rect, not the cursor. This
     // keeps the tooltip static while the cursor moves around inside one element

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zargaryanvh/react-component-inspector",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "A development tool for inspecting React components with AI-friendly metadata extraction",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",