react-hook-form 7.20.0 → 7.20.4

package/dist/index.esm.js

@@ -12,7 +12,7 @@ var isObject = (value) => !isNullOrUndefined(value) &&
     isObjectType(value) &&
     !isDateObject(value);
 
-var getControllerValue = (event) => isObject(event) && event.target
+var getEventValue = (event) => isObject(event) && event.target
     ? isCheckBoxInput(event.target)
         ? event.target.checked
         : event.target.value
@@ -155,7 +155,7 @@ function useFormState(props) {
 
 var isString = (value) => typeof value === 'string';
 
-function generateWatchOutput(names, _names, formValues, isGlobal) {
+var generateWatchOutput = (names, _names, formValues, isGlobal) => {
     const isArray = Array.isArray(names);
     if (isString(names)) {
         isGlobal && _names.watch.add(names);
@@ -167,7 +167,18 @@ function generateWatchOutput(names, _names, formValues, isGlobal) {
     }
     isGlobal && (_names.watchAll = true);
     return formValues;
-}
+};
+
+var isFunction = (value) => typeof value === 'function';
+
+var objectHasFunction = (data) => {
+    for (const key in data) {
+        if (isFunction(data[key])) {
+            return true;
+        }
+    }
+    return false;
+};
 
 function useWatch(props) {
     const methods = useFormContext();
@@ -180,7 +191,8 @@ function useWatch(props) {
         callback: (formState) => {
             if (shouldSubscribeByName(_name.current, formState.name, exact)) {
                 const fieldValues = generateWatchOutput(_name.current, control._names, formState.values || control._formValues);
-                updateValue(isUndefined(_name.current)
+                updateValue(isUndefined(_name.current) ||
+                    (isObject(fieldValues) && !objectHasFunction(fieldValues))
                     ? Object.assign({}, fieldValues) : Array.isArray(fieldValues)
                     ? [...fieldValues]
                     : fieldValues);
@@ -238,7 +250,7 @@ function useController(props) {
             onChange: (event) => {
                 registerProps.onChange({
                     target: {
-                        value: getControllerValue(event),
+                        value: getEventValue(event),
                         name: name,
                     },
                     type: EVENTS.CHANGE,
@@ -436,44 +448,44 @@ const useFieldArray = (props) => {
     const append$1 = (value, options) => {
         const appendValue = convertToArrayPayload(value);
         const updatedFieldArrayValuesWithKey = append(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), mapIds(appendValue, keyName));
+        setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, append, {
             argA: fillEmptyArray(value),
         }, updateValues(updatedFieldArrayValuesWithKey));
-        setFields(updatedFieldArrayValuesWithKey);
         control._names.focus = getFocusFieldName(name, updatedFieldArrayValuesWithKey.length - appendValue.length, options);
     };
     const prepend$1 = (value, options) => {
         const updatedFieldArrayValuesWithKey = prepend(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), mapIds(convertToArrayPayload(value), keyName));
+        setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, prepend, {
             argA: fillEmptyArray(value),
         }, updateValues(updatedFieldArrayValuesWithKey));
-        setFields(updatedFieldArrayValuesWithKey);
         control._names.focus = getFocusFieldName(name, 0, options);
     };
     const remove = (index) => {
         const updatedFieldArrayValuesWithKey = removeArrayAt(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), index);
+        setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, removeArrayAt, {
             argA: index,
         }, updateValues(updatedFieldArrayValuesWithKey));
-        setFields(updatedFieldArrayValuesWithKey);
     };
     const insert$1 = (index, value, options) => {
         const updatedFieldArrayValuesWithKey = insert(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), index, mapIds(convertToArrayPayload(value), keyName));
+        setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, insert, {
             argA: index,
             argB: fillEmptyArray(value),
         }, updateValues(updatedFieldArrayValuesWithKey));
-        setFields(updatedFieldArrayValuesWithKey);
         control._names.focus = getFocusFieldName(name, index, options);
     };
     const swap = (indexA, indexB) => {
         const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
         swapArrayAt(updatedFieldArrayValuesWithKey, indexA, indexB);
+        setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, swapArrayAt, {
             argA: indexA,
             argB: indexB,
         }, updateValues(updatedFieldArrayValuesWithKey), false);
-        setFields(updatedFieldArrayValuesWithKey);
     };
     const move = (from, to) => {
         const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
@@ -488,16 +500,16 @@ const useFieldArray = (props) => {
         const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
         const updatedFieldArrayValues = updateAt(updatedFieldArrayValuesWithKey, index, value);
         _fieldIds.current = mapIds(updatedFieldArrayValues, keyName);
+        setFields(_fieldIds.current);
         control._updateFieldArray(name, updateAt, {
             argA: index,
             argB: value,
         }, updateValues(_fieldIds.current), true, false);
-        setFields(_fieldIds.current);
     };
     const replace = (value) => {
         const updatedFieldArrayValuesWithKey = mapIds(convertToArrayPayload(value), keyName);
-        control._updateFieldArray(name, () => updatedFieldArrayValuesWithKey, {}, updateValues(updatedFieldArrayValuesWithKey), true, false);
         setFields(updatedFieldArrayValuesWithKey);
+        control._updateFieldArray(name, () => updatedFieldArrayValuesWithKey, {}, updateValues(updatedFieldArrayValuesWithKey), true, false);
     };
     React.useEffect(() => {
         control._stateFlags.action = false;
@@ -543,8 +555,6 @@ const useFieldArray = (props) => {
     };
 };
 
-var isFunction = (value) => typeof value === 'function';
-
 function cloneObject(data) {
     let copy;
     const isArray = Array.isArray(data);
@@ -696,6 +706,47 @@ function unset(object, path) {
     return object;
 }
 
+function markFieldsDirty(data, fields = {}) {
+    const isParentNodeArray = Array.isArray(data);
+    if (isObject(data) || isParentNodeArray) {
+        for (const key in data) {
+            if (Array.isArray(data[key]) ||
+                (isObject(data[key]) && !objectHasFunction(data[key]))) {
+                fields[key] = Array.isArray(data[key]) ? [] : {};
+                markFieldsDirty(data[key], fields[key]);
+            }
+            else if (!isNullOrUndefined(data[key])) {
+                fields[key] = true;
+            }
+        }
+    }
+    return fields;
+}
+function getDirtyFieldsFromDefaultValues(data, formValues, dirtyFieldsFromValues) {
+    const isParentNodeArray = Array.isArray(data);
+    if (isObject(data) || isParentNodeArray) {
+        for (const key in data) {
+            if (Array.isArray(data[key]) ||
+                (isObject(data[key]) && !objectHasFunction(data[key]))) {
+                if (isUndefined(formValues) ||
+                    isPrimitive(dirtyFieldsFromValues[key])) {
+                    dirtyFieldsFromValues[key] = Array.isArray(data[key])
+                        ? markFieldsDirty(data[key], [])
+                        : Object.assign({}, markFieldsDirty(data[key]));
+                }
+                else {
+                    getDirtyFieldsFromDefaultValues(data[key], isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
+                }
+            }
+            else {
+                dirtyFieldsFromValues[key] = !deepEqual(data[key], formValues[key]);
+            }
+        }
+    }
+    return dirtyFieldsFromValues;
+}
+var getDirtyFields = (defaultValues, formValues) => getDirtyFieldsFromDefaultValues(defaultValues, formValues, markFieldsDirty(formValues));
+
 const defaultResult = {
     value: false,
     isValid: false,
@@ -818,49 +869,6 @@ function schemaErrorLookup(errors, _fields, name) {
     };
 }
 
-function deepMerge(target, source) {
-    if (isPrimitive(target) || isPrimitive(source)) {
-        return source;
-    }
-    for (const key in source) {
-        const targetValue = target[key];
-        const sourceValue = source[key];
-        try {
-            target[key] =
-                (isObject(targetValue) && isObject(sourceValue)) ||
-                    (Array.isArray(targetValue) && Array.isArray(sourceValue))
-                    ? deepMerge(targetValue, sourceValue)
-                    : sourceValue;
-        }
-        catch (_a) { }
-    }
-    return target;
-}
-
-function setDirtyFields(values, defaultValues, dirtyFields, parentNode, parentName) {
-    let index = -1;
-    while (++index < values.length) {
-        for (const key in values[index]) {
-            if (Array.isArray(values[index][key])) {
-                !dirtyFields[index] && (dirtyFields[index] = {});
-                dirtyFields[index][key] = [];
-                setDirtyFields(values[index][key], get(defaultValues[index] || {}, key, []), dirtyFields[index][key], dirtyFields[index], key);
-            }
-            else {
-                !isNullOrUndefined(defaultValues) &&
-                    deepEqual(get(defaultValues[index] || {}, key), values[index][key])
-                    ? set(dirtyFields[index] || {}, key)
-                    : (dirtyFields[index] = Object.assign(Object.assign({}, dirtyFields[index]), { [key]: true }));
-            }
-        }
-        parentNode &&
-            !dirtyFields.length &&
-            delete parentNode[parentName];
-    }
-    return dirtyFields;
-}
-var setFieldArrayDirtyFields = (values, defaultValues, dirtyFields) => deepMerge(setDirtyFields(values, defaultValues, dirtyFields.slice(0, values.length)), setDirtyFields(defaultValues, values, dirtyFields.slice(0, values.length)));
-
 var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode) => {
     if (mode.isOnAll) {
         return false;
@@ -877,8 +885,6 @@ var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode)
     return true;
 };
 
-var unsetEmptyArray = (ref, name) => !compact(get(ref, name, [])).length && unset(ref, name);
-
 var isMessage = (value) => isString(value) || React.isValidElement(value);
 
 var isRegex = (value) => value instanceof RegExp;
@@ -908,7 +914,7 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
         return {};
     }
     const inputRef = refs ? refs[0] : ref;
-    const setCustomValidty = (message) => {
+    const setCustomValidity = (message) => {
         if (shouldUseNativeValidation && inputRef.reportValidity) {
             inputRef.setCustomValidity(isBoolean(message) ? '' : message || ' ');
             inputRef.reportValidity();
@@ -938,7 +944,7 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
         if (value) {
             error[name] = Object.assign({ type: INPUT_VALIDATION_RULES.required, message, ref: inputRef }, appendErrorsCurry(INPUT_VALIDATION_RULES.required, message));
             if (!validateAllFieldCriteria) {
-                setCustomValidty(message);
+                setCustomValidity(message);
                 return error;
             }
         }
@@ -969,7 +975,7 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
         if (exceedMax || exceedMin) {
             getMinMaxMessage(!!exceedMax, maxOutput.message, minOutput.message, INPUT_VALIDATION_RULES.max, INPUT_VALIDATION_RULES.min);
             if (!validateAllFieldCriteria) {
-                setCustomValidty(error[name].message);
+                setCustomValidity(error[name].message);
                 return error;
             }
         }
@@ -984,7 +990,7 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
         if (exceedMax || exceedMin) {
             getMinMaxMessage(exceedMax, maxLengthOutput.message, minLengthOutput.message);
             if (!validateAllFieldCriteria) {
-                setCustomValidty(error[name].message);
+                setCustomValidity(error[name].message);
                 return error;
             }
         }
@@ -995,7 +1001,7 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
             error[name] = Object.assign({ type: INPUT_VALIDATION_RULES.pattern, message,
                 ref }, appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message));
             if (!validateAllFieldCriteria) {
-                setCustomValidty(message);
+                setCustomValidity(message);
                 return error;
             }
         }
@@ -1007,7 +1013,7 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
             if (validateError) {
                 error[name] = Object.assign(Object.assign({}, validateError), appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message));
                 if (!validateAllFieldCriteria) {
-                    setCustomValidty(validateError.message);
+                    setCustomValidity(validateError.message);
                     return error;
                 }
             }
@@ -1021,7 +1027,7 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
                 const validateError = getValidateError(await validate[key](inputValue), inputRef, key);
                 if (validateError) {
                     validationResult = Object.assign(Object.assign({}, validateError), appendErrorsCurry(key, validateError.message));
-                    setCustomValidty(validateError.message);
+                    setCustomValidity(validateError.message);
                     if (validateAllFieldCriteria) {
                         error[name] = validationResult;
                     }
@@ -1035,7 +1041,7 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
             }
         }
     }
-    setCustomValidty(true);
+    setCustomValidity(true);
     return error;
 };
 
@@ -1122,16 +1128,14 @@ function createFormControl(props = {}) {
         if (Array.isArray(get(_formState.errors, name))) {
             const errors = method(get(_formState.errors, name), args.argA, args.argB);
             shouldSetValues && set(_formState.errors, name, errors);
-            unsetEmptyArray(_formState.errors, name);
         }
         if (_proxyFormState.touchedFields && get(_formState.touchedFields, name)) {
             const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
             shouldSetValues &&
                 set(_formState.touchedFields, name, touchedFields);
-            unsetEmptyArray(_formState.touchedFields, name);
         }
         if (_proxyFormState.dirtyFields || _proxyFormState.isDirty) {
-            updateFieldArrayDirty(name, values);
+            _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
         }
         _subjects.state.next({
             isDirty: _getDirty(name, values),
@@ -1189,8 +1193,6 @@ function createFormControl(props = {}) {
         isFieldDirty && shouldRender && _subjects.state.next(output);
         return isFieldDirty ? output : {};
     };
-    const updateFieldArrayDirty = (name, value) => (set(_formState.dirtyFields, name, setFieldArrayDirtyFields(value, get(_defaultValues, name, []), get(_formState.dirtyFields, name, []))),
-        unsetEmptyArray(_formState.dirtyFields, name));
     const shouldRenderByError = async (shouldSkipRender, name, isValid, error, fieldState) => {
         const previousFieldError = get(_formState.errors, name);
         const shouldUpdateValid = _proxyFormState.isValid && _formState.isValid !== isValid;
@@ -1302,10 +1304,7 @@ function createFormControl(props = {}) {
                     isWeb && isHTMLElement(fieldReference.ref) && isNullOrUndefined(value)
                         ? ''
                         : value;
-                if (isFileInput(fieldReference.ref) && !isString(fieldValue)) {
-                    fieldReference.ref.files = fieldValue;
-                }
-                else if (isMultipleSelect(fieldReference.ref)) {
+                if (isMultipleSelect(fieldReference.ref)) {
                     [...fieldReference.ref.options].forEach((selectRef) => (selectRef.selected = fieldValue.includes(selectRef.value)));
                 }
                 else if (fieldReference.refs) {
@@ -1320,7 +1319,7 @@ function createFormControl(props = {}) {
                         fieldReference.refs.forEach((radioRef) => (radioRef.checked = radioRef.value === fieldValue));
                     }
                 }
-                else {
+                else if (!isFileInput(fieldReference.ref)) {
                     fieldReference.ref.value = fieldValue;
                 }
             }
@@ -1353,7 +1352,7 @@ function createFormControl(props = {}) {
             });
             if ((_proxyFormState.isDirty || _proxyFormState.dirtyFields) &&
                 options.shouldDirty) {
-                updateFieldArrayDirty(name, value);
+                _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
                 _subjects.state.next({
                     name,
                     dirtyFields: _formState.dirtyFields,
@@ -1378,7 +1377,9 @@ function createFormControl(props = {}) {
         if (field) {
             let error;
             let isValid;
-            const fieldValue = target.type ? getFieldValue(field._f) : target.value;
+            const fieldValue = target.type
+                ? getFieldValue(field._f)
+                : getEventValue(event);
             const isBlurEvent = event.type === EVENTS.BLUR;
             const shouldSkipValidation = (!hasValidation(field._f) &&
                 !_options.resolver &&