@tent-official/react-walkthrough 1.3.5 → 1.4.1

package/dist/index.mjs

@@ -529,7 +529,11 @@ var clampSize = (value, max) => {
   return clamped;
 };
 var EDGE_MARGIN = 8;
+var INNER_INSET = 12;
 var choosePopoverDir = (rect, popoverW, popoverH, gap, preferred) => {
+  if (preferred && preferred.startsWith("inner-")) {
+    return { dir: preferred, align: "start", offsetX: 0, offsetY: 0 };
+  }
   const vw = window.innerWidth;
   const vh = window.innerHeight;
   const space = {
@@ -1005,13 +1009,21 @@ var WalkthroughOverlay = ({
     }
   };
   const next = () => {
-    var _a2;
+    var _a2, _b2;
     const currentOrigIdx = validSteps[currentValidPos]._originalIdx;
     const stepNextCb = (_a2 = activeTour.onStepNext) == null ? void 0 : _a2[currentOrigIdx];
     if (typeof stepNextCb === "function") {
       stepNextCb();
     }
     const hasTrigger = !!step.triggerElOnNext;
+    const afterNextDelay = (_b2 = step.delayAfterNext) != null ? _b2 : 0;
+    const withDelay = (fn) => {
+      if (afterNextDelay > 0) {
+        setTimeout(fn, afterNextDelay);
+      } else {
+        fn();
+      }
+    };
     if (hasTrigger) {
       setPopoverHidden(true);
       setPopoverPos(null);
@@ -1044,7 +1056,7 @@ var WalkthroughOverlay = ({
         const SETTLE_DELAY = 150;
         const alreadyExists = document.getElementById(nextElId);
         if (alreadyExists) {
-          setTimeout(() => injectAndAdvance(), SETTLE_DELAY);
+          withDelay(() => setTimeout(() => injectAndAdvance(), SETTLE_DELAY));
         } else {
           waitingForElsRef.current = true;
           const observer = new MutationObserver(() => {
@@ -1052,7 +1064,7 @@ var WalkthroughOverlay = ({
             if (found) {
               observer.disconnect();
               waitingForElsRef.current = false;
-              setTimeout(() => injectAndAdvance(), SETTLE_DELAY);
+              withDelay(() => setTimeout(() => injectAndAdvance(), SETTLE_DELAY));
             }
           });
           observer.observe(document.body, { childList: true, subtree: true });
@@ -1060,7 +1072,7 @@ var WalkthroughOverlay = ({
             observer.disconnect();
             if (waitingForElsRef.current) {
               waitingForElsRef.current = false;
-              advanceStep(hasTrigger);
+              withDelay(() => advanceStep(hasTrigger));
             }
           }, 3e3);
         }
@@ -1071,7 +1083,13 @@ var WalkthroughOverlay = ({
       setTimeout(() => completeTour(), 300);
       return;
     }
-    advanceStep(hasTrigger);
+    if (afterNextDelay > 0) {
+      setPopoverHidden(true);
+      setPopoverPos(null);
+      withDelay(() => advanceStep(hasTrigger));
+    } else {
+      advanceStep(hasTrigger);
+    }
   };
   const prev = () => {
     var _a2;
@@ -1141,7 +1159,12 @@ var WalkthroughOverlay = ({
     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 }
+    left: { right: `calc(100% + ${$popoverGap}px)`, ...vAlign },
+    // inner-* : popover sits INSIDE the highlight rect, inset 12px from the edge
+    "inner-bottom": { bottom: INNER_INSET, right: INNER_INSET },
+    "inner-top": { top: INNER_INSET, right: INNER_INSET },
+    "inner-left": { left: INNER_INSET, bottom: INNER_INSET },
+    "inner-right": { right: INNER_INSET, bottom: INNER_INSET }
   };
   const maxHeightStyle = (popoverPos == null ? void 0 : popoverPos.maxHeight) != null ? { maxHeight: popoverPos.maxHeight, overflowY: "auto" } : {};
   const popoverStyle = popoverReady ? {