feat(react): allow withForms render function to take extending properties

Author: Sebastian Hoffmann

packages/react-form/src/createFormHook.tsx

@@ -198,20 +198,31 @@ export interface WithFormProps<
   > {
   // Optional, but adds props to the `render` function outside of `form`
   props?: TRenderProps
-  render: (
+  render: <
+    TFFormData extends TFormData,
+    TFOnMount extends undefined | FormValidateOrFn<TFFormData>,
+    TFOnChange extends undefined | FormValidateOrFn<TFFormData>,
+    TFOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFFormData>,
+    TFOnBlur extends undefined | FormValidateOrFn<TFFormData>,
+    TFOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFFormData>,
+    TFOnSubmit extends undefined | FormValidateOrFn<TFFormData>,
+    TFOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFFormData>,
+    TFOnServer extends undefined | FormAsyncValidateOrFn<TFFormData>,
+    TFSubmitMeta,
+  >(
     props: PropsWithChildren<
       NoInfer<TRenderProps> & {
         form: AppFieldExtendedReactFormApi<
-          TFormData,
-          TOnMount,
-          TOnChange,
-          TOnChangeAsync,
-          TOnBlur,
-          TOnBlurAsync,
-          TOnSubmit,
-          TOnSubmitAsync,
-          TOnServer,
-          TSubmitMeta,
+          TFFormData,
+          TFOnMount,
+          TFOnChange,
+          TFOnChangeAsync,
+          TFOnBlur,
+          TFOnBlurAsync,
+          TFOnSubmit,
+          TFOnSubmitAsync,
+          TFOnServer,
+          TFSubmitMeta,
           TFieldComponents,
           TFormComponents
         >

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

@@ -235,9 +235,6 @@ describe('createFormHook', () => {
     const incorrectFormOpts = formOptions({
       defaultValues: {
         firstName: 'FirstName',
-        lastName: 'LastName',
-        firstNameWrong: 'FirstName',
-        lastNameWrong: 'LastName',
       },
     })
 
@@ -247,5 +244,19 @@ describe('createFormHook', () => {
       // @ts-expect-error Incorrect form opts
       <WithFormComponent form={incorrectAppForm} prop1="test" prop2={10} />
     )
+
+    const extendingFormOpts = formOptions({
+      defaultValues: {
+        firstName: 'FirstName',
+        lastName: 'LastName',
+        country: 'Country',
+      },
+    })
+
+    const extendingAppForm = useAppForm(extendingFormOpts)
+
+    const ExtendingFormOptsComponent = (
+      <WithFormComponent form={extendingAppForm} prop1="test" prop2={10} />
+    )
   })
 })