react-hook-form 7.20.2 → 7.21.0

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
@@ -22,7 +22,7 @@ var getNodeParentName = (name) => name.substring(0, name.search(/.\d/)) || name;
 
 var isNameInFieldArray = (names, name) => [...names].some((current) => getNodeParentName(name) === current);
 
-var compact = (value) => value.filter(Boolean);
+var compact = (value) => (value || []).filter(Boolean);
 
 var isUndefined = (val) => val === undefined;
 
@@ -250,7 +250,7 @@ function useController(props) {
             onChange: (event) => {
                 registerProps.onChange({
                     target: {
-                        value: getControllerValue(event),
+                        value: getEventValue(event),
                         name: name,
                     },
                     type: EVENTS.CHANGE,
@@ -448,68 +448,76 @@ const useFieldArray = (props) => {
     const append$1 = (value, options) => {
         const appendValue = convertToArrayPayload(value);
         const updatedFieldArrayValuesWithKey = append(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), mapIds(appendValue, keyName));
+        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
+        control._names.focus = getFocusFieldName(name, fieldArrayValues.length - 1, options);
         setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, append, {
             argA: fillEmptyArray(value),
-        }, updateValues(updatedFieldArrayValuesWithKey));
-        control._names.focus = getFocusFieldName(name, updatedFieldArrayValuesWithKey.length - appendValue.length, options);
+        }, fieldArrayValues);
     };
     const prepend$1 = (value, options) => {
         const updatedFieldArrayValuesWithKey = prepend(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), mapIds(convertToArrayPayload(value), keyName));
+        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
+        control._names.focus = getFocusFieldName(name, 0, options);
         setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, prepend, {
             argA: fillEmptyArray(value),
-        }, updateValues(updatedFieldArrayValuesWithKey));
-        control._names.focus = getFocusFieldName(name, 0, options);
+        }, fieldArrayValues);
     };
     const remove = (index) => {
         const updatedFieldArrayValuesWithKey = removeArrayAt(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), index);
+        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
         setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, removeArrayAt, {
             argA: index,
-        }, updateValues(updatedFieldArrayValuesWithKey));
+        }, fieldArrayValues);
     };
     const insert$1 = (index, value, options) => {
         const updatedFieldArrayValuesWithKey = insert(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), index, mapIds(convertToArrayPayload(value), keyName));
+        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
+        control._names.focus = getFocusFieldName(name, index, options);
         setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, insert, {
             argA: index,
             argB: fillEmptyArray(value),
-        }, updateValues(updatedFieldArrayValuesWithKey));
-        control._names.focus = getFocusFieldName(name, index, options);
+        }, fieldArrayValues);
     };
     const swap = (indexA, indexB) => {
         const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
         swapArrayAt(updatedFieldArrayValuesWithKey, indexA, indexB);
+        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
         setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, swapArrayAt, {
             argA: indexA,
             argB: indexB,
-        }, updateValues(updatedFieldArrayValuesWithKey), false);
+        }, fieldArrayValues, false);
     };
     const move = (from, to) => {
         const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
         moveArrayAt(updatedFieldArrayValuesWithKey, from, to);
+        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
+        setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, moveArrayAt, {
             argA: from,
             argB: to,
-        }, updateValues(updatedFieldArrayValuesWithKey), false);
-        setFields(updatedFieldArrayValuesWithKey);
+        }, fieldArrayValues, false);
     };
     const update = (index, value) => {
         const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
         const updatedFieldArrayValues = updateAt(updatedFieldArrayValuesWithKey, index, value);
         _fieldIds.current = mapIds(updatedFieldArrayValues, keyName);
+        const fieldArrayValues = updateValues(_fieldIds.current);
         setFields(_fieldIds.current);
         control._updateFieldArray(name, updateAt, {
             argA: index,
             argB: value,
-        }, updateValues(_fieldIds.current), true, false);
+        }, fieldArrayValues, true, false);
     };
     const replace = (value) => {
         const updatedFieldArrayValuesWithKey = mapIds(convertToArrayPayload(value), keyName);
+        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
         setFields(updatedFieldArrayValuesWithKey);
-        control._updateFieldArray(name, () => updatedFieldArrayValuesWithKey, {}, updateValues(updatedFieldArrayValuesWithKey), true, false);
+        control._updateFieldArray(name, () => updatedFieldArrayValuesWithKey, {}, fieldArrayValues, true, false);
     };
     React.useEffect(() => {
         control._stateFlags.action = false;
@@ -659,7 +667,7 @@ var isMultipleSelect = (element) => element.type === `select-multiple`;
 
 var isRadioInput = (element) => element.type === 'radio';
 
-var isRadioOrCheckboxFunction = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
+var isRadioOrCheckbox = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
 
 var isWeb = typeof window !== 'undefined' &&
     typeof window.HTMLElement !== 'undefined' &&
@@ -706,6 +714,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,
@@ -737,7 +786,7 @@ var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isU
         ? value === ''
             ? NaN
             : +value
-        : valueAsDate
+        : valueAsDate && isString(value)
             ? new Date(value)
             : setValueAs
                 ? setValueAs(value)
@@ -790,6 +839,18 @@ var getResolverOptions = (fieldsNames, _fields, criteriaMode, shouldUseNativeVal
     };
 };
 
+var isRegex = (value) => value instanceof RegExp;
+
+var getRuleValue = (rule) => isUndefined(rule)
+    ? undefined
+    : isRegex(rule)
+        ? rule.source
+        : isObject(rule)
+            ? isRegex(rule.value)
+                ? rule.value.source
+                : rule.value
+            : rule;
+
 var hasValidation = (options) => options.mount &&
     (options.required ||
         options.min ||
@@ -828,49 +889,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;
@@ -887,12 +905,10 @@ var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode)
     return true;
 };
 
