@trackunit/react-form-wizard 0.1.96 → 0.1.98

package/index.cjs.js

@@ -348,7 +348,7 @@ const cvaStepContainer = cssClassVarianceUtilities.cvaMerge(["h-full", "grid", "
  * The FormWizard component is used for forms in multiple steps.
  * Use the useFormWizard hook to generate the props for this component.
  */
-const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }) => {
+const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }) => {
     var _a;
     const { stepPath, subStepPath } = reactRouter.useParams({ from: basePath });
     const [stepStates, setStepStates] = react.useState({});
@@ -362,13 +362,16 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
         .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 currentVisibleStepIndex = sharedUtils.objectKeys(steps).findIndex(key => key === currentVisibleStepKey);
+    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; })
+        .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; })
-                        .map(([key, { path, title, sidebarDescription, parent }], index) => {
+                        .map(([key, { path, title, sidebarDescription, parent, 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)
@@ -378,6 +381,14 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                             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 => (Object.assign(Object.assign({}, prev), { [key]: "valid" })));
+                            }
+                            //If the step has a default value, we return done, so we can navigate to that step
+                            if (hasDefaultValue && isEdit) {
+                                return "done";
+                            }
                             if (isPastStep) {
                                 return stepStates[key] === "valid" ? "done" : "invalid";
                             }

package/index.esm.js

@@ -344,7 +344,7 @@ const cvaStepContainer = cvaMerge(["h-full", "grid", "bg-white", "overflow-hidde
  * The FormWizard component is used for forms in multiple steps.
  * Use the useFormWizard hook to generate the props for this component.
  */
-const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }) => {
+const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }) => {
     var _a;
     const { stepPath, subStepPath } = useParams({ from: basePath });
     const [stepStates, setStepStates] = useState({});
@@ -358,13 +358,16 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
         .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 currentVisibleStepIndex = objectKeys(steps).findIndex(key => key === currentVisibleStepKey);
+    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; })
+        .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; })
-                        .map(([key, { path, title, sidebarDescription, parent }], index) => {
+                        .map(([key, { path, title, sidebarDescription, parent, 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)
@@ -374,6 +377,14 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
                             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 => (Object.assign(Object.assign({}, prev), { [key]: "valid" })));
+                            }
+                            //If the step has a default value, we return done, so we can navigate to that step
+                            if (hasDefaultValue && isEdit) {
+                                return "done";
+                            }
                             if (isPastStep) {
                                 return stepStates[key] === "valid" ? "done" : "invalid";
                             }

package/package.json

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

package/src/FormWizard/FormWizard.d.ts

@@ -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, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }: FromWizardComponentProps<TFullSchema, TComponentStepDefinitions>) => JSX.Element;
+export declare const FormWizard: <TFullSchema extends AnyZodObject, TComponentStepDefinitions extends ComponentStepDefinitions<TFullSchema>>({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }: FromWizardComponentProps<TFullSchema, TComponentStepDefinitions>) => JSX.Element;

package/src/FormWizard/useFormWizard.d.ts

@@ -1,7 +1,7 @@
 import { RegisteredRouter, RouteIds } from "@tanstack/react-router";
 import { CommonProps } from "@trackunit/react-components";
 import { ReactNode } from "react";
-import { DeepPartial, UseFormReturn } from "react-hook-form";
+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> = {
@@ -23,7 +23,7 @@ interface DefinedStep<TStepSchema extends TFullSchemaValue[keyof TFullSchemaValu
     component: (props: StepComponentPropsInner<TStepSchema, TFullSchemaValue>) => React.ReactNode;
     parent?: keyof TFullSchemaValue;
     shouldRender?: (fullFormState: Partial<TFullSchemaValue>) => boolean;
-    defaultValues?: DeepPartial<TStepSchema>;
+    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> = {
@@ -42,6 +42,7 @@ export interface UseFormWizardProps<TFullSchema extends SomeZodObject, TStepDefi
     onCancel?: () => void;
     basePath: StringWithStepKey<`${RouteIds<RegisteredRouter["routeTree"]>}`>;
     steps: TStepDefinitions;
+    isEdit?: boolean;
 }
 /**
  * A hook to generate the props for the FormWizard component.