@tent-official/react-walkthrough 1.3.0 → 1.3.3

package/README.md

@@ -92,7 +92,7 @@ Hook to register a walkthrough tour.
 | `displayTotal` | `number` | — | Override the total step count displayed in the step counter (display-only, does not affect logic) |
 | `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>` | — | 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 |
+| `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() }` |
 
 **Returns:** `{ start: () => void }`
 
@@ -114,9 +114,9 @@ Hook to register a walkthrough tour.
 | `nextLabel` | `string` | — | Override tour-level `nextLabel` for this step |
 | `prevLabel` | `string` | — | Override tour-level `prevLabel` for this step |
 | `skipLabel` | `string` | — | Override tour-level `skipLabel` for this step |
-| `displayStep` | `number` | — | Override the displayed current step number for this step (display-only, does not affect logic) |
-| `displayTotal` | `number` | — | Override the displayed total step count for this step (display-only, does not affect logic) |
-| `forceRecompute` | `boolean` | `false` | 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 |
+| `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 |
 
 ### `IStepDescription`
 
@@ -258,44 +258,9 @@ The popover automatically positions itself to stay within the viewport:
 
 The popover also waits for the target element to be scrolled into view before appearing.
 
-## Step-Level Callbacks (`onStepNext`)
+## Instant Dismiss
 
-Use `onStepNext` to fire a custom function when the user clicks "Next" on a specific step. The key is the original step index (0-based):
-
-```jsx
-useWalkthrough({
-  name: "setup-tour",
-  steps: [
-    { el: "print-side", title: "Print Side", description: [{ description: "Select print side" }] },
-    { el: "print-system", title: "Print System", description: [{ description: "Select print system" }] },
-    { el: "print-color", title: "Print Color", description: [{ description: "Select color" }] },
-  ],
-  onStepNext: {
-    0: () => openPrintSystemDropdown(),   // fired when leaving step 0
-    1: () => fetchColorOptions(),          // fired when leaving step 1
-  },
-});
-```
-
-## Force Recompute (`forceRecompute`)
-
-When a step's next element is conditionally rendered (hidden until some action), use `forceRecompute` to wait for it to appear before advancing:
-
-```jsx
-steps: [
-  {
-    el: "print-side",
-    title: "Print Side",
-    forceRecompute: true, // wait for next element to appear after advancing
-    description: [{ description: "Select print side — the next section will appear after selection" }],
-  },
-  {
-    el: "print-system", // this element is hidden until print-side is selected
-    title: "Print System",
-    description: [{ description: "Now select the print system" }],
-  },
-]
-```
+When the user clicks **Done** on the last step (or **Skip** at any step), the highlight and popover vanish **instantly** in the same render frame — no lingering overlay or flash.
 
 ## License
 

package/dist/index.js

@@ -637,6 +637,7 @@ var WalkthroughOverlay = ({
   const popoverRef = react.useRef(null);
   const [popoverPos, setPopoverPos] = react.useState(null);
   const [popoverHidden, setPopoverHidden] = react.useState(false);
+  const [isDismissing, setIsDismissing] = react.useState(false);
   const displayStepRef = react.useRef(null);
   const displayPosRef = react.useRef(null);
   const [validSteps, setValidSteps] = react.useState([]);
@@ -649,6 +650,7 @@ var WalkthroughOverlay = ({
     if (!activeTour) {
       setValidSteps([]);
       setIsDelaying(false);
+      setIsDismissing(false);
       waitingForElsRef.current = false;
       delayDoneForRef.current = null;
       skipNextRecomputeRef.current = false;
@@ -848,6 +850,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;
   }
@@ -938,6 +941,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 {
@@ -1050,8 +1054,7 @@ var WalkthroughOverlay = ({
         }
         return;
       }
-      setPopoverHidden(true);
-      setPopoverPos(null);
+      setIsDismissing(true);
       if (activeTour.handleWhenLastStep) activeTour.handleWhenLastStep();
       setTimeout(() => completeTour(), 300);
       return;
@@ -1070,6 +1073,7 @@ var WalkthroughOverlay = ({
     }
   };
   const skip = () => {
+    setIsDismissing(true);
     completeTour();
   };
   const popoverWidth = clampSize(step.width, window.innerWidth);