Cleanup <FormAutoSubmit/> and remove internal hook.

.changeset/pink-radios-breathe.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/react-hook-form': patch
+---
+
+Cleanup `<FormAutoSubmit/>` and remove internal hook.

packages/react-hook-form/src/useFormAutoSubmit.tsx

@@ -5,11 +5,11 @@ import { useMemoObject } from '@graphcommerce/next-ui/hooks/useMemoObject'
 import { debounce } from '@mui/material'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import {
-  Control,
   DeepPartialSkipArrayKey,
   FieldPath,
   FieldValues,
   UseFormReturn,
+  UseWatchProps,
   useFormState,
   useWatch,
 } from 'react-hook-form'
@@ -98,21 +98,8 @@ export function useFormAutoSubmit<
   return submitting
 }
 
-export type FormAutoSubmitProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[],
-> = {
-  // eslint-disable-next-line react/no-unused-prop-types
-  control: Control<TFieldValues>
+export type FormAutoSubmitProps<TFieldValues extends FieldValues = FieldValues> = {
   /** Autosubmit only when these field names update */
-  // eslint-disable-next-line react/no-unused-prop-types
-  name?: readonly [...TFieldNames]
-
-  // eslint-disable-next-line react/no-unused-prop-types
-  disabled?: boolean
-
-  // eslint-disable-next-line react/no-unused-prop-types
-  exact?: boolean
 
   /** SubmitHandler */
   // eslint-disable-next-line react/no-unused-prop-types
@@ -124,12 +111,15 @@ export type FormAutoSubmitProps<
    */
   // eslint-disable-next-line react/no-unused-prop-types
   parallel?: boolean
-} & DebounceOptions
+} & DebounceOptions &
+  Omit<UseWatchProps<TFieldValues>, 'defaultValue'>
 
-function useFormAutoSubmit2<
-  TFieldValues extends FieldValues = FieldValues,
-  TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[],
->(props: FormAutoSubmitProps<TFieldValues, TFieldNames>) {
+/**
+ * This is made a components so the useWatch that is used here doesn't retrigger the rerender of the parent component.
+ */
+function FormAutoSubmitBase<TFieldValues extends FieldValues = FieldValues>(
+  props: FormAutoSubmitProps<TFieldValues>,
+) {
   const { wait, initialWait, maxWait, submit, parallel, ...watchOptions } = props
 
   // We create a stable object from the values, so that we can compare them later
@@ -157,17 +147,7 @@ function useFormAutoSubmit2<
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     submitDebounced()
   }
-}
 
-/**
- * We're wrapping this in a component so that the parent component doesn't rerender on every
- * submission.
- */
-function FormAutoSubmitBase<
-  TFieldValues extends FieldValues = FieldValues,
-  TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[],
->(props: FormAutoSubmitProps<TFieldValues, TFieldNames>) {
-  useFormAutoSubmit2(props)
   return null
 }