react-hook-form 8.0.0-alpha.0 → 8.0.0-alpha.3

package/dist/index.esm.mjs

@@ -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) => Array.isArray(value) ? value.filter(Boolean) : [];
 
 var isUndefined = (val) => val === undefined;
 
@@ -60,15 +60,72 @@ 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}.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/api/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
+ *
+ * @returns return all useForm methods
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const methods = useForm();
+ *   const onSubmit = data => console.log(data);
+ *
+ *   return (
+ *     <FormProvider {...methods} >
+ *       <form onSubmit={methods.handleSubmit(onSubmit)}>
+ *         <NestedInput />
+ *         <input type="submit" />
+ *       </form>
+ *     </FormProvider>
+ *   );
+ * }
+ *
+ *  function NestedInput() {
+ *   const { register } = useFormContext(); // retrieve all hook methods
+ *   return <input {...register("test")} />;
+ * }
+ * ```
+ */
 const useFormContext = () => React.useContext(HookFormContext);
-const FormProvider = (props) => (React.createElement(HookFormContext.Provider, { value: omit(props, 'children') }, props.children));
+/**
+ * A provider component that propagates the `useForm` methods to all children components via [React Context](https://reactjs.org/docs/context.html) API. To be used with {@link useFormContext}.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/api/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
+ *
+ * @param props - all useFrom methods
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const methods = useForm();
+ *   const onSubmit = data => console.log(data);
+ *
+ *   return (
+ *     <FormProvider {...methods} >
+ *       <form onSubmit={methods.handleSubmit(onSubmit)}>
+ *         <NestedInput />
+ *         <input type="submit" />
+ *       </form>
+ *     </FormProvider>
+ *   );
+ * }
+ *
+ *  function NestedInput() {
+ *   const { register } = useFormContext(); // retrieve all hook methods
+ *   return <input {...register("test")} />;
+ * }
+ * ```
+ */
+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 = {};
@@ -90,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] ===
@@ -125,6 +182,36 @@ function useSubscribe(props) {
     }, [props.disabled]);
 }
 
