@tanstack/react-form - npm Package Compare versions

Comparing version 1.27.7 to 1.28.0

dist/cjs/createFormHook.cjs

@@ -10,2 +10,11 @@ "use client";
 const formContext = React.createContext(null);
+function useFormContext() {
+  const form = React.useContext(formContext);
+  if (!form) {
+    throw new Error(
+      "`formContext` only works when within a `formComponent` passed to `createFormHook`"
+    );
+  }
+  return form;
+}
 function createFormHookContexts() {
@@ -21,11 +30,2 @@ function useFieldContext() {
   }
-  function useFormContext() {
-    const form = React.useContext(formContext);
-    if (!form) {
-      throw new Error(
-        "`formContext` only works when within a `formComponent` passed to `createFormHook`"
-      );
-    }
-    return form;
-  }
   return { fieldContext, useFieldContext, useFormContext, formContext };
@@ -88,6 +88,11 @@ }
   }
+  function useTypedAppFormContext(_props) {
+    const form = useFormContext();
+    return form;
+  }
   return {
     useAppForm,
     withForm,
-    withFieldGroup
+    withFieldGroup,
+    useTypedAppFormContext
   };
@@ -94,0 +99,0 @@ }

dist/cjs/createFormHook.cjs.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"createFormHook.cjs","sources":["../../src/createFormHook.tsx"],"sourcesContent":["'use client'\n/* eslint-disable @eslint-react/no-context-provider */\nimport { createContext, useContext, useMemo } from 'react'\nimport { useForm } from './useForm'\nimport { useFieldGroup } from './useFieldGroup'\nimport type {\n  AnyFieldApi,\n  AnyFormApi,\n  BaseFormOptions,\n  DeepKeysOfType,\n  FieldApi,\n  FieldsMap,\n  FormAsyncValidateOrFn,\n  FormOptions,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type {\n  ComponentType,\n  Context,\n  FunctionComponent,\n  PropsWithChildren,\n} from 'react'\nimport type { FieldComponent } from './useField'\nimport type { ReactFormExtendedApi } from './useForm'\nimport type { AppFieldExtendedReactFieldGroupApi } from './useFieldGroup'\n\n// We should never hit the `null` case here\nconst fieldContext = createContext<AnyFieldApi>(null as never)\nconst formContext = createContext<AnyFormApi>(null as never)\n\n/**\n * TypeScript inferencing is weird.\n *\n * If you have:\n *\n * @example\n *\n * interface Args<T> {\n *     arg?: T\n * }\n *\n * function test<T>(arg?: Partial<Args<T>>): T {\n *     return 0 as any;\n * }\n *\n * const a = test({});\n *\n * Then `T` will default to `unknown`.\n *\n * However, if we change `test` to be:\n *\n * @example\n *\n * function test<T extends undefined>(arg?: Partial<Args<T>>): T;\n *\n * Then `T` becomes `undefined`.\n *\n * Here, we are checking if the passed type `T` extends `DefaultT` and **only**\n * `DefaultT`, as if that's the case we assume that inferencing has not occurred.\n */\ntype UnwrapOrAny<T> = [unknown] extends [T] ? any : T\ntype UnwrapDefaultOrAny<DefaultT, T> = [DefaultT] extends [T]\n  ? [T] extends [DefaultT]\n    ? any\n    : T\n  : T\n\nexport function createFormHookContexts() {\n  function useFieldContext<TData>() {\n    const field = useContext(fieldContext)\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (!field) {\n      throw new Error(\n        '`fieldContext` only works when within a `fieldComponent` passed to `createFormHook`',\n      )\n    }\n\n    return field as FieldApi<\n      any,\n      string,\n      TData,\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      any\n    >\n  }\n\n  function useFormContext() {\n    const form = useContext(formContext)\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (!form) {\n      throw new Error(\n        '`formContext` only works when within a `formComponent` passed to `createFormHook`',\n      )\n    }\n\n    return form as ReactFormExtendedApi<\n      // If you need access to the form data, you need to use `withForm` instead\n      Record<string, never>,\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\n  return { fieldContext, useFieldContext, useFormContext, formContext }\n}\n\ninterface CreateFormHookProps<\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n> {\n  fieldComponents: TFieldComponents\n  fieldContext: Context<AnyFieldApi>\n  formComponents: TFormComponents\n  formContext: Context<AnyFormApi>\n}\n\n/**\n * @private\n */\nexport type AppFieldExtendedReactFormApi<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n> = ReactFormExtendedApi<\n  TFormData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta\n> &\n  NoInfer<TFormComponents> & {\n    AppField: FieldComponent<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta,\n      NoInfer<TFieldComponents>\n    >\n    AppForm: ComponentType<\n      // PropsWithChildren<P> is not optional in React 17\n      PropsWithChildren<{}>\n    >\n  }\n\nexport interface WithFormProps<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n  TRenderProps extends object = Record<string, never>,\n> extends FormOptions<\n  TFormData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta\n> {\n  // Optional, but adds props to the `render` function outside of `form`\n  props?: TRenderProps\n  render: FunctionComponent<\n    PropsWithChildren<\n      NoInfer<TRenderProps> & {\n        form: AppFieldExtendedReactFormApi<\n          TFormData,\n          TOnMount,\n          TOnChange,\n          TOnChangeAsync,\n          TOnBlur,\n          TOnBlurAsync,\n          TOnSubmit,\n          TOnSubmitAsync,\n          TOnDynamic,\n          TOnDynamicAsync,\n          TOnServer,\n          TSubmitMeta,\n          TFieldComponents,\n          TFormComponents\n        >\n      }\n    >\n  >\n}\n\nexport interface WithFieldGroupProps<\n  TFieldGroupData,\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n  TSubmitMeta,\n  TRenderProps extends object = Record<string, never>,\n> extends BaseFormOptions<TFieldGroupData, TSubmitMeta> {\n  // Optional, but adds props to the `render` function outside of `form`\n  props?: TRenderProps\n  render: FunctionComponent<\n    PropsWithChildren<\n      NoInfer<TRenderProps> & {\n        group: AppFieldExtendedReactFieldGroupApi<\n          unknown,\n          TFieldGroupData,\n          string | FieldsMap<unknown, TFieldGroupData>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          // this types it as 'never' in the render prop. It should prevent any\n          // untyped meta passed to the handleSubmit by accident.\n          unknown extends TSubmitMeta ? never : TSubmitMeta,\n          TFieldComponents,\n          TFormComponents\n        >\n      }\n    >\n  >\n}\n\nexport function createFormHook<\n  const TComponents extends Record<string, ComponentType<any>>,\n  const TFormComponents extends Record<string, ComponentType<any>>,\n>({\n  fieldComponents,\n  fieldContext,\n  formContext,\n  formComponents,\n}: CreateFormHookProps<TComponents, TFormComponents>) {\n  function useAppForm<\n    TFormData,\n    TOnMount extends undefined | FormValidateOrFn<TFormData>,\n    TOnChange extends undefined | FormValidateOrFn<TFormData>,\n    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TSubmitMeta,\n  >(\n    props: FormOptions<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta\n    >,\n  ): AppFieldExtendedReactFormApi<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta,\n    TComponents,\n    TFormComponents\n  > {\n    const form = useForm(props)\n\n    // PropsWithChildren<P> is not optional in React 17\n    const AppForm = useMemo<ComponentType<PropsWithChildren<{}>>>(() => {\n      return ({ children }) => {\n        return (\n          <formContext.Provider value={form}>{children}</formContext.Provider>\n        )\n      }\n    }, [form])\n\n    const AppField = useMemo(() => {\n      const AppField = (({ children, ...props }) => {\n        return (\n          <form.Field {...props}>\n            {(field) => (\n              // eslint-disable-next-line @eslint-react/no-context-provider\n              <fieldContext.Provider value={field}>\n                {children(Object.assign(field, fieldComponents))}\n              </fieldContext.Provider>\n            )}\n          </form.Field>\n        )\n      }) as FieldComponent<\n        TFormData,\n        TOnMount,\n        TOnChange,\n        TOnChangeAsync,\n        TOnBlur,\n        TOnBlurAsync,\n        TOnSubmit,\n        TOnSubmitAsync,\n        TOnDynamic,\n        TOnDynamicAsync,\n        TOnServer,\n        TSubmitMeta,\n        TComponents\n      >\n      return AppField\n    }, [form])\n\n    const extendedForm = useMemo(() => {\n      return Object.assign(form, {\n        AppField,\n        AppForm,\n        ...formComponents,\n      })\n    }, [form, AppField, AppForm])\n\n    return extendedForm\n  }\n\n  function withForm<\n    TFormData,\n    TOnMount extends undefined | FormValidateOrFn<TFormData>,\n    TOnChange extends undefined | FormValidateOrFn<TFormData>,\n    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TSubmitMeta,\n    TRenderProps extends object = {},\n  >({\n    render,\n    props,\n  }: WithFormProps<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta,\n    TComponents,\n    TFormComponents,\n    TRenderProps\n  >): WithFormProps<\n    UnwrapOrAny<TFormData>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnMount>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChange>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChangeAsync>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlur>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlurAsync>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmit>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnDynamic>,\n    UnwrapDefaultOrAny<\n      undefined | FormValidateOrFn<TFormData>,\n      TOnDynamicAsync\n    >,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnServer>,\n    UnwrapOrAny<TSubmitMeta>,\n    UnwrapOrAny<TComponents>,\n    UnwrapOrAny<TFormComponents>,\n    UnwrapOrAny<TRenderProps>\n  >['render'] {\n    return (innerProps) => render({ ...props, ...innerProps })\n  }\n\n  function withFieldGroup<\n    TFieldGroupData,\n    TSubmitMeta,\n    TRenderProps extends object = {},\n  >({\n    render,\n    props,\n    defaultValues,\n  }: WithFieldGroupProps<\n    TFieldGroupData,\n    TComponents,\n    TFormComponents,\n    TSubmitMeta,\n    TRenderProps\n  >): <\n    TFormData,\n    TFields extends\n      | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>\n      | FieldsMap<TFormData, TFieldGroupData>,\n    TOnMount extends undefined | FormValidateOrFn<TFormData>,\n    TOnChange extends undefined | FormValidateOrFn<TFormData>,\n    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TFormSubmitMeta,\n  >(\n    params: PropsWithChildren<\n      NoInfer<TRenderProps> & {\n        form:\n          | AppFieldExtendedReactFormApi<\n              TFormData,\n              TOnMount,\n              TOnChange,\n              TOnChangeAsync,\n              TOnBlur,\n              TOnBlurAsync,\n              TOnSubmit,\n              TOnSubmitAsync,\n              TOnDynamic,\n              TOnDynamicAsync,\n              TOnServer,\n              unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta,\n              TComponents,\n              TFormComponents\n            >\n          | AppFieldExtendedReactFieldGroupApi<\n              // Since this only occurs if you nest it within other field groups, it can be more\n              // lenient with the types.\n              unknown,\n              TFormData,\n              string | FieldsMap<unknown, TFormData>,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta,\n              TComponents,\n              TFormComponents\n            >\n        fields: TFields\n      }\n    >,\n  ) => ReturnType<FunctionComponent> {\n    return function Render(innerProps) {\n      const fieldGroupProps = useMemo(() => {\n        return {\n          form: innerProps.form,\n          fields: innerProps.fields,\n          defaultValues,\n          formComponents,\n        }\n      }, [innerProps.form, innerProps.fields])\n      const fieldGroupApi = useFieldGroup(fieldGroupProps as any)\n\n      return render({ ...props, ...innerProps, group: fieldGroupApi as any })\n    }\n  }\n\n  return {\n    useAppForm,\n    withForm,\n    withFieldGroup,\n  }\n}\n"],"names":["fieldContext","formContext","AppField"],"mappings":";;;;;;;AA2BA;AACA;AAuCO;AACL;AACE;AAGA;AACE;AAAU;AACR;AAAA;AAIJ;AAAO;AA2BT;AACE;AAGA;AACE;AAAU;AACR;AAAA;AAIJ;AAAO;AAiBT;AACF;AA+JO;AAGL;AACA;AACAA;AACAC;AAEF;AACE;AA4CE;AAGA;AACE;AACE;AAC+C;AAEjD;AAGF;AACE;AACE;AAEM;AAAA;AAIA;AAEJ;AAiBJ;AAAOC;AAGT;AACE;AAA2B;AACzB;AACA;AACG;AACJ;AAGH;AAAO;AAGT;AAcE;AACA;AACA;AAqCA;AAAyD;AAG3D;AAIE;AACA;AACA;AACA;AAmEA;AACE;AACE;AAAO;AACY;AACE;AACnB;AACA;AAAA;AAGJ;AAEA;AAAsE;AACxE;AAGF;AAAO;AACL;AACA;AACA;AAEJ;;;"}
+{"version":3,"file":"createFormHook.cjs","sources":["../../src/createFormHook.tsx"],"sourcesContent":["'use client'\n/* eslint-disable @eslint-react/no-context-provider */\nimport { createContext, useContext, useMemo } from 'react'\nimport { useForm } from './useForm'\nimport { useFieldGroup } from './useFieldGroup'\nimport type {\n  AnyFieldApi,\n  AnyFormApi,\n  BaseFormOptions,\n  DeepKeysOfType,\n  FieldApi,\n  FieldsMap,\n  FormAsyncValidateOrFn,\n  FormOptions,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type {\n  ComponentType,\n  Context,\n  FunctionComponent,\n  PropsWithChildren,\n} from 'react'\nimport type { FieldComponent } from './useField'\nimport type { ReactFormExtendedApi } from './useForm'\nimport type { AppFieldExtendedReactFieldGroupApi } from './useFieldGroup'\n\n// We should never hit the `null` case here\nconst fieldContext = createContext<AnyFieldApi>(null as never)\nconst formContext = createContext<AnyFormApi>(null as never)\n\n/**\n * TypeScript inferencing is weird.\n *\n * If you have:\n *\n * @example\n *\n * interface Args<T> {\n *     arg?: T\n * }\n *\n * function test<T>(arg?: Partial<Args<T>>): T {\n *     return 0 as any;\n * }\n *\n * const a = test({});\n *\n * Then `T` will default to `unknown`.\n *\n * However, if we change `test` to be:\n *\n * @example\n *\n * function test<T extends undefined>(arg?: Partial<Args<T>>): T;\n *\n * Then `T` becomes `undefined`.\n *\n * Here, we are checking if the passed type `T` extends `DefaultT` and **only**\n * `DefaultT`, as if that's the case we assume that inferencing has not occurred.\n */\ntype UnwrapOrAny<T> = [unknown] extends [T] ? any : T\ntype UnwrapDefaultOrAny<DefaultT, T> = [DefaultT] extends [T]\n  ? [T] extends [DefaultT]\n    ? any\n    : T\n  : T\n\nfunction useFormContext() {\n  const form = useContext(formContext)\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  if (!form) {\n    throw new Error(\n      '`formContext` only works when within a `formComponent` passed to `createFormHook`',\n    )\n  }\n\n  return form as ReactFormExtendedApi<\n    // If you need access to the form data, you need to use `withForm` instead\n    Record<string, never>,\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\nexport function createFormHookContexts() {\n  function useFieldContext<TData>() {\n    const field = useContext(fieldContext)\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (!field) {\n      throw new Error(\n        '`fieldContext` only works when within a `fieldComponent` passed to `createFormHook`',\n      )\n    }\n\n    return field as FieldApi<\n      any,\n      string,\n      TData,\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      any\n    >\n  }\n\n  return { fieldContext, useFieldContext, useFormContext, formContext }\n}\n\ninterface CreateFormHookProps<\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n> {\n  fieldComponents: TFieldComponents\n  fieldContext: Context<AnyFieldApi>\n  formComponents: TFormComponents\n  formContext: Context<AnyFormApi>\n}\n\n/**\n * @private\n */\nexport type AppFieldExtendedReactFormApi<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n> = ReactFormExtendedApi<\n  TFormData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta\n> &\n  NoInfer<TFormComponents> & {\n    AppField: FieldComponent<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta,\n      NoInfer<TFieldComponents>\n    >\n    AppForm: ComponentType<\n      // PropsWithChildren<P> is not optional in React 17\n      PropsWithChildren<{}>\n    >\n  }\n\nexport interface WithFormProps<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n  TRenderProps extends object = Record<string, never>,\n> extends FormOptions<\n  TFormData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta\n> {\n  // Optional, but adds props to the `render` function outside of `form`\n  props?: TRenderProps\n  render: FunctionComponent<\n    PropsWithChildren<\n      NoInfer<TRenderProps> & {\n        form: AppFieldExtendedReactFormApi<\n          TFormData,\n          TOnMount,\n          TOnChange,\n          TOnChangeAsync,\n          TOnBlur,\n          TOnBlurAsync,\n          TOnSubmit,\n          TOnSubmitAsync,\n          TOnDynamic,\n          TOnDynamicAsync,\n          TOnServer,\n          TSubmitMeta,\n          TFieldComponents,\n          TFormComponents\n        >\n      }\n    >\n  >\n}\n\nexport interface WithFieldGroupProps<\n  TFieldGroupData,\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n  TSubmitMeta,\n  TRenderProps extends object = Record<string, never>,\n> extends BaseFormOptions<TFieldGroupData, TSubmitMeta> {\n  // Optional, but adds props to the `render` function outside of `form`\n  props?: TRenderProps\n  render: FunctionComponent<\n    PropsWithChildren<\n      NoInfer<TRenderProps> & {\n        group: AppFieldExtendedReactFieldGroupApi<\n          unknown,\n          TFieldGroupData,\n          string | FieldsMap<unknown, TFieldGroupData>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          // this types it as 'never' in the render prop. It should prevent any\n          // untyped meta passed to the handleSubmit by accident.\n          unknown extends TSubmitMeta ? never : TSubmitMeta,\n          TFieldComponents,\n          TFormComponents\n        >\n      }\n    >\n  >\n}\n\nexport function createFormHook<\n  const TComponents extends Record<string, ComponentType<any>>,\n  const TFormComponents extends Record<string, ComponentType<any>>,\n>({\n  fieldComponents,\n  fieldContext,\n  formContext,\n  formComponents,\n}: CreateFormHookProps<TComponents, TFormComponents>) {\n  function useAppForm<\n    TFormData,\n    TOnMount extends undefined | FormValidateOrFn<TFormData>,\n    TOnChange extends undefined | FormValidateOrFn<TFormData>,\n    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TSubmitMeta,\n  >(\n    props: FormOptions<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta\n    >,\n  ): AppFieldExtendedReactFormApi<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta,\n    TComponents,\n    TFormComponents\n  > {\n    const form = useForm(props)\n\n    // PropsWithChildren<P> is not optional in React 17\n    const AppForm = useMemo<ComponentType<PropsWithChildren<{}>>>(() => {\n      return ({ children }) => {\n        return (\n          <formContext.Provider value={form}>{children}</formContext.Provider>\n        )\n      }\n    }, [form])\n\n    const AppField = useMemo(() => {\n      const AppField = (({ children, ...props }) => {\n        return (\n          <form.Field {...props}>\n            {(field) => (\n              // eslint-disable-next-line @eslint-react/no-context-provider\n              <fieldContext.Provider value={field}>\n                {children(Object.assign(field, fieldComponents))}\n              </fieldContext.Provider>\n            )}\n          </form.Field>\n        )\n      }) as FieldComponent<\n        TFormData,\n        TOnMount,\n        TOnChange,\n        TOnChangeAsync,\n        TOnBlur,\n        TOnBlurAsync,\n        TOnSubmit,\n        TOnSubmitAsync,\n        TOnDynamic,\n        TOnDynamicAsync,\n        TOnServer,\n        TSubmitMeta,\n        TComponents\n      >\n      return AppField\n    }, [form])\n\n    const extendedForm = useMemo(() => {\n      return Object.assign(form, {\n        AppField,\n        AppForm,\n        ...formComponents,\n      })\n    }, [form, AppField, AppForm])\n\n    return extendedForm\n  }\n\n  function withForm<\n    TFormData,\n    TOnMount extends undefined | FormValidateOrFn<TFormData>,\n    TOnChange extends undefined | FormValidateOrFn<TFormData>,\n    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TSubmitMeta,\n    TRenderProps extends object = {},\n  >({\n    render,\n    props,\n  }: WithFormProps<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta,\n    TComponents,\n    TFormComponents,\n    TRenderProps\n  >): WithFormProps<\n    UnwrapOrAny<TFormData>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnMount>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChange>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChangeAsync>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlur>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlurAsync>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmit>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnDynamic>,\n    UnwrapDefaultOrAny<\n      undefined | FormValidateOrFn<TFormData>,\n      TOnDynamicAsync\n    >,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnServer>,\n    UnwrapOrAny<TSubmitMeta>,\n    UnwrapOrAny<TComponents>,\n    UnwrapOrAny<TFormComponents>,\n    UnwrapOrAny<TRenderProps>\n  >['render'] {\n    return (innerProps) => render({ ...props, ...innerProps })\n  }\n\n  function withFieldGroup<\n    TFieldGroupData,\n    TSubmitMeta,\n    TRenderProps extends object = {},\n  >({\n    render,\n    props,\n    defaultValues,\n  }: WithFieldGroupProps<\n    TFieldGroupData,\n    TComponents,\n    TFormComponents,\n    TSubmitMeta,\n    TRenderProps\n  >): <\n    TFormData,\n    TFields extends\n      | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>\n      | FieldsMap<TFormData, TFieldGroupData>,\n    TOnMount extends undefined | FormValidateOrFn<TFormData>,\n    TOnChange extends undefined | FormValidateOrFn<TFormData>,\n    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TFormSubmitMeta,\n  >(\n    params: PropsWithChildren<\n      NoInfer<TRenderProps> & {\n        form:\n          | AppFieldExtendedReactFormApi<\n              TFormData,\n              TOnMount,\n              TOnChange,\n              TOnChangeAsync,\n              TOnBlur,\n              TOnBlurAsync,\n              TOnSubmit,\n              TOnSubmitAsync,\n              TOnDynamic,\n              TOnDynamicAsync,\n              TOnServer,\n              unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta,\n              TComponents,\n              TFormComponents\n            >\n          | AppFieldExtendedReactFieldGroupApi<\n              // Since this only occurs if you nest it within other field groups, it can be more\n              // lenient with the types.\n              unknown,\n              TFormData,\n              string | FieldsMap<unknown, TFormData>,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta,\n              TComponents,\n              TFormComponents\n            >\n        fields: TFields\n      }\n    >,\n  ) => ReturnType<FunctionComponent> {\n    return function Render(innerProps) {\n      const fieldGroupProps = useMemo(() => {\n        return {\n          form: innerProps.form,\n          fields: innerProps.fields,\n          defaultValues,\n          formComponents,\n        }\n      }, [innerProps.form, innerProps.fields])\n      const fieldGroupApi = useFieldGroup(fieldGroupProps as any)\n\n      return render({ ...props, ...innerProps, group: fieldGroupApi as any })\n    }\n  }\n\n  /**\n   * ⚠️ **Use withForm whenever possible.**\n   *\n   * Gets a typed form from the `<form.AppForm />` context.\n   */\n  function useTypedAppFormContext<\n    TFormData,\n    TOnMount extends undefined | FormValidateOrFn<TFormData>,\n    TOnChange extends undefined | FormValidateOrFn<TFormData>,\n    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TSubmitMeta,\n  >(\n    _props: FormOptions<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta\n    >,\n  ): AppFieldExtendedReactFormApi<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta,\n    TComponents,\n    TFormComponents\n  > {\n    const form = useFormContext()\n\n    return form as never\n  }\n\n  return {\n    useAppForm,\n    withForm,\n    withFieldGroup,\n    useTypedAppFormContext,\n  }\n}\n"],"names":["fieldContext","formContext","AppField"],"mappings":";;;;;;;AA2BA;AACA;AAuCA;AACE;AAGA;AACE;AAAU;AACR;AAAA;AAIJ;AAeF;AAEO;AACL;AACE;AAGA;AACE;AAAU;AACR;AAAA;AAIJ;AAAO;AA2BT;AACF;AA+JO;AAGL;AACA;AACAA;AACAC;AAEF;AACE;AA4CE;AAGA;AACE;AACE;AAC+C;AAEjD;AAGF;AACE;AACE;AAEM;AAAA;AAIA;AAEJ;AAiBJ;AAAOC;AAGT;AACE;AAA2B;AACzB;AACA;AACG;AACJ;AAGH;AAAO;AAGT;AAcE;AACA;AACA;AAqCA;AAAyD;AAG3D;AAIE;AACA;AACA;AACA;AAmEA;AACE;AACE;AAAO;AACY;AACE;AACnB;AACA;AAAA;AAGJ;AAEA;AAAsE;AACxE;AAQF;AA4CE;AAEA;AAAO;AAGT;AAAO;AACL;AACA;AACA;AACA;AAEJ;;;"}

