react-hook-form 7.20.5 → 7.21.2

package/dist/index.esm.js

@@ -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;
 
@@ -372,6 +372,31 @@ function append(data, value) {
     return [...convertToArrayPayload(data), ...convertToArrayPayload(value)];
 }
 
+function cloneObject(data) {
+    let copy;
+    const isArray = Array.isArray(data);
+    if (data instanceof Date) {
+        copy = new Date(data);
+    }
+    else if (data instanceof Set) {
+        copy = new Set(data);
+    }
+    else if (isArray || isObject(data)) {
+        copy = isArray ? [] : {};
+        for (const key in data) {
+            if (isFunction(data[key])) {
+                copy = data;
+                break;
+            }
+            copy[key] = cloneObject(data[key]);
+        }
+    }
+    else {
+        return data;
+    }
+    return copy;
+}
+
 var fillEmptyArray = (value) => Array.isArray(value) ? value.map(() => undefined) : undefined;
 
 function insert(data, index, value) {
@@ -446,70 +471,78 @@ const useFieldArray = (props) => {
         return updatedFieldArrayValues;
     }, [control, name, keyName]);
     const append$1 = (value, options) => {
-        const appendValue = convertToArrayPayload(value);
+        const appendValue = convertToArrayPayload(cloneObject(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 updatedFieldArrayValuesWithKey = prepend(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), mapIds(convertToArrayPayload(cloneObject(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 updatedFieldArrayValuesWithKey = insert(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), index, mapIds(convertToArrayPayload(cloneObject(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;
@@ -555,31 +588,6 @@ const useFieldArray = (props) => {
     };
 };
 
-function cloneObject(data) {
-    let copy;
-    const isArray = Array.isArray(data);
-    if (data instanceof Date) {
-        copy = new Date(data);
-    }
-    else if (data instanceof Set) {
-        copy = new Set(data);
-    }
-    else if (isArray || isObject(data)) {
-        copy = isArray ? [] : {};
-        for (const key in data) {
-            if (isFunction(data[key])) {
-                copy = data;
-                break;
-            }
-            copy[key] = cloneObject(data[key]);
-        }
-    }
-    else {
-        return data;
-    }
-    return copy;
-}
-
 function createSubject() {
     let _observers = [];
     const next = (value) => {
@@ -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' &&
@@ -778,7 +786,7 @@ var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isU
         ? value === ''
             ? NaN
             : +value
-        : valueAsDate
+        : valueAsDate && isString(value)
             ? new Date(value)
             : setValueAs
                 ? setValueAs(value)
@@ -831,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 ||
@@ -885,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)) ||
@@ -957,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;
             }
@@ -1052,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 = {
@@ -1325,6 +1343,11 @@ function createFormControl(props = {}) {
                 }
                 else if (!isFileInput(fieldReference.ref)) {
                     fieldReference.ref.value = fieldValue;
+                    if (!fieldReference.ref.type) {
+                        _subjects.watch.next({
+                            name,
+                        });
+                    }
                 }
             }
         }
@@ -1374,7 +1397,7 @@ 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);
@@ -1518,7 +1541,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),
         });
@@ -1532,48 +1555,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) {