feat(useForm): improve type parameter specification to useForm

.changeset/nine-chefs-sing.md

@@ -0,0 +1,9 @@
+---
+"@refinedev/react-hook-form": minor
+"@refinedev/core": minor
+---
+
+feat: improve type parameter specification to useForm
+This PR addresses the type parameter issue in the useForm hook. It ensures that the correct types are applied to the form data, resolving type conflicts when handling form submission and validation.
+
+Resolves [#6137] (https://github.com/refinedev/refine/issues/6137)

packages/core/src/hooks/form/index.ts

@@ -59,6 +59,12 @@ export type {
  * @typeParam TResponseError - Custom error object that extends {@link https://refine.dev/docs/core/interface-references/#httperror `HttpError`}. Defaults to `TError`
  *
  */
+
+export {
+  CreateFormVariables,
+  ExtractFormVariables,
+  ExtractSubmissionVariables,
+} from "./types";
 export const useForm = <
   TQueryFnData extends BaseRecord = BaseRecord,
   TError extends HttpError = HttpError,

packages/core/src/hooks/form/types.ts

@@ -29,6 +29,9 @@ import type { LiveModeProps } from "../../contexts/live/types";
 import type { SuccessErrorNotification } from "../../contexts/notification/types";
 import type { Action } from "../../contexts/router/types";
 
+const FormVariablesSymbol = Symbol("FormVariables");
+const SubmissionVariablesSymbol = Symbol("SubmissionVariables");
+
 export type FormAction = Extract<Action, "create" | "edit" | "clone">;
 
 export type RedirectAction =
@@ -50,6 +53,22 @@ export type AutoSaveProps<TVariables> = {
   };
 };
 
+export type CreateFormVariables<TFormVariables, TSubmissionVariables> = {
+  [FormVariablesSymbol]: TFormVariables;
+  [SubmissionVariablesSymbol]: TSubmissionVariables;
+};
+
+export type ExtractFormVariables<T> = T extends {
+  [FormVariablesSymbol]: infer F;
+}
+  ? F
+  : T;
+export type ExtractSubmissionVariables<T> = T extends {
+  [SubmissionVariablesSymbol]: infer S;
+}
+  ? S
+  : T;
+
 export type AutoSaveReturnType<
   TData extends BaseRecord = BaseRecord,
   TError extends HttpError = HttpError,

packages/react-hook-form/src/useForm/index.ts

@@ -10,17 +10,20 @@
   type UseFormHandleSubmit,
   type Path,
 } from "react-hook-form";
 import {
   type BaseRecord,
   type HttpError,
   useForm as useFormCore,
   useWarnAboutChange,
   type UseFormProps as UseFormCoreProps,
   type UseFormReturnType as UseFormReturnTypeCore,
   useTranslate,
   useRefineContext,
   flattenObjectKeys,
+  CreateFormVariables,
+  ExtractFormVariables,
+  ExtractSubmissionVariables,
 } from "@refinedev/core";
 
 export type UseFormReturnType<
   TQueryFnData extends BaseRecord = BaseRecord,
@@ -82,7 +85,7 @@
 export const useForm = <
   TQueryFnData extends BaseRecord = BaseRecord,
   TError extends HttpError = HttpError,
-  TVariables extends FieldValues = FieldValues,
+  TVariables extends FieldValues | CreateFormVariables<any, any> = FieldValues,
   TContext extends object = {},
   TData extends BaseRecord = TQueryFnData,
   TResponse extends BaseRecord = TData,
@@ -195,6 +198,9 @@
 
   const { query, onFinish, formLoading, onFinishAutoSave } = useFormCoreResult;
 
+  type FormVariablesType = ExtractFormVariables<TVariables>; // Added
+  type SubmissionVariablesType = ExtractSubmissionVariables<TVariables>;
+
   useEffect(() => {
     const data = query?.data?.data;
     if (!data) return;
@@ -248,17 +254,24 @@
     return changeValues;
   };
 
-  const handleSubmit: UseFormHandleSubmit<TVariables> =
+  const handleSubmit: UseFormHandleSubmit<FormVariablesType> =
     (onValid, onInvalid) => async (e) => {
       setWarnWhen(false);
-      return handleSubmitReactHookForm(onValid, onInvalid)(e);
+
+      const onValidWrapper = (variables: TVariables) => {
+        const formVariables =
+          variables as unknown as ExtractFormVariables<TVariables>;
+        return onValid(formVariables);
+      };
+
+      return handleSubmitReactHookForm(onValidWrapper, onInvalid)(e);
     };
 
   const saveButtonProps = {
     disabled: formLoading,
     onClick: (e: React.BaseSyntheticEvent) => {
       handleSubmit(
-        (v) => onFinish(v).catch(() => {}),
+        (v) => onFinish(v as SubmissionVariablesType).catch(() => {}),
         () => false,
       )(e);
     },