@trackunit/react-form-wizard 0.1.4 → 0.1.6

package/index.cjs.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
+var reactRouter = require('@tanstack/react-router');
 var sharedUtils = require('@trackunit/shared-utils');
 var react = require('react');
-var reactRouterDom = require('react-router-dom');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactComponents = require('@trackunit/react-components');
 var zod = require('@hookform/resolvers/zod');
@@ -154,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, onNavigate, isSubStep, }) => {
+const FormWizardSidebarStep = ({ stepNumber, state, basePath, title, subTitle, path, dataTestId, onNavigate, isSubStep, }) => {
     const stateIcon = getStateIcon(state);
-    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] })] }) }));
+    return (jsxRuntime.jsx(reactRouter.Link, { className: cvaFormWizardSidebarStep({ state, isSubStep }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : `form-wizard-sidebar-step-${path}`, onClick: () => onNavigate(), params: { stepPath: path }, to: basePath, 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] })] }) }));
 };
 
 /******************************************************************************
@@ -200,9 +200,9 @@ const cvaNavigationContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-
  * The footer component for the FormWizard.
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
  */
-const FormWizardFooter = ({ onBack, onCancel, isValid, primaryActionLabel = "Next" }) => {
+const FormWizardFooter = ({ onBack, onCancel, primaryActionLabel = "Next" }) => {
     const [t] = useTranslation();
-    return (jsxRuntime.jsxs("div", { className: cvaFooterContainer(), children: [jsxRuntime.jsx(reactComponents.Button, { dataTestId: "wizard-cancel", onClick: onCancel, variant: "ghost-neutral", children: t("wizard.defaults.cancel") }), jsxRuntime.jsxs("div", { className: cvaNavigationContainer(), children: [onBack ? (jsxRuntime.jsx(reactComponents.Button, { dataTestId: "wizard-back", onClick: onBack, variant: "secondary", children: t("wizard.defaults.back") })) : null, jsxRuntime.jsx(reactComponents.Button, { dataTestId: "wizard-next", disabled: !isValid, type: "submit", children: primaryActionLabel ? primaryActionLabel : t("wizard.defaults.next") })] })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaFooterContainer(), children: [jsxRuntime.jsx(reactComponents.Button, { dataTestId: "wizard-cancel", onClick: onCancel, variant: "ghost-neutral", children: t("wizard.defaults.cancel") }), jsxRuntime.jsxs("div", { className: cvaNavigationContainer(), children: [onBack ? (jsxRuntime.jsx(reactComponents.Button, { dataTestId: "wizard-back", onClick: onBack, variant: "secondary", children: t("wizard.defaults.back") })) : null, jsxRuntime.jsx(reactComponents.Button, { dataTestId: "wizard-next", type: "submit", children: primaryActionLabel ? primaryActionLabel : t("wizard.defaults.next") })] })] }));
 };
 
 const cvaFormWizardHeader = cssClassVarianceUtilities.cvaMerge([
@@ -229,7 +229,7 @@ const cvaFormWizardComponentStepForm = cssClassVarianceUtilities.cvaMerge(["grid
  * 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, }) => {
-    const navigate = reactRouterDom.useNavigate();
+    const navigate = reactRouter.useNavigate();
     const formRef = react.useRef(null);
     const [submitHandlerInternal, setSubmitHandlerInternal] = react.useState(null);
     const form = reactHookForm.useForm({
@@ -259,7 +259,7 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
     const isLastStep = nextStepPath === null;
     const handleCancel = react.useCallback(() => {
         // TODO: Get previous path from before wizard the wizard was started
-        return onCancel ? onCancel() : navigate(basePath);
+        return onCancel ? onCancel() : navigate({ to: basePath, params: { stepPath: "" } });
     }, [onCancel, navigate, basePath]);
     const setSubmitHandler = react.useCallback(callback => {
         setSubmitHandlerInternal(() => callback);
@@ -277,7 +277,7 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
             submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(Object.assign(Object.assign({}, fullFormState), { [stepKey]: data }));
         }
         else if (nextStepPath) {
-            navigate(basePath + nextStepPath);
+            navigate({ to: basePath, params: { stepPath: nextStepPath } });
         }
     })), [
         basePath,
@@ -296,10 +296,9 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
                     fullForm,
                     setSubmitHandler: isLastStep ? setSubmitHandler : null,
                 }) }), jsxRuntime.jsx(FormWizardFooter, { stepForms,
-                onBack: previousStepPath ? () => navigate(basePath + previousStepPath) : null,
+                onBack: previousStepPath ? () => navigate({ to: basePath, params: { stepPath: previousStepPath } }) : null,
                 primaryActionLabel: isLastStep ? lastStepPrimaryActionLabel : undefined,
-                onCancel: handleCancel,
-                isValid: isEmptyStep ? true : form.formState.isValid })] }, String(stepKey)));
+                onCancel: handleCancel })] }, String(stepKey)));
 };
 
 const cvaFormWizardContainer = cssClassVarianceUtilities.cvaMerge(["h-full"]);
