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

package/CHANGELOG.md

@@ -1,15 +1,8 @@
 # Change Log
 
-## 8.0.3-canary.4
+## 8.1.0-canary.3
 
-## 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.1.0-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.4",
+  "version": "8.1.0-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.4",
-    "@graphcommerce/prettier-config-pwa": "^8.0.3-canary.4",
-    "@graphcommerce/typescript-config-pwa": "^8.0.3-canary.4",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.3",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.3",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-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,8 +98,21 @@ export function useFormAutoSubmit<
   return submitting
 }
 
-export type FormAutoSubmitProps<TFieldValues extends FieldValues = FieldValues> = {
+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>
   /** 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
@@ -111,15 +124,12 @@ export type FormAutoSubmitProps<TFieldValues extends FieldValues = FieldValues>
    */
   // eslint-disable-next-line react/no-unused-prop-types
   parallel?: boolean
-} & DebounceOptions &
-  Omit<UseWatchProps<TFieldValues>, 'defaultValue'>
+} & DebounceOptions
 
-/**
- * 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>,
-) {
+function useFormAutoSubmit2<
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[],
+>(props: FormAutoSubmitProps<TFieldValues, TFieldNames>) {
   const { wait, initialWait, maxWait, submit, parallel, ...watchOptions } = props
 
   // We create a stable object from the values, so that we can compare them later
@@ -147,7 +157,17 @@ function FormAutoSubmitBase<TFieldValues extends FieldValues = FieldValues>(
     // 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
 }