dist/cjs/createFormHook.d.cts

@@ -38,6 +38,7 @@ import { AnyFieldApi, AnyFormApi, BaseFormOptions, DeepKeysOfType, FieldApi, FieldsMap, FormAsyncValidateOrFn, FormOptions, FormValidateOrFn } from '@tanstack/form-core';
 type UnwrapDefaultOrAny<DefaultT, T> = [DefaultT] extends [T] ? [T] extends [DefaultT] ? any : T : T;
+declare function useFormContext(): ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
 export declare function createFormHookContexts(): {
     fieldContext: Context<AnyFieldApi>;
     useFieldContext: <TData>() => FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
-    useFormContext: () => ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
+    useFormContext: typeof useFormContext;
     formContext: Context<AnyFormApi>;
@@ -77,3 +78,4 @@ };
     }>) => ReturnType<FunctionComponent>;
+    useTypedAppFormContext: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta>(_props: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>;
 };
 export {};

dist/esm/createFormHook.d.ts

@@ -38,6 +38,7 @@ import { AnyFieldApi, AnyFormApi, BaseFormOptions, DeepKeysOfType, FieldApi, FieldsMap, FormAsyncValidateOrFn, FormOptions, FormValidateOrFn } from '@tanstack/form-core';
 type UnwrapDefaultOrAny<DefaultT, T> = [DefaultT] extends [T] ? [T] extends [DefaultT] ? any : T : T;
