fix(rhf/fields): Properly infer types when using a resolver with a transform

Author: ntatoud

src/components/form/field-checkbox-group/index.tsx

@@ -17,9 +17,11 @@ type CheckboxOption = Omit<CheckboxProps, 'children' | 'value' | 'render'> & {
 export type FieldCheckboxGroupProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
 > = FieldProps<
   TFieldValues,
   TName,
+  TTransformedValues,
   {
     type: 'checkbox-group';
     options: Array<CheckboxOption>;
@@ -30,8 +32,9 @@ export type FieldCheckboxGroupProps<
 export const FieldCheckboxGroup = <
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
 >(
-  props: FieldCheckboxGroupProps<TFieldValues, TName>
+  props: FieldCheckboxGroupProps<TFieldValues, TName, TTransformedValues>
 ) => {
   const {
     name,

src/components/form/field-checkbox/index.tsx

@@ -11,9 +11,11 @@ import { Checkbox } from '@/components/ui/checkbox';
 export type FieldCheckboxProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
 > = FieldProps<
   TFieldValues,
   TName,
+  TTransformedValues,
   {
     type: 'checkbox';
     containerProps?: ComponentProps<'div'>;
@@ -23,8 +25,9 @@ export type FieldCheckboxProps<
 export const FieldCheckbox = <
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
 >(
-  props: FieldCheckboxProps<TFieldValues, TName>
+  props: FieldCheckboxProps<TFieldValues, TName, TTransformedValues>
 ) => {
   const {
     name,

src/components/form/field-date/index.tsx

@@ -11,9 +11,11 @@ import { DatePicker } from '@/components/ui/date-picker';
 export type FieldDateProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
 > = FieldProps<
   TFieldValues,
   TName,
+  TTransformedValues,
   {
     type: 'date';
     containerProps?: ComponentProps<'div'>;
@@ -23,8 +25,9 @@ export type FieldDateProps<
 export const FieldDate = <
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
 >(
-  props: FieldDateProps<TFieldValues, TName>
+  props: FieldDateProps<TFieldValues, TName, TTransformedValues>
 ) => {
   const {
     name,

src/components/form/field-number/index.tsx

@@ -13,9 +13,11 @@ import { FormFieldError } from '../form-field-error';
 export type FieldNumberProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
 > = FieldProps<
   TFieldValues,
   TName,
+  TTransformedValues,
   {
     type: 'number';
     containerProps?: ComponentProps<'div'>;
@@ -26,8 +28,9 @@ export type FieldNumberProps<
 export const FieldNumber = <
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
 >(
-  props: FieldNumberProps<TFieldValues, TName>
+  props: FieldNumberProps<TFieldValues, TName, TTransformedValues>
 ) => {
   const {
     name,

src/components/form/field-otp/index.tsx

@@ -16,9 +16,11 @@ import { FormFieldError } from '../form-field-error';
 export type FieldOtpProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
 > = FieldProps<
   TFieldValues,
   TName,
+  TTransformedValues,
   {
     type: 'otp';
     autoSubmit?: boolean;
@@ -29,8 +31,9 @@ export type FieldOtpProps<
 export const FieldOtp = <
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
 >(
-  props: FieldOtpProps<TFieldValues, TName>
+  props: FieldOtpProps<TFieldValues, TName, TTransformedValues>
 ) => {
   const {
     name,

src/components/form/field-radio-group/index.tsx

@@ -15,9 +15,11 @@ type RadioOption = Omit<RadioProps, 'children' | 'render'> & {
 export type FieldRadioGroupProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
 > = FieldProps<
   TFieldValues,
   TName,
+  TTransformedValues,
   {
     type: 'radio-group';
     options: Array<RadioOption>;
@@ -29,8 +31,9 @@ export type FieldRadioGroupProps<
 export const FieldRadioGroup = <
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
 >(
-  props: FieldRadioGroupProps<TFieldValues, TName>
+  props: FieldRadioGroupProps<TFieldValues, TName, TTransformedValues>
 ) => {
   const {
     name,

src/components/form/field-select/index.tsx

@@ -11,9 +11,11 @@ import { Select } from '@/components/ui/select';
 export type FieldSelectProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
 > = FieldProps<
   TFieldValues,
   TName,
+  TTransformedValues,
   {
     type: 'select';
     containerProps?: ComponentProps<'div'>;
@@ -23,8 +25,9 @@ export type FieldSelectProps<
 export const FieldSelect = <
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
 >(
-  props: FieldSelectProps<TFieldValues, TName>
+  props: FieldSelectProps<TFieldValues, TName, TTransformedValues>
 ) => {
   const {
     name,

src/components/form/field-text/index.tsx

@@ -12,9 +12,11 @@ import { FormFieldError } from '../form-field-error';
 export type FieldTextProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
 > = FieldProps<
   TFieldValues,
   TName,
+  TTransformedValues,
   {
     type: 'text' | 'email' | 'tel';
     containerProps?: ComponentProps<'div'>;
@@ -24,8 +26,9 @@ export type FieldTextProps<
 export const FieldText = <
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
 >(
-  props: FieldTextProps<TFieldValues, TName>
+  props: FieldTextProps<TFieldValues, TName, TTransformedValues>
 ) => {
   const {
     name,

src/components/form/form-field-controller.tsx

@@ -28,44 +28,53 @@ type FormFieldSize = 'sm' | 'default' | 'lg';
 type FieldCustomProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
 > = {
   type: 'custom';
 } & Pick<
-  ControllerProps<TFieldValues, TName>,
+  ControllerProps<TFieldValues, TName, TTransformedValues>,
   'defaultValue' | 'name' | 'shouldUnregister' | 'disabled' | 'render'
 > &
-  Required<Pick<ControllerProps<TFieldValues, TName>, 'control'>>;
+  Required<
+    Pick<ControllerProps<TFieldValues, TName, TTransformedValues>, 'control'>
+  >;
 
 type CustomProps = object;
 export type FieldProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
   TProps extends CustomProps = CustomProps,
-> = Omit<FieldCustomProps<TFieldValues, TName>, 'render' | 'type'> & {
+> = Omit<
+  FieldCustomProps<TFieldValues, TName, TTransformedValues>,
+  'render' | 'type'
+> & {
   size?: FormFieldSize;
   displayError?: boolean;
 } & Omit<TProps, 'value' | 'ref' | 'id' | 'aria-invalid' | 'aria-describedby'>;
 
 export type FormFieldControllerProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
 > =
-  | FieldCustomProps<TFieldValues, TName>
+  | FieldCustomProps<TFieldValues, TName, TTransformedValues>
   // -- ADD NEW FIELD PROPS TYPE HERE --
-  | FieldNumberProps<TFieldValues, TName>
-  | FieldSelectProps<TFieldValues, TName>
-  | FieldDateProps<TFieldValues, TName>
-  | FieldTextProps<TFieldValues, TName>
-  | FieldOtpProps<TFieldValues, TName>
-  | FieldRadioGroupProps<TFieldValues, TName>
-  | FieldCheckboxProps<TFieldValues, TName>
-  | FieldCheckboxGroupProps<TFieldValues, TName>;
+  | FieldNumberProps<TFieldValues, TName, TTransformedValues>
+  | FieldSelectProps<TFieldValues, TName, TTransformedValues>
+  | FieldDateProps<TFieldValues, TName, TTransformedValues>
+  | FieldTextProps<TFieldValues, TName, TTransformedValues>
+  | FieldOtpProps<TFieldValues, TName, TTransformedValues>
+  | FieldRadioGroupProps<TFieldValues, TName, TTransformedValues>
+  | FieldCheckboxProps<TFieldValues, TName, TTransformedValues>
+  | FieldCheckboxGroupProps<TFieldValues, TName, TTransformedValues>;
 
 export const FormFieldController = <
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues,
 >(
-  _props: FormFieldControllerProps<TFieldValues, TName>
+  _props: FormFieldControllerProps<TFieldValues, TName, TTransformedValues>
 ) => {
   const { size } = useFormField();
 
@@ -110,15 +119,18 @@ export const FormFieldController = <
 
   const displayError = 'displayError' in props ? props.displayError : undefined;
 
-  const contextValue: FormFieldControllerContextValue<TFieldValues, TName> =
-    useMemo(
-      () => ({
-        name: props.name,
-        control: props.control,
-        displayError: displayError,
-      }),
-      [props.name, props.control, displayError]
-    );
+  const contextValue: FormFieldControllerContextValue<
+    TFieldValues,
+    TName,
+    TTransformedValues
+  > = useMemo(
+    () => ({
+      name: props.name,
+      control: props.control,
+      displayError: displayError,
+    }),
+    [props.name, props.control, displayError]
+  );
 
   return (
     <FormFieldControllerContext value={contextValue as ExplicitAny}>
@@ -130,7 +142,13 @@ export const FormFieldController = <
 export type FormFieldControllerContextValue<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = Required<Pick<ControllerProps<TFieldValues, TName>, 'control' | 'name'>> & {
+  TTransformedValues = TFieldValues,
+> = Required<
+  Pick<
+    ControllerProps<TFieldValues, TName, TTransformedValues>,
+    'control' | 'name'
+  >
+> & {
   displayError?: boolean;
 };
 

src/components/form/form.tsx

@@ -7,13 +7,17 @@ import {
 
 import { cn } from '@/lib/tailwind/utils';
 
-type FormProps<TFieldValues extends FieldValues> = StrictUnion<
-  | (FormProviderProps<TFieldValues> & {
+type FormProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = ExplicitAny,
+  TTransformedValues = TFieldValues,
+> = StrictUnion<
+  | (FormProviderProps<TFieldValues, TContext, TTransformedValues> & {
       noHtmlForm?: false;
-      onSubmit?: SubmitHandler<TFieldValues>;
+      onSubmit?: SubmitHandler<TTransformedValues>;
       className?: string;
     })
-  | (FormProviderProps<TFieldValues> & {
+  | (FormProviderProps<TFieldValues, TContext, TTransformedValues> & {
       noHtmlForm: true;
     })
 >;