@graphcommerce/react-hook-form 8.0.3-canary.2 → 8.0.3-canary.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 8.0.3-canary.3
+
+### Patch Changes
+
+- [#2206](https://github.com/graphcommerce-org/graphcommerce/pull/2206) [`855ab09`](https://github.com/graphcommerce-org/graphcommerce/commit/855ab097b9ea204a7c73c6550b7a5e9e2290f378) - Cleanup `<FormAutoSubmit/>` and remove internal hook.
+  ([@paales](https://github.com/paales))
+
 ## 8.0.3-canary.2
 
 ## 8.0.3-canary.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/react-hook-form",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.0.3-canary.2",
+  "version": "8.0.3-canary.3",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -16,9 +16,9 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3",
-    "@graphcommerce/eslint-config-pwa": "^8.0.3-canary.2",
-    "@graphcommerce/prettier-config-pwa": "^8.0.3-canary.2",
-    "@graphcommerce/typescript-config-pwa": "^8.0.3-canary.2",
+    "@graphcommerce/eslint-config-pwa": "^8.0.3-canary.3",
+    "@graphcommerce/prettier-config-pwa": "^8.0.3-canary.3",
+    "@graphcommerce/typescript-config-pwa": "^8.0.3-canary.3",
     "graphql": "^16.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/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
 }