react-hook-form 7.80.0 → 7.82.0

package/dist/index.esm.mjs

@@ -602,301 +602,77 @@ function useController(props) {
  */
 const Controller = (props) => props.render(useController(props));
 
-const flatten = (obj) => {
-    const output = {};
-    for (const key of Object.keys(obj)) {
-        if (isObjectType(obj[key]) && obj[key] !== null) {
-            const nested = flatten(obj[key]);
-            for (const nestedKey of Object.keys(nested)) {
-                output[`${key}.${nestedKey}`] = nested[nestedKey];
-            }
-        }
-        else {
-            output[key] = obj[key];
-        }
+var generateId = () => {
+    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+        return crypto.randomUUID();
     }
-    return output;
+    const d = typeof performance === 'undefined' ? Date.now() : performance.now() * 1000;
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+        const r = ((Math.random() * 16 + d) % 16) | 0;
+        return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);
+    });
 };
 
-const HookFormContext = React.createContext(null);
-HookFormContext.displayName = 'HookFormContext';
-/**
- * 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/docs/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);
-/**
- * A provider component that propagates the `useForm` methods to all children components via [React Context](https://react.dev/reference/react/useContext) API. To be used with {@link useFormContext}.
- *
- * @remarks
- * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
- *
- * @param props - 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 FormProvider = ({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, }) => {
-    const memoizedValue = React.useMemo(() => ({
-        watch,
-        getValues,
-        getFieldState,
-        setError,
-        clearErrors,
-        setValue,
-        setValues,
-        trigger,
-        formState,
-        resetField,
-        reset,
-        handleSubmit,
-        unregister,
-        control,
-        register,
-        setFocus,
-        subscribe,
-    }), [
-        clearErrors,
-        control,
-        formState,
-        getFieldState,
-        getValues,
-        handleSubmit,
-        register,
-        reset,
-        resetField,
-        setError,
-        setFocus,
-        setValue,
-        setValues,
-        subscribe,
-        trigger,
-        unregister,
-        watch,
-    ]);
-    return (React.createElement(HookFormContext.Provider, { value: memoizedValue },
-        React.createElement(HookFormControlContext.Provider, { value: memoizedValue.control }, children)));
+var getFocusFieldName = (name, index, options = {}) => options.shouldFocus || isUndefined(options.shouldFocus)
+    ? options.focusName ||
+        `${name}.${isUndefined(options.focusIndex) ? index : options.focusIndex}.`
+    : '';
+
+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 isWatched = (name, _names, isBlurEvent) => {
+    if (isBlurEvent)
+        return false;
+    if (_names.watchAll || _names.watch.has(name))
+        return true;
+    for (const watchName of _names.watch) {
+        if (name.startsWith(watchName) && name.charAt(watchName.length) === '.')
+            return true;
+    }
+    return false;
 };
 
-const POST_REQUEST = 'post';
-/**
- * Form component to manage submission.
- *
- * @param props - to setup submission detail. {@link FormProps}
- *
- * @returns form component or headless render prop.
- *
- * @example
- * ```tsx
- * function App() {
- *   const { control, formState: { errors } } = useForm();
- *
- *   return (
- *     <Form action="/api" control={control}>
- *       <input {...register("name")} />
- *       <p>{errors?.root?.server && 'Server error'}</p>
- *       <button>Submit</button>
- *     </Form>
- *   );
- * }
- * ```
- */
-function Form(props) {
-    const methods = useFormContext();
-    const [mounted, setMounted] = React.useState(false);
-    const { control = methods.control, onSubmit, children, action, method = POST_REQUEST, headers, encType, onError, render, onSuccess, validateStatus, ...rest } = props;
-    const submit = React.useCallback(async (event) => {
-        let hasError = false;
-        let type = '';
-        await control.handleSubmit(async (data) => {
-            const formData = new FormData();
-            let formDataJson = '';
-            try {
-                formDataJson = JSON.stringify(data);
-            }
-            catch (_a) { }
-            const flattenFormValues = flatten(data);
-            for (const key in flattenFormValues) {
-                formData.append(key, flattenFormValues[key]);
-            }
-            if (onSubmit) {
-                await onSubmit({
-                    data,
-                    event,
-                    method,
-                    formData,
-                    formDataJson,
-                });
-            }
-            if (action) {
-                try {
-                    const shouldStringifySubmissionData = [
-                        headers && headers['Content-Type'],
-                        encType,
-                    ].some((value) => value && value.includes('json'));
-                    const response = await fetch(String(action), {
-                        method,
-                        headers: {
-                            ...headers,
-                            ...(encType && encType !== 'multipart/form-data'
-                                ? { 'Content-Type': encType }
-                                : {}),
-                        },
-                        body: shouldStringifySubmissionData ? formDataJson : formData,
-                    });
-                    if (response &&
-                        (validateStatus
-                            ? !validateStatus(response.status)
-                            : response.status < 200 || response.status >= 300)) {
-                        hasError = true;
-                        onError && onError({ response });
-                        type = String(response.status);
-                    }
-                    else {
-                        onSuccess && onSuccess({ response });
+const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
+    for (const key of fieldsNames || Object.keys(fields)) {
+        const field = get(fields, key);
+        if (field) {
+            const { _f, ...currentField } = field;
+            if (_f) {
+                if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {
+                    return true;
+                }
+                else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {
+                    return true;
+                }
+                else {
+                    if (iterateFieldsByAction(currentField, action)) {
+                        break;
                     }
                 }
-                catch (error) {
-                    hasError = true;
-                    onError && onError({ error });
+            }
+            else if (isObject(currentField)) {
+                if (iterateFieldsByAction(currentField, action)) {
+                    break;
                 }
             }
-        })(event);
-        if (hasError && control) {
-            control._subjects.state.next({
-                isSubmitSuccessful: false,
-            });
-            control.setError('root.server', {
-                type,
-            });
         }
-    }, [
-        control,
-        onSubmit,
-        method,
-        action,
-        headers,
-        encType,
-        validateStatus,
-        onError,
-        onSuccess,
-    ]);
-    React.useEffect(() => {
-        setMounted(true);
-    }, []);
-    return render ? (React.createElement(React.Fragment, null, render({
-        submit,
-    }))) : (React.createElement("form", { noValidate: mounted, action: action, method: method, encType: encType, onSubmit: submit, ...rest }, children));
-}
-
-const FormStateSubscribe = ({ control, disabled, exact, name, render, }) => render(useFormState({ control, name, disabled, exact }));
-
-var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
-    ? {
-        ...errors[name],
-        types: {
-            ...(errors[name] && errors[name].types ? errors[name].types : {}),
-            [type]: message || true,
-        },
     }
-    : {};
-
-var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
-
-var convertToArrayPayload = (value) => (Array.isArray(value) ? value : [value]);
-
-var createSubject = () => {
-    let _observers = [];
-    const next = (value) => {
-        for (const observer of _observers) {
-            observer.next && observer.next(value);
-        }
-    };
-    const subscribe = (observer) => {
-        _observers.push(observer);
-        return {
-            unsubscribe: () => {
-                _observers = _observers.filter((o) => o !== observer);
-            },
-        };
-    };
-    const unsubscribe = () => {
-        _observers = [];
-    };
-    return {
-        get observers() {
-            return _observers;
-        },
-        next,
-        subscribe,
-        unsubscribe,
-    };
+    return;
 };
 
-function extractFormValues(fieldsState, formValues) {
-    const values = {};
-    for (const key in fieldsState) {
-        if (fieldsState.hasOwnProperty(key)) {
-            const fieldState = fieldsState[key];
-            const fieldValue = formValues[key];
-            if (fieldState && isObject(fieldState) && fieldValue) {
-                const nestedFieldsState = extractFormValues(fieldState, fieldValue);
-                if (isObject(nestedFieldsState)) {
-                    values[key] = nestedFieldsState;
-                }
-            }
-            else if (fieldsState[key]) {
-                values[key] = fieldValue;
-            }
-        }
-    }
-    return values;
-}
+var updateFieldArrayRootError = (errors, error, name) => {
+    const existingErrors = get(errors, name);
+    const fieldArrayErrors = Array.isArray(existingErrors) ? existingErrors : [];
+    set(fieldArrayErrors, ROOT_ERROR_TYPE, error[name]);
+    set(errors, name, fieldArrayErrors);
+    return errors;
+};
 
 var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
 
@@ -911,128 +687,19 @@ var isHTMLElement = (value) => {
         (owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement));
 };
 
-var isMultipleSelect = (element) => element.type === `select-multiple`;
-
 var isRadioInput = (element) => element.type === 'radio';
 
-var isRadioOrCheckbox = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
-
-var live = (ref) => isHTMLElement(ref) && ref.isConnected;
-
-function baseGet(object, updatePath) {
-    const length = updatePath.slice(0, -1).length;
-    let index = 0;
-    while (index < length) {
-        if (isNullOrUndefined(object)) {
-            object = undefined;
-            break;
-        }
-        object = object[updatePath[index]];
-        index++;
-    }
-    return object;
-}
-function isEmptyArray(obj) {
-    for (const key in obj) {
-        if (obj.hasOwnProperty(key) && !isUndefined(obj[key])) {
-            return false;
-        }
-    }
-    return true;
-}
-function unset(object, path) {
-    if (isString(path) && Object.prototype.hasOwnProperty.call(object, path)) {
-        delete object[path];
-        return object;
-    }
-    const paths = Array.isArray(path)
-        ? path
-        : isKey(path)
-            ? [path]
-            : stringToPath(path);
-    const childObject = paths.length === 1 ? object : baseGet(object, paths);
-    const index = paths.length - 1;
-    const key = paths[index];
-    if (childObject) {
-        delete childObject[key];
-    }
-    if (index !== 0 &&
-        ((isObject(childObject) && isEmptyObject(childObject)) ||
-            (Array.isArray(childObject) && isEmptyArray(childObject)))) {
-        unset(object, paths.slice(0, -1));
-    }
-    return object;
-}
-
-var objectHasFunction = (data) => {
-    for (const key in data) {
-        if (isFunction(data[key])) {
-            return true;
-        }
-    }
-    return false;
-};
+var isRegex = (value) => value instanceof RegExp;
 
-function isTraversable(value) {
-    return Array.isArray(value) || (isObject(value) && !objectHasFunction(value));
-}
-function markFieldsDirty(data, fields = {}) {
-    for (const key in data) {
-        const value = data[key];
-        if (isTraversable(value)) {
-            fields[key] = Array.isArray(value) ? [] : {};
-            markFieldsDirty(value, fields[key]);
-        }
-        else if (!isUndefined(value)) {
-            fields[key] = true;
-        }
-    }
-    return fields;
-}
-function pruneDirtyFields(value) {
-    if (value === false) {
-        return undefined;
-    }
-    if (value === true) {
-        return true;
-    }
-    if (Array.isArray(value)) {
-        const result = value.map((value) => pruneDirtyFields(value));
-        return (result.some((value) => value !== undefined) ? result : undefined);
-    }
-    if (isObject(value)) {
-        const result = {};
-        for (const key in value) {
-            const pruned = pruneDirtyFields(value[key]);
-            if (!isUndefined(pruned)) {
-                result[key] = pruned;
-            }
-        }
-        return (Object.keys(result).length ? result : undefined);
-    }
-    return undefined;
-}
-function getDirtyFields(data, formValues, dirtyFieldsFromValues) {
-    if (!dirtyFieldsFromValues) {
-        dirtyFieldsFromValues = markFieldsDirty(formValues);
-    }
-    for (const key in data) {
-        const value = data[key];
-        if (isTraversable(value)) {
-            if (isUndefined(formValues) || isPrimitive(dirtyFieldsFromValues[key])) {
-                dirtyFieldsFromValues[key] = markFieldsDirty(value, Array.isArray(value) ? [] : {});
-            }
-            else {
-                getDirtyFields(value, isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
-            }
-        }
-        else {
-            const formValue = formValues[key];
-            dirtyFieldsFromValues[key] = !deepEqual(value, formValue);
-        }
+var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
+    ? {
+        ...errors[name],
+        types: {
+            ...(errors[name] && errors[name].types ? errors[name].types : {}),
+            [type]: message || true,
+        },
     }
-    return pruneDirtyFields(dirtyFieldsFromValues) || {};
-}
+    : {};
 
 const defaultResult = {
     value: false,
@@ -1059,20 +726,6 @@ var getCheckboxValue = (options) => {
     return defaultResult;
 };
 
-var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isUndefined(value)
-    ? value
-    : valueAsNumber
-        ? value === ''
-            ? NaN
-            : value
-                ? +value
-                : value
-        : valueAsDate && isString(value)
-            ? new Date(value)
-            : setValueAs
-                ? setValueAs(value)
-                : value;
-
 const defaultReturn = {
     isValid: false,
     value: null,
@@ -1086,221 +739,23 @@ var getRadioValue = (options) => Array.isArray(options)
         : previous, defaultReturn)
     : defaultReturn;
 
-function getFieldValue(_f) {
-    const ref = _f.ref;
-    if (isFileInput(ref)) {
-        return ref.files;
-    }
-    if (isRadioInput(ref)) {
-        return getRadioValue(_f.refs).value;
-    }
-    if (isMultipleSelect(ref)) {
-        return [...ref.selectedOptions].map(({ value }) => value);
-    }
-    if (isCheckBoxInput(ref)) {
-        return getCheckboxValue(_f.refs).value;
+function getValidateError(result, ref, type = 'validate') {
+    if (isString(result) ||
+        (Array.isArray(result) && result.every(isString)) ||
+        (isBoolean(result) && !result)) {
+        return {
+            type,
+            message: isString(result) ? result : '',
+            ref,
+        };
     }
-    return getFieldValueAs(isUndefined(ref.value) ? _f.ref.value : ref.value, _f);
 }
 
-var getResolverOptions = (fieldsNames, _fields, criteriaMode, shouldUseNativeValidation) => {
-    const fields = {};
-    for (const name of fieldsNames) {
-        const field = get(_fields, name);
-        field && set(fields, name, field._f);
-    }
-    return {
-        criteriaMode,
-        names: [...fieldsNames],
-        fields,
-        shouldUseNativeValidation,
-    };
-};
-
-var isRegex = (value) => value instanceof RegExp;
-
-var getRuleValue = (rule) => isUndefined(rule)
-    ? rule
-    : isRegex(rule)
-        ? rule.source
-        : isObject(rule)
-            ? isRegex(rule.value)
-                ? rule.value.source
-                : rule.value
-            : rule;
-
-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,
-});
-
-const ASYNC_FUNCTION = 'AsyncFunction';
-var hasPromiseValidation = (fieldReference) => {
-    if (!fieldReference || !fieldReference.validate)
-        return false;
-    if (isFunction(fieldReference.validate)) {
-        return fieldReference.validate.constructor.name === ASYNC_FUNCTION;
-    }
-    if (isObject(fieldReference.validate)) {
-        for (const key in fieldReference.validate) {
-            if (fieldReference.validate[key].constructor
-                .name === ASYNC_FUNCTION) {
-                return true;
-            }
-        }
-    }
-    return false;
-};
-
-var hasValidation = (options) => options.mount &&
-    (options.required ||
-        options.min ||
-        options.max ||
-        options.maxLength ||
-        options.minLength ||
-        options.pattern ||
-        options.validate);
-
-var isWatched = (name, _names, isBlurEvent) => {
-    if (isBlurEvent)
-        return false;
-    if (_names.watchAll || _names.watch.has(name))
-        return true;
-    for (const watchName of _names.watch) {
-        if (name.startsWith(watchName) && name.charAt(watchName.length) === '.')
-            return true;
-    }
-    return false;
-};
-
-const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
-    for (const key of fieldsNames || Object.keys(fields)) {
-        const field = get(fields, key);
-        if (field) {
-            const { _f, ...currentField } = field;
-            if (_f) {
-                if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {
-                    return true;
-                }
-                else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {
-                    return true;
-                }
-                else {
-                    if (iterateFieldsByAction(currentField, action)) {
-                        break;
-                    }
-                }
-            }
-            else if (isObject(currentField)) {
-                if (iterateFieldsByAction(currentField, action)) {
-                    break;
-                }
-            }
-        }
-    }
-    return;
-};
-
-function schemaErrorLookup(errors, _fields, name) {
-    const error = get(errors, name);
-    if (error || isKey(name)) {
-        return {
-            error,
-            name,
-        };
-    }
-    const names = name.split('.');
-    while (names.length) {
-        const fieldName = names.join('.');
-        const field = get(_fields, fieldName);
-        const foundError = get(errors, fieldName);
-        if (field && !Array.isArray(field) && name !== fieldName) {
-            return { name };
-        }
-        if (foundError && foundError.type) {
-            return {
-                name: fieldName,
-                error: foundError,
-            };
-        }
-        if (foundError && foundError.root && foundError.root.type) {
-            return {
-                name: `${fieldName}.root`,
-                error: foundError.root,
-            };
-        }
-        names.pop();
-    }
-    return {
-        name,
-    };
-}
-
-var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {
-    updateFormState(formStateData);
-    const { name, ...formState } = formStateData;
-    const keys = Object.keys(formState);
-    return (!keys.length ||
-        (isRoot && keys.length >= Object.keys(_proxyFormState).length) ||
-        keys.find((key) => _proxyFormState[key] ===
-            (!isRoot || VALIDATION_MODE.all)));
-};
-
-var shouldSubscribeByName = (name, signalName, exact) => !name ||
-    !signalName ||
-    name === signalName ||
-    convertToArrayPayload(name).some((currentName) => currentName &&
-        (exact
-            ? currentName === signalName
-            : currentName.startsWith(signalName) ||
-                signalName.startsWith(currentName)));
-
-var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode) => {
-    if (mode.isOnAll) {
-        return false;
-    }
-    else if (!isSubmitted && mode.isOnTouch) {
-        return !(isTouched || isBlurEvent);
-    }
-    else if (isSubmitted ? reValidateMode.isOnBlur : mode.isOnBlur) {
-        return !isBlurEvent;
-    }
-    else if (isSubmitted ? reValidateMode.isOnChange : mode.isOnChange) {
-        return isBlurEvent;
-    }
-    return true;
-};
-
-var unsetEmptyArray = (ref, name) => !compact(get(ref, name)).length && unset(ref, name);
-
-var updateFieldArrayRootError = (errors, error, name) => {
-    const existingErrors = get(errors, name);
-    const fieldArrayErrors = Array.isArray(existingErrors) ? existingErrors : [];
-    set(fieldArrayErrors, ROOT_ERROR_TYPE, error[name]);
-    set(errors, name, fieldArrayErrors);
-    return errors;
-};
-
-function getValidateError(result, ref, type = 'validate') {
-    if (isString(result) ||
-        (Array.isArray(result) && result.every(isString)) ||
-        (isBoolean(result) && !result)) {
-        return {
-            type,
-            message: isString(result) ? result : '',
-            ref,
-        };
-    }
-}
-
-var getValueAndMessage = (validationData) => isObject(validationData) && !isRegex(validationData)
-    ? validationData
-    : {
-        value: validationData,
-        message: '',
+var getValueAndMessage = (validationData) => isObject(validationData) && !isRegex(validationData)
+    ? validationData
+    : {
+        value: validationData,
+        message: '',
     };
 
 var validateField = async (field, disabledFieldNames, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
@@ -1488,1735 +943,2371 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
     return error;
 };
 
-const defaultOptions = {
-    mode: VALIDATION_MODE.onSubmit,
-    reValidateMode: VALIDATION_MODE.onChange,
-    shouldFocusError: true,
+var convertToArrayPayload = (value) => (Array.isArray(value) ? value : [value]);
+
+var appendAt = (data, value) => [
+    ...data,
+    ...convertToArrayPayload(value),
+];
+
+var fillEmptyArray = (value) => Array.isArray(value) ? value.map(() => undefined) : undefined;
+
+function insert(data, index, value) {
+    return [
+        ...data.slice(0, index),
+        ...convertToArrayPayload(value),
+        ...data.slice(index),
+    ];
+}
+
+var moveArrayAt = (data, from, to) => {
+    if (!Array.isArray(data)) {
+        return [];
+    }
+    if (isUndefined(data[to])) {
+        data[to] = undefined;
+    }
+    data.splice(to, 0, data.splice(from, 1)[0]);
+    return data;
 };
-const FORM_ERROR_TYPE = 'form';
-const DEFAULT_FORM_STATE = {
-    submitCount: 0,
-    isDirty: false,
-    isReady: false,
-    isValidating: false,
-    isSubmitted: false,
-    isSubmitting: false,
-    isSubmitSuccessful: false,
-    isValid: false,
-    touchedFields: {},
-    dirtyFields: {},
-    validatingFields: {},
+
+var prependAt = (data, value) => [
+    ...convertToArrayPayload(value),
+    ...convertToArrayPayload(data),
+];
+
+var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+
+function removeAtIndexes(data, indexes) {
+    let i = 0;
+    const temp = [...data];
+    for (const index of indexes) {
+        temp.splice(index - i, 1);
+        i++;
+    }
+    return compact(temp).length ? temp : [];
+}
+var removeArrayAt = (data, index) => isUndefined(index)
+    ? []
+    : removeAtIndexes(data, convertToArrayPayload(index).sort((a, b) => a - b));
+
+var swapArrayAt = (data, indexA, indexB) => {
+    [data[indexA], data[indexB]] = [data[indexB], data[indexA]];
 };
-function createFormControl(props = {}) {
-    let _options = {
-        ...defaultOptions,
-        ...props,
-    };
-    let _formState = {
-        ...cloneObject(DEFAULT_FORM_STATE),
-        isLoading: isFunction(_options.defaultValues),
-        errors: _options.errors || {},
-        disabled: _options.disabled || false,
-    };
-    let _fields = {};
-    let _defaultValues = isObject(_options.defaultValues) || isObject(_options.values)
-        ? cloneObject(_options.defaultValues || _options.values) || {}
-        : {};
-    let _formValues = _options.shouldUnregister
-        ? {}
-        : cloneObject(_defaultValues);
-    let _state = {
-        action: false,
-        mount: false,
-        watch: false,
-        keepIsValid: false,
-    };
-    let _names = {
-        mount: new Set(),
-        disabled: new Set(),
-        unMount: new Set(),
-        array: new Set(),
-        watch: new Set(),
-        registerName: new Set(),
-    };
-    let delayErrorCallback;
-    let timer = 0;
-    let _valuesSubscriberCount = 0;
-    let _validationModeBeforeSubmit = getValidationModes(_options.mode);
-    let _validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
-    const defaultProxyFormState = {
-        isDirty: false,
-        dirtyFields: false,
-        validatingFields: false,
-        touchedFields: false,
-        isValidating: false,
-        isValid: false,
-        errors: false,
-    };
-    const _proxyFormState = {
-        ...defaultProxyFormState,
+
+function baseGet(object, updatePath) {
+    const length = updatePath.slice(0, -1).length;
+    let index = 0;
+    while (index < length) {
+        if (isNullOrUndefined(object)) {
+            object = undefined;
+            break;
+        }
+        object = object[updatePath[index]];
+        index++;
+    }
+    return object;
+}
+function isEmptyArray(obj) {
+    for (const key in obj) {
+        if (obj.hasOwnProperty(key) && !isUndefined(obj[key])) {
+            return false;
+        }
+    }
+    return true;
+}
+function unset(object, path) {
+    if (isString(path) && Object.prototype.hasOwnProperty.call(object, path)) {
+        delete object[path];
+        return object;
+    }
+    const paths = Array.isArray(path)
+        ? path
+        : isKey(path)
+            ? [path]
+            : stringToPath(path);
+    if (paths.some((segment) => PROTOTYPE_KEYWORDS.includes(String(segment)))) {
+        return object;
+    }
+    const childObject = paths.length === 1 ? object : baseGet(object, paths);
+    const index = paths.length - 1;
+    const key = paths[index];
+    if (childObject) {
+        delete childObject[key];
+    }
+    if (index !== 0 &&
+        ((isObject(childObject) && isEmptyObject(childObject)) ||
+            (Array.isArray(childObject) && isEmptyArray(childObject)))) {
+        unset(object, paths.slice(0, -1));
+    }
+    return object;
+}
+
+var updateAt = (fieldValues, index, value) => {
+    fieldValues[index] = value;
+    return fieldValues;
+};
+
+/**
+ * A custom hook that exposes convenient methods to perform operations with a list of dynamic inputs that need to be appended, updated, removed etc. • [Demo](https://codesandbox.io/s/react-hook-form-usefieldarray-ssugn) • [Video](https://youtu.be/4MrbfGSFY2A)
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/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 formControl = useFormControlContext();
+    const { control = formControl, name, keyName = 'id', disabled, shouldUnregister, rules, } = props;
+    const [fields, setFields] = React.useState(control._getFieldArray(name));
+    const ids = React.useRef(control._getFieldArray(name).map(generateId));
+    const _actioned = React.useRef(false);
+    if (!disabled) {
+        control._names.array.add(name);
+    }
+    React.useMemo(() => !disabled &&
+        rules &&
+        fields.length >= 0 &&
+        control.register(name, rules), [control, name, fields.length, rules, disabled]);
+    useIsomorphicLayoutEffect(() => {
+        if (disabled) {
+            return;
+        }
+        return control._subjects.array.subscribe({
+            next: ({ values, name: fieldArrayName, }) => {
+                if (fieldArrayName === name || !fieldArrayName) {
+                    const fieldValues = get(values, name);
+                    if (Array.isArray(fieldValues)) {
+                        setFields(fieldValues);
+                        ids.current = fieldValues.map(generateId);
+                    }
+                    else if (!fieldArrayName) {
+                        setFields([]);
+                        ids.current = [];
+                    }
+                }
+            },
+        }).unsubscribe;
+    }, [control, name, disabled]);
+    const updateValues = React.useCallback((updatedFieldArrayValues) => {
+        _actioned.current = true;
+        control._setFieldArray(name, updatedFieldArrayValues);
+    }, [control, name]);
+    const append = (value, options) => {
+        if (disabled) {
+            return;
+        }
+        const appendValue = convertToArrayPayload(cloneObject(value));
+        const updatedFieldArrayValues = appendAt(control._getFieldArray(name), appendValue);
+        control._names.focus = getFocusFieldName(name, updatedFieldArrayValues.length - 1, options);
+        ids.current = appendAt(ids.current, appendValue.map(generateId));
+        updateValues(updatedFieldArrayValues);
+        setFields(updatedFieldArrayValues);
+        control._setFieldArray(name, updatedFieldArrayValues, appendAt, {
+            argA: fillEmptyArray(value),
+        });
     };
-    let _proxySubscribeFormState = {
-        ..._proxyFormState,
+    const prepend = (value, options) => {
+        if (disabled) {
+            return;
+        }
+        const prependValue = convertToArrayPayload(cloneObject(value));
+        const updatedFieldArrayValues = prependAt(control._getFieldArray(name), prependValue);
+        control._names.focus = getFocusFieldName(name, 0, options);
+        ids.current = prependAt(ids.current, prependValue.map(generateId));
+        updateValues(updatedFieldArrayValues);
+        setFields(updatedFieldArrayValues);
+        control._setFieldArray(name, updatedFieldArrayValues, prependAt, {
+            argA: fillEmptyArray(value),
+        });
     };
-    const _subjects = {
-        array: createSubject(),
-        state: createSubject(),
+    const remove = (index) => {
+        if (disabled) {
+            return;
+        }
+        const updatedFieldArrayValues = removeArrayAt(control._getFieldArray(name), index);
+        ids.current = removeArrayAt(ids.current, index);
+        updateValues(updatedFieldArrayValues);
+        setFields(updatedFieldArrayValues);
+        !Array.isArray(get(control._fields, name)) &&
+            set(control._fields, name, undefined);
+        control._setFieldArray(name, updatedFieldArrayValues, removeArrayAt, {
+            argA: index,
+        });
     };
-    const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
-    const debounce = (callback) => (wait) => {
-        clearTimeout(timer);
-        timer = setTimeout(callback, wait);
+    const insert$1 = (index, value, options) => {
+        if (disabled) {
+            return;
+        }
+        const insertValue = convertToArrayPayload(cloneObject(value));
+        const updatedFieldArrayValues = insert(control._getFieldArray(name), index, insertValue);
+        control._names.focus = getFocusFieldName(name, index, options);
+        ids.current = insert(ids.current, index, insertValue.map(generateId));
+        updateValues(updatedFieldArrayValues);
+        setFields(updatedFieldArrayValues);
+        control._setFieldArray(name, updatedFieldArrayValues, insert, {
+            argA: index,
+            argB: fillEmptyArray(value),
+        });
     };
-    const _setValid = async (shouldUpdateValid) => {
-        if (_state.keepIsValid) {
+    const swap = (indexA, indexB) => {
+        if (disabled) {
             return;
         }
-        if (!_options.disabled &&
-            (_proxyFormState.isValid ||
-                _proxySubscribeFormState.isValid ||
-                shouldUpdateValid)) {
-            let isValid;
-            if (_options.resolver) {
-                isValid = isEmptyObject((await _runSchema()).errors);
-                _updateIsValidating();
-            }
-            else {
-                isValid = await executeBuiltInValidation({
-                    fields: _fields,
-                    onlyCheckValid: true,
-                    eventType: EVENTS.VALID,
-                });
-            }
-            if (isValid !== _formState.isValid) {
-                _subjects.state.next({
-                    isValid,
-                });
-            }
+        const updatedFieldArrayValues = control._getFieldArray(name);
+        swapArrayAt(updatedFieldArrayValues, indexA, indexB);
+        swapArrayAt(ids.current, indexA, indexB);
+        updateValues(updatedFieldArrayValues);
+        setFields(updatedFieldArrayValues);
+        control._setFieldArray(name, updatedFieldArrayValues, swapArrayAt, {
+            argA: indexA,
+            argB: indexB,
+        }, false);
+    };
+    const move = (from, to) => {
+        if (disabled) {
+            return;
         }
+        const updatedFieldArrayValues = control._getFieldArray(name);
+        moveArrayAt(updatedFieldArrayValues, from, to);
+        moveArrayAt(ids.current, from, to);
+        updateValues(updatedFieldArrayValues);
+        setFields(updatedFieldArrayValues);
+        control._setFieldArray(name, updatedFieldArrayValues, moveArrayAt, {
+            argA: from,
+            argB: to,
+        }, false);
     };
-    const _updateIsValidating = (names, isValidating) => {
-        if (!_options.disabled &&
-            (_proxyFormState.isValidating ||
-                _proxyFormState.validatingFields ||
-                _proxySubscribeFormState.isValidating ||
-                _proxySubscribeFormState.validatingFields)) {
-            (names || Array.from(_names.mount)).forEach((name) => {
-                if (name) {
-                    isValidating
-                        ? set(_formState.validatingFields, name, isValidating)
-                        : unset(_formState.validatingFields, name);
-                }
-            });
-            _subjects.state.next({
-                validatingFields: _formState.validatingFields,
-                isValidating: !isEmptyObject(_formState.validatingFields),
-            });
+    const update = (index, value) => {
+        if (disabled) {
+            return;
         }
+        const updateValue = cloneObject(value);
+        const updatedFieldArrayValues = updateAt(control._getFieldArray(name), index, updateValue);
+        ids.current = [...updatedFieldArrayValues].map((item, i) => !item || i === index ? generateId() : ids.current[i]);
+        updateValues(updatedFieldArrayValues);
+        setFields([...updatedFieldArrayValues]);
+        control._setFieldArray(name, updatedFieldArrayValues, updateAt, {
+            argA: index,
+            argB: updateValue,
+        }, true, false);
     };
-    const _updateDirtyFields = () => {
-        _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
-    };
-    const _setFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
-        if (args && method && !_options.disabled) {
-            _state.action = true;
-            if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
-                const fieldValues = method(get(_fields, name), args.argA, args.argB);
-                shouldSetValues && set(_fields, name, fieldValues);
-            }
-            if (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 ||
-                _proxySubscribeFormState.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);
-            }
-            if (_proxyFormState.dirtyFields || _proxySubscribeFormState.dirtyFields) {
-                _updateDirtyFields();
-            }
-            _subjects.state.next({
-                name,
-                isDirty: _getDirty(name, values),
-                dirtyFields: _formState.dirtyFields,
-                errors: _formState.errors,
-                isValid: _formState.isValid,
-            });
-        }
-        else {
-            set(_formValues, name, values);
+    const replace = (value) => {
+        if (disabled) {
+            return;
         }
+        const updatedFieldArrayValues = convertToArrayPayload(cloneObject(value));
+        ids.current = updatedFieldArrayValues.map(generateId);
+        updateValues([...updatedFieldArrayValues]);
+        setFields([...updatedFieldArrayValues]);
+        control._setFieldArray(name, [...updatedFieldArrayValues], (data) => data, {}, true, false);
     };
-    const updateErrors = (name, error) => {
-        set(_formState.errors, name, error);
-        _formState.errors = { ..._formState.errors };
-        _subjects.state.next({
-            errors: _formState.errors,
-        });
-    };
-    const _setErrors = (errors) => {
-        _formState.errors = errors;
-        _subjects.state.next({
-            errors: _formState.errors,
-            isValid: false,
-        });
-    };
-    const hasExplicitNullIntermediate = (name) => {
-        const segments = isKey(name) ? [name] : stringToPath(name);
-        let formValues = _formValues;
-        let defaultValues = _defaultValues;
-        for (let i = 0; i < segments.length - 1; i++) {
-            const key = segments[i];
-            formValues = isNullOrUndefined(formValues) ? formValues : formValues[key];
-            defaultValues = isNullOrUndefined(defaultValues)
-                ? defaultValues
-                : defaultValues[key];
-            if (formValues === null && defaultValues !== null) {
-                return true;
-            }
+    React.useEffect(() => {
+        if (disabled) {
+            return;
         }
-        return false;
-    };
-    const updateValidAndValue = (name, shouldSkipSetValueAs, value, ref) => {
-        const field = get(_fields, name);
-        if (field) {
-            if (hasExplicitNullIntermediate(name)) {
-                return;
-            }
-            const wasUnsetInFormValues = isUndefined(get(_formValues, name));
-            const defaultValue = get(_formValues, name, isUndefined(value) ? get(_defaultValues, name) : value);
-            isUndefined(defaultValue) ||
-                (ref && ref.defaultChecked) ||
-                shouldSkipSetValueAs
-                ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f))
-                : setFieldValue(name, defaultValue);
-            if (_state.mount && !_state.action) {
-                _setValid();
-                if (wasUnsetInFormValues &&
-                    _formState.isDirty &&
-                    (_proxyFormState.isDirty || _proxySubscribeFormState.isDirty)) {
-                    const isDirty = _getDirty();
-                    if (!isDirty) {
-                        _formState.isDirty = false;
-                        _subjects.state.next({ ..._formState });
+        control._state.action = false;
+        isWatched(name, control._names) &&
+            control._subjects.state.next({
+                ...control._formState,
+            });
+        const validationModes = getValidationModes(control._options.mode);
+        if (_actioned.current &&
+            (!validationModes.isOnSubmit || control._formState.isSubmitted) &&
+            !getValidationModes(control._options.reValidateMode).isOnSubmit &&
+            !validationModes.isOnBlur) {
+            if (control._options.resolver) {
+                control._runSchema([name]).then((result) => {
+                    var _a, _b;
+                    control._updateIsValidating([name]);
+                    const error = get(result.errors, name);
+                    const existingError = get(control._formState.errors, name);
+                    const existingErrorType = existingError && (existingError.type || ((_a = existingError.root) === null || _a === void 0 ? void 0 : _a.type));
+                    const existingErrorMessage = existingError &&
+                        (existingError.message || ((_b = existingError.root) === null || _b === void 0 ? void 0 : _b.message));
+                    if (existingError
+                        ? (!error && existingErrorType) ||
+                            (error &&
+                                (existingErrorType !== error.type ||
+                                    existingErrorMessage !== error.message))
+                        : error && error.type) {
+                        if (error) {
+                            isObject(error) &&
+                                !Object.keys(error).some((key) => !Number.isNaN(+key))
+                                ? updateFieldArrayRootError(control._formState.errors, { [name]: error }, name)
+                                : set(control._formState.errors, name, error);
+                        }
+                        else {
+                            unset(control._formState.errors, name);
+                        }
+                        control._subjects.state.next({
+                            errors: control._formState.errors,
+                        });
                     }
-                }
-                if (props.shouldUnregister &&
-                    wasUnsetInFormValues &&
-                    !isUndefined(get(_formValues, name)) &&
-                    isWatched(name, _names)) {
-                    _state.watch = true;
+                });
+            }
+            else {
+                const field = get(control._fields, name);
+                if (field &&
+                    field._f &&
+                    !(getValidationModes(control._options.reValidateMode).isOnSubmit &&
+                        getValidationModes(control._options.mode).isOnSubmit)) {
+                    validateField(field, control._names.disabled, control._formValues, control._options.criteriaMode === VALIDATION_MODE.all, control._options.shouldUseNativeValidation, true).then((error) => !isEmptyObject(error) &&
+                        control._subjects.state.next({
+                            errors: updateFieldArrayRootError(control._formState.errors, error, name),
+                        }));
                 }
             }
         }
-    };
-    const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
-        let shouldUpdateField = false;
-        let isPreviousDirty = false;
-        const output = {
-            name,
-        };
-        if (!_options.disabled) {
-            if (!isBlurEvent || shouldDirty) {
-                const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
-                if (_proxyFormState.isDirty || _proxySubscribeFormState.isDirty) {
-                    isPreviousDirty = _formState.isDirty;
-                    _formState.isDirty = output.isDirty =
-                        !isCurrentFieldPristine || _getDirty();
-                    shouldUpdateField = isPreviousDirty !== output.isDirty;
-                }
-                isPreviousDirty = !!get(_formState.dirtyFields, name);
-                if (isCurrentFieldPristine !== _formState.isDirty) {
-                    _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
-                }
-                else {
-                    isCurrentFieldPristine
-                        ? unset(_formState.dirtyFields, name)
-                        : set(_formState.dirtyFields, name, true);
+        // External updates that change `fields` (e.g. reset() or setValue() on
+        // the array) already notify subscribers with the up-to-date values
+        // themselves, so only re-broadcast here for genuine array method calls.
+        _actioned.current &&
+            control._subjects.state.next({
+                name,
+                values: cloneObject(control._formValues),
+            });
+        control._names.focus &&
+            iterateFieldsByAction(control._fields, (ref, key) => {
+                if (control._names.focus &&
+                    key.startsWith(control._names.focus) &&
+                    ref.focus) {
+                    ref.focus();
+                    return 1;
                 }
-                output.dirtyFields = _formState.dirtyFields;
-                shouldUpdateField =
-                    shouldUpdateField ||
-                        ((_proxyFormState.dirtyFields ||
-                            _proxySubscribeFormState.dirtyFields) &&
-                            isPreviousDirty !== !isCurrentFieldPristine);
+                return;
+            });
+        control._names.focus = '';
+        control._setValid();
+        _actioned.current = false;
+    }, [fields, name, control, disabled]);
+    React.useEffect(() => {
+        if (!disabled) {
+            !get(control._formValues, name) && control._setFieldArray(name);
+        }
+        return () => {
+            if (disabled) {
+                return;
             }
-            if (isBlurEvent) {
-                const isPreviousFieldTouched = get(_formState.touchedFields, name);
-                if (!isPreviousFieldTouched) {
-                    set(_formState.touchedFields, name, isBlurEvent);
-                    output.touchedFields = _formState.touchedFields;
-                    shouldUpdateField =
-                        shouldUpdateField ||
-                            ((_proxyFormState.touchedFields ||
-                                _proxySubscribeFormState.touchedFields) &&
-                                isPreviousFieldTouched !== isBlurEvent);
+            const shouldKeepFieldArrayValues = !(control._options.shouldUnregister || shouldUnregister);
+            const updateMounted = (name, value) => {
+                const field = get(control._fields, name);
+                if (field && field._f) {
+                    field._f.mount = value;
                 }
-            }
-            shouldUpdateField && shouldRender && _subjects.state.next(output);
-        }
-        return shouldUpdateField ? output : {};
-    };
-    const shouldRenderByError = (name, isValid, error, fieldState) => {
-        const previousFieldError = get(_formState.errors, name);
-        const shouldUpdateValid = (_proxyFormState.isValid || _proxySubscribeFormState.isValid) &&
-            isBoolean(isValid) &&
-            _formState.isValid !== isValid;
-        if (_options.delayError && error) {
-            delayErrorCallback = debounce(() => updateErrors(name, error));
-            delayErrorCallback(_options.delayError);
-        }
-        else {
-            clearTimeout(timer);
-            delayErrorCallback = null;
-            error
-                ? set(_formState.errors, name, error)
-                : unset(_formState.errors, name);
-            _formState.errors = { ..._formState.errors };
-        }
-        if ((error ? !deepEqual(previousFieldError, error) : previousFieldError) ||
-            !isEmptyObject(fieldState) ||
-            shouldUpdateValid) {
-            const updatedFormState = {
-                ...fieldState,
-                ...(shouldUpdateValid && isBoolean(isValid) ? { isValid } : {}),
-                errors: _formState.errors,
-                name,
             };
-            _formState = {
-                ..._formState,
-                ...updatedFormState,
+            if (_actioned.current && shouldKeepFieldArrayValues) {
+                control._subjects.state.next({
+                    name,
+                    values: cloneObject(control._formValues),
+                });
+            }
+            shouldKeepFieldArrayValues
+                ? updateMounted(name, false)
+                : control.unregister(name);
+        };
+    }, [name, control, keyName, shouldUnregister, disabled]);
+    return {
+        swap: React.useCallback(swap, [updateValues, name, control, disabled]),
+        move: React.useCallback(move, [updateValues, name, control, disabled]),
+        prepend: React.useCallback(prepend, [
+            updateValues,
+            name,
+            control,
+            disabled,
+        ]),
+        append: React.useCallback(append, [updateValues, name, control, disabled]),
+        remove: React.useCallback(remove, [updateValues, name, control, disabled]),
+        insert: React.useCallback(insert$1, [updateValues, name, control, disabled]),
+        update: React.useCallback(update, [updateValues, name, control, disabled]),
+        replace: React.useCallback(replace, [
+            updateValues,
+            name,
+            control,
+            disabled,
+        ]),
+        fields: React.useMemo(() => fields.map((field, index) => ({
+            ...field,
+            ...(isBoolean(disabled) ? { disabled } : {}),
+            [keyName]: ids.current[index] || generateId(),
+        })), [fields, keyName, disabled]),
+    };
+}
+
+/**
+ * Component based on `useFieldArray` hook to work with controlled component.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { control, register } = useForm<FormValues>({
+ *     defaultValues: {
+ *       test: [
+ *         {
+ *           value: '',
+ *         },
+ *       ],
+ *     },
+ *   });
+ *
+ *   return (
+ *     <form>
+ *       <FieldArray
+ *         control={control}
+ *         name="test"
+ *         render={({ fields }) =>
+ *           fields.map((field, index) => (
+ *             <input key={field.id} {...register(`test.${index}.value`)} />
+ *           ))
+ *         }
+ *       />
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+const FieldArray = (props) => props.render(useFieldArray(props));
+
+const flatten = (obj) => {
+    const output = {};
+    for (const key of Object.keys(obj)) {
+        if (isObjectType(obj[key]) &&
+            obj[key] !== null &&
+            !isDateObject(obj[key])) {
+            const nested = flatten(obj[key]);
+            for (const nestedKey of Object.keys(nested)) {
+                output[`${key}.${nestedKey}`] = nested[nestedKey];
+            }
+        }
+        else {
+            output[key] = obj[key];
+        }
+    }
+    return output;
+};
+
+const HookFormContext = React.createContext(null);
+HookFormContext.displayName = 'HookFormContext';
+/**
+ * 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/docs/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);
+/**
+ * A provider component that propagates the `useForm` methods to all children components via [React Context](https://react.dev/reference/react/useContext) API. To be used with {@link useFormContext}.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
+ *
+ * @param props - 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 FormProvider = ({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }) => {
+    const memoizedValue = React.useMemo(() => ({
+        watch,
+        getValues,
+        getFieldState,
+        setError,
+        clearErrors,
+        setValue,
+        setValues,
+        trigger,
+        formState,
+        resetField,
+        reset,
+        resetDefaultValues,
+        handleSubmit,
+        unregister,
+        control,
+        register,
+        setFocus,
+        subscribe,
+    }), [
+        clearErrors,
+        control,
+        formState,
+        getFieldState,
+        getValues,
+        handleSubmit,
+        register,
+        reset,
+        resetDefaultValues,
+        resetField,
+        setError,
+        setFocus,
+        setValue,
+        setValues,
+        subscribe,
+        trigger,
+        unregister,
+        watch,
+    ]);
+    return (React.createElement(HookFormContext.Provider, { value: memoizedValue },
+        React.createElement(HookFormControlContext.Provider, { value: memoizedValue.control }, children)));
+};
+
+const POST_REQUEST = 'post';
+/**
+ * Form component to manage submission.
+ *
+ * @param props - to setup submission detail. {@link FormProps}
+ *
+ * @returns form component or headless render prop.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { control, formState: { errors } } = useForm();
+ *
+ *   return (
+ *     <Form action="/api" control={control}>
+ *       <input {...register("name")} />
+ *       <p>{errors?.root?.server && 'Server error'}</p>
+ *       <button>Submit</button>
+ *     </Form>
+ *   );
+ * }
+ * ```
+ */
+function Form(props) {
+    const methods = useFormContext();
+    const [mounted, setMounted] = React.useState(false);
+    const { control = methods.control, onSubmit, children, action, method = POST_REQUEST, headers, encType, onError, render, onSuccess, validateStatus, ...rest } = props;
+    const submit = React.useCallback(async (event) => {
+        let hasError = false;
+        let type = '';
+        await control.handleSubmit(async (data) => {
+            const formData = new FormData();
+            let formDataJson = '';
+            try {
+                formDataJson = JSON.stringify(data);
+            }
+            catch (_a) { }
+            const flattenFormValues = flatten(data);
+            for (const key in flattenFormValues) {
+                formData.append(key, flattenFormValues[key]);
+            }
+            if (onSubmit) {
+                await onSubmit({
+                    data,
+                    event,
+                    method,
+                    formData,
+                    formDataJson,
+                });
+            }
+            if (action) {
+                try {
+                    const shouldStringifySubmissionData = [
+                        headers && headers['Content-Type'],
+                        encType,
+                    ].some((value) => value && value.includes('json'));
+                    const response = await fetch(String(action), {
+                        method,
+                        headers: {
+                            ...headers,
+                            ...(encType && encType !== 'multipart/form-data'
+                                ? { 'Content-Type': encType }
+                                : {}),
+                        },
+                        body: shouldStringifySubmissionData ? formDataJson : formData,
+                    });
+                    if (response &&
+                        (validateStatus
+                            ? !validateStatus(response.status)
+                            : response.status < 200 || response.status >= 300)) {
+                        hasError = true;
+                        onError && onError({ response });
+                        type = String(response.status);
+                    }
+                    else {
+                        onSuccess && onSuccess({ response });
+                    }
+                }
+                catch (error) {
+                    hasError = true;
+                    onError && onError({ error });
+                }
+            }
+        })(event);
+        if (hasError && control) {
+            control._subjects.state.next({
+                isSubmitSuccessful: false,
+            });
+            control.setError('root.server', {
+                type,
+            });
+        }
+    }, [
+        control,
+        onSubmit,
+        method,
+        action,
+        headers,
+        encType,
+        validateStatus,
+        onError,
+        onSuccess,
+    ]);
+    React.useEffect(() => {
+        setMounted(true);
+    }, []);
+    return render ? (React.createElement(React.Fragment, null, render({
+        submit,
+    }))) : (React.createElement("form", { noValidate: mounted, action: action, method: method, encType: encType, onSubmit: submit, ...rest }, children));
+}
+
+const FormStateSubscribe = ({ control, disabled, exact, name, render, }) => render(useFormState({ control, name, disabled, exact }));
+
+var createSubject = () => {
+    let _observers = [];
+    const next = (value) => {
+        for (const observer of _observers) {
+            observer.next && observer.next(value);
+        }
+    };
+    const subscribe = (observer) => {
+        _observers.push(observer);
+        return {
+            unsubscribe: () => {
+                _observers = _observers.filter((o) => o !== observer);
+            },
+        };
+    };
+    const unsubscribe = () => {
+        _observers = [];
+    };
+    return {
+        get observers() {
+            return _observers;
+        },
+        next,
+        subscribe,
+        unsubscribe,
+    };
+};
+
+function extractFormValues(fieldsState, formValues) {
+    const values = {};
+    for (const key in fieldsState) {
+        if (fieldsState.hasOwnProperty(key)) {
+            const fieldState = fieldsState[key];
+            const fieldValue = formValues[key];
+            if (fieldState && isObject(fieldState) && fieldValue) {
+                const nestedFieldsState = extractFormValues(fieldState, fieldValue);
+                if (isObject(nestedFieldsState)) {
+                    values[key] = nestedFieldsState;
+                }
+            }
+            else if (fieldsState[key]) {
+                values[key] = fieldValue;
+            }
+        }
+    }
+    return values;
+}
+
+var isMultipleSelect = (element) => element.type === `select-multiple`;
+
+var isRadioOrCheckbox = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
+
+var live = (ref) => isHTMLElement(ref) && ref.isConnected;
+
+var objectHasFunction = (data) => {
+    for (const key in data) {
+        if (isFunction(data[key])) {
+            return true;
+        }
+    }
+    return false;
+};
+
+function isTraversable(value) {
+    return Array.isArray(value) || (isObject(value) && !objectHasFunction(value));
+}
+function isRegisteredLeaf(fieldRef) {
+    return !!(fieldRef && '_f' in fieldRef);
+}
+function isEmptyDirtyContainer(value) {
+    return Array.isArray(value)
+        ? !value.some((item) => !isUndefined(item))
+        : !Object.keys(value).length;
+}
+function clearDirtyField(container, key) {
+    if (Array.isArray(container)) {
+        container[key] = undefined;
+    }
+    else {
+        delete container[key];
+    }
+}
+function markFieldsDirty(data, fields = {}, fieldRefs) {
+    for (const key in data) {
+        const value = data[key];
+        const fieldRef = fieldRefs && fieldRefs[key];
+        if (isTraversable(value) &&
+            (!Array.isArray(value) || !isRegisteredLeaf(fieldRef))) {
+            fields[key] = Array.isArray(value) ? [] : {};
+            markFieldsDirty(value, fields[key], fieldRef);
+            if (isEmptyDirtyContainer(fields[key])) {
+                clearDirtyField(fields, key);
+            }
+        }
+        else if (!isUndefined(value)) {
+            fields[key] = true;
+        }
+    }
+    return fields;
+}
+function getDirtyFields(data, formValues, dirtyFieldsFromValues, fieldRefs) {
+    if (!dirtyFieldsFromValues) {
+        dirtyFieldsFromValues = markFieldsDirty(formValues, {}, fieldRefs);
+    }
+    for (const key in data) {
+        const value = data[key];
+        const fieldRef = fieldRefs && fieldRefs[key];
+        if (isTraversable(value) &&
+            (!Array.isArray(value) || !isRegisteredLeaf(fieldRef))) {
+            if (isUndefined(formValues) || isPrimitive(dirtyFieldsFromValues[key])) {
+                dirtyFieldsFromValues[key] = markFieldsDirty(value, Array.isArray(value) ? [] : {}, fieldRef);
+            }
+            else {
+                getDirtyFields(value, isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key], fieldRef);
+            }
+            if (isEmptyDirtyContainer(dirtyFieldsFromValues[key])) {
+                clearDirtyField(dirtyFieldsFromValues, key);
+            }
+        }
+        else if (deepEqual(value, formValues[key])) {
+            clearDirtyField(dirtyFieldsFromValues, key);
+        }
+        else {
+            dirtyFieldsFromValues[key] = true;
+        }
+    }
+    return dirtyFieldsFromValues;
+}
+
+var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isUndefined(value)
+    ? value
+    : valueAsNumber
+        ? value === ''
+            ? NaN
+            : value
+                ? +value
+                : value
+        : valueAsDate && isString(value)
+            ? new Date(value)
+            : setValueAs
+                ? setValueAs(value)
+                : value;
+
+function getFieldValue(_f) {
+    const ref = _f.ref;
+    if (isFileInput(ref)) {
+        return ref.files;
+    }
+    if (isRadioInput(ref)) {
+        return getRadioValue(_f.refs).value;
+    }
+    if (isMultipleSelect(ref)) {
+        return [...ref.selectedOptions].map(({ value }) => value);
+    }
+    if (isCheckBoxInput(ref)) {
+        return getCheckboxValue(_f.refs).value;
+    }
+    return getFieldValueAs(isUndefined(ref.value) ? _f.ref.value : ref.value, _f);
+}
+
+var getResolverOptions = (fieldsNames, _fields, criteriaMode, shouldUseNativeValidation) => {
+    const fields = {};
+    for (const name of fieldsNames) {
+        const field = get(_fields, name);
+        field && set(fields, name, field._f);
+    }
+    return {
+        criteriaMode,
+        names: [...fieldsNames],
+        fields,
+        shouldUseNativeValidation,
+    };
+};
+
+var getRuleValue = (rule) => isUndefined(rule)
+    ? rule
+    : isRegex(rule)
+        ? rule.source
+        : isObject(rule)
+            ? isRegex(rule.value)
+                ? rule.value.source
+                : rule.value
+            : rule;
+
+const ASYNC_FUNCTION = 'AsyncFunction';
+var hasPromiseValidation = (fieldReference) => {
+    if (!fieldReference || !fieldReference.validate)
+        return false;
+    if (isFunction(fieldReference.validate)) {
+        return fieldReference.validate.constructor.name === ASYNC_FUNCTION;
+    }
+    if (isObject(fieldReference.validate)) {
+        for (const key in fieldReference.validate) {
+            if (fieldReference.validate[key].constructor
+                .name === ASYNC_FUNCTION) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
+
+var hasValidation = (options) => options.mount &&
+    (options.required ||
+        options.min ||
+        options.max ||
+        options.maxLength ||
+        options.minLength ||
+        options.pattern ||
+        options.validate);
+
+function schemaErrorLookup(errors, _fields, name) {
+    const error = get(errors, name);
+    if (error || isKey(name)) {
+        return {
+            error,
+            name,
+        };
+    }
+    const names = name.split('.');
+    while (names.length) {
+        const fieldName = names.join('.');
+        const field = get(_fields, fieldName);
+        const foundError = get(errors, fieldName);
+        if (field && !Array.isArray(field) && name !== fieldName) {
+            return { name };
+        }
+        if (foundError && foundError.type) {
+            return {
+                name: fieldName,
+                error: foundError,
+            };
+        }
+        if (foundError && foundError.root && foundError.root.type) {
+            return {
+                name: `${fieldName}.root`,
+                error: foundError.root,
             };
-            _subjects.state.next(updatedFormState);
         }
+        names.pop();
+    }
+    return {
+        name,
     };
-    const _runSchema = async (name) => {
-        _updateIsValidating(name, true);
-        return await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
+}
+
+var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {
+    updateFormState(formStateData);
+    const { name, ...formState } = formStateData;
+    const keys = Object.keys(formState);
+    return (!keys.length ||
+        (isRoot && keys.length >= Object.keys(_proxyFormState).length) ||
+        keys.find((key) => _proxyFormState[key] ===
+            (!isRoot || VALIDATION_MODE.all)));
+};
+
+var shouldSubscribeByName = (name, signalName, exact) => !name ||
+    !signalName ||
+    name === signalName ||
+    convertToArrayPayload(name).some((currentName) => currentName &&
+        (exact
+            ? currentName === signalName || currentName.startsWith(signalName + '.')
+            : currentName.startsWith(signalName) ||
+                signalName.startsWith(currentName)));
+
+var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode) => {
+    if (mode.isOnAll) {
+        return false;
+    }
+    else if (!isSubmitted && mode.isOnTouch) {
+        return !(isTouched || isBlurEvent);
+    }
+    else if (isSubmitted ? reValidateMode.isOnBlur : mode.isOnBlur) {
+        return !isBlurEvent;
+    }
+    else if (isSubmitted ? reValidateMode.isOnChange : mode.isOnChange) {
+        return isBlurEvent;
+    }
+    return true;
+};
+
+var unsetEmptyArray = (ref, name) => !compact(get(ref, name)).length && unset(ref, name);
+
+const defaultOptions = {
+    mode: VALIDATION_MODE.onSubmit,
+    reValidateMode: VALIDATION_MODE.onChange,
+    shouldFocusError: true,
+};
+const FORM_ERROR_TYPE = 'form';
+const DEFAULT_FORM_STATE = {
+    submitCount: 0,
+    isDirty: false,
+    isReady: false,
+    isValidating: false,
+    isSubmitted: false,
+    isSubmitting: false,
+    isSubmitSuccessful: false,
+    isValid: false,
+    touchedFields: {},
+    dirtyFields: {},
+    validatingFields: {},
+};
+function createFormControl(props = {}) {
+    let _options = {
+        ...defaultOptions,
+        ...props,
     };
-    const executeSchemaAndUpdateState = async (names) => {
-        const { errors } = await _runSchema(names);
-        _updateIsValidating(names);
-        if (names) {
-            for (const name of names) {
-                const error = get(errors, name);
-                error
-                    ? _names.array.has(name) &&
-                        isObject(error) &&
-                        !Object.keys(error).some((key) => !Number.isNaN(Number(key)))
-                        ? updateFieldArrayRootError(_formState.errors, { [name]: error }, name)
-                        : set(_formState.errors, name, error)
-                    : unset(_formState.errors, name);
-            }
-            _formState.errors = { ..._formState.errors };
-        }
-        else {
-            _formState.errors = errors;
-        }
-        return errors;
+    let _formState = {
+        ...cloneObject(DEFAULT_FORM_STATE),
+        isLoading: isFunction(_options.defaultValues),
+        errors: _options.errors || {},
+        disabled: _options.disabled || false,
     };
-    const validateForm = async ({ name, eventType, }) => {
-        if (props.validate) {
-            const result = await props.validate({
-                formValues: _formValues,
-                formState: _formState,
-                name,
-                eventType,
-            });
-            if (isObject(result)) {
-                for (const key in result) {
-                    const error = result[key];
-                    if (error) {
-                        setError(`${FORM_ERROR_TYPE}.${key}`, {
-                            message: isString(error.message) ? error.message : '',
-                            type: error.type || INPUT_VALIDATION_RULES.validate,
-                        });
-                    }
-                }
-            }
-            else if (isString(result) || !result) {
-                setError(FORM_ERROR_TYPE, {
-                    message: result || '',
-                    type: INPUT_VALIDATION_RULES.validate,
-                });
-            }
-            else {
-                clearErrors(FORM_ERROR_TYPE);
-            }
-            return result;
-        }
-        return true;
+    let _fields = {};
+    let _defaultValues = isObject(_options.defaultValues) || isObject(_options.values)
+        ? cloneObject(_options.defaultValues || _options.values) || {}
+        : {};
+    let _formValues = _options.shouldUnregister
+        ? {}
+        : cloneObject(_defaultValues);
+    let _state = {
+        action: false,
+        mount: false,
+        watch: false,
+        keepIsValid: false,
     };
-    const executeBuiltInValidation = async ({ fields, onlyCheckValid, name, eventType, context = {
-        valid: true,
-        runRootValidation: false,
-    }, }) => {
-        if (props.validate) {
-            context.runRootValidation = true;
-            const result = await validateForm({
-                name,
-                eventType,
-            });
-            if (!result) {
-                context.valid = false;
-                if (onlyCheckValid) {
-                    return context.valid;
-                }
-            }
-        }
-        for (const name in fields) {
-            const field = fields[name];
-            if (field) {
-                const { _f, ...fieldValue } = field;
-                if (_f) {
-                    const isFieldArrayRoot = _names.array.has(_f.name);
-                    const isPromiseFunction = field._f && hasPromiseValidation(field._f);
-                    const shouldTrackIsValidatingState = _proxyFormState.validatingFields ||
-                        _proxyFormState.isValidating ||
-                        _proxySubscribeFormState.validatingFields ||
-                        _proxySubscribeFormState.isValidating;
-                    if (isPromiseFunction && shouldTrackIsValidatingState) {
-                        _updateIsValidating([_f.name], true);
-                    }
-                    const fieldError = await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !onlyCheckValid, isFieldArrayRoot);
-                    if (isPromiseFunction && shouldTrackIsValidatingState) {
-                        _updateIsValidating([_f.name]);
-                    }
-                    if (fieldError[_f.name]) {
-                        context.valid = false;
-                        if (onlyCheckValid) {
-                            break;
-                        }
-                    }
-                    !onlyCheckValid &&
-                        (get(fieldError, _f.name)
-                            ? isFieldArrayRoot
-                                ? updateFieldArrayRootError(_formState.errors, fieldError, _f.name)
-                                : set(_formState.errors, _f.name, fieldError[_f.name])
-                            : unset(_formState.errors, _f.name));
-                    if (props.shouldUseNativeValidation && fieldError[_f.name]) {
-                        break;
-                    }
-                }
-                !isEmptyObject(fieldValue) &&
-                    (await executeBuiltInValidation({
-                        context,
-                        onlyCheckValid,
-                        fields: fieldValue,
-                        name: name,
-                        eventType,
-                    }));
-            }
-        }
-        return context.valid;
+    let _names = {
+        mount: new Set(),
+        disabled: new Set(),
+        unMount: new Set(),
+        array: new Set(),
+        watch: new Set(),
+        registerName: new Set(),
+    };
+    const delayErrorCallbacks = {};
+    const timers = {};
+    let _valuesSubscriberCount = 0;
+    let _validationModeBeforeSubmit = getValidationModes(_options.mode);
+    let _validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
+    const defaultProxyFormState = {
+        isDirty: false,
+        dirtyFields: false,
+        validatingFields: false,
+        touchedFields: false,
+        isValidating: false,
+        isValid: false,
+        errors: false,
     };
-    const _removeUnmounted = () => {
-        for (const name of _names.unMount) {
-            const field = get(_fields, name);
-            field &&
-                (field._f.refs
-                    ? field._f.refs.every((ref) => !live(ref))
-                    : !live(field._f.ref)) &&
-                unregister(name);
-        }
-        _names.unMount = new Set();
+    const _proxyFormState = {
+        ...defaultProxyFormState,
     };
-    const _getDirty = (name, data) => !_options.disabled &&
-        (name && data && set(_formValues, name, data),
-            !deepEqual(_state.mount ? _formValues : _defaultValues, _defaultValues));
-    const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
-        ...(_state.mount
-            ? _formValues
-            : isUndefined(defaultValue)
-                ? _defaultValues
-                : isString(names)
-                    ? { [names]: defaultValue }
-                    : defaultValue),
-    }, isGlobal, defaultValue);
-    const _getFieldArray = (name) => compact(get(_state.mount ? _formValues : _defaultValues, name, _options.shouldUnregister ? get(_defaultValues, name, []) : []));
-    const setFieldValue = (name, value, options = {}, skipClone = false, skipRender = false) => {
-        const field = get(_fields, name);
-        let fieldValue = value;
-        if (field) {
-            const fieldReference = field._f;
-            if (fieldReference) {
-                !fieldReference.disabled &&
-                    set(_formValues, name, getFieldValueAs(value, fieldReference));
-                fieldValue =
-                    isHTMLElement(fieldReference.ref) && isNullOrUndefined(value)
-                        ? ''
-                        : value;
-                if (isMultipleSelect(fieldReference.ref)) {
-                    [...fieldReference.ref.options].forEach((optionRef) => (optionRef.selected = fieldValue.includes(optionRef.value)));
-                }
-                else if (fieldReference.refs) {
-                    if (isCheckBoxInput(fieldReference.ref)) {
-                        fieldReference.refs.forEach((checkboxRef) => {
-                            if (!checkboxRef.defaultChecked || !checkboxRef.disabled) {
-                                if (Array.isArray(fieldValue)) {
-                                    checkboxRef.checked = !!fieldValue.find((data) => data === checkboxRef.value);
-                                }
-                                else {
-                                    checkboxRef.checked =
-                                        fieldValue === checkboxRef.value || !!fieldValue;
-                                }
-                            }
-                        });
-                    }
-                    else {
-                        fieldReference.refs.forEach((radioRef) => (radioRef.checked = radioRef.value === fieldValue));
-                    }
-                }
-                else if (isFileInput(fieldReference.ref)) {
-                    fieldReference.ref.value = '';
-                }
-                else {
-                    fieldReference.ref.value = fieldValue;
-                    if (!fieldReference.ref.type && !skipRender) {
-                        _subjects.state.next({
-                            name,
-                            values: skipClone ? _formValues : cloneObject(_formValues),
-                        });
-                    }
-                }
-            }
-        }
-        (options.shouldDirty || options.shouldTouch) &&
-            updateTouchAndDirty(name, fieldValue, options.shouldTouch, options.shouldDirty, !skipRender);
-        options.shouldValidate && trigger(name);
+    let _proxySubscribeFormState = {
+        ..._proxyFormState,
     };
-    const setFieldValues = (name, value, options, skipClone = false, skipRender = false) => {
-        for (const fieldKey in value) {
-            if (!value.hasOwnProperty(fieldKey)) {
-                return;
-            }
-            const fieldValue = value[fieldKey];
-            const fieldName = name + '.' + fieldKey;
-            const field = get(_fields, fieldName);
-            (_names.array.has(name) ||
-                isObject(fieldValue) ||
-                (field && !field._f)) &&
-                !isDateObject(fieldValue)
-                ? setFieldValues(fieldName, fieldValue, options, skipClone, skipRender)
-                : setFieldValue(fieldName, fieldValue, options, skipClone, skipRender);
-        }
+    const _subjects = {
+        array: createSubject(),
+        state: createSubject(),
     };
-    const _setValue = (name, value, options, skipClone, skipStateEmit = false) => {
-        const field = get(_fields, name);
-        const isFieldArray = _names.array.has(name);
-        const cloneValue = skipClone ? value : cloneObject(value);
-        const previousValue = get(_formValues, name);
-        const isValueUnchanged = deepEqual(previousValue, cloneValue);
-        if (!isValueUnchanged) {
-            set(_formValues, name, cloneValue);
-        }
-        if (isFieldArray) {
-            _subjects.array.next({
-                name,
-                values: skipClone ? _formValues : cloneObject(_formValues),
-            });
-            if ((_proxyFormState.isDirty ||
-                _proxyFormState.dirtyFields ||
-                _proxySubscribeFormState.isDirty ||
-                _proxySubscribeFormState.dirtyFields) &&
-                options.shouldDirty) {
-                _updateDirtyFields();
-                if (!skipStateEmit) {
-                    _subjects.state.next({
-                        name,
-                        dirtyFields: _formState.dirtyFields,
-                        isDirty: _getDirty(name, cloneValue),
-                    });
-                }
-            }
+    let _setValidCallId = 0;
+    const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
+    const debounce = (name, callback) => (wait) => {
+        clearTimeout(timers[name]);
+        timers[name] = setTimeout(callback, wait);
+    };
+    const _setValid = async (shouldUpdateValid) => {
+        if (_state.keepIsValid) {
+            return;
         }
-        else {
-            const isEmpty = (Array.isArray(cloneValue) && !cloneValue.length) ||
-                isEmptyObject(cloneValue);
-            if (!field || field._f || isNullOrUndefined(cloneValue) || isEmpty) {
-                setFieldValue(name, cloneValue, options, skipClone, skipStateEmit);
+        if (!_options.disabled &&
+            (_proxyFormState.isValid ||
+                _proxySubscribeFormState.isValid ||
+                shouldUpdateValid)) {
+            const callId = ++_setValidCallId;
+            let isValid;
+            if (_options.resolver) {
+                isValid = isEmptyObject((await _runSchema()).errors);
+                callId === _setValidCallId && _updateIsValidating();
             }
             else {
-                setFieldValues(name, cloneValue, options, skipClone, skipStateEmit);
+                isValid = await executeBuiltInValidation({
+                    fields: _fields,
+                    onlyCheckValid: true,
+                    eventType: EVENTS.VALID,
+                });
+            }
+            if (callId === _setValidCallId && isValid !== _formState.isValid) {
+                _subjects.state.next({
+                    isValid,
+                });
             }
         }
-        if (!isValueUnchanged && !skipStateEmit) {
-            const watched = isWatched(name, _names);
-            const values = skipClone ? _formValues : cloneObject(_formValues);
+    };
+    const _updateIsValidating = (names, isValidating) => {
+        if (!_options.disabled &&
+            (_proxyFormState.isValidating ||
+                _proxyFormState.validatingFields ||
+                _proxySubscribeFormState.isValidating ||
+                _proxySubscribeFormState.validatingFields)) {
+            (names || Array.from(_names.mount)).forEach((name) => {
+                if (name) {
+                    isValidating
+                        ? set(_formState.validatingFields, name, isValidating)
+                        : unset(_formState.validatingFields, name);
+                }
+            });
             _subjects.state.next({
-                ...(watched && _formState),
-                name: _state.mount || watched ? name : undefined,
-                values,
+                validatingFields: _formState.validatingFields,
+                isValidating: !isEmptyObject(_formState.validatingFields),
             });
         }
     };
-    const setValue = (name, value, options = {}) => _setValue(name, value, options, false);
-    const setValues = (formValues, options = {}) => {
-        const updatedFormValues = isFunction(formValues)
-            ? formValues(_formValues)
-            : formValues;
-        if (!deepEqual(_formValues, updatedFormValues)) {
-            _formValues = {
-                ..._formValues,
-                ...updatedFormValues,
-            };
-            for (const fieldName of _names.mount) {
-                _setValue(fieldName, get(updatedFormValues, fieldName), options, true, true);
+    const _updateDirtyFields = () => {
+        _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues, undefined, _fields);
+    };
+    const _setFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
+        if (args && method && !_options.disabled) {
+            _state.action = true;
+            if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
+                const fieldValues = method(get(_fields, name), args.argA, args.argB);
+                shouldSetValues && set(_fields, name, fieldValues);
+            }
+            if (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 ||
+                _proxySubscribeFormState.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);
+            }
+            if (_proxyFormState.dirtyFields || _proxySubscribeFormState.dirtyFields) {
+                _updateDirtyFields();
             }
             _subjects.state.next({
-                ..._formState,
-                name: undefined,
-                type: undefined,
-                ...(_valuesSubscriberCount ? { values: _formValues } : {}),
+                name,
+                isDirty: _getDirty(name, values),
+                dirtyFields: _formState.dirtyFields,
+                errors: _formState.errors,
+                isValid: _formState.isValid,
             });
-            if (options.shouldValidate) {
+        }
+        else {
+            set(_formValues, name, values);
+        }
+    };
+    const updateErrors = (name, error) => {
+        set(_formState.errors, name, error);
+        _formState.errors = { ..._formState.errors };
+        _subjects.state.next({
+            errors: _formState.errors,
+        });
+    };
+    const _setErrors = (errors) => {
+        _formState.errors = errors;
+        _subjects.state.next({
+            errors: _formState.errors,
+            isValid: false,
+        });
+    };
+    const hasExplicitNullIntermediate = (name) => {
+        const segments = isKey(name) ? [name] : stringToPath(name);
+        let formValues = _formValues;
+        let defaultValues = _defaultValues;
+        for (let i = 0; i < segments.length - 1; i++) {
+            const key = segments[i];
+            formValues = isNullOrUndefined(formValues) ? formValues : formValues[key];
+            defaultValues = isNullOrUndefined(defaultValues)
+                ? defaultValues
+                : defaultValues[key];
+            if (formValues === null && defaultValues !== null) {
+                return true;
+            }
+        }
+        return false;
+    };
+    const updateValidAndValue = (name, shouldSkipSetValueAs, value, ref) => {
+        const field = get(_fields, name);
+        if (field) {
+            if (hasExplicitNullIntermediate(name)) {
+                return;
+            }
+            const wasUnsetInFormValues = isUndefined(get(_formValues, name));
+            const defaultValue = get(_formValues, name, isUndefined(value) ? get(_defaultValues, name) : value);
+            isUndefined(defaultValue) ||
+                (ref && ref.defaultChecked) ||
+                shouldSkipSetValueAs
+                ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f))
+                : setFieldValue(name, defaultValue);
+            if (_state.mount && !_state.action) {
                 _setValid();
+                if (wasUnsetInFormValues &&
+                    _formState.isDirty &&
+                    (_proxyFormState.isDirty || _proxySubscribeFormState.isDirty)) {
+                    const isDirty = _getDirty();
+                    if (!isDirty) {
+                        _formState.isDirty = false;
+                        _subjects.state.next({ ..._formState });
+                    }
+                }
+                if (props.shouldUnregister &&
+                    wasUnsetInFormValues &&
+                    !isUndefined(get(_formValues, name)) &&
+                    isWatched(name, _names)) {
+                    _state.watch = true;
+                }
             }
         }
     };
-    const onChange = async (event) => {
-        _state.mount = true;
-        const target = event.target;
-        let name = target.name;
-        let isFieldValueUpdated = true;
-        const field = get(_fields, name);
-        const _updateIsFieldValueUpdated = (fieldValue) => {
-            isFieldValueUpdated =
-                Number.isNaN(fieldValue) ||
-                    (isDateObject(fieldValue) && isNaN(fieldValue.getTime())) ||
-                    deepEqual(fieldValue, get(_formValues, name, fieldValue));
+    const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
+        let shouldUpdateField = false;
+        let isPreviousDirty = false;
+        const output = {
+            name,
         };
-        if (field) {
-            let error;
-            let isValid;
-            const fieldValue = target.type
-                ? getFieldValue(field._f)
-                : getEventValue(event);
-            const isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
-            const hasNoValidationEffect = !hasValidation(field._f) &&
-                !props.validate &&
-                !_options.resolver &&
-                !get(_formState.errors, name) &&
-                !field._f.deps;
-            const shouldSkipValidation = hasNoValidationEffect ||
-                skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, _validationModeAfterSubmit, _validationModeBeforeSubmit);
-            const watched = isWatched(name, _names, isBlurEvent);
-            set(_formValues, name, fieldValue);
-            if (isBlurEvent) {
-                if (!target || !target.readOnly) {
-                    field._f.onBlur && field._f.onBlur(event);
-                    delayErrorCallback && delayErrorCallback(0);
+        // an explicit programmatic update (e.g. setValue with shouldDirty: true)
+        // opts into dirty tracking even when the form is disabled
+        if (!_options.disabled || shouldDirty === true) {
+            if (!isBlurEvent || shouldDirty) {
+                const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
+                if (_proxyFormState.isDirty || _proxySubscribeFormState.isDirty) {
+                    isPreviousDirty = _formState.isDirty;
+                    _formState.isDirty = output.isDirty =
+                        !isCurrentFieldPristine || _getDirty();
+                    shouldUpdateField = isPreviousDirty !== output.isDirty;
                 }
-            }
-            else if (field._f.onChange) {
-                field._f.onChange(event);
-            }
-            const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent);
-            const shouldRender = !isEmptyObject(fieldState) || watched;
-            !isBlurEvent &&
-                _subjects.state.next({
-                    name,
-                    type: event.type,
-                    ...(_valuesSubscriberCount
-                        ? { values: cloneObject(_formValues) }
-                        : {}),
-                });
-            if (shouldSkipValidation) {
-                if ((!hasNoValidationEffect || !_formState.isValid) &&
-                    (_proxyFormState.isValid || _proxySubscribeFormState.isValid)) {
-                    if (_options.mode === 'onBlur') {
-                        if (isBlurEvent) {
-                            _setValid();
-                        }
-                    }
-                    else if (!isBlurEvent) {
-                        _setValid();
-                    }
+                isPreviousDirty = !!get(_formState.dirtyFields, name);
+                if (isCurrentFieldPristine !== _formState.isDirty) {
+                    _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues, undefined, _fields);
                 }
-                return (shouldRender &&
-                    _subjects.state.next({ name, ...(watched ? {} : fieldState) }));
-            }
-            if (!_options.resolver && props.validate) {
-                await validateForm({
-                    name: name,
-                    eventType: event.type,
-                });
-            }
-            !isBlurEvent && watched && _subjects.state.next({ ..._formState });
-            if (_options.resolver) {
-                const { errors } = await _runSchema([name]);
-                _updateIsValidating([name]);
-                _updateIsFieldValueUpdated(fieldValue);
-                if (!isFieldValueUpdated) {
-                    !isEmptyObject(fieldState) && _subjects.state.next(fieldState);
-                    return;
+                else {
+                    isCurrentFieldPristine
+                        ? unset(_formState.dirtyFields, name)
+                        : set(_formState.dirtyFields, name, true);
                 }
-                const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
-                const errorLookupResult = schemaErrorLookup(errors, _fields, previousErrorLookupResult.name || name);
-                error = errorLookupResult.error;
-                name = errorLookupResult.name;
-                isValid = isEmptyObject(errors);
+                output.dirtyFields = _formState.dirtyFields;
+                shouldUpdateField =
+                    shouldUpdateField ||
+                        ((_proxyFormState.dirtyFields ||
+                            _proxySubscribeFormState.dirtyFields) &&
+                            isPreviousDirty !== !isCurrentFieldPristine);
             }
-            else {
-                _updateIsValidating([name], true);
-                error = (await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
-                _updateIsValidating([name]);
-                _updateIsFieldValueUpdated(fieldValue);
-                if (isFieldValueUpdated) {
-                    if (error) {
-                        isValid = false;
-                    }
-                    else if (_proxyFormState.isValid ||
-                        _proxySubscribeFormState.isValid) {
-                        isValid = await executeBuiltInValidation({
-                            fields: _fields,
-                            onlyCheckValid: true,
-                            name: name,
-                            eventType: event.type,
-                        });
-                    }
+            if (isBlurEvent) {
+                const isPreviousFieldTouched = get(_formState.touchedFields, name);
+                if (!isPreviousFieldTouched) {
+                    set(_formState.touchedFields, name, isBlurEvent);
+                    output.touchedFields = _formState.touchedFields;
+                    shouldUpdateField =
+                        shouldUpdateField ||
+                            ((_proxyFormState.touchedFields ||
+                                _proxySubscribeFormState.touchedFields) &&
+                                isPreviousFieldTouched !== isBlurEvent);
                 }
             }
-            if (isFieldValueUpdated) {
-                field._f.deps &&
-                    (!Array.isArray(field._f.deps) || field._f.deps.length > 0) &&
-                    trigger(field._f.deps);
-                shouldRenderByError(name, isValid, error, fieldState);
-            }
-        }
-    };
-    const _focusInput = (ref, key) => {
-        if (get(_formState.errors, key) && ref.focus) {
-            ref.focus();
-            return 1;
+            shouldUpdateField && shouldRender && _subjects.state.next(output);
         }
-        return;
+        return shouldUpdateField ? output : {};
     };
-    const trigger = async (name, options = {}) => {
-        let isValid;
-        let validationResult;
-        const fieldNames = convertToArrayPayload(name);
-        if (_options.resolver) {
-            const errors = await executeSchemaAndUpdateState(isUndefined(name) ? name : fieldNames);
-            isValid = isEmptyObject(errors);
-            validationResult = name
-                ? !fieldNames.some((name) => get(errors, name))
-                : isValid;
-        }
-        else if (name) {
-            validationResult = (await Promise.all(fieldNames.map(async (fieldName) => {
-                const field = get(_fields, fieldName);
-                return await executeBuiltInValidation({
-                    fields: field && field._f ? { [fieldName]: field } : field,
-                    eventType: EVENTS.TRIGGER,
-                });
-            }))).every(Boolean);
-            !(!validationResult && !_formState.isValid) && _setValid();
+    const shouldRenderByError = (name, isValid, error, fieldState) => {
+        const previousFieldError = get(_formState.errors, name);
+        const shouldUpdateValid = (_proxyFormState.isValid || _proxySubscribeFormState.isValid) &&
+            isBoolean(isValid) &&
+            _formState.isValid !== isValid;
+        if (_options.delayError && error) {
+            delayErrorCallbacks[name] = debounce(name, () => updateErrors(name, error));
+            delayErrorCallbacks[name](_options.delayError);
         }
         else {
-            validationResult = isValid = await executeBuiltInValidation({
-                fields: _fields,
+            clearTimeout(timers[name]);
+            delete delayErrorCallbacks[name];
+            error
+                ? set(_formState.errors, name, error)
+                : unset(_formState.errors, name);
+            _formState.errors = { ..._formState.errors };
+        }
+        if ((error ? !deepEqual(previousFieldError, error) : previousFieldError) ||
+            !isEmptyObject(fieldState) ||
+            shouldUpdateValid) {
+            const updatedFormState = {
+                ...fieldState,
+                ...(shouldUpdateValid && isBoolean(isValid) ? { isValid } : {}),
+                errors: _formState.errors,
                 name,
-                eventType: EVENTS.TRIGGER,
-            });
+            };
+            _formState = {
+                ..._formState,
+                ...updatedFormState,
+            };
+            _subjects.state.next(updatedFormState);
         }
-        _subjects.state.next({
-            ...(!isString(name) ||
-                ((_proxyFormState.isValid || _proxySubscribeFormState.isValid) &&
-                    isValid !== _formState.isValid)
-                ? {}
-                : { name }),
-            ...(_options.resolver || !name ? { isValid } : {}),
-            errors: _formState.errors,
-        });
-        options.shouldFocus &&
-            !validationResult &&
-            iterateFieldsByAction(_fields, _focusInput, name ? fieldNames : _names.mount);
-        return validationResult;
     };
-    const getValues = (fieldNames, config) => {
-        let values = {
-            ...(_state.mount ? _formValues : _defaultValues),
-        };
-        if (config) {
-            values = extractFormValues(config.dirtyFields ? _formState.dirtyFields : _formState.touchedFields, values);
-        }
-        return isUndefined(fieldNames)
-            ? values
-            : isString(fieldNames)
-                ? get(values, fieldNames)
-                : fieldNames.map((name) => get(values, name));
+    const _runSchema = async (name) => {
+        _updateIsValidating(name, true);
+        return await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
     };
-    const getFieldState = (name, formState) => ({
-        invalid: !!get((formState || _formState).errors, name),
-        isDirty: !!get((formState || _formState).dirtyFields, name),
-        error: get((formState || _formState).errors, name),
-        isValidating: !!get(_formState.validatingFields, name),
-        isTouched: !!get((formState || _formState).touchedFields, name),
-    });
-    const clearErrors = (name) => {
-        const names = name ? convertToArrayPayload(name) : undefined;
-        names === null || names === void 0 ? void 0 : names.forEach((inputName) => unset(_formState.errors, inputName));
+    const executeSchemaAndUpdateState = async (names) => {
+        const { errors } = await _runSchema(names);
+        _updateIsValidating(names);
         if (names) {
-            names.forEach((inputName) => {
-                _subjects.state.next({
-                    name: inputName,
-                    errors: _formState.errors,
-                });
-            });
+            for (const name of names) {
+                const error = get(errors, name);
+                error
+                    ? _names.array.has(name) &&
+                        isObject(error) &&
+                        !Object.keys(error).some((key) => !Number.isNaN(Number(key)))
+                        ? updateFieldArrayRootError(_formState.errors, { [name]: error }, name)
+                        : set(_formState.errors, name, error)
+                    : unset(_formState.errors, name);
+            }
+            _formState.errors = { ..._formState.errors };
         }
         else {
-            _subjects.state.next({
-                errors: {},
-            });
+            _formState.errors = errors;
         }
+        return errors;
     };
-    const setError = (name, error, options) => {
-        const ref = (get(_fields, name, { _f: {} })._f || {}).ref;
-        const currentError = get(_formState.errors, name) || {};
-        const { ref: currentRef, message, type, ...restOfErrorTree } = currentError;
-        set(_formState.errors, name, {
-            ...restOfErrorTree,
-            ...error,
-            ref,
-        });
-        _subjects.state.next({
-            name,
-            errors: _formState.errors,
-            isValid: false,
-        });
-        options && options.shouldFocus && ref && ref.focus && ref.focus();
-    };
-    const watch = (name, defaultValue) => {
-        if (isFunction(name)) {
-            _valuesSubscriberCount++;
-            const { unsubscribe } = _subjects.state.subscribe({
-                next: (payload) => 'values' in payload &&
-                    name(payload.values || _getWatch(undefined, defaultValue), payload),
+    const validateForm = async ({ name, eventType, }) => {
+        if (props.validate) {
+            const result = await props.validate({
+                formValues: _formValues,
+                formState: _formState,
+                name,
+                eventType,
             });
-            let called = false;
-            return {
-                unsubscribe: () => {
-                    if (called) {
-                        return;
+            if (isObject(result)) {
+                for (const key in result) {
+                    const error = result[key];
+                    if (error) {
+                        setError(`${FORM_ERROR_TYPE}.${key}`, {
+                            message: isString(error.message) ? error.message : '',
+                            type: error.type || INPUT_VALIDATION_RULES.validate,
+                        });
                     }
-                    called = true;
-                    _valuesSubscriberCount--;
-                    unsubscribe();
-                },
-            };
-        }
-        return _getWatch(name, defaultValue, true);
-    };
-    const _subscribe = (props) => {
-        var _a;
-        const needsValues = !!((_a = props.formState) === null || _a === void 0 ? void 0 : _a.values);
-        if (needsValues) {
-            _valuesSubscriberCount++;
-        }
-        const { unsubscribe } = _subjects.state.subscribe({
-            next: (formState) => {
-                if (shouldSubscribeByName(props.name, formState.name, props.exact) &&
-                    shouldRenderFormState(formState, props.formState || _proxyFormState, _setFormState, props.reRenderRoot)) {
-                    const snapshot = { ..._formValues };
-                    props.callback({
-                        values: snapshot,
-                        ..._formState,
-                        ...formState,
-                        defaultValues: _defaultValues,
-                    });
                 }
-            },
-        });
-        if (!needsValues) {
-            return unsubscribe;
-        }
-        let called = false;
-        return () => {
-            if (called) {
-                return;
             }
-            called = true;
-            _valuesSubscriberCount--;
-            unsubscribe();
-        };
-    };
-    const subscribe = (props) => {
-        _state.mount = true;
-        _proxySubscribeFormState = {
-            ..._proxySubscribeFormState,
-            ...props.formState,
-        };
-        return _subscribe({
-            ...props,
-            formState: {
-                ...defaultProxyFormState,
-                ...props.formState,
-            },
-        });
-    };
-    const unregister = (name, options = {}) => {
-        for (const fieldName of name ? convertToArrayPayload(name) : _names.mount) {
-            _names.mount.delete(fieldName);
-            _names.array.delete(fieldName);
-            if (!options.keepValue) {
-                unset(_fields, fieldName);
-                unset(_formValues, fieldName);
+            else if (isString(result) || !result) {
+                setError(FORM_ERROR_TYPE, {
+                    message: result || '',
+                    type: INPUT_VALIDATION_RULES.validate,
+                });
             }
-            !options.keepError && unset(_formState.errors, fieldName);
-            !options.keepDirty && unset(_formState.dirtyFields, fieldName);
-            !options.keepTouched && unset(_formState.touchedFields, fieldName);
-            !options.keepIsValidating &&
-                unset(_formState.validatingFields, fieldName);
-            !_options.shouldUnregister &&
-                !options.keepDefaultValue &&
-                unset(_defaultValues, fieldName);
-        }
-        _subjects.state.next({
-            values: cloneObject(_formValues),
-        });
-        _subjects.state.next({
-            ..._formState,
-            ...(!options.keepDirty ? {} : { isDirty: _getDirty() }),
-        });
-        !options.keepIsValid && _setValid();
-    };
-    const _setDisabledField = ({ disabled, name, }) => {
-        if ((isBoolean(disabled) && _state.mount) ||
-            !!disabled ||
-            _names.disabled.has(name)) {
-            const wasDisabled = _names.disabled.has(name);
-            const isDisabled = !!disabled;
-            const disabledStateChanged = wasDisabled !== isDisabled;
-            disabled ? _names.disabled.add(name) : _names.disabled.delete(name);
-            disabledStateChanged && _state.mount && !_state.action && _setValid();
+            else {
+                clearErrors(FORM_ERROR_TYPE);
+            }
+            return result;
         }
+        return true;
     };
-    const register = (name, options = {}) => {
-        let field = get(_fields, name);
-        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
-        const shouldRevalidateRemount = !_names.registerName.has(name) && field && field._f && !field._f.mount;
-        set(_fields, name, {
-            ...(field || {}),
-            _f: {
-                ...(field && field._f ? field._f : { ref: { name } }),
-                name,
-                mount: true,
-                ...options,
-            },
-        });
-        _names.mount.add(name);
-        if (field && !shouldRevalidateRemount) {
-            _setDisabledField({
-                disabled: isBoolean(options.disabled)
-                    ? options.disabled
-                    : _options.disabled,
+    const executeBuiltInValidation = async ({ fields, onlyCheckValid, name, eventType, context = {
+        valid: true,
+        runRootValidation: false,
+    }, }) => {
+        if (props.validate) {
+            context.runRootValidation = true;
+            const result = await validateForm({
                 name,
+                eventType,
             });
-        }
-        else {
-            updateValidAndValue(name, true, options.value);
-        }
-        return {
-            ...(disabledIsDefined
-                ? { disabled: options.disabled || _options.disabled }
-                : {}),
-            ...(_options.progressive
-                ? {
-                    required: !!options.required,
-                    min: getRuleValue(options.min),
-                    max: getRuleValue(options.max),
-                    minLength: getRuleValue(options.minLength),
-                    maxLength: getRuleValue(options.maxLength),
-                    pattern: getRuleValue(options.pattern),
+            if (!result) {
+                context.valid = false;
+                if (onlyCheckValid) {
+                    return context.valid;
                 }
-                : {}),
-            name,
-            onChange,
-            onBlur: onChange,
-            ref: (ref) => {
-                if (ref) {
-                    _names.registerName.add(name);
-                    register(name, options);
-                    _names.registerName.delete(name);
-                    field = get(_fields, name);
-                    const fieldRef = isUndefined(ref.value)
-                        ? ref.querySelectorAll
-                            ? ref.querySelectorAll('input,select,textarea')[0] || ref
-                            : ref
-                        : ref;
-                    const radioOrCheckbox = isRadioOrCheckbox(fieldRef);
-                    const refs = field._f.refs || [];
-                    if (radioOrCheckbox
-                        ? refs.find((option) => option === fieldRef)
-                        : fieldRef === field._f.ref) {
-                        return;
+            }
+        }
+        for (const name in fields) {
+            const field = fields[name];
+            if (field) {
+                const { _f, ...fieldValue } = field;
+                if (_f) {
+                    const isFieldArrayRoot = _names.array.has(_f.name);
+                    const isPromiseFunction = field._f && hasPromiseValidation(field._f);
+                    const shouldTrackIsValidatingState = _proxyFormState.validatingFields ||
+                        _proxyFormState.isValidating ||
+                        _proxySubscribeFormState.validatingFields ||
+                        _proxySubscribeFormState.isValidating;
+                    if (isPromiseFunction && shouldTrackIsValidatingState) {
+                        _updateIsValidating([_f.name], true);
+                    }
+                    const fieldError = await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !onlyCheckValid, isFieldArrayRoot);
+                    if (isPromiseFunction && shouldTrackIsValidatingState) {
+                        _updateIsValidating([_f.name]);
+                    }
+                    if (fieldError[_f.name]) {
+                        context.valid = false;
+                        if (onlyCheckValid) {
+                            break;
+                        }
                     }
-                    set(_fields, name, {
-                        _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);
-                }
-                else {
-                    field = get(_fields, name, {});
-                    if (field._f) {
-                        field._f.mount = false;
+                    !onlyCheckValid &&
+                        (get(fieldError, _f.name)
+                            ? isFieldArrayRoot
+                                ? updateFieldArrayRootError(_formState.errors, fieldError, _f.name)
+                                : set(_formState.errors, _f.name, fieldError[_f.name])
+                            : unset(_formState.errors, _f.name));
+                    if (props.shouldUseNativeValidation && fieldError[_f.name]) {
+                        break;
                     }
-                    (_options.shouldUnregister || options.shouldUnregister) &&
-                        !(isNameInFieldArray(_names.array, name) && _state.action) &&
-                        _names.unMount.add(name);
                 }
-            },
-        };
+                !isEmptyObject(fieldValue) &&
+                    (await executeBuiltInValidation({
+                        context,
+                        onlyCheckValid,
+                        fields: fieldValue,
+                        name: name,
+                        eventType,
+                    }));
+            }
+        }
+        return context.valid;
     };
-    const _focusError = () => _options.shouldFocusError &&
-        !_options.shouldUseNativeValidation &&
-        iterateFieldsByAction(_fields, _focusInput, _names.mount);
-    const _disableForm = (disabled) => {
-        if (isBoolean(disabled)) {
-            _subjects.state.next({ disabled });
-            iterateFieldsByAction(_fields, (ref, name) => {
-                const currentField = get(_fields, name);
-                if (currentField) {
-                    ref.disabled = currentField._f.disabled || disabled;
-                    if (Array.isArray(currentField._f.refs)) {
-                        currentField._f.refs.forEach((inputRef) => {
-                            inputRef.disabled = currentField._f.disabled || disabled;
+    const _removeUnmounted = () => {
+        for (const name of _names.unMount) {
+            const field = get(_fields, name);
+            field &&
+                (field._f.refs
+                    ? field._f.refs.every((ref) => !live(ref))
+                    : !live(field._f.ref)) &&
+                unregister(name);
+        }
+        _names.unMount = new Set();
+    };
+    const _getDirty = (name, data) => (name && data && set(_formValues, name, data),
+        !deepEqual(_state.mount ? _formValues : _defaultValues, _defaultValues));
+    const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
+        ...(_state.mount
+            ? _formValues
+            : isUndefined(defaultValue)
+                ? _defaultValues
+                : isString(names)
+                    ? { [names]: defaultValue }
+                    : defaultValue),
+    }, isGlobal, defaultValue);
+    const _getFieldArray = (name) => compact(get(_state.mount ? _formValues : _defaultValues, name, _options.shouldUnregister ? get(_defaultValues, name, []) : []));
+    const setFieldValue = (name, value, options = {}, skipClone = false, skipRender = false) => {
+        const field = get(_fields, name);
+        let fieldValue = value;
+        if (field) {
+            const fieldReference = field._f;
+            if (fieldReference) {
+                !fieldReference.disabled &&
+                    set(_formValues, name, getFieldValueAs(value, fieldReference));
+                fieldValue =
+                    isHTMLElement(fieldReference.ref) && isNullOrUndefined(value)
+                        ? ''
+                        : value;
+                if (isMultipleSelect(fieldReference.ref)) {
+                    [...fieldReference.ref.options].forEach((optionRef) => (optionRef.selected = fieldValue.includes(optionRef.value)));
+                }
+                else if (fieldReference.refs) {
+                    if (isCheckBoxInput(fieldReference.ref)) {
+                        fieldReference.refs.forEach((checkboxRef) => {
+                            if (!checkboxRef.defaultChecked || !checkboxRef.disabled) {
+                                if (Array.isArray(fieldValue)) {
+                                    checkboxRef.checked = !!fieldValue.find((data) => data === checkboxRef.value);
+                                }
+                                else {
+                                    checkboxRef.checked =
+                                        fieldValue === checkboxRef.value || !!fieldValue;
+                                }
+                            }
                         });
                     }
+                    else {
+                        fieldReference.refs.forEach((radioRef) => (radioRef.checked = radioRef.value === fieldValue));
+                    }
                 }
-            }, 0, false);
-        }
-    };
-    const handleSubmit = (onValid, onInvalid) => async (e) => {
-        let onValidError = undefined;
-        if (e) {
-            e.preventDefault && e.preventDefault();
-            e.persist &&
-                e.persist();
-        }
-        let fieldValues = cloneObject(_formValues);
-        _subjects.state.next({
-            isSubmitting: true,
-        });
-        if (_options.resolver) {
-            const { errors, values } = await _runSchema();
-            _updateIsValidating();
-            _formState.errors = errors;
-            fieldValues = cloneObject(values);
+                else if (isFileInput(fieldReference.ref)) {
+                    fieldReference.ref.value = '';
+                }
+                else {
+                    fieldReference.ref.value = fieldValue;
+                    if (!fieldReference.ref.type && !skipRender) {
+                        _subjects.state.next({
+                            name,
+                            values: skipClone ? _formValues : cloneObject(_formValues),
+                        });
+                    }
+                }
+            }
         }
-        else {
-            await executeBuiltInValidation({
-                fields: _fields,
-                eventType: EVENTS.SUBMIT,
+        (options.shouldDirty || options.shouldTouch) &&
+            updateTouchAndDirty(name, fieldValue, options.shouldTouch, options.shouldDirty, !skipRender);
+        options.shouldValidate &&
+            trigger(name, {
+                delayError: options.delayError,
             });
-        }
-        if (_names.disabled.size) {
-            for (const name of _names.disabled) {
-                unset(fieldValues, name);
+    };
+    const setFieldValues = (name, value, options, skipClone = false, skipRender = false) => {
+        for (const fieldKey in value) {
+            if (!value.hasOwnProperty(fieldKey)) {
+                return;
             }
+            const fieldValue = value[fieldKey];
+            const fieldName = name + '.' + fieldKey;
+            const field = get(_fields, fieldName);
+            (_names.array.has(name) ||
+                isObject(fieldValue) ||
+                (field && !field._f)) &&
+                !isDateObject(fieldValue)
+                ? setFieldValues(fieldName, fieldValue, options, skipClone, skipRender)
+                : setFieldValue(fieldName, fieldValue, options, skipClone, skipRender);
         }
-        unset(_formState.errors, ROOT_ERROR_TYPE);
-        if (isEmptyObject(_formState.errors)) {
-            _subjects.state.next({
-                errors: {},
+    };
+    const _setValue = (name, value, options, skipClone, skipStateEmit = false) => {
+        const field = get(_fields, name);
+        const isFieldArray = _names.array.has(name);
+        const cloneValue = skipClone ? value : cloneObject(value);
+        const previousValue = get(_formValues, name);
+        const isValueUnchanged = deepEqual(previousValue, cloneValue);
+        if (!isValueUnchanged) {
+            set(_formValues, name, cloneValue);
+        }
+        if (isFieldArray) {
+            _subjects.array.next({
+                name,
+                values: skipClone ? _formValues : cloneObject(_formValues),
             });
-            try {
-                await onValid(fieldValues, e);
-            }
-            catch (error) {
-                onValidError = error;
+            if ((_proxyFormState.isDirty ||
+                _proxyFormState.dirtyFields ||
+                _proxySubscribeFormState.isDirty ||
+                _proxySubscribeFormState.dirtyFields) &&
+                options.shouldDirty) {
+                _updateDirtyFields();
+                if (!skipStateEmit) {
+                    _subjects.state.next({
+                        name,
+                        dirtyFields: _formState.dirtyFields,
+                        isDirty: _getDirty(name, cloneValue),
+                    });
+                }
             }
         }
         else {
-            if (onInvalid) {
-                await onInvalid({ ..._formState.errors }, e);
+            const isEmpty = (Array.isArray(cloneValue) && !cloneValue.length) ||
+                isEmptyObject(cloneValue);
+            if (!field || field._f || isNullOrUndefined(cloneValue) || isEmpty) {
+                setFieldValue(name, cloneValue, options, skipClone, skipStateEmit);
+            }
+            else {
+                setFieldValues(name, cloneValue, options, skipClone, skipStateEmit);
             }
-            _focusError();
-            setTimeout(_focusError);
         }
-        _subjects.state.next({
-            isSubmitted: true,
-            isSubmitting: false,
-            isSubmitSuccessful: isEmptyObject(_formState.errors) && !onValidError,
-            submitCount: _formState.submitCount + 1,
-            errors: _formState.errors,
-        });
-        if (onValidError) {
-            throw onValidError;
+        if (!isValueUnchanged && !skipStateEmit) {
+            const watched = isWatched(name, _names);
+            const values = skipClone ? _formValues : cloneObject(_formValues);
+            _subjects.state.next({
+                ...(watched && _formState),
+                name: _state.mount || watched ? name : undefined,
+                values,
+            });
         }
     };
-    const resetField = (name, options = {}) => {
-        if (get(_fields, name)) {
-            if (isUndefined(options.defaultValue)) {
-                setValue(name, cloneObject(get(_defaultValues, name)));
-            }
-            else {
-                setValue(name, options.defaultValue);
-                set(_defaultValues, name, cloneObject(options.defaultValue));
-            }
-            if (!options.keepTouched) {
-                unset(_formState.touchedFields, name);
-            }
-            if (!options.keepDirty) {
-                unset(_formState.dirtyFields, name);
-                _formState.isDirty = options.defaultValue
-                    ? _getDirty(name, cloneObject(get(_defaultValues, name)))
-                    : _getDirty();
+    const setValue = (name, value, options = {}) => _setValue(name, value, options, false);
+    const setValues = (formValues, options = {}) => {
+        const updatedFormValues = isFunction(formValues)
+            ? formValues(_formValues)
+            : formValues;
+        if (!deepEqual(_formValues, updatedFormValues)) {
+            _formValues = {
+                ..._formValues,
+                ...updatedFormValues,
+            };
+            const flattenedUpdates = flatten(updatedFormValues);
+            for (const fieldName of _names.mount) {
+                if (fieldName in flattenedUpdates) {
+                    _setValue(fieldName, flattenedUpdates[fieldName], options, true, true);
+                }
             }
-            if (!options.keepError) {
-                unset(_formState.errors, name);
-                _proxyFormState.isValid && _setValid();
+            _subjects.state.next({
+                ..._formState,
+                name: undefined,
+                type: undefined,
+                ...(_valuesSubscriberCount ? { values: _formValues } : {}),
+            });
+            if (options.shouldValidate) {
+                _setValid();
             }
-            _subjects.state.next({ ..._formState });
         }
     };
-    const _reset = (formValues, keepStateOptions = {}) => {
-        const updatedValues = formValues ? cloneObject(formValues) : _defaultValues;
-        const cloneUpdatedValues = cloneObject(updatedValues);
-        const isEmptyResetValues = isEmptyObject(formValues);
-        const values = cloneUpdatedValues;
-        if (!keepStateOptions.keepDefaultValues) {
-            _defaultValues = updatedValues;
-        }
-        if (!keepStateOptions.keepValues) {
-            if (keepStateOptions.keepDirtyValues) {
-                const fieldsToCheck = new Set([
-                    ..._names.mount,
-                    ...Object.keys(getDirtyFields(_defaultValues, _formValues)),
-                ]);
-                for (const fieldName of Array.from(fieldsToCheck)) {
-                    const isDirty = get(_formState.dirtyFields, fieldName);
-                    const existingValue = get(_formValues, fieldName);
-                    const newValue = get(values, fieldName);
-                    if (isDirty && !isUndefined(existingValue)) {
-                        set(values, fieldName, existingValue);
-                    }
-                    else if (!isDirty && !isUndefined(newValue)) {
-                        setValue(fieldName, newValue);
-                    }
+    const onChange = async (event) => {
+        _state.mount = true;
+        const target = event.target;
+        let name = target.name;
+        let isFieldValueUpdated = true;
+        const field = get(_fields, name);
+        const _updateIsFieldValueUpdated = (fieldValue) => {
+            isFieldValueUpdated =
+                Number.isNaN(fieldValue) ||
+                    (isDateObject(fieldValue) && isNaN(fieldValue.getTime())) ||
+                    deepEqual(fieldValue, get(_formValues, name, fieldValue));
+        };
+        if (field) {
+            let error;
+            let isValid;
+            const fieldValue = target.type
+                ? getFieldValue(field._f)
+                : getEventValue(event);
+            const isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
+            const hasNoValidationEffect = !hasValidation(field._f) &&
+                !props.validate &&
+                !_options.resolver &&
+                !get(_formState.errors, name) &&
+                !field._f.deps;
+            const shouldSkipValidation = hasNoValidationEffect ||
+                skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, _validationModeAfterSubmit, _validationModeBeforeSubmit);
+            const watched = isWatched(name, _names, isBlurEvent);
+            set(_formValues, name, fieldValue);
+            if (isBlurEvent) {
+                if (!target || !target.readOnly) {
+                    field._f.onBlur && field._f.onBlur(event);
+                    const pendingDelayError = delayErrorCallbacks[name];
+                    pendingDelayError && pendingDelayError(0);
                 }
             }
-            else {
-                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;
-                            if (isHTMLElement(fieldReference)) {
-                                const form = fieldReference.closest('form');
-                                if (form) {
-                                    form.reset();
-                                    break;
-                                }
-                            }
+            else if (field._f.onChange) {
+                field._f.onChange(event);
+            }
+            const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent);
+            const shouldRender = !isEmptyObject(fieldState) || watched;
+            !isBlurEvent &&
+                _subjects.state.next({
+                    name,
+                    type: event.type,
+                    ...(_valuesSubscriberCount
+                        ? { values: cloneObject(_formValues) }
+                        : {}),
+                });
+            if (shouldSkipValidation) {
+                if ((!hasNoValidationEffect || !_formState.isValid) &&
+                    (_proxyFormState.isValid || _proxySubscribeFormState.isValid)) {
+                    if (_options.mode === 'onBlur') {
+                        if (isBlurEvent) {
+                            _setValid();
                         }
                     }
-                }
-                if (keepStateOptions.keepFieldsRef) {
-                    for (const fieldName of _names.mount) {
-                        setValue(fieldName, get(values, fieldName));
+                    else if (!isBlurEvent) {
+                        _setValid();
                     }
                 }
-                else {
-                    _fields = {};
+                return (shouldRender &&
+                    _subjects.state.next({ name, ...(watched ? {} : fieldState) }));
+            }
+            if (!_options.resolver && props.validate) {
+                await validateForm({
+                    name: name,
+                    eventType: event.type,
+                });
+            }
+            !isBlurEvent && watched && _subjects.state.next({ ..._formState });
+            if (_options.resolver) {
+                const { errors } = await _runSchema([name]);
+                _updateIsValidating([name]);
+                _updateIsFieldValueUpdated(fieldValue);
+                if (!isFieldValueUpdated) {
+                    !isEmptyObject(fieldState) && _subjects.state.next(fieldState);
+                    return;
                 }
+                const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
+                const errorLookupResult = schemaErrorLookup(errors, _fields, previousErrorLookupResult.name || name);
+                error = errorLookupResult.error;
+                name = errorLookupResult.name;
+                isValid = isEmptyObject(errors);
             }
-            if (_options.shouldUnregister) {
-                _formValues = keepStateOptions.keepDefaultValues
-                    ? cloneObject(_defaultValues)
-                    : {};
-                if (keepStateOptions.keepFieldsRef) {
-                    for (const fieldName of _names.mount) {
-                        set(_formValues, fieldName, get(values, fieldName));
+            else {
+                _updateIsValidating([name], true);
+                error = (await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
+                _updateIsValidating([name]);
+                _updateIsFieldValueUpdated(fieldValue);
+                if (isFieldValueUpdated) {
+                    if (error) {
+                        isValid = false;
+                    }
+                    else if (_proxyFormState.isValid ||
+                        _proxySubscribeFormState.isValid) {
+                        isValid = await executeBuiltInValidation({
+                            fields: _fields,
+                            onlyCheckValid: true,
+                            name: name,
+                            eventType: event.type,
+                        });
                     }
                 }
             }
-            else {
-                _formValues = cloneObject(values);
+            if (isFieldValueUpdated) {
+                field._f.deps &&
+                    (!Array.isArray(field._f.deps) || field._f.deps.length > 0) &&
+                    trigger(field._f.deps);
+                shouldRenderByError(name, isValid, error, fieldState);
             }
-            _subjects.array.next({
-                values: { ...values },
-            });
-            _subjects.state.next({
-                values: { ...values },
-            });
         }
-        _names = {
-            mount: keepStateOptions.keepDirtyValues ? _names.mount : new Set(),
-            unMount: new Set(),
-            array: new Set(),
-            registerName: new Set(),
-            disabled: new Set(),
-            watch: new Set(),
-            watchAll: false,
-            focus: '',
-        };
-        _state.mount =
-            !_proxyFormState.isValid ||
-                !!keepStateOptions.keepIsValid ||
-                !!keepStateOptions.keepDirtyValues ||
-                (!_options.shouldUnregister && !isEmptyObject(values));
-        _state.watch = !!_options.shouldUnregister;
-        _state.keepIsValid = !!keepStateOptions.keepIsValid;
-        _state.action = false;
-        if (!keepStateOptions.keepErrors) {
-            _formState.errors = {};
+    };
+    const _focusInput = (ref, key) => {
+        if (get(_formState.errors, key) && ref.focus) {
+            ref.focus();
+            return 1;
         }
-        _subjects.state.next({
-            submitCount: keepStateOptions.keepSubmitCount
-                ? _formState.submitCount
-                : 0,
-            isDirty: isEmptyResetValues
-                ? false
-                : keepStateOptions.keepDirty
-                    ? _formState.isDirty
-                    : keepStateOptions.keepValues
-                        ? _getDirty()
-                        : !!(keepStateOptions.keepDefaultValues &&
-                            !deepEqual(formValues, _defaultValues)),
-            isSubmitted: keepStateOptions.keepIsSubmitted
-                ? _formState.isSubmitted
-                : false,
-            dirtyFields: isEmptyResetValues
-                ? {}
-                : keepStateOptions.keepDirtyValues
-                    ? keepStateOptions.keepDefaultValues && _formValues
-                        ? getDirtyFields(_defaultValues, _formValues)
-                        : _formState.dirtyFields
-                    : keepStateOptions.keepDefaultValues && formValues
-                        ? getDirtyFields(_defaultValues, formValues)
-                        : keepStateOptions.keepDirty
-                            ? _formState.dirtyFields
-                            : {},
-            touchedFields: keepStateOptions.keepTouched
-                ? _formState.touchedFields
-                : {},
-            errors: keepStateOptions.keepErrors ? _formState.errors : {},
-            isSubmitSuccessful: keepStateOptions.keepIsSubmitSuccessful
-                ? _formState.isSubmitSuccessful
-                : false,
-            isSubmitting: false,
-            defaultValues: _defaultValues,
-        });
+        return;
     };
-    const reset = (formValues, keepStateOptions) => _reset(isFunction(formValues)
-        ? formValues(_formValues)
-        : formValues, { ..._options.resetOptions, ...keepStateOptions });
-    const setFocus = (name, options = {}) => {
-        const field = get(_fields, name);
-        const fieldReference = field && field._f;
-        if (fieldReference) {
-            const fieldRef = fieldReference.refs
-                ? fieldReference.refs[0]
-                : fieldReference.ref;
-            if (fieldRef.focus) {
-                setTimeout(() => {
-                    fieldRef.focus();
-                    options.shouldSelect &&
-                        isFunction(fieldRef.select) &&
-                        fieldRef.select();
+    const trigger = async (name, options = {}) => {
+        let isValid;
+        let validationResult;
+        const fieldNames = convertToArrayPayload(name);
+        if (_options.resolver) {
+            const errors = await executeSchemaAndUpdateState(isUndefined(name) ? name : fieldNames);
+            isValid = isEmptyObject(errors);
+            validationResult = name
+                ? !fieldNames.some((name) => get(errors, name))
+                : isValid;
+        }
+        else if (name) {
+            validationResult = (await Promise.all(fieldNames.map(async (fieldName) => {
+                const field = get(_fields, fieldName);
+                return await executeBuiltInValidation({
+                    fields: field && field._f ? { [fieldName]: field } : field,
+                    eventType: EVENTS.TRIGGER,
                 });
+            }))).every(Boolean);
+            !(!validationResult && !_formState.isValid) && _setValid();
+        }
+        else {
+            validationResult = isValid = await executeBuiltInValidation({
+                fields: _fields,
+                name,
+                eventType: EVENTS.TRIGGER,
+            });
+        }
+        if (options.delayError && _options.delayError && isString(name)) {
+            const error = get(_formState.errors, name);
+            if (error) {
+                unset(_formState.errors, name);
+                delayErrorCallbacks[name] = debounce(name, () => updateErrors(name, error));
+                delayErrorCallbacks[name](_options.delayError);
+            }
+            else {
+                clearTimeout(timers[name]);
+                delete delayErrorCallbacks[name];
             }
         }
+        _subjects.state.next({
+            ...(!isString(name) ||
+                ((_proxyFormState.isValid || _proxySubscribeFormState.isValid) &&
+                    isValid !== _formState.isValid)
+                ? {}
+                : { name }),
+            ...(_options.resolver || !name ? { isValid } : {}),
+            errors: _formState.errors,
+        });
+        options.shouldFocus &&
+            !validationResult &&
+            iterateFieldsByAction(_fields, _focusInput, name ? fieldNames : _names.mount);
+        return validationResult;
     };
-    const _setFormState = (updatedFormState) => {
-        _formState = {
-            ..._formState,
-            ...updatedFormState,
+    const getValues = (fieldNames, config) => {
+        let values = {
+            ...(_state.mount ? _formValues : _defaultValues),
         };
+        if (config) {
+            values = extractFormValues(config.dirtyFields ? _formState.dirtyFields : _formState.touchedFields, values);
+        }
+        return isUndefined(fieldNames)
+            ? values
+            : isString(fieldNames)
+                ? get(values, fieldNames)
+                : fieldNames.map((name) => get(values, name));
     };
-    const _resetDefaultValues = () => isFunction(_options.defaultValues) &&
-        _options.defaultValues().then((values) => {
-            reset(values, _options.resetOptions);
-            _subjects.state.next({
-                isLoading: false,
+    const getFieldState = (name, formState) => ({
+        invalid: !!get((formState || _formState).errors, name),
+        isDirty: !!get((formState || _formState).dirtyFields, name),
+        error: get((formState || _formState).errors, name),
+        isValidating: !!get(_formState.validatingFields, name),
+        isTouched: !!get((formState || _formState).touchedFields, name),
+    });
+    const clearErrors = (name) => {
+        const names = name ? convertToArrayPayload(name) : undefined;
+        names === null || names === void 0 ? void 0 : names.forEach((inputName) => unset(_formState.errors, inputName));
+        if (names) {
+            names.forEach((inputName) => {
+                _subjects.state.next({
+                    name: inputName,
+                    errors: _formState.errors,
+                });
             });
-        });
-    const resetDefaultValues = (values, options = {}) => {
-        _defaultValues = cloneObject(values);
-        if (!options.keepDirty) {
-            const newDirtyFields = getDirtyFields(_defaultValues, _formValues);
-            _formState.dirtyFields = newDirtyFields;
-            _formState.isDirty = !isEmptyObject(newDirtyFields);
         }
-        if (!options.keepIsValid) {
-            _setValid();
+        else {
+            _subjects.state.next({
+                errors: {},
+            });
         }
+    };
+    const setError = (name, error, options) => {
+        const ref = (get(_fields, name, { _f: {} })._f || {}).ref;
+        const currentError = get(_formState.errors, name) || {};
+        const { ref: currentRef, message, type, ...restOfErrorTree } = currentError;
+        set(_formState.errors, name, {
+            ...restOfErrorTree,
+            ...error,
+            ref,
+        });
         _subjects.state.next({
-            ..._formState,
-            defaultValues: _defaultValues,
+            name,
+            errors: _formState.errors,
+            isValid: false,
         });
+        options && options.shouldFocus && ref && ref.focus && ref.focus();
     };
-    const methods = {
-        control: {
-            register,
-            unregister,
-            getFieldState,
-            handleSubmit,
-            setError,
-            _subscribe,
-            _runSchema,
-            _updateIsValidating,
-            _focusError,
-            _getWatch,
-            _getDirty,
-            _setValid,
-            _setFieldArray,
-            _setDisabledField,
-            _setErrors,
-            _getFieldArray,
-            _reset,
-            _resetDefaultValues,
-            _removeUnmounted,
-            _disableForm,
-            _subjects,
-            _proxyFormState,
-            get _fields() {
-                return _fields;
-            },
-            get _formValues() {
-                return _formValues;
-            },
-            get _state() {
-                return _state;
-            },
-            set _state(value) {
-                _state = value;
-            },
-            get _defaultValues() {
-                return _defaultValues;
-            },
-            get _names() {
-                return _names;
-            },
-            set _names(value) {
-                _names = value;
-            },
-            get _formState() {
-                return _formState;
-            },
-            get _options() {
-                return _options;
+    const watch = (name, defaultValue) => {
+        if (isFunction(name)) {
+            _valuesSubscriberCount++;
+            const { unsubscribe } = _subjects.state.subscribe({
+                next: (payload) => 'values' in payload &&
+                    name(payload.values || _getWatch(undefined, defaultValue), payload),
+            });
+            let called = false;
+            return {
+                unsubscribe: () => {
+                    if (called) {
+                        return;
+                    }
+                    called = true;
+                    _valuesSubscriberCount--;
+                    unsubscribe();
+                },
+            };
+        }
+        return _getWatch(name, defaultValue, true);
+    };
+    const _subscribe = (props) => {
+        var _a;
+        const needsValues = !!((_a = props.formState) === null || _a === void 0 ? void 0 : _a.values);
+        if (needsValues) {
+            _valuesSubscriberCount++;
+        }
+        const { unsubscribe } = _subjects.state.subscribe({
+            next: (formState) => {
+                if (shouldSubscribeByName(props.name, formState.name, props.exact) &&
+                    shouldRenderFormState(formState, props.formState || _proxyFormState, _setFormState, props.reRenderRoot)) {
+                    const snapshot = { ..._formValues };
+                    props.callback({
+                        values: snapshot,
+                        ..._formState,
+                        ...formState,
+                        defaultValues: _defaultValues,
+                    });
+                }
             },
-            set _options(value) {
-                _options = {
-                    ..._options,
-                    ...value,
-                };
-                _validationModeBeforeSubmit = getValidationModes(_options.mode);
-                _validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
+        });
+        if (!needsValues) {
+            return unsubscribe;
+        }
+        let called = false;
+        return () => {
+            if (called) {
+                return;
+            }
+            called = true;
+            _valuesSubscriberCount--;
+            unsubscribe();
+        };
+    };
+    const subscribe = (props) => {
+        _state.mount = true;
+        _proxySubscribeFormState = {
+            ..._proxySubscribeFormState,
+            ...props.formState,
+        };
+        return _subscribe({
+            ...props,
+            formState: {
+                ...defaultProxyFormState,
+                ...props.formState,
             },
-        },
-        subscribe,
-        trigger,
-        register,
-        handleSubmit,
-        watch,
-        setValue,
-        setValues,
-        getValues,
-        reset,
-        resetField,
-        resetDefaultValues,
-        clearErrors,
-        unregister,
-        setError,
-        setFocus,
-        getFieldState,
+        });
+    };
+    const unregister = (name, options = {}) => {
+        for (const fieldName of name ? convertToArrayPayload(name) : _names.mount) {
+            _names.mount.delete(fieldName);
+            _names.array.delete(fieldName);
+            if (!options.keepValue) {
+                unset(_fields, fieldName);
+                unset(_formValues, fieldName);
+            }
+            !options.keepError && unset(_formState.errors, fieldName);
+            !options.keepDirty && unset(_formState.dirtyFields, fieldName);
+            !options.keepTouched && unset(_formState.touchedFields, fieldName);
+            !options.keepIsValidating &&
+                unset(_formState.validatingFields, fieldName);
+            !_options.shouldUnregister &&
+                !options.keepDefaultValue &&
+                unset(_defaultValues, fieldName);
+        }
+        _subjects.state.next({
+            values: cloneObject(_formValues),
+        });
+        _subjects.state.next({
+            ..._formState,
+            ...(!options.keepDirty ? {} : { isDirty: _getDirty() }),
+        });
+        !options.keepIsValid && _setValid();
     };
-    return {
-        ...methods,
-        formControl: methods,
+    const _setDisabledField = ({ disabled, name, }) => {
+        if ((isBoolean(disabled) && _state.mount) ||
+            !!disabled ||
+            _names.disabled.has(name)) {
+            const wasDisabled = _names.disabled.has(name);
+            const isDisabled = !!disabled;
+            const disabledStateChanged = wasDisabled !== isDisabled;
+            disabled ? _names.disabled.add(name) : _names.disabled.delete(name);
+            disabledStateChanged && _state.mount && !_state.action && _setValid();
+        }
     };
-}
-
-var generateId = () => {
-    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
-        return crypto.randomUUID();
-    }
-    const d = typeof performance === 'undefined' ? Date.now() : performance.now() * 1000;
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-        const r = ((Math.random() * 16 + d) % 16) | 0;
-        return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);
-    });
-};
-
-var getFocusFieldName = (name, index, options = {}) => options.shouldFocus || isUndefined(options.shouldFocus)
-    ? options.focusName ||
-        `${name}.${isUndefined(options.focusIndex) ? index : options.focusIndex}.`
-    : '';
-
-var appendAt = (data, value) => [
-    ...data,
-    ...convertToArrayPayload(value),
-];
-
-var fillEmptyArray = (value) => Array.isArray(value) ? value.map(() => undefined) : undefined;
-
-function insert(data, index, value) {
-    return [
-        ...data.slice(0, index),
-        ...convertToArrayPayload(value),
-        ...data.slice(index),
-    ];
-}
-
-var moveArrayAt = (data, from, to) => {
-    if (!Array.isArray(data)) {
-        return [];
-    }
-    if (isUndefined(data[to])) {
-        data[to] = undefined;
-    }
-    data.splice(to, 0, data.splice(from, 1)[0]);
-    return data;
-};
-
-var prependAt = (data, value) => [
-    ...convertToArrayPayload(value),
-    ...convertToArrayPayload(data),
-];
-
-function removeAtIndexes(data, indexes) {
-    let i = 0;
-    const temp = [...data];
-    for (const index of indexes) {
-        temp.splice(index - i, 1);
-        i++;
-    }
-    return compact(temp).length ? temp : [];
-}
-var removeArrayAt = (data, index) => isUndefined(index)
-    ? []
-    : removeAtIndexes(data, convertToArrayPayload(index).sort((a, b) => a - b));
-
-var swapArrayAt = (data, indexA, indexB) => {
-    [data[indexA], data[indexB]] = [data[indexB], data[indexA]];
-};
-
-var updateAt = (fieldValues, index, value) => {
-    fieldValues[index] = value;
-    return fieldValues;
-};
-
-/**
- * A custom hook that exposes convenient methods to perform operations with a list of dynamic inputs that need to be appended, updated, removed etc. • [Demo](https://codesandbox.io/s/react-hook-form-usefieldarray-ssugn) • [Video](https://youtu.be/4MrbfGSFY2A)
- *
- * @remarks
- * [API](https://react-hook-form.com/docs/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 formControl = useFormControlContext();
-    const { control = formControl, name, keyName = 'id', disabled, shouldUnregister, rules, } = props;
-    const [fields, setFields] = React.useState(control._getFieldArray(name));
-    const ids = React.useRef(control._getFieldArray(name).map(generateId));
-    const _actioned = React.useRef(false);
-    if (!disabled) {
-        control._names.array.add(name);
-    }
-    React.useMemo(() => !disabled &&
-        rules &&
-        fields.length >= 0 &&
-        control.register(name, rules), [control, name, fields.length, rules, disabled]);
-    useIsomorphicLayoutEffect(() => {
-        if (disabled) {
-            return;
+    const register = (name, options = {}) => {
+        let field = get(_fields, name);
+        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
+        const shouldRevalidateRemount = !_names.registerName.has(name) && field && field._f && !field._f.mount;
+        set(_fields, name, {
+            ...(field || {}),
+            _f: {
+                ...(field && field._f ? field._f : { ref: { name } }),
+                name,
+                mount: true,
+                ...options,
+            },
+        });
+        _names.mount.add(name);
+        if (field && !shouldRevalidateRemount) {
+            _setDisabledField({
+                disabled: isBoolean(options.disabled)
+                    ? options.disabled
+                    : _options.disabled,
+                name,
+            });
         }
-        return control._subjects.array.subscribe({
-            next: ({ values, name: fieldArrayName, }) => {
-                if (fieldArrayName === name || !fieldArrayName) {
-                    const fieldValues = get(values, name);
-                    if (Array.isArray(fieldValues)) {
-                        setFields(fieldValues);
-                        ids.current = fieldValues.map(generateId);
+        else {
+            updateValidAndValue(name, true, options.value);
+        }
+        return {
+            ...(disabledIsDefined
+                ? { disabled: options.disabled || _options.disabled }
+                : {}),
+            ...(_options.progressive
+                ? {
+                    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) {
+                    _names.registerName.add(name);
+                    register(name, options);
+                    _names.registerName.delete(name);
+                    field = get(_fields, name);
+                    const fieldRef = isUndefined(ref.value)
+                        ? ref.querySelectorAll
+                            ? ref.querySelectorAll('input,select,textarea')[0] || ref
+                            : ref
+                        : ref;
+                    const radioOrCheckbox = isRadioOrCheckbox(fieldRef);
+                    const refs = field._f.refs || [];
+                    if (radioOrCheckbox
+                        ? refs.find((option) => option === fieldRef)
+                        : fieldRef === field._f.ref) {
+                        return;
                     }
-                    else if (!fieldArrayName) {
-                        setFields([]);
-                        ids.current = [];
+                    set(_fields, name, {
+                        _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);
+                }
+                else {
+                    field = get(_fields, name, {});
+                    if (field._f) {
+                        field._f.mount = false;
                     }
+                    (_options.shouldUnregister || options.shouldUnregister) &&
+                        !(isNameInFieldArray(_names.array, name) && _state.action) &&
+                        _names.unMount.add(name);
                 }
             },
-        }).unsubscribe;
-    }, [control, name, disabled]);
-    const updateValues = React.useCallback((updatedFieldArrayValues) => {
-        _actioned.current = true;
-        control._setFieldArray(name, updatedFieldArrayValues);
-    }, [control, name]);
-    const append = (value, options) => {
-        if (disabled) {
-            return;
+        };
+    };
+    const _focusError = () => _options.shouldFocusError &&
+        !_options.shouldUseNativeValidation &&
+        iterateFieldsByAction(_fields, _focusInput, _names.mount);
+    const _disableForm = (disabled) => {
+        if (isBoolean(disabled)) {
+            _subjects.state.next({ disabled });
+            iterateFieldsByAction(_fields, (ref, name) => {
+                const currentField = get(_fields, name);
+                if (currentField) {
+                    ref.disabled = currentField._f.disabled || disabled;
+                    if (Array.isArray(currentField._f.refs)) {
+                        currentField._f.refs.forEach((inputRef) => {
+                            inputRef.disabled = currentField._f.disabled || disabled;
+                        });
+                    }
+                }
+            }, 0, false);
         }
-        const appendValue = convertToArrayPayload(cloneObject(value));
-        const updatedFieldArrayValues = appendAt(control._getFieldArray(name), appendValue);
-        control._names.focus = getFocusFieldName(name, updatedFieldArrayValues.length - 1, options);
-        ids.current = appendAt(ids.current, appendValue.map(generateId));
-        updateValues(updatedFieldArrayValues);
-        setFields(updatedFieldArrayValues);
-        control._setFieldArray(name, updatedFieldArrayValues, appendAt, {
-            argA: fillEmptyArray(value),
-        });
     };
-    const prepend = (value, options) => {
-        if (disabled) {
-            return;
+    const handleSubmit = (onValid, onInvalid) => async (e) => {
+        let onValidError = undefined;
+        if (e) {
+            e.preventDefault && e.preventDefault();
+            e.persist &&
+                e.persist();
         }
-        const prependValue = convertToArrayPayload(cloneObject(value));
-        const updatedFieldArrayValues = prependAt(control._getFieldArray(name), prependValue);
-        control._names.focus = getFocusFieldName(name, 0, options);
-        ids.current = prependAt(ids.current, prependValue.map(generateId));
-        updateValues(updatedFieldArrayValues);
-        setFields(updatedFieldArrayValues);
-        control._setFieldArray(name, updatedFieldArrayValues, prependAt, {
-            argA: fillEmptyArray(value),
+        let fieldValues = cloneObject(_formValues);
+        _subjects.state.next({
+            isSubmitting: true,
         });
-    };
-    const remove = (index) => {
-        if (disabled) {
-            return;
+        if (_options.resolver) {
+            const { errors, values } = await _runSchema();
+            _updateIsValidating();
+            _formState.errors = errors;
+            fieldValues = cloneObject(values);
         }
-        const updatedFieldArrayValues = removeArrayAt(control._getFieldArray(name), index);
-        ids.current = removeArrayAt(ids.current, index);
-        updateValues(updatedFieldArrayValues);
-        setFields(updatedFieldArrayValues);
-        !Array.isArray(get(control._fields, name)) &&
-            set(control._fields, name, undefined);
-        control._setFieldArray(name, updatedFieldArrayValues, removeArrayAt, {
-            argA: index,
-        });
-    };
-    const insert$1 = (index, value, options) => {
-        if (disabled) {
-            return;
+        else {
+            await executeBuiltInValidation({
+                fields: _fields,
+                eventType: EVENTS.SUBMIT,
+            });
         }
-        const insertValue = convertToArrayPayload(cloneObject(value));
-        const updatedFieldArrayValues = insert(control._getFieldArray(name), index, insertValue);
-        control._names.focus = getFocusFieldName(name, index, options);
-        ids.current = insert(ids.current, index, insertValue.map(generateId));
-        updateValues(updatedFieldArrayValues);
-        setFields(updatedFieldArrayValues);
-        control._setFieldArray(name, updatedFieldArrayValues, insert, {
-            argA: index,
-            argB: fillEmptyArray(value),
-        });
-    };
-    const swap = (indexA, indexB) => {
-        if (disabled) {
-            return;
+        if (_names.disabled.size) {
+            for (const name of _names.disabled) {
+                unset(fieldValues, name);
+            }
         }
-        const updatedFieldArrayValues = control._getFieldArray(name);
-        swapArrayAt(updatedFieldArrayValues, indexA, indexB);
-        swapArrayAt(ids.current, indexA, indexB);
-        updateValues(updatedFieldArrayValues);
-        setFields(updatedFieldArrayValues);
-        control._setFieldArray(name, updatedFieldArrayValues, swapArrayAt, {
-            argA: indexA,
-            argB: indexB,
-        }, false);
-    };
-    const move = (from, to) => {
-        if (disabled) {
-            return;
+        unset(_formState.errors, ROOT_ERROR_TYPE);
+        if (isEmptyObject(_formState.errors)) {
+            _subjects.state.next({
+                errors: {},
+            });
+            try {
+                await onValid(fieldValues, e);
+            }
+            catch (error) {
+                onValidError = error;
+            }
         }
-        const updatedFieldArrayValues = control._getFieldArray(name);
-        moveArrayAt(updatedFieldArrayValues, from, to);
-        moveArrayAt(ids.current, from, to);
-        updateValues(updatedFieldArrayValues);
-        setFields(updatedFieldArrayValues);
-        control._setFieldArray(name, updatedFieldArrayValues, moveArrayAt, {
-            argA: from,
-            argB: to,
-        }, false);
-    };
-    const update = (index, value) => {
-        if (disabled) {
-            return;
+        else {
+            if (onInvalid) {
+                await onInvalid({ ..._formState.errors }, e);
+            }
+            _focusError();
+            setTimeout(_focusError);
+        }
+        _subjects.state.next({
+            isSubmitted: true,
+            isSubmitting: false,
+            isSubmitSuccessful: isEmptyObject(_formState.errors) && !onValidError,
+            submitCount: _formState.submitCount + 1,
+            errors: _formState.errors,
+        });
+        if (onValidError) {
+            throw onValidError;
         }
-        const updateValue = cloneObject(value);
-        const updatedFieldArrayValues = updateAt(control._getFieldArray(name), index, updateValue);
-        ids.current = [...updatedFieldArrayValues].map((item, i) => !item || i === index ? generateId() : ids.current[i]);
-        updateValues(updatedFieldArrayValues);
-        setFields([...updatedFieldArrayValues]);
-        control._setFieldArray(name, updatedFieldArrayValues, updateAt, {
-            argA: index,
-            argB: updateValue,
-        }, true, false);
     };
-    const replace = (value) => {
-        if (disabled) {
-            return;
+    const resetField = (name, options = {}) => {
+        if (get(_fields, name)) {
+            if (isUndefined(options.defaultValue)) {
+                setValue(name, cloneObject(get(_defaultValues, name)));
+            }
+            else {
+                setValue(name, options.defaultValue);
+                set(_defaultValues, name, cloneObject(options.defaultValue));
+            }
+            if (!options.keepTouched) {
+                unset(_formState.touchedFields, name);
+            }
+            if (!options.keepDirty) {
+                unset(_formState.dirtyFields, name);
+                _formState.isDirty = options.defaultValue
+                    ? _getDirty(name, cloneObject(get(_defaultValues, name)))
+                    : _getDirty();
+            }
+            if (!options.keepError) {
+                unset(_formState.errors, name);
+                _proxyFormState.isValid && _setValid();
+            }
+            _subjects.state.next({ ..._formState });
         }
-        const updatedFieldArrayValues = convertToArrayPayload(cloneObject(value));
-        ids.current = updatedFieldArrayValues.map(generateId);
-        updateValues([...updatedFieldArrayValues]);
-        setFields([...updatedFieldArrayValues]);
-        control._setFieldArray(name, [...updatedFieldArrayValues], (data) => data, {}, true, false);
     };
-    React.useEffect(() => {
-        if (disabled) {
-            return;
+    const _reset = (formValues, keepStateOptions = {}) => {
+        const updatedValues = formValues ? cloneObject(formValues) : _defaultValues;
+        const cloneUpdatedValues = cloneObject(updatedValues);
+        const isEmptyResetValues = isEmptyObject(formValues);
+        const values = cloneUpdatedValues;
+        const fieldRefs = _fields;
+        if (!keepStateOptions.keepDefaultValues) {
+            _defaultValues = updatedValues;
         }
-        control._state.action = false;
-        isWatched(name, control._names) &&
-            control._subjects.state.next({
-                ...control._formState,
-            });
-        const validationModes = getValidationModes(control._options.mode);
-        if (_actioned.current &&
-            (!validationModes.isOnSubmit || control._formState.isSubmitted) &&
-            !getValidationModes(control._options.reValidateMode).isOnSubmit &&
-            !validationModes.isOnBlur) {
-            if (control._options.resolver) {
-                control._runSchema([name]).then((result) => {
-                    control._updateIsValidating([name]);
-                    const error = get(result.errors, name);
-                    const existingError = get(control._formState.errors, name);
-                    if (existingError
-                        ? (!error && existingError.type) ||
-                            (error &&
-                                (existingError.type !== error.type ||
-                                    existingError.message !== error.message))
-                        : error && error.type) {
-                        error
-                            ? set(control._formState.errors, name, error)
-                            : unset(control._formState.errors, name);
-                        control._subjects.state.next({
-                            errors: control._formState.errors,
-                        });
+        if (!keepStateOptions.keepValues) {
+            if (keepStateOptions.keepDirtyValues) {
+                const fieldsToCheck = new Set([
+                    ..._names.mount,
+                    ...Object.keys(getDirtyFields(_defaultValues, _formValues, undefined, fieldRefs)),
+                ]);
+                for (const fieldName of Array.from(fieldsToCheck)) {
+                    const isDirty = get(_formState.dirtyFields, fieldName);
+                    const existingValue = get(_formValues, fieldName);
+                    const newValue = get(values, fieldName);
+                    if (isDirty && !isUndefined(existingValue)) {
+                        set(values, fieldName, existingValue);
                     }
-                });
+                    else if (!isDirty && !isUndefined(newValue)) {
+                        setValue(fieldName, newValue);
+                    }
+                }
             }
             else {
-                const field = get(control._fields, name);
-                if (field &&
-                    field._f &&
-                    !(getValidationModes(control._options.reValidateMode).isOnSubmit &&
-                        getValidationModes(control._options.mode).isOnSubmit)) {
-                    validateField(field, control._names.disabled, control._formValues, control._options.criteriaMode === VALIDATION_MODE.all, control._options.shouldUseNativeValidation, true).then((error) => !isEmptyObject(error) &&
-                        control._subjects.state.next({
-                            errors: updateFieldArrayRootError(control._formState.errors, error, name),
-                        }));
+                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;
+                            if (isHTMLElement(fieldReference)) {
+                                const form = fieldReference.closest('form');
+                                if (form) {
+                                    form.reset();
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                }
+                if (keepStateOptions.keepFieldsRef) {
+                    for (const fieldName of _names.mount) {
+                        setValue(fieldName, get(values, fieldName));
+                    }
+                }
+                else {
+                    _fields = {};
+                }
+            }
+            if (_options.shouldUnregister) {
+                _formValues = keepStateOptions.keepDefaultValues
+                    ? cloneObject(_defaultValues)
+                    : {};
+                if (keepStateOptions.keepFieldsRef) {
+                    for (const fieldName of _names.mount) {
+                        set(_formValues, fieldName, get(values, fieldName));
+                    }
                 }
             }
-        }
-        control._subjects.state.next({
-            name,
-            values: cloneObject(control._formValues),
-        });
-        control._names.focus &&
-            iterateFieldsByAction(control._fields, (ref, key) => {
-                if (control._names.focus &&
-                    key.startsWith(control._names.focus) &&
-                    ref.focus) {
-                    ref.focus();
-                    return 1;
-                }
-                return;
+            else {
+                _formValues = cloneObject(values);
+            }
+            _subjects.array.next({
+                values: { ...values },
+            });
+            _subjects.state.next({
+                name: undefined,
+                type: undefined,
+                values: { ...values },
             });
-        control._names.focus = '';
-        control._setValid();
-        _actioned.current = false;
-    }, [fields, name, control, disabled]);
-    React.useEffect(() => {
-        if (!disabled) {
-            !get(control._formValues, name) && control._setFieldArray(name);
         }
-        return () => {
-            if (disabled) {
-                return;
-            }
-            const shouldKeepFieldArrayValues = !(control._options.shouldUnregister || shouldUnregister);
-            const updateMounted = (name, value) => {
-                const field = get(control._fields, name);
-                if (field && field._f) {
-                    field._f.mount = value;
-                }
-            };
-            if (_actioned.current && shouldKeepFieldArrayValues) {
-                control._subjects.state.next({
-                    name,
-                    values: cloneObject(control._formValues),
+        _names = {
+            mount: keepStateOptions.keepDirtyValues ? _names.mount : new Set(),
+            unMount: new Set(),
+            array: new Set(),
+            registerName: new Set(),
+            disabled: new Set(),
+            watch: new Set(),
+            watchAll: false,
+            focus: '',
+        };
+        _state.mount =
+            !_proxyFormState.isValid ||
+                !!keepStateOptions.keepIsValid ||
+                !!keepStateOptions.keepDirtyValues ||
+                (!_options.shouldUnregister && !isEmptyObject(values));
+        _state.watch = !!_options.shouldUnregister;
+        _state.keepIsValid = !!keepStateOptions.keepIsValid;
+        _state.action = false;
+        if (!keepStateOptions.keepErrors) {
+            _formState.errors = {};
+        }
+        _subjects.state.next({
+            submitCount: keepStateOptions.keepSubmitCount
+                ? _formState.submitCount
+                : 0,
+            isDirty: isEmptyResetValues
+                ? false
+                : keepStateOptions.keepDirty
+                    ? _formState.isDirty
+                    : keepStateOptions.keepValues
+                        ? _getDirty()
+                        : !!(keepStateOptions.keepDefaultValues &&
+                            !deepEqual(formValues, _defaultValues)),
+            isSubmitted: keepStateOptions.keepIsSubmitted
+                ? _formState.isSubmitted
+                : false,
+            dirtyFields: isEmptyResetValues
+                ? {}
+                : keepStateOptions.keepDirtyValues
+                    ? keepStateOptions.keepDefaultValues && _formValues
+                        ? getDirtyFields(_defaultValues, _formValues, undefined, fieldRefs)
+                        : _formState.dirtyFields
+                    : keepStateOptions.keepDefaultValues && formValues
+                        ? getDirtyFields(_defaultValues, formValues, undefined, fieldRefs)
+                        : keepStateOptions.keepDirty
+                            ? _formState.dirtyFields
+                            : {},
+            touchedFields: keepStateOptions.keepTouched
+                ? _formState.touchedFields
+                : {},
+            errors: keepStateOptions.keepErrors ? _formState.errors : {},
+            isSubmitSuccessful: keepStateOptions.keepIsSubmitSuccessful
+                ? _formState.isSubmitSuccessful
+                : false,
+            isSubmitting: false,
+            defaultValues: _defaultValues,
+        });
+    };
+    const reset = (formValues, keepStateOptions) => _reset(isFunction(formValues)
+        ? formValues(_formValues)
+        : formValues, { ..._options.resetOptions, ...keepStateOptions });
+    const setFocus = (name, options = {}) => {
+        const field = get(_fields, name);
+        const fieldReference = field && field._f;
+        if (fieldReference) {
+            const fieldRef = fieldReference.refs
+                ? fieldReference.refs[0]
+                : fieldReference.ref;
+            if (fieldRef.focus) {
+                setTimeout(() => {
+                    fieldRef.focus();
+                    options.shouldSelect &&
+                        isFunction(fieldRef.select) &&
+                        fieldRef.select();
                 });
             }
-            shouldKeepFieldArrayValues
-                ? updateMounted(name, false)
-                : control.unregister(name);
+        }
+    };
+    const _setFormState = (updatedFormState) => {
+        // `name`, `type`, and `values` describe the event that produced this
+        // update, not the form's persisted state (they aren't part of
+        // `FormState`). Merging them in would leak a stale `name`/`type` from
+        // one event into a later, unrelated notification that doesn't specify
+        // its own.
+        const { name, type, values, ...formState } = updatedFormState;
+        _formState = {
+            ..._formState,
+            ...formState,
         };
-    }, [name, control, keyName, shouldUnregister, disabled]);
+    };
+    const _resetDefaultValues = () => isFunction(_options.defaultValues) &&
+        _options.defaultValues().then((values) => {
+            reset(values, _options.resetOptions);
+            _subjects.state.next({
+                isLoading: false,
+            });
+        });
+    const resetDefaultValues = (values, options = {}) => {
+        _defaultValues = cloneObject(values);
+        if (!options.keepDirty) {
+            const newDirtyFields = getDirtyFields(_defaultValues, _formValues, undefined, _fields);
+            _formState.dirtyFields = newDirtyFields;
+            _formState.isDirty = !isEmptyObject(newDirtyFields);
+        }
+        if (!options.keepIsValid) {
+            _setValid();
+        }
+        _subjects.state.next({
+            ..._formState,
+            defaultValues: _defaultValues,
+        });
+    };
+    const methods = {
+        control: {
+            register,
+            unregister,
+            getFieldState,
+            handleSubmit,
+            setError,
+            _subscribe,
+            _runSchema,
+            _updateIsValidating,
+            _focusError,
+            _getWatch,
+            _getDirty,
+            _setValid,
+            _setFieldArray,
+            _setDisabledField,
+            _setErrors,
+            _getFieldArray,
+            _reset,
+            _resetDefaultValues,
+            _removeUnmounted,
+            _disableForm,
+            _subjects,
+            _proxyFormState,
+            get _fields() {
+                return _fields;
+            },
+            get _formValues() {
+                return _formValues;
+            },
+            get _state() {
+                return _state;
+            },
+            set _state(value) {
+                _state = value;
+            },
+            get _defaultValues() {
+                return _defaultValues;
+            },
+            get _names() {
+                return _names;
+            },
+            set _names(value) {
+                _names = value;
+            },
+            get _formState() {
+                return _formState;
+            },
+            get _options() {
+                return _options;
+            },
+            set _options(value) {
+                _options = {
+                    ..._options,
+                    ...value,
+                };
+                _validationModeBeforeSubmit = getValidationModes(_options.mode);
+                _validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
+            },
+        },
+        subscribe,
+        trigger,
+        register,
+        handleSubmit,
+        watch,
+        setValue,
+        setValues,
+        getValues,
+        reset,
+        resetField,
+        resetDefaultValues,
+        clearErrors,
+        unregister,
+        setError,
+        setFocus,
+        getFieldState,
+    };
     return {
-        swap: React.useCallback(swap, [updateValues, name, control, disabled]),
-        move: React.useCallback(move, [updateValues, name, control, disabled]),
-        prepend: React.useCallback(prepend, [
-            updateValues,
-            name,
-            control,
-            disabled,
-        ]),
-        append: React.useCallback(append, [updateValues, name, control, disabled]),
-        remove: React.useCallback(remove, [updateValues, name, control, disabled]),
-        insert: React.useCallback(insert$1, [updateValues, name, control, disabled]),
-        update: React.useCallback(update, [updateValues, name, control, disabled]),
-        replace: React.useCallback(replace, [
-            updateValues,
-            name,
-            control,
-            disabled,
-        ]),
-        fields: React.useMemo(() => fields.map((field, index) => ({
-            ...field,
-            ...(isBoolean(disabled) ? { disabled } : {}),
-            [keyName]: ids.current[index] || generateId(),
-        })), [fields, keyName, disabled]),
+        ...methods,
+        formControl: methods,
     };
 }
 
@@ -3391,5 +3482,5 @@ function useForm(props = {}) {
  */
 const Watch = (props) => props.render(useWatch({ name: props.names, ...props }));
 
-export { Controller, Form, FormProvider, FormStateSubscribe, Watch, appendErrors, createFormControl, get, set, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
+export { Controller, FieldArray, Form, FormProvider, FormStateSubscribe, Watch, appendErrors, createFormControl, get, set, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
 //# sourceMappingURL=index.esm.mjs.map