🐞 fix: add proper types to form.subscribe (#12850)

Author: CertainlyAria

reports/api-extractor.md.api.md

@@ -342,8 +342,8 @@ export type FormSubmitHandler<TTransformedValues> = (payload: {
 }) => unknown | Promise<unknown>;
 
 // @public (undocumented)
-export type FromSubscribe<TFieldValues extends FieldValues> = (payload: {
-    name?: string;
+export type FromSubscribe<TFieldValues extends FieldValues> = <TFieldNames extends readonly FieldPath<TFieldValues>[]>(payload: {
+    name?: readonly [...TFieldNames] | TFieldNames[number];
     formState?: Partial<ReadFormState>;
     callback: (data: Partial<FormState<TFieldValues>> & {
         values: TFieldValues;
@@ -802,8 +802,8 @@ export type UseFormWatch<TFieldValues extends FieldValues> = {
 };
 
 // @public
-export type UseFromSubscribe<TFieldValues extends FieldValues> = (payload: {
-    name?: string;
+export type UseFromSubscribe<TFieldValues extends FieldValues> = <TFieldNames extends readonly FieldPath<TFieldValues>[]>(payload: {
+    name?: readonly [...TFieldNames] | TFieldNames[number];
     formState?: Partial<ReadFormState>;
     callback: (data: Partial<FormState<TFieldValues>> & {
         values: TFieldValues;
@@ -893,7 +893,7 @@ export type WatchObserver<TFieldValues extends FieldValues> = (value: DeepPartia
 
 // Warnings were encountered during analysis:
 //
-// src/types/form.ts:479:3 - (ae-forgotten-export) The symbol "Subscription" needs to be exported by the entry point index.d.ts
+// src/types/form.ts:481:3 - (ae-forgotten-export) The symbol "Subscription" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

src/logic/shouldSubscribeByName.ts

@@ -1,6 +1,6 @@
 import convertToArrayPayload from '../utils/convertToArrayPayload';
 
-export default <T extends string | string[] | undefined>(
+export default <T extends string | readonly string[] | undefined>(
   name?: T,
   signalName?: string,
   exact?: boolean,

src/types/form.ts

@@ -391,8 +391,10 @@ useEffect(() => {
 })
  * ```
  */
-export type UseFromSubscribe<TFieldValues extends FieldValues> = (payload: {
-  name?: string;
+export type UseFromSubscribe<TFieldValues extends FieldValues> = <
+  TFieldNames extends readonly FieldPath<TFieldValues>[],
+>(payload: {
+  name?: readonly [...TFieldNames] | TFieldNames[number];
   formState?: Partial<ReadFormState>;
   callback: (
     data: Partial<FormState<TFieldValues>> & { values: TFieldValues },
@@ -790,8 +792,10 @@ export type BatchFieldArrayUpdate = <
   shouldUpdateFieldsAndErrors?: boolean,
 ) => void;
 
-export type FromSubscribe<TFieldValues extends FieldValues> = (payload: {
-  name?: string;
+export type FromSubscribe<TFieldValues extends FieldValues> = <
+  TFieldNames extends readonly FieldPath<TFieldValues>[],
+>(payload: {
+  name?: readonly [...TFieldNames] | TFieldNames[number];
   formState?: Partial<ReadFormState>;
   callback: (
     data: Partial<FormState<TFieldValues>> & { values: TFieldValues },

src/useFormState.ts

@@ -1,12 +1,7 @@
 import React from 'react';
 
 import getProxyFormState from './logic/getProxyFormState';
-import {
-  FieldValues,
-  InternalFieldName,
-  UseFormStateProps,
-  UseFormStateReturn,
-} from './types';
+import { FieldValues, UseFormStateProps, UseFormStateReturn } from './types';
 import { useFormContext } from './useFormContext';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 
@@ -63,7 +58,7 @@ export function useFormState<
   useIsomorphicLayoutEffect(
     () =>
       control._subscribe({
-        name: name as InternalFieldName,
+        name,
         formState: _localProxyFormState.current,
         exact,
         callback: (formState) => {

src/useWatch.ts

@@ -145,7 +145,7 @@ export function useWatch<
 export function useWatch<TFieldValues extends FieldValues>(
   props?: UseWatchProps<TFieldValues>,
 ) {
-  const methods = useFormContext();
+  const methods = useFormContext<TFieldValues>();
   const {
     control = methods.control,
     name,
@@ -164,7 +164,7 @@ export function useWatch<TFieldValues extends FieldValues>(
   useIsomorphicLayoutEffect(
     () =>
       control._subscribe({
-        name: name as InternalFieldName,
+        name,
         formState: {
           values: true,
         },