fix(react-form): fix createFormHook returning hooks and HoC with any types (#1253)

* fix(form-core): fix typing for formOptions so they don't override additional args passed to form

* ci: apply automated fixes and generate docs

* fix(react-form): fix createFormHook returning hooks and HoC with any types

* chore: add tests

* ci: apply automated fixes and generate docs

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: pavle99

docs/framework/react/reference/functions/createformhook.md

@@ -11,7 +11,7 @@ title: createFormHook
 function createFormHook<TComponents, TFormComponents>(__namedParameters): object
 ```
 
-Defined in: [packages/react-form/src/createFormHook.tsx:188](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L188)
+Defined in: [packages/react-form/src/createFormHook.tsx:223](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L223)
 
 ## Type Parameters
 

docs/framework/react/reference/functions/createformhookcontexts.md

@@ -11,7 +11,7 @@ title: createFormHookContexts
 function createFormHookContexts(): object
 ```
 
-Defined in: [packages/react-form/src/createFormHook.tsx:18](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L18)
+Defined in: [packages/react-form/src/createFormHook.tsx:53](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L53)
 
 ## Returns
 

docs/framework/react/reference/interfaces/withformprops.md

@@ -7,7 +7,7 @@ title: WithFormProps
 
 # Interface: WithFormProps\<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, TFieldComponents, TFormComponents, TRenderProps\>
 
-Defined in: [packages/react-form/src/createFormHook.tsx:138](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L138)
+Defined in: [packages/react-form/src/createFormHook.tsx:173](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L173)
 
 ## Extends
 
@@ -49,7 +49,7 @@ Defined in: [packages/react-form/src/createFormHook.tsx:138](https://github.com/
 optional props: TRenderProps;
 ```
 
-Defined in: [packages/react-form/src/createFormHook.tsx:165](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L165)
+Defined in: [packages/react-form/src/createFormHook.tsx:200](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L200)
 
 ***
 
@@ -59,7 +59,7 @@ Defined in: [packages/react-form/src/createFormHook.tsx:165](https://github.com/
 render: (props) => Element;
 ```
 
-Defined in: [packages/react-form/src/createFormHook.tsx:166](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L166)
+Defined in: [packages/react-form/src/createFormHook.tsx:201](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L201)
 
 #### Parameters
 

packages/react-form/src/createFormHook.tsx

@@ -13,7 +13,42 @@ import type { ComponentType, Context, JSX, PropsWithChildren } from 'react'
 import type { FieldComponent } from './useField'
 import type { ReactFormExtendedApi } from './useForm'
 
-type UnwrapOrAny<T> = [T] extends [unknown] ? any : T
+/**
+ * TypeScript inferencing is weird.
+ *
+ * If you have:
+ *
+ * @example
+ *
+ * interface Args<T> {
+ *     arg?: T
+ * }
+ *
+ * function test<T>(arg?: Partial<Args<T>>): T {
+ *     return 0 as any;
+ * }
+ *
+ * const a = test({});
+ *
+ * Then `T` will default to `unknown`.
+ *
+ * However, if we change `test` to be:
+ *
+ * @example
+ *
+ * function test<T extends undefined>(arg?: Partial<Args<T>>): T;
+ *
+ * Then `T` becomes `undefined`.
+ *
+ * Here, we are checking if the passed type `T` extends `DefaultT` and **only**
+ * `DefaultT`, as if that's the case we assume that inferencing has not occured.
+ */
+type UnwrapOrAny<T> = [unknown] extends [T] ? any : T
+type UnwrapDefaultOrAny<DefaultT, T> = [DefaultT] extends [T]
+  ? [T] extends [DefaultT]
+    ? any
+    : T
+  : T
 
 export function createFormHookContexts() {
   // We should never hit the `null` case here
@@ -311,14 +346,14 @@ export function createFormHook<
     TRenderProps
   >): WithFormProps<
     UnwrapOrAny<TFormData>,
-    UnwrapOrAny<TOnMount>,
-    UnwrapOrAny<TOnChange>,
-    UnwrapOrAny<TOnChangeAsync>,
-    UnwrapOrAny<TOnBlur>,
-    UnwrapOrAny<TOnBlurAsync>,
-    UnwrapOrAny<TOnSubmit>,
-    UnwrapOrAny<TOnSubmitAsync>,
-    UnwrapOrAny<TOnServer>,
+    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnMount>,
+    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChange>,
+    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChangeAsync>,
+    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlur>,
+    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlurAsync>,
+    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmit>,
+    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync>,
+    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnServer>,
     UnwrapOrAny<TSubmitMeta>,
     UnwrapOrAny<TComponents>,
     UnwrapOrAny<TFormComponents>,

packages/react-form/tests/createFormHook.test-d.tsx

@@ -182,4 +182,70 @@ describe('createFormHook', () => {
       },
     })
   })
+
+  it('withForm props should be properly inferred', () => {
+    const WithFormComponent = withForm({
+      props: {
+        prop1: 'test',
+        prop2: 10,
+      },
+      render: ({ form, ...props }) => {
+        assertType<{
+          prop1: string
+          prop2: number
+          children?: React.ReactNode
+        }>(props)
+        return <form.Test />
+      },
+    })
+  })
+
+  it("component made from withForm should have it's props properly typed", () => {
+    const formOpts = formOptions({
+      defaultValues: {
+        firstName: 'FirstName',
+        lastName: 'LastName',
+      },
+    })
+
+    const appForm = useAppForm(formOpts)
+
+    const WithFormComponent = withForm({
+      ...formOpts,
+      props: {
+        prop1: 'test',
+        prop2: 10,
+      },
+      render: ({ form, ...props }) => {
+        assertType<{
+          prop1: string
+          prop2: number
+        }>(props)
+        return <form.Test />
+      },
+    })
+
+    const CorrectComponent = (
+      <WithFormComponent form={appForm} prop1="test" prop2={10} />
+    )
+
+    // @ts-expect-error Missing required props prop1 and prop2
+    const MissingPropsComponent = <WithFormComponent form={appForm} />
+
+    const incorrectFormOpts = formOptions({
+      defaultValues: {
+        firstName: 'FirstName',
+        lastName: 'LastName',
+        firstNameWrong: 'FirstName',
+        lastNameWrong: 'LastName',
+      },
+    })
+
+    const incorrectAppForm = useAppForm(incorrectFormOpts)
+
+    const IncorrectFormOptsComponent = (
+      // @ts-expect-error Incorrect form opts
+      <WithFormComponent form={incorrectAppForm} prop1="test" prop2={10} />
+    )
+  })
 })