@tanstack/react-form 0.19.3 → 0.19.5

package/dist/cjs/createFormFactory.d.cts

@@ -1,6 +1,7 @@
 import { Field, useField } from './useField.cjs';
-import type { ValidateFormData } from './validateFormData.cjs';
-import type { FormApi, FormOptions, Validator } from '@tanstack/form-core';
+import { ValidateFormData } from './validateFormData.cjs';
+import { FormApi, FormOptions, Validator } from '@tanstack/form-core';
+
 export type FormFactory<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = {
     useForm: (opts?: FormOptions<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>;
     useField: typeof useField;

package/dist/cjs/types.d.cts

@@ -1,4 +1,5 @@
-import type { DeepKeys, DeepValue, FieldApiOptions, Validator } from '@tanstack/form-core';
+import { DeepKeys, DeepValue, FieldApiOptions, Validator } from '@tanstack/form-core';
+
 export type UseFieldOptions<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
     mode?: 'value' | 'array';
 };

package/dist/cjs/useField.d.cts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import React from 'rehackt';
-import { FieldApi } from '@tanstack/form-core';
-import type { UseFieldOptions } from './types.cjs';
-import type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
+import { default as React } from 'rehackt';
+import { FieldApi, DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
+import { UseFieldOptions } from './types.cjs';
+
 declare module '@tanstack/form-core' {
     interface FieldApi<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> {
         Field: FieldComponent<TParentData, TFormValidator>;

package/dist/cjs/useForm.d.cts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { FormApi } from '@tanstack/form-core';
-import { type ReactNode } from 'rehackt';
-import { type FieldComponent, type UseField } from './useField.cjs';
-import type { NoInfer } from '@tanstack/react-store';
-import type { FormOptions, FormState, Validator } from '@tanstack/form-core';
+import { FormApi, FormOptions, FormState, Validator } from '@tanstack/form-core';
+import { ReactNode } from 'rehackt';
+import { FieldComponent, UseField } from './useField.cjs';
+import { NoInfer } from '@tanstack/react-store';
+
 declare module '@tanstack/form-core' {
     interface FormApi<TFormData, TFormValidator> {
         Field: FieldComponent<TFormData, TFormValidator>;

package/dist/cjs/useIsomorphicLayoutEffect.d.cts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
 import { useLayoutEffect } from 'rehackt';
+
 export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;

package/dist/cjs/useTransform.d.cts

@@ -1,4 +1,5 @@
-import type { FormApi, Validator } from '@tanstack/form-core';
+import { FormApi, Validator } from '@tanstack/form-core';
+
 export declare function useTransform<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(fn: (formBase: FormApi<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>, deps: unknown[]): {
     fn: (formBase: FormApi<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>;
     deps: unknown[];

package/dist/cjs/validateFormData.d.cts

@@ -1,5 +1,6 @@
 import { decode } from 'decode-formdata';
-import type { FormApi, FormOptions, ValidationError, Validator } from '@tanstack/form-core';
+import { FormApi, FormOptions, ValidationError, Validator } from '@tanstack/form-core';
+
 type OnServerValidateFn<TFormData> = (props: {
     value: TFormData;
 }) => ValidationError;

package/dist/esm/createFormFactory.d.ts

@@ -1,6 +1,7 @@
 import { Field, useField } from './useField.js';
-import type { ValidateFormData } from './validateFormData.js';
-import type { FormApi, FormOptions, Validator } from '@tanstack/form-core';
+import { ValidateFormData } from './validateFormData.js';
+import { FormApi, FormOptions, Validator } from '@tanstack/form-core';
+
 export type FormFactory<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = {
     useForm: (opts?: FormOptions<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>;
     useField: typeof useField;

package/dist/esm/types.d.ts

@@ -1,4 +1,5 @@
-import type { DeepKeys, DeepValue, FieldApiOptions, Validator } from '@tanstack/form-core';
+import { DeepKeys, DeepValue, FieldApiOptions, Validator } from '@tanstack/form-core';
+
 export type UseFieldOptions<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
     mode?: 'value' | 'array';
 };

package/dist/esm/useField.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import React from 'rehackt';
-import { FieldApi } from '@tanstack/form-core';
-import type { UseFieldOptions } from './types.js';
-import type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
+import { default as React } from 'rehackt';
+import { FieldApi, DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
+import { UseFieldOptions } from './types.js';
+
 declare module '@tanstack/form-core' {
     interface FieldApi<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> {
         Field: FieldComponent<TParentData, TFormValidator>;

package/dist/esm/useForm.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { FormApi } from '@tanstack/form-core';
-import { type ReactNode } from 'rehackt';
-import { type FieldComponent, type UseField } from './useField.js';
-import type { NoInfer } from '@tanstack/react-store';
-import type { FormOptions, FormState, Validator } from '@tanstack/form-core';
+import { FormApi, FormOptions, FormState, Validator } from '@tanstack/form-core';
+import { ReactNode } from 'rehackt';
+import { FieldComponent, UseField } from './useField.js';
+import { NoInfer } from '@tanstack/react-store';
+
 declare module '@tanstack/form-core' {
     interface FormApi<TFormData, TFormValidator> {
         Field: FieldComponent<TFormData, TFormValidator>;

package/dist/esm/useIsomorphicLayoutEffect.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
 import { useLayoutEffect } from 'rehackt';
+
 export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;

package/dist/esm/useTransform.d.ts

@@ -1,4 +1,5 @@
-import type { FormApi, Validator } from '@tanstack/form-core';
+import { FormApi, Validator } from '@tanstack/form-core';
+
 export declare function useTransform<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(fn: (formBase: FormApi<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>, deps: unknown[]): {
     fn: (formBase: FormApi<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>;
     deps: unknown[];

package/dist/esm/validateFormData.d.ts

@@ -1,5 +1,6 @@
 import { decode } from 'decode-formdata';
-import type { FormApi, FormOptions, ValidationError, Validator } from '@tanstack/form-core';
+import { FormApi, FormOptions, ValidationError, Validator } from '@tanstack/form-core';
+
 type OnServerValidateFn<TFormData> = (props: {
     value: TFormData;
 }) => ValidationError;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-form",
-  "version": "0.19.3",
+  "version": "0.19.5",
   "description": "Powerful, type-safe forms for React.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -37,28 +37,17 @@
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react": "^4.2.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "vite": "^5.0.10"
   },
   "dependencies": {
     "@tanstack/react-store": "^0.3.1",
     "decode-formdata": "^0.4.0",
     "rehackt": "^0.0.3",
-    "@tanstack/form-core": "0.19.3"
+    "@tanstack/form-core": "0.19.5"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0"
   },
-  "scripts": {
-    "clean": "rimraf ./dist && rimraf ./coverage",
-    "test:eslint": "eslint --ext .ts,.tsx ./src",
-    "test:types:versions49": "node ../../node_modules/typescript49/lib/tsc.js --project tsconfig.legacy.json",
-    "test:types:versions50": "node ../../node_modules/typescript50/lib/tsc.js --project tsconfig.50.json",
-    "test:types:versions51": "node ../../node_modules/typescript51/lib/tsc.js",
-    "test:types:versions52": "tsc",
-    "test:types": "pnpm run \"/^test:types:versions.*/\"",
-    "test:lib": "vitest",
-    "test:lib:dev": "pnpm run test:lib --watch",
-    "test:build": "publint --strict",
-    "build": "vite build"
-  }
+  "scripts": {}
 }

package/src/tests/useField.test.tsx

@@ -900,4 +900,61 @@ describe('useField', () => {
     expect(queryByText('Test')).not.toBeInTheDocument()
     expect(await findByText('User')).toBeInTheDocument()
   })
+
+  it('should validate async on submit without debounce', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const mockFn = vi.fn()
+    const error = 'Please enter a different value'
+    const formFactory = createFormFactory<Person>()
+
+    function Comp() {
+      const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+        validators: {
+          onChangeAsyncDebounceMs: 1000000,
+          onChangeAsync: async () => {
+            mockFn()
+            await sleep(10)
+            return error
+          },
+        },
+      })
+      const errors = form.useStore((s) => s.errors)
+
+      return (
+        <>
+          <form.Field
+            name="firstName"
+            defaultMeta={{ isTouched: true }}
+            children={(field) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                <p>{errors}</p>
+              </div>
+            )}
+          />
+          <button onClick={form.handleSubmit}>Submit</button>
+        </>
+      )
+    }
+
+    const { getByRole, getByText } = render(<Comp />)
+    await user.click(getByRole('button', { name: 'Submit' }))
+
+    expect(mockFn).toHaveBeenCalledTimes(1)
+    await waitFor(() => getByText(error))
+    expect(getByText(error)).toBeInTheDocument()
+  })
 })