@trackunit/react-form-wizard 0.1.103 → 0.1.105

package/index.cjs.js

@@ -233,12 +233,12 @@ 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, stepForms, setStepForms, setStepStates, basePath, containerClassName, }) => {
+const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, component, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, stepForms, setStepForms, setStepStates, basePath, containerClassName, }) => {
     const navigate = reactRouter.useNavigate();
     const [isSubmitting, setIsSubmitting] = react.useState(false);
     const [submitHandlerInternal, setSubmitHandlerInternal] = react.useState(null);
     const form = reactHookForm.useForm({
-        resolver: zod.zodResolver(formSchema),
+        resolver: zod.zodResolver(fullFormSchema.shape[stepKey]),
         mode: "all",
         defaultValues: fullFormState[stepKey],
     });
@@ -280,6 +280,7 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
             submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(fullFormState);
         }
         else if (nextStepPath) {
+            // eslint-disable-next-line local-rules/no-typescript-assertion
             navigate({ to: basePath, params: { stepPath: nextStepPath } });
         }
     }, [basePath, fullFormState, isLastStep, navigate, nextStepPath, submitHandlerInternal]);
@@ -291,6 +292,7 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
             yield (submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(Object.assign(Object.assign({}, fullFormState), { [stepKey]: data })));
         }
         else if (nextStepPath) {
+            // eslint-disable-next-line local-rules/no-typescript-assertion
             navigate({ to: basePath, params: { stepPath: nextStepPath } });
         }
     })), [
@@ -304,7 +306,10 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
         stepKey,
         submitHandlerInternal,
     ]);