+declare function useFormContext(): ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
 export declare function createFormHookContexts(): {
     fieldContext: Context<AnyFieldApi>;
     useFieldContext: <TData>() => FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
-    useFormContext: () => ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
+    useFormContext: typeof useFormContext;
     formContext: Context<AnyFormApi>;
@@ -77,3 +78,4 @@ };
     }>) => ReturnType<FunctionComponent>;
+    useTypedAppFormContext: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta>(_props: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>;
 };
 export {};

dist/esm/createFormHook.js

@@ -8,2 +8,11 @@ "use client";
 const formContext = createContext(null);
+function useFormContext() {
+  const form = useContext(formContext);
+  if (!form) {
+    throw new Error(
+      "`formContext` only works when within a `formComponent` passed to `createFormHook`"
+    );
+  }
+  return form;
+}
 function createFormHookContexts() {
@@ -19,11 +28,2 @@ function useFieldContext() {
   }
-  function useFormContext() {
-    const form = useContext(formContext);
-    if (!form) {
-      throw new Error(
-        "`formContext` only works when within a `formComponent` passed to `createFormHook`"
-      );
-    }
-    return form;
-  }
   return { fieldContext, useFieldContext, useFormContext, formContext };
@@ -86,6 +86,11 @@ }
   }
+  function useTypedAppFormContext(_props) {
+    const form = useFormContext();
+    return form;
+  }
   return {
     useAppForm,
     withForm,
-    withFieldGroup
+    withFieldGroup,
+    useTypedAppFormContext
   };
