@tanstack/react-form 0.13.7 → 0.16.0

package/src/tests/useField.test.tsx

@@ -1,8 +1,7 @@
-/// <reference lib="dom" />
 import * as React from 'react'
+import { describe, expect, it, vi } from 'vitest'
 import { render, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import '@testing-library/jest-dom'
 import { createFormFactory, useForm } from '../index'
 import { sleep } from './utils'
 import type { FieldApi, FormApi } from '../index'
@@ -27,7 +26,7 @@ describe('useField', () => {
       })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             children={(field) => {
@@ -41,7 +40,7 @@ describe('useField', () => {
               )
             }}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -67,7 +66,7 @@ describe('useField', () => {
       })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultValue="otherName"
@@ -82,7 +81,7 @@ describe('useField', () => {
               )
             }}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -109,7 +108,7 @@ describe('useField', () => {
       })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             validators={{
@@ -128,7 +127,7 @@ describe('useField', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -156,7 +155,7 @@ describe('useField', () => {
       })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -176,7 +175,7 @@ describe('useField', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -206,7 +205,7 @@ describe('useField', () => {
       })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -230,7 +229,7 @@ describe('useField', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -262,7 +261,7 @@ describe('useField', () => {
       })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -285,7 +284,7 @@ describe('useField', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -316,7 +315,7 @@ describe('useField', () => {
       })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -344,7 +343,7 @@ describe('useField', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -379,7 +378,7 @@ describe('useField', () => {
       })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -404,7 +403,7 @@ describe('useField', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -432,7 +431,7 @@ describe('useField', () => {
         },
       })
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultValue="hello"
@@ -448,7 +447,7 @@ describe('useField', () => {
               )
             }}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -475,7 +474,7 @@ describe('useField', () => {
         },
       })
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultValue="hello"
@@ -491,7 +490,7 @@ describe('useField', () => {
               )
             }}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -529,74 +528,69 @@ describe('useField', () => {
 
       return (
         <div>
-          <form.Provider>
-            <form
-              onSubmit={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-                void form.handleSubmit()
-              }}
-            >
-              <div>
-                {/* A type-safe field component*/}
-                {showField ? (
-                  <form.Field
-                    name="firstName"
-                    validators={{
-                      onChange: ({ value }) =>
-                        !value ? 'A first name is required' : undefined,
-                    }}
-                    children={(field) => {
-                      // Avoid hasty abstractions. Render props are great!
-                      return (
-                        <>
-                          <label htmlFor={field.name}>First Name:</label>
-                          <input
-                            name={field.name}
-                            value={field.state.value}
-                            onBlur={field.handleBlur}
-                            onChange={(e) => field.handleChange(e.target.value)}
-                          />
-                          <FieldInfo field={field} />
-                        </>
-                      )
-                    }}
-                  />
-                ) : null}
-              </div>
-              <div>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              void form.handleSubmit()
+            }}
+          >
+            <div>
+              {/* A type-safe field component*/}
+              {showField ? (
                 <form.Field
-                  name="lastName"
-                  children={(field) => (
-                    <>
-                      <label htmlFor={field.name}>Last Name:</label>
-                      <input
-                        name={field.name}
-                        value={field.state.value}
-                        onBlur={field.handleBlur}
-                        onChange={(e) => field.handleChange(e.target.value)}
-                      />
-                      <FieldInfo field={field} />
-                    </>
-                  )}
+                  name="firstName"
+                  validators={{
+                    onChange: ({ value }) =>
+                      !value ? 'A first name is required' : undefined,
+                  }}
+                  children={(field) => {
+                    // Avoid hasty abstractions. Render props are great!
+                    return (
+                      <>
+                        <label htmlFor={field.name}>First Name:</label>
+                        <input
+                          name={field.name}
+                          value={field.state.value}
+                          onBlur={field.handleBlur}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                        />
+                        <FieldInfo field={field} />
+                      </>
+                    )
+                  }}
                 />
-              </div>
-              <form.Subscribe
-                selector={(state) => [state.canSubmit, state.isSubmitting]}
-                children={([canSubmit, isSubmitting]) => (
-                  <button type="submit" disabled={!canSubmit}>
-                    {isSubmitting ? '...' : 'Submit'}
-                  </button>
+              ) : null}
+            </div>
+            <div>
+              <form.Field
+                name="lastName"
+                children={(field) => (
+                  <>
+                    <label htmlFor={field.name}>Last Name:</label>
+                    <input
+                      name={field.name}
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                    />
+                    <FieldInfo field={field} />
+                  </>
                 )}
               />
-              <button
-                type="button"
-                onClick={() => setShowField((prev) => !prev)}
-              >
-                {showField ? 'Hide field' : 'Show field'}
-              </button>
-            </form>
-          </form.Provider>
+            </div>
+            <form.Subscribe
+              selector={(state) => [state.canSubmit, state.isSubmitting]}
+              children={([canSubmit, isSubmitting]) => (
+                <button type="submit" disabled={!canSubmit}>
+                  {isSubmitting ? '...' : 'Submit'}
+                </button>
+              )}
+            />
+            <button type="button" onClick={() => setShowField((prev) => !prev)}>
+              {showField ? 'Hide field' : 'Show field'}
+            </button>
+          </form>
         </div>
       )
     }
@@ -613,4 +607,84 @@ describe('useField', () => {
     await user.click(getByText('Submit'))
     expect(queryByText('A first name is required')).not.toBeInTheDocument()
   })
+
+  it('should handle arrays with subvalues', async () => {
+    const fn = vi.fn()
+    function Comp() {
+      const form = useForm({
+        defaultValues: {
+          people: [] as Array<{ age: number; name: string }>,
+        },
+        onSubmit: ({ value }) => fn(value),
+      })
+
+      return (
+        <div>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              void form.handleSubmit()
+            }}
+          >
+            <form.Field name="people">
+              {(field) => {
+                return (
+                  <div>
+                    {field.state.value.map((_, i) => {
+                      return (
+                        <form.Field key={i} name={`people[${i}].name`}>
+                          {(subField) => {
+                            return (
+                              <div>
+                                <label>
+                                  <div>Name for person {i}</div>
+                                  <input
+                                    value={subField.state.value}
+                                    onChange={(e) =>
+                                      subField.handleChange(e.target.value)
+                                    }
+                                  />
+                                </label>
+                              </div>
+                            )
+                          }}
+                        </form.Field>
+                      )
+                    })}
+                    <button
+                      onClick={() => field.pushValue({ name: '', age: 0 })}
+                      type="button"
+                    >
+                      Add person
+                    </button>
+                  </div>
+                )
+              }}
+            </form.Field>
+            <form.Subscribe
+              selector={(state) => [state.canSubmit, state.isSubmitting]}
+              children={([canSubmit, isSubmitting]) => (
+                <button type="submit" disabled={!canSubmit}>
+                  {isSubmitting ? '...' : 'Submit'}
+                </button>
+              )}
+            />
+          </form>
+        </div>
+      )
+    }
+
+    const { getByText, findByLabelText, queryByText, findByText } = render(
+      <Comp />,
+    )
+
+    expect(queryByText('Name for person 0')).not.toBeInTheDocument()
+    await user.click(getByText('Add person'))
+    const input = await findByLabelText('Name for person 0')
+    expect(input).toBeInTheDocument()
+    await user.type(input, 'John')
+    await user.click(await findByText('Submit'))
+    expect(fn).toHaveBeenCalledWith({ people: [{ name: 'John', age: 0 }] })
+  })
 })

package/src/tests/useForm.test-d.tsx

@@ -1,5 +1,5 @@
-import { assertType } from 'vitest'
 import * as React from 'react'
+import { assertType, it } from 'vitest'
 import { useForm } from '../useForm'
 
 it('should type onSubmit properly', () => {

package/src/tests/useForm.test.tsx

@@ -1,8 +1,7 @@
-/// <reference lib="dom" />
-import '@testing-library/jest-dom'
+import * as React from 'react'
+import { describe, expect, it, vi } from 'vitest'
 import { render, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import * as React from 'react'
 import { createFormFactory, useForm } from '../index'
 import { sleep } from './utils'
 
@@ -21,7 +20,7 @@ describe('useForm', () => {
       const form = formFactory.useForm()
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultValue={''}
@@ -36,7 +35,7 @@ describe('useForm', () => {
               )
             }}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -64,14 +63,14 @@ describe('useForm', () => {
       })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             children={(field) => {
               return <p>{field.state.value}</p>
             }}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -96,7 +95,7 @@ describe('useForm', () => {
       })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             children={(field) => {
@@ -112,7 +111,7 @@ describe('useForm', () => {
           />
           <button onClick={form.handleSubmit}>Submit</button>
           {submittedData && <p>Submitted data: {submittedData.firstName}</p>}
-        </form.Provider>
+        </>
       )
     }
 
@@ -146,9 +145,9 @@ describe('useForm', () => {
       return (
         <>
           {mountForm ? (
-            <form.Provider>
+            <>
               <h1>{formMounted ? 'Form mounted' : 'Not mounted'}</h1>
-            </form.Provider>
+            </>
           ) : (
             <button onClick={() => setMountForm(true)}>Mount form</button>
           )}
@@ -184,7 +183,7 @@ describe('useForm', () => {
       })
       const onChangeError = form.useStore((s) => s.errorMap.onChange)
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             children={(field) => (
@@ -198,7 +197,7 @@ describe('useForm', () => {
             )}
           />
           <p>{onChangeError}</p>
-        </form.Provider>
+        </>
       )
     }
 
@@ -233,7 +232,7 @@ describe('useForm', () => {
 
       const errors = form.useStore((s) => s.errors)
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             children={(field) => (
@@ -249,7 +248,7 @@ describe('useForm', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -281,7 +280,7 @@ describe('useForm', () => {
       })
       const errors = form.useStore((s) => s.errorMap)
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -298,7 +297,7 @@ describe('useForm', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -332,7 +331,7 @@ describe('useForm', () => {
 
       const errors = form.useStore((s) => s.errorMap)
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -350,7 +349,7 @@ describe('useForm', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
     const { getByTestId, getByText, queryByText } = render(<Comp />)
@@ -387,7 +386,7 @@ describe('useForm', () => {
       })
       const errors = form.useStore((s) => s.errorMap)
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -404,7 +403,7 @@ describe('useForm', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -446,7 +445,7 @@ describe('useForm', () => {
       const errors = form.useStore((s) => s.errorMap)
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -464,7 +463,7 @@ describe('useForm', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -508,7 +507,7 @@ describe('useForm', () => {
       const errors = form.useStore((s) => s.errors)
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -525,7 +524,7 @@ describe('useForm', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 

package/src/types.ts

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