-    const handleSubmit = react.useMemo(() => (isEmptyStep && form.formState.isValid ? emptyStepSubmitHandler : stepSubmitHandler), [emptyStepSubmitHandler, form.formState.isValid, isEmptyStep, stepSubmitHandler]);
+    const handleSubmit = react.useMemo(() => {
+        return isEmptyStep && form.formState.isValid ? emptyStepSubmitHandler : stepSubmitHandler;
+    }, [emptyStepSubmitHandler, form.formState.isValid, isEmptyStep, stepSubmitHandler]);
+    // TODO Replace with hoooooook
     react.useEffect(() => {
         // submit on cmd/ctrl + enter, always
         const handleKeyDown = (event) => {
@@ -327,7 +332,8 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
                         setSubmitHandler: isLastStep ? setSubmitHandler : null,
                     }) })) }), jsxRuntime.jsx(FormWizardFooter, { stepForms,
                 onBack: previousStepPath
-                    ? () => navigate({ to: basePath, params: { stepPath: previousStepPath } })
+                    ? // eslint-disable-next-line local-rules/no-typescript-assertion
+                        () => navigate({ to: basePath, params: { stepPath: previousStepPath } })
                     : null,
                 primaryActionLabel: isLastStep ? lastStepPrimaryActionLabel : undefined,
                 onCancel: handleCancel,
@@ -349,7 +355,6 @@ const cvaStepContainer = cssClassVarianceUtilities.cvaMerge(["h-full", "grid", "
  * Use the useFormWizard hook to generate the props for this component.
  */
 const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }) => {
-    var _a;
     const { stepPath, subStepPath } = reactRouter.useParams({ strict: false });
     const [stepStates, setStepStates] = react.useState({});
     const [stepForms, setStepForms] = react.useState({});
@@ -361,21 +366,33 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
     sharedUtils.objectFromEntries(sharedUtils.objectEntries(steps)
         .filter(([_, { defaultValues }]) => defaultValues)
         .map(([key, { defaultValues }]) => [key, defaultValues])));
-    const currentVisibleStepKey = (_a = sharedUtils.objectEntries(steps).find(([, { path }]) => subStepPath ? path === `${stepPath}/${subStepPath}` : path === stepPath)) === null || _a === void 0 ? void 0 : _a[0];
+    const currentVisibleStepKey = subStepPath ? `${stepPath}/${subStepPath}` : stepPath;
     const currentVisibleStepIndex = sharedUtils.objectKeys(steps)
-        .filter(key => { var _a, _b, _c; return (_c = (_b = (_a = steps[key]).shouldRender) === null || _b === void 0 ? void 0 : _b.call(_a, fullFormState)) !== null && _c !== void 0 ? _c : true; })
+        .filter(key => {
+        var _a;
+        const step = steps[key];
+        return hasShouldRenderProperty(step) ? (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState) : true;
+    })
         .findIndex(key => key === currentVisibleStepKey);
+    /**
+     * Asserts that step has a shouldRender.
+     * Is a workaround because I can't for the life of me get it to look up the step by a correctly typed
+     * template literal key of TComponentStepDefinitions and infer that it has a shouldRender automatically.👎
+     */
+    function hasShouldRenderProperty(obj) {
+        // TODO: remove this check if we can figure out a way to make TypeScript infer the type correctly
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, local-rules/no-typescript-assertion
+        return typeof obj.shouldRender === "function";
+    }
     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, defaultValues }], index) => {
+                        .filter(([_, step]) => { var _a; return (hasShouldRenderProperty(step) ? (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState) : true); })
+                        .map(([key, { title, sidebarDescription, defaultValues }], index) => {
                         const isPastStep = index < currentVisibleStepIndex;
                         const isFutureStep = index > currentVisibleStepIndex;
                         const isCurrentStep = key === currentVisibleStepKey;
                         const hasDefaultValue = defaultValues !== undefined;
-                        const isSubStep = parent !== undefined;
-                        const onlyParentSteps = sharedUtils.objectEntries(steps)
-                            .filter(([_, step]) => step.parent === undefined)
-                            .map(([k]) => k);
+                        const isSubStep = key.toString().includes("/");
+                        const rootSteps = sharedUtils.objectKeys(steps).filter(k => !k.toString().includes("/"));
                         const previousStepKey = sharedUtils.objectKeys(steps)[index - 1];
                         const stepState = () => {
                             if (isCurrentStep) {
@@ -395,9 +412,10 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
                             if (isFutureStep) {
                                 return sharedUtils.objectKeys(steps)
                                     .filter((stepKey, stepIndex) => {
-                                    var _a, _b;
-                                    return stepIndex < index && steps[stepKey].shouldRender
-                                        ? (_b = (_a = steps[stepKey]).shouldRender) === null || _b === void 0 ? void 0 : _b.call(_a, fullFormState)
+                                    var _a;
+                                    const step = steps[stepKey];
+                                    return stepIndex < index && hasShouldRenderProperty(step)
+                                        ? (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState)
                                         : true;
                                 })
                                     .every((pastStepKey) => stepStates[pastStepKey] === "valid")
@@ -408,7 +426,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
                         };
                         return (jsxRuntime.jsx(FormWizardSidebarStep, { key: String(key),
                             state: stepState(),
-                            stepNumber: isSubStep ? undefined : onlyParentSteps.indexOf(key) + 1,
+                            stepNumber: isSubStep ? undefined : rootSteps.indexOf(key) + 1,
                             title,
                             onNavigate: () => {
                                 previousStepKey &&
@@ -418,20 +436,19 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
                                     });
                             },
                             basePath,
-                            path: path,
+                            path: String(key),
                             subTitle: sidebarDescription,
                             isSubStep }));
                     }) }), jsxRuntime.jsx("div", { className: cvaStepContainer(), 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;
-                    })
+                        .filter(([_, step]) => { var _a; return (hasShouldRenderProperty(step) ? (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState) : true); })
                         .map(([stepKey, props], index) => {
                         var _a, _b, _c, _d;
-                        return (subStepPath ? props.path === `${stepPath}/${subStepPath}` : props.path === stepPath) ? (jsxRuntime.jsx(FormWizardStepWrapper, Object.assign({}, props, { 
-                            // eslint-disable-next-line local-rules/no-typescript-assertion
-                            formSchema: props.formSchema, // TODO: FIX THIS string | number | symbol
-                            basePath,
+                        const entriesOfRenderableSteps = sharedUtils.objectEntries(steps).filter(stepEntry => {
+                            var _a;
+                            const step = stepEntry[1];
+                            return hasShouldRenderProperty(step) ? (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState) : true;
+                        });
+                        return currentVisibleStepKey === stepKey ? (jsxRuntime.jsx(FormWizardStepWrapper, Object.assign({}, props, { basePath,
                             stepKey: stepKey.toString(), // TODO: .toString() is a workaround
                             stepForms,
                             setStepForms,
@@ -441,8 +458,8 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
                             setStepStates,
                             fullFormSchema,
                             lastStepPrimaryActionLabel,
-                            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())) : null;
+                            nextStepPath: (_b = (_a = entriesOfRenderableSteps[index + 1]) === null || _a === void 0 ? void 0 : _a[0].toString()) !== null && _b !== void 0 ? _b : null,
+                            previousStepPath: (_d = (_c = entriesOfRenderableSteps[index - 1]) === null || _c === void 0 ? void 0 : _c[0].toString()) !== null && _d !== void 0 ? _d : null }), stepKey.toString())) : null;
                     }) })] }) }));
 };
 

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { Link, useNavigate, useParams } from '@tanstack/react-router';
-import { objectKeys, objectFromEntries, objectEntries, objectValues } from '@trackunit/shared-utils';
+import { objectKeys, objectFromEntries, objectEntries } from '@trackunit/shared-utils';
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Icon, Button, Heading } from '@trackunit/react-components';
@@ -229,12 +229,12 @@ 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, stepForms, setStepForms, setStepStates, basePath, containerClassName, }) => {
+const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, component, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, stepForms, setStepForms, setStepStates, basePath, containerClassName, }) => {
     const navigate = useNavigate();
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [submitHandlerInternal, setSubmitHandlerInternal] = useState(null);
     const form = useForm({
-        resolver: zodResolver(formSchema),
+        resolver: zodResolver(fullFormSchema.shape[stepKey]),
         mode: "all",
         defaultValues: fullFormState[stepKey],
     });
@@ -276,6 +276,7 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
             submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(fullFormState);
         }
         else if (nextStepPath) {
+            // eslint-disable-next-line local-rules/no-typescript-assertion
             navigate({ to: basePath, params: { stepPath: nextStepPath } });
         }
     }, [basePath, fullFormState, isLastStep, navigate, nextStepPath, submitHandlerInternal]);