@@ -318,7 +317,7 @@ const cvaStepContainer = cssClassVarianceUtilities.cvaMerge(["h-full", "grid", "
  */
 const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }) => {
     var _a;
-    const location = reactRouterDom.useLocation();
+    const { stepPath, subStepPath } = reactRouter.useParams({ from: basePath });
     const [stepStates, setStepStates] = react.useState({});
     const [stepForms, setStepForms] = react.useState({});
     const [fullFormState, setFullFormState] = react.useState(
@@ -327,7 +326,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
     // 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 currentVisibleStepKey = (_a = sharedUtils.objectEntries(steps).find(([, { path }]) => subStepPath ? path === `${stepPath}/${subStepPath}` : path === stepPath)) === 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)
                         .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; })
@@ -367,32 +366,33 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                                         return (Object.assign(Object.assign({}, prev), { [previousStepKey]: (_a = stepForms[previousStepKey]) === null || _a === void 0 ? void 0 : _a.getValues() }));
                                     });
                             },
-                            path: basePath + path,
+                            basePath,
+                            path: path,
                             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, { 
-                                    // eslint-disable-next-line local-rules/no-typescript-assertion
-                                    formSchema: props.formSchema,
-                                    basePath,
-                                    stepKey: stepKey.toString(),
-                                    stepForms,
-                                    setStepForms,
-                                    onCancel,
-                                    fullFormState,
-                                    setFullFormState,
-                                    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()) }));
-                        }) }) })] }) }));
+                    }) }), 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;
+                    })
+                        .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,
+                            basePath,
+                            stepKey: stepKey.toString(),
+                            stepForms,
+                            setStepForms,
+                            onCancel,
+                            fullFormState,
+                            setFullFormState,
+                            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;
+                    }) })] }) }));
 };
 
 /**

package/index.esm.js

@@ -1,8 +1,8 @@
 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, objectEntries, objectValues, objectFromEntries } from '@trackunit/shared-utils';
 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';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -150,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, onNavigate, isSubStep, }) => {
+const FormWizardSidebarStep = ({ stepNumber, state, basePath, title, subTitle, path, dataTestId, onNavigate, isSubStep, }) => {
     const stateIcon = getStateIcon(state);
-    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] })] }) }));
+    return (jsx(Link, { className: cvaFormWizardSidebarStep({ state, isSubStep }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : `form-wizard-sidebar-step-${path}`, onClick: () => onNavigate(), params: { stepPath: path }, to: basePath, 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] })] }) }));
 };
 
 /******************************************************************************
@@ -196,9 +196,9 @@ const cvaNavigationContainer = cvaMerge(["flex", "gap-responsive-space"]);
  * The footer component for the FormWizard.
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
  */
