@graphcommerce/react-hook-form 8.0.6-canary.3 → 8.0.6

package/CHANGELOG.md

@@ -1,29 +1,6 @@
 # Change Log
 
-## 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.6
 
 ## 8.0.5
 

package/README.md

@@ -77,10 +77,10 @@ export default function MyComponent() {
 }
 ```
 
-## `FormAutoSubmit`
+## `useFormAutoSubmit`
 
 ```tsx
-import { FormAutoSubmit } from '@graphcommerce/react-hook-form'
+import { useFormAutoSubmit } from '@graphcommerce/react-hook-form'
 
 export default function MyAutoSubmitForm() {
   // Regular useForm hook, but you can also use useFormGqlMutation
@@ -90,13 +90,20 @@ 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>
@@ -104,10 +111,10 @@ export default function MyAutoSubmitForm() {
 }
 ```
 
-### `FormPersist`
+### `useFormPersist`
 
 ```tsx
-import { FormPersist } from '@graphcommerce/react-hook-form'
+import { useFormAutoSubmit } from '@graphcommerce/react-hook-form'
 
 export default function MyAutoSubmitForm() {
   // Regular useForm hook, but you can also use useFormGqlMutation
@@ -117,10 +124,11 @@ 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.3",
+  "version": "8.0.6",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -16,9 +16,9 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3",
-    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.3",
-    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.3",
-    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.3",
+    "@graphcommerce/eslint-config-pwa": "^8.0.6",
+    "@graphcommerce/prettier-config-pwa": "^8.0.6",
+    "@graphcommerce/typescript-config-pwa": "^8.0.6",
     "graphql": "^16.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/src/useFormAutoSubmit.tsx

@@ -15,6 +15,7 @@ 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 */
@@ -53,9 +54,6 @@ 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 { UseFormValidReturn } from './useFormValidFields'
+import { useFormValidFields, UseFormValidReturn } from './useFormValidFields'
 
 export type UseFormGqlMutationReturn<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -10,16 +10,7 @@ export type UseFormGqlMutationReturn<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   V extends FieldValues = FieldValues,
 > = UseFormGqlMethods<Q, V> &
-  UseFormReturn<V> & {
-    /**
-     * @deprecated Please use TextFieldElement
-     */
-    muiRegister: UseMuiFormRegister<V>
-    /**
-     * @deprecated Please use TextFieldElement showValid
-     */
-    valid: UseFormValidReturn<V>
-  }
+  UseFormReturn<V> & { muiRegister: UseMuiFormRegister<V>; valid: UseFormValidReturn<V> }
 
 export function isFormGqlOperation<
   V extends FieldValues,
@@ -47,5 +38,7 @@ 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)
-  return { ...form, ...operation, muiRegister, valid: {} }
+  const valid = useFormValidFields(form, operation.required)
+
+  return { ...form, ...operation, valid, muiRegister }
 }

package/src/useFormGqlQuery.tsx

@@ -3,6 +3,7 @@ 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>,
@@ -18,6 +19,7 @@ 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,9 +13,6 @@ 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,14 +1,5 @@
-import { useMemoObject } from '@graphcommerce/next-ui/hooks/useMemoObject'
 import { useEffect } from 'react'
-import {
-  FieldValues,
-  UseFormReturn,
-  Path,
-  FieldPath,
-  PathValue,
-  useWatch,
-  useFormState,
-} from 'react-hook-form'
+import { FieldValues, UseFormReturn, Path, FieldPath, PathValue } from 'react-hook-form'
 
 export type UseFormPersistOptions<
   TFieldValues extends FieldValues = FieldValues,
@@ -38,30 +29,24 @@ 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, control } = form
-
-  const formState = useFormState({ control })
-  const allFields = useWatch({ control })
+  const { setValue, watch, formState } = form
 
   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, allFields[field]]),
+    dirtyFieldKeys.filter((f) => !exclude.includes(f)).map((field) => [field, watch(field)]),
   )
 
   // Amend the values with the values that should always be persisted
   persist.forEach((persistKey) => {
-    const value = allFields[persistKey]
+    const value = watch(persistKey)
     if (value) newValues[persistKey] = value
   })
 
-  // const valuesJson = useMemoObject(newValues)
   const valuesJson = JSON.stringify(newValues)
 
   // Restore changes
@@ -97,8 +82,3 @@ 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,8 +7,6 @@ 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'>,