Update react-hook-form to 7.6.1

packages/forms/jest.config.js

@@ -6,6 +6,6 @@ module.exports = {
      * that now requires this.
      */
     'react-hook-form':
-      '<rootDir>/../../node_modules/react-hook-form/dist/index.cjs.development',
+      '<rootDir>/../../node_modules/react-hook-form/dist/index.cjs',
   },
 }

packages/forms/package.json

@@ -12,7 +12,7 @@
     "@types/pascalcase": "^1.0.0",
     "core-js": "3.12.1",
     "pascalcase": "1.0.0",
-    "react-hook-form": "^6.9.5"
+    "react-hook-form": "^7.6.1"
   },
   "scripts": {
     "build": "yarn build:js",

packages/forms/src/index.tsx

@@ -6,8 +6,8 @@ import {
   FormProvider,
   useFormContext,
   RegisterOptions,
-  UseFormMethods,
-  UseFormOptions,
+  UseFormReturn,
+  UseFormProps,
 } from 'react-hook-form'
 
 import {
@@ -27,29 +27,31 @@ const DEFAULT_MESSAGES = {
   validate: 'is not valid',
 }
 
-enum INPUT_TYPES {
-  BUTTON = 'button',
-  COLOR = 'color',
-  DATE = 'date',
-  DATETIME_LOCAL = 'datetime-local',
-  EMAIL = 'email',
-  FILE = 'file',
-  HIDDEN = 'hidden',
-  IMAGE = 'image',
-  MONTH = 'month',
-  NUMBER = 'number',
-  PASSWORD = 'password',
-  RADIO = 'radio',
-  RANGE = 'range',
-  RESET = 'reset',
-  SEARCH = 'search',
-  SUBMIT = 'submit',
-  TEL = 'tel',
-  TEXT = 'text',
-  TIME = 'time',
-  URL = 'url',
-  WEEK = 'week',
-}
+const inputTypes = [
+  'button',
+  'color',
+  'date',
+  'datetime-local',
+  'email',
+  'file',
+  'hidden',
+  'image',
+  'month',
+  'number',
+  'password',
+  'radio',
+  'range',
+  'reset',
+  'search',
+  'submit',
+  'tel',
+  'text',
+  'time',
+  'url',
+  'week',
+]
+
+type INPUT_TYPES = typeof inputTypes[number]
 
 // Massages a hash of props depending on whether the given named field has
 // any errors on it
@@ -72,8 +74,11 @@ interface ValidatableFieldProps extends InputTagProps {
 const inputTagProps = <T extends InputTagProps>(
   props: T
 ): Omit<T, 'dataType' | 'transformValue' | 'errorClassName' | 'errorStyle'> => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const { errors, setError } = useFormContext()
+  const {
+    setError,
+    formState: { errors },
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+  } = useFormContext()
 
   // Check for errors from server and set on field if present
 
@@ -134,8 +139,8 @@ const coerceValues = (
 interface FormWithCoercionContext
   extends Omit<React.HTMLProps<HTMLFormElement>, 'onSubmit'> {
   error?: any
-  formMethods?: UseFormMethods
-  validation?: UseFormOptions
+  formMethods?: UseFormReturn
+  validation?: UseFormProps
   onSubmit?: (
     values: Record<string, any>,
     event?: React.BaseSyntheticEvent
@@ -151,8 +156,8 @@ const FormWithCoercionContext: React.FC<FormWithCoercionContext> = (props) => {
     onSubmit,
     ...formProps
   } = props
-  const useFormMethods = useForm(props.validation)
-  const formMethods = propFormMethods || useFormMethods
+  const UseFormReturn = useForm(props.validation)
+  const formMethods = propFormMethods || UseFormReturn
   const { coerce } = useCoercion()
 
   return (
@@ -212,7 +217,9 @@ interface FieldErrorProps extends React.HTMLProps<HTMLSpanElement> {
 }
 
 const FieldError = (props: FieldErrorProps) => {
-  const { errors } = useFormContext()
+  const {
+    formState: { errors },
+  } = useFormContext()
   const validationError = errors[props.name]
   const errorMessage =
     validationError &&
@@ -264,13 +271,15 @@ const TextAreaField = forwardRef<
     validation.validate = jsonValidation
   }
 
+  const { onChange, onBlur } = register(props.name, validation)
+
   return (
     <textarea
       {...tagProps}
       id={props.id || props.name}
-      ref={(element) => {
-        register(element, validation)
-
+      onChange={onChange}
+      onBlur={onBlur}
+      ref={(element: HTMLTextAreaElement) => {
         if (typeof ref === 'function') {
           ref(element)
         } else if (ref) {
@@ -299,13 +308,18 @@ const SelectField = forwardRef<
 
   const tagProps = inputTagProps(props)
 
+  const { onChange, onBlur } = register(
+    props.name,
+    props.validation || { required: false }
+  )
+
   return (
     <select
       {...tagProps}
       id={props.id || props.name}
-      ref={(element) => {
-        register(element, props.validation || { required: false })
-
+      onChange={onChange}
+      onBlur={onBlur}
+      ref={(element: HTMLSelectElement) => {
         if (typeof ref === 'function') {
           ref(element)
         } else if (ref) {
@@ -350,14 +364,19 @@ export const CheckboxField = forwardRef<
 
   const tagProps = inputTagProps(props)
 
+  const { onChange, onBlur } = register(
+    props.name,
+    props.validation || { required: false }
+  )
+
   return (
     <input
       type="checkbox"
       {...tagProps}
       id={props.id || props.name}
-      ref={(element) => {
-        register(element, props.validation || { required: false })
-
+      onChange={onChange}
+      onBlur={onBlur}
+      ref={(element: HTMLInputElement) => {
         if (typeof ref === 'function') {
           ref(element)
         } else if (ref) {
@@ -412,13 +431,18 @@ const InputField = forwardRef<
 
   const tagProps = inputTagProps(props)
 
+  const { onChange, onBlur } = register(
+    props.name,
+    props.validation || { required: false }
+  )
+
   return (
     <input
       {...tagProps}
       id={props.id || props.name}
-      ref={(element) => {
-        register(element, props.validation || { required: false })
-
+      onChange={onChange}
+      onBlur={onBlur}
+      ref={(element: HTMLInputElement) => {
         if (typeof ref === 'function') {
           ref(element)
         } else if (ref) {
@@ -447,7 +471,7 @@ const inputComponents: Record<
       React.RefAttributes<HTMLInputElement>
   >
 > = {}
-Object.values(INPUT_TYPES).forEach((type) => {
+inputTypes.forEach((type) => {
   inputComponents[`${pascalcase(type)}Field`] = forwardRef<
     HTMLInputElement,
     InputFieldProps & React.InputHTMLAttributes<HTMLInputElement>

yarn.lock

@@ -17346,10 +17346,10 @@ react-helmet-async@^1.0.2:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
-react-hook-form@^6.9.5:
-  version "6.15.4"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.4.tgz#328003e1ccc096cd158899ffe7e3b33735a9b024"
-  integrity sha512-K+Sw33DtTMengs8OdqFJI3glzNl1wBzSefD/ksQw/hJf9CnOHQAU6qy82eOrh0IRNt2G53sjr7qnnw1JDjvx1w==
+react-hook-form@^7.6.1:
+  version "7.6.1"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.6.1.tgz#e351ec43972a09dc74f969a9b248fe3281b08afe"
+  integrity sha512-wwLBe9NKtXYdCErx/+0UTG05toNYKi6/HnoLa8/W0EjqyDXnCByheNpszyFhUmljNdxrr0nBcSyf2K/Fdx1LDQ==
 
 react-hot-toast@^1.0.2:
   version "1.0.2"