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

package/CHANGELOG.md

@@ -1,8 +1,103 @@
 # Change Log
 
-## 8.1.0-canary.3
+## 8.1.0-canary.5
 
-## 8.1.0-canary.2
+## 8.0.6-canary.4
+
+## 8.0.6-canary.3
+
+## 8.0.6-canary.2
+
+### Patch Changes
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Add deprecation warnings for useFormMuiRegister. Refactor useFormPersist to useWatch and add a separate `<FormPersist/>` component to prevent rerenders.
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`0767bc4`](https://github.com/graphcommerce-org/graphcommerce/commit/0767bc40f7b596209f24ca4e745ff0441f3275c9) - Upgrade input components to no longer use muiRegister, which improves INP scores
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`02da217`](https://github.com/graphcommerce-org/graphcommerce/commit/02da2172ef702133510f6923190efae2801032c5) - Migrate most usages of useFormAutoSubmit to <FormAutoSubmit/> and deprecated useFormAutoSubmit
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`530076e`](https://github.com/graphcommerce-org/graphcommerce/commit/530076e3664703cb8b577b7fcf1998a420819f60) - Moved all usages of useFormPersist to the <FormPersist/> component to prevent rerenders.
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`1a6d0c4`](https://github.com/graphcommerce-org/graphcommerce/commit/1a6d0c4a3584b1e404b444f1ca44c68eaad56cb7) - Mark useFormValidFields as deprecated: Please use TextInputElement, SelectElement, etc. with the showValid prop
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.0.6-canary.1
+
+## 8.0.6-canary.0
+
+## 8.0.5
+
+### Patch Changes
+
+- [#2237](https://github.com/graphcommerce-org/graphcommerce/pull/2237) [`60f387d`](https://github.com/graphcommerce-org/graphcommerce/commit/60f387d4a037736aa8105fa45728ee481bdaf887) - Solve an issue where the checkout address form wouldn't be automatically submitted on change.
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 8.0.5-canary.10
+
+## 8.0.5-canary.9
+
+## 8.0.5-canary.8
+
+## 8.0.5-canary.7
+
+## 8.0.5-canary.6
+
+## 8.0.5-canary.5
+
+## 8.0.5-canary.4
+
+### Patch Changes
+
+- [#2237](https://github.com/graphcommerce-org/graphcommerce/pull/2237) [`60f387d`](https://github.com/graphcommerce-org/graphcommerce/commit/60f387d4a037736aa8105fa45728ee481bdaf887) - Solve an issue where the checkout address form wouldn't be automatically submitted on change.
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 8.0.5-canary.3
+
+## 8.0.5-canary.2
+
+## 8.0.5-canary.1
+
+## 8.0.5-canary.0
+
+## 8.0.4
+
+## 8.0.4-canary.1
+
+## 8.0.4-canary.0
+
+## 8.0.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))
+
+- [#2212](https://github.com/graphcommerce-org/graphcommerce/pull/2212) [`7c9f5da`](https://github.com/graphcommerce-org/graphcommerce/commit/7c9f5da1d458a19b0316c556c75415ff28bc5b2d) - Added noValidate prop so we can use the FormAutoSubmit component to submit partial forms
+  ([@paales](https://github.com/paales))
+
+## 8.0.3-canary.6
+
+## 8.0.3-canary.5
+
+### Patch Changes
+
+- [#2212](https://github.com/graphcommerce-org/graphcommerce/pull/2212) [`7c9f5da`](https://github.com/graphcommerce-org/graphcommerce/commit/7c9f5da1d458a19b0316c556c75415ff28bc5b2d) - Added noValidate prop so we can use the FormAutoSubmit component to submit partial forms
+  ([@paales](https://github.com/paales))
+
+## 8.0.3-canary.4
+
+## 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/README.md

@@ -77,10 +77,10 @@ export default function MyComponent() {
 }
 ```
 
-## `useFormAutoSubmit`
+## `FormAutoSubmit`
 
 ```tsx
-import { useFormAutoSubmit } from '@graphcommerce/react-hook-form'
+import { FormAutoSubmit } from '@graphcommerce/react-hook-form'
 
 export default function MyAutoSubmitForm() {
   // Regular useForm hook, but you can also use useFormGqlMutation
@@ -90,20 +90,13 @@ export default function MyAutoSubmitForm() {
   const submit = handleSubmit(() => {
     console.log('submitted')
   })
-  const autoSubmitting = useFormAutoSubmit({
-    form,
-    submit,
-    fields: ['couponCode'], //optional, default: all fields
-    wait: 1200, // optional, default: 500ms
-  })
-  const disableFields = formState.isSubmitting && !autoSubmitting
 
   return (
     <form onSubmit={submit} noValidate>
+      <FormAutoSubmit control={control} submit={submit} name={['couponCode']} wait={1200}>
       <input
         type='text'
         {...register('couponCode', { required: required.couponCode })}
-        disabled={formState.isSubmitting}
       />
       {errors.couponCode?.message}
     </form>
@@ -111,10 +104,10 @@ export default function MyAutoSubmitForm() {
 }
 ```
 
-### `useFormPersist`
+### `FormPersist`
 
 ```tsx
-import { useFormAutoSubmit } from '@graphcommerce/react-hook-form'
+import { FormPersist } from '@graphcommerce/react-hook-form'
 
 export default function MyAutoSubmitForm() {
   // Regular useForm hook, but you can also use useFormGqlMutation
@@ -124,11 +117,10 @@ export default function MyAutoSubmitForm() {
   const submit = handleSubmit(() => {
     console.log('submitted')
   })
-  const autoSubmitting = useFormPersist({ form, name: 'MyForm' })
-  const disableFields = formState.isSubmitting && !autoSubmitting
 
   return (
     <form onSubmit={submit} noValidate>
+      <FormPersist form={form} name='MyForm'>
       <input
         type='text'
         {...register('couponCode', { required: required.couponCode })}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/react-hook-form",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.3",
+  "version": "8.1.0-canary.5",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -16,9 +16,9 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3",
-    "@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",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.5",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.5",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.5",
     "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'
@@ -53,6 +53,9 @@ export type UseFormAutoSubmitOptions<TForm extends UseFormReturn<V>, V extends F
  * Q: How to I resubmit if the form is modified during the request?
  *    formState.isDirty should be true after the submission
  * @see useFormGqlMutation.tsx for an example implementation
+ *
+ *
+ * @deprecated Please use the <FormAutoSubmit /> component instead. This method causes excessive rerenders.
  */
 export function useFormAutoSubmit<
   Form extends UseFormReturn<V>,
@@ -98,21 +101,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,13 +114,18 @@ export type FormAutoSubmitProps<
    */
   // eslint-disable-next-line react/no-unused-prop-types
   parallel?: boolean
-} & DebounceOptions
 
-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
+  noValidate?: boolean
+} & DebounceOptions &
+  Omit<UseWatchProps<TFieldValues>, 'defaultValue'>
+
+/**
+ * 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, noValidate, ...watchOptions } = props
 
   // We create a stable object from the values, so that we can compare them later
   const values = useMemoObject(cloneDeep(useWatch(watchOptions)))
@@ -149,7 +144,7 @@ function useFormAutoSubmit2<
     { wait, initialWait, maxWait },
   )
 
-  const valid = isValid && !isValidating
+  const valid = (noValidate ? true : isValid) && !isValidating
   const allowed = parallel || !isSubmitting
   const canSubmit = valid && allowed
 
@@ -157,17 +152,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
 }
 

package/src/useFormGqlMutation.tsx

@@ -2,7 +2,7 @@ import { MutationHookOptions, TypedDocumentNode, useMutation } from '@apollo/cli
 import { FieldValues, useForm, UseFormReturn } from 'react-hook-form'
 import { useFormGql, UseFormGqlMethods, UseFormGraphQlOptions } from './useFormGql'
 import { useFormMuiRegister, UseMuiFormRegister } from './useFormMuiRegister'
-import { useFormValidFields, UseFormValidReturn } from './useFormValidFields'
+import { UseFormValidReturn } from './useFormValidFields'
 
 export type UseFormGqlMutationReturn<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -10,7 +10,16 @@ export type UseFormGqlMutationReturn<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   V extends FieldValues = FieldValues,
 > = UseFormGqlMethods<Q, V> &
-  UseFormReturn<V> & { muiRegister: UseMuiFormRegister<V>; valid: UseFormValidReturn<V> }
+  UseFormReturn<V> & {
+    /**
+     * @deprecated Please use TextFieldElement
+     */
+    muiRegister: UseMuiFormRegister<V>
+    /**
+     * @deprecated Please use TextFieldElement showValid
+     */
+    valid: UseFormValidReturn<V>
+  }
 
 export function isFormGqlOperation<
   V extends FieldValues,
@@ -38,7 +47,5 @@ export function useFormGqlMutation<Q extends Record<string, unknown>, V extends
   const tuple = useMutation(document, operationOptions)
   const operation = useFormGql({ document, form, tuple, ...options })
   const muiRegister = useFormMuiRegister(form)
-  const valid = useFormValidFields(form, operation.required)
-
-  return { ...form, ...operation, valid, muiRegister }
+  return { ...form, ...operation, muiRegister, valid: {} }
 }

package/src/useFormGqlQuery.tsx

@@ -3,7 +3,6 @@ import { FieldValues, useForm } from 'react-hook-form'
 import { useFormGql, UseFormGraphQlOptions } from './useFormGql'
 import { UseFormGqlMutationReturn } from './useFormGqlMutation'
 import { useFormMuiRegister } from './useFormMuiRegister'
-import { useFormValidFields } from './useFormValidFields'
 
 export type UseFormGqlQueryReturn<
   Q extends Record<string, unknown>,
@@ -19,7 +18,6 @@ export function useFormGqlQuery<Q extends Record<string, unknown>, V extends Fie
   const tuple = useLazyQuery(document, operationOptions)
   const operation = useFormGql({ document, form, tuple, ...options })
   const muiRegister = useFormMuiRegister(form)
-  const valid = useFormValidFields(form, operation.required)
 
-  return { ...form, ...operation, valid, muiRegister }
+  return { ...form, ...operation, valid: {}, muiRegister }
 }

package/src/useFormMuiRegister.tsx

@@ -13,6 +13,9 @@ export type UseMuiFormRegister<TFieldValues extends FieldValues> = <
   options?: RegisterOptions<TFieldValues, TFieldName>,
 ) => Omit<UseFormRegisterReturn, 'ref'> & { inputRef: UseFormRegisterReturn['ref'] }
 
+/**
+ * @deprecated Please use use TextFieldElement, etc.
+ */
 export function useFormMuiRegister<V extends FieldValues>({
   register,
 }: Pick<UseFormReturn<V>, 'register'>) {

package/src/useFormPersist.tsx

@@ -1,5 +1,14 @@
+import { useMemoObject } from '@graphcommerce/next-ui/hooks/useMemoObject'
 import { useEffect } from 'react'
-import { FieldValues, UseFormReturn, Path, FieldPath, PathValue } from 'react-hook-form'
+import {
+  FieldValues,
+  UseFormReturn,
+  Path,
+  FieldPath,
+  PathValue,
+  useWatch,
+  useFormState,
+} from 'react-hook-form'
 
 export type UseFormPersistOptions<
   TFieldValues extends FieldValues = FieldValues,
@@ -29,24 +38,30 @@ export type UseFormPersistOptions<
  * dirty fields when the form is initialized
  *
  * Todo: Use wath callback so it won't trigger a rerender
+ *
+ * @deprecated Please use <FormPersist /> instead. This method causes INP problems.
  */
 export function useFormPersist<V extends FieldValues>(options: UseFormPersistOptions<V>) {
   const { form, name, storage = 'sessionStorage', exclude = [], persist = [] } = options
-  const { setValue, watch, formState } = form
+  const { setValue, control } = form
+
+  const formState = useFormState({ control })
+  const allFields = useWatch({ control })
 
   const dirtyFieldKeys = Object.keys(formState.dirtyFields) as Path<V>[]
 
-  // Get all dirty field values and exclude sensitive data
+  // // Get all dirty field values and exclude sensitive data
   const newValues = Object.fromEntries(
-    dirtyFieldKeys.filter((f) => !exclude.includes(f)).map((field) => [field, watch(field)]),
+    dirtyFieldKeys.filter((f) => !exclude.includes(f)).map((field) => [field, allFields[field]]),
   )
 
   // Amend the values with the values that should always be persisted
   persist.forEach((persistKey) => {
-    const value = watch(persistKey)
+    const value = allFields[persistKey]
     if (value) newValues[persistKey] = value
   })
 
+  // const valuesJson = useMemoObject(newValues)
   const valuesJson = JSON.stringify(newValues)
 
   // Restore changes
@@ -82,3 +97,8 @@ export function useFormPersist<V extends FieldValues>(options: UseFormPersistOpt
     }
   }, [name, storage, valuesJson])
 }
+
+export function FormPersist<V extends FieldValues>(props: UseFormPersistOptions<V>) {
+  useFormPersist(props)
+  return null
+}

package/src/useFormValidFields.tsx

@@ -7,6 +7,8 @@ export type UseFormValidReturn<TFieldValues> = Partial<Record<Path<TFieldValues>
  * ### useFormValidFields
  *
  * Record field names as key and boolean as value indicating whether the field is valid
+ *
+ * @deprecated Please use TextInputElement, SelectElement, etc. with the showValid prop
  */
 export function useFormValidFields<TFieldValues extends FieldValues>(
   form: Pick<UseFormReturn<TFieldValues>, 'watch' | 'formState'>,

package/src/utils/useDebounceCallback.ts

@@ -3,7 +3,7 @@ import useEventCallback from '@mui/utils/useEventCallback'
 import { useEffect, useRef } from 'react'
 import debounce, { DebounceOptions } from './debounce'
 
-export function useDebouncedCallback<T extends (...args: unknown[]) => unknown>(
+export function useDebouncedCallback<T extends (...args: any[]) => unknown>(
   callback: T,
   { initialWait, maxWait, wait }: DebounceOptions = {},
 ): T {