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

package/CHANGELOG.md

@@ -1,10 +1,10 @@
 # Change Log
 
-## 9.0.4-canary.0
+## 9.0.4-canary.2
 
-## 9.0.3
+## 9.0.4-canary.1
 
-## 9.0.3-canary.0
+## 9.0.4-canary.0
 
 ## 9.0.2
 
@@ -12,16 +12,6 @@
 
 - [`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-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.0",
+  "version": "9.0.4-canary.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -13,9 +13,9 @@
   },
   "peerDependencies": {
     "@apollo/client": "*",
-    "@graphcommerce/eslint-config-pwa": "^9.0.4-canary.0",
-    "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.0",
-    "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.0",
+    "@graphcommerce/eslint-config-pwa": "^9.0.4-canary.2",
+    "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.2",
+    "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.2",
     "@mui/utils": "^5",
     "graphql": "^16.6.0",
     "react": "^18.2.0",

package/src/ComposedForm/types.ts

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

package/src/ComposedForm/useFormCompose.ts

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

package/src/useFormAutoSubmit.tsx

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

package/src/useFormGql.tsx

@@ -2,7 +2,6 @@ import type {
   FetchResult,
   LazyQueryHookOptions,
   LazyQueryResultTuple,
-  MaybeMasked,
   MutationHookOptions,
   MutationTuple,
   TypedDocumentNode,
@@ -17,10 +16,7 @@ import type { UseGqlDocumentHandler } from './useGqlDocumentHandler'
 import { useGqlDocumentHandler } from './useGqlDocumentHandler'
 import { tryAsync } from './utils/tryTuple'
 
-export type OnCompleteFn<Q, V> = (
-  data: FetchResult<MaybeMasked<Q>>,
-  variables: V,
-) => void | Promise<void>
+export type OnCompleteFn<Q, V> = (data: FetchResult<Q>, variables: V) => void | Promise<void>
 
 type UseFormGraphQLCallbacks<Q, V> = {
   /**
@@ -88,7 +84,7 @@ export type UseFormGqlMethods<Q, V extends FieldValues> = Omit<
   'encode' | 'type'
 > &
   Pick<UseFormReturn<V>, 'handleSubmit'> & {
-    data?: MaybeMasked<Q> | null
+    data?: Q | null
     error?: ApolloError
     submittedVariables?: V
   }

package/src/useFormGqlMutation.tsx

@@ -15,21 +15,18 @@ 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>,
->(form: UseFormReturn<V>): form is UseFormGqlMutationReturn<Q, V> {
-  return typeof (form as UseFormGqlMutationReturn<Q, V>).muiRegister === 'function'
+  // 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'
 }
 
 export function assertFormGqlOperation<

package/src/useFormMuiRegister.tsx

@@ -13,9 +13,7 @@ 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 { FieldPath, FieldValues, Path, PathValue, UseFormReturn } from 'react-hook-form'
+import type { Control, FieldPath, FieldValues, PathValue, UseFormSetValue } from 'react-hook-form'
 import { useFormState, useWatch } from 'react-hook-form'
 
 export type UseFormPersistOptions<
@@ -9,7 +9,10 @@ export type UseFormPersistOptions<
   TContext = any,
 > = {
   /** Instance of current form, used to watch value */
-  form: UseFormReturn<TFieldValues, TContext>
+  form: {
+    control: Control<TFieldValues, TContext>
+    setValue: UseFormSetValue<TFieldValues>
+  }
 
   /** Name of the key how it will be stored in the storage. */
   name: string
@@ -42,7 +45,7 @@ export function useFormPersist<V extends FieldValues>(options: UseFormPersistOpt
   const formState = useFormState({ control })
   const allFields = useWatch({ control })
 
-  const dirtyFieldKeys = Object.keys(formState.dirtyFields) as Path<V>[]
+  const dirtyFieldKeys = Object.keys(formState.dirtyFields) as FieldPath<V>[]
 
   // // Get all dirty field values and exclude sensitive data
   const newValues = Object.fromEntries(
@@ -67,12 +70,9 @@ export function useFormPersist<V extends FieldValues>(options: UseFormPersistOpt
 
       const storedValues = JSON.parse(storedFormStr) as FieldValues
       if (storedValues) {
-        const entries = Object.entries(storedValues) as [Path<V>, PathValue<V, Path<V>>][]
+        const entries = Object.entries(storedValues) as [FieldPath<V>, PathValue<V, FieldPath<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,7 +1,9 @@
-import type { FieldValues, Path, UseFormReturn } from 'react-hook-form'
+import type { FieldPath, FieldValues, UseFormReturn } from 'react-hook-form'
 import type { IsRequired } from './useGqlDocumentHandler'
 
-export type UseFormValidReturn<TFieldValues> = Partial<Record<Path<TFieldValues>, boolean>>
+export type UseFormValidReturn<TFieldValues extends FieldValues> = Partial<
+  Record<FieldPath<TFieldValues>, boolean>
+>
 
 /**
  * ### useFormValidFields
@@ -16,10 +18,10 @@ export function useFormValidFields<TFieldValues extends FieldValues>(
   required: IsRequired<TFieldValues>,
 ): UseFormValidReturn<TFieldValues> {
   const { watch, formState } = form
-  const fields: Partial<Record<Path<TFieldValues>, boolean>> = {}
+  const fields: Partial<Record<FieldPath<TFieldValues>, boolean>> = {}
 
   Object.keys(required).forEach((key) => {
-    fields[key] = !formState.errors[key] && watch(key as Path<TFieldValues>)
+    fields[key] = !formState.errors[key] && watch(key as FieldPath<TFieldValues>)
   })
 
   return fields

package/src/useGqlDocumentHandler.tsx

@@ -1,7 +1,7 @@
 import type { TypedDocumentNode } from '@apollo/client'
 import {
-  type DefinitionNode,
   Kind,
+  type DefinitionNode,
   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 {
-  DebounceSettings,
-  DebounceSettingsLeading,
   DebouncedFunc,
   DebouncedFuncLeading,
+  DebounceSettings,
+  DebounceSettingsLeading,
 } from 'lodash'
 import debounce from 'lodash/debounce'
 import { useMemo } from 'react'
@@ -13,14 +13,15 @@ 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.
  *
@@ -30,7 +31,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.
- * @return Returns the new debounced function.
+ * @returns Returns the new debounced function.
  */
 export function useDebounce<T extends (...args: never[]) => unknown>(
   func: T,