@tent-official/react-walkthrough 1.1.97 → 1.1.99

package/dist/index.js

@@ -519,73 +519,27 @@ 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 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 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 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);
-    }
-    return { top: pos.top, left: pos.left };
+  const fits = (dir) => {
+    if (dir === "top" || dir === "bottom") return space[dir] >= popoverH;
+    return space[dir] >= popoverW;
   };
-  if (preferred && positions[preferred] && fitsInViewport(positions[preferred])) {
-    return buildForDir(preferred);
-  }
+  if (preferred && fits(preferred)) return { dir: preferred };
   const order = ["bottom", "top", "right", "left"];
-  for (const dir of order) {
-    if (fitsInViewport(positions[dir])) {
-      return buildForDir(dir);
-    }
+  for (const d of order) {
+    if (fits(d)) return { dir: 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;
-  return buildForDir(best);
+  const best = Object.entries(space).sort((a, b) => b[1] - a[1])[0][0];
+  const maxH = best === "top" || best === "bottom" ? Math.max(space[best], 60) : Math.max(vh - EDGE_MARGIN * 2, 60);
+  return { dir: best, maxHeight: maxH };
 };
 var WT_CONTAINER_ID = "wt-portal-root";
 var getPortalContainer = () => {
@@ -617,7 +571,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;
   injectKeyframes();
   const { activeTour } = useGlobalState();
   const instanceIdRef = react.useRef(null);
@@ -799,14 +753,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]);
   react.useEffect(() => {
     if (nextBtnRef.current) {
@@ -1051,18 +1005,39 @@ var WalkthroughOverlay = ({
     displayPosRef.current = currentValidPos;
   }
   const ds = displayStepRef.current;
+  const dir = (_i = popoverPos == null ? void 0 : popoverPos.dir) != null ? _i : "bottom";
+  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: 0 },
+    top: { bottom: `calc(100% + ${$popoverGap}px)`, left: 0 },
+    right: { top: 0, left: `calc(100% + ${$popoverGap}px)` },
+    left: { top: 0, 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,
@@ -1118,11 +1093,11 @@ var WalkthroughOverlay = ({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(PopoverContainer, { ref: popoverRef, style: popoverStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: anchorStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(PopoverContainer, { ref: popoverRef, style: popoverStyle, children: [
       /* @__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 }) : "",
-          ((_i = pStep.isShowStep) != null ? _i : pIsShowStep) && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#a1a1aa", fontSize: "12px", fontWeight: "400" }, children: [
+          ((_j = pStep.isShowStep) != null ? _j : pIsShowStep) && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#a1a1aa", fontSize: "12px", fontWeight: "400" }, children: [
             pDisplayCurrentStep,
             "/",
             pDisplayTotalSteps
@@ -1147,7 +1122,7 @@ var WalkthroughOverlay = ({
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { children: [
-          ((_j = pStep.isShowPrev) != null ? _j : pIsShowPrev) && pCurrentValidPos > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          ((_k = pStep.isShowPrev) != null ? _k : pIsShowPrev) && pCurrentValidPos > 0 && /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               className: "wt-btn",
@@ -1168,7 +1143,7 @@ var WalkthroughOverlay = ({
           )
         ] })
       ] })
-    ] })
+    ] }) })
   ] });
   return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx("div", { ...portalEventHandlers, style: { pointerEvents: "auto" }, children: overlay }),