+/**
+ * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/api/useformstate) • [Demo](https://codesandbox.io/s/useformstate-75xly)
+ *
+ * @param props - include options on specify fields to subscribe. {@link UseFormStateReturn}
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { register, handleSubmit, control } = useForm({
+ *     defaultValues: {
+ *     firstName: "firstName"
+ *   }});
+ *   const { dirtyFields } = useFormState({
+ *     control
+ *   });
+ *   const onSubmit = (data) => console.log(data);
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit(onSubmit)}>
+ *       <input {...register("firstName")} placeholder="First Name" />
+ *       {dirtyFields.firstName && <p>Field is dirty.</p>}
+ *       <input type="submit" />
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
 function useFormState(props) {
     const methods = useFormContext();
     const { control = methods.control, disabled, name, exact } = props || {};
@@ -143,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);
 }
@@ -182,6 +275,19 @@ var objectHasFunction = (data) => {
     return false;
 };
 
+/**
+ * Custom hook to subscribe to field change and isolate re-rendering at the component level.
+ *
+ * @remarks
+ *
+ * [API](https://react-hook-form.com/api/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
+ *
+ * @example
+ * ```tsx
+ * // can skip passing down the control into useWatch if the form is wrapped with the FormProvider
+ * const values = useWatch()
+ * ```
+ */
 function useWatch(props) {
     const methods = useFormContext();
     const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
@@ -192,11 +298,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({
@@ -213,6 +320,30 @@ function useWatch(props) {
     return value;
 }
 
+/**
+ * Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/api/usecontroller) • [Demo](https://codesandbox.io/s/usecontroller-0o8px)
+ *
+ * @param props - the path name to the form field value, and validation rules.
+ *
+ * @returns field properties, field and form state. {@link UseControllerReturn}
+ *
+ * @example
+ * ```tsx
+ * function Input(props) {
+ *   const { field, fieldState, formState } = useController(props);
+ *   return (
+ *     <div>
+ *       <input {...field} placeholder={props.name} />
+ *       <p>{fieldState.isTouched && "Touched"}</p>
+ *       <p>{formState.isSubmitted ? "submitted" : ""}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
 function useController(props) {
     const methods = useFormContext();
     const { name, control = methods.control, shouldUnregister } = props;
@@ -221,13 +352,16 @@ function useController(props) {
         control,
         name,
         defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),
-        exact: !isArrayField,
+        exact: true,
     });
     const formState = useFormState({
         control,
         name,
     });
-    const _registerProps = React.useRef(control.register(name, Object.assign(Object.assign({}, props.rules), { value: value })));
+    const _registerProps = React.useRef(control.register(name, {
+        ...props.rules,
+        value: value,
+    }));
     React.useEffect(() => {
         const updateMounted = (name, value) => {
             const field = get(control._fields, name);
@@ -283,10 +417,59 @@ function useController(props) {
     };
 }
 
+/**
+ * Component based on `useController` hook to work with controlled component.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/api/usecontroller/controller) • [Demo](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw) • [Video](https://www.youtube.com/watch?v=N2UNk_UCVyA)
+ *
+ * @param props - the path name to the form field value, and validation rules.
+ *
+ * @returns provide field handler functions, field and form state.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { control } = useForm<FormValues>({
+ *     defaultValues: {
+ *       test: ""
+ *     }
+ *   });
+ *
+ *   return (
+ *     <form>
+ *       <Controller
+ *         control={control}
+ *         name="test"
+ *         render={({ field: { onChange, onBlur, value, ref }, formState, fieldState }) => (
+ *           <>
+ *             <input
+ *               onChange={onChange} // send value to hook form
+ *               onBlur={onBlur} // notify when input is touched
+ *               value={value} // return updated value
+ *               ref={ref} // set ref for focus management
+ *             />
+ *             <p>{formState.isSubmitted ? "submitted" : ""}</p>
+ *             <p>{fieldState.isTouched ? "touched" : ""}</p>
+ *           </>
+ *         )}
+ *       />
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
 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,
+        },
+    }
+    : {};
 
 /**
  * Function for joining two paths / path strings to a {@link TypedFieldPath}.
@@ -350,8 +533,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;
@@ -361,8 +543,8 @@ const focusFieldBy = (fields, callback, fieldsNames) => {
                     break;
                 }
             }
-            else if (isObject(current)) {
-                focusFieldBy(current, callback);
+            else if (isObject(currentField)) {
+                focusFieldBy(currentField, callback);
             }
         }
     }
@@ -387,6 +569,241 @@ var isWatched = (name, _names, isBlurEvent) => !isBlurEvent &&
         [..._names.watch].some((watchName) => name.startsWith(watchName) &&
             /^\.\w+/.test(name.slice(watchName.length))));
 
+var updateFieldArrayRootError = (errors, error, name) => {
+    const fieldArrayErrors = compact(get(errors, name));
+    set(fieldArrayErrors, 'root', error[name]);
+    set(errors, name, fieldArrayErrors);
+    return errors;
+};
+
+var isBoolean = (value) => typeof value === 'boolean';
+
+var isFileInput = (element) => element.type === 'file';
+
+var isMessage = (value) => isString(value) || React.isValidElement(value);
+
+var isRadioInput = (element) => element.type === 'radio';
+
+var isRegex = (value) => value instanceof RegExp;
+
+const defaultResult = {
+    value: false,
+    isValid: false,
+};
+const validResult = { value: true, isValid: true };
+var getCheckboxValue = (options) => {
+    if (Array.isArray(options)) {
+        if (options.length > 1) {
+            const values = options
+                .filter((option) => option && option.checked && !option.disabled)
+                .map((option) => option.value);
+            return { value: values, isValid: !!values.length };
+        }
+        return options[0].checked && !options[0].disabled
+            ? // @ts-expect-error expected to work in the browser
+                options[0].attributes && !isUndefined(options[0].attributes.value)
+                    ? isUndefined(options[0].value) || options[0].value === ''
+                        ? validResult
+                        : { value: options[0].value, isValid: true }
+                    : validResult
+            : defaultResult;
+    }
+    return defaultResult;
+};
+
+const defaultReturn = {
+    isValid: false,
+    value: null,
+};
+var getRadioValue = (options) => Array.isArray(options)
+    ? options.reduce((previous, option) => option && option.checked && !option.disabled
+        ? {
+            isValid: true,
+            value: option.value,
+        }
+        : previous, defaultReturn)
+    : defaultReturn;
+
+function getValidateError(result, ref, type = 'validate') {
+    if (isMessage(result) ||
+        (Array.isArray(result) && result.every(isMessage)) ||
+        (isBoolean(result) && !result)) {
+        return {
+            type,
+            message: isMessage(result) ? result : '',
+            ref,
+        };
+    }
+}
+
+var getValueAndMessage = (validationData) => isObject(validationData) && !isRegex(validationData)
+    ? validationData
+    : {
+        value: validationData,
+        message: '',
+    };
+
+var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
+    const { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount, disabled, } = field._f;
+    if (!mount || disabled) {
+        return {};
+    }
+    const inputRef = refs ? refs[0] : ref;
+    const setCustomValidity = (message) => {
+        if (shouldUseNativeValidation && inputRef.reportValidity) {
+            inputRef.setCustomValidity(isBoolean(message) ? '' : message || ' ');
+            inputRef.reportValidity();
+        }
+    };
+    const error = {};
+    const isRadio = isRadioInput(ref);
+    const isCheckBox = isCheckBoxInput(ref);
+    const isRadioOrCheckbox = isRadio || isCheckBox;
+    const isEmpty = ((valueAsNumber || isFileInput(ref)) && !ref.value) ||
+        inputValue === '' ||
+        (Array.isArray(inputValue) && !inputValue.length);
+    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] = {
+            type: exceedMax ? maxType : minType,
+            message,
+            ref,
+            ...appendErrorsCurry(exceedMax ? maxType : minType, message),
+        };
+    };
+    if (required &&
+        ((!isRadioOrCheckbox && (isEmpty || isNullOrUndefined(inputValue))) ||
+            (isBoolean(inputValue) && !inputValue) ||
+            (isCheckBox && !getCheckboxValue(refs).isValid) ||
+            (isRadio && !getRadioValue(refs).isValid))) {
+        const { value, message } = isMessage(required)
+            ? { value: !!required, message: required }
+            : getValueAndMessage(required);
+        if (value) {
+            error[name] = {
+                type: INPUT_VALIDATION_RULES.required,
+                message,
+                ref: inputRef,
+                ...appendErrorsCurry(INPUT_VALIDATION_RULES.required, message),
+            };
+            if (!validateAllFieldCriteria) {
+                setCustomValidity(message);
+                return error;
+            }
+        }
+    }
+    if (!isEmpty && (!isNullOrUndefined(min) || !isNullOrUndefined(max))) {
+        let exceedMax;
+        let exceedMin;
+        const maxOutput = getValueAndMessage(max);
+        const minOutput = getValueAndMessage(min);
+        if (!isNaN(inputValue)) {
+            const valueNumber = ref.valueAsNumber || +inputValue;
+            if (!isNullOrUndefined(maxOutput.value)) {
+                exceedMax = valueNumber > maxOutput.value;
+            }
+            if (!isNullOrUndefined(minOutput.value)) {
+                exceedMin = valueNumber < minOutput.value;
+            }
+        }
+        else {
+            const valueDate = ref.valueAsDate || new Date(inputValue);
+            if (isString(maxOutput.value)) {
+                exceedMax = valueDate > new Date(maxOutput.value);
+            }
+            if (isString(minOutput.value)) {
+                exceedMin = valueDate < new Date(minOutput.value);
+            }
+        }
+        if (exceedMax || exceedMin) {
+            getMinMaxMessage(!!exceedMax, maxOutput.message, minOutput.message, INPUT_VALIDATION_RULES.max, INPUT_VALIDATION_RULES.min);
+            if (!validateAllFieldCriteria) {
+                setCustomValidity(error[name].message);
+                return error;
+            }
+        }
+    }
+    if ((maxLength || minLength) &&
+        ((!isEmpty && isString(inputValue)) ||
+            (isFieldArray && Array.isArray(inputValue)))) {
+        const maxLengthOutput = getValueAndMessage(maxLength);
+        const minLengthOutput = getValueAndMessage(minLength);
+        const exceedMax = !isNullOrUndefined(maxLengthOutput.value) &&
+            inputValue.length > maxLengthOutput.value;
+        const exceedMin = !isNullOrUndefined(minLengthOutput.value) &&
+            inputValue.length < minLengthOutput.value;
+        if (exceedMax || exceedMin) {
+            getMinMaxMessage(exceedMax, maxLengthOutput.message, minLengthOutput.message);
+            if (!validateAllFieldCriteria) {
+                setCustomValidity(error[name].message);
+                return error;
+            }
+        }
+    }
+    if (pattern && !isEmpty && isString(inputValue)) {
+        const { value: patternValue, message } = getValueAndMessage(pattern);
+        if (isRegex(patternValue) && !inputValue.match(patternValue)) {
+            error[name] = {
+                type: INPUT_VALIDATION_RULES.pattern,
+                message,
+                ref,
+                ...appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message),
+            };
+            if (!validateAllFieldCriteria) {
+                setCustomValidity(message);
+                return error;
+            }
+        }
+    }
+    if (validate) {
+        if (isFunction(validate)) {
+            const result = await validate(inputValue);
+            const validateError = getValidateError(result, inputRef);
+            if (validateError) {
+                error[name] = {
+                    ...validateError,
+                    ...appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message),
+                };
+                if (!validateAllFieldCriteria) {
+                    setCustomValidity(validateError.message);
+                    return error;
+                }
+            }
+        }
+        else if (isObject(validate)) {
+            let validationResult = {};
+            for (const key in validate) {
+                if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
+                    break;
+                }
+                const validateError = getValidateError(await validate[key](inputValue), inputRef, key);
+                if (validateError) {
+                    validationResult = {
+                        ...validateError,
+                        ...appendErrorsCurry(key, validateError.message),
+                    };
+                    setCustomValidity(validateError.message);
+                    if (validateAllFieldCriteria) {
+                        error[name] = validationResult;
+                    }
+                }
+            }
+            if (!isEmptyObject(validationResult)) {
+                error[name] = {
+                    ref: inputRef,
+                    ...validationResult,
+                };
+                if (!validateAllFieldCriteria) {
+                    return error;
+                }
+            }
+        }
+    }
+    setCustomValidity(true);
+    return error;
+};
+
 function append(data, value) {
     return [...data, ...convertToArrayPayload(value)];
 }
@@ -418,6 +835,14 @@ function cloneObject(data) {
 
 var fillEmptyArray = (value) => Array.isArray(value) ? value.map(() => undefined) : undefined;
 
+var getValidationModes = (mode) => ({
+    isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
+    isOnBlur: mode === VALIDATION_MODE.onBlur,
+    isOnChange: mode === VALIDATION_MODE.onChange,
+    isOnAll: mode === VALIDATION_MODE.all,
+    isOnTouch: mode === VALIDATION_MODE.onTouched,
+});
+
 function insert(data, index, value) {
     return [
         ...data.slice(0, index),
@@ -463,7 +888,44 @@ var updateAt = (fieldValues, index, value) => {
     return fieldValues;
 };
 
-const useFieldArray = (props) => {
+/**
+ * A custom hook that exposes convenient methods to perform operations with a list of dynamic inputs that need to be appended, updated, removed etc.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/api/usefieldarray) • [Demo](https://codesandbox.io/s/react-hook-form-usefieldarray-ssugn)
+ *
+ * @param props - useFieldArray props
+ *
+ * @returns methods - functions to manipulate with the Field Arrays (dynamic inputs) {@link UseFieldArrayReturn}
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { register, control, handleSubmit, reset, trigger, setError } = useForm({
+ *     defaultValues: {
+ *       test: []
+ *     }
+ *   });
+ *   const { fields, append } = useFieldArray({
+ *     control,
+ *     name: "test"
+ *   });
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit(data => console.log(data))}>
+ *       {fields.map((item, index) => (
+ *          <input key={item.id} {...register(`test.${index}.firstName`)}  />
+ *       ))}
+ *       <button type="button" onClick={() => append({ firstName: "bill" })}>
+ *         append
+ *       </button>
+ *       <input type="submit" />
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+function useFieldArray(props) {
     const methods = useFormContext();
     const { control = methods.control, name, shouldUnregister } = props;
     const [fields, setFields] = React.useState(control._getFieldArray(name));
@@ -474,6 +936,9 @@ const useFieldArray = (props) => {
     _name.current = name;
     _fieldIds.current = fields;
     control._names.array.add(name);
+    if (props.rules) {
+        control.register(name, props.rules);
+    }
     const callback = React.useCallback(({ values, name: fieldArrayName }) => {
         if (fieldArrayName === _name.current || !fieldArrayName) {
             const fieldValues = get(values, _name.current, []);
@@ -555,13 +1020,14 @@ const useFieldArray = (props) => {
         }, false);
     };
     const update = (index, value) => {
+        const updateValue = cloneObject(value);
         const updatedFieldArrayValues = updateAt(control._getFieldArray(name), index, value);
         ids.current = [...updatedFieldArrayValues].map((item, i) => !item || i === index ? generateId() : ids.current[i]);
         updateValues(updatedFieldArrayValues);
         setFields([...updatedFieldArrayValues]);
         control._updateFieldArray(name, updatedFieldArrayValues, updateAt, {
             argA: index,
-            argB: value,
+            argB: updateValue,
         }, true, false);
     };
     const replace = (value) => {
@@ -575,15 +1041,33 @@ const useFieldArray = (props) => {
         control._stateFlags.action = false;
         isWatched(name, control._names) && control._subjects.state.next({});
         if (_actioned.current) {
-            control._executeSchema([name]).then((result) => {
-                const error = get(result.errors, name);
-                if (error && error.type && !get(control._formState.errors, name)) {
-                    set(control._formState.errors, name, error);
-                    control._subjects.state.next({
-                        errors: control._formState.errors,
+            if (control._options.resolver) {
+                control._executeSchema([name]).then((result) => {
+                    const error = get(result.errors, name);
+                    if (error && error.type && !get(control._formState.errors, name)) {
+                        set(control._formState.errors, name, error);
+                        control._subjects.state.next({
+                            errors: control._formState.errors,
+                        });
+                    }
+                });
+            }
+            else {
+                const field = get(control._fields, name);
+                const validationModeBeforeSubmit = getValidationModes(control._options.mode);
+                if ((!validationModeBeforeSubmit.isOnSubmit ||
+                    control._formState.isSubmitted) &&
+                    field &&
+                    field._f) {
+                    validateField(field, get(control._formValues, name), control._options.criteriaMode === VALIDATION_MODE.all, control._options.shouldUseNativeValidation, true).then((error) => {
+                        if (!isEmptyObject(error)) {
+                            control._subjects.state.next({
+                                errors: updateFieldArrayRootError(control._formState.errors, error, name),
+                            });
+                        }
                     });
                 }
-            });
+            }
         }
         control._subjects.watch.next({
             name,
@@ -610,9 +1094,12 @@ const 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), { id: ids.current[index] || generateId() }))), [fields]),
+        fields: React.useMemo(() => fields.map((field, index) => ({
+            ...field,
+            id: ids.current[index] || generateId(),
+        })), [fields]),
     };
-};
+}
 
 function createSubject() {
     let _observers = [];
@@ -675,24 +1162,10 @@ function deepEqual(object1, object2) {
     return true;
 }
 
-var getValidationModes = (mode) => ({
-    isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
-    isOnBlur: mode === VALIDATION_MODE.onBlur,
-    isOnChange: mode === VALIDATION_MODE.onChange,
-    isOnAll: mode === VALIDATION_MODE.all,
-    isOnTouch: mode === VALIDATION_MODE.onTouched,
-});
-
-var isBoolean = (value) => typeof value === 'boolean';
-
-var isFileInput = (element) => element.type === 'file';
-
 var isHTMLElement = (value) => value instanceof HTMLElement;
 
 var isMultipleSelect = (element) => element.type === `select-multiple`;
 
-var isRadioInput = (element) => element.type === 'radio';
-
 var isRadioOrCheckbox = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
 
 var isWeb = typeof window !== 'undefined' &&
@@ -709,6 +1182,14 @@ function baseGet(object, updatePath) {
     }
     return object;
 }
+function isEmptyArray(obj) {
+    for (const key in obj) {
+        if (!isUndefined(obj[key])) {
+            return false;
+        }
+    }
+    return true;
+}
 function unset(object, path) {
     const updatePath = isKey(path) ? [path] : stringToPath(path);
     const childObject = updatePath.length == 1 ? object : baseGet(object, updatePath);
@@ -730,8 +1211,7 @@ function unset(object, path) {
             objectRef = objectRef ? objectRef[item] : object[item];
             if (currentPathsLength === index &&
                 ((isObject(objectRef) && isEmptyObject(objectRef)) ||
-                    (Array.isArray(objectRef) &&
-                        !objectRef.filter((data) => (isObject(data) && !isEmptyObject(data)) || isBoolean(data)).length))) {
+                    (Array.isArray(objectRef) && isEmptyArray(objectRef)))) {
                 previousObjRef ? delete previousObjRef[item] : delete object[item];
             }
             previousObjRef = objectRef;
@@ -766,7 +1246,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]);
@@ -781,31 +1261,6 @@ function getDirtyFieldsFromDefaultValues(data, formValues, dirtyFieldsFromValues
 }
 var getDirtyFields = (defaultValues, formValues) => getDirtyFieldsFromDefaultValues(defaultValues, formValues, markFieldsDirty(formValues));
 
-const defaultResult = {
-    value: false,
-    isValid: false,
-};
-const validResult = { value: true, isValid: true };
-var getCheckboxValue = (options) => {
-    if (Array.isArray(options)) {
-        if (options.length > 1) {
-            const values = options
-                .filter((option) => option && option.checked && !option.disabled)
-                .map((option) => option.value);
-            return { value: values, isValid: !!values.length };
-        }
-        return options[0].checked && !options[0].disabled
-            ? // @ts-expect-error expected to work in the browser
-                options[0].attributes && !isUndefined(options[0].attributes.value)
-                    ? isUndefined(options[0].value) || options[0].value === ''
-                        ? validResult
-                        : { value: options[0].value, isValid: true }
-                    : validResult
-            : defaultResult;
-    }
-    return defaultResult;
-};
-
 var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isUndefined(value)
     ? value
     : valueAsNumber
@@ -818,19 +1273,6 @@ var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isU
                 ? setValueAs(value)
                 : value;
 
-const defaultReturn = {
-    isValid: false,
-    value: null,
-};
-var getRadioValue = (options) => Array.isArray(options)
-    ? options.reduce((previous, option) => option && option.checked && !option.disabled
-        ? {
-            isValid: true,
-            value: option.value,
-        }
-        : previous, defaultReturn)
-    : defaultReturn;
-
 function getFieldValue(_f) {
     const ref = _f.ref;
     if (_f.refs ? _f.refs.every((ref) => ref.disabled) : ref.disabled) {
@@ -865,8 +1307,6 @@ var getResolverOptions = (fieldsNames, _fields, criteriaMode, shouldUseNativeVal
     };
 };
 
-var isRegex = (value) => value instanceof RegExp;
-
 var getRuleValue = (rule) => isUndefined(rule)
     ? undefined
     : isRegex(rule)
@@ -933,171 +1373,16 @@ var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode)
 
 var unsetEmptyArray = (ref, name) => !compact(get(ref, name)).length && unset(ref, name);
 
-var isMessage = (value) => isString(value) || React.isValidElement(value);
-
-function getValidateError(result, ref, type = 'validate') {
-    if (isMessage(result) ||
-        (Array.isArray(result) && result.every(isMessage)) ||
-        (isBoolean(result) && !result)) {
-        return {
-            type,
-            message: isMessage(result) ? result : '',
-            ref,
-        };
-    }
-}
-
-var getValueAndMessage = (validationData) => isObject(validationData) && !isRegex(validationData)
-    ? validationData
-    : {
-        value: validationData,
-        message: '',
-    };
-
-var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUseNativeValidation) => {
-    const { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount, disabled, } = field._f;
-    if (!mount || disabled) {
-        return {};
-    }
-    const inputRef = refs ? refs[0] : ref;
-    const setCustomValidity = (message) => {
-        if (shouldUseNativeValidation && inputRef.reportValidity) {
-            inputRef.setCustomValidity(isBoolean(message) ? '' : message || ' ');
-            inputRef.reportValidity();
-        }
-    };
-    const error = {};
-    const isRadio = isRadioInput(ref);
-    const isCheckBox = isCheckBoxInput(ref);
-    const isRadioOrCheckbox = isRadio || isCheckBox;
-    const isEmpty = ((valueAsNumber || isFileInput(ref)) && !ref.value) ||
-        inputValue === '' ||
-        (Array.isArray(inputValue) && !inputValue.length);
-    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));
-    };
-    if (required &&
-        ((!isRadioOrCheckbox && (isEmpty || isNullOrUndefined(inputValue))) ||
-            (isBoolean(inputValue) && !inputValue) ||
-            (isCheckBox && !getCheckboxValue(refs).isValid) ||
-            (isRadio && !getRadioValue(refs).isValid))) {
-        const { value, message } = isMessage(required)
-            ? { 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));
-            if (!validateAllFieldCriteria) {
-                setCustomValidity(message);
-                return error;
-            }
-        }
-    }
-    if (!isEmpty && (!isNullOrUndefined(min) || !isNullOrUndefined(max))) {
-        let exceedMax;
-        let exceedMin;
-        const maxOutput = getValueAndMessage(max);
-        const minOutput = getValueAndMessage(min);
-        if (!isNaN(inputValue)) {
-            const valueNumber = ref.valueAsNumber || +inputValue;
-            if (!isNullOrUndefined(maxOutput.value)) {
-                exceedMax = valueNumber > maxOutput.value;
-            }
-            if (!isNullOrUndefined(minOutput.value)) {
-                exceedMin = valueNumber < minOutput.value;
-            }
-        }
-        else {
-            const valueDate = ref.valueAsDate || new Date(inputValue);
-            if (isString(maxOutput.value)) {
-                exceedMax = valueDate > new Date(maxOutput.value);
-            }
-            if (isString(minOutput.value)) {
-                exceedMin = valueDate < new Date(minOutput.value);
-            }
-        }
-        if (exceedMax || exceedMin) {
-            getMinMaxMessage(!!exceedMax, maxOutput.message, minOutput.message, INPUT_VALIDATION_RULES.max, INPUT_VALIDATION_RULES.min);
-            if (!validateAllFieldCriteria) {
-                setCustomValidity(error[name].message);
-                return error;
-            }
-        }
-    }
-    if ((maxLength || minLength) && !isEmpty && isString(inputValue)) {
-        const maxLengthOutput = getValueAndMessage(maxLength);
-        const minLengthOutput = getValueAndMessage(minLength);
-        const exceedMax = !isNullOrUndefined(maxLengthOutput.value) &&
-            inputValue.length > maxLengthOutput.value;
-        const exceedMin = !isNullOrUndefined(minLengthOutput.value) &&
-            inputValue.length < minLengthOutput.value;
-        if (exceedMax || exceedMin) {
-            getMinMaxMessage(exceedMax, maxLengthOutput.message, minLengthOutput.message);
-            if (!validateAllFieldCriteria) {
-                setCustomValidity(error[name].message);
-                return error;
-            }
-        }
-    }
-    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));
-            if (!validateAllFieldCriteria) {
-                setCustomValidity(message);
-                return error;
-            }
-        }
-    }
-    if (validate) {
-        if (isFunction(validate)) {
-            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));
-                if (!validateAllFieldCriteria) {
-                    setCustomValidity(validateError.message);
-                    return error;
-                }
-            }
-        }
-        else if (isObject(validate)) {
-            let validationResult = {};
-            for (const key in validate) {
-                if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
-                    break;
-                }
-                const validateError = getValidateError(await validate[key](inputValue), inputRef, key);
-                if (validateError) {
-                    validationResult = Object.assign(Object.assign({}, validateError), appendErrorsCurry(key, validateError.message));
-                    setCustomValidity(validateError.message);
-                    if (validateAllFieldCriteria) {
-                        error[name] = validationResult;
-                    }
-                }
-            }
-            if (!isEmptyObject(validationResult)) {
-                error[name] = Object.assign({ ref: inputRef }, validationResult);
-                if (!validateAllFieldCriteria) {
-                    return error;
-                }
-            }
-        }
-    }
-    setCustomValidity(true);
-    return error;
-};
-
 const defaultOptions = {
     mode: VALIDATION_MODE.onSubmit,
     reValidateMode: VALIDATION_MODE.onChange,
     shouldFocusError: true,
 };
 function createFormControl(props = {}) {
-    let _options = Object.assign(Object.assign({}, defaultOptions), props);
+    let _options = {
+        ...defaultOptions,
+        ...props,
+    };
     let _formState = {
         isDirty: false,
         isValidating: false,
@@ -1111,7 +1396,7 @@ function createFormControl(props = {}) {
         errors: {},
     };
     let _fields = {};
-    let _defaultValues = _options.defaultValues || {};
+    let _defaultValues = cloneObject(_options.defaultValues) || {};
     let _formValues = _options.shouldUnregister
         ? {}
         : cloneObject(_defaultValues);
@@ -1164,21 +1449,22 @@ function createFormControl(props = {}) {
         }
         return isValid;
     };
-    const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndErrors = true) => {
+    const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
         if (args && method) {
             _stateFlags.action = true;
-            if (shouldUpdateFieldsAndErrors && Array.isArray(get(_fields, name))) {
+            if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
                 const fieldValues = method(get(_fields, name), args.argA, args.argB);
                 shouldSetValues && set(_fields, name, fieldValues);
             }
             if (_proxyFormState.errors &&
-                shouldUpdateFieldsAndErrors &&
+                shouldUpdateFieldsAndState &&
                 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 &&
+                shouldUpdateFieldsAndState &&
                 Array.isArray(get(_formState.touchedFields, name))) {
                 const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
                 shouldSetValues && set(_formState.touchedFields, name, touchedFields);
@@ -1264,12 +1550,21 @@ 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]--;
-        if (_proxyFormState.isValidating && !validateFields[name]) {
+        if (_proxyFormState.isValidating &&
+            !Object.values(validateFields).some((v) => v)) {
             _subjects.state.next({
                 isValidating: false,
             });
@@ -1277,7 +1572,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();
@@ -1300,20 +1595,28 @@ function createFormControl(props = {}) {
         for (const name in fields) {
             const field = fields[name];
             if (field) {
-                const fieldReference = field._f;
-                const fieldValue = omit(field, '_f');
-                if (fieldReference) {
-                    const fieldError = await validateField(field, get(_formValues, fieldReference.name), shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation);
-                    if (fieldError[fieldReference.name]) {
+                const { _f, ...fieldValue } = field;
+                if (_f) {
+                    const isFieldArrayRoot = _names.array.has(_f.name);
+                    const fieldError = await validateField(field, get(_formValues, _f.name), shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation, isFieldArrayRoot);
+                    if (fieldError[_f.name]) {
                         context.valid = false;
                         if (shouldOnlyCheckValid) {
                             break;
                         }
                     }
                     if (!shouldOnlyCheckValid) {
-                        fieldError[fieldReference.name]
-                            ? set(_formState.errors, fieldReference.name, fieldError[fieldReference.name])
-                            : unset(_formState.errors, fieldReference.name);
+                        if (get(fieldError, _f.name)) {
+                            if (isFieldArrayRoot) {
+                                updateFieldArrayRootError(_formState.errors, fieldError, _f.name);
+                            }
+                            else {
+                                set(_formState.errors, _f.name, fieldError[_f.name]);
+                            }
+                        }
+                        else {
+                            unset(_formState.errors, _f.name);
+                        }
                     }
                 }
                 fieldValue &&
@@ -1336,13 +1639,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, []) : []));
@@ -1364,9 +1669,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);
                     }
@@ -1467,7 +1773,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;
@@ -1486,7 +1792,8 @@ function createFormControl(props = {}) {
                 error = (await validateField(field, get(_formValues, name), shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
                 isValid = await _updateValid(true);
             }
-            field._f.deps && trigger(field._f.deps);
+            field._f.deps &&
+                trigger(field._f.deps);
             shouldRenderByError(false, name, isValid, error, fieldState);
         }
     };
@@ -1514,17 +1821,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)
@@ -1547,7 +1862,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,
@@ -1578,14 +1896,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() }),
+        });
         _proxyFormState.isValid && _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
@@ -1594,17 +1920,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);
@@ -1621,12 +1952,15 @@ function createFormControl(props = {}) {
                         return;
                     }
                     set(_fields, name, {
-                        _f: Object.assign(Object.assign({}, field._f), (radioOrCheckbox
-                            ? {
-                                refs: refs.concat(fieldRef).filter(live),
-                                ref: { type: fieldRef.type, name },
-                            }
-                            : { ref: fieldRef })),
+                        _f: {
+                            ...field._f,
+                            ...(radioOrCheckbox
+                                ? {
+                                    refs: [...refs.filter(live), fieldRef],
+                                    ref: { type: fieldRef.type, name },
+                                }
+                                : { ref: fieldRef }),
+                        },
                     });
                     updateValidAndValue(name, false, undefined, fieldRef);
                 }
@@ -1639,7 +1973,8 @@ function createFormControl(props = {}) {
                         !(isNameInFieldArray(_names.array, name) && _stateFlags.action) &&
                         _names.unMount.add(name);
                 }
-            } });
+            },
+        };
     };
     const handleSubmit = (onValid, onInvalid) => async (e) => {
         if (e) {
@@ -1647,9 +1982,7 @@ function createFormControl(props = {}) {
             e.persist && e.persist();
         }
         let hasNoPromiseError = true;
-        let fieldValues = _options.shouldUnregister
-            ? cloneObject(_formValues)
-            : Object.assign({}, _formValues);
+        let fieldValues = cloneObject(_formValues);
         _subjects.state.next({
             isSubmitting: true,
         });
@@ -1671,7 +2004,9 @@ function createFormControl(props = {}) {
                 await onValid(fieldValues, e);
             }
             else {
-                onInvalid && (await onInvalid(_formState.errors, e));
+                if (onInvalid) {
+                    await onInvalid({ ..._formState.errors }, e);
+                }
                 _options.shouldFocusError &&
                     focusFieldBy(_fields, (key) => get(_formState.errors, key), _names.mount);
             }
@@ -1713,7 +2048,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 = {}) => {
@@ -1726,22 +2061,6 @@ function createFormControl(props = {}) {
             _defaultValues = updatedValues;
         }
         if (!keepStateOptions.keepValues) {
-            if (isWeb && isUndefined(formValues)) {
-                for (const name of _names.mount) {
-                    const field = get(_fields, name);
-                    if (field && field._f) {
-                        const fieldReference = Array.isArray(field._f.refs)
-                            ? field._f.refs[0]
-                            : field._f.ref;
-                        try {
-                            isHTMLElement(fieldReference) &&
-                                fieldReference.closest('form').reset();
-                            break;
-                        }
-                        catch (_a) { }
-                    }
-                }
-            }
             _formValues = props.shouldUnregister
                 ? keepStateOptions.keepDefaultValues
                     ? cloneObject(_defaultValues)
@@ -1780,7 +2099,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
@@ -1792,9 +2114,10 @@ function createFormControl(props = {}) {
             isSubmitSuccessful: false,
         });
     };
-    const setFocus = (name) => {
+    const setFocus = (name, options = {}) => {
         const field = get(_fields, name)._f;
-        (field.ref.focus ? field.ref : field.refs[0]).focus();
+        const fieldRef = field.refs ? field.refs[0] : field.ref;
+        options.shouldSelect ? fieldRef.select() : fieldRef.focus();
     };
     return {
         control: {
@@ -1841,7 +2164,10 @@ function createFormControl(props = {}) {
                 return _options;
             },
             set _options(value) {
-                _options = Object.assign(Object.assign({}, _options), value);
+                _options = {
+                    ..._options,
+                    ...value,
+                };
             },
         },
         trigger,
@@ -1860,6 +2186,35 @@ function createFormControl(props = {}) {
     };
 }
 
+/**
+ * Custom hook to mange the entire form.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/api/useform) • [Demo](https://codesandbox.io/s/react-hook-form-get-started-ts-5ksmm) • [Video](https://www.youtube.com/watch?v=RkXv4AXXC_4)
+ *
+ * @param props - form configuration and validation parameters.
+ *
+ * @returns methods - individual functions to manage the form state. {@link UseFormReturn}
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { register, handleSubmit, watch, formState: { errors } } = useForm();
+ *   const onSubmit = data => console.log(data);
+ *
+ *   console.log(watch("example"));
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit(onSubmit)}>
+ *       <input defaultValue="test" {...register("example")} />
+ *       <input {...register("exampleRequired", { required: true })} />
+ *       {errors.exampleRequired && <span>This field is required</span>}
+ *       <input type="submit" />
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
 function useForm(props = {}) {
     const _formControl = React.useRef();
     const [formState, updateFormState] = React.useState({
@@ -1878,13 +2233,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({