@tanstack/react-form 0.13.7 → 0.16.0

package/src/useField.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'rehackt'
 import { useStore } from '@tanstack/react-store'
 import { FieldApi, functionalUpdate } from '@tanstack/form-core'
-import { formContext, useFormContext } from './formContext'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 import type { UseFieldOptions } from './types'
 import type {
@@ -28,20 +27,20 @@ declare module '@tanstack/form-core' {
   }
 }
 
-export type UseField<TParentData> = <
+export type UseField<
+  TParentData,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+> = <
   TName extends DeepKeys<TParentData>,
   TFieldValidator extends
     | Validator<DeepValue<TParentData, TName>, unknown>
     | undefined = undefined,
-  TFormValidator extends
-    | Validator<TParentData, unknown>
-    | undefined = undefined,
 >(
-  opts?: { name: Narrow<TName> } & UseFieldOptions<
-    TParentData,
-    TName,
-    TFieldValidator,
-    TFormValidator
+  opts: Omit<
+    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
+    'form'
   >,
 ) => FieldApi<
   TParentData,
@@ -63,23 +62,11 @@ export function useField<
 >(
   opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
 ): FieldApi<TParentData, TName, TFieldValidator, TFormValidator> {
-  // Get the form API either manually or from context
-  const { formApi, parentFieldName } = useFormContext()
-
   const [fieldApi] = useState(() => {
-    const name = (
-      typeof opts.index === 'number'
-        ? [parentFieldName, opts.index, opts.name]
-        : [parentFieldName, opts.name]
-    )
-      .filter((d) => d !== undefined)
-      .join('.')
-
     const api = new FieldApi({
       ...opts,
-      form: formApi as never,
-      // TODO: Fix typings to include `index` and `parentFieldName`, if present
-      name: name as typeof opts.name as never,
+      form: opts.form,
+      name: opts.name,
     })
 
     api.Field = Field as never
@@ -94,7 +81,7 @@ export function useField<
    * that we need to keep updated every render with the most up-to-date information.
    */
   useIsomorphicLayoutEffect(() => {
-    fieldApi.update({ ...opts, form: formApi } as never)
+    fieldApi.update(opts)
   })
 
   useStore(
@@ -129,19 +116,7 @@ type FieldComponentProps<
       TData
     >,
   ) => any
-} & (TParentData extends any[]
-  ? {
-      name?: TName
-      index: number
-    }
-  : {
-      name: TName
-      index?: never
-    }) &
-  Omit<
-    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
-    'name' | 'index'
-  >
+} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>
 
 export type FieldComponent<
   TParentData,
@@ -157,12 +132,15 @@ export type FieldComponent<
 >({
   children,
   ...fieldOptions
-}: FieldComponentProps<
-  TParentData,
-  TName,
-  TFieldValidator,
-  TFormValidator,
-  TData
+}: Omit<
+  FieldComponentProps<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >,
+  'form'
 >) => any
 
 export function Field<
@@ -184,13 +162,5 @@ export function Field<
 } & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>) {
   const fieldApi = useField(fieldOptions as any)
 
-  return (
-    <formContext.Provider
-      value={{
-        formApi: fieldApi.form as never,
-        parentFieldName: fieldApi.name,
-      }}
-      children={functionalUpdate(children, fieldApi as any)}
-    />
-  )
+  return <>{functionalUpdate(children, fieldApi as any)}</>
 }

package/src/useForm.tsx

@@ -5,19 +5,16 @@ import React, {
   type ReactNode,
   useState,
 } from 'rehackt'
-import { Field, useField } from './useField'
-import { formContext } from './formContext'
+import { Field, type FieldComponent, type UseField, useField } from './useField'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 import type { NoInfer } from '@tanstack/react-store'
 import type { FormOptions, FormState, Validator } from '@tanstack/form-core'
