@trackunit/react-form-wizard 0.1.211 → 0.1.213

package/index.cjs.js

@@ -61,14 +61,13 @@ const setupLibraryTranslations = () => {
 const cvaFillSection = cssClassVarianceUtilities.cvaMerge(["flex-grow", "p-0"]);
 const cvaSidebar = cssClassVarianceUtilities.cvaMerge([
     "flex",
-    "flex-col",
-    "overflow-x-hidden",
+    "flex-rows",
+    "overflow-x-auto",
     "h-full",
-    "gap-2",
-    "p-responsive-space",
-    "bg-slate-50",
+    "bg-white",
     "border-r",
     "border-slate-200",
+    "@3xl:flex-col",
 ]);
 
 /**
@@ -79,13 +78,13 @@ function FormWizardSidebar({ dataTestId, children, className }) {
     return (jsxRuntime.jsxs("aside", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [children, jsxRuntime.jsx("div", { className: cvaFillSection() })] }));
 }
 
-const cvaFormWizardSidebarStep = cssClassVarianceUtilities.cvaMerge(["p-2", "rounded-md", "hover:bg-slate-200", "transition"], {
+const cvaFormWizardSidebarStep = cssClassVarianceUtilities.cvaMerge(["p-2", "hover:bg-slate-200", "transition", "border-b", "border-slate-200", "shrink-0"], {
     variants: {
         state: {
             ready: "",
-            active: "text-primary-600 bg-slate-100",
-            done: "text-success-600",
-            invalid: "text-warning-600",
+            active: "@3xl:bg-slate-100",
+            done: "",
+            invalid: "",
             disabled: "pointer-events-none cursor-not-allowed opacity-50 hover:bg-transparent",
         },
         isSubStep: {
@@ -98,8 +97,15 @@ const cvaFormWizardSidebarStep = cssClassVarianceUtilities.cvaMerge(["p-2", "rou
         isSubStep: false,
     },
 });
-const cvaSectionHeaderContainer = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between", "gap-2"], {
+const cvaSectionHeaderContainer = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between", "gap-2", "p-2", "rounded"], {
     variants: {
+        state: {
+            ready: "",
+            active: "bg-slate-100",
+            done: "",
+            invalid: "",
+            disabled: "",
+        },
         cursor: {
             withCursor: "hover:cursor-pointer",
             default: "",
@@ -110,7 +116,8 @@ const cvaSectionHeaderContainer = cssClassVarianceUtilities.cvaMerge(["flex", "j
     },
 });
 const cvaHeader = cssClassVarianceUtilities.cvaMerge(["text-md"]);
-const cvaSubtitle = cssClassVarianceUtilities.cvaMerge(["text-xs", "text-gray-500"]);
+const cvaSubtitle = cssClassVarianceUtilities.cvaMerge(["text-xs", "text-gray-500", "hidden", "@3xl:block"]);
+const cvaStepNumberContainer = cssClassVarianceUtilities.cvaMerge(["self-center"]);
 const cvaStepNumber = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "text-xs", "items-center", "m-0.5", "w-[20px]", "h-[20px]", "bg-gray-100", "rounded-full"], {
     variants: {
         state: {
@@ -136,7 +143,7 @@ const cvaStepNumber = cssClassVarianceUtilities.cvaMerge(["flex", "justify-cente
         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
+const cvaTitleAndDescription = cssClassVarianceUtilities.cvaMerge(["justify-center", "flex-1", "flex-col", "@3xl:flex"]); //use same container breakpoint as cvaWizardContainer so it collapses at the same time
 
 const getStateIcon = (state) => {
     switch (state) {
@@ -154,7 +161,7 @@ const getStateIcon = (state) => {
  */
 const FormWizardSidebarStep = ({ stepNumber, state, basePath, title, subTitle, path, dataTestId, onNavigate, isSubStep, }) => {
     const stateIcon = getStateIcon(state);
-    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: prev => ({ ...prev, stepPath: path }), search: prev => ({ ...prev }), 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] })] }) }));
+    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: prev => ({ ...prev, stepPath: path }), search: prev => ({ ...prev }), to: basePath, children: jsxRuntime.jsxs("div", { className: cvaSectionHeaderContainer({ state }), children: [jsxRuntime.jsx("div", { className: cvaStepNumberContainer(), children: stateIcon !== null && stateIcon !== void 0 ? stateIcon : (jsxRuntime.jsx("span", { className: cvaStepNumber({ state, isSubStep }), "data-testid": isSubStep ? `form-wizard-sidebar-substep` : `form-wizard-sidebar-step-number-${stepNumber}`, children: stepNumber })) }), jsxRuntime.jsxs("div", { className: cvaTitleAndDescription(), children: [jsxRuntime.jsx("h3", { className: cvaHeader(), children: title }), subTitle ? jsxRuntime.jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
 };
 
 const cvaFooterContainer = cssClassVarianceUtilities.cvaMerge([
@@ -166,6 +173,7 @@ const cvaFooterContainer = cssClassVarianceUtilities.cvaMerge([
     "p-responsive-space",
     "border-t",
     "gap-responsive-space",
+    "bg-slate-50",
 ]);
 const cvaNavigationContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-responsive-space"]);
 
@@ -182,8 +190,8 @@ const cvaFormWizardHeader = cssClassVarianceUtilities.cvaMerge([
     "flex",
     "flex-col",
     "p-responsive-space",
-    "border-b-slate-300",
-    "border-b-2",
+    "border-b-slate-200",
+    "border-b",
 ]);
 
 /**
@@ -191,10 +199,10 @@ const cvaFormWizardHeader = cssClassVarianceUtilities.cvaMerge([
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
  */
 const FormWizardHeader = ({ title, description, className, dataTestId }) => {
-    return (jsxRuntime.jsxs("div", { className: cvaFormWizardHeader({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Heading, { variant: "primary", children: title }), description ? description : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaFormWizardHeader({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Heading, { variant: "secondary", children: title }), description ? (jsxRuntime.jsx(reactComponents.Heading, { subtle: true, variant: "subtitle", children: description })) : null] }));
 };
 
-const cvaFormWizardComponentContainer = cssClassVarianceUtilities.cvaMerge(["p-responsive-space", "overflow-y-auto"]);
+const cvaFormWizardComponentContainer = cssClassVarianceUtilities.cvaMerge(["p-responsive-space", "overflow-y-auto", "bg-slate-50"]);
 const cvaFormWizardComponentStepForm = cssClassVarianceUtilities.cvaMerge(["grid-rows-min-fr-min", "grid", "h-full", "overflow-hidden"]);
 
 /**
@@ -310,7 +318,8 @@ const cvaFormWizardContainer = cssClassVarianceUtilities.cvaMerge(["h-full"]);
 const cvaFormWizardLayout = cssClassVarianceUtilities.cvaMerge([
     "grid",
     "h-full",
-    "grid-cols-min-fr",
+    "grid-rows-min-fr",
+    "@3xl:grid-rows-1",
     "@3xl:grid-cols-[240px_1fr]", //use same breakpoint for wizardSidebarSection so it collapses at the same time
     "@4xl:grid-cols-[320px_1fr]",
 ]);
@@ -339,107 +348,131 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
     if (fullFormSchema.shape[keyToCheck] === undefined) {
         navigate({ to: basePath, params: { stepPath: firstSchemaKey } });
     }
-    const currentVisibleStepKey = subStepPath ? `${stepPath}/${subStepPath}` : stepPath;
-    const currentVisibleStepIndex = sharedUtils.objectKeys(steps)
-        .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) {
+    const hasShouldRenderProperty = react.useCallback((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; 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 = key.toString().includes("/");
-                        const rootSteps = sharedUtils.objectKeys(steps).filter(k => !k.toString().includes("/"));
-                        const previousStepKey = sharedUtils.objectKeys(steps)[index - 1];
-                        const stepState = () => {
-                            if (isCurrentStep) {
-                                return "active";
-                            }
-                            //If the step has a default value, it is considered valid, so we set it to valid in order to show the green checkmark
-                            if (hasDefaultValue && stepStates[key] === undefined && isEdit) {
-                                setStepStates(prev => ({
-                                    ...prev,
-                                    [key]: "valid",
-                                }));
-                            }
-                            //If the step has a default value, we return done, so we can navigate to that step
-                            if (hasDefaultValue && isEdit && stepStates[key] === "valid") {
-                                return "done";
-                            }
-                            if (isPastStep) {
-                                return stepStates[key] === "valid" ? "done" : "invalid";
-                            }
-                            if (isFutureStep) {
-                                return sharedUtils.objectKeys(steps)
-                                    .filter((stepKey, stepIndex) => {
-                                    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")
-                                    ? "ready"
-                                    : "disabled";
-                            }
-                            return "ready";
-                        };
-                        return (jsxRuntime.jsx(FormWizardSidebarStep, { state: stepState(),
-                            stepNumber: isSubStep ? undefined : rootSteps.indexOf(key) + 1,
-                            title,
-                            onNavigate: () => {
-                                previousStepKey &&
-                                    setFullFormState(prev => {
-                                        var _a;
-                                        return ({
-                                            ...prev,
-                                            [previousStepKey]: (_a = stepForms[previousStepKey]) === null || _a === void 0 ? void 0 : _a.getValues(),
-                                        });
-                                    });
-                            },
-                            basePath,
-                            path: String(key),
-                            subTitle: sidebarDescription,
-                            isSubStep }, String(key)));
-                    }) }), jsxRuntime.jsx("div", { className: cvaStepContainer(), children: sharedUtils.objectEntries(steps)
-                        .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;
-                        const entriesOfRenderableSteps = sharedUtils.objectEntries(steps).filter(stepEntry => {
+    }, []);
+    const currentVisibleStepKey = subStepPath ? `${stepPath}/${subStepPath}` : stepPath;
+    const currentVisibleStepIndex = react.useMemo(() => sharedUtils.objectKeys(steps)
+        .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), [currentVisibleStepKey, fullFormState, hasShouldRenderProperty, steps]);
+    const sidebarSteps = react.useMemo(() => {
+        return sharedUtils.objectEntries(steps)
+            .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 = key.toString().includes("/");
+            const rootSteps = sharedUtils.objectKeys(steps).filter(k => !k.toString().includes("/"));
+            const previousStepKey = sharedUtils.objectKeys(steps)[index - 1];
+            const stepState = () => {
+                if (isCurrentStep) {
+                    return "active";
+                }
+                //If the step has a default value, it is considered valid, so we set it to valid in order to show the green checkmark
+                if (hasDefaultValue && stepStates[key] === undefined && isEdit) {
+                    setStepStates(prev => ({
+                        ...prev,
+                        [key]: "valid",
+                    }));
+                }
+                //If the step has a default value, we return done, so we can navigate to that step
+                if (hasDefaultValue && isEdit && stepStates[key] === "valid") {
+                    return "done";
+                }
+                if (isPastStep) {
+                    return stepStates[key] === "valid" ? "done" : "invalid";
+                }
+                if (isFutureStep) {
+                    return sharedUtils.objectKeys(steps)
+                        .filter((stepKey, stepIndex) => {
+                        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")
+                        ? "ready"
+                        : "disabled";
+                }
+                return "ready";
+            };
+            return (jsxRuntime.jsx(FormWizardSidebarStep, { state: stepState(),
+                stepNumber: isSubStep ? undefined : rootSteps.indexOf(key) + 1,
+                title,
+                onNavigate: () => {
+                    previousStepKey &&
+                        setFullFormState(prev => {
                             var _a;
-                            const step = stepEntry[1];
-                            return hasShouldRenderProperty(step) ? (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState) : true;
+                            return ({
+                                ...prev,
+                                [previousStepKey]: (_a = stepForms[previousStepKey]) === null || _a === void 0 ? void 0 : _a.getValues(),
+                            });
                         });
-                        return currentVisibleStepKey === stepKey ? (jsxRuntime.jsx(FormWizardStepWrapper, { ...props,
-                            basePath,
-                            stepKey: stepKey.toString(), // TODO: .toString() is a workaround
-                            stepForms,
-                            setStepForms,
-                            onCancel,
-                            fullFormState,
-                            setFullFormState,
-                            setStepStates,
-                            fullFormSchema,
-                            lastStepPrimaryActionLabel,
-                            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;
-                    }) })] }) }));
+                },
+                basePath,
+                path: String(key),
+                subTitle: sidebarDescription,
+                isSubStep }, String(key)));
+        });
+    }, [
+        basePath,
+        currentVisibleStepIndex,
+        currentVisibleStepKey,
+        fullFormState,
+        hasShouldRenderProperty,
+        isEdit,
+        stepForms,
+        stepStates,
+        steps,
+    ]);
+    const stepWrapper = react.useMemo(() => {
+        return sharedUtils.objectEntries(steps)
+            .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;
+            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, { ...props,
+                basePath,
+                stepKey: stepKey.toString(), // TODO: .toString() is a workaround
+                stepForms,
+                setStepForms,
+                onCancel,
+                fullFormState,
+                setFullFormState,
+                setStepStates,
+                fullFormSchema,
+                lastStepPrimaryActionLabel,
+                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;
+        });
+    }, [
+        basePath,
+        currentVisibleStepKey,
+        fullFormSchema,
+        fullFormState,
+        hasShouldRenderProperty,
+        lastStepPrimaryActionLabel,
+        onCancel,
+        stepForms,
+        steps,
+    ]);
+    return (jsxRuntime.jsx("div", { className: cvaFormWizardContainer({ className }), "data-testid": dataTestId, children: jsxRuntime.jsxs("div", { className: cvaFormWizardLayout(), children: [jsxRuntime.jsx(FormWizardSidebar, { children: sidebarSteps }), jsxRuntime.jsx("div", { className: cvaStepContainer(), children: stepWrapper })] }) }));
 };
 
 /**

package/index.esm.js

@@ -59,14 +59,13 @@ const setupLibraryTranslations = () => {
 const cvaFillSection = cvaMerge(["flex-grow", "p-0"]);
 const cvaSidebar = cvaMerge([
     "flex",
-    "flex-col",
-    "overflow-x-hidden",
+    "flex-rows",
+    "overflow-x-auto",
     "h-full",
-    "gap-2",
-    "p-responsive-space",
-    "bg-slate-50",
+    "bg-white",
     "border-r",
     "border-slate-200",
+    "@3xl:flex-col",
 ]);
 
 /**
@@ -77,13 +76,13 @@ function FormWizardSidebar({ dataTestId, children, className }) {
     return (jsxs("aside", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [children, jsx("div", { className: cvaFillSection() })] }));
 }
 
-const cvaFormWizardSidebarStep = cvaMerge(["p-2", "rounded-md", "hover:bg-slate-200", "transition"], {
+const cvaFormWizardSidebarStep = cvaMerge(["p-2", "hover:bg-slate-200", "transition", "border-b", "border-slate-200", "shrink-0"], {
     variants: {
         state: {
             ready: "",
-            active: "text-primary-600 bg-slate-100",
-            done: "text-success-600",
-            invalid: "text-warning-600",
+            active: "@3xl:bg-slate-100",
+            done: "",
+            invalid: "",
             disabled: "pointer-events-none cursor-not-allowed opacity-50 hover:bg-transparent",
         },
         isSubStep: {
@@ -96,8 +95,15 @@ const cvaFormWizardSidebarStep = cvaMerge(["p-2", "rounded-md", "hover:bg-slate-
         isSubStep: false,
     },
 });
-const cvaSectionHeaderContainer = cvaMerge(["flex", "justify-between", "gap-2"], {
+const cvaSectionHeaderContainer = cvaMerge(["flex", "justify-between", "gap-2", "p-2", "rounded"], {
     variants: {
+        state: {
+            ready: "",
+            active: "bg-slate-100",
+            done: "",
+            invalid: "",
+            disabled: "",
+        },
         cursor: {
             withCursor: "hover:cursor-pointer",
             default: "",
@@ -108,7 +114,8 @@ const cvaSectionHeaderContainer = cvaMerge(["flex", "justify-between", "gap-2"],
     },
 });
 const cvaHeader = cvaMerge(["text-md"]);
-const cvaSubtitle = cvaMerge(["text-xs", "text-gray-500"]);
+const cvaSubtitle = cvaMerge(["text-xs", "text-gray-500", "hidden", "@3xl:block"]);
+const cvaStepNumberContainer = cvaMerge(["self-center"]);
 const cvaStepNumber = cvaMerge(["flex", "justify-center", "text-xs", "items-center", "m-0.5", "w-[20px]", "h-[20px]", "bg-gray-100", "rounded-full"], {
     variants: {
         state: {
@@ -134,7 +141,7 @@ const cvaStepNumber = cvaMerge(["flex", "justify-center", "text-xs", "items-cent
         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
+const cvaTitleAndDescription = cvaMerge(["justify-center", "flex-1", "flex-col", "@3xl:flex"]); //use same container breakpoint as cvaWizardContainer so it collapses at the same time
 
 const getStateIcon = (state) => {
     switch (state) {
@@ -152,7 +159,7 @@ const getStateIcon = (state) => {
  */
 const FormWizardSidebarStep = ({ stepNumber, state, basePath, title, subTitle, path, dataTestId, onNavigate, isSubStep, }) => {
     const stateIcon = getStateIcon(state);
-    return (jsx(Link, { className: cvaFormWizardSidebarStep({ state, isSubStep }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : `form-wizard-sidebar-step-${path}`, onClick: () => onNavigate(), params: prev => ({ ...prev, stepPath: path }), search: prev => ({ ...prev }), 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] })] }) }));
+    return (jsx(Link, { className: cvaFormWizardSidebarStep({ state, isSubStep }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : `form-wizard-sidebar-step-${path}`, onClick: () => onNavigate(), params: prev => ({ ...prev, stepPath: path }), search: prev => ({ ...prev }), to: basePath, children: jsxs("div", { className: cvaSectionHeaderContainer({ state }), children: [jsx("div", { className: cvaStepNumberContainer(), children: stateIcon !== null && stateIcon !== void 0 ? stateIcon : (jsx("span", { className: cvaStepNumber({ state, isSubStep }), "data-testid": isSubStep ? `form-wizard-sidebar-substep` : `form-wizard-sidebar-step-number-${stepNumber}`, children: stepNumber })) }), jsxs("div", { className: cvaTitleAndDescription(), children: [jsx("h3", { className: cvaHeader(), children: title }), subTitle ? jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
 };
 
 const cvaFooterContainer = cvaMerge([
@@ -164,6 +171,7 @@ const cvaFooterContainer = cvaMerge([
     "p-responsive-space",
     "border-t",
     "gap-responsive-space",
+    "bg-slate-50",
 ]);
 const cvaNavigationContainer = cvaMerge(["flex", "gap-responsive-space"]);
 
@@ -180,8 +188,8 @@ const cvaFormWizardHeader = cvaMerge([
     "flex",
     "flex-col",
     "p-responsive-space",
-    "border-b-slate-300",
-    "border-b-2",
+    "border-b-slate-200",
+    "border-b",
 ]);
 
 /**
@@ -189,10 +197,10 @@ const cvaFormWizardHeader = cvaMerge([
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
  */
 const FormWizardHeader = ({ title, description, className, dataTestId }) => {
-    return (jsxs("div", { className: cvaFormWizardHeader({ className }), "data-testid": dataTestId, children: [jsx(Heading, { variant: "primary", children: title }), description ? description : null] }));
+    return (jsxs("div", { className: cvaFormWizardHeader({ className }), "data-testid": dataTestId, children: [jsx(Heading, { variant: "secondary", children: title }), description ? (jsx(Heading, { subtle: true, variant: "subtitle", children: description })) : null] }));
 };
 
-const cvaFormWizardComponentContainer = cvaMerge(["p-responsive-space", "overflow-y-auto"]);
+const cvaFormWizardComponentContainer = cvaMerge(["p-responsive-space", "overflow-y-auto", "bg-slate-50"]);
 const cvaFormWizardComponentStepForm = cvaMerge(["grid-rows-min-fr-min", "grid", "h-full", "overflow-hidden"]);
 
 /**
@@ -308,7 +316,8 @@ const cvaFormWizardContainer = cvaMerge(["h-full"]);
 const cvaFormWizardLayout = cvaMerge([
     "grid",
     "h-full",
-    "grid-cols-min-fr",
+    "grid-rows-min-fr",
+    "@3xl:grid-rows-1",
     "@3xl:grid-cols-[240px_1fr]", //use same breakpoint for wizardSidebarSection so it collapses at the same time
     "@4xl:grid-cols-[320px_1fr]",
 ]);
@@ -337,107 +346,131 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
     if (fullFormSchema.shape[keyToCheck] === undefined) {
         navigate({ to: basePath, params: { stepPath: firstSchemaKey } });
     }
-    const currentVisibleStepKey = subStepPath ? `${stepPath}/${subStepPath}` : stepPath;
-    const currentVisibleStepIndex = objectKeys(steps)
-        .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) {
+    const hasShouldRenderProperty = useCallback((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; 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 = key.toString().includes("/");
-                        const rootSteps = objectKeys(steps).filter(k => !k.toString().includes("/"));
-                        const previousStepKey = objectKeys(steps)[index - 1];
-                        const stepState = () => {
-                            if (isCurrentStep) {
-                                return "active";
-                            }
-                            //If the step has a default value, it is considered valid, so we set it to valid in order to show the green checkmark
-                            if (hasDefaultValue && stepStates[key] === undefined && isEdit) {
-                                setStepStates(prev => ({
-                                    ...prev,
-                                    [key]: "valid",
-                                }));
-                            }
-                            //If the step has a default value, we return done, so we can navigate to that step
-                            if (hasDefaultValue && isEdit && stepStates[key] === "valid") {
-                                return "done";
-                            }
-                            if (isPastStep) {
-                                return stepStates[key] === "valid" ? "done" : "invalid";
-                            }
-                            if (isFutureStep) {
-                                return objectKeys(steps)
-                                    .filter((stepKey, stepIndex) => {
-                                    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")
-                                    ? "ready"
-                                    : "disabled";
-                            }
-                            return "ready";
-                        };
-                        return (jsx(FormWizardSidebarStep, { state: stepState(),
-                            stepNumber: isSubStep ? undefined : rootSteps.indexOf(key) + 1,
-                            title,
-                            onNavigate: () => {
-                                previousStepKey &&
-                                    setFullFormState(prev => {
-                                        var _a;
-                                        return ({
-                                            ...prev,
-                                            [previousStepKey]: (_a = stepForms[previousStepKey]) === null || _a === void 0 ? void 0 : _a.getValues(),
-                                        });
-                                    });
-                            },
-                            basePath,
-                            path: String(key),
-                            subTitle: sidebarDescription,
-                            isSubStep }, String(key)));
-                    }) }), jsx("div", { className: cvaStepContainer(), children: objectEntries(steps)
-                        .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;
-                        const entriesOfRenderableSteps = objectEntries(steps).filter(stepEntry => {
+    }, []);
+    const currentVisibleStepKey = subStepPath ? `${stepPath}/${subStepPath}` : stepPath;
+    const currentVisibleStepIndex = useMemo(() => objectKeys(steps)
+        .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), [currentVisibleStepKey, fullFormState, hasShouldRenderProperty, steps]);
+    const sidebarSteps = useMemo(() => {
+        return objectEntries(steps)
+            .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 = key.toString().includes("/");
+            const rootSteps = objectKeys(steps).filter(k => !k.toString().includes("/"));
+            const previousStepKey = objectKeys(steps)[index - 1];
+            const stepState = () => {
+                if (isCurrentStep) {
+                    return "active";
+                }
+                //If the step has a default value, it is considered valid, so we set it to valid in order to show the green checkmark
+                if (hasDefaultValue && stepStates[key] === undefined && isEdit) {
+                    setStepStates(prev => ({
+                        ...prev,
+                        [key]: "valid",
+                    }));
+                }
+                //If the step has a default value, we return done, so we can navigate to that step
+                if (hasDefaultValue && isEdit && stepStates[key] === "valid") {
+                    return "done";
+                }
+                if (isPastStep) {
+                    return stepStates[key] === "valid" ? "done" : "invalid";
+                }
+                if (isFutureStep) {
+                    return objectKeys(steps)
+                        .filter((stepKey, stepIndex) => {
+                        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")
+                        ? "ready"
+                        : "disabled";
+                }
+                return "ready";
+            };
+            return (jsx(FormWizardSidebarStep, { state: stepState(),
+                stepNumber: isSubStep ? undefined : rootSteps.indexOf(key) + 1,
+                title,
+                onNavigate: () => {
+                    previousStepKey &&
+                        setFullFormState(prev => {
                             var _a;
-                            const step = stepEntry[1];
-                            return hasShouldRenderProperty(step) ? (_a = step.shouldRender) === null || _a === void 0 ? void 0 : _a.call(step, fullFormState) : true;
+                            return ({
+                                ...prev,
+                                [previousStepKey]: (_a = stepForms[previousStepKey]) === null || _a === void 0 ? void 0 : _a.getValues(),
+                            });
                         });
-                        return currentVisibleStepKey === stepKey ? (jsx(FormWizardStepWrapper, { ...props,
-                            basePath,
-                            stepKey: stepKey.toString(), // TODO: .toString() is a workaround
-                            stepForms,
-                            setStepForms,
-                            onCancel,
-                            fullFormState,
-                            setFullFormState,
-                            setStepStates,
-                            fullFormSchema,
-                            lastStepPrimaryActionLabel,
-                            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;
-                    }) })] }) }));
+                },
+                basePath,
+                path: String(key),
+                subTitle: sidebarDescription,
+                isSubStep }, String(key)));
+        });
+    }, [
+        basePath,
+        currentVisibleStepIndex,
+        currentVisibleStepKey,
+        fullFormState,
+        hasShouldRenderProperty,
+        isEdit,
+        stepForms,
+        stepStates,
+        steps,
+    ]);
+    const stepWrapper = useMemo(() => {
+        return objectEntries(steps)
+            .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;
+            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, { ...props,
+                basePath,
+                stepKey: stepKey.toString(), // TODO: .toString() is a workaround
+                stepForms,
+                setStepForms,
+                onCancel,
+                fullFormState,
+                setFullFormState,
+                setStepStates,
+                fullFormSchema,
+                lastStepPrimaryActionLabel,
+                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;
+        });
+    }, [
+        basePath,
+        currentVisibleStepKey,
+        fullFormSchema,
+        fullFormState,
+        hasShouldRenderProperty,
+        lastStepPrimaryActionLabel,
+        onCancel,
+        stepForms,
+        steps,
+    ]);
+    return (jsx("div", { className: cvaFormWizardContainer({ className }), "data-testid": dataTestId, children: jsxs("div", { className: cvaFormWizardLayout(), children: [jsx(FormWizardSidebar, { children: sidebarSteps }), jsx("div", { className: cvaStepContainer(), children: stepWrapper })] }) }));
 };
 
 /**

package/package.json

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

package/src/FormWizard/useFormWizard.d.ts

@@ -1,7 +1,6 @@
 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";
@@ -17,7 +16,7 @@ export type StepComponentPropsInner<TStepSchema extends TFullSchemaValue[keyof T
 };
 export interface SimpleStepProps {
     title: string;
-    description: string | ReactNode;
+    description: string;
     sidebarDescription?: string;
     containerClassName?: string;
 }

package/src/FormWizardHeader/FormWizardHeader.d.ts

@@ -1,8 +1,7 @@
 import { CommonProps } from "@trackunit/react-components";
-import { ReactNode } from "react";
 interface FormWizardHeaderProps extends CommonProps {
     title: string;
-    description?: string | ReactNode;
+    description?: string;
 }
 /**
  * The header component for the FormWizard.

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

@@ -3,10 +3,12 @@ export declare const cvaFormWizardSidebarStep: (props?: ({
     isSubStep?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaSectionHeaderContainer: (props?: ({
+    state?: "ready" | "active" | "done" | "invalid" | "disabled" | null | undefined;
     cursor?: "default" | "withCursor" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaSubtitle: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaStepNumberContainer: (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;

package/src/FormWizardStepWrapper/FormWizardStepWrapper.d.ts

@@ -6,7 +6,7 @@ import { FormWizardStepFormReturnMap } from "../FormWizard/FormWizard";
 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;
+    description: string;
     lastStepPrimaryActionLabel: string;
     nextStepPath: string | null;
     basePath: StringWithStepKey<`${RoutePaths<RegisteredRouter["routeTree"]>}`>;