-const FormWizardFooter = ({ onBack, onCancel, isValid, primaryActionLabel = "Next" }) => {
+const FormWizardFooter = ({ onBack, onCancel, primaryActionLabel = "Next" }) => {
     const [t] = useTranslation();
-    return (jsxs("div", { className: cvaFooterContainer(), children: [jsx(Button, { dataTestId: "wizard-cancel", onClick: onCancel, variant: "ghost-neutral", children: t("wizard.defaults.cancel") }), jsxs("div", { className: cvaNavigationContainer(), children: [onBack ? (jsx(Button, { dataTestId: "wizard-back", onClick: onBack, variant: "secondary", children: t("wizard.defaults.back") })) : null, jsx(Button, { dataTestId: "wizard-next", disabled: !isValid, type: "submit", children: primaryActionLabel ? primaryActionLabel : t("wizard.defaults.next") })] })] }));
+    return (jsxs("div", { className: cvaFooterContainer(), children: [jsx(Button, { dataTestId: "wizard-cancel", onClick: onCancel, variant: "ghost-neutral", children: t("wizard.defaults.cancel") }), jsxs("div", { className: cvaNavigationContainer(), children: [onBack ? (jsx(Button, { dataTestId: "wizard-back", onClick: onBack, variant: "secondary", children: t("wizard.defaults.back") })) : null, jsx(Button, { dataTestId: "wizard-next", type: "submit", children: primaryActionLabel ? primaryActionLabel : t("wizard.defaults.next") })] })] }));
 };
 
 const cvaFormWizardHeader = cvaMerge([
@@ -255,7 +255,7 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
     const isLastStep = nextStepPath === null;
     const handleCancel = useCallback(() => {
         // TODO: Get previous path from before wizard the wizard was started
-        return onCancel ? onCancel() : navigate(basePath);
+        return onCancel ? onCancel() : navigate({ to: basePath, params: { stepPath: "" } });
     }, [onCancel, navigate, basePath]);
     const setSubmitHandler = useCallback(callback => {
         setSubmitHandlerInternal(() => callback);
@@ -273,7 +273,7 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
             submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(Object.assign(Object.assign({}, fullFormState), { [stepKey]: data }));
         }
         else if (nextStepPath) {
-            navigate(basePath + nextStepPath);
+            navigate({ to: basePath, params: { stepPath: nextStepPath } });
         }
     })), [
         basePath,
@@ -292,10 +292,9 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
                     fullForm,
                     setSubmitHandler: isLastStep ? setSubmitHandler : null,
                 }) }), jsx(FormWizardFooter, { stepForms,
-                onBack: previousStepPath ? () => navigate(basePath + previousStepPath) : null,
+                onBack: previousStepPath ? () => navigate({ to: basePath, params: { stepPath: previousStepPath } }) : null,
                 primaryActionLabel: isLastStep ? lastStepPrimaryActionLabel : undefined,
-                onCancel: handleCancel,
-                isValid: isEmptyStep ? true : form.formState.isValid })] }, String(stepKey)));
+                onCancel: handleCancel })] }, String(stepKey)));
 };
 
 const cvaFormWizardContainer = cvaMerge(["h-full"]);
@@ -314,7 +313,7 @@ const cvaStepContainer = cvaMerge(["h-full", "grid", "bg-white", "overflow-hidde
  */
 const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }) => {
     var _a;
-    const location = useLocation();
+    const { stepPath, subStepPath } = useParams({ from: basePath });
     const [stepStates, setStepStates] = useState({});
     const [stepForms, setStepForms] = useState({});
     const [fullFormState, setFullFormState] = useState(
@@ -323,7 +322,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
     // 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 currentVisibleStepKey = (_a = objectEntries(steps).find(([, { path }]) => subStepPath ? path === `${stepPath}/${subStepPath}` : path === stepPath)) === 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)
                         .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; })
@@ -363,32 +362,33 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                                         return (Object.assign(Object.assign({}, prev), { [previousStepKey]: (_a = stepForms[previousStepKey]) === null || _a === void 0 ? void 0 : _a.getValues() }));
                                     });
                             },
