@tanstack/form-core 1.26.0 → 1.27.1

package/dist/esm/FormApi.d.ts

@@ -308,6 +308,10 @@ export type AnyFormState = FormState<any, any, any, any, any, any, any, any, any
  * A type representing the Form API with all generics set to `any` for convenience.
  */
 export type AnyFormApi = FormApi<any, any, any, any, any, any, any, any, any, any, any, any>;
+/**
+ * We cannot use methods and must use arrow functions. Otherwise, our React adapters
+ * will break due to loss of the method when using spread.
+ */
 /**
  * A class representing the Form API. It handles the logic and interactions with the form state.
  *
@@ -343,7 +347,7 @@ export declare class FormApi<in out TFormData, in out TOnMount extends undefined
     /**
      * @private
      */
-    private _formId;
+    _formId: string;
     /**
      * @private
      */
@@ -406,11 +410,12 @@ export declare class FormApi<in out TFormData, in out TOnMount extends undefined
      * @private
      */
     validate: (cause: ValidationCause) => FormErrorMapFromValidator<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync> | Promise<FormErrorMapFromValidator<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>>;
+    handleSubmit(): Promise<void>;
+    handleSubmit(submitMeta: TSubmitMeta): Promise<void>;
     /**
      * Handles the form submission, performs validation, and calls the appropriate onSubmit or onSubmitInvalid callbacks.
      */
-    handleSubmit(): Promise<void>;
-    handleSubmit(submitMeta: TSubmitMeta): Promise<void>;
+    _handleSubmit: (submitMeta?: TSubmitMeta) => Promise<void>;
     /**
      * Gets the value of the specified field.
      */
@@ -468,7 +473,7 @@ export declare class FormApi<in out TFormData, in out TOnMount extends undefined
     /**
      * Updates the form's errorMap
      */
-    setErrorMap(errorMap: FormValidationErrorMap<TFormData, UnwrapFormValidateOrFn<TOnMount>, UnwrapFormValidateOrFn<TOnChange>, UnwrapFormAsyncValidateOrFn<TOnChangeAsync>, UnwrapFormValidateOrFn<TOnBlur>, UnwrapFormAsyncValidateOrFn<TOnBlurAsync>, UnwrapFormValidateOrFn<TOnSubmit>, UnwrapFormAsyncValidateOrFn<TOnSubmitAsync>, UnwrapFormValidateOrFn<TOnDynamic>, UnwrapFormAsyncValidateOrFn<TOnDynamicAsync>, UnwrapFormAsyncValidateOrFn<TOnServer>>): void;
+    setErrorMap: (errorMap: FormValidationErrorMap<TFormData, UnwrapFormValidateOrFn<TOnMount>, UnwrapFormValidateOrFn<TOnChange>, UnwrapFormAsyncValidateOrFn<TOnChangeAsync>, UnwrapFormValidateOrFn<TOnBlur>, UnwrapFormAsyncValidateOrFn<TOnBlurAsync>, UnwrapFormValidateOrFn<TOnSubmit>, UnwrapFormAsyncValidateOrFn<TOnSubmitAsync>, UnwrapFormValidateOrFn<TOnDynamic>, UnwrapFormAsyncValidateOrFn<TOnDynamicAsync>, UnwrapFormAsyncValidateOrFn<TOnServer>>) => void;
     /**
      * Returns form and field level errors
      */

package/dist/esm/FormApi.js

@@ -1,6 +1,6 @@
 import { batch, Store, Derived } from "@tanstack/store";
 import { throttle } from "@tanstack/pacer";
-import { evaluate, getSyncValidatorArray, determineFormLevelErrorSourceAndValue, getAsyncValidatorArray, getBy, functionalUpdate, setBy, deleteBy, mergeOpts, uuid, isNonEmptyArray, isGlobalFormValidationError } from "./utils.js";
+import { evaluate, getSyncValidatorArray, determineFormLevelErrorSourceAndValue, getAsyncValidatorArray, getBy, functionalUpdate, setBy, deleteBy, mergeOpts, isGlobalFormValidationError, uuid, isNonEmptyArray } from "./utils.js";
 import { defaultValidationLogic } from "./ValidationLogic.js";
 import { standardSchemaValidators, isStandardSchemaValidator } from "./standardSchemaValidator.js";
 import { defaultFieldMeta, metaHelper } from "./metaHelper.js";
@@ -403,6 +403,121 @@ class FormApi {
       }
       return this.validateAsync(cause);
     };
