@trackunit/react-form-wizard 0.0.30 → 0.0.32

package/index.cjs.js

@@ -90,6 +90,14 @@ const cvaFormWizardSidebarStep = cssClassVarianceUtilities.cvaMerge(["p-2", "rou
             invalid: "text-warning-600",
             disabled: "pointer-events-none cursor-not-allowed opacity-50 hover:bg-transparent",
         },
+        isSubStep: {
+            true: "@3xl:pl-6",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        state: "ready",
+        isSubStep: false,
     },
 });
 const cvaSectionHeaderContainer = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between", "gap-2"], {
@@ -114,6 +122,20 @@ const cvaStepNumber = cssClassVarianceUtilities.cvaMerge(["flex", "justify-cente
             invalid: "bg-warning-500 text-white",
             disabled: "",
         },
+        isSubStep: {
+            true: "border-2 border-slate-200",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            state: "active",
+            isSubStep: true,
+            className: "border-2 border-slate-400 bg-white",
+        },
+    ],
+    defaultVariants: {
+        state: "ready",
     },
 });
 const cvaTitleAndDescription = cssClassVarianceUtilities.cvaMerge(["justify-center", "flex-1", "flex-col", "hidden", "@3xl:flex"]); //use same container breakpoint as cvaWizardContainer so it collapses at the same time
