react-hook-form 7.56.0 → 7.56.2

package/dist/index.esm.mjs

@@ -1,4 +1,5 @@
-import React, { useRef, useEffect } from 'react';
+import * as React from 'react';
+import React__default from 'react';
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -130,7 +131,7 @@ const INPUT_VALIDATION_RULES = {
     validate: 'validate',
 };
 
-const HookFormContext = React.createContext(null);
+const HookFormContext = React__default.createContext(null);
 /**
  * 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}.
  *
@@ -161,7 +162,7 @@ const HookFormContext = React.createContext(null);
  * }
  * ```
  */
-const useFormContext = () => React.useContext(HookFormContext);
+const useFormContext = () => React__default.useContext(HookFormContext);
 /**
  * A provider component that propagates the `useForm` methods to all children components via [React Context](https://reactjs.org/docs/context.html) API. To be used with {@link useFormContext}.
  *
@@ -194,7 +195,7 @@ const useFormContext = () => React.useContext(HookFormContext);
  */
 const FormProvider = (props) => {
     const { children, ...data } = props;
-    return (React.createElement(HookFormContext.Provider, { value: data }, children));
+    return (React__default.createElement(HookFormContext.Provider, { value: data }, children));
 };
 
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
@@ -216,47 +217,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 = useRef(deps);
-    if (!deepEqual(deps, ref.current)) {
-        ref.current = deps;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    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.
@@ -291,8 +252,8 @@ const useDeepEqualEffect = (effect, deps) => {
 function useFormState(props) {
     const methods = useFormContext();
     const { control = methods.control, disabled, name, exact } = props || {};
-    const [formState, updateFormState] = React.useState(control._formState);
-    const _localProxyFormState = React.useRef({
+    const [formState, updateFormState] = React__default.useState(control._formState);
+    const _localProxyFormState = React__default.useRef({
         isDirty: false,
         isLoading: false,
         dirtyFields: false,
@@ -302,7 +263,7 @@ function useFormState(props) {
         isValid: false,
         errors: false,
     });
-    useDeepEqualEffect(() => control._subscribe({
+    useIsomorphicLayoutEffect(() => control._subscribe({
         name: name,
         formState: _localProxyFormState.current,
         exact,
@@ -314,10 +275,10 @@ function useFormState(props) {
                 });
         },
     }), [name, disabled, exact]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         _localProxyFormState.current.isValid && control._setValid(true);
     }, [control]);
-    return React.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
+    return React__default.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
 }
 
 var isString = (value) => typeof value === 'string';
@@ -353,17 +314,18 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
 function useWatch(props) {
     const methods = useFormContext();
     const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
-    const [value, updateValue] = React.useState(control._getWatch(name, defaultValue));
-    useDeepEqualEffect(() => control._subscribe({
+    const _defaultValue = React__default.useRef(defaultValue);
+    const [value, updateValue] = React__default.useState(control._getWatch(name, _defaultValue.current));
+    useIsomorphicLayoutEffect(() => control._subscribe({
         name: name,
         formState: {
             values: true,
         },
         exact,
         callback: (formState) => !disabled &&
-            updateValue(generateWatchOutput(name, control._names, formState.values || control._formValues, false, defaultValue)),
-    }), [name, defaultValue, disabled, exact]);
-    React.useEffect(() => control._removeUnmounted());
+            updateValue(generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current)),
+    }), [name, control, disabled, exact]);
+    React__default.useEffect(() => control._removeUnmounted());
     return value;
 }
 
@@ -406,13 +368,13 @@ function useController(props) {
         name,
         exact: true,
     });
-    const _props = React.useRef(props);
-    const _registerProps = React.useRef(control.register(name, {
+    const _props = React__default.useRef(props);
+    const _registerProps = React__default.useRef(control.register(name, {
         ...props.rules,
         value,
         ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
     }));
-    const fieldState = React.useMemo(() => Object.defineProperties({}, {
+    const fieldState = React__default.useMemo(() => Object.defineProperties({}, {
         invalid: {
             enumerable: true,
             get: () => !!get(formState.errors, name),
@@ -434,32 +396,27 @@ function useController(props) {
             get: () => get(formState.errors, name),
         },
     }), [formState, name]);
-    const onChange = React.useCallback((event) => _registerProps.current.onChange({
+    const onChange = React__default.useCallback((event) => _registerProps.current.onChange({
         target: {
             value: getEventValue(event),
             name: name,
         },
         type: EVENTS.CHANGE,
     }), [name]);
-    const onBlur = React.useCallback(() => _registerProps.current.onBlur({
+    const onBlur = React__default.useCallback(() => _registerProps.current.onBlur({
         target: {
             value: get(control._formValues, name),
             name: name,
         },
         type: EVENTS.BLUR,
     }), [name, control._formValues]);
-    const ref = React.useCallback((elm) => {
+    const ref = React__default.useCallback((elm) => {
         const field = get(control._fields, name);
         if (field && elm) {
-            field._f.ref = {
-                focus: () => elm.focus(),
-                select: () => elm.select(),
-                setCustomValidity: (message) => elm.setCustomValidity(message),
-                reportValidity: () => elm.reportValidity(),
-            };
+            field._f.ref = elm;
         }
     }, [control._fields, name]);
-    const field = React.useMemo(() => ({
+    const field = React__default.useMemo(() => ({
         name,
         value,
         ...(isBoolean(disabled) || formState.disabled
@@ -469,7 +426,7 @@ function useController(props) {
         onBlur,
         ref,
     }), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
         control.register(name, {
             ..._props.current.rules,
@@ -500,13 +457,13 @@ function useController(props) {
                 : updateMounted(name, false);
         };
     }, [name, control, isArrayField, shouldUnregister]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         control._setDisabledField({
             disabled,
             name,
         });
     }, [disabled, name, control]);
-    return React.useMemo(() => ({
+    return React__default.useMemo(() => ({
         field,
         formState,
         fieldState,
@@ -598,7 +555,7 @@ const POST_REQUEST = 'post';
  */
 function Form(props) {
     const methods = useFormContext();
-    const [mounted, setMounted] = React.useState(false);
+    const [mounted, setMounted] = React__default.useState(false);
     const { control = methods.control, onSubmit, children, action, method = POST_REQUEST, headers, encType, onError, render, onSuccess, validateStatus, ...rest } = props;
     const submit = async (event) => {
         let hasError = false;
@@ -664,12 +621,12 @@ function Form(props) {
             });
         }
     };
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         setMounted(true);
     }, []);
-    return render ? (React.createElement(React.Fragment, null, render({
+    return render ? (React__default.createElement(React__default.Fragment, null, render({
         submit,
-    }))) : (React.createElement("form", { noValidate: mounted, action: action, method: method, encType: encType, onSubmit: submit, ...rest }, children));
+    }))) : (React__default.createElement("form", { noValidate: mounted, action: action, method: method, encType: encType, onSubmit: submit, ...rest }, children));
 }
 
 var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
@@ -712,6 +669,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';
@@ -1275,7 +1265,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
         ? {}
@@ -2386,17 +2376,17 @@ var updateAt = (fieldValues, index, value) => {
 function useFieldArray(props) {
     const methods = useFormContext();
     const { control = methods.control, name, keyName = 'id', shouldUnregister, rules, } = props;
-    const [fields, setFields] = React.useState(control._getFieldArray(name));
-    const ids = React.useRef(control._getFieldArray(name).map(generateId));
-    const _fieldIds = React.useRef(fields);
-    const _name = React.useRef(name);
-    const _actioned = React.useRef(false);
+    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);
     rules &&
         control.register(name, rules);
-    React.useEffect(() => control._subjects.array.subscribe({
+    React__default.useEffect(() => control._subjects.array.subscribe({
         next: ({ values, name: fieldArrayName, }) => {
             if (fieldArrayName === _name.current || !fieldArrayName) {
                 const fieldValues = get(values, _name.current);
@@ -2407,7 +2397,7 @@ function useFieldArray(props) {
             }
         },
     }).unsubscribe, [control]);
-    const updateValues = React.useCallback((updatedFieldArrayValues) => {
+    const updateValues = React__default.useCallback((updatedFieldArrayValues) => {
         _actioned.current = true;
         control._setFieldArray(name, updatedFieldArrayValues);
     }, [control, name]);
@@ -2496,7 +2486,7 @@ function useFieldArray(props) {
         setFields([...updatedFieldArrayValues]);
         control._setFieldArray(name, [...updatedFieldArrayValues], (data) => data, {}, true, false);
     };
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         control._state.action = false;
         isWatched(name, control._names) &&
             control._subjects.state.next({
@@ -2556,7 +2546,7 @@ function useFieldArray(props) {
         control._setValid();
         _actioned.current = false;
     }, [fields, name, control]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         !get(control._formValues, name) && control._setFieldArray(name);
         return () => {
             const updateMounted = (name, value) => {
@@ -2571,22 +2561,21 @@ function useFieldArray(props) {
         };
     }, [name, control, keyName, shouldUnregister]);
     return {
-        swap: React.useCallback(swap, [updateValues, name, control]),
-        move: React.useCallback(move, [updateValues, name, control]),
-        prepend: React.useCallback(prepend, [updateValues, name, control]),
-        append: React.useCallback(append, [updateValues, name, control]),
-        remove: React.useCallback(remove, [updateValues, name, control]),
-        insert: React.useCallback(insert$1, [updateValues, name, control]),
-        update: React.useCallback(update, [updateValues, name, control]),
-        replace: React.useCallback(replace, [updateValues, name, control]),
-        fields: React.useMemo(() => fields.map((field, index) => ({
+        swap: React__default.useCallback(swap, [updateValues, name, control]),
+        move: React__default.useCallback(move, [updateValues, name, control]),
+        prepend: React__default.useCallback(prepend, [updateValues, name, control]),
+        append: React__default.useCallback(append, [updateValues, name, control]),
+        remove: React__default.useCallback(remove, [updateValues, name, control]),
+        insert: React__default.useCallback(insert$1, [updateValues, name, control]),
+        update: React__default.useCallback(update, [updateValues, name, control]),
+        replace: React__default.useCallback(replace, [updateValues, name, control]),
+        fields: React__default.useMemo(() => fields.map((field, index) => ({
             ...field,
             [keyName]: ids.current[index] || generateId(),
         })), [fields, keyName]),
     };
 }
 
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 /**
  * Custom hook to manage the entire form.
  *
@@ -2617,9 +2606,9 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayou
  * ```
  */
 function useForm(props = {}) {
-    const _formControl = React.useRef(undefined);
-    const _values = React.useRef(undefined);
-    const [formState, updateFormState] = React.useState({
+    const _formControl = React__default.useRef(undefined);
+    const _values = React__default.useRef(undefined);
+    const [formState, updateFormState] = React__default.useState({
         isDirty: false,
         isValidating: false,
         isLoading: isFunction(props.defaultValues),
@@ -2661,10 +2650,11 @@ function useForm(props = {}) {
             ...data,
             isReady: true,
         }));
+        control._formState.isReady = true;
         return sub;
     }, [control]);
-    React.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
-    React.useEffect(() => {
+    React__default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
+    React__default.useEffect(() => {
         if (props.mode) {
             control._options.mode = props.mode;
         }
@@ -2675,13 +2665,13 @@ function useForm(props = {}) {
             control._setErrors(props.errors);
         }
     }, [control, props.errors, props.mode, props.reValidateMode]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         props.shouldUnregister &&
             control._subjects.state.next({
                 values: control._getWatch(),
             });
     }, [control, props.shouldUnregister]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         if (control._proxyFormState.isDirty) {
             const isDirty = control._getDirty();
             if (isDirty !== formState.isDirty) {
@@ -2691,7 +2681,7 @@ function useForm(props = {}) {
             }
         }
     }, [control, formState.isDirty]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         if (props.values && !deepEqual(props.values, _values.current)) {
             control._reset(props.values, control._options.resetOptions);
             _values.current = props.values;
@@ -2701,7 +2691,7 @@ function useForm(props = {}) {
             control._resetDefaultValues();
         }
     }, [control, props.values]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         if (!control._state.mount) {
             control._setValid();
             control._state.mount = true;