fix(react-form): accept extendForm forms in base withFieldGroup components

.changeset/wide-fields-extend.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/react-form': patch
+---
+
+Allow passing a form from `extendForm` to a field group made with the base hook's `withFieldGroup`

packages/react-form/src/useField.tsx

@@ -498,7 +498,7 @@ export type FieldComponent<
     | FormAsyncValidateOrFn<TParentData>,
   in out TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
   in out TPatentSubmitMeta,
-  in out ExtendedApi = {},
+  out ExtendedApi = {},
 > = <
   const TName extends DeepKeys<TParentData>,
   TData extends DeepValue<TParentData, TName>,
@@ -555,7 +555,7 @@ export type FieldComponent<
 export type LensFieldComponent<
   in out TLensData,
   in out TParentSubmitMeta,
-  in out ExtendedApi = {},
+  out ExtendedApi = {},
 > = <
   const TName extends DeepKeys<TLensData>,
   TData extends DeepValue<TLensData, TName>,

packages/react-form/src/useFormGroup.tsx

@@ -580,7 +580,7 @@ export type FormGroupComponent<
     | FormAsyncValidateOrFn<TParentData>,
   in out TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
   in out TParentSubmitMeta,
-  in out ExtendedApi = {},
+  out ExtendedApi = {},
 > = <
   const TName extends DeepKeys<TParentData>,
   TData extends DeepValue<TParentData, TName>,

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

@@ -1019,5 +1019,43 @@ describe('createFormHook', () => {
       })
       expectTypeOf(doublyExtendedForm.AppField).toBeFunction()
     })
+
+    it('should allow passing an extended form to a field group from the base hook', () => {
+      const BaseGroup = baseHook.withFieldGroup({
+        defaultValues: { name: '' },
+        render: ({ group }) => {
+          return (
+            <group.AppField name="name">
+              {(field) => <field.Test />}
+            </group.AppField>
+          )
+        },
+      })
+
+      const { useAppForm: useExtendedAppForm } = baseHook.extendForm({
+        fieldComponents: { ExtendedField },
+        formComponents: { ExtendedFormComp },
+      })
+      const extendedForm = useExtendedAppForm({ defaultValues: { name: '' } })
+      const baseForm = baseHook.useAppForm({ defaultValues: { name: '' } })
+
+      // The extended form only adds components, so the base group accepts it
+      const WithExtendedForm = (
+        <BaseGroup form={extendedForm} fields={{ name: 'name' }} />
+      )
+      const WithBaseForm = (
+        <BaseGroup form={baseForm} fields={{ name: 'name' }} />
+      )
+
+      // The other way round still errors: the base form lacks ExtendedField
+      const ExtendedGroup = withExtendedFieldGroup({
+        defaultValues: { name: '' },
+        render: () => <></>,
+      })
+      const MissingComponents = (
+        // @ts-expect-error because the base form has no ExtendedField component
+        <ExtendedGroup form={baseForm} fields={{ name: 'name' }} />
+      )
+    })
   })
 })