-var unsetEmptyArray = (ref, name) => !compact(get(ref, name, [])).length && unset(ref, name);
+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;
-
 function getValidateError(result, ref, type = 'validate') {
     if (isMessage(result) ||
         (Array.isArray(result) && result.every(isMessage)) ||
@@ -918,7 +934,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();
@@ -948,7 +964,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;
             }
         }
@@ -959,7 +975,8 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
         const maxOutput = getValueAndMessage(max);
         const minOutput = getValueAndMessage(min);
         if (!isNaN(inputValue)) {
-            const valueNumber = ref.valueAsNumber || parseFloat(inputValue);
+            const valueNumber = ref.valueAsNumber ||
+                parseFloat(inputValue);
             if (!isNullOrUndefined(maxOutput.value)) {
                 exceedMax = valueNumber > maxOutput.value;
             }
@@ -979,7 +996,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;
             }
         }
@@ -994,7 +1011,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;
             }
         }
@@ -1005,7 +1022,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;
             }
         }
@@ -1017,7 +1034,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;
                 }
             }
@@ -1031,7 +1048,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;
                     }
@@ -1045,7 +1062,7 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
             }
         }
     }
-    setCustomValidty(true);
+    setCustomValidity(true);
     return error;
 };
 
@@ -1054,7 +1071,6 @@ const defaultOptions = {
     reValidateMode: VALIDATION_MODE.onChange,
     shouldFocusError: true,
 };