@@ -92,0 +97,0 @@ }

dist/esm/createFormHook.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"createFormHook.js","sources":["../../src/createFormHook.tsx"],"sourcesContent":["'use client'\n/* eslint-disable @eslint-react/no-context-provider */\nimport { createContext, useContext, useMemo } from 'react'\nimport { useForm } from './useForm'\nimport { useFieldGroup } from './useFieldGroup'\nimport type {\n  AnyFieldApi,\n  AnyFormApi,\n  BaseFormOptions,\n  DeepKeysOfType,\n  FieldApi,\n  FieldsMap,\n  FormAsyncValidateOrFn,\n  FormOptions,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type {\n  ComponentType,\n  Context,\n  FunctionComponent,\n  PropsWithChildren,\n} from 'react'\nimport type { FieldComponent } from './useField'\nimport type { ReactFormExtendedApi } from './useForm'\nimport type { AppFieldExtendedReactFieldGroupApi } from './useFieldGroup'\n\n// We should never hit the `null` case here\nconst fieldContext = createContext<AnyFieldApi>(null as never)\nconst formContext = createContext<AnyFormApi>(null as never)\n\n/**\n * TypeScript inferencing is weird.\n *\n * If you have:\n *\n * @example\n *\n * interface Args<T> {\n *     arg?: T\n * }\n *\n * function test<T>(arg?: Partial<Args<T>>): T {\n *     return 0 as any;\n * }\n *\n * const a = test({});\n *\n * Then `T` will default to `unknown`.\n *\n * However, if we change `test` to be:\n *\n * @example\n *\n * function test<T extends undefined>(arg?: Partial<Args<T>>): T;\n *\n * Then `T` becomes `undefined`.\n *\n * Here, we are checking if the passed type `T` extends `DefaultT` and **only**\n * `DefaultT`, as if that's the case we assume that inferencing has not occurred.\n */\ntype UnwrapOrAny<T> = [unknown] extends [T] ? any : T\ntype UnwrapDefaultOrAny<DefaultT, T> = [DefaultT] extends [T]\n  ? [T] extends [DefaultT]\n    ? any\n    : T\n  : T\n\nexport function createFormHookContexts() {\n  function useFieldContext<TData>() {\n    const field = useContext(fieldContext)\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (!field) {\n      throw new Error(\n        '`fieldContext` only works when within a `fieldComponent` passed to `createFormHook`',\n      )\n    }\n\n    return field as FieldApi<\n      any,\n      string,\n      TData,\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      any\n    >\n  }\n\n  function useFormContext() {\n    const form = useContext(formContext)\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (!form) {\n      throw new Error(\n        '`formContext` only works when within a `formComponent` passed to `createFormHook`',\n      )\n    }\n\n    return form as ReactFormExtendedApi<\n      // If you need access to the form data, you need to use `withForm` instead\n      Record<string, never>,\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\n  return { fieldContext, useFieldContext, useFormContext, formContext }\n}\n\ninterface CreateFormHookProps<\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n> {\n  fieldComponents: TFieldComponents\n  fieldContext: Context<AnyFieldApi>\n  formComponents: TFormComponents\n  formContext: Context<AnyFormApi>\n}\n\n/**\n * @private\n */\nexport type AppFieldExtendedReactFormApi<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n> = ReactFormExtendedApi<\n  TFormData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta\n> &\n  NoInfer<TFormComponents> & {\n    AppField: FieldComponent<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta,\n      NoInfer<TFieldComponents>\n    >\n    AppForm: ComponentType<\n      // PropsWithChildren<P> is not optional in React 17\n      PropsWithChildren<{}>\n    >\n  }\n\nexport interface WithFormProps<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n  TRenderProps extends object = Record<string, never>,\n> extends FormOptions<\n  TFormData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta\n> {\n  // Optional, but adds props to the `render` function outside of `form`\n  props?: TRenderProps\n  render: FunctionComponent<\n    PropsWithChildren<\n      NoInfer<TRenderProps> & {\n        form: AppFieldExtendedReactFormApi<\n          TFormData,\n          TOnMount,\n          TOnChange,\n          TOnChangeAsync,\n          TOnBlur,\n          TOnBlurAsync,\n          TOnSubmit,\n          TOnSubmitAsync,\n          TOnDynamic,\n          TOnDynamicAsync,\n          TOnServer,\n          TSubmitMeta,\n          TFieldComponents,\n          TFormComponents\n        >\n      }\n    >\n  >\n}\n\nexport interface WithFieldGroupProps<\n  TFieldGroupData,\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n  TSubmitMeta,\n  TRenderProps extends object = Record<string, never>,\n> extends BaseFormOptions<TFieldGroupData, TSubmitMeta> {\n  // Optional, but adds props to the `render` function outside of `form`\n  props?: TRenderProps\n  render: FunctionComponent<\n    PropsWithChildren<\n      NoInfer<TRenderProps> & {\n        group: AppFieldExtendedReactFieldGroupApi<\n          unknown,\n          TFieldGroupData,\n          string | FieldsMap<unknown, TFieldGroupData>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          // this types it as 'never' in the render prop. It should prevent any\n          // untyped meta passed to the handleSubmit by accident.\n          unknown extends TSubmitMeta ? never : TSubmitMeta,\n          TFieldComponents,\n          TFormComponents\n        >\n      }\n    >\n  >\n}\n\nexport function createFormHook<\n  const TComponents extends Record<string, ComponentType<any>>,\n  const TFormComponents extends Record<string, ComponentType<any>>,\n>({\n  fieldComponents,\n  fieldContext,\n  formContext,\n  formComponents,\n}: CreateFormHookProps<TComponents, TFormComponents>) {\n  function useAppForm<\n    TFormData,\n    TOnMount extends undefined | FormValidateOrFn<TFormData>,\n    TOnChange extends undefined | FormValidateOrFn<TFormData>,\n    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TSubmitMeta,\n  >(\n    props: FormOptions<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta\n    >,\n  ): AppFieldExtendedReactFormApi<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta,\n    TComponents,\n    TFormComponents\n  > {\n    const form = useForm(props)\n\n    // PropsWithChildren<P> is not optional in React 17\n    const AppForm = useMemo<ComponentType<PropsWithChildren<{}>>>(() => {\n      return ({ children }) => {\n        return (\n          <formContext.Provider value={form}>{children}</formContext.Provider>\n        )\n      }\n    }, [form])\n\n    const AppField = useMemo(() => {\n      const AppField = (({ children, ...props }) => {\n        return (\n          <form.Field {...props}>\n            {(field) => (\n              // eslint-disable-next-line @eslint-react/no-context-provider\n              <fieldContext.Provider value={field}>\n                {children(Object.assign(field, fieldComponents))}\n              </fieldContext.Provider>\n            )}\n          </form.Field>\n        )\n      }) as FieldComponent<\n        TFormData,\n        TOnMount,\n        TOnChange,\n        TOnChangeAsync,\n        TOnBlur,\n        TOnBlurAsync,\n        TOnSubmit,\n        TOnSubmitAsync,\n        TOnDynamic,\n        TOnDynamicAsync,\n        TOnServer,\n        TSubmitMeta,\n        TComponents\n      >\n      return AppField\n    }, [form])\n\n    const extendedForm = useMemo(() => {\n      return Object.assign(form, {\n        AppField,\n        AppForm,\n        ...formComponents,\n      })\n    }, [form, AppField, AppForm])\n\n    return extendedForm\n  }\n\n  function withForm<\n    TFormData,\n    TOnMount extends undefined | FormValidateOrFn<TFormData>,\n    TOnChange extends undefined | FormValidateOrFn<TFormData>,\n    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TSubmitMeta,\n    TRenderProps extends object = {},\n  >({\n    render,\n    props,\n  }: WithFormProps<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta,\n    TComponents,\n    TFormComponents,\n    TRenderProps\n  >): WithFormProps<\n    UnwrapOrAny<TFormData>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnMount>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChange>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChangeAsync>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlur>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlurAsync>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmit>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnDynamic>,\n    UnwrapDefaultOrAny<\n      undefined | FormValidateOrFn<TFormData>,\n      TOnDynamicAsync\n    >,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnServer>,\n    UnwrapOrAny<TSubmitMeta>,\n    UnwrapOrAny<TComponents>,\n    UnwrapOrAny<TFormComponents>,\n    UnwrapOrAny<TRenderProps>\n  >['render'] {\n    return (innerProps) => render({ ...props, ...innerProps })\n  }\n\n  function withFieldGroup<\n    TFieldGroupData,\n    TSubmitMeta,\n    TRenderProps extends object = {},\n  >({\n    render,\n    props,\n    defaultValues,\n  }: WithFieldGroupProps<\n    TFieldGroupData,\n    TComponents,\n    TFormComponents,\n    TSubmitMeta,\n    TRenderProps\n  >): <\n    TFormData,\n    TFields extends\n      | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>\n      | FieldsMap<TFormData, TFieldGroupData>,\n    TOnMount extends undefined | FormValidateOrFn<TFormData>,\n    TOnChange extends undefined | FormValidateOrFn<TFormData>,\n    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TFormSubmitMeta,\n  >(\n    params: PropsWithChildren<\n      NoInfer<TRenderProps> & {\n        form:\n          | AppFieldExtendedReactFormApi<\n              TFormData,\n              TOnMount,\n              TOnChange,\n              TOnChangeAsync,\n              TOnBlur,\n              TOnBlurAsync,\n              TOnSubmit,\n              TOnSubmitAsync,\n              TOnDynamic,\n              TOnDynamicAsync,\n              TOnServer,\n              unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta,\n              TComponents,\n              TFormComponents\n            >\n          | AppFieldExtendedReactFieldGroupApi<\n              // Since this only occurs if you nest it within other field groups, it can be more\n              // lenient with the types.\n              unknown,\n              TFormData,\n              string | FieldsMap<unknown, TFormData>,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta,\n              TComponents,\n              TFormComponents\n            >\n        fields: TFields\n      }\n    >,\n  ) => ReturnType<FunctionComponent> {\n    return function Render(innerProps) {\n      const fieldGroupProps = useMemo(() => {\n        return {\n          form: innerProps.form,\n          fields: innerProps.fields,\n          defaultValues,\n          formComponents,\n        }\n      }, [innerProps.form, innerProps.fields])\n      const fieldGroupApi = useFieldGroup(fieldGroupProps as any)\n\n      return render({ ...props, ...innerProps, group: fieldGroupApi as any })\n    }\n  }\n\n  return {\n    useAppForm,\n    withForm,\n    withFieldGroup,\n  }\n}\n"],"names":["fieldContext","formContext","AppField"],"mappings":";;;;;AA2BA;AACA;AAuCO;AACL;AACE;AAGA;AACE;AAAU;AACR;AAAA;AAIJ;AAAO;AA2BT;AACE;AAGA;AACE;AAAU;AACR;AAAA;AAIJ;AAAO;AAiBT;AACF;AA+JO;AAGL;AACA;AACAA;AACAC;AAEF;AACE;AA4CE;AAGA;AACE;AACE;AAC+C;AAEjD;AAGF;AACE;AACE;AAEM;AAAA;AAIA;AAEJ;AAiBJ;AAAOC;AAGT;AACE;AAA2B;AACzB;AACA;AACG;AACJ;AAGH;AAAO;AAGT;AAcE;AACA;AACA;AAqCA;AAAyD;AAG3D;AAIE;AACA;AACA;AACA;AAmEA;AACE;AACE;AAAO;AACY;AACE;AACnB;AACA;AAAA;AAGJ;AAEA;AAAsE;AACxE;AAGF;AAAO;AACL;AACA;AACA;AAEJ;;;;;"}
+{"version":3,"file":"createFormHook.js","sources":["../../src/createFormHook.tsx"],"sourcesContent":["'use client'\n/* eslint-disable @eslint-react/no-context-provider */\nimport { createContext, useContext, useMemo } from 'react'\nimport { useForm } from './useForm'\nimport { useFieldGroup } from './useFieldGroup'\nimport type {\n  AnyFieldApi,\n  AnyFormApi,\n  BaseFormOptions,\n  DeepKeysOfType,\n  FieldApi,\n  FieldsMap,\n  FormAsyncValidateOrFn,\n  FormOptions,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type {\n  ComponentType,\n  Context,\n  FunctionComponent,\n  PropsWithChildren,\n} from 'react'\nimport type { FieldComponent } from './useField'\nimport type { ReactFormExtendedApi } from './useForm'\nimport type { AppFieldExtendedReactFieldGroupApi } from './useFieldGroup'\n\n// We should never hit the `null` case here\nconst fieldContext = createContext<AnyFieldApi>(null as never)\nconst formContext = createContext<AnyFormApi>(null as never)\n\n/**\n * TypeScript inferencing is weird.\n *\n * If you have:\n *\n * @example\n *\n * interface Args<T> {\n *     arg?: T\n * }\n *\n * function test<T>(arg?: Partial<Args<T>>): T {\n *     return 0 as any;\n * }\n *\n * const a = test({});\n *\n * Then `T` will default to `unknown`.\n *\n * However, if we change `test` to be:\n *\n * @example\n *\n * function test<T extends undefined>(arg?: Partial<Args<T>>): T;\n *\n * Then `T` becomes `undefined`.\n *\n * Here, we are checking if the passed type `T` extends `DefaultT` and **only**\n * `DefaultT`, as if that's the case we assume that inferencing has not occurred.\n */\ntype UnwrapOrAny<T> = [unknown] extends [T] ? any : T\ntype UnwrapDefaultOrAny<DefaultT, T> = [DefaultT] extends [T]\n  ? [T] extends [DefaultT]\n    ? any\n    : T\n  : T\n\nfunction useFormContext() {\n  const form = useContext(formContext)\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  if (!form) {\n    throw new Error(\n      '`formContext` only works when within a `formComponent` passed to `createFormHook`',\n    )\n  }\n\n  return form as ReactFormExtendedApi<\n    // If you need access to the form data, you need to use `withForm` instead\n    Record<string, never>,\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\nexport function createFormHookContexts() {\n  function useFieldContext<TData>() {\n    const field = useContext(fieldContext)\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (!field) {\n      throw new Error(\n        '`fieldContext` only works when within a `fieldComponent` passed to `createFormHook`',\n      )\n    }\n\n    return field as FieldApi<\n      any,\n      string,\n      TData,\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      any\n    >\n  }\n\n  return { fieldContext, useFieldContext, useFormContext, formContext }\n}\n\ninterface CreateFormHookProps<\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n> {\n  fieldComponents: TFieldComponents\n  fieldContext: Context<AnyFieldApi>\n  formComponents: TFormComponents\n  formContext: Context<AnyFormApi>\n}\n\n/**\n * @private\n */\nexport type AppFieldExtendedReactFormApi<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n> = ReactFormExtendedApi<\n  TFormData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta\n> &\n  NoInfer<TFormComponents> & {\n    AppField: FieldComponent<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta,\n      NoInfer<TFieldComponents>\n    >\n    AppForm: ComponentType<\n      // PropsWithChildren<P> is not optional in React 17\n      PropsWithChildren<{}>\n    >\n  }\n\nexport interface WithFormProps<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n  TRenderProps extends object = Record<string, never>,\n> extends FormOptions<\n  TFormData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta\n> {\n  // Optional, but adds props to the `render` function outside of `form`\n  props?: TRenderProps\n  render: FunctionComponent<\n    PropsWithChildren<\n      NoInfer<TRenderProps> & {\n        form: AppFieldExtendedReactFormApi<\n          TFormData,\n          TOnMount,\n          TOnChange,\n          TOnChangeAsync,\n          TOnBlur,\n          TOnBlurAsync,\n          TOnSubmit,\n          TOnSubmitAsync,\n          TOnDynamic,\n          TOnDynamicAsync,\n          TOnServer,\n          TSubmitMeta,\n          TFieldComponents,\n          TFormComponents\n        >\n      }\n    >\n  >\n}\n\nexport interface WithFieldGroupProps<\n  TFieldGroupData,\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n  TSubmitMeta,\n  TRenderProps extends object = Record<string, never>,\n> extends BaseFormOptions<TFieldGroupData, TSubmitMeta> {\n  // Optional, but adds props to the `render` function outside of `form`\n  props?: TRenderProps\n  render: FunctionComponent<\n    PropsWithChildren<\n      NoInfer<TRenderProps> & {\n        group: AppFieldExtendedReactFieldGroupApi<\n          unknown,\n          TFieldGroupData,\n          string | FieldsMap<unknown, TFieldGroupData>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          undefined | FormValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          undefined | FormAsyncValidateOrFn<unknown>,\n          // this types it as 'never' in the render prop. It should prevent any\n          // untyped meta passed to the handleSubmit by accident.\n          unknown extends TSubmitMeta ? never : TSubmitMeta,\n          TFieldComponents,\n          TFormComponents\n        >\n      }\n    >\n  >\n}\n\nexport function createFormHook<\n  const TComponents extends Record<string, ComponentType<any>>,\n  const TFormComponents extends Record<string, ComponentType<any>>,\n>({\n  fieldComponents,\n  fieldContext,\n  formContext,\n  formComponents,\n}: CreateFormHookProps<TComponents, TFormComponents>) {\n  function useAppForm<\n    TFormData,\n    TOnMount extends undefined | FormValidateOrFn<TFormData>,\n    TOnChange extends undefined | FormValidateOrFn<TFormData>,\n    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TSubmitMeta,\n  >(\n    props: FormOptions<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta\n    >,\n  ): AppFieldExtendedReactFormApi<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta,\n    TComponents,\n    TFormComponents\n  > {\n    const form = useForm(props)\n\n    // PropsWithChildren<P> is not optional in React 17\n    const AppForm = useMemo<ComponentType<PropsWithChildren<{}>>>(() => {\n      return ({ children }) => {\n        return (\n          <formContext.Provider value={form}>{children}</formContext.Provider>\n        )\n      }\n    }, [form])\n\n    const AppField = useMemo(() => {\n      const AppField = (({ children, ...props }) => {\n        return (\n          <form.Field {...props}>\n            {(field) => (\n              // eslint-disable-next-line @eslint-react/no-context-provider\n              <fieldContext.Provider value={field}>\n                {children(Object.assign(field, fieldComponents))}\n              </fieldContext.Provider>\n            )}\n          </form.Field>\n        )\n      }) as FieldComponent<\n        TFormData,\n        TOnMount,\n        TOnChange,\n        TOnChangeAsync,\n        TOnBlur,\n        TOnBlurAsync,\n        TOnSubmit,\n        TOnSubmitAsync,\n        TOnDynamic,\n        TOnDynamicAsync,\n        TOnServer,\n        TSubmitMeta,\n        TComponents\n      >\n      return AppField\n    }, [form])\n\n    const extendedForm = useMemo(() => {\n      return Object.assign(form, {\n        AppField,\n        AppForm,\n        ...formComponents,\n      })\n    }, [form, AppField, AppForm])\n\n    return extendedForm\n  }\n\n  function withForm<\n    TFormData,\n    TOnMount extends undefined | FormValidateOrFn<TFormData>,\n    TOnChange extends undefined | FormValidateOrFn<TFormData>,\n    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TSubmitMeta,\n    TRenderProps extends object = {},\n  >({\n    render,\n    props,\n  }: WithFormProps<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta,\n    TComponents,\n    TFormComponents,\n    TRenderProps\n  >): WithFormProps<\n    UnwrapOrAny<TFormData>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnMount>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChange>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChangeAsync>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlur>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlurAsync>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmit>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync>,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnDynamic>,\n    UnwrapDefaultOrAny<\n      undefined | FormValidateOrFn<TFormData>,\n      TOnDynamicAsync\n    >,\n    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnServer>,\n    UnwrapOrAny<TSubmitMeta>,\n    UnwrapOrAny<TComponents>,\n    UnwrapOrAny<TFormComponents>,\n    UnwrapOrAny<TRenderProps>\n  >['render'] {\n    return (innerProps) => render({ ...props, ...innerProps })\n  }\n\n  function withFieldGroup<\n    TFieldGroupData,\n    TSubmitMeta,\n    TRenderProps extends object = {},\n  >({\n    render,\n    props,\n    defaultValues,\n  }: WithFieldGroupProps<\n    TFieldGroupData,\n    TComponents,\n    TFormComponents,\n    TSubmitMeta,\n    TRenderProps\n  >): <\n    TFormData,\n    TFields extends\n      | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>\n      | FieldsMap<TFormData, TFieldGroupData>,\n    TOnMount extends undefined | FormValidateOrFn<TFormData>,\n    TOnChange extends undefined | FormValidateOrFn<TFormData>,\n    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TFormSubmitMeta,\n  >(\n    params: PropsWithChildren<\n      NoInfer<TRenderProps> & {\n        form:\n          | AppFieldExtendedReactFormApi<\n              TFormData,\n              TOnMount,\n              TOnChange,\n              TOnChangeAsync,\n              TOnBlur,\n              TOnBlurAsync,\n              TOnSubmit,\n              TOnSubmitAsync,\n              TOnDynamic,\n              TOnDynamicAsync,\n              TOnServer,\n              unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta,\n              TComponents,\n              TFormComponents\n            >\n          | AppFieldExtendedReactFieldGroupApi<\n              // Since this only occurs if you nest it within other field groups, it can be more\n              // lenient with the types.\n              unknown,\n              TFormData,\n              string | FieldsMap<unknown, TFormData>,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              any,\n              unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta,\n              TComponents,\n              TFormComponents\n            >\n        fields: TFields\n      }\n    >,\n  ) => ReturnType<FunctionComponent> {\n    return function Render(innerProps) {\n      const fieldGroupProps = useMemo(() => {\n        return {\n          form: innerProps.form,\n          fields: innerProps.fields,\n          defaultValues,\n          formComponents,\n        }\n      }, [innerProps.form, innerProps.fields])\n      const fieldGroupApi = useFieldGroup(fieldGroupProps as any)\n\n      return render({ ...props, ...innerProps, group: fieldGroupApi as any })\n    }\n  }\n\n  /**\n   * ⚠️ **Use withForm whenever possible.**\n   *\n   * Gets a typed form from the `<form.AppForm />` context.\n   */\n  function useTypedAppFormContext<\n    TFormData,\n    TOnMount extends undefined | FormValidateOrFn<TFormData>,\n    TOnChange extends undefined | FormValidateOrFn<TFormData>,\n    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TSubmitMeta,\n  >(\n    _props: FormOptions<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta\n    >,\n  ): AppFieldExtendedReactFormApi<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta,\n    TComponents,\n    TFormComponents\n  > {\n    const form = useFormContext()\n\n    return form as never\n  }\n\n  return {\n    useAppForm,\n    withForm,\n    withFieldGroup,\n    useTypedAppFormContext,\n  }\n}\n"],"names":["fieldContext","formContext","AppField"],"mappings":";;;;;AA2BA;AACA;AAuCA;AACE;AAGA;AACE;AAAU;AACR;AAAA;AAIJ;AAeF;AAEO;AACL;AACE;AAGA;AACE;AAAU;AACR;AAAA;AAIJ;AAAO;AA2BT;AACF;AA+JO;AAGL;AACA;AACAA;AACAC;AAEF;AACE;AA4CE;AAGA;AACE;AACE;AAC+C;AAEjD;AAGF;AACE;AACE;AAEM;AAAA;AAIA;AAEJ;AAiBJ;AAAOC;AAGT;AACE;AAA2B;AACzB;AACA;AACG;AACJ;AAGH;AAAO;AAGT;AAcE;AACA;AACA;AAqCA;AAAyD;AAG3D;AAIE;AACA;AACA;AACA;AAmEA;AACE;AACE;AAAO;AACY;AACE;AACnB;AACA;AAAA;AAGJ;AAEA;AAAsE;AACxE;AAQF;AA4CE;AAEA;AAAO;AAGT;AAAO;AACL;AACA;AACA;AACA;AAEJ;;;;;"}

