diff --git a/.changeset/pink-radios-breathe.md b/.changeset/pink-radios-breathe.md new file mode 100644 index 0000000000..8a542e36eb --- /dev/null +++ b/.changeset/pink-radios-breathe.md @@ -0,0 +1,5 @@ +--- +'@graphcommerce/react-hook-form': patch +--- + +Cleanup `` and remove internal hook. diff --git a/packages/react-hook-form/src/useFormAutoSubmit.tsx b/packages/react-hook-form/src/useFormAutoSubmit.tsx index 6471251ad6..5de275910f 100644 --- a/packages/react-hook-form/src/useFormAutoSubmit.tsx +++ b/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[] = readonly FieldPath[], -> = { - // eslint-disable-next-line react/no-unused-prop-types - control: Control +export type FormAutoSubmitProps = { /** 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, 'defaultValue'> -function useFormAutoSubmit2< - TFieldValues extends FieldValues = FieldValues, - TFieldNames extends readonly FieldPath[] = readonly FieldPath[], ->(props: FormAutoSubmitProps) { +/** + * This is made a components so the useWatch that is used here doesn't retrigger the rerender of the parent component. + */ +function FormAutoSubmitBase( + props: FormAutoSubmitProps, +) { 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[] = readonly FieldPath[], ->(props: FormAutoSubmitProps) { - useFormAutoSubmit2(props) return null }