feat(useForm): improve type parameter specification to react-hook-form

Author: OmkarBansod02

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

@@ -20,6 +20,9 @@ import {
   useTranslate,
   useRefineContext,
   flattenObjectKeys,
+  CreateFormVariables,
+  ExtractFormVariables,
+  ExtractSubmissionVariables,
 } from "@refinedev/core";
 
 export type UseFormReturnType<
@@ -82,7 +85,7 @@ export type UseFormProps<
 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 @@ export const useForm = <
 
   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 @@ export const useForm = <
     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);
     },