package.json

 {
   "name": "@tanstack/react-form",
-  "version": "1.27.7",
+  "version": "1.28.0",
   "description": "Powerful, type-safe forms for React.",
@@ -41,3 +41,3 @@ "author": "tannerlinsley",
     "@tanstack/react-store": "^0.8.0",
-    "@tanstack/form-core": "1.27.7"
+    "@tanstack/form-core": "1.28.0"
   },
@@ -44,0 +44,0 @@ "devDependencies": {

src/createFormHook.tsx

@@ -68,2 +68,29 @@ 'use client'
 
+function useFormContext() {
+  const form = useContext(formContext)
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (!form) {
+    throw new Error(
+      '`formContext` only works when within a `formComponent` passed to `createFormHook`',
+    )
+  }
+
+  return form as ReactFormExtendedApi<
+    // If you need access to the form data, you need to use `withForm` instead
+    Record<string, never>,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any
+  >
+}
+
 export function createFormHookContexts() {
@@ -107,29 +134,2 @@ function useFieldContext<TData>() {
 
-  function useFormContext() {
-    const form = useContext(formContext)
-
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (!form) {
-      throw new Error(
-        '`formContext` only works when within a `formComponent` passed to `createFormHook`',
-      )
-    }
-
-    return form as ReactFormExtendedApi<
-      // If you need access to the form data, you need to use `withForm` instead
-      Record<string, never>,
-      any,
-      any,
-      any,
-      any,
-      any,
-      any,
-      any,
-      any,
-      any,
-      any,
-      any
-    >
-  }
-
   return { fieldContext, useFieldContext, useFormContext, formContext }
@@ -545,2 +545,56 @@ }
 
+  /**
+   * ⚠️ **Use withForm whenever possible.**
+   *
+   * Gets a typed form from the `<form.AppForm />` context.
+   */
+  function useTypedAppFormContext<
+    TFormData,
+    TOnMount extends undefined | FormValidateOrFn<TFormData>,
+    TOnChange extends undefined | FormValidateOrFn<TFormData>,
+    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
+    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TSubmitMeta,
+  >(
+    _props: FormOptions<
+      TFormData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnDynamic,
+      TOnDynamicAsync,
+      TOnServer,
+      TSubmitMeta
+    >,
+  ): AppFieldExtendedReactFormApi<
+    TFormData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnDynamic,
+    TOnDynamicAsync,
+    TOnServer,
+    TSubmitMeta,
+    TComponents,
+    TFormComponents
+  > {
+    const form = useFormContext()
+
+    return form as never
+  }
+
   return {
@@ -550,3 +604,4 @@ useAppForm,
     withFieldGroup,
+    useTypedAppFormContext,
   }
 }

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

297549

2.4%

Lines of code

3075

2.26%

Dependency changes

• + Added

  @tanstack/form-core@1.28.0
  (transitive)

• - Removed

  @tanstack/form-core@1.27.7
  (transitive)

• Updated

  @tanstack/form-core@1.28.0