react-hook-form 7.28.0 → 7.30.0

package/dist/index.esm.mjs

@@ -18,11 +18,11 @@ var getEventValue = (event) => isObject(event) && event.target
         : event.target.value
     : event;
 
-var getNodeParentName = (name) => name.substring(0, name.search(/.\d/)) || name;
+var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/)) || name;
 
-var isNameInFieldArray = (names, name) => [...names].some((current) => getNodeParentName(name) === current);
+var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
 
-var compact = (value) => value.filter(Boolean);
+var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
 
 var isUndefined = (val) => val === undefined;
 
@@ -60,12 +60,6 @@ const INPUT_VALIDATION_RULES = {
     validate: 'validate',
 };
 
-var omit = (source, key) => {
-    const copy = Object.assign({}, source);
-    delete copy[key];
-    return copy;
-};
-
 const HookFormContext = React.createContext(null);
 /**
  * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
@@ -128,7 +122,10 @@ const useFormContext = () => React.useContext(HookFormContext);
  * }
  * ```
  */
-const FormProvider = (props) => (React.createElement(HookFormContext.Provider, { value: omit(props, 'children') }, props.children));
+const FormProvider = (props) => {
+    const { children, ...data } = props;
+    return (React.createElement(HookFormContext.Provider, { value: data }, props.children));
+};
 
 var getProxyFormState = (formState, _proxyFormState, localProxyFormState, isRoot = true) => {
     const result = {};
@@ -150,7 +147,7 @@ var getProxyFormState = (formState, _proxyFormState, localProxyFormState, isRoot
 var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
 
 var shouldRenderFormState = (formStateData, _proxyFormState, isRoot) => {
-    const formState = omit(formStateData, 'name');
+    const { name, ...formState } = formStateData;
     return (isEmptyObject(formState) ||
         Object.keys(formState).length >= Object.keys(_proxyFormState).length ||
         Object.keys(formState).find((key) => _proxyFormState[key] ===
@@ -233,14 +230,20 @@ function useFormState(props) {
     const callback = React.useCallback((value) => _mounted.current &&
         shouldSubscribeByName(_name.current, value.name, exact) &&
         shouldRenderFormState(value, _localProxyFormState.current) &&
-        updateFormState(Object.assign(Object.assign({}, control._formState), value)), [control, exact]);
+        updateFormState({
+            ...control._formState,
+            ...value,
+        }), [control, exact]);
     useSubscribe({
         disabled,
         callback,
         subject: control._subjects.state,
     });
-    React.useEffect(() => () => {
-        _mounted.current = false;
+    React.useEffect(() => {
+        _mounted.current = true;
+        return () => {
+            _mounted.current = false;
+        };
     }, []);
     return getProxyFormState(formState, control._proxyFormState, _localProxyFormState.current, false);
 }
@@ -298,11 +301,12 @@ function useWatch(props) {
             const fieldValues = generateWatchOutput(_name.current, control._names, formState.values || control._formValues);
             updateValue(isUndefined(_name.current) ||
                 (isObject(fieldValues) && !objectHasFunction(fieldValues))
-                ? Object.assign({}, fieldValues) : Array.isArray(fieldValues)
-                ? [...fieldValues]
-                : isUndefined(fieldValues)
-                    ? defaultValue
-                    : fieldValues);
+                ? { ...fieldValues }
+                : Array.isArray(fieldValues)
+                    ? [...fieldValues]
+                    : isUndefined(fieldValues)
+                        ? defaultValue
+                        : fieldValues);
         }
     }, [control, exact, defaultValue]);
     useSubscribe({
@@ -357,7 +361,10 @@ function useController(props) {
         control,
         name,
     });
-    const _registerProps = React.useRef(control.register(name, Object.assign(Object.assign({}, props.rules), { value })));
+    const _registerProps = React.useRef(control.register(name, {
+        ...props.rules,
+        value,
+    }));
     React.useEffect(() => {
         const updateMounted = (name, value) => {
             const field = get(control._fields, name);
@@ -458,7 +465,14 @@ function useController(props) {
 const Controller = (props) => props.render(useController(props));
 
 var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
-    ? Object.assign(Object.assign({}, errors[name]), { types: Object.assign(Object.assign({}, (errors[name] && errors[name].types ? errors[name].types : {})), { [type]: message || true }) }) : {};
+    ? {
+        ...errors[name],
+        types: {
+            ...(errors[name] && errors[name].types ? errors[name].types : {}),
+            [type]: message || true,
+        },
+    }
+    : {};
 
 var isKey = (value) => /^\w*$/.test(value);
 
@@ -491,8 +505,7 @@ const focusFieldBy = (fields, callback, fieldsNames) => {
     for (const key of fieldsNames || Object.keys(fields)) {
         const field = get(fields, key);
         if (field) {
-            const _f = field._f;
-            const current = omit(field, '_f');
+            const { _f, ...currentField } = field;
             if (_f && callback(_f.name)) {
                 if (_f.ref.focus && isUndefined(_f.ref.focus())) {
                     break;
@@ -502,8 +515,8 @@ const focusFieldBy = (fields, callback, fieldsNames) => {
                     break;
                 }
             }
-            else if (isObject(current)) {
-                focusFieldBy(current, callback);
+            else if (isObject(currentField)) {
+                focusFieldBy(currentField, callback);
             }
         }
     }
@@ -789,7 +802,10 @@ function useFieldArray(props) {
         insert: React.useCallback(insert$1, [updateValues, name, control]),
         update: React.useCallback(update, [updateValues, name, control]),
         replace: React.useCallback(replace, [updateValues, name, control]),
-        fields: React.useMemo(() => fields.map((field, index) => (Object.assign(Object.assign({}, field), { [keyName]: ids.current[index] || generateId() }))), [fields, keyName]),
+        fields: React.useMemo(() => fields.map((field, index) => ({
+            ...field,
+            [keyName]: ids.current[index] || generateId(),
+        })), [fields, keyName]),
     };
 }
 
@@ -945,7 +961,7 @@ function getDirtyFieldsFromDefaultValues(data, formValues, dirtyFieldsFromValues
                     isPrimitive(dirtyFieldsFromValues[key])) {
                     dirtyFieldsFromValues[key] = Array.isArray(data[key])
                         ? markFieldsDirty(data[key], [])
-                        : Object.assign({}, markFieldsDirty(data[key]));
+                        : { ...markFieldsDirty(data[key]) };
                 }
                 else {
                     getDirtyFieldsFromDefaultValues(data[key], isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
@@ -1155,8 +1171,12 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
     const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
     const getMinMaxMessage = (exceedMax, maxLengthMessage, minLengthMessage, maxType = INPUT_VALIDATION_RULES.maxLength, minType = INPUT_VALIDATION_RULES.minLength) => {
         const message = exceedMax ? maxLengthMessage : minLengthMessage;
-        error[name] = Object.assign({ type: exceedMax ? maxType : minType, message,
-            ref }, appendErrorsCurry(exceedMax ? maxType : minType, message));
+        error[name] = {
+            type: exceedMax ? maxType : minType,
+            message,
+            ref,
+            ...appendErrorsCurry(exceedMax ? maxType : minType, message),
+        };
     };
     if (required &&
         ((!isRadioOrCheckbox && (isEmpty || isNullOrUndefined(inputValue))) ||
@@ -1167,7 +1187,12 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
             ? { value: !!required, message: required }
             : getValueAndMessage(required);
         if (value) {
-            error[name] = Object.assign({ type: INPUT_VALIDATION_RULES.required, message, ref: inputRef }, appendErrorsCurry(INPUT_VALIDATION_RULES.required, message));
+            error[name] = {
+                type: INPUT_VALIDATION_RULES.required,
+                message,
+                ref: inputRef,
+                ...appendErrorsCurry(INPUT_VALIDATION_RULES.required, message),
+            };
             if (!validateAllFieldCriteria) {
                 setCustomValidity(message);
                 return error;
@@ -1223,8 +1248,12 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
     if (pattern && !isEmpty && isString(inputValue)) {
         const { value: patternValue, message } = getValueAndMessage(pattern);
         if (isRegex(patternValue) && !inputValue.match(patternValue)) {
-            error[name] = Object.assign({ type: INPUT_VALIDATION_RULES.pattern, message,
-                ref }, appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message));
+            error[name] = {
+                type: INPUT_VALIDATION_RULES.pattern,
+                message,
+                ref,
+                ...appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message),
+            };
             if (!validateAllFieldCriteria) {
                 setCustomValidity(message);
                 return error;
@@ -1236,7 +1265,10 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
             const result = await validate(inputValue);
             const validateError = getValidateError(result, inputRef);
             if (validateError) {
-                error[name] = Object.assign(Object.assign({}, validateError), appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message));
+                error[name] = {
+                    ...validateError,
+                    ...appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message),
+                };
                 if (!validateAllFieldCriteria) {
                     setCustomValidity(validateError.message);
                     return error;
@@ -1251,7 +1283,10 @@ 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));
+                    validationResult = {
+                        ...validateError,
+                        ...appendErrorsCurry(key, validateError.message),
+                    };
                     setCustomValidity(validateError.message);
                     if (validateAllFieldCriteria) {
                         error[name] = validationResult;
@@ -1259,7 +1294,10 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
                 }
             }
             if (!isEmptyObject(validationResult)) {
-                error[name] = Object.assign({ ref: inputRef }, validationResult);
+                error[name] = {
+                    ref: inputRef,
+                    ...validationResult,
+                };
                 if (!validateAllFieldCriteria) {
                     return error;
                 }
@@ -1276,7 +1314,10 @@ const defaultOptions = {
     shouldFocusError: true,
 };
 function createFormControl(props = {}) {
-    let _options = Object.assign(Object.assign({}, defaultOptions), props);
+    let _options = {
+        ...defaultOptions,
+        ...props,
+    };
     let _formState = {
         isDirty: false,
         isValidating: false,
@@ -1290,7 +1331,7 @@ function createFormControl(props = {}) {
         errors: {},
     };
     let _fields = {};
-    let _defaultValues = _options.defaultValues || {};
+    let _defaultValues = cloneObject(_options.defaultValues) || {};
     let _formValues = _options.shouldUnregister
         ? {}
         : cloneObject(_defaultValues);
@@ -1444,8 +1485,16 @@ function createFormControl(props = {}) {
             !isEmptyObject(fieldState) ||
             shouldUpdateValid) &&
             !shouldSkipRender) {
-            const updatedFormState = Object.assign(Object.assign(Object.assign({}, fieldState), (shouldUpdateValid ? { isValid } : {})), { errors: _formState.errors, name });
-            _formState = Object.assign(Object.assign({}, _formState), updatedFormState);
+            const updatedFormState = {
+                ...fieldState,
+                ...(shouldUpdateValid ? { isValid } : {}),
+                errors: _formState.errors,
+                name,
+            };
+            _formState = {
+                ..._formState,
+                ...updatedFormState,
+            };
             _subjects.state.next(updatedFormState);
         }
         validateFields[name]--;
@@ -1458,7 +1507,7 @@ function createFormControl(props = {}) {
         }
     };
     const _executeSchema = async (name) => _options.resolver
-        ? await _options.resolver(Object.assign({}, _formValues), _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation))
+        ? await _options.resolver({ ..._formValues }, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation))
         : {};
     const executeSchemaAndUpdateState = async (names) => {
         const { errors } = await _executeSchema();
@@ -1481,8 +1530,7 @@ function createFormControl(props = {}) {
         for (const name in fields) {
             const field = fields[name];
             if (field) {
-                const fieldReference = field._f;
-                const fieldValue = omit(field, '_f');
+                const { _f: fieldReference, ...fieldValue } = field;
                 if (fieldReference) {
                     const fieldError = await validateField(field, get(_formValues, fieldReference.name), shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation);
                     if (fieldError[fieldReference.name]) {
@@ -1517,13 +1565,15 @@ function createFormControl(props = {}) {
     const _getDirty = (name, data) => (name && data && set(_formValues, name, data),
         !deepEqual(getValues(), _defaultValues));
     const _getWatch = (names, defaultValue, isGlobal) => {
-        const fieldValues = Object.assign({}, (_stateFlags.mount
-            ? _formValues
-            : isUndefined(defaultValue)
-                ? _defaultValues
-                : isString(names)
-                    ? { [names]: defaultValue }
-                    : defaultValue));
+        const fieldValues = {
+            ...(_stateFlags.mount
+                ? _formValues
+                : isUndefined(defaultValue)
+                    ? _defaultValues
+                    : isString(names)
+                        ? { [names]: defaultValue }
+                        : defaultValue),
+        };
         return generateWatchOutput(names, _names, fieldValues, isGlobal);
     };
     const _getFieldArray = (name) => compact(get(_stateFlags.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get(_defaultValues, name, []) : []));
@@ -1545,9 +1595,10 @@ function createFormControl(props = {}) {
                 else if (fieldReference.refs) {
                     if (isCheckBoxInput(fieldReference.ref)) {
                         fieldReference.refs.length > 1
-                            ? fieldReference.refs.forEach((checkboxRef) => (checkboxRef.checked = Array.isArray(fieldValue)
-                                ? !!fieldValue.find((data) => data === checkboxRef.value)
-                                : fieldValue === checkboxRef.value))
+                            ? fieldReference.refs.forEach((checkboxRef) => !checkboxRef.disabled &&
+                                (checkboxRef.checked = Array.isArray(fieldValue)
+                                    ? !!fieldValue.find((data) => data === checkboxRef.value)
+                                    : fieldValue === checkboxRef.value))
                             : fieldReference.refs[0] &&
                                 (fieldReference.refs[0].checked = !!fieldValue);
                     }
@@ -1648,7 +1699,7 @@ function createFormControl(props = {}) {
                 });
             if (shouldSkipValidation) {
                 return (shouldRender &&
-                    _subjects.state.next(Object.assign({ name }, (watched ? {} : fieldState))));
+                    _subjects.state.next({ name, ...(watched ? {} : fieldState) }));
             }
             !isBlurEvent && watched && _subjects.state.next({});
             validateFields[name] = validateFields[name] ? +1 : 1;
@@ -1696,17 +1747,25 @@ function createFormControl(props = {}) {
         else {
             validationResult = isValid = await executeBuildInValidation(_fields);
         }
-        _subjects.state.next(Object.assign(Object.assign(Object.assign({}, (!isString(name) ||
-            (_proxyFormState.isValid && isValid !== _formState.isValid)
-            ? {}
-            : { name })), (_options.resolver ? { isValid } : {})), { errors: _formState.errors, isValidating: false }));
+        _subjects.state.next({
+            ...(!isString(name) ||
+                (_proxyFormState.isValid && isValid !== _formState.isValid)
+                ? {}
+                : { name }),
+            ...(_options.resolver ? { isValid } : {}),
+            errors: _formState.errors,
+            isValidating: false,
+        });
         options.shouldFocus &&
             !validationResult &&
             focusFieldBy(_fields, (key) => get(_formState.errors, key), name ? fieldNames : _names.mount);
         return validationResult;
     };
     const getValues = (fieldNames) => {
-        const values = Object.assign(Object.assign({}, _defaultValues), (_stateFlags.mount ? _formValues : {}));
+        const values = {
+            ..._defaultValues,
+            ...(_stateFlags.mount ? _formValues : {}),
+        };
         return isUndefined(fieldNames)
             ? values
             : isString(fieldNames)
@@ -1729,7 +1788,10 @@ function createFormControl(props = {}) {
     };
     const setError = (name, error, options) => {
         const ref = (get(_fields, name, { _f: {} })._f || {}).ref;
-        set(_formState.errors, name, Object.assign(Object.assign({}, error), { ref }));
+        set(_formState.errors, name, {
+            ...error,
+            ref,
+        });
         _subjects.state.next({
             name,
             errors: _formState.errors,
@@ -1760,14 +1822,22 @@ function createFormControl(props = {}) {
             }
         }
         _subjects.watch.next({});
-        _subjects.state.next(Object.assign(Object.assign({}, _formState), (!options.keepDirty ? {} : { isDirty: _getDirty() })));
+        _subjects.state.next({
+            ..._formState,
+            ...(!options.keepDirty ? {} : { isDirty: _getDirty() }),
+        });
         !options.keepIsValid && _updateValid();
     };
     const register = (name, options = {}) => {
         let field = get(_fields, name);
         const disabledIsDefined = isBoolean(options.disabled);
         set(_fields, name, {
-            _f: Object.assign(Object.assign(Object.assign({}, (field && field._f ? field._f : { ref: { name } })), { name, mount: true }), options),
+            _f: {
+                ...(field && field._f ? field._f : { ref: { name } }),
+                name,
+                mount: true,
+                ...options,
+            },
         });
         _names.mount.add(name);
         field
@@ -1776,17 +1846,22 @@ function createFormControl(props = {}) {
                     ? undefined
                     : get(_formValues, name, getFieldValue(field._f)))
             : updateValidAndValue(name, true, options.value);
-        return Object.assign(Object.assign(Object.assign({}, (disabledIsDefined ? { 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) => {
+        return {
+            ...(disabledIsDefined ? { 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);
@@ -1803,12 +1878,21 @@ function createFormControl(props = {}) {
                         return;
                     }
                     set(_fields, name, {
-                        _f: Object.assign(Object.assign({}, field._f), (radioOrCheckbox
-                            ? {
-                                refs: [...refs.filter(live), fieldRef],
-                                ref: { type: fieldRef.type, name },
-                            }
-                            : { ref: fieldRef })),
+                        _f: {
+                            ...field._f,
+                            ...(radioOrCheckbox
+                                ? {
+                                    refs: [
+                                        ...refs.filter(live),
+                                        fieldRef,
+                                        ...(!!Array.isArray(get(_defaultValues, name))
+                                            ? [{}]
+                                            : []),
+                                    ],
+                                    ref: { type: fieldRef.type, name },
+                                }
+                                : { ref: fieldRef }),
+                        },
                     });
                     updateValidAndValue(name, false, undefined, fieldRef);
                 }
@@ -1821,7 +1905,8 @@ function createFormControl(props = {}) {
                         !(isNameInFieldArray(_names.array, name) && _stateFlags.action) &&
                         _names.unMount.add(name);
                 }
-            } });
+            },
+        };
     };
     const handleSubmit = (onValid, onInvalid) => async (e) => {
         if (e) {
@@ -1852,7 +1937,7 @@ function createFormControl(props = {}) {
             }
             else {
                 if (onInvalid) {
-                    await onInvalid(Object.assign({}, _formState.errors), e);
+                    await onInvalid({ ..._formState.errors }, e);
                 }
                 _options.shouldFocusError &&
                     focusFieldBy(_fields, (key) => get(_formState.errors, key), _names.mount);
@@ -1895,7 +1980,7 @@ function createFormControl(props = {}) {
                 unset(_formState.errors, name);
                 _proxyFormState.isValid && _updateValid();
             }
-            _subjects.state.next(Object.assign({}, _formState));
+            _subjects.state.next({ ..._formState });
         }
     };
     const reset = (formValues, keepStateOptions = {}) => {
@@ -1963,7 +2048,10 @@ function createFormControl(props = {}) {
             dirtyFields: keepStateOptions.keepDirty
                 ? _formState.dirtyFields
                 : (keepStateOptions.keepDefaultValues && formValues
-                    ? Object.entries(formValues).reduce((previous, [key, value]) => (Object.assign(Object.assign({}, previous), { [key]: value !== get(_defaultValues, key) })), {})
+                    ? Object.entries(formValues).reduce((previous, [key, value]) => ({
+                        ...previous,
+                        [key]: value !== get(_defaultValues, key),
+                    }), {})
                     : {}),
             touchedFields: keepStateOptions.keepTouched
                 ? _formState.touchedFields
@@ -2025,7 +2113,10 @@ function createFormControl(props = {}) {
                 return _options;
             },
             set _options(value) {
-                _options = Object.assign(Object.assign({}, _options), value);
+                _options = {
+                    ..._options,
+                    ...value,
+                };
             },
         },
         trigger,
@@ -2091,13 +2182,19 @@ function useForm(props = {}) {
         _formControl.current.control._options = props;
     }
     else {
-        _formControl.current = Object.assign(Object.assign({}, createFormControl(props)), { formState });
+        _formControl.current = {
+            ...createFormControl(props),
+            formState,
+        };
     }
     const control = _formControl.current.control;
     const callback = React.useCallback((value) => {
         if (shouldRenderFormState(value, control._proxyFormState, true)) {
-            control._formState = Object.assign(Object.assign({}, control._formState), value);
-            updateFormState(Object.assign({}, control._formState));
+            control._formState = {
+                ...control._formState,
+                ...value,
+            };
+            updateFormState({ ...control._formState });
         }
     }, [control]);
     useSubscribe({