@tent-official/react-walkthrough 1.1.96 → 1.1.98

package/dist/index.js

@@ -523,21 +523,11 @@ var computePopoverPosition = (rect, popoverW, popoverH, gap, preferred) => {
   const vw = window.innerWidth;
   const vh = window.innerHeight;
   const clampLeft = (left) => Math.max(EDGE_MARGIN, Math.min(left, vw - popoverW - EDGE_MARGIN));
+  const clampTopH = (top) => Math.max(EDGE_MARGIN, Math.min(top, vh - popoverH - EDGE_MARGIN));
   const spaceBottom = vh - (rect.top + rect.height + gap) - EDGE_MARGIN;
   const spaceTop = rect.top - gap - EDGE_MARGIN;
   const spaceRight = vw - (rect.left + rect.width + gap) - EDGE_MARGIN;
   const spaceLeft = rect.left - gap - EDGE_MARGIN;
-  const clampTopForVertical = (top, dir) => {
-    const clamped = Math.max(EDGE_MARGIN, Math.min(top, vh - popoverH - EDGE_MARGIN));
-    if (dir === "top") {
-      return Math.min(clamped, rect.top - gap - popoverH);
-    }
-    if (dir === "bottom") {
-      return Math.max(clamped, rect.top + rect.height + gap);
-    }
-    return clamped;
-  };
-  const clampTopForHorizontal = (top) => Math.max(EDGE_MARGIN, Math.min(top, vh - popoverH - EDGE_MARGIN));
   const positions = {
     bottom: {
       top: rect.top + rect.height + gap,
@@ -548,34 +538,69 @@ var computePopoverPosition = (rect, popoverW, popoverH, gap, preferred) => {
       left: clampLeft(rect.left)
     },
     right: {
-      top: clampTopForHorizontal(rect.top),
+      top: clampTopH(rect.top),
       left: rect.left + rect.width + gap
     },
     left: {
-      top: clampTopForHorizontal(rect.top),
+      top: clampTopH(rect.top),
       left: rect.left - popoverW - gap
     }
   };
   const fitsInViewport = (pos) => pos.top >= EDGE_MARGIN && pos.left >= EDGE_MARGIN && pos.top + popoverH <= vh - EDGE_MARGIN && pos.left + popoverW <= vw - EDGE_MARGIN;
-  const buildResult = (pos, dir) => {
-    let maxH = null;
+  const buildResult = (top, left, availableH) => {
+    const needsClamp = availableH < popoverH;
+    const maxH = needsClamp ? Math.max(availableH, 60) : null;
+    return { top, left, ...maxH != null && { maxHeight: maxH } };
+  };
+  const buildForDir = (dir) => {
+    const pos = positions[dir];
     if (dir === "bottom") {
-      maxH = vh - pos.top - EDGE_MARGIN;
-    } else if (dir === "top") {
-      maxH = rect.top - gap - EDGE_MARGIN;
-    } else {
-      maxH = vh - EDGE_MARGIN * 2;
+      const anchorTop = rect.top + rect.height + gap;
+      return buildResult(anchorTop, clampLeft(pos.left), vh - anchorTop - EDGE_MARGIN);
+    }
+    if (dir === "top") {
+      const availH = spaceTop;
+      const effectiveH = Math.min(popoverH, availH);
+      const anchorTop = rect.top - gap - effectiveH;
+      const finalTop = Math.max(EDGE_MARGIN, anchorTop);
+      return buildResult(finalTop, clampLeft(pos.left), availH);
     }
-    if (maxH >= popoverH) maxH = null;
-    return { top: pos.top, left: pos.left, ...maxH != null && { maxHeight: Math.max(maxH, 60) } };
+    if (dir === "right" || dir === "left") {
+      return buildResult(clampTopH(pos.top), pos.left, vh - EDGE_MARGIN * 2);
+    }
+    return { top: pos.top, left: pos.left };
   };
+  console.log("[WT-DEBUG] computePopoverPosition", {
+    rect: { top: rect.top, left: rect.left, width: rect.width, height: rect.height },
+    popoverW,
+    popoverH,
+    gap,
+    preferred,
+    vw,
+    vh,
+    spaceTop,
+    spaceBottom,
+    spaceRight,
+    spaceLeft,
+    fits: {
+      bottom: fitsInViewport(positions.bottom),
+      top: fitsInViewport(positions.top),
+      right: fitsInViewport(positions.right),
+      left: fitsInViewport(positions.left)
+    },
+    positions
+  });
   if (preferred && positions[preferred] && fitsInViewport(positions[preferred])) {
-    return buildResult(positions[preferred], preferred);
+    const result2 = buildForDir(preferred);
+    console.log("[WT-DEBUG] chosen:", preferred, "(preferred)", result2);
+    return result2;
   }
   const order = ["bottom", "top", "right", "left"];
   for (const dir of order) {
     if (fitsInViewport(positions[dir])) {
-      return buildResult(positions[dir], dir);
+      const result2 = buildForDir(dir);
+      console.log("[WT-DEBUG] chosen:", dir, "(fits)", result2);
+      return result2;
     }
   }
   const best = [
@@ -584,10 +609,9 @@ var computePopoverPosition = (rect, popoverW, popoverH, gap, preferred) => {
     { dir: "right", space: spaceRight },
     { dir: "left", space: spaceLeft }
   ].sort((a, b) => b.space - a.space)[0].dir;
-  const fallback = positions[best];
-  const clampedTop = best === "top" || best === "bottom" ? clampTopForVertical(fallback.top, best) : clampTopForHorizontal(fallback.top);
-  const clampedLeft = Math.max(EDGE_MARGIN, Math.min(fallback.left, vw - popoverW - EDGE_MARGIN));
-  return buildResult({ top: clampedTop, left: clampedLeft }, best);
+  const result = buildForDir(best);
+  console.log("[WT-DEBUG] chosen:", best, "(fallback)", result);
+  return result;
 };
 var WT_CONTAINER_ID = "wt-portal-root";
 var getPortalContainer = () => {