fix: remove form.Form for headless form.getFormProps()

packages/react-form/src/useForm.tsx

@@ -6,14 +6,16 @@ import React from 'react'
 import { type UseField, type FieldComponent, Field, useField } from './useField'
 import { formContext } from './formContext'
 
+export type FormSubmitEvent = React.FormEvent<HTMLFormElement>
+
 declare module '@tanstack/form-core' {
   interface Register {
-    FormSubmitEvent: React.FormEvent<HTMLFormElement>
+    FormSubmitEvent: FormSubmitEvent
   }
 
   // eslint-disable-next-line no-shadow
   interface FormApi<TFormData> {
-    Form: FormComponent
+    getFormProps: () => FormProps
     Field: FieldComponent<TFormData, TFormData>
     useField: UseField<TFormData>
     useStore: <TSelected = NoInfer<FormState<TFormData>>>(
@@ -28,12 +30,22 @@ declare module '@tanstack/form-core' {
   }
 }
 
+export type FormProps = {
+  onSubmit: (e: FormSubmitEvent) => void
+  disabled: boolean
+}
+
 export function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {
   const [formApi] = React.useState(() => {
     // @ts-ignore
     const api = new FormApi<TData>(opts)
 
-    api.Form = createFormComponent(api)
+    api.getFormProps = () => {
+      return {
+        onSubmit: formApi.handleSubmit,
+        disabled: api.state.isSubmitting,
+      }
+    }
     api.Field = Field as any
     api.useField = useField as any
     api.useStore = (
@@ -57,38 +69,8 @@ export function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {
     return api
   })
 
+  formApi.useStore((state) => state.isSubmitting)
   formApi.update(opts)
 
   return formApi as any
 }
-
-export type FormProps = React.HTMLProps<HTMLFormElement> & {
-  children: React.ReactNode
-  noFormElement?: boolean
-}
-
-export type FormComponent = (props: FormProps) => any
-
-function createFormComponent(formApi: FormApi<any>) {
-  const Form: FormComponent = ({ children, noFormElement, ...rest }) => {
-    const isSubmitting = formApi.useStore((state) => state.isSubmitting)
-
-    return (
-      <formContext.Provider value={{ formApi }}>
-        {noFormElement ? (
-          children
-        ) : (
-          <form
-            onSubmit={formApi.handleSubmit}
-            disabled={isSubmitting}
-            {...rest}
-          >
-            {children}
-          </form>
-        )}
-      </formContext.Provider>
-    )
-  }
-
-  return Form
-}