Update react-hook-form peerDependencies to ^6.15.8 <7.0.0

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- Update `peerDependencies` of `react-hook-form` to `^6.15.8 <7.0.0`
+- 
+
 ## [0.2.0] - 2021-08-03
 
 ## [0.2.0-beta.13] - 2020-03-26

README.md

@@ -120,7 +120,7 @@ This component is the top-level component that creates the context with the sche
   - `'onblur'`: Validate when an input field is blurred.
   - `'onChange'`: Validate when an input field value changes.
   - `'onSubmit'`: Validate when the submit is triggered.
-- `submitFocusError`: Boolean, when `true` focus on the first field with error after submit validates, if there is any. Defaults to `true`.
+- `shouldFocusError`: Boolean, when `true` focus on the first field with error after submit validates, if there is any. Defaults to `true`.
 - `onChange`: Callback called when there's a change in the form. It passes the form _data_ formatted by the provided JSON Schema.
 - `onSubmit`: If provided `react-hook-form-jsonschema` will call this function as the submit action, it passes an object with the following members:
   - `data`: The data that was provided as inputs to the form, correctly formatted as an instance of the JSON Schema provided.

package.json

@@ -52,7 +52,7 @@
     }
   },
   "dependencies": {
-    "react-hook-form": "^4.4.4"
+    "react-hook-form": "^6.15.8 <7.0.0"
   },
   "peerDependencies": {
     "react": "^16.12.0",

src/components/FormContext.tsx

@@ -24,15 +24,15 @@ export const FormContext: FC<FormContextProps> = props => {
     onChange,
     validationMode = 'onSubmit',
     revalidateMode = 'onChange',
-    submitFocusError = true,
+    shouldFocusError = true,
     defaultValues,
   } = props
 
   const methods = useForm({
     defaultValues,
     mode: validationMode,
     reValidateMode: revalidateMode,
-    submitFocusError: submitFocusError,
+    shouldFocusError,
   })
 
   const isFirstRender = React.useRef(true)

src/components/types/index.ts

@@ -1,17 +1,12 @@
 import React from 'react'
-import {
-  DeepPartial,
-  FieldValues,
-  FormContextValues,
-  Mode,
-} from 'react-hook-form'
+import { DeepPartial, FieldValues, Mode, UseFormMethods } from 'react-hook-form'
 
 import { JSONSchemaType, IDSchemaPair } from '../../JSONSchema'
 import { CustomValidators } from '../../hooks/validators'
 
 export interface JSONFormContextValues<
   FormValues extends FieldValues = FieldValues
-> extends FormContextValues<FormValues> {
+> extends UseFormMethods<FormValues> {
   schema: JSONSchemaType
   idMap: IDSchemaPair
   customValidators?: CustomValidators
@@ -27,8 +22,8 @@ export type OnSubmitType = (props: OnSubmitParameters) => void | Promise<void>
 export type FormContextProps<FormValues extends FieldValues = FieldValues> = {
   formProps?: Omit<React.HTMLAttributes<HTMLFormElement>, 'onSubmit'>
   validationMode?: Mode
-  revalidateMode?: Mode
-  submitFocusError?: boolean
+  revalidateMode?: Exclude<Mode, 'onTouched' | 'all'>
+  shouldFocusError?: boolean
   onChange?: (data: JSONSchemaType) => void
   onSubmit?: OnSubmitType
   noNativeValidate?: boolean

src/hooks/__tests__/useCustomValidator.test.tsx

@@ -51,10 +51,10 @@ test('should use custom validator', async () => {
     expect(getByText('__is_not_helena_error__')).toBeDefined()
   })
 
-  getByText('Submit').click()
   fireEvent.change(stringField, {
     target: { value: 'Helena' },
   })
+  getByText('Submit').click()
 
   await wait(() => {
     expect(queryByText('__is_not_helena_error__')).toBeNull()

src/hooks/types/index.ts

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ValidationOptions, FieldValues } from 'react-hook-form'
+import { FieldValues, RegisterOptions } from 'react-hook-form'
 
 import { ErrorMessage } from '../validators'
 import { JSONSchemaType } from '../../JSONSchema'
@@ -34,7 +34,7 @@ export interface BasicInputReturnType {
   name: string
   type: InputTypes
   pointer: string
-  validator: ValidationOptions
+  validator: RegisterOptions
 }
 
 export interface GenericInputParameters {

src/hooks/validators/getError.ts

@@ -1,4 +1,4 @@
-import { FieldError, FormContextValues } from 'react-hook-form'
+import { FieldError, UseFormMethods } from 'react-hook-form'
 
 import { ErrorTypes, ErrorMessage } from './types'
 import { JSONSchemaType } from '../../JSONSchema'
@@ -7,7 +7,7 @@ export const getError = (
   errors: FieldError | undefined,
   currentObject: JSONSchemaType,
   isRequired: boolean,
-  formContext: FormContextValues,
+  formContext: UseFormMethods,
   pointer: string,
   minimum?: number,
   maximum?: number,
@@ -16,10 +16,7 @@ export const getError = (
   // This is a special element to check errors against
   if (currentObject.type === 'array') {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const currentValues: any[] | undefined = formContext.getValues({
-      nest: true,
-    })[pointer]
-
+    const currentValues: any[] | undefined = formContext.getValues()[pointer]
     if (currentValues) {
       const numberOfSelected =
         currentValues.filter(x => x !== false).length || 0

src/hooks/validators/getGenericValidator.ts

@@ -1,4 +1,4 @@
-import { ValidationOptions } from 'react-hook-form'
+import { RegisterOptions } from 'react-hook-form'
 
 import {
   ErrorTypes,
@@ -32,14 +32,14 @@ function getCustomValidator(
 export const getValidator = (
   context: JSONSubSchemaInfo,
   customValidators: CustomValidators
-): ValidationOptions => {
+): RegisterOptions => {
   const { JSONSchema, isRequired } = context
 
   // The use of this variable prevents a strange undocumented behaviour of react-hook-form
   // that is it fails to validate if the `validate` field exists but is empty.
   const hasValidate =
     Object.keys(customValidators).length > 0 || JSONSchema.enum
-  const validator: ValidationOptions = {
+  const validator: RegisterOptions = {
     ...(hasValidate
       ? {
           validate: {

src/hooks/validators/getNumberValidator.ts

@@ -1,13 +1,13 @@
-import { ValidationOptions } from 'react-hook-form'
+import { RegisterOptions } from 'react-hook-form'
 
 import { getNumberMaximum, getNumberMinimum } from './numberUtilities'
 import { JSONSchemaType } from '../../JSONSchema'
 import { ErrorTypes } from './types'
 
 export const getNumberValidator = (
   currentObject: JSONSchemaType,
-  baseValidator: ValidationOptions
-): ValidationOptions => {
+  baseValidator: RegisterOptions
+): RegisterOptions => {
   const minimum = getNumberMinimum(currentObject)
   const maximum = getNumberMaximum(currentObject)
 

src/hooks/validators/getStringValidator.ts

@@ -1,12 +1,12 @@
-import { ValidationOptions } from 'react-hook-form'
+import { RegisterOptions } from 'react-hook-form'
 
 import { JSONSchemaType } from '../../JSONSchema'
 import { ErrorTypes } from './types'
 
 export const getStringValidator = (
   currentObject: JSONSchemaType,
-  baseValidator: ValidationOptions
-): ValidationOptions => {
+  baseValidator: RegisterOptions
+): RegisterOptions => {
   if (currentObject.minLength) {
     baseValidator.minLength = {
       value: currentObject.minLength,

src/hooks/validators/numberUtilities.ts

@@ -1,4 +1,4 @@
-import { ValidationOptions } from 'react-hook-form'
+import { RegisterOptions } from 'react-hook-form'
 
 import { JSONSchemaType } from '../../JSONSchema'
 import { ErrorTypes } from './types'
@@ -85,11 +85,11 @@ export const getNumberMaximum = (
 export const getNumberValidator = (
   currentObject: JSONSchemaType,
   required: boolean
-): ValidationOptions => {
+): RegisterOptions => {
   const minimum = getNumberMinimum(currentObject)
   const maximum = getNumberMaximum(currentObject)
 
-  const validator: ValidationOptions = {
+  const validator: RegisterOptions = {
     validate: {
       multipleOf: (value: string) => {
         if (currentObject.type === 'integer' && value) {