@tanstack/react-form 1.3.0 → 1.3.2

package/dist/cjs/useField.cjs

@@ -23,7 +23,10 @@ function useField(opts) {
   reactStore.useStore(
     fieldApi.store,
     opts.mode === "array" ? (state) => {
-      return [state.meta, Object.keys(state.value ?? []).length];
+      return [
+        state.meta,
+        Object.keys(state.value ?? []).length
+      ];
     } : void 0
   );
   return fieldApi;

package/dist/cjs/useField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldAsyncValidateOrFn,\n  FieldValidateOrFn,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { UseFieldOptions, UseFieldOptionsBound } from './types'\n\ninterface ReactFieldApi<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> {\n  /**\n   * A pre-bound and type-safe sub-field component using this field as a root.\n   */\n  Field: FieldComponent<\n    TParentData,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  >\n}\n\n/**\n * A type representing a hook for using a field in a form with the given form data type.\n *\n * A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field.\n */\nexport type UseField<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n  opts: UseFieldOptionsBound<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>\n\n/**\n * A hook for managing a field in a form.\n * @param opts An object with field options.\n *\n * @returns The `FieldApi` instance for the specified field.\n */\nexport function useField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n>(\n  opts: UseFieldOptions<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  >,\n) {\n  const [fieldApi] = useState(() => {\n    const api = new FieldApi({\n      ...opts,\n      form: opts.form,\n      name: opts.name,\n    })\n\n    const extendedApi: typeof api &\n      ReactFieldApi<\n        TParentData,\n        TFormOnMount,\n        TFormOnChange,\n        TFormOnChangeAsync,\n        TFormOnBlur,\n        TFormOnBlurAsync,\n        TFormOnSubmit,\n        TFormOnSubmitAsync,\n        TFormOnServer,\n        TPatentSubmitMeta\n      > = api as never\n\n    extendedApi.Field = Field as never\n\n    return extendedApi\n  })\n\n  useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    fieldApi.update(opts)\n  })\n\n  useStore(\n    fieldApi.store,\n    opts.mode === 'array'\n      ? (state) => {\n          return [state.meta, Object.keys(state.value ?? []).length]\n        }\n      : undefined,\n  )\n\n  return fieldApi\n}\n\n/**\n * @param children A render function that takes a field API instance and returns a React element.\n */\ninterface FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> extends UseFieldOptions<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  > {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    > &\n      ExtendedApi,\n  ) => ReactNode\n}\n\ninterface FieldComponentBoundProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> extends UseFieldOptionsBound<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync\n  > {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    > &\n      ExtendedApi,\n  ) => ReactNode\n}\n\n/**\n * A type alias representing a field component for a specific form data type.\n */\nexport type FieldComponent<\n  in out TParentData,\n  in out TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnChangeAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnBlurAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnSubmitAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  in out TPatentSubmitMeta,\n  in out ExtendedApi = {},\n> = <\n  const TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentBoundProps<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta,\n  ExtendedApi\n>) => ReactNode\n\n/**\n * A function component that takes field options and a render function as children and returns a React component.\n *\n * The `Field` component uses the `useField` hook internally to manage the field instance.\n */\nexport const Field = (<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentProps<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>): ReactNode => {\n  const fieldApi = useField(fieldOptions as any)\n\n  const jsxToDisplay = useMemo(\n    () => functionalUpdate(children, fieldApi as any),\n    /**\n     * The reason this exists is to fix an issue with the React Compiler.\n     * Namely, functionalUpdate is memoized where it checks for `fieldApi`, which is a static type.\n     * This means that when `state.value` changes, it does not trigger a re-render. The useMemo explicitly fixes this problem\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [children, fieldApi, fieldApi.state.value, fieldApi.state.meta],\n  )\n  return (<>{jsxToDisplay}</>) as never\n}) satisfies FunctionComponent<\n  FieldComponentProps<\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any\n  >\n>\n"],"names":["useState","FieldApi","useIsomorphicLayoutEffect","useStore","useMemo","functionalUpdate"],"mappings":";;;;;;;AAqHO,SAAS,SA2Bd,MAqBA;AACA,QAAM,CAAC,QAAQ,IAAIA,MAAAA,SAAS,MAAM;AAC1B,UAAA,MAAM,IAAIC,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cAYA;AAEN,gBAAY,QAAQ;AAEb,WAAA;AAAA,EAAA,CACR;AAEDC,4BAAAA,0BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpDA,4BAAAA,0BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EAAA,CACrB;AAEDC,aAAA;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,SAAS,EAAE,EAAE,MAAM;AAAA,IAAA,IAE3D;AAAA,EACN;AAEO,SAAA;AACT;AAoNO,MAAM,QAAS,CA0BpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAoBiB;AACT,QAAA,WAAW,SAAS,YAAmB;AAE7C,QAAM,eAAeC,MAAA;AAAA,IACnB,MAAMC,SAAiB,iBAAA,UAAU,QAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhD,CAAC,UAAU,UAAU,SAAS,MAAM,OAAO,SAAS,MAAM,IAAI;AAAA,EAChE;AACA,+DAAW,UAAa,aAAA,CAAA;AAC1B;;;"}
+{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldAsyncValidateOrFn,\n  FieldValidateOrFn,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { UseFieldOptions, UseFieldOptionsBound } from './types'\n\ninterface ReactFieldApi<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> {\n  /**\n   * A pre-bound and type-safe sub-field component using this field as a root.\n   */\n  Field: FieldComponent<\n    TParentData,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  >\n}\n\n/**\n * A type representing a hook for using a field in a form with the given form data type.\n *\n * A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field.\n */\nexport type UseField<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n  opts: UseFieldOptionsBound<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>\n\n/**\n * A hook for managing a field in a form.\n * @param opts An object with field options.\n *\n * @returns The `FieldApi` instance for the specified field.\n */\nexport function useField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n>(\n  opts: UseFieldOptions<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  >,\n) {\n  const [fieldApi] = useState(() => {\n    const api = new FieldApi({\n      ...opts,\n      form: opts.form,\n      name: opts.name,\n    })\n\n    const extendedApi: typeof api &\n      ReactFieldApi<\n        TParentData,\n        TFormOnMount,\n        TFormOnChange,\n        TFormOnChangeAsync,\n        TFormOnBlur,\n        TFormOnBlurAsync,\n        TFormOnSubmit,\n        TFormOnSubmitAsync,\n        TFormOnServer,\n        TPatentSubmitMeta\n      > = api as never\n\n    extendedApi.Field = Field as never\n\n    return extendedApi\n  })\n\n  useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    fieldApi.update(opts)\n  })\n\n  useStore(\n    fieldApi.store,\n    opts.mode === 'array'\n      ? (state) => {\n          return [\n            state.meta,\n            Object.keys((state.value as unknown) ?? []).length,\n          ]\n        }\n      : undefined,\n  )\n\n  return fieldApi\n}\n\n/**\n * @param children A render function that takes a field API instance and returns a React element.\n */\ninterface FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> extends UseFieldOptions<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  > {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    > &\n      ExtendedApi,\n  ) => ReactNode\n}\n\ninterface FieldComponentBoundProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> extends UseFieldOptionsBound<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync\n  > {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    > &\n      ExtendedApi,\n  ) => ReactNode\n}\n\n/**\n * A type alias representing a field component for a specific form data type.\n */\nexport type FieldComponent<\n  in out TParentData,\n  in out TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnChangeAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnBlurAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnSubmitAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  in out TPatentSubmitMeta,\n  in out ExtendedApi = {},\n> = <\n  const TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentBoundProps<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta,\n  ExtendedApi\n>) => ReactNode\n\n/**\n * A function component that takes field options and a render function as children and returns a React component.\n *\n * The `Field` component uses the `useField` hook internally to manage the field instance.\n */\nexport const Field = (<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentProps<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>): ReactNode => {\n  const fieldApi = useField(fieldOptions as any)\n\n  const jsxToDisplay = useMemo(\n    () => functionalUpdate(children, fieldApi as any),\n    /**\n     * The reason this exists is to fix an issue with the React Compiler.\n     * Namely, functionalUpdate is memoized where it checks for `fieldApi`, which is a static type.\n     * This means that when `state.value` changes, it does not trigger a re-render. The useMemo explicitly fixes this problem\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [children, fieldApi, fieldApi.state.value, fieldApi.state.meta],\n  )\n  return (<>{jsxToDisplay}</>) as never\n}) satisfies FunctionComponent<\n  FieldComponentProps<\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any\n  >\n>\n"],"names":["useState","FieldApi","useIsomorphicLayoutEffect","useStore","useMemo","functionalUpdate"],"mappings":";;;;;;;AAqHO,SAAS,SA2Bd,MAqBA;AACA,QAAM,CAAC,QAAQ,IAAIA,MAAAA,SAAS,MAAM;AAC1B,UAAA,MAAM,IAAIC,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cAYA;AAEN,gBAAY,QAAQ;AAEb,WAAA;AAAA,EAAA,CACR;AAEDC,4BAAAA,0BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpDA,4BAAAA,0BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EAAA,CACrB;AAEDC,aAAA;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA;AAAA,QACL,MAAM;AAAA,QACN,OAAO,KAAM,MAAM,SAAqB,CAAE,CAAA,EAAE;AAAA,MAC9C;AAAA,IAAA,IAEF;AAAA,EACN;AAEO,SAAA;AACT;AAoNO,MAAM,QAAS,CA0BpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAoBiB;AACT,QAAA,WAAW,SAAS,YAAmB;AAE7C,QAAM,eAAeC,MAAA;AAAA,IACnB,MAAMC,SAAiB,iBAAA,UAAU,QAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhD,CAAC,UAAU,UAAU,SAAS,MAAM,OAAO,SAAS,MAAM,IAAI;AAAA,EAChE;AACA,+DAAW,UAAa,aAAA,CAAA;AAC1B;;;"}

package/dist/esm/useField.js

@@ -21,7 +21,10 @@ function useField(opts) {
   useStore(
     fieldApi.store,
     opts.mode === "array" ? (state) => {
-      return [state.meta, Object.keys(state.value ?? []).length];
+      return [
+        state.meta,
+        Object.keys(state.value ?? []).length
+      ];
     } : void 0
   );
   return fieldApi;

package/dist/esm/useField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldAsyncValidateOrFn,\n  FieldValidateOrFn,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { UseFieldOptions, UseFieldOptionsBound } from './types'\n\ninterface ReactFieldApi<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> {\n  /**\n   * A pre-bound and type-safe sub-field component using this field as a root.\n   */\n  Field: FieldComponent<\n    TParentData,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  >\n}\n\n/**\n * A type representing a hook for using a field in a form with the given form data type.\n *\n * A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field.\n */\nexport type UseField<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n  opts: UseFieldOptionsBound<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>\n\n/**\n * A hook for managing a field in a form.\n * @param opts An object with field options.\n *\n * @returns The `FieldApi` instance for the specified field.\n */\nexport function useField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n>(\n  opts: UseFieldOptions<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  >,\n) {\n  const [fieldApi] = useState(() => {\n    const api = new FieldApi({\n      ...opts,\n      form: opts.form,\n      name: opts.name,\n    })\n\n    const extendedApi: typeof api &\n      ReactFieldApi<\n        TParentData,\n        TFormOnMount,\n        TFormOnChange,\n        TFormOnChangeAsync,\n        TFormOnBlur,\n        TFormOnBlurAsync,\n        TFormOnSubmit,\n        TFormOnSubmitAsync,\n        TFormOnServer,\n        TPatentSubmitMeta\n      > = api as never\n\n    extendedApi.Field = Field as never\n\n    return extendedApi\n  })\n\n  useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    fieldApi.update(opts)\n  })\n\n  useStore(\n    fieldApi.store,\n    opts.mode === 'array'\n      ? (state) => {\n          return [state.meta, Object.keys(state.value ?? []).length]\n        }\n      : undefined,\n  )\n\n  return fieldApi\n}\n\n/**\n * @param children A render function that takes a field API instance and returns a React element.\n */\ninterface FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> extends UseFieldOptions<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  > {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    > &\n      ExtendedApi,\n  ) => ReactNode\n}\n\ninterface FieldComponentBoundProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> extends UseFieldOptionsBound<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync\n  > {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    > &\n      ExtendedApi,\n  ) => ReactNode\n}\n\n/**\n * A type alias representing a field component for a specific form data type.\n */\nexport type FieldComponent<\n  in out TParentData,\n  in out TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnChangeAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnBlurAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnSubmitAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  in out TPatentSubmitMeta,\n  in out ExtendedApi = {},\n> = <\n  const TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentBoundProps<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta,\n  ExtendedApi\n>) => ReactNode\n\n/**\n * A function component that takes field options and a render function as children and returns a React component.\n *\n * The `Field` component uses the `useField` hook internally to manage the field instance.\n */\nexport const Field = (<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentProps<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>): ReactNode => {\n  const fieldApi = useField(fieldOptions as any)\n\n  const jsxToDisplay = useMemo(\n    () => functionalUpdate(children, fieldApi as any),\n    /**\n     * The reason this exists is to fix an issue with the React Compiler.\n     * Namely, functionalUpdate is memoized where it checks for `fieldApi`, which is a static type.\n     * This means that when `state.value` changes, it does not trigger a re-render. The useMemo explicitly fixes this problem\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [children, fieldApi, fieldApi.state.value, fieldApi.state.meta],\n  )\n  return (<>{jsxToDisplay}</>) as never\n}) satisfies FunctionComponent<\n  FieldComponentProps<\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any\n  >\n>\n"],"names":[],"mappings":";;;;;AAqHO,SAAS,SA2Bd,MAqBA;AACA,QAAM,CAAC,QAAQ,IAAI,SAAS,MAAM;AAC1B,UAAA,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cAYA;AAEN,gBAAY,QAAQ;AAEb,WAAA;AAAA,EAAA,CACR;AAED,4BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpD,4BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EAAA,CACrB;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,SAAS,EAAE,EAAE,MAAM;AAAA,IAAA,IAE3D;AAAA,EACN;AAEO,SAAA;AACT;AAoNO,MAAM,QAAS,CA0BpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAoBiB;AACT,QAAA,WAAW,SAAS,YAAmB;AAE7C,QAAM,eAAe;AAAA,IACnB,MAAM,iBAAiB,UAAU,QAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhD,CAAC,UAAU,UAAU,SAAS,MAAM,OAAO,SAAS,MAAM,IAAI;AAAA,EAChE;AACA,yCAAW,UAAa,aAAA,CAAA;AAC1B;"}
+{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldAsyncValidateOrFn,\n  FieldValidateOrFn,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { UseFieldOptions, UseFieldOptionsBound } from './types'\n\ninterface ReactFieldApi<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> {\n  /**\n   * A pre-bound and type-safe sub-field component using this field as a root.\n   */\n  Field: FieldComponent<\n    TParentData,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  >\n}\n\n/**\n * A type representing a hook for using a field in a form with the given form data type.\n *\n * A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field.\n */\nexport type UseField<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n  opts: UseFieldOptionsBound<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>\n\n/**\n * A hook for managing a field in a form.\n * @param opts An object with field options.\n *\n * @returns The `FieldApi` instance for the specified field.\n */\nexport function useField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n>(\n  opts: UseFieldOptions<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  >,\n) {\n  const [fieldApi] = useState(() => {\n    const api = new FieldApi({\n      ...opts,\n      form: opts.form,\n      name: opts.name,\n    })\n\n    const extendedApi: typeof api &\n      ReactFieldApi<\n        TParentData,\n        TFormOnMount,\n        TFormOnChange,\n        TFormOnChangeAsync,\n        TFormOnBlur,\n        TFormOnBlurAsync,\n        TFormOnSubmit,\n        TFormOnSubmitAsync,\n        TFormOnServer,\n        TPatentSubmitMeta\n      > = api as never\n\n    extendedApi.Field = Field as never\n\n    return extendedApi\n  })\n\n  useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    fieldApi.update(opts)\n  })\n\n  useStore(\n    fieldApi.store,\n    opts.mode === 'array'\n      ? (state) => {\n          return [\n            state.meta,\n            Object.keys((state.value as unknown) ?? []).length,\n          ]\n        }\n      : undefined,\n  )\n\n  return fieldApi\n}\n\n/**\n * @param children A render function that takes a field API instance and returns a React element.\n */\ninterface FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> extends UseFieldOptions<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  > {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    > &\n      ExtendedApi,\n  ) => ReactNode\n}\n\ninterface FieldComponentBoundProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> extends UseFieldOptionsBound<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync\n  > {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    > &\n      ExtendedApi,\n  ) => ReactNode\n}\n\n/**\n * A type alias representing a field component for a specific form data type.\n */\nexport type FieldComponent<\n  in out TParentData,\n  in out TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnChangeAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnBlurAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnSubmitAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  in out TPatentSubmitMeta,\n  in out ExtendedApi = {},\n> = <\n  const TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentBoundProps<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta,\n  ExtendedApi\n>) => ReactNode\n\n/**\n * A function component that takes field options and a render function as children and returns a React component.\n *\n * The `Field` component uses the `useField` hook internally to manage the field instance.\n */\nexport const Field = (<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentProps<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>): ReactNode => {\n  const fieldApi = useField(fieldOptions as any)\n\n  const jsxToDisplay = useMemo(\n    () => functionalUpdate(children, fieldApi as any),\n    /**\n     * The reason this exists is to fix an issue with the React Compiler.\n     * Namely, functionalUpdate is memoized where it checks for `fieldApi`, which is a static type.\n     * This means that when `state.value` changes, it does not trigger a re-render. The useMemo explicitly fixes this problem\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [children, fieldApi, fieldApi.state.value, fieldApi.state.meta],\n  )\n  return (<>{jsxToDisplay}</>) as never\n}) satisfies FunctionComponent<\n  FieldComponentProps<\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any\n  >\n>\n"],"names":[],"mappings":";;;;;AAqHO,SAAS,SA2Bd,MAqBA;AACA,QAAM,CAAC,QAAQ,IAAI,SAAS,MAAM;AAC1B,UAAA,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cAYA;AAEN,gBAAY,QAAQ;AAEb,WAAA;AAAA,EAAA,CACR;AAED,4BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpD,4BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EAAA,CACrB;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA;AAAA,QACL,MAAM;AAAA,QACN,OAAO,KAAM,MAAM,SAAqB,CAAE,CAAA,EAAE;AAAA,MAC9C;AAAA,IAAA,IAEF;AAAA,EACN;AAEO,SAAA;AACT;AAoNO,MAAM,QAAS,CA0BpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAoBiB;AACT,QAAA,WAAW,SAAS,YAAmB;AAE7C,QAAM,eAAe;AAAA,IACnB,MAAM,iBAAiB,UAAU,QAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhD,CAAC,UAAU,UAAU,SAAS,MAAM,OAAO,SAAS,MAAM,IAAI;AAAA,EAChE;AACA,yCAAW,UAAa,aAAA,CAAA;AAC1B;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-form",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Powerful, type-safe forms for React.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -67,21 +67,21 @@
     "src"
   ],
   "dependencies": {
-    "@remix-run/node": "^2.16.2",
+    "@remix-run/node": "^2.16.5",
     "@tanstack/react-store": "^0.7.0",
     "decode-formdata": "^0.9.0",
-    "@tanstack/form-core": "1.3.0"
+    "@tanstack/form-core": "1.3.2"
   },
   "devDependencies": {
-    "@tanstack/react-start": "^1.114.29",
+    "@tanstack/react-start": "^1.115.2",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "eslint-plugin-react-compiler": "19.0.0-beta-e552027-20250112",
+    "eslint-plugin-react-compiler": "19.0.0-beta-e993439-20250405",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "vinxi": "^0.5.3",
-    "vite": "^6.2.3"
+    "vinxi": "^0.5.4",
+    "vite": "^6.2.5"
   },
   "peerDependencies": {
     "@tanstack/react-start": "^1.112.0",

package/src/useField.tsx

@@ -204,7 +204,10 @@ export function useField<
     fieldApi.store,
     opts.mode === 'array'
       ? (state) => {
-          return [state.meta, Object.keys(state.value ?? []).length]
+          return [
+            state.meta,
+            Object.keys((state.value as unknown) ?? []).length,
+          ]
         }
       : undefined,
   )