@tent-official/react-walkthrough 1.1.98 → 1.1.100

package/dist/index.mjs

@@ -517,99 +517,52 @@ var clampSize = (value, max) => {
   return clamped;
 };
 var EDGE_MARGIN = 8;
-var computePopoverPosition = (rect, popoverW, popoverH, gap, preferred) => {
+var choosePopoverDir = (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 positions = {
-    bottom: {
-      top: rect.top + rect.height + gap,
-      left: clampLeft(rect.left)
-    },
-    top: {
-      top: rect.top - popoverH - gap,
-      left: clampLeft(rect.left)
-    },
-    right: {
-      top: clampTopH(rect.top),
-      left: rect.left + rect.width + gap
-    },
-    left: {
-      top: clampTopH(rect.top),
-      left: rect.left - popoverW - gap
-    }
+  const space = {
+    bottom: vh - (rect.top + rect.height + gap) - EDGE_MARGIN,
+    top: rect.top - gap - EDGE_MARGIN,
+    right: vw - (rect.left + rect.width + gap) - EDGE_MARGIN,
+    left: rect.left - gap - EDGE_MARGIN
   };
-  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 = (top, left, availableH) => {
-    const needsClamp = availableH < popoverH;
-    const maxH = needsClamp ? Math.max(availableH, 60) : null;
-    return { top, left, ...maxH != null && { maxHeight: maxH } };
+  const fits = (dir) => {
+    if (dir === "top" || dir === "bottom") return space[dir] >= popoverH;
+    return space[dir] >= popoverW;
   };
-  const buildForDir = (dir) => {
-    const pos = positions[dir];
-    if (dir === "bottom") {
-      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 (dir === "right" || dir === "left") {
-      return buildResult(clampTopH(pos.top), pos.left, vh - EDGE_MARGIN * 2);
+  const buildResult = (dir) => {
+    let offsetX = 0;
+    let offsetY = 0;
+    let maxHeight = void 0;
+    if (dir === "top" || dir === "bottom") {
+      const popoverRight = rect.left + popoverW;
+      if (popoverRight > vw - EDGE_MARGIN) {
+        offsetX = vw - EDGE_MARGIN - popoverRight;
+      }
+      if (rect.left + offsetX < EDGE_MARGIN) {
+        offsetX = EDGE_MARGIN - rect.left;
+      }
+      if (space[dir] < popoverH) {
+        maxHeight = Math.max(space[dir], 60);
+      }
+    } else {
+      const popoverBottom = rect.top + popoverH;
+      if (popoverBottom > vh - EDGE_MARGIN) {
+        offsetY = vh - EDGE_MARGIN - popoverBottom;
+      }
+      if (rect.top + offsetY < EDGE_MARGIN) {
+        offsetY = EDGE_MARGIN - rect.top;
+      }
     }
-    return { top: pos.top, left: pos.left };
+    return { dir, offsetX, offsetY, ...maxHeight != null && { maxHeight } };
   };
-  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])) {
-    const result2 = buildForDir(preferred);
-    console.log("[WT-DEBUG] chosen:", preferred, "(preferred)", result2);
-    return result2;
-  }
+  if (preferred && fits(preferred)) return buildResult(preferred);
   const order = ["bottom", "top", "right", "left"];
-  for (const dir of order) {
-    if (fitsInViewport(positions[dir])) {
-      const result2 = buildForDir(dir);
-      console.log("[WT-DEBUG] chosen:", dir, "(fits)", result2);
-      return result2;
-    }
+  for (const d of order) {
+    if (fits(d)) return buildResult(d);
   }
-  const best = [
-    { dir: "bottom", space: spaceBottom },
-    { dir: "top", space: spaceTop },
-    { dir: "right", space: spaceRight },
-    { dir: "left", space: spaceLeft }
-  ].sort((a, b) => b.space - a.space)[0].dir;
-  const result = buildForDir(best);
-  console.log("[WT-DEBUG] chosen:", best, "(fallback)", result);
-  return result;
+  const best = Object.entries(space).sort((a, b) => b[1] - a[1])[0][0];
+  return buildResult(best);
 };
 var WT_CONTAINER_ID = "wt-portal-root";
 var getPortalContainer = () => {
@@ -641,7 +594,7 @@ var WalkthroughOverlay = ({
   prevColor,
   skipColor
 } = {}) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   injectKeyframes();
   const { activeTour } = useGlobalState();
   const instanceIdRef = useRef(null);
@@ -823,14 +776,14 @@ var WalkthroughOverlay = ({
       return;
     }
     const measured = popoverRef.current.getBoundingClientRect();
-    const pos = computePopoverPosition(
+    const dirInfo = choosePopoverDir(
       rect,
       measured.width,
       measured.height,
       $popoverGap,
       step.position
     );
-    setPopoverPos(pos);
+    setPopoverPos(dirInfo);
   }, [rect, step, $popoverGap, isAnimating]);
   useEffect(() => {
     if (nextBtnRef.current) {
@@ -1075,18 +1028,41 @@ var WalkthroughOverlay = ({
     displayPosRef.current = currentValidPos;
   }
   const ds = displayStepRef.current;
+  const dir = (_i = popoverPos == null ? void 0 : popoverPos.dir) != null ? _i : "bottom";
+  const offsetX = (_j = popoverPos == null ? void 0 : popoverPos.offsetX) != null ? _j : 0;
+  const offsetY = (_k = popoverPos == null ? void 0 : popoverPos.offsetY) != null ? _k : 0;
+  const anchorStyle = popoverReady ? {
+    position: "fixed",
+    top: rect.top,
+    left: rect.left,
+    width: rect.width,
+    height: rect.height,
+    pointerEvents: "none",
+    zIndex: 99999
+  } : {
+    position: "fixed",
+    top: -9999,
+    left: -9999,
+    pointerEvents: "none",
+    zIndex: 99999
+  };
+  const dirStyles = {
+    bottom: { top: `calc(100% + ${$popoverGap}px)`, left: offsetX },
+    top: { bottom: `calc(100% + ${$popoverGap}px)`, left: offsetX },
+    right: { top: offsetY, left: `calc(100% + ${$popoverGap}px)` },
+    left: { top: offsetY, right: `calc(100% + ${$popoverGap}px)` }
+  };
+  const maxHeightStyle = (popoverPos == null ? void 0 : popoverPos.maxHeight) != null ? { maxHeight: popoverPos.maxHeight, overflowY: "auto" } : {};
   const popoverStyle = popoverReady ? {
-    top: popoverPos.top,
-    left: popoverPos.left,
+    position: "absolute",
+    ...dirStyles[dir],
     width: popoverWidth,
     minWidth: $popoverMinWidth,
     padding: $popoverPadding,
     borderRadius: $popoverBorderRadius,
     fontFamily: "inherit",
-    ...popoverPos.maxHeight != null && {
-      maxHeight: popoverPos.maxHeight,
-      overflowY: "auto"
-    }
+    pointerEvents: "auto",
+    ...maxHeightStyle
   } : {
     position: "fixed",
     top: -9999,
@@ -1142,11 +1118,11 @@ var WalkthroughOverlay = ({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxs(PopoverContainer, { ref: popoverRef, style: popoverStyle, children: [
+    /* @__PURE__ */ jsx("div", { style: anchorStyle, children: /* @__PURE__ */ jsxs(PopoverContainer, { ref: popoverRef, style: popoverStyle, children: [
       /* @__PURE__ */ jsxs(PopoverBody, { children: [
         /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "row", justifyContent: "space-between" }, children: [
           pStep.title ? /* @__PURE__ */ jsx(PopoverTitle, { children: pStep.title }) : "",
-          ((_i = pStep.isShowStep) != null ? _i : pIsShowStep) && /* @__PURE__ */ jsxs("span", { style: { color: "#a1a1aa", fontSize: "12px", fontWeight: "400" }, children: [
+          ((_l = pStep.isShowStep) != null ? _l : pIsShowStep) && /* @__PURE__ */ jsxs("span", { style: { color: "#a1a1aa", fontSize: "12px", fontWeight: "400" }, children: [
             pDisplayCurrentStep,
             "/",
             pDisplayTotalSteps
@@ -1171,7 +1147,7 @@ var WalkthroughOverlay = ({
           }
         ) }),
         /* @__PURE__ */ jsxs(ButtonGroup, { children: [
-          ((_j = pStep.isShowPrev) != null ? _j : pIsShowPrev) && pCurrentValidPos > 0 && /* @__PURE__ */ jsx(
+          ((_m = pStep.isShowPrev) != null ? _m : pIsShowPrev) && pCurrentValidPos > 0 && /* @__PURE__ */ jsx(
             "button",
             {
               className: "wt-btn",
@@ -1192,7 +1168,7 @@ var WalkthroughOverlay = ({
           )
         ] })
       ] })
-    ] })
+    ] }) })
   ] });
   return createPortal(
     /* @__PURE__ */ jsx("div", { ...portalEventHandlers, style: { pointerEvents: "auto" }, children: overlay }),