@graphcommerce/react-hook-form 8.1.0-canary.5 → 8.1.0-canary.50

package/CHANGELOG.md

@@ -1,5 +1,105 @@
 # Change Log
 
+## 8.1.0-canary.50
+
+## 8.1.0-canary.49
+
+## 8.1.0-canary.48
+
+## 8.1.0-canary.47
+
+## 8.1.0-canary.46
+
+### Patch Changes
+
+- [#2314](https://github.com/graphcommerce-org/graphcommerce/pull/2314) [`490bbfb`](https://github.com/graphcommerce-org/graphcommerce/commit/490bbfb5d88a7f58e83fa9c8b7f475c277a0eda3) - Added missing dependencies of lodash and @types/lodash
+  ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.45
+
+## 8.1.0-canary.44
+
+## 8.1.0-canary.43
+
+## 8.1.0-canary.42
+
+## 8.1.0-canary.41
+
+## 8.1.0-canary.40
+
+## 8.1.0-canary.39
+
+## 8.1.0-canary.38
+
+### Patch Changes
+
+- [#2305](https://github.com/graphcommerce-org/graphcommerce/pull/2305) [`77e8297`](https://github.com/graphcommerce-org/graphcommerce/commit/77e82976816994336c616208a651cb18ce9ea270) - Fix bug with persist not applying saved changes by moving <FromPersist/> below the form components
+  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 8.1.0-canary.37
+
+## 8.1.0-canary.36
+
+## 8.1.0-canary.35
+
+## 8.1.0-canary.34
+
+## 8.1.0-canary.33
+
+## 8.1.0-canary.32
+
+## 8.1.0-canary.31
+
+## 8.1.0-canary.30
+
+## 8.1.0-canary.29
+
+## 8.1.0-canary.28
+
+## 8.1.0-canary.27
+
+## 8.1.0-canary.26
+
+## 8.1.0-canary.25
+
+## 8.1.0-canary.24
+
+## 8.1.0-canary.23
+
+## 8.1.0-canary.22
+
+## 8.1.0-canary.21
+
+## 8.1.0-canary.20
+
+## 8.1.0-canary.19
+
+## 8.1.0-canary.18
+
+## 8.1.0-canary.17
+
+## 8.1.0-canary.16
+
+## 8.1.0-canary.15
+
+## 8.1.0-canary.14
+
+## 8.1.0-canary.13
+
+## 8.1.0-canary.12
+
+## 8.1.0-canary.11
+
+## 8.1.0-canary.10
+
+## 8.1.0-canary.9
+
+## 8.1.0-canary.8
+
+## 8.1.0-canary.7
+
+## 8.1.0-canary.6
+
 ## 8.1.0-canary.5
 
 ## 8.0.6-canary.4

package/index.ts

@@ -8,3 +8,4 @@ export * from './src/useFormValidFields'
 export * from './src/useFormGql'
 export * from './src/validationPatterns'
 export * from './src/ComposedForm'
+export * from './src/utils/useDebounce'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/react-hook-form",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.5",
+  "version": "8.1.0-canary.50",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -16,12 +16,16 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3",
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.5",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.5",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.5",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.50",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.50",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.50",
     "graphql": "^16.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7"
+  },
+  "dependencies": {
+    "@types/lodash": "^4.17.6",
+    "lodash": "^4.17.21"
   }
 }

package/src/useFormAutoSubmit.tsx

@@ -1,3 +1,4 @@
+/* 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'
@@ -13,8 +14,7 @@ import {
   useFormState,
   useWatch,
 } from 'react-hook-form'
-import { DebounceOptions } from './utils/debounce'
-import { useDebouncedCallback } from './utils/useDebounceCallback'
+import { DebounceSettings, useDebounce } from './utils/useDebounce'
 
 export type UseFormAutoSubmitOptions<TForm extends UseFormReturn<V>, V extends FieldValues> = {
   /** Instance of current form */
@@ -116,23 +116,40 @@ export type FormAutoSubmitProps<TFieldValues extends FieldValues = FieldValues>
   parallel?: boolean
 
   noValidate?: boolean
-} & DebounceOptions &
-  Omit<UseWatchProps<TFieldValues>, 'defaultValue'>
 