-const isWindowUndefined = typeof window === 'undefined';
 function createFormControl(props = {}) {
     let _options = Object.assign(Object.assign({}, defaultOptions), props);
     let _formState = {
@@ -1141,7 +1157,7 @@ function createFormControl(props = {}) {
             unsetEmptyArray(_formState.touchedFields, name);
         }
         if (_proxyFormState.dirtyFields || _proxyFormState.isDirty) {
-            updateFieldArrayDirty(name, values);
+            _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
         }
         _subjects.state.next({
             isDirty: _getDirty(name, values),
@@ -1199,8 +1215,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;
@@ -1312,10 +1326,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) {
@@ -1330,7 +1341,7 @@ function createFormControl(props = {}) {
                         fieldReference.refs.forEach((radioRef) => (radioRef.checked = radioRef.value === fieldValue));
                     }
                 }
-                else {
+                else if (!isFileInput(fieldReference.ref)) {
                     fieldReference.ref.value = fieldValue;
                 }
             }
@@ -1363,7 +1374,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,
@@ -1381,14 +1392,16 @@ function createFormControl(props = {}) {
             name,
         });
     };
-    const handleChange = async (event) => {
+    const onChange = async (event) => {
         const target = event.target;
         let name = target.name;
         const field = get(_fields, name);
         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 &&
@@ -1523,7 +1536,7 @@ function createFormControl(props = {}) {
         !options.keepIsValid && _updateValid();
     };
     const register = (name, options = {}) => {
-        const field = get(_fields, name);
+        let field = get(_fields, name);
         set(_fields, name, {
             _f: Object.assign(Object.assign(Object.assign({}, (field && field._f ? field._f : { ref: { name } })), { name, mount: true }), options),
         });
@@ -1537,48 +1550,47 @@ function createFormControl(props = {}) {
                     ? undefined
                     : get(_formValues, name, getFieldValue(field._f)))
             : updateValidAndValue(name, true);
-        return isWindowUndefined
-            ? { name: name }
-            : Object.assign(Object.assign({ name }, (isBoolean(options.disabled)
-                ? { disabled: options.disabled }
-                : {})), { onChange: handleChange, onBlur: handleChange, ref: (ref) => {
-                    if (ref) {
-                        register(name, options);
-                        let field = get(_fields, name);
-                        const fieldRef = isUndefined(ref.value)
-                            ? ref.querySelectorAll
-                                ? ref.querySelectorAll('input,select,textarea')[0] ||
-                                    ref
-                                : ref
-                            : ref;
-                        const isRadioOrCheckbox = isRadioOrCheckboxFunction(fieldRef);
-                        if (fieldRef === field._f.ref ||
-                            (isRadioOrCheckbox &&
-                                compact(field._f.refs || []).find((option) => option === fieldRef))) {
-                            return;
-                        }
-                        field = {
-                            _f: isRadioOrCheckbox
-                                ? Object.assign(Object.assign({}, field._f), { refs: [
-                                        ...compact(field._f.refs || []).filter(live),
-                                        fieldRef,
-                                    ], ref: { type: fieldRef.type, name } }) : Object.assign(Object.assign({}, field._f), { ref: fieldRef }),
-                        };
-                        set(_fields, name, field);
-                        (!options || !options.disabled) &&
-                            updateValidAndValue(name, false, fieldRef);
+        return Object.assign(Object.assign(Object.assign({}, (isBoolean(options.disabled) ? { disabled: options.disabled } : {})), (_options.shouldUseNativeValidation
+            ? {
+                required: !!options.required,
+                min: getRuleValue(options.min),
+                max: getRuleValue(options.max),
+                minLength: getRuleValue(options.minLength),
+                maxLength: getRuleValue(options.maxLength),
+                pattern: getRuleValue(options.pattern),
+            }
+            : {})), { name,
+            onChange, onBlur: onChange, ref: (ref) => {
+                if (ref) {
+                    register(name, options);
+                    field = get(_fields, name);
+                    const fieldRef = isUndefined(ref.value)
+                        ? ref.querySelectorAll
+                            ? ref.querySelectorAll('input,select,textarea')[0] || ref
+                            : ref
+                        : ref;
+                    const radioOrCheckbox = isRadioOrCheckbox(fieldRef);
+                    if (fieldRef === field._f.ref ||
+                        (radioOrCheckbox &&
+                            compact(field._f.refs).find((option) => option === fieldRef))) {
+                        return;
                     }
-                    else {
-                        const field = get(_fields, name, {});
-                        const shouldUnregister = _options.shouldUnregister || options.shouldUnregister;
-                        if (field._f) {
-                            field._f.mount = false;
-                        }
-                        shouldUnregister &&
-                            !(isNameInFieldArray(_names.array, name) && _stateFlags.action) &&
-                            _names.unMount.add(name);
+                    set(_fields, name, {
+                        _f: radioOrCheckbox
+                            ? Object.assign(Object.assign({}, field._f), { refs: [...compact(field._f.refs).filter(live), fieldRef], ref: { type: fieldRef.type, name } }) : Object.assign(Object.assign({}, field._f), { ref: fieldRef }),
+                    });
+                    !options.disabled && updateValidAndValue(name, false, fieldRef);
+                }
+                else {
+                    field = get(_fields, name, {});
+                    if (field._f) {
+                        field._f.mount = false;
                     }
-                } });
+                    (_options.shouldUnregister || options.shouldUnregister) &&
+                        !(isNameInFieldArray(_names.array, name) && _stateFlags.action) &&
+                        _names.unMount.add(name);
+                }
+            } });
     };
     const handleSubmit = (onValid, onInvalid) => async (e) => {
         if (e) {