@graphcommerce/react-hook-form 8.0.6-canary.0 → 8.0.6-canary.2

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Change Log
 
+## 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

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.0.6-canary.0",
+  "version": "8.0.6-canary.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -16,9 +16,9 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3",
-    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.0",
-    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.0",
-    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.0",
+    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.2",
+    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.2",
+    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.2",
     "graphql": "^16.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/src/useFormAutoSubmit.tsx

@@ -15,7 +15,6 @@ import {
 } from 'react-hook-form'
 import { DebounceOptions } from './utils/debounce'
 import { useDebouncedCallback } from './utils/useDebounceCallback'
-import { useFormValidFields } from './useFormValidFields'
 
 export type UseFormAutoSubmitOptions<TForm extends UseFormReturn<V>, V extends FieldValues> = {
   /** Instance of current form */
@@ -54,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>,

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'>,