@trackunit/react-form-wizard 0.1.10 → 0.1.12

package/index.cjs.js

@@ -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, primaryActionLabel = "Next" }) => {
+const FormWizardFooter = ({ disablePrimaryAction = false, 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", 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", disabled: disablePrimaryAction, type: "submit", children: primaryActionLabel ? primaryActionLabel : t("wizard.defaults.next") })] })] }));
 };
 
 const cvaFormWizardHeader = cssClassVarianceUtilities.cvaMerge([
@@ -230,6 +230,7 @@ const cvaFormWizardComponentStepForm = cssClassVarianceUtilities.cvaMerge(["grid
  */
 const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, component, formSchema, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, stepForms, setStepForms, setStepStates, basePath, }) => {
     const navigate = reactRouter.useNavigate();
+    const [isSubmitting, setIsSubmitting] = react.useState(false);
     const formRef = react.useRef(null);
     const [submitHandlerInternal, setSubmitHandlerInternal] = react.useState(null);
     const form = reactHookForm.useForm({
@@ -262,7 +263,12 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
         return onCancel ? onCancel() : navigate({ to: basePath, params: { stepPath: "" } });
     }, [onCancel, navigate, basePath]);
     const setSubmitHandler = react.useCallback(callback => {
-        setSubmitHandlerInternal(() => callback);
+        const wrappedCallbackFunction = (fullFormStateInner) => __awaiter(void 0, void 0, void 0, function* () {
+            setIsSubmitting(true);
+            yield callback(fullFormStateInner);
+            setIsSubmitting(false);
+        });
+        setSubmitHandlerInternal(() => wrappedCallbackFunction);
     }, [setSubmitHandlerInternal]);
     const isEmptyStep = sharedUtils.objectKeys(form.getValues()).length === 0;
     const emptyStepSubmitHandler = react.useCallback((e) => {
@@ -274,7 +280,7 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
         setFullFormState(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: data })));
         if (isLastStep) {
             //? This state is not updated for the submit handler below; therefore, there is duplication.
-            submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(Object.assign(Object.assign({}, fullFormState), { [stepKey]: data }));
+            yield (submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(Object.assign(Object.assign({}, fullFormState), { [stepKey]: data })));
         }
         else if (nextStepPath) {
             navigate({ to: basePath, params: { stepPath: nextStepPath } });
@@ -298,7 +304,8 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
                 }) }), jsxRuntime.jsx(FormWizardFooter, { stepForms,
                 onBack: previousStepPath ? () => navigate({ to: basePath, params: { stepPath: previousStepPath } }) : null,
                 primaryActionLabel: isLastStep ? lastStepPrimaryActionLabel : undefined,
-                onCancel: handleCancel })] }, String(stepKey)));
+                onCancel: handleCancel,
+                disablePrimaryAction: isSubmitting })] }, String(stepKey)));
 };
 
 const cvaFormWizardContainer = cssClassVarianceUtilities.cvaMerge(["h-full"]);
@@ -325,7 +332,9 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
     // A possible workaround could be to type it Partial<<DeepPartial<...>>> everywhere
     // Any weakening of the type in a union would be worse and likely just push the issue forward until it hits react-hook-form
     // eslint-disable-next-line local-rules/no-typescript-assertion
-    {});
+    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 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)

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 { objectKeys, objectFromEntries, objectEntries, objectValues } from '@trackunit/shared-utils';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Icon, Button, Heading } from '@trackunit/react-components';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -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, primaryActionLabel = "Next" }) => {
+const FormWizardFooter = ({ disablePrimaryAction = false, 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", 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", disabled: disablePrimaryAction, type: "submit", children: primaryActionLabel ? primaryActionLabel : t("wizard.defaults.next") })] })] }));
 };
 
 const cvaFormWizardHeader = cvaMerge([
@@ -226,6 +226,7 @@ const cvaFormWizardComponentStepForm = cvaMerge(["grid-rows-min-fr-min", "grid",
  */
 const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, component, formSchema, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, stepForms, setStepForms, setStepStates, basePath, }) => {
     const navigate = useNavigate();
+    const [isSubmitting, setIsSubmitting] = useState(false);
     const formRef = useRef(null);
     const [submitHandlerInternal, setSubmitHandlerInternal] = useState(null);
     const form = useForm({
@@ -258,7 +259,12 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
         return onCancel ? onCancel() : navigate({ to: basePath, params: { stepPath: "" } });
     }, [onCancel, navigate, basePath]);
     const setSubmitHandler = useCallback(callback => {
-        setSubmitHandlerInternal(() => callback);
+        const wrappedCallbackFunction = (fullFormStateInner) => __awaiter(void 0, void 0, void 0, function* () {
+            setIsSubmitting(true);
+            yield callback(fullFormStateInner);
+            setIsSubmitting(false);
+        });
+        setSubmitHandlerInternal(() => wrappedCallbackFunction);
     }, [setSubmitHandlerInternal]);
     const isEmptyStep = objectKeys(form.getValues()).length === 0;
     const emptyStepSubmitHandler = useCallback((e) => {
@@ -270,7 +276,7 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
         setFullFormState(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: data })));
         if (isLastStep) {
             //? This state is not updated for the submit handler below; therefore, there is duplication.
-            submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(Object.assign(Object.assign({}, fullFormState), { [stepKey]: data }));
+            yield (submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(Object.assign(Object.assign({}, fullFormState), { [stepKey]: data })));
         }
         else if (nextStepPath) {
             navigate({ to: basePath, params: { stepPath: nextStepPath } });
@@ -294,7 +300,8 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
                 }) }), jsx(FormWizardFooter, { stepForms,
                 onBack: previousStepPath ? () => navigate({ to: basePath, params: { stepPath: previousStepPath } }) : null,
                 primaryActionLabel: isLastStep ? lastStepPrimaryActionLabel : undefined,
-                onCancel: handleCancel })] }, String(stepKey)));
+                onCancel: handleCancel,
+                disablePrimaryAction: isSubmitting })] }, String(stepKey)));
 };
 
 const cvaFormWizardContainer = cvaMerge(["h-full"]);
@@ -321,7 +328,9 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
     // A possible workaround could be to type it Partial<<DeepPartial<...>>> everywhere
     // Any weakening of the type in a union would be worse and likely just push the issue forward until it hits react-hook-form
     // eslint-disable-next-line local-rules/no-typescript-assertion
-    {});
+    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 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)

package/package.json

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

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 { UseFormReturn } from "react-hook-form";
+import { DeepPartial, 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> = {
@@ -22,6 +22,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>;
 }
 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> = {

package/src/FormWizardFooter/FormWizardFooter.d.ts

@@ -4,10 +4,11 @@ interface FormWizardFooterProps extends CommonProps {
     primaryActionLabel?: string;
     onCancel: () => void;
     onBack: (() => void) | null;
+    disablePrimaryAction?: boolean;
 }
 /**
  * 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, primaryActionLabel }: FormWizardFooterProps) => JSX.Element;
+export declare const FormWizardFooter: ({ disablePrimaryAction, onBack, onCancel, primaryActionLabel, }: FormWizardFooterProps) => JSX.Element;
 export {};