@tent-official/react-walkthrough 1.3.0 → 1.3.4

package/dist/index.mjs

@@ -221,12 +221,14 @@ var useWalkthrough = ({
   displayTotal,
   displayStepOffset,
   isClearLastPositionOnEnd = false,
-  onStepNext
+  onStepNext,
+  onStepPrev
 }) => {
   const started = useRef(false);
   const onCompleteRef = useRef(onWalkthroughComplete);
   const handleWhenLastStepRef = useRef(handleWhenLastStep);
   const onStepNextRef = useRef(onStepNext);
+  const onStepPrevRef = useRef(onStepPrev);
   const conditionMet = startWhenCondition === void 0 ? true : typeof startWhenCondition === "function" ? startWhenCondition() : !!startWhenCondition;
   useEffect(() => {
     onCompleteRef.current = onWalkthroughComplete;
@@ -237,6 +239,9 @@ var useWalkthrough = ({
   useEffect(() => {
     onStepNextRef.current = onStepNext;
   }, [onStepNext]);
+  useEffect(() => {
+    onStepPrevRef.current = onStepPrev;
+  }, [onStepPrev]);
   const start = useCallback(() => {
     if (isDone(storageSuffix, name) || started.current) return;
     started.current = true;
@@ -261,7 +266,8 @@ var useWalkthrough = ({
         displayTotal,
         displayStepOffset,
         isClearLastPositionOnEnd,
-        onStepNext: onStepNextRef.current
+        onStepNext: onStepNextRef.current,
+        onStepPrev: onStepPrevRef.current
       }
     });
   }, [
@@ -635,6 +641,7 @@ var WalkthroughOverlay = ({
   const popoverRef = useRef(null);
   const [popoverPos, setPopoverPos] = useState(null);
   const [popoverHidden, setPopoverHidden] = useState(false);
+  const [isDismissing, setIsDismissing] = useState(false);
   const displayStepRef = useRef(null);
   const displayPosRef = useRef(null);
   const [validSteps, setValidSteps] = useState([]);
@@ -647,6 +654,7 @@ var WalkthroughOverlay = ({
     if (!activeTour) {
       setValidSteps([]);
       setIsDelaying(false);
+      setIsDismissing(false);
       waitingForElsRef.current = false;
       delayDoneForRef.current = null;
       skipNextRecomputeRef.current = false;
@@ -846,6 +854,7 @@ var WalkthroughOverlay = ({
     setPopoverHidden(false);
   }, [popoverHidden, isAnimating, step, popoverPos]);
   if (!activeTour) return null;
+  if (isDismissing) return null;
   if (_activeOverlayId !== null && _activeOverlayId !== instanceIdRef.current) {
     return null;
   }
@@ -936,6 +945,7 @@ var WalkthroughOverlay = ({
     const hasMoreOriginalSteps = currentOrigIdx < activeTour.steps.length - 1;
     const effectiveIsLast = isLast && !(hasTrigger && hasMoreOriginalSteps);
     if (effectiveIsLast) {
+      setIsDismissing(true);
       if (activeTour.handleWhenLastStep) activeTour.handleWhenLastStep();
       completeTour();
     } else {
@@ -1048,8 +1058,7 @@ var WalkthroughOverlay = ({
         }
         return;
       }
-      setPopoverHidden(true);
-      setPopoverPos(null);
+      setIsDismissing(true);
       if (activeTour.handleWhenLastStep) activeTour.handleWhenLastStep();
       setTimeout(() => completeTour(), 300);
       return;
@@ -1057,7 +1066,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];
@@ -1068,6 +1083,7 @@ var WalkthroughOverlay = ({
     }
   };
   const skip = () => {
+    setIsDismissing(true);
     completeTour();
   };
   const popoverWidth = clampSize(step.width, window.innerWidth);