@graphcommerce/react-hook-form 9.0.4-canary.9 → 9.0.4

package/CHANGELOG.md

@@ -1,35 +1,27 @@
 # Change Log
 
-## 9.0.4-canary.9
+## 9.0.4
 
-## 9.0.4-canary.8
+## 9.0.3
 
-## 9.0.4-canary.7
+## 9.0.3-canary.0
 
-## 9.0.4-canary.6
-
-## 9.0.4-canary.5
-
-## 9.0.4-canary.4
-
-## 9.0.4-canary.3
+## 9.0.2
 
 ### Patch Changes
 
-- [#2477](https://github.com/graphcommerce-org/graphcommerce/pull/2477) [`8015eab`](https://github.com/graphcommerce-org/graphcommerce/commit/8015eabc130dacf1f2703980cd5f0ad2c550aa4d) - Upgraded to @apollo/client 3.12.3 without impacting typescript compilation performance. ([@paales](https://github.com/paales))
-
-## 9.0.4-canary.2
-
-## 9.0.4-canary.1
-
-## 9.0.4-canary.0
+- [`c40c559`](https://github.com/graphcommerce-org/graphcommerce/commit/c40c5596bcc8f3c2e1e15c9e6ad85bfa1f9154b0) - Solve an issue where the payment submission would remain in a spinning state when placing an order failed: `useFormGql` will now set `root` error on the form when there is an error response on the GraphQL operation, an error is thrown in onBeforeSubmit and in onSuccess. ([@paales](https://github.com/paales))
 
-## 9.0.2
+## 9.0.2-canary.0
 
 ### Patch Changes
 
 - [`c40c559`](https://github.com/graphcommerce-org/graphcommerce/commit/c40c5596bcc8f3c2e1e15c9e6ad85bfa1f9154b0) - Solve an issue where the payment submission would remain in a spinning state when placing an order failed: `useFormGql` will now set `root` error on the form when there is an error response on the GraphQL operation, an error is thrown in onBeforeSubmit and in onSuccess. ([@paales](https://github.com/paales))
 
+## 9.0.1
+
+## 9.0.1-canary.1
+
 ## 9.0.0
 
 ### Major Changes

package/package.json

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

package/src/ComposedForm/types.ts

@@ -1,17 +1,12 @@
 import type { ApolloError } from '@apollo/client'
-import type { FieldValues, FormState, UseFormHandleSubmit, UseFormTrigger } from 'react-hook-form'
+import type { FieldValues, FormState, UseFormReturn } from 'react-hook-form'
 import type { SetOptional } from 'type-fest'
 
-export type MinimalUseFormReturn<TFieldValues extends FieldValues = FieldValues> = {
-  formState: FormState<TFieldValues>
-  trigger: UseFormTrigger<TFieldValues>
-}
-
-export type UseFormComposeOptions<TFieldValues extends FieldValues = FieldValues> = {
+export type UseFormComposeOptions<V extends FieldValues = FieldValues> = {
   /** The form that is used to submit */
-  form: MinimalUseFormReturn<TFieldValues>
+  form: UseFormReturn<V>
   /** Method to submit the form */
-  submit: ReturnType<UseFormHandleSubmit<TFieldValues>>
+  submit: ReturnType<UseFormReturn<V>['handleSubmit']>
 
   /** Identifier of the specific */
   key: string

package/src/ComposedForm/useFormCompose.ts

@@ -1,11 +1,11 @@
 import { useContext, useEffect } from 'react'
-import type { FieldValues } from 'react-hook-form'
+import type { FieldValues, UseFormReturn } from 'react-hook-form'
 import { isFormGqlOperation } from '../useFormGqlMutation'
 import { composedFormContext } from './context'
-import type { MinimalUseFormReturn, UseFormComposeOptions } from './types'
+import type { UseFormComposeOptions } from './types'
 
-export function useFormCompose<TFieldValues extends FieldValues = FieldValues>(
-  fields: UseFormComposeOptions<TFieldValues>,
+export function useFormCompose<V extends Record<string, unknown>>(
+  fields: UseFormComposeOptions<V>,
 ) {
   const [state, dispatch] = useContext(composedFormContext)
   const { form, key, step, submit } = fields
@@ -18,7 +18,7 @@ export function useFormCompose<TFieldValues extends FieldValues = FieldValues>(
   }, [dispatch, key, step])
 
   useEffect(() => {
-    dispatch({ type: 'ASSIGN', key, form: form as MinimalUseFormReturn, submit })
+    dispatch({ type: 'ASSIGN', key, form: form as UseFormReturn<FieldValues>, submit })
   }, [dispatch, fields, form, key, submit])
 
   const error = isFormGqlOperation(form) ? form.error : undefined

package/src/useFormAutoSubmit.tsx

@@ -4,12 +4,11 @@ import { useMemoObject } from '@graphcommerce/next-ui/hooks/useMemoObject'
 import { cloneDeep } from '@apollo/client/utilities'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { debounce } from '@mui/material'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { startTransition, useCallback, useEffect, useRef, useState } from 'react'
 import type {
   DeepPartialSkipArrayKey,
   FieldPath,
   FieldValues,
-  UseFormHandleSubmit,
   UseFormReturn,
   UseWatchProps,
 } from 'react-hook-form'
@@ -106,7 +105,7 @@ export type FormAutoSubmitProps<TFieldValues extends FieldValues = FieldValues>
 
   /** SubmitHandler */
   // eslint-disable-next-line react/no-unused-prop-types
-  submit: ReturnType<UseFormHandleSubmit<TFieldValues>>
+  submit: ReturnType<UseFormReturn<TFieldValues>['handleSubmit']>
 
   /**
    * When a current submission is already in flight, should we wait for it to finish before

package/src/useFormGqlMutation.tsx

@@ -15,18 +15,21 @@ export type UseFormGqlMutationReturn<
   V extends FieldValues = FieldValues,
 > = UseFormGqlMethods<Q, V> &
   UseFormReturn<V> & {
-    /** @deprecated Please use TextFieldElement */
+    /**
+     * @deprecated Please use TextFieldElement
+     */
     muiRegister: UseMuiFormRegister<V>
-    /** @deprecated Please use TextFieldElement showValid */
+    /**
+     * @deprecated Please use TextFieldElement showValid
+     */
     valid: UseFormValidReturn<V>
   }
 
 export function isFormGqlOperation<
   V extends FieldValues,
   Q extends Record<string, unknown> = Record<string, unknown>,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-redundant-type-constituents
->(form: any): form is UseFormGqlMutationReturn<Q, V> {
-  return typeof (form as UseFormGqlMutationReturn<Q, V>).submittedVariables !== 'undefined'
+>(form: UseFormReturn<V>): form is UseFormGqlMutationReturn<Q, V> {
+  return typeof (form as UseFormGqlMutationReturn<Q, V>).muiRegister === 'function'
 }
 
 export function assertFormGqlOperation<

package/src/useFormMuiRegister.tsx

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

package/src/useFormPersist.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unused-prop-types */
 import { useEffect } from 'react'
-import type { Control, FieldPath, FieldValues, PathValue, UseFormSetValue } from 'react-hook-form'
+import type { FieldPath, FieldValues, Path, PathValue, UseFormReturn } from 'react-hook-form'
 import { useFormState, useWatch } from 'react-hook-form'
 
 export type UseFormPersistOptions<
@@ -9,10 +9,7 @@ export type UseFormPersistOptions<
   TContext = any,
 > = {
   /** Instance of current form, used to watch value */
-  form: {
-    control: Control<TFieldValues, TContext>
-    setValue: UseFormSetValue<TFieldValues>
-  }
+  form: UseFormReturn<TFieldValues, TContext>
 
   /** Name of the key how it will be stored in the storage. */
   name: string
@@ -45,7 +42,7 @@ export function useFormPersist<V extends FieldValues>(options: UseFormPersistOpt
   const formState = useFormState({ control })
   const allFields = useWatch({ control })
 
-  const dirtyFieldKeys = Object.keys(formState.dirtyFields) as FieldPath<V>[]
+  const dirtyFieldKeys = Object.keys(formState.dirtyFields) as Path<V>[]
 
   // // Get all dirty field values and exclude sensitive data
   const newValues = Object.fromEntries(
@@ -70,9 +67,12 @@ export function useFormPersist<V extends FieldValues>(options: UseFormPersistOpt
 
       const storedValues = JSON.parse(storedFormStr) as FieldValues
       if (storedValues) {
-        const entries = Object.entries(storedValues) as [FieldPath<V>, PathValue<V, FieldPath<V>>][]
+        const entries = Object.entries(storedValues) as [Path<V>, PathValue<V, Path<V>>][]
         entries.forEach(([entryName, value]) =>
-          setValue(entryName, value, { shouldDirty: true, shouldValidate: true }),
+          setValue(entryName, value, {
+            shouldDirty: true,
+            shouldValidate: true,
+          }),
         )
       }
     } catch {

package/src/useFormValidFields.tsx

@@ -1,9 +1,7 @@
-import type { FieldPath, FieldValues, UseFormReturn } from 'react-hook-form'
+import type { FieldValues, Path, UseFormReturn } from 'react-hook-form'
 import type { IsRequired } from './useGqlDocumentHandler'
 
-export type UseFormValidReturn<TFieldValues extends FieldValues> = Partial<
-  Record<FieldPath<TFieldValues>, boolean>
->
+export type UseFormValidReturn<TFieldValues> = Partial<Record<Path<TFieldValues>, boolean>>
 
 /**
  * ### useFormValidFields
@@ -18,10 +16,10 @@ export function useFormValidFields<TFieldValues extends FieldValues>(
   required: IsRequired<TFieldValues>,
 ): UseFormValidReturn<TFieldValues> {
   const { watch, formState } = form
-  const fields: Partial<Record<FieldPath<TFieldValues>, boolean>> = {}
+  const fields: Partial<Record<Path<TFieldValues>, boolean>> = {}
 
   Object.keys(required).forEach((key) => {
-    fields[key] = !formState.errors[key] && watch(key as FieldPath<TFieldValues>)
+    fields[key] = !formState.errors[key] && watch(key as Path<TFieldValues>)
   })
 
   return fields

package/src/useGqlDocumentHandler.tsx

@@ -1,7 +1,7 @@
 import type { TypedDocumentNode } from '@apollo/client'
 import {
-  Kind,
   type DefinitionNode,
+  Kind,
   type ListValueNode,
   type NullValueNode,
   type ObjectValueNode,

package/src/utils/useDebounce.ts

@@ -2,10 +2,10 @@
 import { useMemoObject } from '@graphcommerce/next-ui/hooks/useMemoObject'
 import useEventCallback from '@mui/utils/useEventCallback'
 import type {
-  DebouncedFunc,
-  DebouncedFuncLeading,
   DebounceSettings,
   DebounceSettingsLeading,
+  DebouncedFunc,
+  DebouncedFuncLeading,
 } from 'lodash'
 import debounce from 'lodash/debounce'
 import { useMemo } from 'react'
@@ -13,15 +13,14 @@ import { useMemo } from 'react'
 export type { DebounceSettings, DebounceSettingsLeading, DebouncedFunc, DebouncedFuncLeading }
 
 /**
- * Creates a debounced function that delays invoking func until after wait milliseconds have elapsed
- * since the last time the debounced function was invoked. The debounced function comes with a
- * cancel method to cancel delayed invocations and a flush method to immediately invoke them.
- * Provide an options object to indicate that func should be invoked on the leading and/or trailing
- * edge of the wait timeout. Subsequent calls to the debounced function return the result of the
- * last func invocation.
+ * Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since
+ * the last time the debounced function was invoked. The debounced function comes with a cancel method to
+ * cancel delayed invocations and a flush method to immediately invoke them. Provide an options object to
+ * indicate that func should be invoked on the leading and/or trailing edge of the wait timeout. Subsequent
+ * calls to the debounced function return the result of the last func invocation.
  *
- * Note: If leading and trailing options are true, func is invoked on the trailing edge of the
- * timeout only if the the debounced function is invoked more than once during the wait timeout.
+ * Note: If leading and trailing options are true, func is invoked on the trailing edge of the timeout only
+ * if the the debounced function is invoked more than once during the wait timeout.
  *
  * See David Corbacho’s article for details over the differences between _.debounce and _.throttle.
  *
@@ -31,7 +30,7 @@ export type { DebounceSettings, DebounceSettingsLeading, DebouncedFunc, Debounce
  * @param options.leading Specify invoking on the leading edge of the timeout.
  * @param options.maxWait The maximum time func is allowed to be delayed before it’s invoked.
  * @param options.trailing Specify invoking on the trailing edge of the timeout.
- * @returns Returns the new debounced function.
+ * @return Returns the new debounced function.
  */
 export function useDebounce<T extends (...args: never[]) => unknown>(
   func: T,