react-hook-form 7.57.0-next.0 → 7.58.0

package/dist/index.esm.mjs

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useEffect } from 'react';
+import React__default from 'react';
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -62,15 +62,19 @@ function cloneObject(data) {
     return copy;
 }
 
-var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+var isKey = (value) => /^\w*$/.test(value);
 
 var isUndefined = (val) => val === undefined;
 
+var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+
+var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
+
 var get = (object, path, defaultValue) => {
     if (!path || !isObject(object)) {
         return defaultValue;
     }
-    const result = compact(path.split(/[,[\].]+?/)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], object);
+    const result = (isKey(path) ? [path] : stringToPath(path)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], object);
     return isUndefined(result) || result === object
         ? isUndefined(object[path])
             ? defaultValue
@@ -80,10 +84,6 @@ var get = (object, path, defaultValue) => {
 
 var isBoolean = (value) => typeof value === 'boolean';
 
-var isKey = (value) => /^\w*$/.test(value);
-
-var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
-
 var set = (object, path, value) => {
     let index = -1;
     const tempPath = isKey(path) ? [path] : stringToPath(path);
@@ -132,6 +132,7 @@ const INPUT_VALIDATION_RULES = {
 };
 
 const HookFormContext = React__default.createContext(null);
+HookFormContext.displayName = 'HookFormContext';
 /**
  * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
  *
@@ -217,47 +218,7 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
     return result;
 };
 
-var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
-
-function deepEqual(object1, object2) {
-    if (isPrimitive(object1) || isPrimitive(object2)) {
-        return object1 === object2;
-    }
-    if (isDateObject(object1) && isDateObject(object2)) {
-        return object1.getTime() === object2.getTime();
-    }
-    const keys1 = Object.keys(object1);
-    const keys2 = Object.keys(object2);
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-    for (const key of keys1) {
-        const val1 = object1[key];
-        if (!keys2.includes(key)) {
-            return false;
-        }
-        if (key !== 'ref') {
-            const val2 = object2[key];
-            if ((isDateObject(val1) && isDateObject(val2)) ||
-                (isObject(val1) && isObject(val2)) ||
-                (Array.isArray(val1) && Array.isArray(val2))
-                ? !deepEqual(val1, val2)
-                : val1 !== val2) {
-                return false;
-            }
-        }
-    }
-    return true;
-}
-
-const useDeepEqualEffect = (effect, deps) => {
-    const ref = React.useRef(deps);
-    if (!deepEqual(deps, ref.current)) {
-        ref.current = deps;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    React.useEffect(effect, ref.current);
-};
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 /**
  * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
@@ -303,8 +264,8 @@ function useFormState(props) {
         isValid: false,
         errors: false,
     });
-    useDeepEqualEffect(() => control._subscribe({
-        name: name,
+    useIsomorphicLayoutEffect(() => control._subscribe({
+        name,
         formState: _localProxyFormState.current,
         exact,
         callback: (formState) => {
@@ -353,34 +314,18 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
  */
 function useWatch(props) {
     const methods = useFormContext();
-    const { control = methods.control, name, defaultValue, disabled, exact, compute, } = props || {};
-    const _compute = React__default.useRef(compute);
-    const _computeFormValues = React__default.useRef(undefined);
-    _compute.current = compute;
-    const defaultValueMemo = React__default.useMemo(() => control._getWatch(name, defaultValue), [control, name, defaultValue]);
-    const [value, updateValue] = React__default.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
-    useDeepEqualEffect(() => control._subscribe({
-        name: name,
+    const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
+    const _defaultValue = React__default.useRef(defaultValue);
+    const [value, updateValue] = React__default.useState(control._getWatch(name, _defaultValue.current));
+    useIsomorphicLayoutEffect(() => control._subscribe({
+        name,
         formState: {
             values: true,
         },
         exact,
-        callback: (formState) => {
-            if (!disabled) {
-                const formValues = generateWatchOutput(name, control._names, formState.values || control._formValues, false, defaultValue);
-                if (_compute.current) {
-                    const computedFormValues = _compute.current(formValues);
-                    if (!deepEqual(computedFormValues, _computeFormValues.current)) {
-                        updateValue(computedFormValues);
-                        _computeFormValues.current = computedFormValues;
-                    }
-                }
-                else {
-                    updateValue(formValues);
-                }
-            }
-        },
-    }), [defaultValue, disabled, name, exact]);
+        callback: (formState) => !disabled &&
+            updateValue(generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current)),
+    }), [name, control, disabled, exact]);
     React__default.useEffect(() => control._removeUnmounted());
     return value;
 }
@@ -411,13 +356,12 @@ function useWatch(props) {
  */
 function useController(props) {
     const methods = useFormContext();
-    const { name, disabled, control = methods.control, shouldUnregister, defaultValue, } = props;
+    const { name, disabled, control = methods.control, shouldUnregister } = props;
     const isArrayField = isNameInFieldArray(control._names.array, name);
-    const defaultValueMemo = React__default.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
     const value = useWatch({
         control,
         name,
-        defaultValue: defaultValueMemo,
+        defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),
         exact: true,
     });
     const formState = useFormState({
@@ -431,7 +375,6 @@ function useController(props) {
         value,
         ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
     }));
-    _props.current = props;
     const fieldState = React__default.useMemo(() => Object.defineProperties({}, {
         invalid: {
             enumerable: true,
@@ -471,7 +414,12 @@ function useController(props) {
     const ref = React__default.useCallback((elm) => {
         const field = get(control._fields, name);
         if (field && elm) {
-            field._f.ref = elm;
+            field._f.ref = {
+                focus: () => elm.focus && elm.focus(),
+                select: () => elm.select && elm.select(),
+                setCustomValidity: (message) => elm.setCustomValidity(message),
+                reportValidity: () => elm.reportValidity(),
+            };
         }
     }, [control._fields, name]);
     const field = React__default.useMemo(() => ({
@@ -727,6 +675,39 @@ var createSubject = () => {
     };
 };
 
+var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
+
+function deepEqual(object1, object2) {
+    if (isPrimitive(object1) || isPrimitive(object2)) {
+        return object1 === object2;
+    }
+    if (isDateObject(object1) && isDateObject(object2)) {
+        return object1.getTime() === object2.getTime();
+    }
+    const keys1 = Object.keys(object1);
+    const keys2 = Object.keys(object2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    for (const key of keys1) {
+        const val1 = object1[key];
+        if (!keys2.includes(key)) {
+            return false;
+        }
+        if (key !== 'ref') {
+            const val2 = object2[key];
+            if ((isDateObject(val1) && isDateObject(val2)) ||
+                (isObject(val1) && isObject(val2)) ||
+                (Array.isArray(val1) && Array.isArray(val2))
+                ? !deepEqual(val1, val2)
+                : val1 !== val2) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
 var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
 
 var isFileInput = (element) => element.type === 'file';
@@ -1012,6 +993,12 @@ function schemaErrorLookup(errors, _fields, name) {
                 error: foundError,
             };
         }
+        if (foundError && foundError.root && foundError.root.type) {
+            return {
+                name: `${fieldName}.root`,
+                error: foundError.root,
+            };
+        }
         names.pop();
     }
     return {
@@ -1290,7 +1277,7 @@ function createFormControl(props = {}) {
     };
     const _fields = {};
     let _defaultValues = isObject(_options.defaultValues) || isObject(_options.values)
-        ? cloneObject(_options.values || _options.defaultValues) || {}
+        ? cloneObject(_options.defaultValues || _options.values) || {}
         : {};
     let _formValues = _options.shouldUnregister
         ? {}
@@ -1325,8 +1312,6 @@ function createFormControl(props = {}) {
         array: createSubject(),
         state: createSubject(),
     };
-    const validationModeBeforeSubmit = getValidationModes(_options.mode);
-    const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
     const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
     const debounce = (callback) => (wait) => {
         clearTimeout(timer);
@@ -1597,13 +1582,17 @@ function createFormControl(props = {}) {
                 }
                 else if (fieldReference.refs) {
                     if (isCheckBoxInput(fieldReference.ref)) {
-                        fieldReference.refs.length > 1
-                            ? fieldReference.refs.forEach((checkboxRef) => (!checkboxRef.defaultChecked || !checkboxRef.disabled) &&
-                                (checkboxRef.checked = Array.isArray(fieldValue)
-                                    ? !!fieldValue.find((data) => data === checkboxRef.value)
-                                    : fieldValue === checkboxRef.value))
-                            : fieldReference.refs[0] &&
-                                (fieldReference.refs[0].checked = !!fieldValue);
+                        fieldReference.refs.forEach((checkboxRef) => {
+                            if (!checkboxRef.defaultChecked || !checkboxRef.disabled) {
+                                if (Array.isArray(fieldValue)) {
+                                    checkboxRef.checked = !!fieldValue.find((data) => data === checkboxRef.value);
+                                }
+                                else {
+                                    checkboxRef.checked =
+                                        fieldValue === checkboxRef.value || !!fieldValue;
+                                }
+                            }
+                        });
                     }
                     else {
                         fieldReference.refs.forEach((radioRef) => (radioRef.checked = radioRef.value === fieldValue));
@@ -1629,8 +1618,11 @@ function createFormControl(props = {}) {
     };
     const setValues = (name, value, options) => {
         for (const fieldKey in value) {
+            if (!value.hasOwnProperty(fieldKey)) {
+                return;
+            }
             const fieldValue = value[fieldKey];
-            const fieldName = `${name}.${fieldKey}`;
+            const fieldName = name + '.' + fieldKey;
             const field = get(_fields, fieldName);
             (_names.array.has(name) ||
                 isObject(fieldValue) ||
@@ -1685,6 +1677,8 @@ function createFormControl(props = {}) {
                     (isDateObject(fieldValue) && isNaN(fieldValue.getTime())) ||
                     deepEqual(fieldValue, get(_formValues, name, fieldValue));
         };
+        const validationModeBeforeSubmit = getValidationModes(_options.mode);
+        const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
         if (field) {
             let error;
             let isValid;
@@ -2227,6 +2221,7 @@ function createFormControl(props = {}) {
             setError,
             _subscribe,
             _runSchema,
+            _focusError,
             _getWatch,
             _getDirty,
             _setValid,
@@ -2296,6 +2291,9 @@ function createFormControl(props = {}) {
 }
 
 var generateId = () => {
+    if (!isUndefined(crypto) && crypto.randomUUID) {
+        return crypto.randomUUID();
+    }
     const d = typeof performance === 'undefined' ? Date.now() : performance.now() * 1000;
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
         const r = (Math.random() * 16 + d) % 16 | 0;
@@ -2404,22 +2402,24 @@ function useFieldArray(props) {
     const [fields, setFields] = React__default.useState(control._getFieldArray(name));
     const ids = React__default.useRef(control._getFieldArray(name).map(generateId));
     const _fieldIds = React__default.useRef(fields);
+    const _name = React__default.useRef(name);
     const _actioned = React__default.useRef(false);
+    _name.current = name;
     _fieldIds.current = fields;
     control._names.array.add(name);
-    React__default.useMemo(() => rules &&
-        control.register(name, rules), [control, rules, name]);
-    useEffect(() => control._subjects.array.subscribe({
+    rules &&
+        control.register(name, rules);
+    useIsomorphicLayoutEffect(() => control._subjects.array.subscribe({
         next: ({ values, name: fieldArrayName, }) => {
-            if (fieldArrayName === name || !fieldArrayName) {
-                const fieldValues = get(values, name);
+            if (fieldArrayName === _name.current || !fieldArrayName) {
+                const fieldValues = get(values, _name.current);
                 if (Array.isArray(fieldValues)) {
                     setFields(fieldValues);
                     ids.current = fieldValues.map(generateId);
                 }
             }
         },
-    }).unsubscribe, [control, name]);
+    }).unsubscribe, [control]);
     const updateValues = React__default.useCallback((updatedFieldArrayValues) => {
         _actioned.current = true;
         control._setFieldArray(name, updatedFieldArrayValues);
@@ -2599,7 +2599,6 @@ function useFieldArray(props) {
     };
 }
 
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
 /**
  * Custom hook to manage the entire form.
  *
@@ -2652,14 +2651,21 @@ function useForm(props = {}) {
             : props.defaultValues,
     });
     if (!_formControl.current) {
-        _formControl.current = {
-            ...(props.formControl ? props.formControl : createFormControl(props)),
-            formState,
-        };
-        if (props.formControl &&
-            props.defaultValues &&
-            !isFunction(props.defaultValues)) {
-            props.formControl.reset(props.defaultValues, props.resetOptions);
+        if (props.formControl) {
+            _formControl.current = {
+                ...props.formControl,
+                formState,
+            };
+            if (props.defaultValues && !isFunction(props.defaultValues)) {
+                props.formControl.reset(props.defaultValues, props.resetOptions);
+            }
+        }
+        else {
+            const { formControl, ...rest } = createFormControl(props);
+            _formControl.current = {
+                ...rest,
+                formState,
+            };
         }
     }
     const control = _formControl.current.control;
@@ -2685,10 +2691,13 @@ function useForm(props = {}) {
         if (props.reValidateMode) {
             control._options.reValidateMode = props.reValidateMode;
         }
-        if (props.errors && !isEmptyObject(props.errors)) {
+    }, [control, props.mode, props.reValidateMode]);
+    React__default.useEffect(() => {
+        if (props.errors) {
             control._setErrors(props.errors);
+            control._focusError();
         }
-    }, [control, props.errors, props.mode, props.reValidateMode]);
+    }, [control, props.errors]);
     React__default.useEffect(() => {
         props.shouldUnregister &&
             control._subjects.state.next({