react-hook-form 7.72.1 → 7.74.0

package/dist/index.esm.mjs

@@ -64,7 +64,10 @@ var get = (object, path, defaultValue) => {
     if (!path || !isObject(object)) {
         return defaultValue;
     }
-    const result = (isKey(path) ? [path] : stringToPath(path)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], object);
+    const paths = isKey(path) ? [path] : stringToPath(path);
+    const result = paths.reduce((result, key) => {
+        return isNullOrUndefined(result) ? undefined : result[key];
+    }, object);
     return isUndefined(result) || result === object
         ? isUndefined(object[path])
             ? defaultValue
@@ -239,7 +242,10 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
 
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
-function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
+function deepEqual(object1, object2, visited = new WeakSet()) {
+    if (object1 === object2) {
+        return true;
+    }
     if (isPrimitive(object1) || isPrimitive(object2)) {
         return Object.is(object1, object2);
     }
@@ -251,14 +257,14 @@ function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
     if (keys1.length !== keys2.length) {
         return false;
     }
-    if (_internal_visited.has(object1) || _internal_visited.has(object2)) {
+    if (visited.has(object1) || visited.has(object2)) {
         return true;
     }
-    _internal_visited.add(object1);
-    _internal_visited.add(object2);
+    visited.add(object1);
+    visited.add(object2);
     for (const key of keys1) {
         const val1 = object1[key];
-        if (!keys2.includes(key)) {
+        if (!(key in object2)) {
             return false;
         }
         if (key !== 'ref') {
@@ -266,7 +272,7 @@ function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
             if ((isDateObject(val1) && isDateObject(val2)) ||
                 ((isObject(val1) || Array.isArray(val1)) &&
                     (isObject(val2) || Array.isArray(val2)))
-                ? !deepEqual(val1, val2, _internal_visited)
+                ? !deepEqual(val1, val2, visited)
                 : !Object.is(val1, val2)) {
                 return false;
             }
@@ -402,7 +408,6 @@ function useController(props) {
         exact,
     });
     const _props = React.useRef(props);
-    const _previousNameRef = React.useRef(undefined);
     const _registerProps = React.useRef(control.register(name, {
         ...props.rules,
         value,
@@ -468,10 +473,6 @@ function useController(props) {
     }), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
     React.useEffect(() => {
         const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
-        const previousName = _previousNameRef.current;
-        if (previousName && previousName !== name && !isArrayField) {
-            control.unregister(previousName);
-        }
         control.register(name, {
             ..._props.current.rules,
             ...(isBoolean(_props.current.disabled)
@@ -493,7 +494,6 @@ function useController(props) {
             }
         }
         !isArrayField && control.register(name);
-        _previousNameRef.current = name;
         return () => {
             (isArrayField
                 ? _shouldUnregisterField && !control._state.action
@@ -706,7 +706,7 @@ function Form(props) {
     const methods = useFormContext();
     const [mounted, setMounted] = React.useState(false);
     const { control = methods.control, onSubmit, children, action, method = POST_REQUEST, headers, encType, onError, render, onSuccess, validateStatus, ...rest } = props;
-    const submit = async (event) => {
+    const submit = React.useCallback(async (event) => {
         let hasError = false;
         let type = '';
         await control.handleSubmit(async (data) => {
@@ -716,7 +716,7 @@ function Form(props) {
                 formDataJson = JSON.stringify(data);
             }
             catch (_a) { }
-            const flattenFormValues = flatten(control._formValues);
+            const flattenFormValues = flatten(data);
             for (const key in flattenFormValues) {
                 formData.append(key, flattenFormValues[key]);
             }
@@ -763,15 +763,25 @@ function Form(props) {
                 }
             }
         })(event);
-        if (hasError && props.control) {
-            props.control._subjects.state.next({
+        if (hasError && control) {
+            control._subjects.state.next({
                 isSubmitSuccessful: false,
             });
-            props.control.setError('root.server', {
+            control.setError('root.server', {
                 type,
             });
         }
-    };
+    }, [
+        control,
+        onSubmit,
+        method,
+        action,
+        headers,
+        encType,
+        validateStatus,
+        onError,
+        onSuccess,
+    ]);
     React.useEffect(() => {
         setMounted(true);
     }, []);
@@ -867,7 +877,12 @@ function baseGet(object, updatePath) {
     const length = updatePath.slice(0, -1).length;
     let index = 0;
     while (index < length) {
-        object = isUndefined(object) ? index++ : object[updatePath[index++]];
+        if (isNullOrUndefined(object)) {
+            object = undefined;
+            break;
+        }
+        object = object[updatePath[index]];
+        index++;
     }
     return object;
 }
@@ -880,6 +895,10 @@ function isEmptyArray(obj) {
     return true;
 }
 function unset(object, path) {
+    if (isString(path) && Object.prototype.hasOwnProperty.call(object, path)) {
+        delete object[path];
+        return object;
+    }
     const paths = Array.isArray(path)
         ? path
         : isKey(path)
@@ -1221,7 +1240,8 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
         isUndefined(inputValue)) ||
         (isHTMLElement(ref) && ref.value === '') ||
         inputValue === '' ||
-        (Array.isArray(inputValue) && !inputValue.length);
+        (Array.isArray(inputValue) && !inputValue.length) ||
+        (valueAsNumber && typeof inputValue === 'number' && isNaN(inputValue));
     const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
     const getMinMaxMessage = (exceedMax, maxLengthMessage, minLengthMessage, maxType = INPUT_VALIDATION_RULES.maxLength, minType = INPUT_VALIDATION_RULES.minLength) => {
         const message = exceedMax ? maxLengthMessage : minLengthMessage;
@@ -1821,7 +1841,7 @@ function createFormControl(props = {}) {
             updateTouchAndDirty(name, fieldValue, options.shouldTouch, options.shouldDirty, true);
         options.shouldValidate && trigger(name);
     };
-    const setValues = (name, value, options) => {
+    const setFieldValues = (name, value, options) => {
         for (const fieldKey in value) {
             if (!value.hasOwnProperty(fieldKey)) {
                 return;
@@ -1833,7 +1853,7 @@ function createFormControl(props = {}) {
                 isObject(fieldValue) ||
                 (field && !field._f)) &&
                 !isDateObject(fieldValue)
-                ? setValues(fieldName, fieldValue, options)
+                ? setFieldValues(fieldName, fieldValue, options)
                 : setFieldValue(fieldName, fieldValue, options);
         }
     };
@@ -1841,17 +1861,15 @@ function createFormControl(props = {}) {
         const field = get(_fields, name);
         const isFieldArray = _names.array.has(name);
         const cloneValue = cloneObject(value);
+        const previousValue = get(_formValues, name);
+        const isValueUnchanged = deepEqual(previousValue, cloneValue);
         set(_formValues, name, cloneValue);
         if (isFieldArray) {
             _subjects.array.next({
                 name,
                 values: cloneObject(_formValues),
             });
-            if ((_proxyFormState.isDirty ||
-                _proxyFormState.dirtyFields ||
-                _proxySubscribeFormState.isDirty ||
-                _proxySubscribeFormState.dirtyFields) &&
-                options.shouldDirty) {
+            if (options.shouldDirty) {
                 _updateDirtyFields(name);
                 _subjects.state.next({
                     name,
@@ -1861,22 +1879,41 @@ function createFormControl(props = {}) {
             }
         }
         else {
-            field && !field._f && !isNullOrUndefined(cloneValue)
-                ? setValues(name, cloneValue, options)
-                : setFieldValue(name, cloneValue, options);
+            const isEmpty = (Array.isArray(cloneValue) && !cloneValue.length) ||
+                isEmptyObject(cloneValue);
+            if (!field || field._f || isNullOrUndefined(cloneValue) || isEmpty) {
+                setFieldValue(name, cloneValue, options);
+            }
+            else {
+                setFieldValues(name, cloneValue, options);
+            }
         }
-        if (isWatched(name, _names)) {
-            _subjects.state.next({
-                ..._formState,
-                name,
-                values: cloneObject(_formValues),
-            });
+        if (!isValueUnchanged) {
+            if (isWatched(name, _names)) {
+                _subjects.state.next({
+                    ..._formState,
+                    name,
+                    values: cloneObject(_formValues),
+                });
+            }
+            else {
+                _subjects.state.next({
+                    name: _state.mount ? name : undefined,
+                    values: cloneObject(_formValues),
+                });
+            }
         }
-        else {
-            _subjects.state.next({
-                name: _state.mount ? name : undefined,
-                values: cloneObject(_formValues),
-            });
+    };
+    const setValues = (formValues) => {
+        const updatedFormValues = isFunction(formValues)
+            ? formValues(_formValues)
+            : formValues;
+        if (!deepEqual(_formValues, updatedFormValues)) {
+            _formValues = {
+                ..._formValues,
+                ...updatedFormValues,
+            };
+            _subjects.state.next({ ..._formState, values: _formValues });
         }
     };
     const onChange = async (event) => {
@@ -2095,15 +2132,16 @@ function createFormControl(props = {}) {
     const watch = (name, defaultValue) => isFunction(name)
         ? _subjects.state.subscribe({
             next: (payload) => 'values' in payload &&
-                name(_getWatch(undefined, defaultValue), payload),
+                name(payload.values || _getWatch(undefined, defaultValue), payload),
         })
         : _getWatch(name, defaultValue, true);
     const _subscribe = (props) => _subjects.state.subscribe({
         next: (formState) => {
             if (shouldSubscribeByName(props.name, formState.name, props.exact) &&
                 shouldRenderFormState(formState, props.formState || _proxyFormState, _setFormState, props.reRenderRoot)) {
+                const snapshot = { ..._formValues };
                 props.callback({
-                    values: { ..._formValues },
+                    values: snapshot,
                     ..._formState,
                     ...formState,
                     defaultValues: _defaultValues,
@@ -2165,7 +2203,7 @@ function createFormControl(props = {}) {
     const register = (name, options = {}) => {
         let field = get(_fields, name);
         const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
-        const shouldRevalidateRemount = !_names.registerName.has(name) && field && !field._f.mount;
+        const shouldRevalidateRemount = !_names.registerName.has(name) && field && field._f && !field._f.mount;
         set(_fields, name, {
             ...(field || {}),
             _f: {
@@ -2575,6 +2613,7 @@ function createFormControl(props = {}) {
         handleSubmit,
         watch,
         setValue,
+        setValues,
         getValues,
         reset,
         resetField,
@@ -2812,10 +2851,11 @@ function useFieldArray(props) {
             control._subjects.state.next({
                 ...control._formState,
             });
+        const validationModes = getValidationModes(control._options.mode);
         if (_actioned.current &&
-            (!getValidationModes(control._options.mode).isOnSubmit ||
-                control._formState.isSubmitted) &&
-            !getValidationModes(control._options.reValidateMode).isOnSubmit) {
+            (!validationModes.isOnSubmit || control._formState.isSubmitted) &&
+            !getValidationModes(control._options.reValidateMode).isOnSubmit &&
+            !validationModes.isOnBlur) {
             if (control._options.resolver) {
                 control._runSchema([name]).then((result) => {
                     control._updateIsValidating([name]);