-import type { FieldComponent, UseField } from './useField'
 
 declare module '@tanstack/form-core' {
   // eslint-disable-next-line no-shadow
   interface FormApi<TFormData, TFormValidator> {
-    Provider: (props: PropsWithChildren) => JSX.Element
     Field: FieldComponent<TFormData, TFormValidator>
-    useField: UseField<TFormData>
+    useField: UseField<TFormData, TFormValidator>
     useStore: <TSelected = NoInfer<FormState<TFormData>>>(
       selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
     ) => TSelected
@@ -47,15 +44,11 @@ export function useForm<
 ): FormApi<TFormData, TFormValidator> {
   const [formApi] = useState(() => {
     const api = new FormApi<TFormData, TFormValidator>(opts)
-
-    api.Provider = function Provider(props) {
-      useIsomorphicLayoutEffect(api.mount, [])
-      return (
-        <formContext.Provider {...props} value={{ formApi: api as never }} />
-      )
+    api.Field = function APIField(props) {
+      return <Field {...props} form={api} />
     }
-    api.Field = Field as any
-    api.useField = useField as any
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    api.useField = (props) => useField({ ...props, form: api })
     api.useStore = (
       // @ts-ignore
       selector,
@@ -77,6 +70,8 @@ export function useForm<
     return api
   })
 
+  useIsomorphicLayoutEffect(formApi.mount, [])
+
   formApi.useStore((state) => state.isSubmitting)
 
   /**

package/dist/cjs/formContext.cjs

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const rehackt = require("rehackt");
-const formContext = rehackt.createContext(null);
-function useFormContext() {
-  const formApi = rehackt.useContext(formContext);
-  if (!formApi) {
-    throw new Error(`You are trying to use the form API outside of a form!`);
-  }
-  return formApi;
-}
-exports.formContext = formContext;
-exports.useFormContext = useFormContext;
-//# sourceMappingURL=formContext.cjs.map

package/dist/cjs/formContext.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"formContext.cjs","sources":["../../src/formContext.ts"],"sourcesContent":["import { createContext, useContext } from 'rehackt'\nimport type { FormApi, Validator } from '@tanstack/form-core'\n\nexport const formContext = createContext<{\n  formApi: FormApi<any, Validator<any, unknown> | undefined>\n  parentFieldName?: string\n} | null>(null!)\n\nexport function useFormContext() {\n  const formApi = useContext(formContext)\n\n  if (!formApi) {\n    throw new Error(`You are trying to use the form API outside of a form!`)\n  }\n\n  return formApi\n}\n"],"names":["createContext","useContext"],"mappings":";;;AAGa,MAAA,cAAcA,sBAGjB,IAAK;AAER,SAAS,iBAAiB;AACzB,QAAA,UAAUC,mBAAW,WAAW;AAEtC,MAAI,CAAC,SAAS;AACN,UAAA,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEO,SAAA;AACT;;;"}

package/dist/cjs/formContext.d.cts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import type { FormApi, Validator } from '@tanstack/form-core';
-export declare const formContext: import("react").Context<{
-    formApi: FormApi<any, Validator<any, unknown> | undefined>;
-    parentFieldName?: string | undefined;
-} | null>;
-export declare function useFormContext(): {
-    formApi: FormApi<any, Validator<any, unknown> | undefined>;
-    parentFieldName?: string | undefined;
-};

package/dist/esm/formContext.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import type { FormApi, Validator } from '@tanstack/form-core';
-export declare const formContext: import("react").Context<{
-    formApi: FormApi<any, Validator<any, unknown> | undefined>;
-    parentFieldName?: string | undefined;
-} | null>;
-export declare function useFormContext(): {
-    formApi: FormApi<any, Validator<any, unknown> | undefined>;
-    parentFieldName?: string | undefined;
-};

package/dist/esm/formContext.js

@@ -1,14 +0,0 @@
-import { createContext, useContext } from "rehackt";
-const formContext = createContext(null);
-function useFormContext() {
-  const formApi = useContext(formContext);
-  if (!formApi) {
-    throw new Error(`You are trying to use the form API outside of a form!`);
-  }
-  return formApi;
-}
-export {
-  formContext,
-  useFormContext
-};
-//# sourceMappingURL=formContext.js.map

package/dist/esm/formContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"formContext.js","sources":["../../src/formContext.ts"],"sourcesContent":["import { createContext, useContext } from 'rehackt'\nimport type { FormApi, Validator } from '@tanstack/form-core'\n\nexport const formContext = createContext<{\n  formApi: FormApi<any, Validator<any, unknown> | undefined>\n  parentFieldName?: string\n} | null>(null!)\n\nexport function useFormContext() {\n  const formApi = useContext(formContext)\n\n  if (!formApi) {\n    throw new Error(`You are trying to use the form API outside of a form!`)\n  }\n\n  return formApi\n}\n"],"names":[],"mappings":";AAGa,MAAA,cAAc,cAGjB,IAAK;AAER,SAAS,iBAAiB;AACzB,QAAA,UAAU,WAAW,WAAW;AAEtC,MAAI,CAAC,SAAS;AACN,UAAA,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEO,SAAA;AACT;"}

package/src/formContext.ts

@@ -1,17 +0,0 @@
-import { createContext, useContext } from 'rehackt'
-import type { FormApi, Validator } from '@tanstack/form-core'
-
-export const formContext = createContext<{
-  formApi: FormApi<any, Validator<any, unknown> | undefined>
-  parentFieldName?: string
-} | null>(null!)
-
-export function useFormContext() {
-  const formApi = useContext(formContext)
-
-  if (!formApi) {
-    throw new Error(`You are trying to use the form API outside of a form!`)
-  }
-
-  return formApi
-}