@graphcommerce/react-hook-form 9.0.0-canary.99 → 9.0.0

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.0-canary.99",
+  "version": "9.0.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -11,14 +11,11 @@
       "project": "./tsconfig.json"
     }
   },
-  "devDependencies": {
-    "@testing-library/react": "^14.3.1"
-  },
   "peerDependencies": {
-    "@apollo/client": "^3",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.99",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.99",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.99",
+    "@apollo/client": "*",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0",
     "@mui/utils": "^5",
     "graphql": "^16.6.0",
     "react": "^18.2.0",
@@ -26,7 +23,7 @@
     "react-hook-form": "^7"
   },
   "dependencies": {
-    "@types/lodash": "^4.17.7",
+    "@types/lodash": "^4.17.13",
     "lodash": "^4.17.21"
   }
 }

package/src/ComposedForm/ComposedSubmit.tsx

@@ -1,9 +1,8 @@
 import { ApolloError } from '@apollo/client'
 import React, { useContext, useEffect, useRef } from 'react'
-import { GlobalError } from 'react-hook-form'
 import { isFormGqlOperation } from '../useFormGqlMutation'
 import { composedFormContext } from './context'
-import { ComposedSubmitRenderComponentProps } from './types'
+import type { ComposedSubmitRenderComponentProps } from './types'
 
 export type ComposedSubmitProps = {
   onSubmitSuccessful?: () => void

package/src/ComposedForm/context.ts

@@ -1,4 +1,4 @@
 import React from 'react'
-import { ComposedFormContext } from './types'
+import type { ComposedFormContext } from './types'
 
 export const composedFormContext = React.createContext(undefined as unknown as ComposedFormContext)

package/src/ComposedForm/reducer.ts

@@ -1,5 +1,5 @@
 import { isFormGqlOperation } from '../useFormGqlMutation'
-import { ComposedFormReducer, ComposedFormState } from './types'
+import type { ComposedFormReducer, ComposedFormState } from './types'
 
 function updateFormStateIfNecessary(state: ComposedFormState): ComposedFormState {
   const formEntries = Object.entries(state.forms)

package/src/ComposedForm/types.ts

@@ -1,5 +1,5 @@
-import { ApolloError } from '@apollo/client'
-import type { FieldValues, FormState, GlobalError, UseFormReturn } from 'react-hook-form'
+import type { ApolloError } from '@apollo/client'
+import type { FieldValues, FormState, UseFormReturn } from 'react-hook-form'
 import type { SetOptional } from 'type-fest'
 
 export type UseFormComposeOptions<V extends FieldValues = FieldValues> = {

package/src/ComposedForm/useFormCompose.ts

@@ -1,8 +1,8 @@
 import { useContext, useEffect } from 'react'
-import { FieldValues, UseFormReturn } from 'react-hook-form'
+import type { FieldValues, UseFormReturn } from 'react-hook-form'
 import { isFormGqlOperation } from '../useFormGqlMutation'
 import { composedFormContext } from './context'
-import { UseFormComposeOptions } from './types'
+import type { UseFormComposeOptions } from './types'
 
 export function useFormCompose<V extends Record<string, unknown>>(
   fields: UseFormComposeOptions<V>,

package/src/useFormAutoSubmit.tsx

@@ -1,20 +1,20 @@
 /* eslint-disable react/no-unused-prop-types */
-import { cloneDeep } from '@apollo/client/utilities'
 // eslint-disable-next-line import/no-extraneous-dependencies
 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 {
+import React, { startTransition, useCallback, useEffect, useRef, useState } from 'react'
+import type {
   DeepPartialSkipArrayKey,
   FieldPath,
   FieldValues,
   UseFormReturn,
   UseWatchProps,
-  useFormState,
-  useWatch,
 } from 'react-hook-form'
-import { DebounceSettings, useDebounce } from './utils/useDebounce'
+import { useFormState, useWatch } from 'react-hook-form'
+import type { DebounceSettings } from './utils/useDebounce'
+import { useDebounce } from './utils/useDebounce'
 
 export type UseFormAutoSubmitOptions<TForm extends UseFormReturn<V>, V extends FieldValues> = {
   /** Instance of current form */
@@ -48,14 +48,13 @@ export type UseFormAutoSubmitOptions<TForm extends UseFormReturn<V>, V extends F
  * Q: The form keeps submitting in loops: A: formState.isDirty should be false after submission Make
  * sure that you call `reset(getValues())` after submission.
  *
+ * @deprecated Please use the <FormAutoSubmit /> component instead. This method causes excessive
+ *   rerenders.
  * @see useFormGqlMutation.tsx for an example implementation
  *
  * 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>,
@@ -128,7 +127,7 @@ export type FormAutoSubmitProps<TFieldValues extends FieldValues = FieldValues>
 } & Omit<UseWatchProps<TFieldValues>, 'defaultValue'> &
   DebounceSettings
 
-export function useAutoSubmitBase<TFieldValues extends FieldValues = FieldValues>(
+function useAutoSubmitBase<TFieldValues extends FieldValues = FieldValues>(
   props: FormAutoSubmitProps<TFieldValues>,
 ) {
   const {
@@ -152,8 +151,10 @@ export function useAutoSubmitBase<TFieldValues extends FieldValues = FieldValues
   const submitDebounced = useDebounce(
     async () => {
       try {
-        oldValues.current = values
-        await submit()
+        await new Promise((resolve) => {
+          oldValues.current = values
+          resolve(null)
+        }).then(() => submit())
       } catch (e) {
         // We're not interested if the submission actually succeeds, that should be handled by the form itself.
       }
@@ -173,7 +174,8 @@ export function useAutoSubmitBase<TFieldValues extends FieldValues = FieldValues
 }
 
 /**
- * This is made a components so the useWatch that is used here doesn't retrigger the rerender of the parent component.
+ * 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>,

package/src/useFormGql.tsx

@@ -1,30 +1,35 @@
-import {
+import type {
   ApolloError,
   FetchResult,
+  LazyQueryHookOptions,
   LazyQueryResultTuple,
+  MaybeMasked,
+  MutationHookOptions,
   MutationTuple,
   TypedDocumentNode,
-  isApolloError,
-  MutationHookOptions,
-  LazyQueryHookOptions,
 } from '@apollo/client'
+import { isApolloError } from '@apollo/client'
 import { getOperationName } from '@apollo/client/utilities'
 import useEventCallback from '@mui/utils/useEventCallback'
 import { useEffect, useRef } from 'react'
-import { DefaultValues, FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form'
+import type { DefaultValues, FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form'
 import diff from './diff'
-import { useGqlDocumentHandler, UseGqlDocumentHandler } from './useGqlDocumentHandler'
+import type { UseGqlDocumentHandler } from './useGqlDocumentHandler'
+import { useGqlDocumentHandler } from './useGqlDocumentHandler'
 import { tryAsync } from './utils/tryTuple'
 
-export type OnCompleteFn<Q, V> = (data: FetchResult<Q>, variables: V) => void | Promise<void>
+export type OnCompleteFn<Q, V> = (
+  data: FetchResult<MaybeMasked<Q>>,
+  variables: V,
+) => void | Promise<void>
 
 type UseFormGraphQLCallbacks<Q, V> = {
   /**
    * Allows you to modify the variablels computed by the form to make it compatible with the GraphQL
    * Mutation.
    *
-   * When returning false, it will silently stop the submission.
-   * When an error is thrown, it will be set as an ApolloError
+   * When returning false, it will silently stop the submission. When an error is thrown, it will be
+   * set as an ApolloError
    */
   onBeforeSubmit?: (variables: V) => V | false | Promise<V | false>
   /**
@@ -37,26 +42,27 @@ type UseFormGraphQLCallbacks<Q, V> = {
   /**
    * @deprecated Not used anymore, is now the default
    *
-   * Changes:
-   * - Restores `defaultValues` functionality to original functionality, use `values` instead.
-   * - Does not reset the form after submission, use `values` instead.
-   * - Does not 'encode' the variables, use onBeforeSubmit instead.
+   *   Changes:
+   *
+   *   - Restores `defaultValues` functionality to original functionality, use `values` instead.
+   *   - Does not reset the form after submission, use `values` instead.
+   *   - Does not 'encode' the variables, use onBeforeSubmit instead.
    *
-   * Future plans:
-   * - Remove the useMutation/useLazyQuery tuple and use a reguler client.mutation() call.
-   * - Write graphql errors to setError('root')
-   * - Remove onBeforeSubmit, onComplete and the handleSubmit rewrite with a single mutate() callback.
+   *   Future plans:
    *
+   *   - Remove the useMutation/useLazyQuery tuple and use a reguler client.mutation() call.
+   *   - Write graphql errors to setError('root')
+   *   - Remove onBeforeSubmit, onComplete and the handleSubmit rewrite with a single mutate() callback.
    *
-   * ```ts
-   * const { handleSubmit } = useFormGqlMutation();
+   *   ```ts
+   *   const { handleSubmit } = useFormGqlMutation()
    *
-   * const submit = handleSubmit((formValues, mutate) => {
-   *    // onBeforeSubmit now simply is code before mutate() where you can return early for example or set errors.
-   *    const result = mutate() // executes the mutation and automatically sets generic errors with setError('root')
-   *    // onComplete: now simply use the result after the form, to for example reset the form, or do other things.
-   * })
-   * ```
+   *   const submit = handleSubmit((formValues, mutate) => {
+   *     // onBeforeSubmit now simply is code before mutate() where you can return early for example or set errors.
+   *     const result = mutate() // executes the mutation and automatically sets generic errors with setError('root')
+   *     // onComplete: now simply use the result after the form, to for example reset the form, or do other things.
+   *   })
+   *   ```
    */
   experimental_useV2?: boolean
   /**
@@ -67,7 +73,8 @@ type UseFormGraphQLCallbacks<Q, V> = {
   deprecated_useV1?: boolean
 
   /**
-   * Only submit the form when there are dirty fields. If all fields are clean, we skip the submission.
+   * Only submit the form when there are dirty fields. If all fields are clean, we skip the
+   * submission.
    *
    * Form is still set to isSubmitted and isSubmitSuccessful.
    */
@@ -82,7 +89,7 @@ export type UseFormGqlMethods<Q, V extends FieldValues> = Omit<
   'encode' | 'type'
 > &
   Pick<UseFormReturn<V>, 'handleSubmit'> & {
-    data?: Q | null
+    data?: MaybeMasked<Q> | null
     error?: ApolloError
     submittedVariables?: V
   }
@@ -154,7 +161,7 @@ export function useFormGql<Q, V extends FieldValues>(
         : true
 
       if (skipUnchanged && !hasDirtyFields) {
-        console.log(
+        console.info(
           `[useFormGql ${getOperationName(document)}] skipped submission, no dirty fields`,
         )
         await onValid(formValues, event)
@@ -173,7 +180,7 @@ export function useFormGql<Q, V extends FieldValues>(
         if (isApolloError(onBeforeSubmitError)) {
           returnedError.current = onBeforeSubmitError
         } else {
-          console.log(
+          console.info(
             'A non ApolloError was thrown during the onBeforeSubmit handler.',
             onBeforeSubmitError,
           )
@@ -209,7 +216,7 @@ export function useFormGql<Q, V extends FieldValues>(
         if (isApolloError(onCompleteError)) {
           returnedError.current = onCompleteError
         } else {
-          console.log(
+          console.info(
             'A non ApolloError was thrown during the onComplete handler.',
             onCompleteError,
           )

package/src/useFormGqlMutation.tsx

@@ -1,8 +1,12 @@
-import { MutationHookOptions, TypedDocumentNode, useMutation } from '@apollo/client'
-import { FieldValues, useForm, UseFormReturn } from 'react-hook-form'
-import { useFormGql, UseFormGqlMethods, UseFormGraphQlOptions } from './useFormGql'
-import { useFormMuiRegister, UseMuiFormRegister } from './useFormMuiRegister'
-import { UseFormValidReturn } from './useFormValidFields'
+import type { MutationHookOptions, TypedDocumentNode } from '@apollo/client'
+import { useMutation } from '@apollo/client'
+import type { FieldValues, UseFormReturn } from 'react-hook-form'
+import { useForm } from 'react-hook-form'
+import type { UseFormGqlMethods, UseFormGraphQlOptions } from './useFormGql'
+import { useFormGql } from './useFormGql'
+import type { UseMuiFormRegister } from './useFormMuiRegister'
+import { useFormMuiRegister } from './useFormMuiRegister'
+import type { UseFormValidReturn } from './useFormValidFields'
 
 export type UseFormGqlMutationReturn<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -33,7 +37,7 @@ export function assertFormGqlOperation<
   Q extends Record<string, unknown> = Record<string, unknown>,
 >(form: UseFormReturn<V>): asserts form is UseFormGqlMutationReturn<Q, V> {
   if (typeof (form as UseFormGqlMutationReturn<Q, V>).muiRegister !== 'function') {
-    throw Error(`form must be one of 'useFromGqlMutation' or 'useFormGqlQuery'`)
+    throw Error("form must be one of 'useFromGqlMutation' or 'useFormGqlQuery'")
   }
 }
 

package/src/useFormGqlQuery.tsx

@@ -1,7 +1,10 @@
-import { LazyQueryHookOptions, TypedDocumentNode, useLazyQuery } from '@apollo/client'
-import { FieldValues, useForm } from 'react-hook-form'
-import { useFormGql, UseFormGraphQlOptions } from './useFormGql'
-import { UseFormGqlMutationReturn } from './useFormGqlMutation'
+import type { LazyQueryHookOptions, TypedDocumentNode } from '@apollo/client'
+import { useLazyQuery } from '@apollo/client'
+import type { FieldValues } from 'react-hook-form'
+import { useForm } from 'react-hook-form'
+import type { UseFormGraphQlOptions } from './useFormGql'
+import { useFormGql } from './useFormGql'
+import type { UseFormGqlMutationReturn } from './useFormGqlMutation'
 import { useFormMuiRegister } from './useFormMuiRegister'
 
 export type UseFormGqlQueryReturn<

package/src/useFormMuiRegister.tsx

@@ -1,6 +1,6 @@
-import {
-  FieldValues,
+import type {
   FieldPath,
+  FieldValues,
   RegisterOptions,
   UseFormRegisterReturn,
   UseFormReturn,

package/src/useFormPersist.tsx

@@ -1,14 +1,7 @@
-import { useMemoObject } from '@graphcommerce/next-ui/hooks/useMemoObject'
+/* eslint-disable react/no-unused-prop-types */
 import { useEffect } from 'react'
-import {
-  FieldValues,
-  UseFormReturn,
-  Path,
-  FieldPath,
-  PathValue,
-  useWatch,
-  useFormState,
-} 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<
   TFieldValues extends FieldValues = FieldValues,
@@ -40,6 +33,7 @@ export type UseFormPersistOptions<
  * Todo: Use wath callback so it won't trigger a rerender
  *
  * @deprecated Please use the FormPersist component instead. This method causes INP problems.
+ * @public
  */
 export function useFormPersist<V extends FieldValues>(options: UseFormPersistOptions<V>) {
   const { form, name, storage = 'sessionStorage', exclude = [], persist = [] } = options
@@ -99,7 +93,8 @@ export function useFormPersist<V extends FieldValues>(options: UseFormPersistOpt
 }
 
 /**
- * Please make sure to always include this component at the end of your form because of useWatch rules: https://react-hook-form.com/docs/usewatch
+ * Please make sure to always include this component at the end of your form because of useWatch
+ * rules: https://react-hook-form.com/docs/usewatch
  */
 export function FormPersist<V extends FieldValues>(props: UseFormPersistOptions<V>) {
   useFormPersist(props)

package/src/useFormValidFields.tsx

@@ -1,5 +1,5 @@
-import { FieldValues, Path, UseFormReturn } from 'react-hook-form'
-import { IsRequired } from './useGqlDocumentHandler'
+import type { FieldValues, Path, UseFormReturn } from 'react-hook-form'
+import type { IsRequired } from './useGqlDocumentHandler'
 
 export type UseFormValidReturn<TFieldValues> = Partial<Record<Path<TFieldValues>, boolean>>
 
@@ -9,6 +9,7 @@ export type UseFormValidReturn<TFieldValues> = Partial<Record<Path<TFieldValues>
  * 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
+ * @public
  */
 export function useFormValidFields<TFieldValues extends FieldValues>(
   form: Pick<UseFormReturn<TFieldValues>, 'watch' | 'formState'>,

package/src/useGqlDocumentHandler.tsx

@@ -1,15 +1,16 @@
 import type { TypedDocumentNode } from '@apollo/client'
-import type {
-  DefinitionNode,
-  OperationDefinitionNode,
-  ValueNode,
-  NullValueNode,
-  ObjectValueNode,
-  ListValueNode,
-  VariableNode,
-  VariableDefinitionNode,
-  TypeNode,
-  OperationTypeNode,
+import {
+  type DefinitionNode,
+  Kind,
+  type ListValueNode,
+  type NullValueNode,
+  type ObjectValueNode,
+  type OperationDefinitionNode,
+  type OperationTypeNode,
+  type TypeNode,
+  type ValueNode,
+  type VariableDefinitionNode,
+  type VariableNode,
 } from 'graphql'
 import { useMemo } from 'react'
 import type { FieldValues } from 'react-hook-form'
@@ -64,10 +65,10 @@ type DeepStringify<V> = {
 type FieldTypes = LiteralUnion<keyof Scalars, string> | FieldTypes[]
 
 function variableType<T extends TypeNode>(type: T): FieldTypes {
-  if (type.kind === 'ListType') {
+  if (type.kind === Kind.LIST_TYPE) {
     return [variableType(type.type)]
   }
-  if (type.kind === 'NonNullType') {
+  if (type.kind === Kind.NON_NULL_TYPE) {
     return variableType(type.type)
   }
 
@@ -103,7 +104,7 @@ export function handlerFactory<Q, V extends FieldValues>(
     definition.variableDefinitions.forEach((variable: VariableDefinitionNode) => {
       const name = variable.variable.name.value as keyof V
 
-      requiredPartial = { ...requiredPartial, [name]: variable.type.kind === 'NonNullType' }
+      requiredPartial = { ...requiredPartial, [name]: variable.type.kind === Kind.NON_NULL_TYPE }
       encodingPartial = { ...encodingPartial, [name]: variableType(variable.type) }
 
       if (variable.defaultValue && isWithValueNode(variable.defaultValue)) {

package/src/utils/tryTuple.ts

@@ -1,3 +1,4 @@
+/** @public */
 export const tryAsync =
   <R, Args extends unknown[]>(
     fn: (...args: Args) => Promise<R> | R,
@@ -11,6 +12,7 @@ export const tryAsync =
     }
   }
 
+/** @public */
 export const trySync =
   <R, Args extends unknown[]>(
     fn: (...args: Args) => R,

package/src/utils/debounce.ts

@@ -1,85 +0,0 @@
-export interface Cancelable {
-  clear(): void
-}
-
-export type DebounceOptions = {
-  /**
-   *
-   * Wait for 200 ms after a request before submitting.
-   *
-   * in milliseconds
-   */
-  wait?: number
-  /**
-   * If there are any pending calls, execute them after this time anyways.
-   *
-   * in milliseconds
-   */
-  maxWait?: number
-  /**
-   * By default the initialWait is the same as the wait time, but you can set this to a lower value for the initial call.
-   *
-   * in milliseconds
-   */
-  initialWait?: number
-}
-
-type DebounceState = {
-  timeout: ReturnType<typeof setTimeout> | null
-  firstCallTime: number | null
-  isFirstCall: boolean
-}
-
-export default function debounce<T extends (...args: unknown[]) => unknown>({
-  func,
-  wait = 166,
-  maxWait = 100000,
-  initialWait = wait,
-}: DebounceOptions & { func: T }): T & Cancelable {
-  let state: DebounceState = { timeout: null, firstCallTime: null, isFirstCall: true }
-
-  // Guidance for developers - Logging warnings for invalid parameter combinations
-  if (process.env.NODE_ENV !== 'production') {
-    // Rewrite to array
-    const params = { wait, initialWait, maxWait }
-    const invalidParams = Object.entries(params)
-      .filter(([, value]) => value < 0)
-      .map(([key]) => key)
-
-    if (invalidParams.length > 0)
-      console.warn(`debounce: ${invalidParams.join(', ')} should not be negative.`)
-
-    if (maxWait < wait)
-      console.warn(`debounce: maxWait should not be less than wait. This does nothing`)
-  }
-
-  const clear = () => {
-    if (state.timeout !== null) clearTimeout(state.timeout)
-    state = { timeout: null, firstCallTime: null, isFirstCall: true }
-  }
-
-  function debounced<This>(this: This, ...args: Parameters<T>) {
-    const now = Date.now()
-    state.firstCallTime ??= now
-
-    const exec = () => {
-      state.isFirstCall = false
-      clear()
-      func.apply(this, args)
-    }
-
-    const delay = state.isFirstCall ? initialWait : wait
-
-    if (now - state.firstCallTime >= maxWait) {
-      exec()
-      return
-    }
-
-    if (state.timeout !== null) clearTimeout(state.timeout)
-    state.timeout = setTimeout(exec, delay)
-  }
-
-  debounced.clear = clear
-
-  return debounced as T & Cancelable
-}

package/src/utils/useDebounceCallback.ts

@@ -1,20 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import useEventCallback from '@mui/utils/useEventCallback'
-import { useMemo } from 'react'
-import debounce, { DebounceOptions } from './debounce'
-
-export function useDebouncedCallback<T extends (...args: any[]) => unknown>(
-  callback: T,
-  { initialWait, maxWait, wait }: DebounceOptions = {},
-): T {
-  const func = useEventCallback(callback)
-
-  const debounced = useEventCallback(
-    useMemo(
-      () => debounce({ func, initialWait, maxWait, wait }),
-      [func, initialWait, maxWait, wait],
-    ),
-  )
-
-  return debounced
-}