@tent-official/react-walkthrough 1.3.3 → 1.3.5

package/README.md

@@ -93,6 +93,7 @@ Hook to register a walkthrough tour.
 | `displayStepOffset` | `number` | `0` | Offset added to the displayed current step number (display-only, does not affect logic). e.g. `displayStepOffset: 3` with 3 real steps shows 4/total → 5/total → 6/total |
 | `isClearLastPositionOnEnd` | `boolean` | `false` | When `true`, clears the saved last highlight position when the tour ends. This prevents the next tour from animating its highlight from this tour's last position |
 | `onStepNext` | `Record<number, () => void>` | — | Map of original step index → callback. Fires when the user clicks "Next" from that step. Example: `{ 0: () => console.log("left step 0"), 2: () => doSomething() }` |
+| `onStepPrev` | `Record<number, () => void>` | — | Map of original step index → callback. Fires when the user clicks "Back" from that step. Example: `{ 1: () => closeDropdown(), 3: () => cleanup() }` |
 
 **Returns:** `{ start: () => void }`
 

package/dist/index.d.mts

@@ -105,6 +105,8 @@ interface IUseWalkthroughOptions {
     isClearLastPositionOnEnd?: boolean;
     /** Callbacks fired when the user clicks "Next" on a specific step. The key is the original step index (0-based). Called right before advancing to the next step. Example: `onStepNext: { 0: () => openDropdown(), 2: () => fetchData() }` */
     onStepNext?: Record<number, () => void>;
+    /** Callbacks fired when the user clicks "Back" on a specific step. The key is the original step index (0-based). Called right before going back to the previous step. Example: `onStepPrev: { 1: () => closeDropdown(), 3: () => cleanup() }` */
+    onStepPrev?: Record<number, () => void>;
 }
 /**
  * Return value of the useWalkthrough hook.

package/dist/index.d.ts

@@ -105,6 +105,8 @@ interface IUseWalkthroughOptions {
     isClearLastPositionOnEnd?: boolean;
     /** Callbacks fired when the user clicks "Next" on a specific step. The key is the original step index (0-based). Called right before advancing to the next step. Example: `onStepNext: { 0: () => openDropdown(), 2: () => fetchData() }` */
     onStepNext?: Record<number, () => void>;
+    /** Callbacks fired when the user clicks "Back" on a specific step. The key is the original step index (0-based). Called right before going back to the previous step. Example: `onStepPrev: { 1: () => closeDropdown(), 3: () => cleanup() }` */
+    onStepPrev?: Record<number, () => void>;
 }
 /**
  * Return value of the useWalkthrough hook.

package/dist/index.js

@@ -223,12 +223,14 @@ var useWalkthrough = ({
   displayTotal,
   displayStepOffset,
   isClearLastPositionOnEnd = false,
-  onStepNext
+  onStepNext,
+  onStepPrev
 }) => {
   const started = react.useRef(false);
   const onCompleteRef = react.useRef(onWalkthroughComplete);
   const handleWhenLastStepRef = react.useRef(handleWhenLastStep);
   const onStepNextRef = react.useRef(onStepNext);
+  const onStepPrevRef = react.useRef(onStepPrev);
   const conditionMet = startWhenCondition === void 0 ? true : typeof startWhenCondition === "function" ? startWhenCondition() : !!startWhenCondition;
   react.useEffect(() => {
     onCompleteRef.current = onWalkthroughComplete;
@@ -239,6 +241,9 @@ var useWalkthrough = ({
   react.useEffect(() => {
     onStepNextRef.current = onStepNext;
   }, [onStepNext]);
+  react.useEffect(() => {
+    onStepPrevRef.current = onStepPrev;
+  }, [onStepPrev]);
   const start = react.useCallback(() => {
     if (isDone(storageSuffix, name) || started.current) return;
     started.current = true;
@@ -263,7 +268,8 @@ var useWalkthrough = ({
         displayTotal,
         displayStepOffset,
         isClearLastPositionOnEnd,
-        onStepNext: onStepNextRef.current
+        onStepNext: onStepNextRef.current,
+        onStepPrev: onStepPrevRef.current
       }
     });
   }, [
@@ -645,6 +651,7 @@ var WalkthroughOverlay = ({
   const waitingForElsRef = react.useRef(false);
   const delayDoneForRef = react.useRef(null);
   const skipNextRecomputeRef = react.useRef(false);
+  const prevActiveTourNameRef = react.useRef(null);
   react.useEffect(() => {
     var _a2;
     if (!activeTour) {
@@ -654,8 +661,15 @@ var WalkthroughOverlay = ({
       waitingForElsRef.current = false;
       delayDoneForRef.current = null;
       skipNextRecomputeRef.current = false;
+      prevActiveTourNameRef.current = null;
       return;
     }
+    if (activeTour.name !== prevActiveTourNameRef.current) {
+      prevActiveTourNameRef.current = activeTour.name;
+      if (isDismissing) {
+        setIsDismissing(false);
+      }
+    }
     if (skipNextRecomputeRef.current) {
       skipNextRecomputeRef.current = false;
       return;
@@ -1062,7 +1076,13 @@ var WalkthroughOverlay = ({
     advanceStep(hasTrigger);
   };
   const prev = () => {
+    var _a2;
     if (currentValidPos > 0) {
+      const currentOrigIdx = validSteps[currentValidPos]._originalIdx;
+      const stepPrevCb = (_a2 = activeTour.onStepPrev) == null ? void 0 : _a2[currentOrigIdx];
+      if (typeof stepPrevCb === "function") {
+        stepPrevCb();
+      }
       setPopoverHidden(true);
       setPopoverPos(null);
       const prevStep = validSteps[currentValidPos - 1];