@trackunit/react-form-wizard 0.1.10 → 0.1.11

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"]);

package/index.esm.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { Link, useNavigate, useParams } from '@tanstack/react-router';
 import { objectKeys, objectEntries, objectValues, objectFromEntries } from '@trackunit/shared-utils';
-import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
+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"]);

package/package.json

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

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 {};