@tent-official/react-walkthrough 1.4.0 → 1.4.2

package/README.md

@@ -119,6 +119,7 @@ Hook to register a walkthrough tour.
 | `displayStep` | `number` | — | Override the displayed step number for this step (display-only) |
 | `displayTotal` | `number` | — | Override the displayed total for this step (display-only) |
 | `forceRecompute` | `boolean` | — | When `true`, forces a DOM re-read before advancing to the next step. Useful when the next element is conditionally rendered and needs a layout update to appear |
+| `delayAfterNext` | `number` | `0` | Delay in ms after clicking "Next" (after `onStepNext` and `triggerElOnNext` have fired) before advancing to the next step. The overlay stays visible with the popover hidden during the delay |
 
 ### `IStepDescription`
 

package/dist/index.d.mts

@@ -61,6 +61,8 @@ interface IWalkthroughStep {
     displayTotal?: number;
     /** When true, forces a recompute of valid steps after advancing from this step. Useful when the next step's element is hidden/conditional and needs DOM changes to become visible. Default: false */
     forceRecompute?: boolean;
+    /** Delay in milliseconds after clicking "Next" (after onStepNext and triggerElOnNext have fired) before advancing to the next step. The overlay stays visible with the popover hidden during the delay. Default: 0 (no delay) */
+    delayAfterNext?: number;
 }
 /**
  * Options for the useWalkthrough hook.

package/dist/index.d.ts

@@ -61,6 +61,8 @@ interface IWalkthroughStep {
     displayTotal?: number;
     /** When true, forces a recompute of valid steps after advancing from this step. Useful when the next step's element is hidden/conditional and needs DOM changes to become visible. Default: false */
     forceRecompute?: boolean;
+    /** Delay in milliseconds after clicking "Next" (after onStepNext and triggerElOnNext have fired) before advancing to the next step. The overlay stays visible with the popover hidden during the delay. Default: 0 (no delay) */
+    delayAfterNext?: number;
 }
 /**
  * Options for the useWalkthrough hook.

package/dist/index.js

@@ -1011,13 +1011,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);
@@ -1039,18 +1047,28 @@ var WalkthroughOverlay = ({
           const alreadyInValid = validSteps.some((s) => s._originalIdx === nextOrigIdx);
           const newValidSteps = alreadyInValid ? validSteps : [...validSteps, nextStepWithIdx].sort((a, b) => a._originalIdx - b._originalIdx);
           setValidSteps(newValidSteps);
-          if (!step.forceRecompute) {
-            skipNextRecomputeRef.current = true;
-          }
+          skipNextRecomputeRef.current = true;
           setGlobalState((s) => ({
             ...s,
             activeTour: { ...s.activeTour, currentStep: nextOrigIdx }
           }));
+          if (step.forceRecompute) {
+            setTimeout(() => {
+              skipNextRecomputeRef.current = false;
+              setGlobalState((s) => {
+                if (!s.activeTour) return s;
+                return {
+                  ...s,
+                  activeTour: { ...s.activeTour, _recompute: Date.now() }
+                };
+              });
+            }, 500);
+          }
         };
         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(() => {
@@ -1058,7 +1076,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 });
@@ -1066,7 +1084,7 @@ var WalkthroughOverlay = ({
             observer.disconnect();
             if (waitingForElsRef.current) {
               waitingForElsRef.current = false;
-              advanceStep(hasTrigger);
+              withDelay(() => advanceStep(hasTrigger));
             }
           }, 3e3);
         }
@@ -1077,7 +1095,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;