@tent-official/react-walkthrough 1.1.101 → 1.1.102

package/dist/index.js

@@ -536,27 +536,40 @@ var choosePopoverDir = (rect, popoverW, popoverH, gap, preferred) => {
     let offsetX = 0;
     let offsetY = 0;
     let maxHeight = void 0;
+    let align = "start";
     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;
+      const rectCenter = rect.left + rect.width / 2;
+      align = rectCenter > vw / 2 ? "end" : "start";
+      if (align === "start") {
+        const popoverRight = rect.left + popoverW;
+        if (popoverRight > vw - EDGE_MARGIN) {
+          offsetX = vw - EDGE_MARGIN - popoverRight;
+        }
+      } else {
+        const popoverLeft = rect.left + rect.width - popoverW;
+        if (popoverLeft < EDGE_MARGIN) {
+          offsetX = EDGE_MARGIN - popoverLeft;
+        }
       }
       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;
+      const rectMiddle = rect.top + rect.height / 2;
+      align = rectMiddle > vh / 2 ? "end" : "start";
+      if (align === "start") {
+        const popoverBottom = rect.top + popoverH;
+        if (popoverBottom > vh - EDGE_MARGIN) {
+          offsetY = vh - EDGE_MARGIN - popoverBottom;
+        }
+      } else {
+        const popoverTop = rect.top + rect.height - popoverH;
+        if (popoverTop < EDGE_MARGIN) {
+          offsetY = EDGE_MARGIN - popoverTop;
+        }
       }
     }
-    return { dir, offsetX, offsetY, ...maxHeight != null && { maxHeight } };
+    return { dir, align, offsetX, offsetY, ...maxHeight != null && { maxHeight } };
   };
   if (preferred && fits(preferred)) return buildResult(preferred);
   const order = ["bottom", "top", "right", "left"];
@@ -596,7 +609,7 @@ var WalkthroughOverlay = ({
   prevColor,
   skipColor
 } = {}) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
   injectKeyframes();
   const { activeTour } = useGlobalState();
   const instanceIdRef = react.useRef(null);
@@ -1031,21 +1044,9 @@ var WalkthroughOverlay = ({
   }
   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;
-  if (popoverReady && step) {
-    const dbgEl = document.getElementById(resolveElId(step.el));
-    const dbgReal = dbgEl ? dbgEl.getBoundingClientRect() : null;
-    console.log("[WT-DEBUG] anchor rect vs real element", {
-      anchorRect: { top: rect.top, left: rect.left, width: rect.width, height: rect.height },
-      realElement: dbgReal ? { top: dbgReal.top, left: dbgReal.left, width: dbgReal.width, height: dbgReal.height } : null,
-      dir,
-      offsetX,
-      offsetY,
-      popoverPos,
-      containerElement: activeTour == null ? void 0 : activeTour.containerElement
-    });
-  }
+  const align = (_j = popoverPos == null ? void 0 : popoverPos.align) != null ? _j : "start";
+  const offsetX = (_k = popoverPos == null ? void 0 : popoverPos.offsetX) != null ? _k : 0;
+  const offsetY = (_l = popoverPos == null ? void 0 : popoverPos.offsetY) != null ? _l : 0;
   const anchorStyle = popoverReady ? {
     position: "fixed",
     top: rect.top,
@@ -1061,11 +1062,13 @@ var WalkthroughOverlay = ({
     pointerEvents: "none",
     zIndex: 99999
   };
+  const hAlign = align === "end" ? { right: offsetX } : { left: offsetX };
+  const vAlign = align === "end" ? { bottom: offsetY } : { top: offsetY };
   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)` }
+    bottom: { top: `calc(100% + ${$popoverGap}px)`, ...hAlign },
+    top: { bottom: `calc(100% + ${$popoverGap}px)`, ...hAlign },
+    right: { left: `calc(100% + ${$popoverGap}px)`, ...vAlign },
+    left: { right: `calc(100% + ${$popoverGap}px)`, ...vAlign }
   };
   const maxHeightStyle = (popoverPos == null ? void 0 : popoverPos.maxHeight) != null ? { maxHeight: popoverPos.maxHeight, overflowY: "auto" } : {};
   const popoverStyle = popoverReady ? {
@@ -1137,7 +1140,7 @@ var WalkthroughOverlay = ({
       /* @__PURE__ */ jsxRuntime.jsxs(PopoverBody, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "row", justifyContent: "space-between" }, children: [
           pStep.title ? /* @__PURE__ */ jsxRuntime.jsx(PopoverTitle, { children: pStep.title }) : "",
-          ((_l = pStep.isShowStep) != null ? _l : pIsShowStep) && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#a1a1aa", fontSize: "12px", fontWeight: "400" }, children: [
+          ((_m = pStep.isShowStep) != null ? _m : pIsShowStep) && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#a1a1aa", fontSize: "12px", fontWeight: "400" }, children: [
             pDisplayCurrentStep,
             "/",
             pDisplayTotalSteps
@@ -1162,7 +1165,7 @@ var WalkthroughOverlay = ({
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { children: [
-          ((_m = pStep.isShowPrev) != null ? _m : pIsShowPrev) && pCurrentValidPos > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          ((_n = pStep.isShowPrev) != null ? _n : pIsShowPrev) && pCurrentValidPos > 0 && /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               className: "wt-btn",