feat: add step index to next and previous step

Author: devrnt

src/types.ts

@@ -10,10 +10,18 @@ export type WizardProps = {
 };
 
 export type WizardValues = {
-  /** Go to the next step */
-  nextStep: () => Promise<void>;
-  /** Go to the previous step */
-  previousStep: () => void;
+  /**
+   * Go to the next step
+   *
+   * @param stepIndex Overwrite the default behaviour by providing a step index
+   */
+  nextStep: (stepIndex?: number) => Promise<void>;
+  /**
+   * Go to the previous step
+   *
+   * @param stepIndex Overwrite the default behaviour by providing a step index
+   *  */
+  previousStep: (stepIndex?: number) => void;
   /**
    * Attach a callback that will be called when calling `nextStep()`
    *

src/wizard.tsx

@@ -16,15 +16,15 @@ const Wizard: React.FC<WizardProps> = React.memo(
       activeStep < React.Children.toArray(children).length - 1;
     hasPreviousStep.current = activeStep > 0;
 
-    const goToNextStep = React.useRef(() => {
+    const goToNextStep = React.useRef((stepIndex?: number) => {
       if (hasNextStep.current) {
-        setActiveStep((activeStep) => activeStep + 1);
+        setActiveStep((activeStep) => stepIndex ?? activeStep + 1);
       }
     });
 
-    const previousStep = React.useRef(() => {
+    const previousStep = React.useRef((step?: number) => {
       if (hasPreviousStep.current) {
-        setActiveStep((activeStep) => activeStep - 1);
+        setActiveStep((activeStep) => step ?? activeStep - 1);
       }
     });
 
@@ -33,14 +33,14 @@ const Wizard: React.FC<WizardProps> = React.memo(
       nextStepHandler.current = handler;
     });
 
-    const doNextStep = React.useRef(async () => {
+    const doNextStep = React.useRef(async (stepIndex?: number) => {
       if (hasNextStep.current && nextStepHandler.current) {
         try {
           setIsLoading(true);
           await nextStepHandler.current();
           setIsLoading(false);
           nextStepHandler.current = null;
-          goToNextStep.current();
+          goToNextStep.current(stepIndex);
         } catch (error) {
           setIsLoading(false);
           throw error;

test/useWizard.test.tsx

@@ -91,6 +91,52 @@ describe('useWizard', () => {
     });
   });
 
+  test('should go to passed step index on next step', () => {
+    const { result } = renderHook(() => useWizard(), {
+      wrapper: ({ children }: { children: React.ReactNode }) => {
+        return <Wizard>{children}</Wizard>;
+      },
+      initialProps: {
+        children: (
+          <>
+            <p>step 1</p>
+            <p>step 2</p>
+            <p>step 3</p>
+          </>
+        ),
+      },
+    });
+    // Wait for an element to appear
+    waitFor(() => {
+      result.current.nextStep(2);
+      expect(result.current.isFirstStep).toBe(false);
+      expect(result.current.isLastStep).toBe(true);
+    });
+  });
+
+  test('should go to passed step index on previous step', () => {
+    const { result } = renderHook(() => useWizard(), {
+      wrapper: ({ children }: { children: React.ReactNode }) => {
+        return <Wizard>{children}</Wizard>;
+      },
+      initialProps: {
+        children: (
+          <>
+            <p>step 1</p>
+            <p>step 2</p>
+            <p>step 3</p>
+          </>
+        ),
+      },
+    });
+    // Wait for an element to appear
+    waitFor(() => {
+      result.current.previousStep(2);
+      expect(result.current.isFirstStep).toBe(false);
+      expect(result.current.isLastStep).toBe(true);
+    });
+  });
+
   test('should not go to previous step if first step', () => {
     const { result } = renderUseWizardHook();