@tanstack/react-form 0.4.2 → 0.6.0

package/build/legacy/createFormFactory.d.cts

@@ -1,6 +1,5 @@
 import { FormOptions, FormApi } from '@tanstack/form-core';
 import { UseField, FieldComponent } from './useField.cjs';
-import 'react';
 import './types.cjs';
 
 type FormFactory<TFormData, FormValidator> = {

package/build/legacy/createFormFactory.d.ts

@@ -1,6 +1,5 @@
 import { FormOptions, FormApi } from '@tanstack/form-core';
 import { UseField, FieldComponent } from './useField.js';
-import 'react';
 import './types.js';
 
 type FormFactory<TFormData, FormValidator> = {

package/build/legacy/useField.d.cts

@@ -1,4 +1,3 @@
-import React__default from 'react';
 import { DeepKeys, DeepValue, Narrow, FieldApi } from '@tanstack/form-core';
 import { UseFieldOptions } from './types.cjs';
 
@@ -23,6 +22,6 @@ type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, Valid
 type FieldComponent<TParentData, FormValidator> = <TName extends DeepKeys<TParentData>, ValidatorType, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: FieldComponentProps<TParentData, TName, ValidatorType, FormValidator, TData>) => any;
 declare function Field<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>({ children, ...fieldOptions }: {
     children: (fieldApi: FieldApi<TParentData, TName, ValidatorType, FormValidator>) => any;
-} & UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>): React__default.JSX.Element;
+} & UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>): JSX.Element;
 
 export { Field, FieldComponent, UseField, useField };

package/build/legacy/useField.d.ts

@@ -1,4 +1,3 @@
-import React__default from 'react';
 import { DeepKeys, DeepValue, Narrow, FieldApi } from '@tanstack/form-core';
 import { UseFieldOptions } from './types.js';
 
@@ -23,6 +22,6 @@ type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, Valid
 type FieldComponent<TParentData, FormValidator> = <TName extends DeepKeys<TParentData>, ValidatorType, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: FieldComponentProps<TParentData, TName, ValidatorType, FormValidator, TData>) => any;
 declare function Field<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>({ children, ...fieldOptions }: {
     children: (fieldApi: FieldApi<TParentData, TName, ValidatorType, FormValidator>) => any;
-} & UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>): React__default.JSX.Element;
+} & UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>): JSX.Element;
 
 export { Field, FieldComponent, UseField, useField };

package/build/modern/createFormFactory.d.cts

@@ -1,6 +1,5 @@
 import { FormOptions, FormApi } from '@tanstack/form-core';
 import { UseField, FieldComponent } from './useField.cjs';
-import 'react';
 import './types.cjs';
 
 type FormFactory<TFormData, FormValidator> = {

package/build/modern/createFormFactory.d.ts

@@ -1,6 +1,5 @@
 import { FormOptions, FormApi } from '@tanstack/form-core';
 import { UseField, FieldComponent } from './useField.js';
-import 'react';
 import './types.js';
 
 type FormFactory<TFormData, FormValidator> = {

package/build/modern/useField.d.cts

@@ -1,4 +1,3 @@
-import React__default from 'react';
 import { DeepKeys, DeepValue, Narrow, FieldApi } from '@tanstack/form-core';
 import { UseFieldOptions } from './types.cjs';
 
@@ -23,6 +22,6 @@ type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, Valid
 type FieldComponent<TParentData, FormValidator> = <TName extends DeepKeys<TParentData>, ValidatorType, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: FieldComponentProps<TParentData, TName, ValidatorType, FormValidator, TData>) => any;
 declare function Field<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>({ children, ...fieldOptions }: {
     children: (fieldApi: FieldApi<TParentData, TName, ValidatorType, FormValidator>) => any;
-} & UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>): React__default.JSX.Element;
+} & UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>): JSX.Element;
 
 export { Field, FieldComponent, UseField, useField };

package/build/modern/useField.d.ts

@@ -1,4 +1,3 @@
-import React__default from 'react';
 import { DeepKeys, DeepValue, Narrow, FieldApi } from '@tanstack/form-core';
 import { UseFieldOptions } from './types.js';
 
@@ -23,6 +22,6 @@ type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, Valid
 type FieldComponent<TParentData, FormValidator> = <TName extends DeepKeys<TParentData>, ValidatorType, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: FieldComponentProps<TParentData, TName, ValidatorType, FormValidator, TData>) => any;
 declare function Field<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>({ children, ...fieldOptions }: {
     children: (fieldApi: FieldApi<TParentData, TName, ValidatorType, FormValidator>) => any;
-} & UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>): React__default.JSX.Element;
+} & UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>): JSX.Element;
 
 export { Field, FieldComponent, UseField, useField };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-form",
-  "version": "0.4.2",
+  "version": "0.6.0",
   "description": "Powerful, type-safe forms for React.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -54,7 +54,7 @@
     "@tanstack/react-store": "0.1.3",
     "@tanstack/store": "0.1.3",
     "use-isomorphic-layout-effect": "^1.1.2",
-    "@tanstack/form-core": "0.4.2"
+    "@tanstack/form-core": "0.6.0"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",

package/src/tests/useField.test.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { render, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
-import { createFormFactory } from '..'
+import { type FormApi, createFormFactory } from '..'
 import { sleep } from './utils'
 
 const user = userEvent.setup()
@@ -373,4 +373,80 @@ describe('useField', () => {
     await waitFor(() => getByText(error))
     expect(getByText(error)).toBeInTheDocument()
   })
+
+  it('should preserve value when preserve value property is true', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const formFactory = createFormFactory<Person, unknown>()
+    let form: FormApi<Person, unknown> | null = null
+    function Comp() {
+      form = formFactory.useForm()
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultValue="hello"
+            preserveValue={true}
+            children={(field) => {
+              return (
+                <input
+                  data-testid="fieldinput"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+              )
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, unmount, rerender } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    expect(input).toHaveValue('hello')
+    await user.type(input, 'world')
+    unmount()
+    expect(form!.fieldInfo['firstName']).toBeDefined()
+  })
+
+  it('should not preserve value when preserve value property is false', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const formFactory = createFormFactory<Person, unknown>()
+    let form: FormApi<Person, unknown> | null = null
+    function Comp() {
+      form = formFactory.useForm()
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultValue="hello"
+            preserveValue={false}
+            children={(field) => {
+              return (
+                <input
+                  data-testid="fieldinput"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+              )
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, unmount } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    expect(input).toHaveValue('hello')
+    unmount()
+    const info = form!.fieldInfo
+    expect(Object.keys(info)).toHaveLength(0)
+  })
 })