+    this._handleSubmit = async (submitMeta) => {
+      this.baseStore.setState((old) => ({
+        ...old,
+        // Submission attempts mark the form as not submitted
+        isSubmitted: false,
+        // Count submission attempts
+        submissionAttempts: old.submissionAttempts + 1,
+        isSubmitSuccessful: false
+        // Reset isSubmitSuccessful at the start of submission
+      }));
+      batch(() => {
+        void Object.values(this.fieldInfo).forEach(
+          (field) => {
+            if (!field.instance) return;
+            if (!field.instance.state.meta.isTouched) {
+              field.instance.setMeta((prev) => ({ ...prev, isTouched: true }));
+            }
+          }
+        );
+      });
+      const submitMetaArg = submitMeta ?? this.options.onSubmitMeta;
+      if (!this.state.canSubmit && !this._devtoolsSubmissionOverride) {
+        this.options.onSubmitInvalid?.({
+          value: this.state.values,
+          formApi: this,
+          meta: submitMetaArg
+        });
+        return;
+      }
+      this.baseStore.setState((d) => ({ ...d, isSubmitting: true }));
+      const done = () => {
+        this.baseStore.setState((prev) => ({ ...prev, isSubmitting: false }));
+      };
+      await this.validateAllFields("submit");
+      if (!this.state.isFieldsValid) {
+        done();
+        this.options.onSubmitInvalid?.({
+          value: this.state.values,
+          formApi: this,
+          meta: submitMetaArg
+        });
+        formEventClient.emit("form-submission", {
+          id: this._formId,
+          submissionAttempt: this.state.submissionAttempts,
+          successful: false,
+          stage: "validateAllFields",
+          errors: Object.values(this.state.fieldMeta).map((meta) => meta.errors).flat()
+        });
+        return;
+      }
+      await this.validate("submit");
+      if (!this.state.isValid) {
+        done();
+        this.options.onSubmitInvalid?.({
+          value: this.state.values,
+          formApi: this,
+          meta: submitMetaArg
+        });
+        formEventClient.emit("form-submission", {
+          id: this._formId,
+          submissionAttempt: this.state.submissionAttempts,
+          successful: false,
+          stage: "validate",
+          errors: this.state.errors
+        });
+        return;
+      }
+      batch(() => {
+        void Object.values(this.fieldInfo).forEach(
+          (field) => {
+            field.instance?.options.listeners?.onSubmit?.({
+              value: field.instance.state.value,
+              fieldApi: field.instance
+            });
+          }
+        );
+      });
+      this.options.listeners?.onSubmit?.({ formApi: this, meta: submitMetaArg });
+      try {
+        await this.options.onSubmit?.({
+          value: this.state.values,
+          formApi: this,
+          meta: submitMetaArg
+        });
+        batch(() => {
+          this.baseStore.setState((prev) => ({
+            ...prev,
+            isSubmitted: true,
+            isSubmitSuccessful: true
+            // Set isSubmitSuccessful to true on successful submission
+          }));
+          formEventClient.emit("form-submission", {
+            id: this._formId,
+            submissionAttempt: this.state.submissionAttempts,
+            successful: true
+          });
+          done();
+        });
+      } catch (err) {
+        this.baseStore.setState((prev) => ({
+          ...prev,
+          isSubmitSuccessful: false
+          // Ensure isSubmitSuccessful is false if an error occurs
+        }));
+        formEventClient.emit("form-submission", {
+          id: this._formId,
+          submissionAttempt: this.state.submissionAttempts,
+          successful: false,
+          stage: "inflight",
+          onError: err
+        });
+        done();
+        throw err;
+      }
+    };
     this.getFieldValue = (field) => getBy(this.state.values, field);
     this.getFieldMeta = (field) => {
       return this.state.fieldMeta[field];
@@ -625,6 +740,48 @@ class FormApi {
         };
       });
     };
