@trackunit/react-form-wizard 0.1.70 → 0.1.72

package/index.cjs.js

@@ -275,6 +275,15 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
         });
         setSubmitHandlerInternal(() => wrappedCallbackFunction);
     }, [setSubmitHandlerInternal]);
+    const isEmptyStep = sharedUtils.objectKeys(form.getValues()).length === 0;
+    const emptyStepSubmitHandler = react.useCallback(() => {
+        if (isLastStep) {
+            submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(fullFormState);
+        }
+        else if (nextStepPath) {
+            navigate({ to: basePath, params: { stepPath: nextStepPath } });
+        }
+    }, [basePath, fullFormState, isLastStep, navigate, nextStepPath, submitHandlerInternal]);
     const stepSubmitHandler = react.useMemo(() => form.handleSubmit((data) => __awaiter(void 0, void 0, void 0, function* () {
         //? This state is not updated for the submit handler below; therefore, there is duplication.
         setFullFormState(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: data })));
@@ -296,9 +305,23 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
         stepKey,
         submitHandlerInternal,
     ]);
+    const handleSubmit = react.useMemo(() => (isEmptyStep ? emptyStepSubmitHandler : stepSubmitHandler), [emptyStepSubmitHandler, isEmptyStep, stepSubmitHandler]);
+    react.useEffect(() => {
+        // submit on cmd/ctrl + enter, always
+        const handleKeyDown = (event) => {
+            if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+                event.preventDefault();
+                stepSubmitHandler();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [stepSubmitHandler]);
     return (jsxRuntime.jsxs("form", { className: cvaFormWizardComponentStepForm(), noValidate: true, onSubmit: e => {
             e.preventDefault();
-            stepSubmitHandler();
+            handleSubmit();
         }, ref: formRef, children: [jsxRuntime.jsx(FormWizardHeader, { title, description }), jsxRuntime.jsx("div", { className: cvaFormWizardComponentContainer({ className: containerClassName }), children: component({
                     form,
                     fullForm,

package/index.esm.js

@@ -1,7 +1,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 { objectFromEntries, objectEntries, objectKeys, objectValues } from '@trackunit/shared-utils';
+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';
@@ -271,6 +271,15 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
         });
         setSubmitHandlerInternal(() => wrappedCallbackFunction);
     }, [setSubmitHandlerInternal]);
+    const isEmptyStep = objectKeys(form.getValues()).length === 0;
+    const emptyStepSubmitHandler = useCallback(() => {
+        if (isLastStep) {
+            submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(fullFormState);
+        }
+        else if (nextStepPath) {
+            navigate({ to: basePath, params: { stepPath: nextStepPath } });
+        }
+    }, [basePath, fullFormState, isLastStep, navigate, nextStepPath, submitHandlerInternal]);
     const stepSubmitHandler = useMemo(() => form.handleSubmit((data) => __awaiter(void 0, void 0, void 0, function* () {
         //? This state is not updated for the submit handler below; therefore, there is duplication.
         setFullFormState(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: data })));
@@ -292,9 +301,23 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
         stepKey,
         submitHandlerInternal,
     ]);
+    const handleSubmit = useMemo(() => (isEmptyStep ? emptyStepSubmitHandler : stepSubmitHandler), [emptyStepSubmitHandler, isEmptyStep, stepSubmitHandler]);
+    useEffect(() => {
+        // submit on cmd/ctrl + enter, always
+        const handleKeyDown = (event) => {
+            if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+                event.preventDefault();
+                stepSubmitHandler();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [stepSubmitHandler]);
     return (jsxs("form", { className: cvaFormWizardComponentStepForm(), noValidate: true, onSubmit: e => {
             e.preventDefault();
-            stepSubmitHandler();
+            handleSubmit();
         }, ref: formRef, children: [jsx(FormWizardHeader, { title, description }), jsx("div", { className: cvaFormWizardComponentContainer({ className: containerClassName }), children: component({
                     form,
                     fullForm,

package/package.json

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