@graphcommerce/react-hook-form 6.2.0-canary.8 → 6.2.0-canary.80

package/CHANGELOG.md

@@ -1,5 +1,165 @@
 # Change Log
 
+## 6.2.0-canary.80
+
+## 6.2.0-canary.79
+
+## 6.2.0-canary.78
+
+## 6.2.0-canary.77
+
+## 6.2.0-canary.76
+
+## 6.2.0-canary.75
+
+## 6.2.0-canary.74
+
+## 6.2.0-canary.73
+
+## 6.2.0-canary.72
+
+## 6.2.0-canary.71
+
+## 6.2.0-canary.70
+
+## 6.2.0-canary.69
+
+### Patch Changes
+
+- [#2012](https://github.com/graphcommerce-org/graphcommerce/pull/2012) [`1dbb3ae13`](https://github.com/graphcommerce-org/graphcommerce/commit/1dbb3ae13553992ee1ed77f375375560f28c418c) - Upgrade graphql to 16.7.1, add graphql as peer dependency ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 6.2.0-canary.68
+
+## 6.2.0-canary.67
+
+### Patch Changes
+
+- [#2002](https://github.com/graphcommerce-org/graphcommerce/pull/2002) [`1234bb61f`](https://github.com/graphcommerce-org/graphcommerce/commit/1234bb61f8332da8a9e4dd7262b0c70beaed8c91) - Updated next and apollo/client ([@paales](https://github.com/paales))
+
+## 6.2.0-canary.66
+
+## 6.2.0-canary.65
+
+## 6.2.0-canary.64
+
+## 6.2.0-canary.63
+
+## 6.2.0-canary.62
+
+## 6.2.0-canary.61
+
+## 6.2.0-canary.60
+
+## 6.2.0-canary.59
+
+## 6.2.0-canary.58
+
+## 6.2.0-canary.57
+
+## 6.2.0-canary.56
+
+## 6.2.0-canary.55
+
+## 6.2.0-canary.54
+
+## 6.2.0-canary.53
+
+## 6.2.0-canary.52
+
+## 6.2.0-canary.51
+
+## 6.2.0-canary.50
+
+### Minor Changes
+
+- [`e55d8c390`](https://github.com/graphcommerce-org/graphcommerce/commit/e55d8c390d90b4bb7bab11c6a99027ac72bd7e3e) - Created a new sidebar layout system, can be configured with productFiltersLayout in the graphcommerce.config.js ([@paales](https://github.com/paales))
+
+## 6.2.0-canary.49
+
+## 6.2.0-canary.48
+
+## 6.2.0-canary.47
+
+## 6.2.0-canary.46
+
+## 6.2.0-canary.45
+
+## 6.2.0-canary.44
+
+## 6.2.0-canary.43
+
+## 6.2.0-canary.42
+
+## 6.2.0-canary.41
+
+### Patch Changes
+
+- [#1960](https://github.com/graphcommerce-org/graphcommerce/pull/1960) [`f78caf5a8`](https://github.com/graphcommerce-org/graphcommerce/commit/f78caf5a83683f1ae4b901fb94bd22d50943fa2f) - Updated packages @apollo/client, react-hook-form, @emotion/\*, @lingui/\*, @mui/\* and various others. ([@paales](https://github.com/paales))
+
+## 6.2.0-canary.40
+
+## 6.2.0-canary.39
+
+## 6.2.0-canary.38
+
+## 6.2.0-canary.37
+
+## 6.2.0-canary.36
+
+## 6.2.0-canary.35
+
+## 6.2.0-canary.34
+
+## 6.2.0-canary.33
+
+## 6.2.0-canary.32
+
+## 6.2.0-canary.31
+
+## 6.2.0-canary.30
+
+## 6.2.0-canary.29
+
+## 6.2.0-canary.28
+
+## 6.2.0-canary.27
+
+## 6.2.0-canary.26
+
+## 6.2.0-canary.25
+
+## 6.2.0-canary.24
+
+## 6.2.0-canary.23
+
+## 6.2.0-canary.22
+
+## 6.2.0-canary.21
+
+## 6.2.0-canary.20
+
+## 6.2.0-canary.19
+
+## 6.2.0-canary.18
+
+## 6.2.0-canary.17
+
+## 6.2.0-canary.16
+
+## 6.2.0-canary.15
+
+## 6.2.0-canary.14
+
+## 6.2.0-canary.13
+
+## 6.2.0-canary.12
+
+## 6.2.0-canary.11
+
+## 6.2.0-canary.10
+
+## 6.2.0-canary.9
+
 ## 6.2.0-canary.8
 
 ## 6.2.0-canary.7

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/react-hook-form",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.2.0-canary.8",
+  "version": "6.2.0-canary.80",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,18 +12,18 @@
     }
   },
   "dependencies": {
-    "@apollo/client": "^3.7.10",
-    "graphql": "16.6.0",
-    "react-hook-form": "7.43.5"
+    "@apollo/client": "^3.7.17",
+    "react-hook-form": "7.44.3"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.8",
-    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.8",
-    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.8",
+    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.80",
+    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.80",
+    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.80",
     "@testing-library/react": "^14.0.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "graphql": "^16.6.0"
   }
 }

package/src/useFormAutoSubmit.tsx

@@ -1,7 +1,19 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
+/* eslint-disable react/no-unused-prop-types */
+import { cloneDeep } from '@apollo/client/utilities'
+import { useMemoObject } from '@graphcommerce/next-ui/hooks/useMemoObject'
 import { debounce } from '@mui/material'
-import { useCallback, useEffect, useState } from 'react'
-import { FieldPath, FieldValues, UseFormReturn } from 'react-hook-form'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  Control,
+  DeepPartialSkipArrayKey,
+  FieldPath,
+  FieldValues,
+  UseFormReturn,
+  useFormState,
+  useWatch,
+} from 'react-hook-form'
+import { DebounceOptions } from './utils/debounce'
+import { useDebouncedCallback } from './utils/useDebounceCallback'
 
 export type UseFormAutoSubmitOptions<TForm extends UseFormReturn<V>, V extends FieldValues> = {
   /** Instance of current form */
@@ -18,6 +30,8 @@ export type UseFormAutoSubmitOptions<TForm extends UseFormReturn<V>, V extends F
    * that this may cause extra requests
    */
   forceInitialSubmit?: boolean
+  /** Disables the hook */
+  disabled?: boolean
 }
 
 /**
@@ -43,7 +57,7 @@ export function useFormAutoSubmit<
   Form extends UseFormReturn<V>,
   V extends FieldValues = FieldValues,
 >(options: UseFormAutoSubmitOptions<Form, V>) {
-  const { form, submit, wait = 500, fields, forceInitialSubmit } = options
+  const { form, submit, wait = 500, fields, forceInitialSubmit, disabled } = options
   const { formState } = form
 
   const [submitting, setSubmitting] = useState(false)
@@ -72,13 +86,82 @@ export function useFormAutoSubmit<
   )
 
   useEffect(() => {
-    if (canSubmit && (force || shouldSubmit)) {
+    if (!disabled && canSubmit && (force || shouldSubmit)) {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       submitDebounced()
       return () => submitDebounced.clear()
     }
     return () => {}
-  }, [canSubmit, force, shouldSubmit, submitDebounced])
+  }, [canSubmit, force, shouldSubmit, submitDebounced, disabled])
 
   return submitting
 }
+
+export type FormAutoSubmitProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[],
+> = {
+  control: Control<TFieldValues>
+  /** Autosubmit only when these field names update */
+  name?: readonly [...TFieldNames]
+
+  disabled?: boolean
+
+  exact?: boolean
+
+  /** SubmitHandler */
+  submit: ReturnType<UseFormReturn<TFieldValues>['handleSubmit']>
+
+  /**
+   * When a current submission is already in flight, should we wait for it to finish before
+   * submitting again?
+   */
+  parallel?: boolean
+} & DebounceOptions
+
+function useFormAutoSubmit2<
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[],
+>(props: FormAutoSubmitProps<TFieldValues, TFieldNames>) {
+  const { wait, initialWait, maxWait, submit, parallel, ...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(
+    async () => {
+      try {
+        oldValues.current = values
+        await submit()
+      } catch (e) {
+        // We're not interested if the submission actually succeeds, that should be handled by the form itself.
+      }
+    },
+    { wait, initialWait, maxWait },
+  )
+
+  const valid = isValid && !isValidating
+  const allowed = parallel || !isSubmitting
+  const canSubmit = valid && allowed
+
+  if (canSubmit && values !== oldValues.current) {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    submitDebounced()
+  }
+}
+
+/**
+ * We're wrapping this in a component so that the parent component doesn't rerender on every
+ * submission.
+ */
+function FormAutoSubmitBase<
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[],
+>(props: FormAutoSubmitProps<TFieldValues, TFieldNames>) {
+  useFormAutoSubmit2(props)
+  return null
+}
+
+export const FormAutoSubmit = React.memo(FormAutoSubmitBase) as typeof FormAutoSubmitBase

package/src/useFormPersist.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { FieldValues, UseFormReturn, Path, FieldPathValue, FieldPath } from 'react-hook-form'
+import { FieldValues, UseFormReturn, Path, FieldPath, PathValue } from 'react-hook-form'
 
 export type UseFormPersistOptions<
   TFieldValues extends FieldValues = FieldValues,
@@ -58,7 +58,7 @@ 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>, FieldPathValue<V, Path<V>>][]
+        const entries = Object.entries(storedValues) as [Path<V>, PathValue<V, Path<V>>][]
         entries.forEach(([entryName, value]) =>
           setValue(entryName, value, {
             shouldDirty: true,

package/src/utils/debounce.ts

@@ -0,0 +1,69 @@
+export interface Cancelable {
+  clear(): void
+}
+
+export type DebounceOptions = {
+  wait?: number
+  maxWait?: number
+  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

@@ -0,0 +1,20 @@
+import useEventCallback from '@mui/utils/useEventCallback'
+import { useEffect, useRef } from 'react'
+import debounce, { DebounceOptions } from './debounce'
+
+export function useDebouncedCallback<T extends (...args: unknown[]) => unknown>(
+  callback: T,
+  { initialWait, maxWait, wait }: DebounceOptions = {},
+): T {
+  const func = useEventCallback(callback) as T
+
+  const debounced = useRef(debounce({ 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
+}