-/**
- * 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>(
+  wait?: number
+
+  /**
+   * Only 0 does anthing and will submit immediately. Any other value will be ignored.
+   *
+   * @deprecated Please use leading instead
+   */
+  initialWait?: number
+} & Omit<UseWatchProps<TFieldValues>, 'defaultValue'> &
+  DebounceSettings
+
+export function useAutoSubmitBase<TFieldValues extends FieldValues = FieldValues>(
   props: FormAutoSubmitProps<TFieldValues>,
 ) {
-  const { wait, initialWait, maxWait, submit, parallel, noValidate, ...watchOptions } = props
+  const {
+    wait = 166,
+    initialWait,
+    maxWait,
+    leading,
+    trailing,
+
+    submit,
+    parallel,
+    noValidate,
+    ...watchOptions
+  } = props
 
   // We create a stable object from the values, so that we can compare them later
   const values = useMemoObject(cloneDeep(useWatch(watchOptions)))
   const oldValues = useRef<DeepPartialSkipArrayKey<TFieldValues>>(values)
   const { isValidating, isSubmitting, isValid } = useFormState(watchOptions)
 
-  const submitDebounced = useDebouncedCallback(
+  const submitDebounced = useDebounce(
     async () => {
       try {
         oldValues.current = values
@@ -141,7 +158,8 @@ function FormAutoSubmitBase<TFieldValues extends FieldValues = FieldValues>(
         // We're not interested if the submission actually succeeds, that should be handled by the form itself.
       }
     },
-    { wait, initialWait, maxWait },
+    wait,
+    { leading: leading ?? initialWait === 0, maxWait, trailing },
   )
 
   const valid = (noValidate ? true : isValid) && !isValidating
@@ -152,7 +170,15 @@ function FormAutoSubmitBase<TFieldValues extends FieldValues = FieldValues>(
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     submitDebounced()
   }
+}
 
+/**
+ * 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>,
+) {
+  useAutoSubmitBase(props)
   return null
 }
 

package/src/useFormPersist.tsx

@@ -39,7 +39,7 @@ export type UseFormPersistOptions<
  *
  * Todo: Use wath callback so it won't trigger a rerender
  *
- * @deprecated Please use <FormPersist /> instead. This method causes INP problems.
+ * @deprecated Please use the FormPersist component instead. This method causes INP problems.
  */
 export function useFormPersist<V extends FieldValues>(options: UseFormPersistOptions<V>) {
   const { form, name, storage = 'sessionStorage', exclude = [], persist = [] } = options
@@ -98,6 +98,9 @@ export function useFormPersist<V extends FieldValues>(options: UseFormPersistOpt
   }, [name, storage, valuesJson])
 }
 
+/**
+ * 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)
   return null

package/src/utils/debounce.ts

@@ -3,8 +3,24 @@ export interface Cancelable {
 }
 
 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
 }
 

package/src/utils/useDebounce.ts

@@ -0,0 +1,59 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useMemoObject } from '@graphcommerce/next-ui/hooks/useMemoObject'
+import useEventCallback from '@mui/utils/useEventCallback'
+import type {
+  DebounceSettings,
+  DebounceSettingsLeading,
+  DebouncedFunc,
+  DebouncedFuncLeading,
+} from 'lodash'
+import debounce from 'lodash/debounce'
+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.
+ *
+ * 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.
+ *
+ * @param func The function to debounce.
+ * @param wait The number of milliseconds to delay.
+ * @param options The options object.
+ * @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.
+ */
+export function useDebounce<T extends (...args: never[]) => unknown>(
+  func: T,
+  wait: number | undefined,
+  options: DebounceSettingsLeading,
+): DebouncedFuncLeading<T>
+export function useDebounce<T extends (...args: never[]) => unknown>(
+  func: T,
+  wait?: number,
+  options?: DebounceSettings,
+): DebouncedFunc<T>
+export function useDebounce<T extends (...args: never[]) => unknown>(
+  func: T,
+  wait?: number,
+  options?: DebounceSettings,
+): DebouncedFunc<T> {
+  const cb = useEventCallback(func)
+
+  const opts = useMemoObject(
+    Object.fromEntries(Object.entries(options ?? {}).filter(([, v]) => v !== undefined)),
+  )
+
+  return useMemo(() => debounce<T>(cb, wait, opts), [cb, opts, wait])
+}
+
+export { debounce }

package/src/utils/useDebounceCallback.ts

@@ -1,6 +1,6 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import useEventCallback from '@mui/utils/useEventCallback'
-import { useEffect, useRef } from 'react'
+import { useMemo } from 'react'
 import debounce, { DebounceOptions } from './debounce'
 
 export function useDebouncedCallback<T extends (...args: any[]) => unknown>(
@@ -9,13 +9,12 @@ export function useDebouncedCallback<T extends (...args: any[]) => unknown>(
 ): T {
   const func = useEventCallback(callback)
 
-  const debounced = useRef(debounce({ func, initialWait, maxWait, wait }))
+  const debounced = useEventCallback(
+    useMemo(
+      () => debounce({ func, initialWait, maxWait, wait }),
+      [func, initialWait, maxWait, wait],
+    ),
+  )
 
-  // Re-create the debounced function if the dependencies change
-  useEffect(() => {
-    debounced.current = debounce({ func, initialWait, maxWait, wait })
-    return () => debounced.current.clear()
-  }, [func, initialWait, maxWait, wait])
-
-  return debounced.current
+  return debounced
 }