+    this.setErrorMap = (errorMap) => {
+      batch(() => {
+        Object.entries(errorMap).forEach(([key, value]) => {
+          const errorMapKey = key;
+          if (isGlobalFormValidationError(value)) {
+            const { formError, fieldErrors } = normalizeError(value);
+            for (const fieldName of Object.keys(
+              this.fieldInfo
+            )) {
+              const fieldMeta = this.getFieldMeta(fieldName);
+              if (!fieldMeta) continue;
+              this.setFieldMeta(fieldName, (prev) => ({
+                ...prev,
+                errorMap: {
+                  ...prev.errorMap,
+                  [errorMapKey]: fieldErrors?.[fieldName]
+                },
+                errorSourceMap: {
+                  ...prev.errorSourceMap,
+                  [errorMapKey]: "form"
+                }
+              }));
+            }
+            this.baseStore.setState((prev) => ({
+              ...prev,
+              errorMap: {
+                ...prev.errorMap,
+                [errorMapKey]: formError
+              }
+            }));
+          } else {
+            this.baseStore.setState((prev) => ({
+              ...prev,
+              errorMap: {
+                ...prev.errorMap,
+                [errorMapKey]: value
+              }
+            }));
+          }
+        });
+      });
+    };
     this.getAllErrors = () => {
       return {
         form: {
@@ -863,165 +1020,8 @@ class FormApi {
     }
     return props.validate(props.value);
   }
-  async handleSubmit(submitMeta) {
-    this.baseStore.setState((old) => ({
-      ...old,
-      // Submission attempts mark the form as not submitted
-      isSubmitted: false,
-      // Count submission attempts
-      submissionAttempts: old.submissionAttempts + 1,
-      isSubmitSuccessful: false
-      // Reset isSubmitSuccessful at the start of submission
-    }));
-    batch(() => {
-      void Object.values(this.fieldInfo).forEach(
-        (field) => {
-          if (!field.instance) return;
-          if (!field.instance.state.meta.isTouched) {
-            field.instance.setMeta((prev) => ({ ...prev, isTouched: true }));
-          }
-        }
-      );
-    });
-    const submitMetaArg = submitMeta ?? this.options.onSubmitMeta;
-    if (!this.state.canSubmit && !this._devtoolsSubmissionOverride) {
-      this.options.onSubmitInvalid?.({
-        value: this.state.values,
-        formApi: this,
-        meta: submitMetaArg
-      });
-      return;
-    }
-    this.baseStore.setState((d) => ({ ...d, isSubmitting: true }));
-    const done = () => {
-      this.baseStore.setState((prev) => ({ ...prev, isSubmitting: false }));
-    };
-    await this.validateAllFields("submit");
-    if (!this.state.isFieldsValid) {
-      done();
-      this.options.onSubmitInvalid?.({
-        value: this.state.values,
-        formApi: this,
-        meta: submitMetaArg
-      });
-      formEventClient.emit("form-submission", {
-        id: this._formId,
-        submissionAttempt: this.state.submissionAttempts,
-        successful: false,
-        stage: "validateAllFields",
-        errors: Object.values(this.state.fieldMeta).map((meta) => meta.errors).flat()
-      });
-      return;
-    }
-    await this.validate("submit");
-    if (!this.state.isValid) {
-      done();
-      this.options.onSubmitInvalid?.({
-        value: this.state.values,
-        formApi: this,
-        meta: submitMetaArg
-      });
-      formEventClient.emit("form-submission", {
-        id: this._formId,
-        submissionAttempt: this.state.submissionAttempts,
-        successful: false,
-        stage: "validate",
-        errors: this.state.errors
-      });
-      return;
-    }
-    batch(() => {
-      void Object.values(this.fieldInfo).forEach(
-        (field) => {
-          field.instance?.options.listeners?.onSubmit?.({
-            value: field.instance.state.value,
-            fieldApi: field.instance
-          });
-        }
-      );
-    });
-    this.options.listeners?.onSubmit?.({ formApi: this, meta: submitMetaArg });
-    try {
-      await this.options.onSubmit?.({
-        value: this.state.values,
-        formApi: this,
-        meta: submitMetaArg
-      });
-      batch(() => {
-        this.baseStore.setState((prev) => ({
-          ...prev,
-          isSubmitted: true,
-          isSubmitSuccessful: true
-          // Set isSubmitSuccessful to true on successful submission
-        }));
-        formEventClient.emit("form-submission", {
-          id: this._formId,
-          submissionAttempt: this.state.submissionAttempts,
-          successful: true
-        });
-        done();
-      });
-    } catch (err) {
-      this.baseStore.setState((prev) => ({
-        ...prev,
-        isSubmitSuccessful: false
-        // Ensure isSubmitSuccessful is false if an error occurs
-      }));
-      formEventClient.emit("form-submission", {
-        id: this._formId,
-        submissionAttempt: this.state.submissionAttempts,
-        successful: false,
-        stage: "inflight",
-        onError: err
-      });
-      done();
-      throw err;
-    }
-  }
-  /**
-   * Updates the form's errorMap
-   */
-  setErrorMap(errorMap) {
-    batch(() => {
-      Object.entries(errorMap).forEach(([key, value]) => {
-        const errorMapKey = key;
-        if (isGlobalFormValidationError(value)) {
-          const { formError, fieldErrors } = normalizeError(value);
-          for (const fieldName of Object.keys(
-            this.fieldInfo
-          )) {
-            const fieldMeta = this.getFieldMeta(fieldName);
-            if (!fieldMeta) continue;
-            this.setFieldMeta(fieldName, (prev) => ({
-              ...prev,
-              errorMap: {
-                ...prev.errorMap,
-                [errorMapKey]: fieldErrors?.[fieldName]
-              },
-              errorSourceMap: {
-                ...prev.errorSourceMap,
-                [errorMapKey]: "form"
-              }
-            }));
-          }
-          this.baseStore.setState((prev) => ({
-            ...prev,
-            errorMap: {
-              ...prev.errorMap,
-              [errorMapKey]: formError
-            }
-          }));
-        } else {
-          this.baseStore.setState((prev) => ({
-            ...prev,
-            errorMap: {
-              ...prev.errorMap,
-              [errorMapKey]: value
-            }
-          }));
-        }
-      });
-    });
+  handleSubmit(submitMeta) {
+    return this._handleSubmit(submitMeta);
   }
 }
 function normalizeError(rawError) {