@@ -287,6 +288,7 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
             yield (submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(Object.assign(Object.assign({}, fullFormState), { [stepKey]: data })));
         }
         else if (nextStepPath) {
+            // eslint-disable-next-line local-rules/no-typescript-assertion
             navigate({ to: basePath, params: { stepPath: nextStepPath } });
         }
     })), [
@@ -300,7 +302,10 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
         stepKey,
         submitHandlerInternal,
     ]);
-    const handleSubmit = useMemo(() => (isEmptyStep && form.formState.isValid ? emptyStepSubmitHandler : stepSubmitHandler), [emptyStepSubmitHandler, form.formState.isValid, isEmptyStep, stepSubmitHandler]);
+    const handleSubmit = useMemo(() => {
+        return isEmptyStep && form.formState.isValid ? emptyStepSubmitHandler : stepSubmitHandler;
+    }, [emptyStepSubmitHandler, form.formState.isValid, isEmptyStep, stepSubmitHandler]);
+    // TODO Replace with hoooooook
     useEffect(() => {
         // submit on cmd/ctrl + enter, always
         const handleKeyDown = (event) => {
@@ -323,7 +328,8 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
                         setSubmitHandler: isLastStep ? setSubmitHandler : null,
                     }) })) }), jsx(FormWizardFooter, { stepForms,
                 onBack: previousStepPath
-                    ? () => navigate({ to: basePath, params: { stepPath: previousStepPath } })
+                    ? // eslint-disable-next-line local-rules/no-typescript-assertion
+                        () => navigate({ to: basePath, params: { stepPath: previousStepPath } })
                     : null,
                 primaryActionLabel: isLastStep ? lastStepPrimaryActionLabel : undefined,
                 onCancel: handleCancel,
@@ -345,7 +351,6 @@ const cvaStepContainer = cvaMerge(["h-full", "grid", "bg-white", "overflow-hidde
  * Use the useFormWizard hook to generate the props for this component.
  */
 const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }) => {
-    var _a;
     const { stepPath, subStepPath } = useParams({ strict: false });
     const [stepStates, setStepStates] = useState({});
     const [stepForms, setStepForms] = useState({});
@@ -357,21 +362,33 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
     objectFromEntries(objectEntries(steps)
         .filter(([_, { defaultValues }]) => defaultValues)
         .map(([key, { defaultValues }]) => [key, defaultValues])));
-    const currentVisibleStepKey = (_a = objectEntries(steps).find(([, { path }]) => subStepPath ? path === `${stepPath}/${subStepPath}` : path === stepPath)) === null || _a === void 0 ? void 0 : _a[0];
+    const currentVisibleStepKey = subStepPath ? `${stepPath}/${subStepPath}` : stepPath;
     const currentVisibleStepIndex = objectKeys(steps)
-        .filter(key => { var _a, _b, _c; return (_c = (_b = (_a = steps[key]).shouldRender) === null || _b === void 0 ? void 0 : _b.call(_a, fullFormState)) !== null && _c !== void 0 ? _c : true; })
+        .filter(key => {
+        var _a;
+        const step = steps[key];
+        return hasShouldRenderProperty(step) ? (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState) : true;
+    })
         .findIndex(key => key === currentVisibleStepKey);
+    /**
+     * Asserts that step has a shouldRender.
+     * Is a workaround because I can't for the life of me get it to look up the step by a correctly typed
+     * template literal key of TComponentStepDefinitions and infer that it has a shouldRender automatically.👎
+     */
+    function hasShouldRenderProperty(obj) {
+        // TODO: remove this check if we can figure out a way to make TypeScript infer the type correctly
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, local-rules/no-typescript-assertion
+        return typeof obj.shouldRender === "function";
+    }
     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, defaultValues }], index) => {
+                        .filter(([_, step]) => { var _a; return (hasShouldRenderProperty(step) ? (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState) : true); })
+                        .map(([key, { title, sidebarDescription, defaultValues }], index) => {
                         const isPastStep = index < currentVisibleStepIndex;
                         const isFutureStep = index > currentVisibleStepIndex;
                         const isCurrentStep = key === currentVisibleStepKey;
                         const hasDefaultValue = defaultValues !== undefined;
-                        const isSubStep = parent !== undefined;
-                        const onlyParentSteps = objectEntries(steps)
-                            .filter(([_, step]) => step.parent === undefined)
-                            .map(([k]) => k);
+                        const isSubStep = key.toString().includes("/");
+                        const rootSteps = objectKeys(steps).filter(k => !k.toString().includes("/"));
                         const previousStepKey = objectKeys(steps)[index - 1];
                         const stepState = () => {
                             if (isCurrentStep) {
@@ -391,9 +408,10 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
                             if (isFutureStep) {
                                 return objectKeys(steps)
                                     .filter((stepKey, stepIndex) => {
-                                    var _a, _b;
-                                    return stepIndex < index && steps[stepKey].shouldRender
-                                        ? (_b = (_a = steps[stepKey]).shouldRender) === null || _b === void 0 ? void 0 : _b.call(_a, fullFormState)
+                                    var _a;
+                                    const step = steps[stepKey];
+                                    return stepIndex < index && hasShouldRenderProperty(step)
+                                        ? (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState)
                                         : true;
                                 })
                                     .every((pastStepKey) => stepStates[pastStepKey] === "valid")
@@ -404,7 +422,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
                         };
                         return (jsx(FormWizardSidebarStep, { key: String(key),
                             state: stepState(),
-                            stepNumber: isSubStep ? undefined : onlyParentSteps.indexOf(key) + 1,
+                            stepNumber: isSubStep ? undefined : rootSteps.indexOf(key) + 1,
                             title,
                             onNavigate: () => {
                                 previousStepKey &&
@@ -414,20 +432,19 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
                                     });
                             },
                             basePath,
-                            path: path,
+                            path: String(key),
                             subTitle: sidebarDescription,
                             isSubStep }));
                     }) }), jsx("div", { className: cvaStepContainer(), 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;
-                    })
+                        .filter(([_, step]) => { var _a; return (hasShouldRenderProperty(step) ? (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState) : true); })
                         .map(([stepKey, props], index) => {
                         var _a, _b, _c, _d;
-                        return (subStepPath ? props.path === `${stepPath}/${subStepPath}` : props.path === stepPath) ? (jsx(FormWizardStepWrapper, Object.assign({}, props, { 
-                            // eslint-disable-next-line local-rules/no-typescript-assertion
-                            formSchema: props.formSchema, // TODO: FIX THIS string | number | symbol
-                            basePath,
+                        const entriesOfRenderableSteps = objectEntries(steps).filter(stepEntry => {
+                            var _a;
+                            const step = stepEntry[1];
+                            return hasShouldRenderProperty(step) ? (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState) : true;
+                        });
+                        return currentVisibleStepKey === stepKey ? (jsx(FormWizardStepWrapper, Object.assign({}, props, { basePath,
                             stepKey: stepKey.toString(), // TODO: .toString() is a workaround
                             stepForms,
                             setStepForms,
@@ -437,8 +454,8 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
                             setStepStates,
                             fullFormSchema,
                             lastStepPrimaryActionLabel,
-                            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())) : null;
+                            nextStepPath: (_b = (_a = entriesOfRenderableSteps[index + 1]) === null || _a === void 0 ? void 0 : _a[0].toString()) !== null && _b !== void 0 ? _b : null,
+                            previousStepPath: (_d = (_c = entriesOfRenderableSteps[index - 1]) === null || _c === void 0 ? void 0 : _c[0].toString()) !== null && _d !== void 0 ? _d : null }), stepKey.toString())) : null;
                     }) })] }) }));
 };
 

