feat: add sidebarAndStepWrapper prop

Gives ability to add a wrapper around the sidebar and the active step. Useful for styling.

Author: johnfumaster

src/types.ts

@@ -19,6 +19,16 @@ export type WizardProps = {
    * ```
    */
   wrapper?: React.ReactElement;
+  /**
+   * Optional wrapper that is exclusively wrapped around the sidebar and active step component. It is not wrapped around the `header` and `footer`
+   * @example With `framer-motion` - `<AnimatePresence />`
+   * ```jsx
+   * <Wizard wrapper={<AnimatePresence exitBeforeEnter />}>
+   * ...
+   * </Wizard>
+   * ```
+   */
+  sidebarAndStepWrapper?: React.ReactElement;
   /** Callback that will be invoked with the new step index when the wizard changes steps */
   onStepChange?: (stepIndex: number) => void;
 };
@@ -63,9 +73,7 @@ export type WizardValues = {
   /** Indicate if the current step is the last step (aka no next step) */
   isLastStep: boolean;
   /** The labels of each step */
-  stepNames: ({
-    name: any;
-  } | null)[];
+  stepNames: StepName[];
 };
 
 /** Console log levels */

src/wizard.tsx

@@ -13,6 +13,7 @@ const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
     onStepChange,
     wrapper: Wrapper,
     startIndex = 0,
+    sidebarAndStepWrapper: SidebarAndStepWrapper,
   }) => {
     const [activeStep, setActiveStep] = React.useState(startIndex);
     const [isLoading, setIsLoading] = React.useState(false);
@@ -163,11 +164,33 @@ const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
       [Wrapper, activeStepContent],
     );
 
+    const enhancedActiveStepContentWithSidebar = React.useMemo(
+      () =>
+        SidebarAndStepWrapper ? (
+          React.cloneElement(SidebarAndStepWrapper, {
+            children: (
+              <>
+                {sidebar}
+                {enhancedActiveStepContent}
+              </>
+            ),
+          })
+        ) : (
+          <>
+            {sidebar}
+            {enhancedActiveStepContent}
+          </>
+        ),
+      [SidebarAndStepWrapper, sidebar, enhancedActiveStepContent],
+    );
+
     return (
       <WizardContext.Provider value={wizardValue}>
         {header}
-        {sidebar}
-        {enhancedActiveStepContent}
+        {sidebar
+          ? enhancedActiveStepContentWithSidebar
+          : enhancedActiveStepContent}
+
         {footer}
       </WizardContext.Provider>
     );