fix(react-form): allow interfaces to be assigned to withFieldGroup's props (#1816)

Author: xotea

.changeset/cruel-clocks-obey.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/react-form': patch
+---
+
+Allow interfaces to be assigned to `withFieldGroup`'s `props`.

packages/react-form/src/createFormHook.tsx

@@ -249,7 +249,7 @@ export interface WithFieldGroupProps<
   TFieldComponents extends Record<string, ComponentType<any>>,
   TFormComponents extends Record<string, ComponentType<any>>,
   TSubmitMeta,
-  TRenderProps extends Record<string, unknown> = Record<string, never>,
+  TRenderProps extends object = Record<string, never>,
 > extends BaseFormOptions<TFieldGroupData, TSubmitMeta> {
   // Optional, but adds props to the `render` function outside of `form`
   props?: TRenderProps
@@ -445,7 +445,7 @@ export function createFormHook<
   function withFieldGroup<
     TFieldGroupData,
     TSubmitMeta,
-    TRenderProps extends Record<string, unknown> = {},
+    TRenderProps extends object = {},
   >({
     render,
     props,

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

@@ -820,7 +820,7 @@ describe('createFormHook', () => {
     const Component5 = <FieldGroup form={form} fields="nope2" />
   })
 
-  it('should allow interfaces without index signatures to be assigned to `props` in withForm', () => {
+  it('should allow interfaces without index signatures to be assigned to `props` in withForm and withFormGroup', () => {
     interface TestNoSignature {
       title: string
     }
@@ -842,20 +842,55 @@ describe('createFormHook', () => {
       render: () => <></>,
     })
 
+    const WithFieldGroupComponent1 = withFieldGroup({
+      defaultValues: { name: '' },
+      props: {} as TestNoSignature,
+      render: () => <></>,
+    })
+
+    const WithFieldGroupComponent2 = withFieldGroup({
+      defaultValues: { name: '' },
+      props: {} as TestWithSignature,
+      render: () => <></>,
+    })
+
     const appForm = useAppForm({ defaultValues: { name: '' } })
 
     const Component1 = <WithFormComponent1 title="" form={appForm} />
     const Component2 = (
       <WithFormComponent2 title="" something="else" form={appForm} />
     )
+
+    const FieldGroupComponent1 = (
+      <WithFieldGroupComponent1
+        title=""
+        form={appForm}
+        fields={{ name: 'name' }}
+      />
+    )
+    const FieldGroupComponent2 = (
+      <WithFieldGroupComponent2
+        title=""
+        something="else"
+        form={appForm}
+        fields={{ name: 'name' }}
+      />
+    )
   })
 
-  it('should not allow null as prop in withForm', () => {
+  it('should not allow null as prop in withForm and withFormGroup', () => {
     const WithFormComponent = withForm({
       defaultValues: { name: '' },
       // @ts-expect-error
       props: null,
       render: () => <></>,
     })
   })
+
+  const WithFieldGroupComponent = withFieldGroup({
+    defaultValues: { name: '' },
+    // @ts-expect-error
+    props: null,
+    render: () => <></>,
+  })
 })