package/package.json

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

package/src/FormWizard/FormWizard.d.ts

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

package/src/FormWizard/useFormWizard.d.ts

@@ -1,11 +1,14 @@
 import { RegisteredRouter, RouteIds } from "@tanstack/react-router";
 import { CommonProps } from "@trackunit/react-components";
+import { MappedOmit } from "@trackunit/shared-utils";
 import { ReactNode } from "react";
 import { UseFormReturn } from "react-hook-form";
 import { AnyZodObject, SomeZodObject, z } from "zod";
 export type StepState = "active" | "done" | "invalid" | "disabled" | "ready";
 export type StepDefinitions<TFullSchema extends AnyZodObject> = {
-    [KStepKey in keyof z.TypeOf<TFullSchema>]: DefinedStep<z.TypeOf<TFullSchema>[KStepKey], z.TypeOf<TFullSchema>>;
+    [KFullStepKey in keyof z.TypeOf<TFullSchema>]: KFullStepKey extends `${infer ParentStepKey}/${infer _SubStepKey}` ? ParentStepKey extends keyof z.TypeOf<TFullSchema> ? DefinedStep<z.TypeOf<TFullSchema>[KFullStepKey], z.TypeOf<TFullSchema>> & {
+        shouldRender?: (fullFormState: Partial<z.TypeOf<TFullSchema>>) => boolean;
+    } : never : DefinedStep<z.TypeOf<TFullSchema>[KFullStepKey], z.TypeOf<TFullSchema>>;
 };
 export type StepComponentPropsInner<TStepSchema extends TFullSchemaValue[keyof TFullSchemaValue], TFullSchemaValue extends z.TypeOf<AnyZodObject>> = {
     form: UseFormReturn<TStepSchema>;
@@ -16,26 +19,17 @@ export interface SimpleStepProps {
     title: string;
     description: string | ReactNode;
     sidebarDescription?: string;
-    path: string;
     containerClassName?: string;
 }
 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;
     defaultValues?: TStepSchema;
 }
 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 TFullSchemaValue[keyof TFullSchemaValue], TFullSchemaValue extends z.TypeOf<AnyZodObject>> extends DefinedStep<TStepSchema, TFullSchemaValue> {
-    formSchema: TStepSchema;
-}
-export interface FromWizardComponentProps<TFullSchema extends AnyZodObject, TComponentStepDefinitions extends ComponentStepDefinitions<TFullSchema>> extends Omit<UseFormWizardProps<TFullSchema, TComponentStepDefinitions>, "steps">, CommonProps {
+export interface FromWizardComponentProps<TFullSchema extends AnyZodObject, TComponentStepDefinitions extends StepDefinitions<TFullSchema>> extends MappedOmit<UseFormWizardProps<TFullSchema, TComponentStepDefinitions>, "steps">, CommonProps {
     steps: TComponentStepDefinitions;
 }
-export type StringWithStepKey<TPath> = TPath extends `${infer Prefix}/$stepPath` ? TPath : never;
+export type StringWithStepKey<TPath> = TPath extends `${infer _Prefix}/$stepPath` ? TPath : never;
 export interface UseFormWizardProps<TFullSchema extends SomeZodObject, TStepDefinitions extends StepDefinitions<TFullSchema>> {
     fullFormSchema: TFullSchema;
     lastStepPrimaryActionLabel: string;
@@ -47,5 +41,5 @@ export interface UseFormWizardProps<TFullSchema extends SomeZodObject, TStepDefi
 /**
  * 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 declare const useFormWizard: <TStepDefinition extends StepDefinitions<TFullSchema>, TFullSchema extends AnyZodObject>(props: UseFormWizardProps<TFullSchema, TStepDefinition>) => FromWizardComponentProps<TFullSchema, StepDefinitions<TFullSchema>>;
 export {};

package/src/FormWizardStepWrapper/FormWizardStepWrapper.d.ts

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