@@ -132,9 +154,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, onBeforeNavigate, }) => {
+const FormWizardSidebarStep = ({ stepNumber, state, title, subTitle, path, dataTestId, onNavigate, isSubStep, }) => {
     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}`, 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] })] }) }));
+    return (jsxRuntime.jsx(reactRouterDom.NavLink, { className: cvaFormWizardSidebarStep({ state, isSubStep }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : `form-wizard-sidebar-step-${path}`, onClick: () => onNavigate(), 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, isSubStep }), children: stepNumber }) }), jsxRuntime.jsxs("div", { className: cvaTitleAndDescription(), children: [jsxRuntime.jsx("h1", { className: cvaHeader(), children: title }), subTitle ? jsxRuntime.jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
 };
 
 /******************************************************************************
@@ -220,6 +242,14 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
         mode: "all",
         defaultValues: fullFormState,
     });
+    const watchedValue = reactHookForm.useWatch({
+        // Must use useWatch instead of form.watch()
+        // to limit re-renders to only be caused by this component
+        control: form.control,
+    });
+    react.useEffect(() => {
+        setFullFormState(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: watchedValue })));
+    }, [setFullFormState, stepKey, watchedValue]);
     react.useEffect(() => {
         setStepForms(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: form })));
     }, [form, setStepForms, stepKey]);
@@ -291,13 +321,24 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
     const location = reactRouterDom.useLocation();
     const [stepStates, setStepStates] = react.useState({});
     const [stepForms, setStepForms] = react.useState({});
-    const [fullFormState, setFullFormState] = react.useState({});
+    const [fullFormState, setFullFormState] = react.useState(
+    // DeepPartial does not allow empty object and properly working around it would severely complicate the code
+    // A possible workaround could be to type it Partial<<DeepPartial<...>>> everywhere
+    // Any weakening of the type in a union would be worse and likely just push the issue forward until it hits react-hook-form
+    // eslint-disable-next-line local-rules/no-typescript-assertion
+    {});
     const currentVisibleStepKey = (_a = sharedUtils.objectEntries(steps).find(([, { path }]) => location.pathname === basePath + path)) === null || _a === void 0 ? void 0 : _a[0];
     const currentVisibleStepIndex = sharedUtils.objectKeys(steps).findIndex(key => key === currentVisibleStepKey);
-    return (jsxRuntime.jsx("div", { className: cvaFormWizardContainer({ className }), "data-testid": dataTestId, children: jsxRuntime.jsxs("div", { className: cvaFormWizardLayout(), children: [jsxRuntime.jsx(FormWizardSidebar, { children: sharedUtils.objectEntries(steps).map(([key, { path, title, sidebarDescription }], index) => {
+    return (jsxRuntime.jsx("div", { className: cvaFormWizardContainer({ className }), "data-testid": dataTestId, children: jsxRuntime.jsxs("div", { className: cvaFormWizardLayout(), children: [jsxRuntime.jsx(FormWizardSidebar, { children: sharedUtils.objectEntries(steps)
+                        .filter(([_, step]) => { var _a, _b; return (_b = (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState)) !== null && _b !== void 0 ? _b : true; })
+                        .map(([key, { path, title, sidebarDescription, parent }], index) => {
                         const isPastStep = index < currentVisibleStepIndex;
                         const isFutureStep = index > currentVisibleStepIndex;
                         const isCurrentStep = key === currentVisibleStepKey;
+                        const isSubStep = parent !== undefined;
+                        const onlyParentSteps = sharedUtils.objectEntries(steps)
+                            .filter(([_, step]) => step.parent === undefined)
+                            .map(([k]) => k);
                         const previousStepKey = sharedUtils.objectKeys(steps)[index - 1];
                         const stepState = () => {
                             if (isCurrentStep) {
@@ -308,7 +349,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                             }
                             if (isFutureStep) {
                                 return sharedUtils.objectKeys(steps)
-                                    .filter((_, stepIndex) => stepIndex < index)
+                                    .filter((stepKey, stepIndex) => { var _a, _b; return stepIndex < index && ((_b = (_a = steps[stepKey]).shouldRender) === null || _b === void 0 ? void 0 : _b.call(_a, fullFormState)); })
                                     .every((pastStepKey) => stepStates[pastStepKey] === "valid")
                                     ? "ready"
                                     : "disabled";
@@ -317,9 +358,9 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                         };
                         return (jsxRuntime.jsx(FormWizardSidebarStep, { key: String(key),
                             state: stepState(),
-                            stepNumber: index + 1,
+                            stepNumber: isSubStep ? undefined : onlyParentSteps.indexOf(key) + 1,
                             title,
-                            onBeforeNavigate: () => {
+                            onNavigate: () => {
                                 previousStepKey &&
                                     setFullFormState(prev => {
                                         var _a;
@@ -327,10 +368,19 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                                     });
                             },
                             path: basePath + path,
-                            subTitle: sidebarDescription }));
-                    }) }), jsxRuntime.jsx("div", { className: cvaStepContainer(), children: jsxRuntime.jsx(reactRouterDom.Routes, { children: sharedUtils.objectEntries(steps).map(([stepKey, props], index) => {
+                            subTitle: sidebarDescription,
+                            isSubStep }));
+                    }) }), jsxRuntime.jsx("div", { className: cvaStepContainer(), children: jsxRuntime.jsx(reactRouterDom.Routes, { children: sharedUtils.objectEntries(steps)
+                            .filter(([_, step]) => {
+                            var _a, _b;
+                            return (_b = (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState)) !== null && _b !== void 0 ? _b : true;
+                        })
+                            .map(([stepKey, props], index) => {
                             var _a, _b, _c, _d;
-                            return (jsxRuntime.jsx(reactRouterDom.Route, { index: false, path: props.path, key: stepKey.toString(), element: jsxRuntime.jsx(FormWizardStepWrapper, Object.assign({}, props, { basePath,
+                            return (jsxRuntime.jsx(reactRouterDom.Route, { index: false, path: props.path, key: stepKey.toString(), element: jsxRuntime.jsx(FormWizardStepWrapper, Object.assign({}, props, { 
+                                    // eslint-disable-next-line local-rules/no-typescript-assertion
+                                    formSchema: props.formSchema,
+                                    basePath,
                                     stepKey: stepKey.toString(),
                                     stepForms,
                                     setStepForms,
@@ -340,22 +390,18 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                                     setStepStates,
                                     fullFormSchema,
                                     lastStepPrimaryActionLabel,
-                                    nextStepPath: (_b = (_a = sharedUtils.objectValues(steps)[index + 1]) === null || _a === void 0 ? void 0 : _a.path) !== null && _b !== void 0 ? _b : null,
-                                    previousStepPath: (_d = (_c = sharedUtils.objectValues(steps)[index - 1]) === null || _c === void 0 ? void 0 : _c.path) !== null && _d !== void 0 ? _d : null }), stepKey.toString()) }));
+                                    nextStepPath: (_b = (_a = sharedUtils.objectValues(steps).filter(step => { var _a, _b; return (_b = (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState)) !== null && _b !== void 0 ? _b : true; })[index + 1]) === null || _a === void 0 ? void 0 : _a.path) !== null && _b !== void 0 ? _b : null,
+                                    previousStepPath: (_d = (_c = sharedUtils.objectValues(steps).filter(step => { var _a, _b; return (_b = (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState)) !== null && _b !== void 0 ? _b : true; })[index - 1]) === null || _c === void 0 ? void 0 : _c.path) !== null && _d !== void 0 ? _d : null }), stepKey.toString()) }));
                         }) }) })] }) }));
 };
 
 /**
- *
+ * A hook to generate the props for the FormWizard component.
  */
 const useFormWizard = (props) => {
     return react.useMemo(() => (Object.assign(Object.assign({}, props), { 
-        // Object.fromEntries is not super type safe... This is a workaround...
         // eslint-disable-next-line local-rules/no-typescript-assertion
-        steps: sharedUtils.objectFromEntries(Object.entries(props.steps).map(([key, step]) => [
-            key,
-            Object.assign(Object.assign({}, step), { formSchema: props.fullFormSchema.shape[key] }),
-        ])) })), [props]);
+        steps: sharedUtils.objectFromEntries(sharedUtils.objectEntries(props.steps).map(([key, step]) => [key, Object.assign(Object.assign({}, step), { formSchema: props.fullFormSchema.shape[key] })])) })), [props]);
 };
 
 /**

package/index.esm.js

@@ -6,7 +6,7 @@ import { NavLink, useNavigate, useLocation, Routes, Route } from 'react-router-d
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Icon, Button, Heading } from '@trackunit/react-components';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 
 var defaultTranslations = {
 	"wizard.defaults.back": "Back",
@@ -86,6 +86,14 @@ const cvaFormWizardSidebarStep = cvaMerge(["p-2", "rounded-md", "hover:bg-slate-
             invalid: "text-warning-600",
             disabled: "pointer-events-none cursor-not-allowed opacity-50 hover:bg-transparent",
         },
+        isSubStep: {
+            true: "@3xl:pl-6",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        state: "ready",
+        isSubStep: false,
     },
 });
 const cvaSectionHeaderContainer = cvaMerge(["flex", "justify-between", "gap-2"], {
@@ -110,6 +118,20 @@ const cvaStepNumber = cvaMerge(["flex", "justify-center", "text-xs", "items-cent
             invalid: "bg-warning-500 text-white",
             disabled: "",
         },
+        isSubStep: {
+            true: "border-2 border-slate-200",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            state: "active",
+            isSubStep: true,
+            className: "border-2 border-slate-400 bg-white",
+        },
+    ],
+    defaultVariants: {
+        state: "ready",
     },
 });
 const cvaTitleAndDescription = cvaMerge(["justify-center", "flex-1", "flex-col", "hidden", "@3xl:flex"]); //use same container breakpoint as cvaWizardContainer so it collapses at the same time
@@ -128,9 +150,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, onBeforeNavigate, }) => {
+const FormWizardSidebarStep = ({ stepNumber, state, title, subTitle, path, dataTestId, onNavigate, isSubStep, }) => {
     const stateIcon = getStateIcon(state);
-    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] })] }) }));
+    return (jsx(NavLink, { className: cvaFormWizardSidebarStep({ state, isSubStep }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : `form-wizard-sidebar-step-${path}`, onClick: () => onNavigate(), to: path, children: jsxs("div", { className: cvaSectionHeaderContainer(), children: [jsx("div", { children: stateIcon !== null && stateIcon !== void 0 ? stateIcon : jsx("span", { className: cvaStepNumber({ state, isSubStep }), children: stepNumber }) }), jsxs("div", { className: cvaTitleAndDescription(), children: [jsx("h1", { className: cvaHeader(), children: title }), subTitle ? jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
 };
 
 /******************************************************************************
@@ -216,6 +238,14 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
         mode: "all",
         defaultValues: fullFormState,
     });
+    const watchedValue = useWatch({
+        // Must use useWatch instead of form.watch()
+        // to limit re-renders to only be caused by this component
+        control: form.control,
+    });
+    useEffect(() => {
+        setFullFormState(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: watchedValue })));
+    }, [setFullFormState, stepKey, watchedValue]);
     useEffect(() => {
         setStepForms(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: form })));
     }, [form, setStepForms, stepKey]);
@@ -287,13 +317,24 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
     const location = useLocation();
     const [stepStates, setStepStates] = useState({});
     const [stepForms, setStepForms] = useState({});
-    const [fullFormState, setFullFormState] = useState({});
+    const [fullFormState, setFullFormState] = useState(
+    // DeepPartial does not allow empty object and properly working around it would severely complicate the code
+    // A possible workaround could be to type it Partial<<DeepPartial<...>>> everywhere
+    // Any weakening of the type in a union would be worse and likely just push the issue forward until it hits react-hook-form
+    // eslint-disable-next-line local-rules/no-typescript-assertion
+    {});
     const currentVisibleStepKey = (_a = objectEntries(steps).find(([, { path }]) => location.pathname === basePath + path)) === null || _a === void 0 ? void 0 : _a[0];
     const currentVisibleStepIndex = objectKeys(steps).findIndex(key => key === currentVisibleStepKey);
-    return (jsx("div", { className: cvaFormWizardContainer({ className }), "data-testid": dataTestId, children: jsxs("div", { className: cvaFormWizardLayout(), children: [jsx(FormWizardSidebar, { children: objectEntries(steps).map(([key, { path, title, sidebarDescription }], index) => {
+    return (jsx("div", { className: cvaFormWizardContainer({ className }), "data-testid": dataTestId, children: jsxs("div", { className: cvaFormWizardLayout(), children: [jsx(FormWizardSidebar, { children: objectEntries(steps)
+                        .filter(([_, step]) => { var _a, _b; return (_b = (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState)) !== null && _b !== void 0 ? _b : true; })
+                        .map(([key, { path, title, sidebarDescription, parent }], index) => {
                         const isPastStep = index < currentVisibleStepIndex;
                         const isFutureStep = index > currentVisibleStepIndex;
                         const isCurrentStep = key === currentVisibleStepKey;
+                        const isSubStep = parent !== undefined;
+                        const onlyParentSteps = objectEntries(steps)
+                            .filter(([_, step]) => step.parent === undefined)
+                            .map(([k]) => k);
                         const previousStepKey = objectKeys(steps)[index - 1];
                         const stepState = () => {
                             if (isCurrentStep) {
@@ -304,7 +345,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                             }
                             if (isFutureStep) {
                                 return objectKeys(steps)
-                                    .filter((_, stepIndex) => stepIndex < index)
+                                    .filter((stepKey, stepIndex) => { var _a, _b; return stepIndex < index && ((_b = (_a = steps[stepKey]).shouldRender) === null || _b === void 0 ? void 0 : _b.call(_a, fullFormState)); })
                                     .every((pastStepKey) => stepStates[pastStepKey] === "valid")
                                     ? "ready"
                                     : "disabled";
@@ -313,9 +354,9 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                         };
                         return (jsx(FormWizardSidebarStep, { key: String(key),
                             state: stepState(),
-                            stepNumber: index + 1,
+                            stepNumber: isSubStep ? undefined : onlyParentSteps.indexOf(key) + 1,
                             title,
-                            onBeforeNavigate: () => {
+                            onNavigate: () => {
                                 previousStepKey &&
                                     setFullFormState(prev => {
                                         var _a;
@@ -323,10 +364,19 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                                     });
                             },
                             path: basePath + path,
-                            subTitle: sidebarDescription }));
-                    }) }), jsx("div", { className: cvaStepContainer(), children: jsx(Routes, { children: objectEntries(steps).map(([stepKey, props], index) => {
+                            subTitle: sidebarDescription,
+                            isSubStep }));
+                    }) }), jsx("div", { className: cvaStepContainer(), children: jsx(Routes, { children: objectEntries(steps)
+                            .filter(([_, step]) => {
+                            var _a, _b;
+                            return (_b = (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState)) !== null && _b !== void 0 ? _b : true;
+                        })
+                            .map(([stepKey, props], index) => {
                             var _a, _b, _c, _d;
-                            return (jsx(Route, { index: false, path: props.path, key: stepKey.toString(), element: jsx(FormWizardStepWrapper, Object.assign({}, props, { basePath,
+                            return (jsx(Route, { index: false, path: props.path, key: stepKey.toString(), element: jsx(FormWizardStepWrapper, Object.assign({}, props, { 
+                                    // eslint-disable-next-line local-rules/no-typescript-assertion
+                                    formSchema: props.formSchema,
+                                    basePath,
                                     stepKey: stepKey.toString(),
                                     stepForms,
                                     setStepForms,
@@ -336,22 +386,18 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                                     setStepStates,
                                     fullFormSchema,
                                     lastStepPrimaryActionLabel,
-                                    nextStepPath: (_b = (_a = objectValues(steps)[index + 1]) === null || _a === void 0 ? void 0 : _a.path) !== null && _b !== void 0 ? _b : null,
-                                    previousStepPath: (_d = (_c = objectValues(steps)[index - 1]) === null || _c === void 0 ? void 0 : _c.path) !== null && _d !== void 0 ? _d : null }), stepKey.toString()) }));
+                                    nextStepPath: (_b = (_a = objectValues(steps).filter(step => { var _a, _b; return (_b = (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState)) !== null && _b !== void 0 ? _b : true; })[index + 1]) === null || _a === void 0 ? void 0 : _a.path) !== null && _b !== void 0 ? _b : null,
+                                    previousStepPath: (_d = (_c = objectValues(steps).filter(step => { var _a, _b; return (_b = (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState)) !== null && _b !== void 0 ? _b : true; })[index - 1]) === null || _c === void 0 ? void 0 : _c.path) !== null && _d !== void 0 ? _d : null }), stepKey.toString()) }));
                         }) }) })] }) }));
 };
 
 /**
- *
+ * A hook to generate the props for the FormWizard component.
  */
 const useFormWizard = (props) => {
     return useMemo(() => (Object.assign(Object.assign({}, props), { 
-        // Object.fromEntries is not super type safe... This is a workaround...
         // eslint-disable-next-line local-rules/no-typescript-assertion
-        steps: objectFromEntries(Object.entries(props.steps).map(([key, step]) => [
-            key,
-            Object.assign(Object.assign({}, step), { formSchema: props.fullFormSchema.shape[key] }),
-        ])) })), [props]);
+        steps: objectFromEntries(objectEntries(props.steps).map(([key, step]) => [key, Object.assign(Object.assign({}, step), { formSchema: props.fullFormSchema.shape[key] })])) })), [props]);
 };
 
 /**

package/package.json

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

package/src/FormWizard/FormWizard.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { UseFormReturn } from "react-hook-form";
-import { ZodTypeAny, z } from "zod";
+import { AnyZodObject, z } from "zod";
 import { ComponentStepDefinitions, FromWizardComponentProps } from "./useFormWizard";
-export type FormWizardStepFormReturnMap<TFullSchema extends ZodTypeAny> = Partial<{
+export type FormWizardStepFormReturnMap<TFullSchema extends AnyZodObject> = 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.
  */
-export declare const FormWizard: <TFullSchema extends ZodTypeAny, TComponentStepDefinitions extends ComponentStepDefinitions<TFullSchema>>({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }: FromWizardComponentProps<TFullSchema, TComponentStepDefinitions>) => JSX.Element;
+export declare const FormWizard: <TFullSchema extends AnyZodObject, TComponentStepDefinitions extends ComponentStepDefinitions<TFullSchema>>({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }: FromWizardComponentProps<TFullSchema, TComponentStepDefinitions>) => JSX.Element;

package/src/FormWizard/useFormWizard.d.ts

@@ -1,15 +1,15 @@
 import { CommonProps } from "@trackunit/react-components";
 import { ReactNode } from "react";
 import { UseFormReturn } from "react-hook-form";
-import { AnyZodObject, ZodTypeAny, z } from "zod";
+import { AnyZodObject, SomeZodObject, z } from "zod";
 export type StepState = "active" | "done" | "invalid" | "disabled" | "ready";
-export type StepDefinitions<TFullSchema extends ZodTypeAny> = {
-    [KStepKey in keyof z.infer<TFullSchema>]: DefinedStep<z.infer<TFullSchema>[KStepKey], z.infer<TFullSchema>>;
+export type StepDefinitions<TFullSchema extends AnyZodObject> = {
+    [KStepKey in keyof z.TypeOf<TFullSchema>]: DefinedStep<z.TypeOf<TFullSchema>[KStepKey], z.TypeOf<TFullSchema>>;
 };
-export type StepComponentPropsInner<TStepSchema extends ZodTypeAny, TFullSchema extends ZodTypeAny> = {
+export type StepComponentPropsInner<TStepSchema extends TFullSchemaValue[keyof TFullSchemaValue], TFullSchemaValue extends z.TypeOf<AnyZodObject>> = {
     form: UseFormReturn<TStepSchema>;
-    fullForm: UseFormReturn<TFullSchema>;
-    setSubmitHandler: ((onFinalSubmit: (fullFormState: TFullSchema) => void) => void) | null;
+    fullForm: UseFormReturn<TFullSchemaValue>;
+    setSubmitHandler: ((onFinalSubmit: (fullFormState: TFullSchemaValue) => void) => void) | null;
 };
 export interface SimpleStepProps {
     title: string;
@@ -17,20 +17,22 @@ export interface SimpleStepProps {
     sidebarDescription?: string;
     path: string;
 }
-interface DefinedStep<TStepSchema extends ZodTypeAny, TFullSchema extends ZodTypeAny> extends SimpleStepProps {
-    component: (props: StepComponentPropsInner<TStepSchema, TFullSchema>) => React.ReactNode;
+interface DefinedStep<TStepSchema extends TFullSchemaValue[keyof TFullSchemaValue], TFullSchemaValue extends z.TypeOf<AnyZodObject>> extends SimpleStepProps {
+    component: (props: StepComponentPropsInner<TStepSchema, TFullSchemaValue>) => React.ReactNode;
+    parent?: keyof TFullSchemaValue;
+    shouldRender?: (fullFormState: Partial<TFullSchemaValue>) => boolean;
 }
-export type StepComponentProps<TFullSchemaHook extends () => ZodTypeAny, TStepKey extends keyof z.infer<ReturnType<TFullSchemaHook>>> = StepComponentPropsInner<z.infer<ReturnType<TFullSchemaHook>>[TStepKey], z.infer<ReturnType<TFullSchemaHook>>>;
-export type ComponentStepDefinitions<TFullSchema extends ZodTypeAny> = {
-    [KStepKey in keyof z.infer<TFullSchema>]: DefinedComponentStep<z.infer<TFullSchema>[KStepKey], TFullSchema>;
+export type StepComponentProps<TFullSchemaHook extends () => AnyZodObject, TStepKey extends keyof z.TypeOf<ReturnType<TFullSchemaHook>>> = StepComponentPropsInner<z.TypeOf<ReturnType<TFullSchemaHook>>[TStepKey], z.TypeOf<ReturnType<TFullSchemaHook>>>;
+export type ComponentStepDefinitions<TFullSchema extends AnyZodObject> = {
+    [KStepKey in keyof z.TypeOf<TFullSchema>]: DefinedComponentStep<z.TypeOf<TFullSchema>[KStepKey], z.TypeOf<TFullSchema>>;
 };
-interface DefinedComponentStep<TStepSchema extends ZodTypeAny, TFullSchema extends ZodTypeAny> extends DefinedStep<TStepSchema, TFullSchema> {
+interface DefinedComponentStep<TStepSchema extends TFullSchemaValue[keyof TFullSchemaValue], TFullSchemaValue extends z.TypeOf<AnyZodObject>> extends DefinedStep<TStepSchema, TFullSchemaValue> {
     formSchema: TStepSchema;
 }
-export interface FromWizardComponentProps<TFullSchema extends ZodTypeAny, TComponentStepDefinitions extends ComponentStepDefinitions<TFullSchema>> extends Omit<UseFormWizardProps<TFullSchema, TComponentStepDefinitions>, "steps">, CommonProps {
+export interface FromWizardComponentProps<TFullSchema extends AnyZodObject, TComponentStepDefinitions extends ComponentStepDefinitions<TFullSchema>> extends Omit<UseFormWizardProps<TFullSchema, TComponentStepDefinitions>, "steps">, CommonProps {
     steps: TComponentStepDefinitions;
 }
-export interface UseFormWizardProps<TFullSchema extends ZodTypeAny, TStepDefinitions extends StepDefinitions<TFullSchema>> {
+export interface UseFormWizardProps<TFullSchema extends SomeZodObject, TStepDefinitions extends StepDefinitions<TFullSchema>> {
     fullFormSchema: TFullSchema;
     lastStepPrimaryActionLabel: string;
     onCancel?: () => void;
@@ -38,7 +40,7 @@ export interface UseFormWizardProps<TFullSchema extends ZodTypeAny, TStepDefinit
     steps: TStepDefinitions;
 }
 /**
- *
+ * A hook to generate the props for the FormWizard component.
  */
 export declare const useFormWizard: <TStepDefinition extends StepDefinitions<TFullSchema>, TFullSchema extends AnyZodObject>(props: UseFormWizardProps<TFullSchema, TStepDefinition>) => FromWizardComponentProps<TFullSchema, ComponentStepDefinitions<TFullSchema>>;
 export {};

package/src/FormWizardSidebarStep/FormWizardSidebarStep.d.ts

@@ -7,11 +7,12 @@ interface FormWizardSidebarStepProps extends CommonProps {
     title: string;
     subTitle?: string;
     path: string;
-    onBeforeNavigate: () => void;
+    onNavigate: () => void;
+    isSubStep?: boolean;
 }
 /**
  * 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, onBeforeNavigate, }: FormWizardSidebarStepProps) => JSX.Element;
+export declare const FormWizardSidebarStep: ({ stepNumber, state, title, subTitle, path, dataTestId, onNavigate, isSubStep, }: FormWizardSidebarStepProps) => JSX.Element;
 export {};

package/src/FormWizardSidebarStep/FormWizardSidebarStep.variants.d.ts

@@ -1,5 +1,6 @@
 export declare const cvaFormWizardSidebarStep: (props?: ({
     state?: "ready" | "active" | "done" | "invalid" | "disabled" | null | undefined;
+    isSubStep?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaSectionHeaderContainer: (props?: ({
     cursor?: "default" | "withCursor" | null | undefined;
@@ -8,5 +9,6 @@ export declare const cvaHeader: (props?: import("class-variance-authority/dist/t
 export declare const cvaSubtitle: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaStepNumber: (props?: ({
     state?: "ready" | "active" | "done" | "invalid" | "disabled" | null | undefined;
+    isSubStep?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaTitleAndDescription: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/FormWizardStepWrapper/FormWizardStepWrapper.d.ts

@@ -1,10 +1,10 @@
 import { Dispatch, ReactNode, SetStateAction } from "react";
-import { UseFormReturn } from "react-hook-form";
-import { ZodTypeAny, z } from "zod";
+import { DeepPartial, UseFormReturn } from "react-hook-form";
+import { AnyZodObject, z } from "zod";
 import { FormWizardStepFormReturnMap } from "../FormWizard/FormWizard";
 import { ComponentStepDefinitions, SimpleStepProps, StepComponentPropsInner } from "../FormWizard/useFormWizard";
 export type StepFormValidity = "valid" | "invalid";
-export interface FormWizardStepWrapperProps<TStepKey extends keyof z.infer<TFullSchema>, TFullSchema extends ZodTypeAny> extends SimpleStepProps {
+export interface FormWizardStepWrapperProps<TStepKey extends keyof z.TypeOf<TFullSchema>, TFullSchema extends AnyZodObject> extends SimpleStepProps {
     description: string | ReactNode;
     lastStepPrimaryActionLabel: string;
     nextStepPath: string | null;
@@ -12,12 +12,12 @@ export interface FormWizardStepWrapperProps<TStepKey extends keyof z.infer<TFull
     previousStepPath: string | null;
     onCancel?: () => void;
     fullFormSchema: TFullSchema;
-    fullFormState: z.TypeOf<TFullSchema>;
-    setFullFormState: Dispatch<SetStateAction<Partial<z.TypeOf<TFullSchema>>>>;
+    fullFormState: DeepPartial<z.TypeOf<TFullSchema>>;
+    setFullFormState: Dispatch<SetStateAction<DeepPartial<z.TypeOf<TFullSchema>>>>;
     stepKey: TStepKey;
-    formSchema: z.infer<TFullSchema>[TStepKey];
+    formSchema: z.TypeOf<TFullSchema>[TStepKey];
     setStepStates: Dispatch<SetStateAction<Partial<Record<keyof ComponentStepDefinitions<TFullSchema>, StepFormValidity>>>>;
-    component: (props: StepComponentPropsInner<z.infer<TFullSchema>[TStepKey], TFullSchema>) => ReactNode;
+    component: (props: StepComponentPropsInner<DeepPartial<z.TypeOf<TFullSchema>[TStepKey]>, z.TypeOf<TFullSchema>>) => ReactNode;
     stepForms: FormWizardStepFormReturnMap<TFullSchema>;
     setStepForms: Dispatch<SetStateAction<Partial<{
         [TStepKey2 in keyof z.TypeOf<TFullSchema>]: UseFormReturn<z.TypeOf<TFullSchema>[TStepKey2]>;
@@ -27,4 +27,4 @@ export interface FormWizardStepWrapperProps<TStepKey extends keyof z.infer<TFull
  * 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, stepForms, setStepForms, setStepStates, basePath, }: FormWizardStepWrapperProps<TStepKey, TFullSchema>) => JSX.Element;
+export declare const FormWizardStepWrapper: <TFullSchema extends AnyZodObject, 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;