✨ Add support for generic components using FieldPathWithValue

src/__tests__/useController.test.tsx

@@ -8,7 +8,7 @@ import {
 } from '@testing-library/react';
 
 import { Controller } from '../controller';
-import { Control } from '../types';
+import { Control, FieldPathWithValue, FieldValues } from '../types';
 import { useController } from '../useController';
 import { useForm } from '../useForm';
 
@@ -32,6 +32,39 @@ describe('useController', () => {
     render(<Component />);
   });
 
+  it('should render generic component correctly', () => {
+    type ExpectedType = { test: string };
+
+    const Generic = <FormValues extends FieldValues>({
+      name,
+      control,
+    }: {
+      name: FieldPathWithValue<FormValues, ExpectedType>;
+      control: Control<FormValues>;
+    }) => {
+      const {
+        field: { value },
+      } = useController<FormValues, ExpectedType>({
+        name,
+        control,
+        defaultValue: { test: 'value' },
+      });
+
+      return <>{value.test}</>;
+    };
+
+    const Component = () => {
+      const { control } = useForm<{
+        test: string;
+        key: ExpectedType[];
+      }>();
+
+      return <Generic name="key.0" control={control} />;
+    };
+
+    render(<Component />);
+  });
+
   it('should only subscribe to formState at each useController level', async () => {
     const renderCounter = [0, 0];
     type FormValues = {
@@ -508,6 +541,12 @@ describe('useController', () => {
   });
 
   it('should return defaultValues when component is not yet mounted', async () => {
+    type FormValues = {
+      test: {
+        deep: { test: string; test1: string }[];
+      };
+    };
+
     const defaultValues = {
       test: {
         deep: [
@@ -520,15 +559,11 @@ describe('useController', () => {
     };
 
     const App = () => {
-      const { control, getValues } = useForm<{
-        test: {
-          deep: { test: string; test1: string }[];
-        };
-      }>({
+      const { control, getValues } = useForm<FormValues>({
         defaultValues,
       });
 
-      const { field } = useController({
+      const { field } = useController<FormValues, string>({
         control,
         name: 'test.deep.0.test',
       });

src/controller.tsx

@@ -1,11 +1,15 @@
-import { ControllerProps, FieldPath, FieldValues } from './types';
+import { ControllerProps, FieldPathWithValue, FieldValues } from './types';
 import { useController } from './useController';
 
 const Controller = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TResult = any,
+  TName extends FieldPathWithValue<TFieldValues, TResult> = FieldPathWithValue<
+    TFieldValues,
+    TResult
+  >,
 >(
-  props: ControllerProps<TFieldValues, TName>,
-) => props.render(useController<TFieldValues, TName>(props));
+  props: ControllerProps<TFieldValues, TResult, TName>,
+) => props.render(useController<TFieldValues, TResult, TName>(props));
 
 export { Controller };

src/types/controller.ts

@@ -6,9 +6,10 @@ import {
   FieldErrors,
   FieldPath,
   FieldPathValue,
+  FieldPathWithValue,
   FieldValues,
+  IsAny,
   RefCallBack,
-  UnpackNestedValue,
   UseFormStateReturn,
 } from './';
 
@@ -24,49 +25,69 @@ export type ControllerFieldState<
 
 export type ControllerRenderProps<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TResult = any,
+  TName extends FieldPathWithValue<TFieldValues, TResult> = FieldPathWithValue<
+    TFieldValues,
+    TResult
+  >,
 > = {
   onChange: (...event: any[]) => void;
   onBlur: () => void;
-  value: UnpackNestedValue<FieldPathValue<TFieldValues, TName>>;
+  value: IsAny<TResult> extends true
+    ? FieldPathValue<TFieldValues, TName>
+    : TResult;
   name: TName;
   ref: RefCallBack;
 };
 
 export type UseControllerProps<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TResult = any,
+  TName extends FieldPathWithValue<TFieldValues, TResult> = FieldPathWithValue<
+    TFieldValues,
+    TResult
+  >,
 > = {
   name: TName;
   rules?: Omit<
     RegisterOptions<TFieldValues, TName>,
     'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'
   >;
   shouldUnregister?: boolean;
-  defaultValue?: UnpackNestedValue<FieldPathValue<TFieldValues, TName>>;
+  defaultValue?: IsAny<TResult> extends true
+    ? FieldPathValue<TFieldValues, TName>
+    : TResult;
   control?: Control<TFieldValues>;
 };
 
 export type UseControllerReturn<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TResult = any,
+  TName extends FieldPathWithValue<TFieldValues, TResult> = FieldPathWithValue<
+    TFieldValues,
+    TResult
+  >,
 > = {
-  field: ControllerRenderProps<TFieldValues, TName>;
+  field: ControllerRenderProps<TFieldValues, TResult, TName>;
   formState: UseFormStateReturn<TFieldValues>;
   fieldState: ControllerFieldState<TFieldValues, TName>;
 };
 
 export type ControllerProps<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TResult = any,
+  TName extends FieldPathWithValue<TFieldValues, TResult> = FieldPathWithValue<
+    TFieldValues,
+    TResult
+  >,
 > = {
   render: ({
     field,
     fieldState,
     formState,
   }: {
-    field: ControllerRenderProps<TFieldValues, TName>;
+    field: ControllerRenderProps<TFieldValues, TResult, TName>;
     fieldState: ControllerFieldState<TFieldValues, TName>;
     formState: UseFormStateReturn<TFieldValues>;
   }) => React.ReactElement;
-} & UseControllerProps<TFieldValues, TName>;
+} & UseControllerProps<TFieldValues, TResult, TName>;

src/types/utils.ts

@@ -170,3 +170,13 @@ export type UnionLike<T> = [T] extends [Date | FileList | File | NestedValue]
       Exclude<UnionKeys<T>, keyof T> | OptionalKeys<T>
     >
   : T;
+
+export type FieldPathWithValue<
+  TFieldValues extends FieldValues,
+  TResult = unknown,
+  FieldPaths extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  [key in FieldPaths]: FieldPathValue<TFieldValues, key> extends TResult
+    ? key
+    : never;
+}[FieldPaths];

src/useController.ts

@@ -6,7 +6,7 @@ import get from './utils/get';
 import { EVENTS } from './constants';
 import {
   Field,
-  FieldPath,
+  FieldPathWithValue,
   FieldValues,
   InternalFieldName,
   UseControllerProps,
@@ -17,10 +17,14 @@ import { useFormState } from './useFormState';
 
 export function useController<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TResult = any,
+  TName extends FieldPathWithValue<TFieldValues, TResult> = FieldPathWithValue<
+    TFieldValues,
+    TResult
+  >,
 >(
-  props: UseControllerProps<TFieldValues, TName>,
-): UseControllerReturn<TFieldValues, TName> {
+  props: UseControllerProps<TFieldValues, TResult, TName>,
+): UseControllerReturn<TFieldValues, TResult, TName> {
   const methods = useFormContext<TFieldValues>();
   const { name, control = methods.control, shouldUnregister } = props;
   const [value, setInputStateValue] = React.useState(