@trackunit/react-form-wizard 0.0.13 → 0.0.14

package/index.cjs.js

@@ -162,9 +162,9 @@ const getStateIcon = (state) => {
  * A sidebar step component used by the FormWizard component to render each step.
  * This component is generally used internally by the FormWizard component.
  */
-const FormWizardSidebarStep = ({ stepNumber, state, title, subTitle, path, dataTestId, }) => {
+const FormWizardSidebarStep = ({ stepNumber, state, title, subTitle, path, dataTestId, onBeforeNavigate, }) => {
     const stateIcon = getStateIcon(state);
-    return (jsxRuntime.jsx(reactRouterDom.NavLink, { className: cvaFormWizardSidebarStep({ state }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : `form-wizard-sidebar-step-${path}`, to: path, children: jsxRuntime.jsxs("div", { className: cvaSectionHeaderContainer(), children: [jsxRuntime.jsx("div", { children: stateIcon !== null && stateIcon !== void 0 ? stateIcon : jsxRuntime.jsx("span", { className: cvaStepNumber({ state }), children: stepNumber }) }), jsxRuntime.jsxs("div", { className: cvaTitleAndDescription(), children: [jsxRuntime.jsx("h1", { className: cvaHeader(), children: title }), subTitle ? jsxRuntime.jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
+    return (jsxRuntime.jsx(reactRouterDom.NavLink, { className: cvaFormWizardSidebarStep({ state }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : `form-wizard-sidebar-step-${path}`, onClick: () => onBeforeNavigate(), to: path, children: jsxRuntime.jsxs("div", { className: cvaSectionHeaderContainer(), children: [jsxRuntime.jsx("div", { children: stateIcon !== null && stateIcon !== void 0 ? stateIcon : jsxRuntime.jsx("span", { className: cvaStepNumber({ state }), children: stepNumber }) }), jsxRuntime.jsxs("div", { className: cvaTitleAndDescription(), children: [jsxRuntime.jsx("h1", { className: cvaHeader(), children: title }), subTitle ? jsxRuntime.jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
 };
 
 const cvaFooterContainer = cssClassVarianceUtilities.cvaMerge([
@@ -210,15 +210,23 @@ const cvaFormWizardComponentStepForm = cssClassVarianceUtilities.cvaMerge(["grid
  * A wrapper component used by the FormWizard component to render each step.
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
  */
-const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, component, formSchema, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, setStepStates, basePath, }) => {
+const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, component, formSchema, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, stepForms, setStepForms, setStepStates, basePath, }) => {
     const navigate = reactRouterDom.useNavigate();
+    const formRef = react.useRef(null);
     const [submitHandlerInternal, setSubmitHandlerInternal] = react.useState(null);
-    const form = reactHookForm.useForm({ resolver: zod.zodResolver(formSchema), mode: "all" });
+    const form = reactHookForm.useForm({
+        resolver: zod.zodResolver(formSchema),
+        mode: "all",
+        defaultValues: fullFormState[stepKey],
+    });
     const fullForm = reactHookForm.useForm({
         resolver: zod.zodResolver(fullFormSchema),
         mode: "all",
         defaultValues: fullFormState,
     });
+    react.useEffect(() => {
+        setStepForms(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: form })));
+    }, [form, setStepForms, stepKey]);
     react.useEffect(() => {
         setStepStates(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: form.formState.isValid ? "valid" : "invalid" })));
     }, [form.formState.isValid, setStepStates, stepKey]);
@@ -231,27 +239,38 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
         setSubmitHandlerInternal(() => callback);
     }, [setSubmitHandlerInternal]);
     const isEmptyStep = Object.keys(form.getValues()).length === 0;
-    const handleSubmitING = isEmptyStep
-        ? (e) => {
-            e.preventDefault();
-            submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(fullFormState);
-        }
-        : form.handleSubmit((data) => __awaiter(void 0, void 0, void 0, function* () {
+    const emptyStepSubmitHandler = react.useCallback((e) => {
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(fullFormState);
+    }, [fullFormState, submitHandlerInternal]);
+    const nonEmptyStepSubmitHandler = react.useMemo(() => form.handleSubmit((data) => __awaiter(void 0, void 0, void 0, function* () {
+        //? This state is not updated for the submit handler below; therefore, there is duplication.
+        setFullFormState(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: data })));
+        if (isLastStep) {
             //? This state is not updated for the submit handler below; therefore, there is duplication.
-            setFullFormState(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: data })));
-            if (isLastStep) {
-                //? This state is not updated for the submit handler below; therefore, there is duplication.
-                submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(Object.assign(Object.assign({}, fullFormState), { [stepKey]: data }));
-            }
-            else if (nextStepPath) {
-                navigate(basePath + nextStepPath);
-            }
-        }));
-    return (jsxRuntime.jsxs("form", { className: cvaFormWizardComponentStepForm(), onSubmit: handleSubmitING, children: [jsxRuntime.jsx(FormWizardHeader, { title, description }), jsxRuntime.jsx("div", { className: cvaFormWizardComponentContainer(), children: component({
+            submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(Object.assign(Object.assign({}, fullFormState), { [stepKey]: data }));
+        }
+        else if (nextStepPath) {
+            navigate(basePath + nextStepPath);
+        }
+    })), [
+        basePath,
+        form,
+        fullFormState,
+        isLastStep,
+        navigate,
+        nextStepPath,
+        setFullFormState,
+        stepKey,
+        submitHandlerInternal,
+    ]);
+    const handleSubmit = react.useMemo(() => (isEmptyStep ? emptyStepSubmitHandler : nonEmptyStepSubmitHandler), [emptyStepSubmitHandler, isEmptyStep, nonEmptyStepSubmitHandler]);
+    return (jsxRuntime.jsxs("form", { className: cvaFormWizardComponentStepForm(), onSubmit: handleSubmit, ref: formRef, children: [jsxRuntime.jsx(FormWizardHeader, { title, description }), jsxRuntime.jsx("div", { className: cvaFormWizardComponentContainer(), children: component({
                     form,
                     fullForm,
                     setSubmitHandler: isLastStep ? setSubmitHandler : null,
-                }) }), jsxRuntime.jsx(FormWizardFooter, { onBack: previousStepPath ? () => navigate(basePath + previousStepPath) : null,
+                }) }), jsxRuntime.jsx(FormWizardFooter, { stepForms,
+                onBack: previousStepPath ? () => navigate(basePath + previousStepPath) : null,
                 primaryActionLabel: isLastStep ? lastStepPrimaryActionLabel : undefined,
                 onCancel: handleCancel,
                 isValid: isEmptyStep ? true : form.formState.isValid })] }, String(stepKey)));
@@ -275,6 +294,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
     var _a;
     const location = reactRouterDom.useLocation();
     const [stepStates, setStepStates] = react.useState({});
+    const [stepForms, setStepForms] = react.useState({});
     const [fullFormState, setFullFormState] = react.useState({});
     const currentVisibleStepKey = (_a = Object.entries(steps).find(([, { path }]) => location.pathname === basePath + path)) === null || _a === void 0 ? void 0 : _a[0];
     const currentVisibleStepIndex = Object.keys(steps).findIndex(key => key === currentVisibleStepKey);
@@ -282,6 +302,8 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                         const isPastStep = index < currentVisibleStepIndex;
                         const isFutureStep = index > currentVisibleStepIndex;
                         const isCurrentStep = key === currentVisibleStepKey;
+                        // eslint-disable-next-line local-rules/no-typescript-assertion
+                        const previousStepKey = Object.keys(steps)[index - 1];
                         const stepState = () => {
                             if (isCurrentStep) {
                                 return "active";
@@ -302,6 +324,13 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                             state: stepState(),
                             stepNumber: index + 1,
                             title,
+                            onBeforeNavigate: () => {
+                                previousStepKey &&
+                                    setFullFormState(prev => {
+                                        var _a;
+                                        return (Object.assign(Object.assign({}, prev), { [previousStepKey]: (_a = stepForms[previousStepKey]) === null || _a === void 0 ? void 0 : _a.getValues() }));
+                                    });
+                            },
                             path: basePath + path,
                             subTitle: sidebarDescription }));
                     }) }), jsxRuntime.jsx("div", { className: cvaStepContainer(), children: jsxRuntime.jsx(reactRouterDom.Routes, { children: Object.entries(steps).map((_a, index) => {
@@ -309,6 +338,8 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                             var [stepKey, _f] = _a, { path } = _f, rest = __rest(_f, ["path"]);
                             return (jsxRuntime.jsx(reactRouterDom.Route, { index: false, path, key: stepKey, element: jsxRuntime.jsx(FormWizardStepWrapper, Object.assign({}, rest, { basePath,
                                     stepKey,
+                                    stepForms,
+                                    setStepForms,
                                     onCancel,
                                     fullFormState,
                                     setFullFormState,

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { registerTranslations } from '@trackunit/i18n-library-translation';
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { NavLink, useNavigate, useLocation, Routes, Route } from 'react-router-dom';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Icon, Button, Heading } from '@trackunit/react-components';
@@ -158,9 +158,9 @@ const getStateIcon = (state) => {
  * A sidebar step component used by the FormWizard component to render each step.
  * This component is generally used internally by the FormWizard component.
  */
-const FormWizardSidebarStep = ({ stepNumber, state, title, subTitle, path, dataTestId, }) => {
+const FormWizardSidebarStep = ({ stepNumber, state, title, subTitle, path, dataTestId, onBeforeNavigate, }) => {
     const stateIcon = getStateIcon(state);
-    return (jsx(NavLink, { className: cvaFormWizardSidebarStep({ state }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : `form-wizard-sidebar-step-${path}`, to: path, children: jsxs("div", { className: cvaSectionHeaderContainer(), children: [jsx("div", { children: stateIcon !== null && stateIcon !== void 0 ? stateIcon : jsx("span", { className: cvaStepNumber({ state }), children: stepNumber }) }), jsxs("div", { className: cvaTitleAndDescription(), children: [jsx("h1", { className: cvaHeader(), children: title }), subTitle ? jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
+    return (jsx(NavLink, { className: cvaFormWizardSidebarStep({ state }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : `form-wizard-sidebar-step-${path}`, onClick: () => onBeforeNavigate(), to: path, children: jsxs("div", { className: cvaSectionHeaderContainer(), children: [jsx("div", { children: stateIcon !== null && stateIcon !== void 0 ? stateIcon : jsx("span", { className: cvaStepNumber({ state }), children: stepNumber }) }), jsxs("div", { className: cvaTitleAndDescription(), children: [jsx("h1", { className: cvaHeader(), children: title }), subTitle ? jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
 };
 
 const cvaFooterContainer = cvaMerge([
@@ -206,15 +206,23 @@ const cvaFormWizardComponentStepForm = cvaMerge(["grid-rows-min-fr-min", "grid",
  * A wrapper component used by the FormWizard component to render each step.
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
  */
-const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, component, formSchema, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, setStepStates, basePath, }) => {
+const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, component, formSchema, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, stepForms, setStepForms, setStepStates, basePath, }) => {
     const navigate = useNavigate();
+    const formRef = useRef(null);
     const [submitHandlerInternal, setSubmitHandlerInternal] = useState(null);
-    const form = useForm({ resolver: zodResolver(formSchema), mode: "all" });
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        mode: "all",
+        defaultValues: fullFormState[stepKey],
+    });
     const fullForm = useForm({
         resolver: zodResolver(fullFormSchema),
         mode: "all",
         defaultValues: fullFormState,
     });
+    useEffect(() => {
+        setStepForms(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: form })));
+    }, [form, setStepForms, stepKey]);
     useEffect(() => {
         setStepStates(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: form.formState.isValid ? "valid" : "invalid" })));
     }, [form.formState.isValid, setStepStates, stepKey]);
@@ -227,27 +235,38 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
         setSubmitHandlerInternal(() => callback);
     }, [setSubmitHandlerInternal]);
     const isEmptyStep = Object.keys(form.getValues()).length === 0;
-    const handleSubmitING = isEmptyStep
-        ? (e) => {
-            e.preventDefault();
-            submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(fullFormState);
-        }
-        : form.handleSubmit((data) => __awaiter(void 0, void 0, void 0, function* () {
+    const emptyStepSubmitHandler = useCallback((e) => {
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(fullFormState);
+    }, [fullFormState, submitHandlerInternal]);
+    const nonEmptyStepSubmitHandler = useMemo(() => form.handleSubmit((data) => __awaiter(void 0, void 0, void 0, function* () {
+        //? This state is not updated for the submit handler below; therefore, there is duplication.
+        setFullFormState(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: data })));
+        if (isLastStep) {
             //? This state is not updated for the submit handler below; therefore, there is duplication.
-            setFullFormState(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: data })));
-            if (isLastStep) {
-                //? This state is not updated for the submit handler below; therefore, there is duplication.
-                submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(Object.assign(Object.assign({}, fullFormState), { [stepKey]: data }));
-            }
-            else if (nextStepPath) {
-                navigate(basePath + nextStepPath);
-            }
-        }));
-    return (jsxs("form", { className: cvaFormWizardComponentStepForm(), onSubmit: handleSubmitING, children: [jsx(FormWizardHeader, { title, description }), jsx("div", { className: cvaFormWizardComponentContainer(), children: component({
+            submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(Object.assign(Object.assign({}, fullFormState), { [stepKey]: data }));
+        }
+        else if (nextStepPath) {
+            navigate(basePath + nextStepPath);
+        }
+    })), [
+        basePath,
+        form,
+        fullFormState,
+        isLastStep,
+        navigate,
+        nextStepPath,
+        setFullFormState,
+        stepKey,
+        submitHandlerInternal,
+    ]);
+    const handleSubmit = useMemo(() => (isEmptyStep ? emptyStepSubmitHandler : nonEmptyStepSubmitHandler), [emptyStepSubmitHandler, isEmptyStep, nonEmptyStepSubmitHandler]);
+    return (jsxs("form", { className: cvaFormWizardComponentStepForm(), onSubmit: handleSubmit, ref: formRef, children: [jsx(FormWizardHeader, { title, description }), jsx("div", { className: cvaFormWizardComponentContainer(), children: component({
                     form,
                     fullForm,
                     setSubmitHandler: isLastStep ? setSubmitHandler : null,
-                }) }), jsx(FormWizardFooter, { onBack: previousStepPath ? () => navigate(basePath + previousStepPath) : null,
+                }) }), jsx(FormWizardFooter, { stepForms,
+                onBack: previousStepPath ? () => navigate(basePath + previousStepPath) : null,
                 primaryActionLabel: isLastStep ? lastStepPrimaryActionLabel : undefined,
                 onCancel: handleCancel,
                 isValid: isEmptyStep ? true : form.formState.isValid })] }, String(stepKey)));
@@ -271,6 +290,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
     var _a;
     const location = useLocation();
     const [stepStates, setStepStates] = useState({});
+    const [stepForms, setStepForms] = useState({});
     const [fullFormState, setFullFormState] = useState({});
     const currentVisibleStepKey = (_a = Object.entries(steps).find(([, { path }]) => location.pathname === basePath + path)) === null || _a === void 0 ? void 0 : _a[0];
     const currentVisibleStepIndex = Object.keys(steps).findIndex(key => key === currentVisibleStepKey);
@@ -278,6 +298,8 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                         const isPastStep = index < currentVisibleStepIndex;
                         const isFutureStep = index > currentVisibleStepIndex;
                         const isCurrentStep = key === currentVisibleStepKey;
+                        // eslint-disable-next-line local-rules/no-typescript-assertion
+                        const previousStepKey = Object.keys(steps)[index - 1];
                         const stepState = () => {
                             if (isCurrentStep) {
                                 return "active";
@@ -298,6 +320,13 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                             state: stepState(),
                             stepNumber: index + 1,
                             title,
+                            onBeforeNavigate: () => {
+                                previousStepKey &&
+                                    setFullFormState(prev => {
+                                        var _a;
+                                        return (Object.assign(Object.assign({}, prev), { [previousStepKey]: (_a = stepForms[previousStepKey]) === null || _a === void 0 ? void 0 : _a.getValues() }));
+                                    });
+                            },
                             path: basePath + path,
                             subTitle: sidebarDescription }));
                     }) }), jsx("div", { className: cvaStepContainer(), children: jsx(Routes, { children: Object.entries(steps).map((_a, index) => {
@@ -305,6 +334,8 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                             var [stepKey, _f] = _a, { path } = _f, rest = __rest(_f, ["path"]);
                             return (jsx(Route, { index: false, path, key: stepKey, element: jsx(FormWizardStepWrapper, Object.assign({}, rest, { basePath,
                                     stepKey,
+                                    stepForms,
+                                    setStepForms,
                                     onCancel,
                                     fullFormState,
                                     setFullFormState,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-wizard",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {

package/src/FormWizard/FormWizard.d.ts

@@ -1,6 +1,10 @@
 /// <reference types="react" />
-import { ZodTypeAny } from "zod";
+import { UseFormReturn } from "react-hook-form";
+import { ZodTypeAny, z } from "zod";
 import { ComponentStepDefinitions, FromWizardComponentProps } from "./useFormWizard";
+export type FormWizardStepFormReturnMap<TFullSchema extends ZodTypeAny> = Partial<{
+    [TStepKey in keyof z.infer<TFullSchema>]: UseFormReturn<z.TypeOf<TFullSchema>[TStepKey]>;
+}>;
 /**
  * The FormWizard component is used for forms in multiple steps.
  * Use the useFormWizard hook to generate the props for this component.

package/src/FormWizardSidebarStep/FormWizardSidebarStep.d.ts

@@ -7,10 +7,11 @@ interface FormWizardSidebarStepProps extends CommonProps {
     title: string;
     subTitle?: string;
     path: string;
+    onBeforeNavigate: () => void;
 }
 /**
  * A sidebar step component used by the FormWizard component to render each step.
  * This component is generally used internally by the FormWizard component.
  */
-export declare const FormWizardSidebarStep: ({ stepNumber, state, title, subTitle, path, dataTestId, }: FormWizardSidebarStepProps) => JSX.Element;
+export declare const FormWizardSidebarStep: ({ stepNumber, state, title, subTitle, path, dataTestId, onBeforeNavigate, }: FormWizardSidebarStepProps) => JSX.Element;
 export {};

package/src/FormWizardStepWrapper/FormWizardStepWrapper.d.ts

@@ -1,5 +1,7 @@
 import { Dispatch, SetStateAction } from "react";
+import { UseFormReturn } from "react-hook-form";
 import { ZodTypeAny, z } from "zod";
+import { FormWizardStepFormReturnMap } from "../FormWizard/FormWizard";
 import { SimpleStepProps, StepComponentPropsInner, StepState } from "../FormWizard/useFormWizard";
 export interface FormWizardStepWrapperProps<TStepKey extends keyof z.infer<TFullSchema>, TFullSchema extends ZodTypeAny> extends SimpleStepProps {
     description: string;
@@ -15,9 +17,13 @@ export interface FormWizardStepWrapperProps<TStepKey extends keyof z.infer<TFull
     formSchema: z.infer<TFullSchema>[TStepKey];
     setStepStates: Dispatch<SetStateAction<Partial<Record<TStepKey, StepState>>>>;
     component: (props: StepComponentPropsInner<z.infer<TFullSchema>[TStepKey], TFullSchema>) => React.ReactNode;
+    stepForms: FormWizardStepFormReturnMap<TFullSchema>;
+    setStepForms: Dispatch<SetStateAction<Partial<{
+        [TStepKey2 in keyof z.TypeOf<TFullSchema>]: UseFormReturn<z.TypeOf<TFullSchema>[TStepKey2]>;
+    }>>>;
 }
 /**
  * A wrapper component used by the FormWizard component to render each step.
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
  */
-export declare const FormWizardStepWrapper: <TFullSchema extends ZodTypeAny, TStepKey extends keyof z.TypeOf<TFullSchema>>({ stepKey, onCancel, description, title, component, formSchema, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, setStepStates, basePath, }: FormWizardStepWrapperProps<TStepKey, TFullSchema>) => JSX.Element;
+export declare const FormWizardStepWrapper: <TFullSchema extends ZodTypeAny, TStepKey extends keyof z.TypeOf<TFullSchema>>({ stepKey, onCancel, description, title, component, formSchema, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, stepForms, setStepForms, setStepStates, basePath, }: FormWizardStepWrapperProps<TStepKey, TFullSchema>) => JSX.Element;