-                            path: basePath + path,
+                            basePath,
+                            path: path,
                             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, { 
-                                    // eslint-disable-next-line local-rules/no-typescript-assertion
-                                    formSchema: props.formSchema,
-                                    basePath,
-                                    stepKey: stepKey.toString(),
-                                    stepForms,
-                                    setStepForms,
-                                    onCancel,
-                                    fullFormState,
-                                    setFullFormState,
-                                    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()) }));
-                        }) }) })] }) }));
+                    }) }), 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;
+                    })
+                        .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,
+                            basePath,
+                            stepKey: stepKey.toString(),
+                            stepForms,
+                            setStepForms,
+                            onCancel,
+                            fullFormState,
+                            setFullFormState,
+                            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;
+                    }) })] }) }));
 };
 
 /**

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@trackunit/react-form-wizard",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
     "react": "^18.2.0",
-    "react-router-dom": "6.18.0",
     "zod": "3.22.4",
     "@trackunit/css-class-variance-utilities": "*",
     "@trackunit/react-components": "*",
     "@hookform/resolvers": "^3.3.4",
     "react-hook-form": "7.40.0",
     "@trackunit/i18n-library-translation": "*",
+    "@tanstack/react-router": "1.19.1",
     "@trackunit/shared-utils": "*"
   },
   "engines": {

package/src/FormWizard/useFormWizard.d.ts

@@ -1,3 +1,4 @@
+import { RegisteredRouter, RouteIds } from "@tanstack/react-router";
 import { CommonProps } from "@trackunit/react-components";
 import { ReactNode } from "react";
 import { UseFormReturn } from "react-hook-form";
@@ -32,11 +33,12 @@ interface DefinedComponentStep<TStepSchema extends TFullSchemaValue[keyof TFullS
 export interface FromWizardComponentProps<TFullSchema extends AnyZodObject, TComponentStepDefinitions extends ComponentStepDefinitions<TFullSchema>> extends Omit<UseFormWizardProps<TFullSchema, TComponentStepDefinitions>, "steps">, CommonProps {
     steps: TComponentStepDefinitions;
 }
+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;
     onCancel?: () => void;
-    basePath: string;
+    basePath: StringWithStepKey<`${RouteIds<RegisteredRouter["routeTree"]>}`>;
     steps: TStepDefinitions;
 }
 /**

package/src/FormWizardFooter/FormWizardFooter.d.ts

@@ -2,7 +2,6 @@
 import { CommonProps } from "@trackunit/react-components";
 interface FormWizardFooterProps extends CommonProps {
     primaryActionLabel?: string;
-    isValid?: boolean;
     onCancel: () => void;
     onBack: (() => void) | null;
 }
@@ -10,5 +9,5 @@ interface FormWizardFooterProps extends CommonProps {
  * The footer component for the FormWizard.
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
  */
-export declare const FormWizardFooter: ({ onBack, onCancel, isValid, primaryActionLabel }: FormWizardFooterProps) => JSX.Element;
+export declare const FormWizardFooter: ({ onBack, onCancel, primaryActionLabel }: FormWizardFooterProps) => JSX.Element;
 export {};

package/src/FormWizardSidebarStep/FormWizardSidebarStep.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+import { RegisteredRouter, RouteIds } from "@tanstack/react-router";
 import { CommonProps } from "@trackunit/react-components";
-import { StepState } from "../FormWizard/useFormWizard";
+import { StepState, StringWithStepKey } from "../FormWizard/useFormWizard";
 interface FormWizardSidebarStepProps extends CommonProps {
     state: StepState;
     stepNumber?: number;
     title: string;
+    basePath: StringWithStepKey<`${RouteIds<RegisteredRouter["routeTree"]>}`>;
     subTitle?: string;
     path: string;
     onNavigate: () => void;
@@ -14,5 +16,5 @@ interface FormWizardSidebarStepProps extends CommonProps {
  * 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, onNavigate, isSubStep, }: FormWizardSidebarStepProps) => JSX.Element;
+export declare const FormWizardSidebarStep: ({ stepNumber, state, basePath, title, subTitle, path, dataTestId, onNavigate, isSubStep, }: FormWizardSidebarStepProps) => JSX.Element;
 export {};

package/src/FormWizardStepWrapper/FormWizardStepWrapper.d.ts

@@ -1,14 +1,15 @@
+import { RegisteredRouter, RoutePaths } from "@tanstack/react-router";
 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 } from "../FormWizard/useFormWizard";
+import { ComponentStepDefinitions, SimpleStepProps, StepComponentPropsInner, 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;
     lastStepPrimaryActionLabel: string;
     nextStepPath: string | null;
-    basePath: string;
+    basePath: StringWithStepKey<`${RoutePaths<RegisteredRouter["routeTree"]>}`>;
     previousStepPath: string | null;
     onCancel?: () => void;
     fullFormSchema: TFullSchema;