react-hook-form 6.9.2 → 6.9.5

package/dist/index.ie11.development.js

@@ -154,30 +154,28 @@ function attachEventListeners(_a, shouldAttachChangeEvent, handleChange) {
 
 var isNullOrUndefined = (function (value) { return value == null; });
 
-var isArray = (function (value) { return Array.isArray(value); });
-
 var isObjectType = function (value) { return typeof value === 'object'; };
 var isObject = (function (value) {
     return !isNullOrUndefined(value) &&
-        !isArray(value) &&
+        !Array.isArray(value) &&
         isObjectType(value) &&
         !(value instanceof Date);
 });
 
 var isKey = (function (value) {
-    return !isArray(value) &&
+    return !Array.isArray(value) &&
         (/^\w*$/.test(value) ||
             !/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/.test(value));
 });
 
+var compact = (function (value) { return value.filter(Boolean); });
+
 var stringToPath = (function (input) {
-    var result = [];
-    input.replace(/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g, function (match, mathNumber, mathQuote, originalString) {
-        result.push(mathQuote
-            ? originalString.replace(/\\(\\)?/g, '$1')
-            : mathNumber || match);
-    });
-    return result;
+    return compact(input
+        .replace(/["|']/g, '')
+        .replace(/\[/g, '.')
+        .replace(/\]/g, '')
+        .split('.'));
 });
 
 function set(object, path, value) {
@@ -191,7 +189,7 @@ function set(object, path, value) {
         if (index !== lastIndex) {
             var objValue = object[key];
             newValue =
-                isObject(objValue) || isArray(objValue)
+                isObject(objValue) || Array.isArray(objValue)
                     ? objValue
                     : !isNaN(+tempPath[index + 1])
                         ? []
@@ -203,24 +201,18 @@ function set(object, path, value) {
     return object;
 }
 
-var transformToNestObject = (function (data) {
-    return Object.entries(data).reduce(function (previous, _a) {
-        var _b;
-        var _c = __read(_a, 2), key = _c[0], value = _c[1];
-        if (!isKey(key)) {
-            set(previous, key, value);
-            return previous;
-        }
-        return __assign(__assign({}, previous), (_b = {}, _b[key] = value, _b));
-    }, {});
+var transformToNestObject = (function (data, value) {
+    if (value === void 0) { value = {}; }
+    for (var key in data) {
+        !isKey(key) ? set(value, key, data[key]) : (value[key] = data[key]);
+    }
+    return value;
 });
 
 var isUndefined = (function (val) { return val === undefined; });
 
-var filterOutFalsy = (function (value) { return value.filter(Boolean); });
-
 var get = (function (obj, path, defaultValue) {
-    var result = filterOutFalsy(path.split(/[,[\].]+?/)).reduce(function (result, key) { return (isNullOrUndefined(result) ? result : result[key]); }, obj);
+    var result = compact(path.split(/[,[\].]+?/)).reduce(function (result, key) { return (isNullOrUndefined(result) ? result : result[key]); }, obj);
     return isUndefined(result) || result === obj
         ? isUndefined(obj[path])
             ? defaultValue
@@ -259,7 +251,7 @@ var defaultReturn = {
     value: '',
 };
 var getRadioValue = (function (options) {
-    return isArray(options)
+    return Array.isArray(options)
         ? options.reduce(function (previous, option) {
             return option && option.ref.checked
                 ? {
@@ -304,7 +296,7 @@ var defaultResult = {
 };
 var validResult = { value: true, isValid: true };
 var getCheckboxValue = (function (options) {
-    if (isArray(options)) {
+    if (Array.isArray(options)) {
         if (options.length > 1) {
             var values = options
                 .filter(function (option) { return option && option.ref.checked; })
@@ -399,7 +391,7 @@ function unset(object, path) {
             objectRef = objectRef ? objectRef[item] : object[item];
             if (currentPathsLength === index &&
                 ((isObject(objectRef) && isEmptyObject(objectRef)) ||
-                    (isArray(objectRef) &&
+                    (Array.isArray(objectRef) &&
                         !objectRef.filter(function (data) {
                             return (isObject(data) && !isEmptyObject(data)) || isBoolean(data);
                         }).length))) {
@@ -429,15 +421,15 @@ function findRemovedFieldAndRemoveListener(fieldsRef, handleChange, field, shall
     }
     if ((isRadioInput(ref) || isCheckBoxInput(ref)) && fieldRef) {
         var options_1 = fieldRef.options;
-        if (isArray(options_1) && options_1.length) {
-            filterOutFalsy(options_1).forEach(function (option, index) {
+        if (Array.isArray(options_1) && options_1.length) {
+            compact(options_1).forEach(function (option, index) {
                 var ref = option.ref;
                 if ((ref && isDetached(ref) && isSameRef(option, ref)) || forceDelete) {
                     removeAllEventListeners(ref, handleChange);
                     unset(options_1, "[" + index + "]");
                 }
             });
-            if (options_1 && !filterOutFalsy(options_1).length) {
+            if (options_1 && !compact(options_1).length) {
                 delete fieldsRef.current[name];
             }
         }
@@ -456,7 +448,7 @@ function setFieldArrayDirtyFields(values, defaultValues, dirtyFields, parentNode
     var index = -1;
     while (++index < values.length) {
         for (var key in values[index]) {
-            if (isArray(values[index][key])) {
+            if (Array.isArray(values[index][key])) {
                 !dirtyFields[index] && (dirtyFields[index] = {});
                 dirtyFields[index][key] = [];
                 setFieldArrayDirtyFields(values[index][key], get(defaultValues[index] || {}, key, []), dirtyFields[index][key], dirtyFields[index], key);
@@ -488,13 +480,11 @@ function deepMerge(target, source) {
         var targetValue = target[key];
         var sourceValue = source[key];
         try {
-            if ((isObject(targetValue) && isObject(sourceValue)) ||
-                (isArray(targetValue) && isArray(sourceValue))) {
-                target[key] = deepMerge(targetValue, sourceValue);
-            }
-            else {
-                target[key] = sourceValue;
-            }
+            target[key] =
+                (isObject(targetValue) && isObject(sourceValue)) ||
+                    (Array.isArray(targetValue) && Array.isArray(sourceValue))
+                    ? deepMerge(targetValue, sourceValue)
+                    : sourceValue;
         }
         catch (_a) { }
     }
@@ -507,7 +497,7 @@ var getFieldsValues = (function (fieldsRef, shallowFieldsStateRef, excludeDisabl
         if (isUndefined(search) ||
             (isString(search)
                 ? name_1.startsWith(search)
-                : isArray(search) && search.find(function (data) { return name_1.startsWith(data); }))) {
+                : Array.isArray(search) && search.find(function (data) { return name_1.startsWith(data); }))) {
             output[name_1] = getFieldValue(fieldsRef, name_1, undefined, excludeDisabled);
         }
     };
@@ -532,7 +522,8 @@ function deepEqual(object1, object2, isErrorObject) {
             if (!(isErrorObject && ['ref', 'context'].includes(key))) {
                 var val1 = object1[key];
                 var val2 = object2[key];
-                if ((isObject(val1) || isArray(val1)) && (isObject(val2) || isArray(val2))
+                if ((isObject(val1) || Array.isArray(val1)) &&
+                    (isObject(val2) || Array.isArray(val2))
                     ? !deepEqual(val1, val2, isErrorObject)
                     : val1 !== val2) {
                     return false;
@@ -782,7 +773,7 @@ var assignWatchFields = (function (fieldValues, fieldName, watchFields, inputVal
     }
     else {
         value = get(fieldValues, fieldName);
-        if (isObject(value) || isArray(value)) {
+        if (isObject(value) || Array.isArray(value)) {
             getPath(fieldName, value).forEach(function (name) { return watchFields.add(name); });
         }
     }
@@ -864,6 +855,22 @@ function onDomRemove(fieldsRef, removeFieldEventListenerAndRef) {
     return observer;
 }
 
+function cloneObject(object) {
+    var copy;
+    if (isPrimitive(object)) {
+        return object;
+    }
+    if (object instanceof Date) {
+        copy = new Date(object.getTime());
+        return copy;
+    }
+    copy = Array.isArray(object) ? [] : {};
+    for (var key in object) {
+        copy[key] = cloneObject(object[key]);
+    }
+    return copy;
+}
+
 var modeChecker = (function (mode) { return ({
     isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
     isOnBlur: mode === VALIDATION_MODE.onBlur,
@@ -896,7 +903,7 @@ function useForm(_a) {
     var isUnMount = React.useRef(false);
     var isWatchAllRef = React.useRef(false);
     var handleChangeRef = React.useRef();
-    var shallowFieldsStateRef = React.useRef(shouldUnregister ? {} : __assign({}, defaultValues));
+    var shallowFieldsStateRef = React.useRef(shouldUnregister ? {} : cloneObject(defaultValues));
     var resetFieldArrayFunctionRef = React.useRef({});
     var contextRef = React.useRef(context);
     var resolverRef = React.useRef(resolver);
@@ -988,7 +995,7 @@ function useForm(_a) {
             options.length > 1
                 ? options.forEach(function (_a) {
                     var checkboxRef = _a.ref;
-                    return (checkboxRef.checked = isArray(value)
+                    return (checkboxRef.checked = Array.isArray(value)
                         ? !!value.find(function (data) { return data === checkboxRef.value; })
                         : value === checkboxRef.value);
                 })
@@ -1001,7 +1008,7 @@ function useForm(_a) {
     var isFormDirty = function () {
         return !deepEqual(getValues(), isEmptyObject(defaultValuesRef.current)
             ? defaultValuesAtRenderRef.current
-            : defaultValuesRef.current) || !isEmptyObject(formStateRef.current.dirtyFields);
+            : defaultValuesRef.current);
     };
     var updateAndGetDirtyState = React.useCallback(function (name, shouldRender) {
         if (shouldRender === void 0) { shouldRender = true; }
@@ -1053,7 +1060,7 @@ function useForm(_a) {
                 case 1:
                     errors = (_a.sent()).errors;
                     previousFormIsValid = formStateRef.current.isValid;
-                    if (isArray(names)) {
+                    if (Array.isArray(names)) {
                         isInputsValid = names
                             .map(function (name) {
                             var error = get(errors, name);
@@ -1087,7 +1094,7 @@ function useForm(_a) {
                     if (resolverRef.current) {
                         return [2 /*return*/, executeSchemaOrResolverValidation(fields)];
                     }
-                    if (!isArray(fields)) return [3 /*break*/, 2];
+                    if (!Array.isArray(fields)) return [3 /*break*/, 2];
                     return [4 /*yield*/, Promise.all(fields.map(function (data) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
                             switch (_a.label) {
                                 case 0: return [4 /*yield*/, executeValidation(data, null)];
@@ -1140,8 +1147,9 @@ function useForm(_a) {
                 resetFieldArrayFunctionRef.current[name]((_a = {},
                     _a[name] = value,
                     _a));
-                if (readFormStateRef.current.isDirty ||
-                    readFormStateRef.current.dirtyFields) {
+                if ((readFormStateRef.current.isDirty ||
+                    readFormStateRef.current.dirtyFields) &&
+                    config.shouldDirty) {
                     set(formStateRef.current.dirtyFields, name, setFieldArrayDirtyFields(value, get(defaultValuesRef.current, name, []), get(formStateRef.current.dirtyFields, name, [])));
                     updateFormState({
                         isDirty: !deepEqual(__assign(__assign({}, getValues()), (_b = {}, _b[name] = value, _b)), defaultValuesRef.current),
@@ -1235,11 +1243,12 @@ function useForm(_a) {
     function setFieldArrayDefaultValues(data) {
         var e_2, _a, _b;
         if (!shouldUnregister) {
+            var copy = cloneObject(data);
             try {
                 for (var _c = __values(fieldArrayNamesRef.current), _d = _c.next(); !_d.done; _d = _c.next()) {
                     var value = _d.value;
-                    if (isKey(value) && !data[value]) {
-                        data = __assign(__assign({}, data), (_b = {}, _b[value] = [], _b));
+                    if (isKey(value) && !copy[value]) {
+                        copy = __assign(__assign({}, copy), (_b = {}, _b[value] = [], _b));
                     }
                 }
             }
@@ -1250,6 +1259,7 @@ function useForm(_a) {
                 }
                 finally { if (e_2) throw e_2.error; }
             }
+            return copy;
         }
         return data;
     }
@@ -1258,7 +1268,7 @@ function useForm(_a) {
         if (isString(payload)) {
             return getFieldValue(fieldsRef, payload, shallowFieldsStateRef);
         }
-        if (isArray(payload)) {
+        if (Array.isArray(payload)) {
             var data = {};
             try {
                 for (var payload_1 = __values(payload), payload_1_1 = payload_1.next(); !payload_1_1.done; payload_1_1 = payload_1.next()) {
@@ -1299,10 +1309,37 @@ function useForm(_a) {
     var removeFieldEventListener = React.useCallback(function (field, forceDelete) {
         return findRemovedFieldAndRemoveListener(fieldsRef, handleChangeRef.current, field, shallowFieldsStateRef, shouldUnregister, forceDelete);
     }, [shouldUnregister]);
+    var updateWatchedValue = function (name) {
+        var e_4, _a;
+        if (isWatchAllRef.current) {
+            updateFormState();
+        }
+        else if (watchFieldsRef) {
+            var shouldRenderUseWatch = true;
+            try {
+                for (var _b = __values(watchFieldsRef.current), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var watchField = _c.value;
+                    if (watchField.startsWith(name)) {
+                        updateFormState();
+                        shouldRenderUseWatch = false;
+                        break;
+                    }
+                }
+            }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+            shouldRenderUseWatch && renderWatchedInputs(name);
+        }
+    };
     var removeFieldEventListenerAndRef = React.useCallback(function (field, forceDelete) {
         if (field) {
             removeFieldEventListener(field, forceDelete);
-            if (shouldUnregister && !filterOutFalsy(field.options || []).length) {
+            if (shouldUnregister && !compact(field.options || []).length) {
                 unset(defaultValuesAtRenderRef.current, field.ref.name);
                 unset(validFieldsRef.current, field.ref.name);
                 unset(fieldsWithValidationRef.current, field.ref.name);
@@ -1314,12 +1351,13 @@ function useForm(_a) {
                     dirtyFields: formStateRef.current.dirtyFields,
                 });
                 resolverRef.current && validateResolver();
+                updateWatchedValue(field.ref.name);
             }
         }
     }, [validateResolver, removeFieldEventListener]);
     function clearErrors(name) {
         name &&
-            (isArray(name) ? name : [name]).forEach(function (inputName) {
+            (Array.isArray(name) ? name : [name]).forEach(function (inputName) {
                 return fieldsRef.current[inputName]
                     ? isKey(inputName)
                         ? delete formStateRef.current.errors[inputName]
@@ -1352,7 +1390,7 @@ function useForm(_a) {
                 ? get(combinedDefaultValues, fieldNames)
                 : defaultValue, true);
         }
-        if (isArray(fieldNames)) {
+        if (Array.isArray(fieldNames)) {
             return fieldNames.reduce(function (previous, name) {
                 var _a;
                 return (__assign(__assign({}, previous), (_a = {}, _a[name] = assignWatchFields(fieldValues, name, watchFields, combinedDefaultValues), _a)));
@@ -1366,19 +1404,19 @@ function useForm(_a) {
         return watchInternal(fieldNames, defaultValue);
     }
     function unregister(name) {
-        var e_4, _a;
+        var e_5, _a;
         try {
-            for (var _b = __values(isArray(name) ? name : [name]), _c = _b.next(); !_c.done; _c = _b.next()) {
+            for (var _b = __values(Array.isArray(name) ? name : [name]), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var fieldName = _c.value;
                 removeFieldEventListenerAndRef(fieldsRef.current[fieldName], true);
             }
         }
-        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        catch (e_5_1) { e_5 = { error: e_5_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_4) throw e_4.error; }
+            finally { if (e_5) throw e_5.error; }
         }
     }
     function registerFieldRef(ref, validateOptions) {
@@ -1407,8 +1445,8 @@ function useForm(_a) {
         var defaultValue;
         if (field &&
             (isRadioOrCheckbox
-                ? isArray(field.options) &&
-                    filterOutFalsy(field.options).find(function (option) {
+                ? Array.isArray(field.options) &&
+                    compact(field.options).find(function (option) {
                         return value === option.ref.value && compareRef(option.ref);
                     })
                 : compareRef(field.ref))) {
@@ -1417,7 +1455,7 @@ function useForm(_a) {
         }
         if (type) {
             field = isRadioOrCheckbox
-                ? __assign({ options: __spread(filterOutFalsy((field && field.options) || []), [
+                ? __assign({ options: __spread(compact((field && field.options) || []), [
                         {
                             ref: ref,
                         },
@@ -1483,8 +1521,8 @@ function useForm(_a) {
         }
     }
     var handleSubmit = React.useCallback(function (onValid, onInvalid) { return function (e) { return __awaiter(_this, void 0, void 0, function () {
-        var fieldErrors, fieldValues, _a, errors, values, _b, _c, field, name_2, fieldError, e_5_1, _d;
-        var e_5, _e;
+        var fieldErrors, fieldValues, _a, errors, values, _b, _c, field, name_2, fieldError, e_6_1, _d;
+        var e_6, _e;
         return __generator(this, function (_f) {
             switch (_f.label) {
                 case 0:
@@ -1494,11 +1532,10 @@ function useForm(_a) {
                     }
                     fieldErrors = {};
                     fieldValues = setFieldArrayDefaultValues(getFieldsValues(fieldsRef, shallowFieldsStateRef, true));
-                    if (readFormStateRef.current.isSubmitting) {
+                    readFormStateRef.current.isSubmitting &&
                         updateFormState({
                             isSubmitting: true,
                         });
-                    }
                     _f.label = 1;
                 case 1:
                     _f.trys.push([1, , 16, 17]);
@@ -1506,8 +1543,7 @@ function useForm(_a) {
                     return [4 /*yield*/, resolverRef.current(fieldValues, contextRef.current, isValidateAllFieldCriteria)];
                 case 2:
                     _a = _f.sent(), errors = _a.errors, values = _a.values;
-                    formStateRef.current.errors = errors;
-                    fieldErrors = errors;
+                    formStateRef.current.errors = fieldErrors = errors;
                     fieldValues = values;
                     return [3 /*break*/, 10];
                 case 3:
@@ -1536,14 +1572,14 @@ function useForm(_a) {
                     return [3 /*break*/, 4];
                 case 7: return [3 /*break*/, 10];
                 case 8:
-                    e_5_1 = _f.sent();
-                    e_5 = { error: e_5_1 };
+                    e_6_1 = _f.sent();
+                    e_6 = { error: e_6_1 };
                     return [3 /*break*/, 10];
                 case 9:
                     try {
                         if (_c && !_c.done && (_e = _b.return)) _e.call(_b);
                     }
-                    finally { if (e_5) throw e_5.error; }
+                    finally { if (e_6) throw e_6.error; }
                     return [7 /*endfinally*/];
                 case 10:
                     if (!(isEmptyObject(fieldErrors) &&
@@ -1604,7 +1640,7 @@ function useForm(_a) {
         });
     };
     var reset = function (values, omitResetState) {
-        var e_6, _a;
+        var e_7, _a;
         if (omitResetState === void 0) { omitResetState = {}; }
         if (isWeb) {
             try {
@@ -1612,7 +1648,7 @@ function useForm(_a) {
                     var field = _c.value;
                     if (field) {
                         var ref = field.ref, options = field.options;
-                        var inputRef = isRadioOrCheckboxFunction(ref) && isArray(options)
+                        var inputRef = isRadioOrCheckboxFunction(ref) && Array.isArray(options)
                             ? options[0].ref
                             : ref;
                         if (isHTMLElement(inputRef)) {
@@ -1625,30 +1661,30 @@ function useForm(_a) {
                     }
                 }
             }
-            catch (e_6_1) { e_6 = { error: e_6_1 }; }
+            catch (e_7_1) { e_7 = { error: e_7_1 }; }
             finally {
                 try {
                     if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
-                finally { if (e_6) throw e_6.error; }
+                finally { if (e_7) throw e_7.error; }
             }
         }
         fieldsRef.current = {};
-        defaultValuesRef.current = __assign({}, (values || defaultValuesRef.current));
-        if (values) {
-            renderWatchedInputs('');
-        }
-        shallowFieldsStateRef.current = shouldUnregister ? {} : __assign({}, values) || {};
+        defaultValuesRef.current = cloneObject(values || defaultValuesRef.current);
+        values && renderWatchedInputs('');
         Object.values(resetFieldArrayFunctionRef.current).forEach(function (resetFieldArray) { return isFunction(resetFieldArray) && resetFieldArray(); });
+        shallowFieldsStateRef.current = shouldUnregister
+            ? {}
+            : cloneObject(values) || {};
         resetRefs(omitResetState);
     };
-    observerRef.current =
-        observerRef.current || !isWeb
-            ? observerRef.current
-            : onDomRemove(fieldsRef, removeFieldEventListenerAndRef);
     React.useEffect(function () {
         isUnMount.current = false;
         resolver && readFormStateRef.current.isValid && validateResolver();
+        observerRef.current =
+            observerRef.current || !isWeb
+                ? observerRef.current
+                : onDomRemove(fieldsRef, removeFieldEventListenerAndRef);
         return function () {
             isUnMount.current = true;
             observerRef.current && observerRef.current.disconnect();
@@ -1670,15 +1706,13 @@ function useForm(_a) {
         register: React.useCallback(register, [defaultValuesRef.current]),
         unregister: React.useCallback(unregister, []),
     };
-    var control = __assign({ renderWatchedInputs: renderWatchedInputs,
+    var control = __assign({ updateWatchedValue: updateWatchedValue,
         shouldUnregister: shouldUnregister,
         removeFieldEventListener: removeFieldEventListener,
         watchInternal: watchInternal, mode: modeRef.current, reValidateMode: {
             isReValidateOnBlur: isReValidateOnBlur,
             isReValidateOnChange: isReValidateOnChange,
         }, fieldsRef: fieldsRef,
-        isWatchAllRef: isWatchAllRef,
-        watchFieldsRef: watchFieldsRef,
         resetFieldArrayFunctionRef: resetFieldArrayFunctionRef,
         useWatchFieldsRef: useWatchFieldsRef,
         useWatchRenderFunctionsRef: useWatchRenderFunctionsRef,
@@ -1736,18 +1770,18 @@ function removeAtIndexes(data, index) {
             delete data[k];
         }
     }
-    return filterOutFalsy(data);
+    return compact(data);
 }
 var removeArrayAt = (function (data, index) {
     return isUndefined(index)
         ? []
-        : isArray(index)
+        : Array.isArray(index)
             ? removeAtIndexes(data, index)
             : removeAt(data, index);
 });
 
 var moveArrayAt = (function (data, from, to) {
-    if (isArray(data)) {
+    if (Array.isArray(data)) {
         if (isUndefined(data[to])) {
             data[to] = undefined;
         }
@@ -1764,15 +1798,15 @@ var swapArrayAt = (function (data, indexA, indexB) {
 });
 
 function prepend(data, value) {
-    return __spread((isArray(value) ? value : [value || undefined]), data);
+    return __spread((Array.isArray(value) ? value : [value || undefined]), data);
 }
 
 function insert(data, index, value) {
-    return __spread(data.slice(0, index), (isArray(value) ? value : [value || undefined]), data.slice(index));
+    return __spread(data.slice(0, index), (Array.isArray(value) ? value : [value || undefined]), data.slice(index));
 }
 
 var fillEmptyArray = (function (value) {
-    return isArray(value) ? Array(value.length).fill(undefined) : undefined;
+    return Array.isArray(value) ? Array(value.length).fill(undefined) : undefined;
 });
 
 function mapValueToBoolean(value) {
@@ -1785,15 +1819,18 @@ function mapValueToBoolean(value) {
     }
     return [true];
 }
-var filterBooleanArray = (function (value) {
-    return (isArray(value) ? value : [value]).map(mapValueToBoolean).flat();
+var fillBooleanArray = (function (value) {
+    return (Array.isArray(value) ? value : [value])
+        .map(mapValueToBoolean)
+        .flat();
 });
 
-var appendId = function (value, keyName) {
-    var _a;
-    return (__assign((_a = {}, _a[keyName] = generateId(), _a), value));
+var mapIds = function (values, keyName) {
+    return values.map(function (value) {
+        var _a;
+        return (__assign((_a = {}, _a[keyName] = generateId(), _a), value));
+    });
 };
-var mapIds = function (data, keyName) { return (isArray(data) ? data : []).map(function (value) { return appendId(value, keyName); }); };
 var useFieldArray = function (_a) {
     var control = _a.control, name = _a.name, _b = _a.keyName, keyName = _b === void 0 ? 'id' : _b;
     var methods = useFormContext();
@@ -1803,27 +1840,23 @@ var useFieldArray = function (_a) {
         }
     }
     var focusIndexRef = React.useRef(-1);
-    var _c = control || methods.control, isWatchAllRef = _c.isWatchAllRef, resetFieldArrayFunctionRef = _c.resetFieldArrayFunctionRef, fieldArrayNamesRef = _c.fieldArrayNamesRef, fieldsRef = _c.fieldsRef, defaultValuesRef = _c.defaultValuesRef, removeFieldEventListener = _c.removeFieldEventListener, formStateRef = _c.formStateRef, _d = _c.formStateRef.current, dirtyFields = _d.dirtyFields, touched = _d.touched, shallowFieldsStateRef = _c.shallowFieldsStateRef, updateFormState = _c.updateFormState, readFormStateRef = _c.readFormStateRef, watchFieldsRef = _c.watchFieldsRef, validFieldsRef = _c.validFieldsRef, fieldsWithValidationRef = _c.fieldsWithValidationRef, fieldArrayDefaultValuesRef = _c.fieldArrayDefaultValuesRef, validateResolver = _c.validateResolver, renderWatchedInputs = _c.renderWatchedInputs, getValues = _c.getValues, shouldUnregister = _c.shouldUnregister;
+    var _c = control || methods.control, updateWatchedValue = _c.updateWatchedValue, resetFieldArrayFunctionRef = _c.resetFieldArrayFunctionRef, fieldArrayNamesRef = _c.fieldArrayNamesRef, fieldsRef = _c.fieldsRef, defaultValuesRef = _c.defaultValuesRef, removeFieldEventListener = _c.removeFieldEventListener, formStateRef = _c.formStateRef, shallowFieldsStateRef = _c.shallowFieldsStateRef, updateFormState = _c.updateFormState, readFormStateRef = _c.readFormStateRef, validFieldsRef = _c.validFieldsRef, fieldsWithValidationRef = _c.fieldsWithValidationRef, fieldArrayDefaultValuesRef = _c.fieldArrayDefaultValuesRef, validateResolver = _c.validateResolver, getValues = _c.getValues, shouldUnregister = _c.shouldUnregister;
     var fieldArrayParentName = getFieldArrayParentName(name);
-    var getDefaultValues = function () { return __spread((get(fieldArrayDefaultValuesRef.current, fieldArrayParentName)
+    var memoizedDefaultValues = React.useRef(__spread((get(fieldArrayDefaultValuesRef.current, fieldArrayParentName)
         ? get(fieldArrayDefaultValuesRef.current, name, [])
         : get(shouldUnregister
             ? defaultValuesRef.current
-            : shallowFieldsStateRef.current, name, []))); };
-    var memoizedDefaultValues = React.useRef(getDefaultValues());
-    var _e = __read(React.useState(mapIds(memoizedDefaultValues.current, keyName)), 2), fields = _e[0], setFields = _e[1];
+            : shallowFieldsStateRef.current, name, []))));
+    var _d = __read(React.useState(mapIds(memoizedDefaultValues.current, keyName)), 2), fields = _d[0], setFields = _d[1];
     var allFields = React.useRef(fields);
     var getCurrentFieldsValues = function () {
-        return get(getValues() || {}, name, allFields.current).map(function (item, index) { return (__assign(__assign({}, allFields.current[index]), item)); });
+        return get(getValues(), name, allFields.current).map(function (item, index) { return (__assign(__assign({}, allFields.current[index]), item)); });
     };
     allFields.current = fields;
     fieldArrayNamesRef.current.add(name);
     if (!get(fieldArrayDefaultValuesRef.current, fieldArrayParentName)) {
         set(fieldArrayDefaultValuesRef.current, fieldArrayParentName, get(defaultValuesRef.current, fieldArrayParentName));
     }
-    var appendValueWithKey = function (values) {
-        return values.map(function (value) { return appendId(value, keyName); });
-    };
     var setFieldAndValidState = function (fieldsValues) {
         setFields(fieldsValues);
         if (readFormStateRef.current.isValid && validateResolver) {
@@ -1844,15 +1877,34 @@ var useFieldArray = function (_a) {
     };
     var resetFields = function () {
         for (var key in fieldsRef.current) {
-            if (isMatchFieldArrayName(key, name) && fieldsRef.current[key]) {
+            isMatchFieldArrayName(key, name) &&
                 removeFieldEventListener(fieldsRef.current[key], true);
-            }
         }
     };
     var cleanup = function (ref) {
-        return !filterOutFalsy(get(ref, name, [])).length && unset(ref, name);
+        return !compact(get(ref, name, [])).length && unset(ref, name);
     };
-    var batchStateUpdate = function (method, args, isDirty, shouldSet, shouldUpdateValid) {
+    var updateDirtyFieldsWithDefaultValues = function (updatedFieldArrayValues) {
+        var defaultFieldArrayValues = get(defaultValuesRef.current, name, []);
+        var updateDirtyFieldsBaseOnDefaultValues = function (base, target) {
+            var _a;
+            for (var key in base) {
+                for (var innerKey in base[key]) {
+                    if (innerKey !== keyName &&
+                        (!target[key] ||
+                            !base[key] ||
+                            base[key][innerKey] !== target[key][innerKey])) {
+                        set(formStateRef.current.dirtyFields, name + "[" + key + "]", __assign(__assign({}, get(formStateRef.current.dirtyFields, name + "[" + key + "]", {})), (_a = {}, _a[innerKey] = true, _a)));
+                    }
+                }
+            }
+        };
+        if (updatedFieldArrayValues) {
+            updateDirtyFieldsBaseOnDefaultValues(defaultFieldArrayValues, updatedFieldArrayValues);
+            updateDirtyFieldsBaseOnDefaultValues(updatedFieldArrayValues, defaultFieldArrayValues);
+        }
+    };
+    var batchStateUpdate = function (method, args, updatedFieldValues, isDirty, shouldSet, shouldUpdateValid) {
         if (isDirty === void 0) { isDirty = true; }
         if (shouldSet === void 0) { shouldSet = true; }
         if (shouldUpdateValid === void 0) { shouldUpdateValid = false; }
@@ -1865,21 +1917,23 @@ var useFieldArray = function (_a) {
             shouldSet && set(fieldArrayDefaultValuesRef.current, name, output);
             cleanup(fieldArrayDefaultValuesRef.current);
         }
-        if (isArray(get(formStateRef.current.errors, name))) {
+        if (Array.isArray(get(formStateRef.current.errors, name))) {
             var output = method(get(formStateRef.current.errors, name), args.argA, args.argB);
             shouldSet && set(formStateRef.current.errors, name, output);
             cleanup(formStateRef.current.errors);
         }
-        if (readFormStateRef.current.touched && get(touched, name)) {
-            var output = method(get(touched, name), args.argA, args.argB);
-            shouldSet && set(touched, name, output);
-            cleanup(touched);
+        if (readFormStateRef.current.touched &&
+            get(formStateRef.current.touched, name)) {
+            var output = method(get(formStateRef.current.touched, name), args.argA, args.argB);
+            shouldSet && set(formStateRef.current.touched, name, output);
+            cleanup(formStateRef.current.touched);
         }
         if (readFormStateRef.current.dirtyFields ||
             readFormStateRef.current.isDirty) {
-            var output = method(get(dirtyFields, name, []), args.argC, args.argD);
-            shouldSet && set(dirtyFields, name, output);
-            cleanup(dirtyFields);
+            var output = method(get(formStateRef.current.dirtyFields, name, []), args.argC, args.argD);
+            shouldSet && set(formStateRef.current.dirtyFields, name, output);
+            updateDirtyFieldsWithDefaultValues(updatedFieldValues);
+            cleanup(formStateRef.current.dirtyFields);
         }
         if (shouldUpdateValid &&
             readFormStateRef.current.isValid &&
@@ -1891,25 +1945,21 @@ var useFieldArray = function (_a) {
         }
         updateFormState({
             errors: formStateRef.current.errors,
-            dirtyFields: dirtyFields,
+            dirtyFields: formStateRef.current.dirtyFields,
             isDirty: isDirty,
-            touched: touched,
+            touched: formStateRef.current.touched,
         });
     };
     var append = function (value, shouldFocus) {
         if (shouldFocus === void 0) { shouldFocus = true; }
-        setFieldAndValidState(__spread(allFields.current, (isArray(value)
-            ? appendValueWithKey(value)
-            : [appendId(value, keyName)])));
+        var updateFormValues = __spread(allFields.current, mapIds(Array.isArray(value) ? value : [value], keyName));
+        setFieldAndValidState(updateFormValues);
         if (readFormStateRef.current.dirtyFields ||
             readFormStateRef.current.isDirty) {
-            var dirtyInputs_1 = get(dirtyFields, name, []);
-            set(dirtyFields, name, __spread((allFields.current.length > dirtyInputs_1.length
-                ? (fillEmptyArray(allFields.current) || []).map(function (_, index) { return dirtyInputs_1[index]; })
-                : dirtyInputs_1), filterBooleanArray(value)));
+            updateDirtyFieldsWithDefaultValues(updateFormValues);
             updateFormState({
                 isDirty: true,
-                dirtyFields: dirtyFields,
+                dirtyFields: formStateRef.current.dirtyFields,
             });
         }
         if (!shouldUnregister) {
@@ -1922,35 +1972,38 @@ var useFieldArray = function (_a) {
     var prepend$1 = function (value, shouldFocus) {
         if (shouldFocus === void 0) { shouldFocus = true; }
         var emptyArray = fillEmptyArray(value);
-        setFieldAndValidState(prepend(getCurrentFieldsValues(), isArray(value) ? appendValueWithKey(value) : [appendId(value, keyName)]));
+        var updatedFieldArrayValues = prepend(getCurrentFieldsValues(), mapIds(Array.isArray(value) ? value : [value], keyName));
+        setFieldAndValidState(updatedFieldArrayValues);
         resetFields();
         batchStateUpdate(prepend, {
             argA: emptyArray,
-            argC: filterBooleanArray(value),
-        });
+            argC: fillBooleanArray(value),
+        }, updatedFieldArrayValues);
         focusIndexRef.current = shouldFocus ? 0 : -1;
     };
     var remove = function (index) {
         var fieldValues = getCurrentFieldsValues();
-        setFieldAndValidState(removeArrayAt(fieldValues, index));
+        var updatedFieldValues = removeArrayAt(fieldValues, index);
+        setFieldAndValidState(updatedFieldValues);
         resetFields();
         batchStateUpdate(removeArrayAt, {
             argA: index,
             argC: index,
-        }, getIsDirtyState(removeArrayAt(fieldValues, index)), true, true);
+        }, updatedFieldValues, getIsDirtyState(removeArrayAt(fieldValues, index)), true, true);
     };
     var insert$1 = function (index, value, shouldFocus) {
         if (shouldFocus === void 0) { shouldFocus = true; }
         var emptyArray = fillEmptyArray(value);
         var fieldValues = getCurrentFieldsValues();
-        setFieldAndValidState(insert(fieldValues, index, isArray(value) ? appendValueWithKey(value) : [appendId(value, keyName)]));
+        var updatedFieldArrayValues = insert(fieldValues, index, mapIds(Array.isArray(value) ? value : [value], keyName));
+        setFieldAndValidState(updatedFieldArrayValues);
         resetFields();
         batchStateUpdate(insert, {
             argA: index,
             argB: emptyArray,
             argC: index,
-            argD: filterBooleanArray(value),
-        }, getIsDirtyState(insert(fieldValues, index)));
+            argD: fillBooleanArray(value),
+        }, updatedFieldArrayValues, getIsDirtyState(insert(fieldValues, index)));
         focusIndexRef.current = shouldFocus ? index : -1;
     };
     var swap = function (indexA, indexB) {
@@ -1963,7 +2016,7 @@ var useFieldArray = function (_a) {
             argB: indexB,
             argC: indexA,
             argD: indexB,
-        }, getIsDirtyState(fieldValues), false);
+        }, undefined, getIsDirtyState(fieldValues), false);
     };
     var move = function (from, to) {
         var fieldValues = getCurrentFieldsValues();
@@ -1975,7 +2028,7 @@ var useFieldArray = function (_a) {
             argB: to,
             argC: from,
             argD: to,
-        }, getIsDirtyState(fieldValues), false);
+        }, undefined, getIsDirtyState(fieldValues), false);
     };
     var reset = function (data) {
         resetFields();
@@ -1985,7 +2038,6 @@ var useFieldArray = function (_a) {
         setFields(mapIds(memoizedDefaultValues.current, keyName));
     };
     React.useEffect(function () {
-        var e_1, _a;
         {
             if (!name) {
                 console.warn('📋 useFieldArray is missing `name` attribute. https://react-hook-form.com/api#useFieldArray');
@@ -1996,30 +2048,7 @@ var useFieldArray = function (_a) {
             defaultValues.pop();
             set(fieldArrayDefaultValuesRef.current, name, defaultValues);
         }
-        if (isWatchAllRef.current) {
-            updateFormState();
-        }
-        else if (watchFieldsRef) {
-            var shouldRenderUseWatch = true;
-            try {
-                for (var _b = __values(watchFieldsRef.current), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var watchField = _c.value;
-                    if (watchField.startsWith(name)) {
-                        updateFormState();
-                        shouldRenderUseWatch = false;
-                        break;
-                    }
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-            shouldRenderUseWatch && renderWatchedInputs(name);
-        }
+        updateWatchedValue(name);
         if (focusIndexRef.current > -1) {
             for (var key in fieldsRef.current) {
                 var field = fieldsRef.current[key];
@@ -2067,7 +2096,7 @@ function useWatch(_a) {
     var _c = __read(React.useState(isUndefined(defaultValue)
         ? isString(name)
             ? get(defaultValuesRef.current, name)
-            : isArray(name)
+            : Array.isArray(name)
                 ? name.reduce(function (previous, inputName) {
                     var _a;
                     return (__assign(__assign({}, previous), (_a = {}, _a[inputName] = get(defaultValuesRef.current, inputName), _a)));
@@ -2078,7 +2107,9 @@ function useWatch(_a) {
     var defaultValueRef = React.useRef(defaultValue);
     var updateWatchValue = React.useCallback(function () {
         var value = watchInternal(name, defaultValueRef.current, idRef.current);
-        setValue(isObject(value) ? __assign({}, value) : isArray(value) ? __spread(value) : value);
+        setValue(isObject(value)
+            ? __assign({}, value) : Array.isArray(value)
+            ? __spread(value) : value);
     }, [setValue, watchInternal, defaultValueRef, name, idRef]);
     React.useEffect(function () {
         {
@@ -2172,9 +2203,7 @@ var Controller = function (_a) {
             }
         }
     }, [rules, name, register]);
-    React.useEffect(function () { return function () {
-        !isNameInFieldArray(fieldArrayNamesRef.current, name) && unregister(name);
-    }; }, [unregister, name, fieldArrayNamesRef]);
+    React.useEffect(function () { return function () { return unregister(name); }; }, [unregister, name]);
     React.useEffect(function () {
         {
             if (isUndefined(value)) {