react-hook-form 7.0.0-rc.8 → 7.0.3

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-var isUndefined = (val) => val === undefined;
+var isCheckBoxInput = (element) => element.type === 'checkbox';
 
 var isNullOrUndefined = (value) => value == null;
 
@@ -10,8 +10,20 @@ var isObject = (value) => !isNullOrUndefined(value) &&
     isObjectType(value) &&
     !(value instanceof Date);
 
+var getControllerValue = (event) => isObject(event) && event.target
+    ? isCheckBoxInput(event.target)
+        ? event.target.checked
+        : event.target.value
+    : event;
+
+var getNodeParentName = (name) => name.substring(0, name.search(/.\d/)) || name;
+
+var isNameInFieldArray = (names, name) => [...names].some((current) => getNodeParentName(name) === current);
+
 var compact = (value) => value.filter(Boolean);
 
+var isUndefined = (val) => val === undefined;
+
 var get = (obj = {}, path, defaultValue) => {
     const result = compact(path.split(/[,[\].]+?/)).reduce((result, key) => (isNullOrUndefined(result) ? result : result[key]), obj);
     return isUndefined(result) || result === obj
@@ -21,6 +33,175 @@ var get = (obj = {}, path, defaultValue) => {
         : result;
 };
 
+const EVENTS = {
+    BLUR: 'blur',
+    CHANGE: 'change',
+};
+const VALIDATION_MODE = {
+    onBlur: 'onBlur',
+    onChange: 'onChange',
+    onSubmit: 'onSubmit',
+    onTouched: 'onTouched',
+    all: 'all',
+};
+const SELECT = 'select';
+const UNDEFINED = 'undefined';
+const INPUT_VALIDATION_RULES = {
+    max: 'max',
+    min: 'min',
+    maxLength: 'maxLength',
+    minLength: 'minLength',
+    pattern: 'pattern',
+    required: 'required',
+    validate: 'validate',
+};
+
+var omit = (source, key) => {
+    const copy = Object.assign({}, source);
+    delete copy[key];
+    return copy;
+};
+
+const FormContext = React.createContext(null);
+FormContext.displayName = 'RHFContext';
+const useFormContext = () => React.useContext(FormContext);
+const FormProvider = (props) => (React.createElement(FormContext.Provider, { value: omit(props, 'children') }, props.children));
+
+var getProxyFormState = (isProxyEnabled, formState, readFormStateRef, localReadFormStateRef, isRoot = true) => isProxyEnabled
+    ? new Proxy(formState, {
+        get: (obj, prop) => {
+            if (prop in obj) {
+                if (readFormStateRef.current[prop] !== VALIDATION_MODE.all) {
+                    readFormStateRef.current[prop] = isRoot
+                        ? VALIDATION_MODE.all
+                        : true;
+                }
+                localReadFormStateRef &&
+                    (localReadFormStateRef.current[prop] = true);
+                return obj[prop];
+            }
+            return undefined;
+        },
+    })
+    : formState;
+
+var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
+
+var shouldRenderFormState = (formState, readFormStateRef, isRoot) => isEmptyObject(formState) ||
+    Object.keys(formState).length >= Object.keys(readFormStateRef).length ||
+    Object.keys(formState).find((key) => readFormStateRef[key] ===
+        (isRoot ? VALIDATION_MODE.all : true));
+
+var isWeb = typeof window !== UNDEFINED &&
+    typeof window.HTMLElement !== UNDEFINED &&
+    typeof document !== UNDEFINED;
+
+const isProxyEnabled = isWeb ? 'Proxy' in window : typeof Proxy !== UNDEFINED;
+
+function useFormState(props) {
+    const methods = useFormContext();
+    const { formStateRef, formStateSubjectRef, readFormStateRef } = (props && props.control) || methods.control;
+    const [formState, updateFormState] = React.useState(formStateRef.current);
+    const readFormState = React.useRef({
+        isDirty: false,
+        dirtyFields: false,
+        touchedFields: false,
+        isValidating: false,
+        isValid: false,
+        errors: false,
+    });
+    React.useEffect(() => {
+        const formStateSubscription = formStateSubjectRef.current.subscribe({
+            next: (formState) => {
+                shouldRenderFormState(formState, readFormState.current) &&
+                    updateFormState(Object.assign(Object.assign({}, formStateRef.current), formState));
+            },
+        });
+        return () => formStateSubscription.unsubscribe();
+    }, []);
+    return getProxyFormState(isProxyEnabled, formState, readFormStateRef, readFormState, false);
+}
+
+function useController({ name, rules, defaultValue, control, }) {
+    const methods = useFormContext();
+    const { defaultValuesRef, register, fieldsRef, fieldArrayNamesRef, controllerSubjectRef, } = control || methods.control;
+    const { onChange, onBlur, ref } = register(name, rules);
+    const [value, setInputStateValue] = React.useState(isUndefined(get(fieldsRef.current, name)._f.value) ||
+        isNameInFieldArray(fieldArrayNamesRef.current, name)
+        ? isUndefined(defaultValue)
+            ? get(defaultValuesRef.current, name)
+            : defaultValue
+        : get(fieldsRef.current, name)._f.value);
+    const formState = useFormState({
+        control: control || methods.control,
+    });
+    get(fieldsRef.current, name)._f.value = value;
+    React.useEffect(() => {
+        const controllerSubscription = controllerSubjectRef.current.subscribe({
+            next: (data) => (!data.name || name === data.name) &&
+                setInputStateValue(get(data.values, name)),
+        });
+        ref({
+            target: value,
+        });
+        return () => controllerSubscription.unsubscribe();
+    }, [name]);
+    return {
+        field: {
+            onChange: (event) => {
+                const value = getControllerValue(event);
+                setInputStateValue(value);
+                onChange({
+                    target: {
+                        value,
+                        name: name,
+                    },
+                    type: EVENTS.CHANGE,
+                });
+            },
+            onBlur: () => {
+                onBlur({
+                    target: {
+                        name: name,
+                    },
+                    type: EVENTS.BLUR,
+                });
+            },
+            name,
+            value,
+            ref,
+        },
+        formState,
+        fieldState: Object.defineProperties({}, {
+            invalid: {
+                get() {
+                    return !!get(formState.errors, name);
+                },
+            },
+            isDirty: {
+                get() {
+                    return !!get(formState.dirtyFields, name);
+                },
+            },
+            isTouched: {
+                get() {
+                    return !!get(formState.touchedFields, name);
+                },
+            },
+            error: {
+                get() {
+                    return get(formState.errors, name);
+                },
+            },
+        }),
+    };
+}
+
+const Controller = (props) => props.render(useController(props));
+
+var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
+    ? Object.assign(Object.assign({}, errors[name]), { types: Object.assign(Object.assign({}, (errors[name] && errors[name].types ? errors[name].types : {})), { [type]: message || true }) }) : {};
+
 var isKey = (value) => /^\w*$/.test(value);
 
 var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
@@ -48,12 +229,6 @@ function set(object, path, value) {
     return object;
 }
 
-var omit = (source, key) => {
-    const copy = Object.assign({}, source);
-    delete copy[key];
-    return copy;
-};
-
 const focusFieldBy = (fields, callback, fieldsNames) => {
     for (const key of fieldsNames || Object.keys(fields)) {
         const field = get(fields, key);
@@ -76,26 +251,40 @@ const focusFieldBy = (fields, callback, fieldsNames) => {
     }
 };
 
-var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
-
-function deepMerge(target, source) {
-    if (isPrimitive(target) || isPrimitive(source)) {
-        return source;
-    }
-    for (const key in source) {
-        const targetValue = target[key];
-        const sourceValue = source[key];
-        try {
-            target[key] =
-                (isObject(targetValue) && isObject(sourceValue)) ||
-                    (Array.isArray(targetValue) && Array.isArray(sourceValue))
-                    ? deepMerge(targetValue, sourceValue)
-                    : sourceValue;
+const getFieldsValues = (fieldsRef, defaultValuesRef = { current: {} }, output = {}) => {
+    for (const name in fieldsRef.current) {
+        const field = fieldsRef.current[name];
+        if (field) {
+            const _f = field._f;
+            const current = omit(field, '_f');
+            set(output, name, _f
+                ? _f.ref.disabled || (_f.refs && _f.refs.every((ref) => ref.disabled))
+                    ? undefined
+                    : _f.value
+                : Array.isArray(field)
+                    ? []
+                    : {});
+            if (current) {
+                getFieldsValues({
+                    current,
+                }, defaultValuesRef, output[name]);
+            }
         }
-        catch (_a) { }
     }
-    return target;
-}
+    return Object.assign(Object.assign({}, defaultValuesRef.current), output);
+};
+
+var generateId = () => {
+    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 mapIds = (values = [], keyName) => values.map((value) => (Object.assign({ [keyName]: (value && value[keyName]) || generateId() }, value)));
+
+var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
 function deepEqual(object1, object2, isErrorObject) {
     if (isPrimitive(object1) ||
@@ -126,6 +315,25 @@ function deepEqual(object1, object2, isErrorObject) {
     return true;
 }
 
+function deepMerge(target, source) {
+    if (isPrimitive(target) || isPrimitive(source)) {
+        return source;
+    }
+    for (const key in source) {
+        const targetValue = target[key];
+        const sourceValue = source[key];
+        try {
+            target[key] =
+                (isObject(targetValue) && isObject(sourceValue)) ||
+                    (Array.isArray(targetValue) && Array.isArray(sourceValue))
+                    ? deepMerge(targetValue, sourceValue)
+                    : sourceValue;
+        }
+        catch (_a) { }
+    }
+    return target;
+}
+
 function setDirtyFields(values, defaultValues, dirtyFields, parentNode, parentName) {
     let index = -1;
     while (++index < values.length) {
@@ -149,476 +357,625 @@ function setDirtyFields(values, defaultValues, dirtyFields, parentNode, parentNa
 }
 var setFieldArrayDirtyFields = (values, defaultValues, dirtyFields) => deepMerge(setDirtyFields(values, defaultValues, dirtyFields.slice(0, values.length)), setDirtyFields(defaultValues, values, dirtyFields.slice(0, values.length)));
 
-var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
-
-const EVENTS = {
-    BLUR: 'blur',
-    CHANGE: 'change',
-};
-const VALIDATION_MODE = {
-    onBlur: 'onBlur',
-    onChange: 'onChange',
-    onSubmit: 'onSubmit',
-    onTouched: 'onTouched',
-    all: 'all',
-};
-const SELECT = 'select';
-const UNDEFINED = 'undefined';
-const INPUT_VALIDATION_RULES = {
-    max: 'max',
-    min: 'min',
-    maxLength: 'maxLength',
-    minLength: 'minLength',
-    pattern: 'pattern',
-    required: 'required',
-    validate: 'validate',
-};
-
-var shouldRenderFormState = (formState, readFormStateRef, isRoot) => isEmptyObject(formState) ||
-    Object.keys(formState).length >= Object.keys(readFormStateRef).length ||
-    Object.keys(formState).find((key) => readFormStateRef[key] ===
-        (isRoot ? VALIDATION_MODE.all : true));
-
-const getFieldsValues = (fieldsRef, defaultValuesRef = { current: {} }, output = {}) => {
-    for (const name in fieldsRef.current) {
-        const field = fieldsRef.current[name];
-        if (field) {
-            const _f = field._f;
-            const current = omit(field, '_f');
-            set(output, name, _f
-                ? _f.ref.disabled || (_f.refs && _f.refs.every((ref) => ref.disabled))
-                    ? undefined
-                    : _f.value
-                : Array.isArray(field)
-                    ? []
-                    : {});
-            if (current) {
-                getFieldsValues({
-                    current,
-                }, defaultValuesRef, output[name]);
-            }
-        }
-    }
-    return Object.assign(Object.assign({}, defaultValuesRef.current), output);
-};
-
-const defaultReturn = {
-    isValid: false,
-    value: null,
-};
-var getRadioValue = (options) => Array.isArray(options)
-    ? options.reduce((previous, option) => option && option.checked && !option.disabled
-        ? {
-            isValid: true,
-            value: option.value,
-        }
-        : previous, defaultReturn)
-    : defaultReturn;
-
-var getMultipleSelectValue = (options) => [...options]
-    .filter(({ selected }) => selected)
-    .map(({ value }) => value);
-
-var isRadioInput = (element) => element.type === 'radio';
-
-var isFileInput = (element) => element.type === 'file';
+function append(data, value) {
+    return [...data, ...(Array.isArray(value) ? value : [value])];
+}
 
-var isCheckBoxInput = (element) => element.type === 'checkbox';
+var fillEmptyArray = (value) => Array.isArray(value) ? Array(value.length).fill(undefined) : undefined;
 
-var isMultipleSelect = (element) => element.type === `${SELECT}-multiple`;
+function insert(data, index, value) {
+    return [
+        ...data.slice(0, index),
+        ...(Array.isArray(value) ? value : [value]),
+        ...data.slice(index),
+    ];
+}
 
-const defaultResult = {
-    value: false,
-    isValid: false,
-};
-const validResult = { value: true, isValid: true };
-var getCheckboxValue = (options) => {
-    if (Array.isArray(options)) {
-        if (options.length > 1) {
-            const values = options
-                .filter((option) => option && option.checked && !option.disabled)
-                .map((option) => option.value);
-            return { value: values, isValid: !!values.length };
+var moveArrayAt = (data, from, to) => {
+    if (Array.isArray(data)) {
+        if (isUndefined(data[to])) {
+            data[to] = undefined;
         }
-        return options[0].checked && !options[0].disabled
-            ? // @ts-expect-error expected to work in the browser
-                options[0].attributes && !isUndefined(options[0].attributes.value)
-                    ? isUndefined(options[0].value)
-                        ? validResult
-                        : { value: options[0].value, isValid: true }
-                    : validResult
-            : defaultResult;
+        data.splice(to, 0, data.splice(from, 1)[0]);
+        return data;
     }
-    return defaultResult;
+    return [];
 };
 
-var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => valueAsNumber
-    ? value === ''
-        ? NaN
-        : +value
-    : valueAsDate
-        ? new Date(value)
-        : setValueAs
-            ? setValueAs(value)
-            : value;
+function prepend(data, value) {
+    return [...(Array.isArray(value) ? value : [value]), ...data];
+}
 
-function getFieldValue(field) {
-    if (field && field._f) {
-        const ref = field._f.ref;
-        if (ref.disabled) {
-            return;
-        }
-        if (isFileInput(ref)) {
-            return ref.files;
-        }
-        if (isRadioInput(ref)) {
-            return getRadioValue(field._f.refs).value;
-        }
-        if (isMultipleSelect(ref)) {
-            return getMultipleSelectValue(ref.options);
-        }
-        if (isCheckBoxInput(ref)) {
-            return getCheckboxValue(field._f.refs).value;
-        }
-        return getFieldValueAs(isUndefined(ref.value) ? field._f.ref.value : ref.value, field._f);
+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, (Array.isArray(index) ? index : [index]).sort((a, b) => a - b));
 
-var isErrorStateChanged = ({ errors, name, error, validFields, fieldsWithValidation, }) => {
-    const isValid = isUndefined(error);
-    const previousError = get(errors, name);
-    return ((isValid && !!previousError) ||
-        (!isValid && !deepEqual(previousError, error, true)) ||
-        (isValid && get(fieldsWithValidation, name) && !get(validFields, name)));
+var swapArrayAt = (data, indexA, indexB) => {
+    data[indexA] = [data[indexB], (data[indexB] = data[indexA])][0];
 };
 
-var isRegex = (value) => value instanceof RegExp;
-
-var getValueAndMessage = (validationData) => isObject(validationData) && !isRegex(validationData)
-    ? validationData
-    : {
-        value: validationData,
-        message: '',
-    };
-
-var isString = (value) => typeof value === 'string';
-
-var isFunction = (value) => typeof value === 'function';
-
 var isBoolean = (value) => typeof value === 'boolean';
 
-var isMessage = (value) => isString(value) || React.isValidElement(value);
-
-function getValidateError(result, ref, type = 'validate') {
-    if (isMessage(result) || (isBoolean(result) && !result)) {
-        return {
-            type,
-            message: isMessage(result) ? result : '',
-            ref,
-        };
+function baseGet(object, updatePath) {
+    const length = updatePath.slice(0, -1).length;
+    let index = 0;
+    while (index < length) {
+        object = isUndefined(object) ? index++ : object[updatePath[index++]];
     }
-}
-
-var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
-    ? Object.assign(Object.assign({}, errors[name]), { types: Object.assign(Object.assign({}, (errors[name] && errors[name].types ? errors[name].types : {})), { [type]: message || true }) }) : {};
-
-var validateField = async ({ _f: { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, value: inputValue, }, }, validateAllFieldCriteria) => {
-    const error = {};
-    const isRadio = isRadioInput(ref);
-    const isCheckBox = isCheckBoxInput(ref);
-    const isRadioOrCheckbox = isRadio || isCheckBox;
-    const isEmpty = !inputValue || (Array.isArray(inputValue) && !inputValue.length);
-    const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
-    const getMinMaxMessage = (exceedMax, maxLengthMessage, minLengthMessage, maxType = INPUT_VALIDATION_RULES.maxLength, minType = INPUT_VALIDATION_RULES.minLength) => {
-        const message = exceedMax ? maxLengthMessage : minLengthMessage;
-        error[name] = Object.assign({ type: exceedMax ? maxType : minType, message,
-            ref }, appendErrorsCurry(exceedMax ? maxType : minType, message));
-    };
-    if (required &&
-        ((!isRadio && !isCheckBox && (isEmpty || isNullOrUndefined(inputValue))) ||
-            (isBoolean(inputValue) && !inputValue) ||
-            (isCheckBox && !getCheckboxValue(refs).isValid) ||
-            (isRadio && !getRadioValue(refs).isValid))) {
-        const { value, message } = isMessage(required)
-            ? { value: !!required, message: required }
-            : getValueAndMessage(required);
-        if (value) {
-            error[name] = Object.assign({ type: INPUT_VALIDATION_RULES.required, message, ref: isRadioOrCheckbox ? (refs || [])[0] || {} : ref }, appendErrorsCurry(INPUT_VALIDATION_RULES.required, message));
-            if (!validateAllFieldCriteria) {
-                return error;
+    return object;
+}
+function unset(object, path) {
+    const updatePath = isKey(path) ? [path] : stringToPath(path);
+    const childObject = updatePath.length == 1 ? object : baseGet(object, updatePath);
+    const key = updatePath[updatePath.length - 1];
+    let previousObjRef;
+    if (childObject) {
+        delete childObject[key];
+    }
+    for (let k = 0; k < updatePath.slice(0, -1).length; k++) {
+        let index = -1;
+        let objectRef;
+        const currentPaths = updatePath.slice(0, -(k + 1));
+        const currentPathsLength = currentPaths.length - 1;
+        if (k > 0) {
+            previousObjRef = object;
+        }
+        while (++index < currentPaths.length) {
+            const item = currentPaths[index];
+            objectRef = objectRef ? objectRef[item] : object[item];
+            if (currentPathsLength === index &&
+                ((isObject(objectRef) && isEmptyObject(objectRef)) ||
+                    (Array.isArray(objectRef) &&
+                        !objectRef.filter((data) => (isObject(data) && !isEmptyObject(data)) || isBoolean(data)).length))) {
+                previousObjRef ? delete previousObjRef[item] : delete object[item];
             }
+            previousObjRef = objectRef;
         }
     }
-    if ((!isNullOrUndefined(min) || !isNullOrUndefined(max)) &&
-        inputValue !== '') {
-        let exceedMax;
-        let exceedMin;
-        const maxOutput = getValueAndMessage(max);
-        const minOutput = getValueAndMessage(min);
-        if (!isNaN(inputValue)) {
-            const valueNumber = ref.valueAsNumber || parseFloat(inputValue);
-            if (!isNullOrUndefined(maxOutput.value)) {
-                exceedMax = valueNumber > maxOutput.value;
-            }
-            if (!isNullOrUndefined(minOutput.value)) {
-                exceedMin = valueNumber < minOutput.value;
-            }
+    return object;
+}
+
+const useFieldArray = ({ control, name, keyName = 'id', }) => {
+    const methods = useFormContext();
+    const focusNameRef = React.useRef('');
+    const { isWatchAllRef, watchFieldsRef, getFormIsDirty, watchSubjectRef, fieldArraySubjectRef, fieldArrayNamesRef, fieldsRef, defaultValuesRef, formStateRef, formStateSubjectRef, readFormStateRef, validFieldsRef, fieldsWithValidationRef, fieldArrayDefaultValuesRef, } = control || methods.control;
+    const [fields, setFields] = React.useState(mapIds(get(fieldArrayDefaultValuesRef.current, getNodeParentName(name))
+        ? get(fieldArrayDefaultValuesRef.current, name, [])
+        : get(defaultValuesRef.current, name, []), keyName));
+    set(fieldArrayDefaultValuesRef.current, name, [...fields]);
+    fieldArrayNamesRef.current.add(name);
+    const omitKey = (fields) => fields.map((field) => omit((field || {}), keyName));
+    const getCurrentFieldsValues = () => {
+        const values = get(getFieldsValues(fieldsRef, defaultValuesRef), name, []);
+        return mapIds(get(fieldArrayDefaultValuesRef.current, name, []).map((item, index) => (Object.assign(Object.assign({}, item), values[index]))), keyName);
+    };
+    const getFocusDetail = (index, options) => options
+        ? !isUndefined(options.focusIndex)
+            ? `${name}.${options.focusIndex}`
+            : options.focusName
+                ? options.focusName
+                : !options.shouldFocus
+                    ? ''
+                    : `${name}.${index}`
+        : `${name}.${index}`;
+    const resetFields = (index) => (Array.isArray(index) ? index : [index]).forEach((currentIndex) => set(fieldsRef.current, `${name}${isUndefined(currentIndex) ? '' : `.${currentIndex}`}`, isUndefined(currentIndex) ? [] : undefined));
+    const setFieldsAndNotify = (fieldsValues = []) => setFields(mapIds(fieldsValues, keyName));
+    const cleanup = (ref) => !compact(get(ref, name, [])).length && unset(ref, name);
+    const updateDirtyFieldsWithDefaultValues = (updatedFieldArrayValues) => updatedFieldArrayValues &&
+        set(formStateRef.current.dirtyFields, name, setFieldArrayDirtyFields(omitKey(updatedFieldArrayValues), get(defaultValuesRef.current, name, []), get(formStateRef.current.dirtyFields, name, [])));
+    const batchStateUpdate = (method, args, updatedFieldArrayValues = [], shouldSet = true) => {
+        if (get(fieldsRef.current, name)) {
+            const output = method(get(fieldsRef.current, name), args.argA, args.argB);
+            shouldSet && set(fieldsRef.current, name, output);
         }
-        else {
-            const valueDate = ref.valueAsDate || new Date(inputValue);
-            if (isString(maxOutput.value)) {
-                exceedMax = valueDate > new Date(maxOutput.value);
-            }
-            if (isString(minOutput.value)) {
-                exceedMin = valueDate < new Date(minOutput.value);
-            }
+        if (Array.isArray(get(formStateRef.current.errors, name))) {
+            const output = method(get(formStateRef.current.errors, name), args.argA, args.argB);
+            shouldSet && set(formStateRef.current.errors, name, output);
+            cleanup(formStateRef.current.errors);
         }
-        if (exceedMax || exceedMin) {
-            getMinMaxMessage(!!exceedMax, maxOutput.message, minOutput.message, INPUT_VALIDATION_RULES.max, INPUT_VALIDATION_RULES.min);
-            if (!validateAllFieldCriteria) {
-                return error;
-            }
+        if (readFormStateRef.current.touchedFields &&
+            get(formStateRef.current.touchedFields, name)) {
+            const output = method(get(formStateRef.current.touchedFields, name), args.argA, args.argB);
+            shouldSet && set(formStateRef.current.touchedFields, name, output);
+            cleanup(formStateRef.current.touchedFields);
         }
-    }
-    if (isString(inputValue) && !isEmpty && (maxLength || minLength)) {
-        const maxLengthOutput = getValueAndMessage(maxLength);
-        const minLengthOutput = getValueAndMessage(minLength);
-        const exceedMax = !isNullOrUndefined(maxLengthOutput.value) &&
-            inputValue.length > maxLengthOutput.value;
-        const exceedMin = !isNullOrUndefined(minLengthOutput.value) &&
-            inputValue.length < minLengthOutput.value;
-        if (exceedMax || exceedMin) {
-            getMinMaxMessage(exceedMax, maxLengthOutput.message, minLengthOutput.message);
-            if (!validateAllFieldCriteria) {
-                return error;
-            }
+        if (readFormStateRef.current.dirtyFields ||
+            readFormStateRef.current.isDirty) {
+            set(formStateRef.current.dirtyFields, name, setFieldArrayDirtyFields(omitKey(updatedFieldArrayValues), get(defaultValuesRef.current, name, []), get(formStateRef.current.dirtyFields, name, [])));
+            updateDirtyFieldsWithDefaultValues(updatedFieldArrayValues);
+            cleanup(formStateRef.current.dirtyFields);
         }
-    }
-    if (isString(inputValue) && pattern && !isEmpty) {
-        const { value: patternValue, message } = getValueAndMessage(pattern);
-        if (isRegex(patternValue) && !patternValue.test(inputValue)) {
-            error[name] = Object.assign({ type: INPUT_VALIDATION_RULES.pattern, message,
-                ref }, appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message));
-            if (!validateAllFieldCriteria) {
-                return error;
-            }
+        if (readFormStateRef.current.isValid) {
+            set(validFieldsRef.current, name, method(get(validFieldsRef.current, name, []), args.argA));
+            cleanup(validFieldsRef.current);
+            set(fieldsWithValidationRef.current, name, method(get(fieldsWithValidationRef.current, name, []), args.argA));
+            cleanup(fieldsWithValidationRef.current);
         }
-    }
-    if (validate) {
-        const validateRef = isRadioOrCheckbox && refs ? refs[0] : ref;
-        if (isFunction(validate)) {
-            const result = await validate(inputValue);
-            const validateError = getValidateError(result, validateRef);
-            if (validateError) {
-                error[name] = Object.assign(Object.assign({}, validateError), appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message));
-                if (!validateAllFieldCriteria) {
-                    return error;
-                }
-            }
+        formStateSubjectRef.current.next({
+            isDirty: getFormIsDirty(name, omitKey(updatedFieldArrayValues)),
+            errors: formStateRef.current.errors,
+            isValid: formStateRef.current.isValid,
+        });
+    };
+    const registerFieldArray = (values, index = 0, parentName = '') => values.forEach((appendValueItem, valueIndex) => Object.entries(appendValueItem).forEach(([key, value]) => {
+        const inputName = `${parentName || name}.${parentName ? valueIndex : index + valueIndex}.${key}`;
+        Array.isArray(value)
+            ? registerFieldArray(value, valueIndex, inputName)
+            : set(fieldsRef.current, inputName, {
+                _f: {
+                    ref: {
+                        name: inputName,
+                    },
+                    name: inputName,
+                    value,
+                },
+            });
+    }));
+    const append$1 = (value, options) => {
+        const appendValue = Array.isArray(value) ? value : [value];
+        const updatedFieldArrayValues = append(getCurrentFieldsValues(), appendValue);
+        const currentIndex = updatedFieldArrayValues.length - appendValue.length;
+        setFieldsAndNotify(updatedFieldArrayValues);
+        batchStateUpdate(append, {
+            argA: fillEmptyArray(value),
+        }, updatedFieldArrayValues, false);
+        registerFieldArray(appendValue, currentIndex);
+        focusNameRef.current = getFocusDetail(currentIndex, options);
+    };
+    const prepend$1 = (value, options) => {
+        const prependValue = Array.isArray(value) ? value : [value];
+        const updatedFieldArrayValues = prepend(getCurrentFieldsValues(), prependValue);
+        setFieldsAndNotify(updatedFieldArrayValues);
+        batchStateUpdate(prepend, {
+            argA: fillEmptyArray(value),
+        }, updatedFieldArrayValues);
+        registerFieldArray(prependValue);
+        focusNameRef.current = getFocusDetail(0, options);
+    };
+    const remove = (index) => {
+        const updatedFieldArrayValues = removeArrayAt(getCurrentFieldsValues(), index);
+        resetFields(index);
+        setFieldsAndNotify(updatedFieldArrayValues);
+        batchStateUpdate(removeArrayAt, {
+            argA: index,
+        }, updatedFieldArrayValues);
+    };
+    const insert$1 = (index, value, options) => {
+        const insertValue = Array.isArray(value) ? value : [value];
+        const updatedFieldArrayValues = insert(getCurrentFieldsValues(), index, insertValue);
+        setFieldsAndNotify(updatedFieldArrayValues);
+        batchStateUpdate(insert, {
+            argA: index,
+            argB: fillEmptyArray(value),
+        }, updatedFieldArrayValues);
+        registerFieldArray(insertValue, index);
+        focusNameRef.current = getFocusDetail(index, options);
+    };
+    const swap = (indexA, indexB) => {
+        const fieldValues = getCurrentFieldsValues();
+        swapArrayAt(fieldValues, indexA, indexB);
+        batchStateUpdate(swapArrayAt, {
+            argA: indexA,
+            argB: indexB,
+        }, fieldValues, false);
+        setFieldsAndNotify(fieldValues);
+    };
+    const move = (from, to) => {
+        const fieldValues = getCurrentFieldsValues();
+        moveArrayAt(fieldValues, from, to);
+        setFieldsAndNotify(fieldValues);
+        batchStateUpdate(moveArrayAt, {
+            argA: from,
+            argB: to,
+        }, fieldValues, false);
+    };
+    React.useEffect(() => {
+        if (isWatchAllRef.current) {
+            formStateSubjectRef.current.next({});
         }
-        else if (isObject(validate)) {
-            let validationResult = {};
-            for (const [key, validateFunction] of Object.entries(validate)) {
-                if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
+        else {
+            for (const watchField of watchFieldsRef.current) {
+                if (name.startsWith(watchField)) {
+                    formStateSubjectRef.current.next({});
                     break;
                 }
-                const validateResult = await validateFunction(inputValue);
-                const validateError = getValidateError(validateResult, validateRef, key);
-                if (validateError) {
-                    validationResult = Object.assign(Object.assign({}, validateError), appendErrorsCurry(key, validateError.message));
-                    if (validateAllFieldCriteria) {
-                        error[name] = validationResult;
-                    }
-                }
-            }
-            if (!isEmptyObject(validationResult)) {
-                error[name] = Object.assign({ ref: validateRef }, validationResult);
-                if (!validateAllFieldCriteria) {
-                    return error;
-                }
             }
         }
-    }
-    return error;
+        watchSubjectRef.current.next({
+            name,
+            value: get(getFieldsValues(fieldsRef, defaultValuesRef), name, []),
+        });
+        focusNameRef.current &&
+            focusFieldBy(fieldsRef.current, (key) => key.startsWith(focusNameRef.current));
+        focusNameRef.current = '';
+        fieldArraySubjectRef.current.next({
+            name,
+            fields: omitKey([...fields]),
+        });
+    }, [fields, name]);
+    React.useEffect(() => {
+        const fieldArraySubscription = fieldArraySubjectRef.current.subscribe({
+            next({ name: inputFieldArrayName, fields, isReset }) {
+                if (isReset) {
+                    unset(fieldsRef.current, inputFieldArrayName || name);
+                    inputFieldArrayName
+                        ? set(fieldArrayDefaultValuesRef.current, inputFieldArrayName, fields)
+                        : (fieldArrayDefaultValuesRef.current = fields);
+                    setFieldsAndNotify(get(fieldArrayDefaultValuesRef.current, name));
+                }
+            },
+        });
+        !get(fieldsRef.current, name) && set(fieldsRef.current, name, []);
+        return () => {
+            fieldArrayDefaultValuesRef.current = getFieldsValues(fieldsRef);
+            fieldArraySubscription.unsubscribe();
+        };
+    }, []);
+    return {
+        swap: React.useCallback(swap, [name]),
+        move: React.useCallback(move, [name]),
+        prepend: React.useCallback(prepend$1, [name]),
+        append: React.useCallback(append$1, [name]),
+        remove: React.useCallback(remove, [name]),
+        insert: React.useCallback(insert$1, [name]),
+        fields: fields,
+    };
 };
 
-var skipValidation = ({ isOnBlur, isOnChange, isOnTouch, isTouched, isReValidateOnBlur, isReValidateOnChange, isBlurEvent, isSubmitted, isOnAll, }) => {
-    if (isOnAll) {
-        return false;
-    }
-    else if (!isSubmitted && isOnTouch) {
-        return !(isTouched || isBlurEvent);
-    }
-    else if (isSubmitted ? isReValidateOnBlur : isOnBlur) {
-        return !isBlurEvent;
+function getFields(fieldsNames, fieldsRefs) {
+    const currentFields = {};
+    for (const name of fieldsNames) {
+        const field = get(fieldsRefs, name);
+        if (field) {
+            !isKey(name)
+                ? set(currentFields, name, field._f)
+                : (currentFields[name] = field._f);
+        }
     }
-    else if (isSubmitted ? isReValidateOnChange : isOnChange) {
-        return isBlurEvent;
+    return currentFields;
+}
+
+var isFileInput = (element) => element.type === 'file';
+
+var isMultipleSelect = (element) => element.type === `${SELECT}-multiple`;
+
+var isRadioInput = (element) => element.type === 'radio';
+
+const defaultResult = {
+    value: false,
+    isValid: false,
+};
+const validResult = { value: true, isValid: true };
+var getCheckboxValue = (options) => {
+    if (Array.isArray(options)) {
+        if (options.length > 1) {
+            const values = options
+                .filter((option) => option && option.checked && !option.disabled)
+                .map((option) => option.value);
+            return { value: values, isValid: !!values.length };
+        }
+        return options[0].checked && !options[0].disabled
+            ? // @ts-expect-error expected to work in the browser
+                options[0].attributes && !isUndefined(options[0].attributes.value)
+                    ? isUndefined(options[0].value) || options[0].value === ''
+                        ? validResult
+                        : { value: options[0].value, isValid: true }
+                    : validResult
+            : defaultResult;
     }
-    return true;
+    return defaultResult;
 };
 
-var getNodeParentName = (name) => name.substring(0, name.search(/.\d/)) || name;
+var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => valueAsNumber
+    ? value === ''
+        ? NaN
+        : +value
+    : valueAsDate
+        ? new Date(value)
+        : setValueAs
+            ? setValueAs(value)
+            : value;
 
-var getProxyFormState = (isProxyEnabled, formState, readFormStateRef, localReadFormStateRef, isRoot = true) => isProxyEnabled
-    ? new Proxy(formState, {
-        get: (obj, prop) => {
-            if (prop in obj) {
-                if (readFormStateRef.current[prop] !== VALIDATION_MODE.all) {
-                    readFormStateRef.current[prop] = isRoot
-                        ? VALIDATION_MODE.all
-                        : true;
-                }
-                localReadFormStateRef &&
-                    (localReadFormStateRef.current[prop] = true);
-                return obj[prop];
-            }
-            return undefined;
-        },
-    })
-    : formState;
+var getMultipleSelectValue = (options) => [...options]
+    .filter(({ selected }) => selected)
+    .map(({ value }) => value);
 
-class Subscription {
-    constructor() {
-        this.tearDowns = [];
-    }
-    add(tearDown) {
-        this.tearDowns.push(tearDown);
-    }
-    unsubscribe() {
-        for (const teardown of this.tearDowns) {
-            teardown();
+const defaultReturn = {
+    isValid: false,
+    value: null,
+};
+var getRadioValue = (options) => Array.isArray(options)
+    ? options.reduce((previous, option) => option && option.checked && !option.disabled
+        ? {
+            isValid: true,
+            value: option.value,
         }
-        this.tearDowns = [];
-    }
-}
-class Subscriber {
-    constructor(observer, subscription) {
-        this.observer = observer;
-        this.closed = false;
-        subscription.add(() => (this.closed = true));
-    }
-    next(value) {
-        if (!this.closed) {
-            this.observer.next(value);
+        : previous, defaultReturn)
+    : defaultReturn;
+
+function getFieldValue(field) {
+    if (field && field._f) {
+        const ref = field._f.ref;
+        if (ref.disabled) {
+            return;
         }
-    }
-}
-class Subject {
-    constructor() {
-        this.observers = [];
-    }
-    next(value) {
-        for (const observer of this.observers) {
-            observer.next(value);
+        if (isFileInput(ref)) {
+            return ref.files;
         }
-    }
-    subscribe(observer) {
-        const subscription = new Subscription();
-        const subscriber = new Subscriber(observer, subscription);
-        this.observers.push(subscriber);
-        return subscription;
-    }
-    unsubscribe() {
-        this.observers = [];
+        if (isRadioInput(ref)) {
+            return getRadioValue(field._f.refs).value;
+        }
+        if (isMultipleSelect(ref)) {
+            return getMultipleSelectValue(ref.options);
+        }
+        if (isCheckBoxInput(ref)) {
+            return getCheckboxValue(field._f.refs).value;
+        }
+        return getFieldValueAs(isUndefined(ref.value) ? field._f.ref.value : ref.value, field._f);
     }
 }
 
-var isWeb = typeof window !== UNDEFINED &&
-    typeof window.HTMLElement !== UNDEFINED &&
-    typeof document !== UNDEFINED;
-
-const isProxyEnabled = isWeb ? 'Proxy' in window : typeof Proxy !== UNDEFINED;
+var isErrorStateChanged = ({ errors, name, error, validFields, fieldsWithValidation, }) => {
+    const isValid = isUndefined(error);
+    const previousError = get(errors, name);
+    return ((isValid && !!previousError) ||
+        (!isValid && !deepEqual(previousError, error, true)) ||
+        (isValid && get(fieldsWithValidation, name) && !get(validFields, name)));
+};
 
-function baseGet(object, updatePath) {
-    const length = updatePath.slice(0, -1).length;
-    let index = 0;
-    while (index < length) {
-        object = isUndefined(object) ? index++ : object[updatePath[index++]];
+var skipValidation = ({ isOnBlur, isOnChange, isOnTouch, isTouched, isReValidateOnBlur, isReValidateOnChange, isBlurEvent, isSubmitted, isOnAll, }) => {
+    if (isOnAll) {
+        return false;
     }
-    return object;
-}
-function unset(object, path) {
-    const updatePath = isKey(path) ? [path] : stringToPath(path);
-    const childObject = updatePath.length == 1 ? object : baseGet(object, updatePath);
-    const key = updatePath[updatePath.length - 1];
-    let previousObjRef;
-    if (childObject) {
-        delete childObject[key];
+    else if (!isSubmitted && isOnTouch) {
+        return !(isTouched || isBlurEvent);
     }
-    for (let k = 0; k < updatePath.slice(0, -1).length; k++) {
-        let index = -1;
-        let objectRef;
-        const currentPaths = updatePath.slice(0, -(k + 1));
-        const currentPathsLength = currentPaths.length - 1;
-        if (k > 0) {
-            previousObjRef = object;
-        }
-        while (++index < currentPaths.length) {
-            const item = currentPaths[index];
-            objectRef = objectRef ? objectRef[item] : object[item];
-            if (currentPathsLength === index &&
-                ((isObject(objectRef) && isEmptyObject(objectRef)) ||
-                    (Array.isArray(objectRef) &&
-                        !objectRef.filter((data) => (isObject(data) && !isEmptyObject(data)) || isBoolean(data)).length))) {
-                previousObjRef ? delete previousObjRef[item] : delete object[item];
-            }
-            previousObjRef = objectRef;
-        }
+    else if (isSubmitted ? isReValidateOnBlur : isOnBlur) {
+        return !isBlurEvent;
     }
-    return object;
-}
+    else if (isSubmitted ? isReValidateOnChange : isOnChange) {
+        return isBlurEvent;
+    }
+    return true;
+};
 
-var getValidationModes = (mode) => ({
-    isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
-    isOnBlur: mode === VALIDATION_MODE.onBlur,
-    isOnChange: mode === VALIDATION_MODE.onChange,
-    isOnAll: mode === VALIDATION_MODE.all,
-    isOnTouch: mode === VALIDATION_MODE.onTouched,
-});
+var isFunction = (value) => typeof value === 'function';
 
-var isRadioOrCheckboxFunction = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
+var isString = (value) => typeof value === 'string';
 
-var isHTMLElement = (value) => value instanceof HTMLElement;
+var isMessage = (value) => isString(value) || React.isValidElement(value);
 
-function getFields(fieldsNames, fieldsRefs) {
-    const currentFields = {};
-    for (const name of fieldsNames) {
-        const field = get(fieldsRefs, name);
-        if (field) {
-            !isKey(name)
-                ? set(currentFields, name, field._f)
-                : (currentFields[name] = field._f);
-        }
+var isRegex = (value) => value instanceof RegExp;
+
+function getValidateError(result, ref, type = 'validate') {
+    if (isMessage(result) || (isBoolean(result) && !result)) {
+        return {
+            type,
+            message: isMessage(result) ? result : '',
+            ref,
+        };
     }
-    return currentFields;
 }
 
-const isWindowUndefined = typeof window === UNDEFINED;
-function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_MODE.onChange, resolver, context, defaultValues = {}, shouldFocusError = true, criteriaMode, } = {}) {
-    const fieldsRef = React.useRef({});
-    const fieldsNamesRef = React.useRef(new Set());
-    const formStateSubjectRef = React.useRef(new Subject());
-    const watchSubjectRef = React.useRef(new Subject());
-    const controllerSubjectRef = React.useRef(new Subject());
-    const fieldArraySubjectRef = React.useRef(new Subject());
-    const fieldArrayDefaultValuesRef = React.useRef({});
-    const watchFieldsRef = React.useRef(new Set());
-    const isMountedRef = React.useRef(false);
-    const fieldsWithValidationRef = React.useRef({});
-    const validFieldsRef = React.useRef({});
-    const defaultValuesRef = React.useRef(defaultValues);
-    const isWatchAllRef = React.useRef(false);
-    const contextRef = React.useRef(context);
-    const resolverRef = React.useRef(resolver);
-    const fieldArrayNamesRef = React.useRef(new Set());
-    const validationMode = getValidationModes(mode);
-    const isValidateAllFieldCriteria = criteriaMode === VALIDATION_MODE.all;
-    const [formState, setFormState] = React.useState({
-        isDirty: false,
-        isValidating: false,
-        dirtyFields: {},
-        isSubmitted: false,
+var getValueAndMessage = (validationData) => isObject(validationData) && !isRegex(validationData)
+    ? validationData
+    : {
+        value: validationData,
+        message: '',
+    };
+
+var validateField = async ({ _f: { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, value: inputValue, }, }, validateAllFieldCriteria) => {
+    const error = {};
+    const isRadio = isRadioInput(ref);
+    const isCheckBox = isCheckBoxInput(ref);
+    const isRadioOrCheckbox = isRadio || isCheckBox;
+    const isEmpty = inputValue === '' || (Array.isArray(inputValue) && !inputValue.length);
+    const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
+    const getMinMaxMessage = (exceedMax, maxLengthMessage, minLengthMessage, maxType = INPUT_VALIDATION_RULES.maxLength, minType = INPUT_VALIDATION_RULES.minLength) => {
+        const message = exceedMax ? maxLengthMessage : minLengthMessage;
+        error[name] = Object.assign({ type: exceedMax ? maxType : minType, message,
+            ref }, appendErrorsCurry(exceedMax ? maxType : minType, message));
+    };
+    if (required &&
+        ((!isRadio && !isCheckBox && (isEmpty || isNullOrUndefined(inputValue))) ||
+            (isBoolean(inputValue) && !inputValue) ||
+            (isCheckBox && !getCheckboxValue(refs).isValid) ||
+            (isRadio && !getRadioValue(refs).isValid))) {
+        const { value, message } = isMessage(required)
+            ? { value: !!required, message: required }
+            : getValueAndMessage(required);
+        if (value) {
+            error[name] = Object.assign({ type: INPUT_VALIDATION_RULES.required, message, ref: isRadioOrCheckbox ? (refs || [])[0] || {} : ref }, appendErrorsCurry(INPUT_VALIDATION_RULES.required, message));
+            if (!validateAllFieldCriteria) {
+                return error;
+            }
+        }
+    }
+    if ((!isNullOrUndefined(min) || !isNullOrUndefined(max)) &&
+        inputValue !== '') {
+        let exceedMax;
+        let exceedMin;
+        const maxOutput = getValueAndMessage(max);
+        const minOutput = getValueAndMessage(min);
+        if (!isNaN(inputValue)) {
+            const valueNumber = ref.valueAsNumber || parseFloat(inputValue);
+            if (!isNullOrUndefined(maxOutput.value)) {
+                exceedMax = valueNumber > maxOutput.value;
+            }
+            if (!isNullOrUndefined(minOutput.value)) {
+                exceedMin = valueNumber < minOutput.value;
+            }
+        }
+        else {
+            const valueDate = ref.valueAsDate || new Date(inputValue);
+            if (isString(maxOutput.value)) {
+                exceedMax = valueDate > new Date(maxOutput.value);
+            }
+            if (isString(minOutput.value)) {
+                exceedMin = valueDate < new Date(minOutput.value);
+            }
+        }
+        if (exceedMax || exceedMin) {
+            getMinMaxMessage(!!exceedMax, maxOutput.message, minOutput.message, INPUT_VALIDATION_RULES.max, INPUT_VALIDATION_RULES.min);
+            if (!validateAllFieldCriteria) {
+                return error;
+            }
+        }
+    }
+    if (isString(inputValue) && !isEmpty && (maxLength || minLength)) {
+        const maxLengthOutput = getValueAndMessage(maxLength);
+        const minLengthOutput = getValueAndMessage(minLength);
+        const exceedMax = !isNullOrUndefined(maxLengthOutput.value) &&
+            inputValue.length > maxLengthOutput.value;
+        const exceedMin = !isNullOrUndefined(minLengthOutput.value) &&
+            inputValue.length < minLengthOutput.value;
+        if (exceedMax || exceedMin) {
+            getMinMaxMessage(exceedMax, maxLengthOutput.message, minLengthOutput.message);
+            if (!validateAllFieldCriteria) {
+                return error;
+            }
+        }
+    }
+    if (isString(inputValue) && pattern && !isEmpty) {
+        const { value: patternValue, message } = getValueAndMessage(pattern);
+        if (isRegex(patternValue) && !patternValue.test(inputValue)) {
+            error[name] = Object.assign({ type: INPUT_VALIDATION_RULES.pattern, message,
+                ref }, appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message));
+            if (!validateAllFieldCriteria) {
+                return error;
+            }
+        }
+    }
+    if (validate) {
+        const validateRef = isRadioOrCheckbox && refs ? refs[0] : ref;
+        if (isFunction(validate)) {
+            const result = await validate(inputValue);
+            const validateError = getValidateError(result, validateRef);
+            if (validateError) {
+                error[name] = Object.assign(Object.assign({}, validateError), appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message));
+                if (!validateAllFieldCriteria) {
+                    return error;
+                }
+            }
+        }
+        else if (isObject(validate)) {
+            let validationResult = {};
+            for (const [key, validateFunction] of Object.entries(validate)) {
+                if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
+                    break;
+                }
+                const validateResult = await validateFunction(inputValue);
+                const validateError = getValidateError(validateResult, validateRef, key);
+                if (validateError) {
+                    validationResult = Object.assign(Object.assign({}, validateError), appendErrorsCurry(key, validateError.message));
+                    if (validateAllFieldCriteria) {
+                        error[name] = validationResult;
+                    }
+                }
+            }
+            if (!isEmptyObject(validationResult)) {
+                error[name] = Object.assign({ ref: validateRef }, validationResult);
+                if (!validateAllFieldCriteria) {
+                    return error;
+                }
+            }
+        }
+    }
+    return error;
+};
+
+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 isHTMLElement = (value) => value instanceof HTMLElement;
+
+var isRadioOrCheckboxFunction = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
+
+class Subscription {
+    constructor() {
+        this.tearDowns = [];
+    }
+    add(tearDown) {
+        this.tearDowns.push(tearDown);
+    }
+    unsubscribe() {
+        for (const teardown of this.tearDowns) {
+            teardown();
+        }
+        this.tearDowns = [];
+    }
+}
+class Subscriber {
+    constructor(observer, subscription) {
+        this.observer = observer;
+        this.closed = false;
+        subscription.add(() => (this.closed = true));
+    }
+    next(value) {
+        if (!this.closed) {
+            this.observer.next(value);
+        }
+    }
+}
+class Subject {
+    constructor() {
+        this.observers = [];
+    }
+    next(value) {
+        for (const observer of this.observers) {
+            observer.next(value);
+        }
+    }
+    subscribe(observer) {
+        const subscription = new Subscription();
+        const subscriber = new Subscriber(observer, subscription);
+        this.observers.push(subscriber);
+        return subscription;
+    }
+    unsubscribe() {
+        this.observers = [];
+    }
+}
+
+const isWindowUndefined = typeof window === UNDEFINED;
+function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_MODE.onChange, resolver, context, defaultValues = {}, shouldFocusError = true, criteriaMode, } = {}) {
+    const fieldsRef = React.useRef({});
+    const fieldsNamesRef = React.useRef(new Set());
+    const formStateSubjectRef = React.useRef(new Subject());
+    const watchSubjectRef = React.useRef(new Subject());
+    const controllerSubjectRef = React.useRef(new Subject());
+    const fieldArraySubjectRef = React.useRef(new Subject());
+    const fieldArrayDefaultValuesRef = React.useRef({});
+    const watchFieldsRef = React.useRef(new Set());
+    const isMountedRef = React.useRef(false);
+    const fieldsWithValidationRef = React.useRef({});
+    const validFieldsRef = React.useRef({});
+    const defaultValuesRef = React.useRef(defaultValues);
+    const isWatchAllRef = React.useRef(false);
+    const contextRef = React.useRef(context);
+    const resolverRef = React.useRef(resolver);
+    const fieldArrayNamesRef = React.useRef(new Set());
+    const validationMode = getValidationModes(mode);
+    const isValidateAllFieldCriteria = criteriaMode === VALIDATION_MODE.all;
+    const [formState, setFormState] = React.useState({
+        isDirty: false,
+        isValidating: false,
+        dirtyFields: {},
+        isSubmitted: false,
         submitCount: 0,
         touchedFields: {},
         isSubmitting: false,
@@ -711,7 +1068,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
                     name,
                 });
             }
-            options.shouldDirty && updateAndGetDirtyState(name);
+            options.shouldDirty && updateAndGetDirtyState(name, value);
             options.shouldValidate && trigger(name);
         }
     }, []);
@@ -723,17 +1080,18 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         }
         return false;
     }, []);
-    const updateAndGetDirtyState = React.useCallback((name, shouldRender = true) => {
+    const updateAndGetDirtyState = React.useCallback((name, inputValue, shouldRender = true) => {
         if (readFormStateRef.current.isDirty ||
             readFormStateRef.current.dirtyFields) {
-            const isFieldDirty = !deepEqual(get(defaultValuesRef.current, name), getFieldValue(get(fieldsRef.current, name)));
+            const isFieldDirty = !deepEqual(get(defaultValuesRef.current, name), inputValue);
             const isDirtyFieldExist = get(formStateRef.current.dirtyFields, name);
             const previousIsDirty = formStateRef.current.isDirty;
             isFieldDirty
                 ? set(formStateRef.current.dirtyFields, name, true)
                 : unset(formStateRef.current.dirtyFields, name);
+            formStateRef.current.isDirty = getFormIsDirty();
             const state = {
-                isDirty: getFormIsDirty(),
+                isDirty: formStateRef.current.isDirty,
                 dirtyFields: formStateRef.current.dirtyFields,
             };
             const isChanged = (readFormStateRef.current.isDirty &&
@@ -854,8 +1212,11 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
                     isDirty: getFormIsDirty(name, value),
                 });
             }
+            !value.length &&
+                set(fieldsRef.current, name, []) &&
+                set(fieldArrayDefaultValuesRef.current, name, []);
         }
-        field && !field._f
+        (field && !field._f) || isFieldArray
             ? setInternalValues(name, value, isFieldArray ? {} : options)
             : setFieldValue(name, value, options, true, !field);
         isFieldWatched(name) && formStateSubjectRef.current.next({});
@@ -876,7 +1237,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
             if (!isUndefined(inputValue)) {
                 field._f.value = inputValue;
             }
-            const state = updateAndGetDirtyState(name, false);
+            const state = updateAndGetDirtyState(name, field._f.value, false);
             if (isBlurEvent && !get(formStateRef.current.touchedFields, name)) {
                 set(formStateRef.current.touchedFields, name, true);
                 state.touchedFields = formStateRef.current.touchedFields;
@@ -1033,7 +1394,8 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
                 ? Array.isArray(field._f.refs) &&
                     compact(field._f.refs).find((option) => ref.value === option.value && option === ref)
                 : ref === field._f.ref) ||
-                !field) {
+                !field ||
+                (isWeb && isHTMLElement(field._f.ref) && !isHTMLElement(ref))) {
                 return;
             }
             field = {
@@ -1067,13 +1429,15 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         }
     };
     const register = React.useCallback((name, options) => {
+        const isInitialRegister = !get(fieldsRef.current, name);
         set(fieldsRef.current, name, {
-            _f: Object.assign(Object.assign(Object.assign({}, (get(fieldsRef.current, name)
-                ? Object.assign({ ref: get(fieldsRef.current, name)._f.ref }, get(fieldsRef.current, name)._f) : { ref: { name } })), { name }), options),
+            _f: Object.assign(Object.assign(Object.assign({}, (isInitialRegister
+                ? { ref: { name } }
+                : Object.assign({ ref: (get(fieldsRef.current, name)._f || {}).ref }, get(fieldsRef.current, name)._f))), { name }), options),
         });
         options && set(fieldsWithValidationRef.current, name, true);
         fieldsNamesRef.current.add(name);
-        updateValueAndGetDefault(name);
+        isInitialRegister && updateValueAndGetDefault(name);
         return isWindowUndefined
             ? { name: name }
             : {
@@ -1113,487 +1477,135 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
                 await onValid(fieldValues, e);
             }
             else {
-                onInvalid && (await onInvalid(formStateRef.current.errors, e));
-                shouldFocusError &&
-                    focusFieldBy(fieldsRef.current, (key) => get(formStateRef.current.errors, key), fieldsNamesRef.current);
-            }
-        }
-        finally {
-            formStateRef.current.isSubmitted = true;
-            formStateSubjectRef.current.next({
-                isSubmitted: true,
-                isSubmitting: false,
-                isSubmitSuccessful: isEmptyObject(formStateRef.current.errors),
-                submitCount: formStateRef.current.submitCount + 1,
-                errors: formStateRef.current.errors,
-            });
-        }
-    }, [shouldFocusError, isValidateAllFieldCriteria, criteriaMode]);
-    const resetFromState = React.useCallback(({ keepErrors, keepDirty, keepIsSubmitted, keepTouched, keepIsValid, keepSubmitCount, }) => {
-        if (!keepIsValid) {
-            validFieldsRef.current = {};
-            fieldsWithValidationRef.current = {};
-        }
-        watchFieldsRef.current = new Set();
-        isWatchAllRef.current = false;
-        formStateSubjectRef.current.next({
-            submitCount: keepSubmitCount ? formStateRef.current.submitCount : 0,
-            isDirty: keepDirty ? formStateRef.current.isDirty : false,
-            isSubmitted: keepIsSubmitted ? formStateRef.current.isSubmitted : false,
-            isValid: keepIsValid
-                ? formStateRef.current.isValid
-                : !validationMode.isOnSubmit,
-            dirtyFields: keepDirty ? formStateRef.current.dirtyFields : {},
-            touchedFields: keepTouched ? formStateRef.current.touchedFields : {},
-            errors: keepErrors ? formStateRef.current.errors : {},
-            isSubmitting: false,
-            isSubmitSuccessful: false,
-        });
-    }, []);
-    const reset = (values, keepStateOptions = {}) => {
-        const updatedValues = values || defaultValuesRef.current;
-        if (isWeb && !keepStateOptions.keepValues) {
-            for (const field of Object.values(fieldsRef.current)) {
-                if (field && field._f) {
-                    const inputRef = Array.isArray(field._f.refs)
-                        ? field._f.refs[0]
-                        : field._f.ref;
-                    if (isHTMLElement(inputRef)) {
-                        try {
-                            inputRef.closest('form').reset();
-                            break;
-                        }
-                        catch (_a) { }
-                    }
-                }
-            }
-        }
-        !keepStateOptions.keepDefaultValues &&
-            (defaultValuesRef.current = Object.assign({}, updatedValues));
-        if (!keepStateOptions.keepValues) {
-            fieldsRef.current = {};
-            controllerSubjectRef.current.next({
-                values: Object.assign({}, updatedValues),
-            });
-            watchSubjectRef.current.next({
-                value: Object.assign({}, updatedValues),
-            });
-            fieldArraySubjectRef.current.next({
-                fields: Object.assign({}, updatedValues),
-                isReset: true,
-            });
-        }
-        resetFromState(keepStateOptions);
-    };
-    React.useEffect(() => {
-        isMountedRef.current = true;
-        const formStateSubscription = formStateSubjectRef.current.subscribe({
-            next(formState = {}) {
-                if (shouldRenderFormState(formState, readFormStateRef.current, true)) {
-                    formStateRef.current = Object.assign(Object.assign({}, formStateRef.current), formState);
-                    setFormState(formStateRef.current);
-                }
-            },
-        });
-        const useFieldArraySubscription = fieldArraySubjectRef.current.subscribe({
-            next(state) {
-                if (state.fields && state.name && readFormStateRef.current.isValid) {
-                    const values = getFieldsValues(fieldsRef);
-                    set(values, state.name, state.fields);
-                    updateIsValid(values);
-                }
-            },
-        });
-        resolverRef.current && readFormStateRef.current.isValid && updateIsValid();
-        return () => {
-            watchSubjectRef.current.unsubscribe();
-            formStateSubscription.unsubscribe();
-            useFieldArraySubscription.unsubscribe();
-        };
-    }, []);
-    return {
-        control: React.useMemo(() => ({
-            register,
-            isWatchAllRef,
-            watchFieldsRef,
-            getFormIsDirty,
-            formStateSubjectRef,
-            fieldArraySubjectRef,
-            controllerSubjectRef,
-            watchSubjectRef,
-            watchInternal,
-            fieldsRef,
-            validFieldsRef,
-            fieldsWithValidationRef,
-            fieldArrayNamesRef,
-            readFormStateRef,
-            formStateRef,
-            defaultValuesRef,
-            fieldArrayDefaultValuesRef,
-        }), []),
-        formState: getProxyFormState(isProxyEnabled, formState, readFormStateRef),
-        trigger,
-        register,
-        handleSubmit,
-        watch: React.useCallback(watch, []),
-        setValue: React.useCallback(setValue, [setInternalValues]),
-        getValues: React.useCallback(getValues, []),
-        reset: React.useCallback(reset, []),
-        clearErrors: React.useCallback(clearErrors, []),
-        unregister: React.useCallback(unregister, []),
-        setError: React.useCallback(setError, []),
-    };
-}
-
-const FormContext = React.createContext(null);
-FormContext.displayName = 'RHFContext';
-const useFormContext = () => React.useContext(FormContext);
-const FormProvider = (props) => (React.createElement(FormContext.Provider, { value: omit(props, 'children') }, props.children));
-
-var generateId = () => {
-    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 mapIds = (values = [], keyName) => values.map((value) => (Object.assign({ [keyName]: (value && value[keyName]) || generateId() }, value)));
-
-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, (Array.isArray(index) ? index : [index]).sort((a, b) => a - b));
-
-var moveArrayAt = (data, from, to) => {
-    if (Array.isArray(data)) {
-        if (isUndefined(data[to])) {
-            data[to] = undefined;
-        }
-        data.splice(to, 0, data.splice(from, 1)[0]);
-        return data;
-    }
-    return [];
-};
-
-var swapArrayAt = (data, indexA, indexB) => {
-    data[indexA] = [data[indexB], (data[indexB] = data[indexA])][0];
-};
-
-function prepend(data, value) {
-    return [...(Array.isArray(value) ? value : [value]), ...data];
-}
-
-function append(data, value) {
-    return [...data, ...(Array.isArray(value) ? value : [value])];
-}
-
-function insert(data, index, value) {
-    return [
-        ...data.slice(0, index),
-        ...(Array.isArray(value) ? value : [value]),
-        ...data.slice(index),
-    ];
-}
-
-var fillEmptyArray = (value) => Array.isArray(value) ? Array(value.length).fill(undefined) : undefined;
-
-const useFieldArray = ({ control, name, keyName = 'id', }) => {
-    const methods = useFormContext();
-    const focusNameRef = React.useRef('');
-    const { isWatchAllRef, watchFieldsRef, getFormIsDirty, watchSubjectRef, fieldArraySubjectRef, fieldArrayNamesRef, fieldsRef, defaultValuesRef, formStateRef, formStateSubjectRef, readFormStateRef, validFieldsRef, fieldsWithValidationRef, fieldArrayDefaultValuesRef, } = control || methods.control;
-    const [fields, setFields] = React.useState(mapIds(get(fieldArrayDefaultValuesRef.current, getNodeParentName(name))
-        ? get(fieldArrayDefaultValuesRef.current, name, [])
-        : get(defaultValuesRef.current, name, []), keyName));
-    set(fieldArrayDefaultValuesRef.current, name, [...fields]);
-    fieldArrayNamesRef.current.add(name);
-    const omitKey = (fields) => fields.map((field) => omit((field || {}), keyName));
-    const getCurrentFieldsValues = () => {
-        const values = get(getFieldsValues(fieldsRef, defaultValuesRef), name, []);
-        return mapIds(get(fieldArrayDefaultValuesRef.current, name, []).map((item, index) => (Object.assign(Object.assign({}, item), values[index]))), keyName);
-    };
-    const getFocusDetail = (index, options) => options
-        ? !isUndefined(options.focusIndex)
-            ? `${name}.${options.focusIndex}`
-            : options.focusName
-                ? options.focusName
-                : !options.shouldFocus
-                    ? ''
-                    : `${name}.${index}`
-        : `${name}.${index}`;
-    const resetFields = (index) => (Array.isArray(index) ? index : [index]).forEach((currentIndex) => set(fieldsRef.current, `${name}${isUndefined(currentIndex) ? '' : `.${currentIndex}`}`, isUndefined(currentIndex) ? [] : undefined));
-    const setFieldsAndNotify = (fieldsValues = []) => setFields(mapIds(fieldsValues, keyName));
-    const cleanup = (ref) => !compact(get(ref, name, [])).length && unset(ref, name);
-    const updateDirtyFieldsWithDefaultValues = (updatedFieldArrayValues) => updatedFieldArrayValues &&
-        set(formStateRef.current.dirtyFields, name, setFieldArrayDirtyFields(omitKey(updatedFieldArrayValues), get(defaultValuesRef.current, name, []), get(formStateRef.current.dirtyFields, name, [])));
-    const batchStateUpdate = (method, args, updatedFieldArrayValues = [], shouldSet = true) => {
-        if (get(fieldsRef.current, name)) {
-            const output = method(get(fieldsRef.current, name), args.argA, args.argB);
-            shouldSet && set(fieldsRef.current, name, output);
-        }
-        if (Array.isArray(get(formStateRef.current.errors, name))) {
-            const output = method(get(formStateRef.current.errors, name), args.argA, args.argB);
-            shouldSet && set(formStateRef.current.errors, name, output);
-            cleanup(formStateRef.current.errors);
-        }
-        if (readFormStateRef.current.touchedFields &&
-            get(formStateRef.current.touchedFields, name)) {
-            const output = method(get(formStateRef.current.touchedFields, name), args.argA, args.argB);
-            shouldSet && set(formStateRef.current.touchedFields, name, output);
-            cleanup(formStateRef.current.touchedFields);
-        }
-        if (readFormStateRef.current.dirtyFields ||
-            readFormStateRef.current.isDirty) {
-            set(formStateRef.current.dirtyFields, name, setFieldArrayDirtyFields(omitKey(updatedFieldArrayValues), get(defaultValuesRef.current, name, []), get(formStateRef.current.dirtyFields, name, [])));
-            updateDirtyFieldsWithDefaultValues(updatedFieldArrayValues);
-            cleanup(formStateRef.current.dirtyFields);
-        }
-        if (readFormStateRef.current.isValid) {
-            set(validFieldsRef.current, name, method(get(validFieldsRef.current, name, []), args.argA));
-            cleanup(validFieldsRef.current);
-            set(fieldsWithValidationRef.current, name, method(get(fieldsWithValidationRef.current, name, []), args.argA));
-            cleanup(fieldsWithValidationRef.current);
-        }
-        formStateSubjectRef.current.next({
-            isDirty: getFormIsDirty(name, omitKey(updatedFieldArrayValues)),
-            errors: formStateRef.current.errors,
-            isValid: formStateRef.current.isValid,
-        });
-    };
-    const registerFieldArray = (values, index = 0, parentName = '') => values.forEach((appendValueItem, valueIndex) => Object.entries(appendValueItem).forEach(([key, value]) => {
-        const inputName = `${parentName || name}.${parentName ? valueIndex : index + valueIndex}.${key}`;
-        Array.isArray(value)
-            ? registerFieldArray(value, valueIndex, inputName)
-            : set(fieldsRef.current, inputName, {
-                _f: {
-                    ref: {
-                        name: inputName,
-                    },
-                    name: inputName,
-                    value,
-                },
-            });
-    }));
-    const append$1 = (value, options) => {
-        const appendValue = Array.isArray(value) ? value : [value];
-        const updatedFieldArrayValues = append(getCurrentFieldsValues(), appendValue);
-        const currentIndex = updatedFieldArrayValues.length - appendValue.length;
-        setFieldsAndNotify(updatedFieldArrayValues);
-        batchStateUpdate(append, {
-            argA: fillEmptyArray(value),
-        }, updatedFieldArrayValues, false);
-        registerFieldArray(appendValue, currentIndex);
-        focusNameRef.current = getFocusDetail(currentIndex, options);
-    };
-    const prepend$1 = (value, options) => {
-        const prependValue = Array.isArray(value) ? value : [value];
-        const updatedFieldArrayValues = prepend(getCurrentFieldsValues(), prependValue);
-        setFieldsAndNotify(updatedFieldArrayValues);
-        batchStateUpdate(prepend, {
-            argA: fillEmptyArray(value),
-        }, updatedFieldArrayValues);
-        registerFieldArray(prependValue);
-        focusNameRef.current = getFocusDetail(0, options);
-    };
-    const remove = (index) => {
-        const updatedFieldArrayValues = removeArrayAt(getCurrentFieldsValues(), index);
-        resetFields(index);
-        setFieldsAndNotify(updatedFieldArrayValues);
-        batchStateUpdate(removeArrayAt, {
-            argA: index,
-        }, updatedFieldArrayValues);
-    };
-    const insert$1 = (index, value, options) => {
-        const insertValue = Array.isArray(value) ? value : [value];
-        const updatedFieldArrayValues = insert(getCurrentFieldsValues(), index, insertValue);
-        setFieldsAndNotify(updatedFieldArrayValues);
-        batchStateUpdate(insert, {
-            argA: index,
-            argB: fillEmptyArray(value),
-        }, updatedFieldArrayValues);
-        registerFieldArray(insertValue, index);
-        focusNameRef.current = getFocusDetail(index, options);
-    };
-    const swap = (indexA, indexB) => {
-        const fieldValues = getCurrentFieldsValues();
-        swapArrayAt(fieldValues, indexA, indexB);
-        batchStateUpdate(swapArrayAt, {
-            argA: indexA,
-            argB: indexB,
-        }, fieldValues, false);
-        setFieldsAndNotify(fieldValues);
-    };
-    const move = (from, to) => {
-        const fieldValues = getCurrentFieldsValues();
-        moveArrayAt(fieldValues, from, to);
-        setFieldsAndNotify(fieldValues);
-        batchStateUpdate(moveArrayAt, {
-            argA: from,
-            argB: to,
-        }, fieldValues, false);
-    };
-    React.useEffect(() => {
-        if (isWatchAllRef.current) {
-            formStateSubjectRef.current.next({});
+                onInvalid && (await onInvalid(formStateRef.current.errors, e));
+                shouldFocusError &&
+                    focusFieldBy(fieldsRef.current, (key) => get(formStateRef.current.errors, key), fieldsNamesRef.current);
+            }
         }
-        else {
-            for (const watchField of watchFieldsRef.current) {
-                if (name.startsWith(watchField)) {
-                    formStateSubjectRef.current.next({});
-                    break;
+        finally {
+            formStateRef.current.isSubmitted = true;
+            formStateSubjectRef.current.next({
+                isSubmitted: true,
+                isSubmitting: false,
+                isSubmitSuccessful: isEmptyObject(formStateRef.current.errors),
+                submitCount: formStateRef.current.submitCount + 1,
+                errors: formStateRef.current.errors,
+            });
+        }
+    }, [shouldFocusError, isValidateAllFieldCriteria, criteriaMode]);
+    const resetFromState = React.useCallback(({ keepErrors, keepDirty, keepIsSubmitted, keepTouched, keepIsValid, keepSubmitCount, }) => {
+        if (!keepIsValid) {
+            validFieldsRef.current = {};
+            fieldsWithValidationRef.current = {};
+        }
+        watchFieldsRef.current = new Set();
+        isWatchAllRef.current = false;
+        formStateSubjectRef.current.next({
+            submitCount: keepSubmitCount ? formStateRef.current.submitCount : 0,
+            isDirty: keepDirty ? formStateRef.current.isDirty : false,
+            isSubmitted: keepIsSubmitted ? formStateRef.current.isSubmitted : false,
+            isValid: keepIsValid
+                ? formStateRef.current.isValid
+                : !validationMode.isOnSubmit,
+            dirtyFields: keepDirty ? formStateRef.current.dirtyFields : {},
+            touchedFields: keepTouched ? formStateRef.current.touchedFields : {},
+            errors: keepErrors ? formStateRef.current.errors : {},
+            isSubmitting: false,
+            isSubmitSuccessful: false,
+        });
+    }, []);
+    const reset = (values, keepStateOptions = {}) => {
+        const updatedValues = values || defaultValuesRef.current;
+        if (isWeb && !keepStateOptions.keepValues) {
+            for (const field of Object.values(fieldsRef.current)) {
+                if (field && field._f) {
+                    const inputRef = Array.isArray(field._f.refs)
+                        ? field._f.refs[0]
+                        : field._f.ref;
+                    if (isHTMLElement(inputRef)) {
+                        try {
+                            inputRef.closest('form').reset();
+                            break;
+                        }
+                        catch (_a) { }
+                    }
                 }
             }
         }
-        watchSubjectRef.current.next({
-            name,
-            value: get(getFieldsValues(fieldsRef, defaultValuesRef), name, []),
-        });
-        focusNameRef.current &&
-            focusFieldBy(fieldsRef.current, (key) => key.startsWith(focusNameRef.current));
-        focusNameRef.current = '';
-        fieldArraySubjectRef.current.next({
-            name,
-            fields: omitKey([...fields]),
-        });
-    }, [fields, name]);
+        !keepStateOptions.keepDefaultValues &&
+            (defaultValuesRef.current = Object.assign({}, updatedValues));
+        if (!keepStateOptions.keepValues) {
+            fieldsRef.current = {};
+            controllerSubjectRef.current.next({
+                values: Object.assign({}, updatedValues),
+            });
+            watchSubjectRef.current.next({
+                value: Object.assign({}, updatedValues),
+            });
+            fieldArraySubjectRef.current.next({
+                fields: Object.assign({}, updatedValues),
+                isReset: true,
+            });
+        }
+        resetFromState(keepStateOptions);
+    };
     React.useEffect(() => {
-        const fieldArraySubscription = fieldArraySubjectRef.current.subscribe({
-            next({ name: inputFieldArrayName, fields, isReset }) {
-                if (isReset) {
-                    unset(fieldsRef.current, inputFieldArrayName || name);
-                    inputFieldArrayName
-                        ? set(fieldArrayDefaultValuesRef.current, inputFieldArrayName, fields)
-                        : (fieldArrayDefaultValuesRef.current = fields);
-                    setFieldsAndNotify(get(fieldArrayDefaultValuesRef.current, name));
+        isMountedRef.current = true;
+        const formStateSubscription = formStateSubjectRef.current.subscribe({
+            next(formState = {}) {
+                if (shouldRenderFormState(formState, readFormStateRef.current, true)) {
+                    formStateRef.current = Object.assign(Object.assign({}, formStateRef.current), formState);
+                    setFormState(formStateRef.current);
                 }
             },
         });
-        !get(fieldsRef.current, name) && set(fieldsRef.current, name, []);
-        return () => {
-            fieldArrayDefaultValuesRef.current = getFieldsValues(fieldsRef);
-            fieldArraySubscription.unsubscribe();
-        };
-    }, []);
-    return {
-        swap: React.useCallback(swap, [name]),
-        move: React.useCallback(move, [name]),
-        prepend: React.useCallback(prepend$1, [name]),
-        append: React.useCallback(append$1, [name]),
-        remove: React.useCallback(remove, [name]),
-        insert: React.useCallback(insert$1, [name]),
-        fields: fields,
-    };
-};
-
-function useFormState({ control, } = {}) {
-    const methods = useFormContext();
-    const { formStateRef, formStateSubjectRef, readFormStateRef } = control || methods.control;
-    const [formState, updateFormState] = React.useState(formStateRef.current);
-    const readFormState = React.useRef({
-        isDirty: false,
-        dirtyFields: false,
-        touchedFields: false,
-        isValidating: false,
-        isValid: false,
-        errors: false,
-    });
-    React.useEffect(() => {
-        const formStateSubscription = formStateSubjectRef.current.subscribe({
-            next: (formState) => {
-                shouldRenderFormState(formState, readFormState.current) &&
-                    updateFormState(Object.assign(Object.assign({}, formStateRef.current), formState));
+        const useFieldArraySubscription = fieldArraySubjectRef.current.subscribe({
+            next(state) {
+                if (state.fields && state.name && readFormStateRef.current.isValid) {
+                    const values = getFieldsValues(fieldsRef);
+                    set(values, state.name, state.fields);
+                    updateIsValid(values);
+                }
             },
         });
-        return () => formStateSubscription.unsubscribe();
+        resolverRef.current && readFormStateRef.current.isValid && updateIsValid();
+        return () => {
+            watchSubjectRef.current.unsubscribe();
+            formStateSubscription.unsubscribe();
+            useFieldArraySubscription.unsubscribe();
+        };
     }, []);
-    return getProxyFormState(isProxyEnabled, formState, readFormStateRef, readFormState, false);
-}
-
-var getControllerValue = (event) => isObject(event) && event.target
-    ? isCheckBoxInput(event.target)
-        ? event.target.checked
-        : event.target.value
-    : event;
-
-var isNameInFieldArray = (names, name) => [...names].some((current) => getNodeParentName(name) === current);
-
-function useController({ name, rules, defaultValue, control, }) {
-    const methods = useFormContext();
-    const { defaultValuesRef, register, fieldsRef, fieldArrayNamesRef, controllerSubjectRef, } = control || methods.control;
-    const { onChange, onBlur, ref } = register(name, rules);
-    const [value, setInputStateValue] = React.useState(isUndefined(get(fieldsRef.current, name)._f.value) ||
-        isNameInFieldArray(fieldArrayNamesRef.current, name)
-        ? isUndefined(defaultValue)
-            ? get(defaultValuesRef.current, name)
-            : defaultValue
-        : get(fieldsRef.current, name)._f.value);
-    const formState = useFormState({
-        control: control || methods.control,
-    });
-    get(fieldsRef.current, name)._f.value = value;
-    React.useEffect(() => {
-        const controllerSubscription = controllerSubjectRef.current.subscribe({
-            next: (data) => (!data.name || name === data.name) &&
-                setInputStateValue(get(data.values, name)),
-        });
-        return () => controllerSubscription.unsubscribe();
-    }, [name]);
     return {
-        field: {
-            onChange: (event) => {
-                const value = getControllerValue(event);
-                setInputStateValue(value);
-                onChange({
-                    target: {
-                        value,
-                        name: name,
-                    },
-                    type: EVENTS.CHANGE,
-                });
-            },
-            onBlur: () => {
-                onBlur({
-                    target: {
-                        name: name,
-                    },
-                    type: EVENTS.BLUR,
-                });
-            },
-            name,
-            value,
-            ref,
-        },
-        formState,
-        fieldState: Object.defineProperties({}, {
-            invalid: {
-                get() {
-                    return !!get(formState.errors, name);
-                },
-            },
-            isDirty: {
-                get() {
-                    return !!get(formState.dirtyFields, name);
-                },
-            },
-            isTouched: {
-                get() {
-                    return !!get(formState.touchedFields, name);
-                },
-            },
-            error: {
-                get() {
-                    return get(formState.errors, name);
-                },
-            },
-        }),
+        control: React.useMemo(() => ({
+            register,
+            isWatchAllRef,
+            watchFieldsRef,
+            getFormIsDirty,
+            formStateSubjectRef,
+            fieldArraySubjectRef,
+            controllerSubjectRef,
+            watchSubjectRef,
+            watchInternal,
+            fieldsRef,
+            validFieldsRef,
+            fieldsWithValidationRef,
+            fieldArrayNamesRef,
+            readFormStateRef,
+            formStateRef,
+            defaultValuesRef,
+            fieldArrayDefaultValuesRef,
+        }), []),
+        formState: getProxyFormState(isProxyEnabled, formState, readFormStateRef),
+        trigger,
+        register,
+        handleSubmit,
+        watch: React.useCallback(watch, []),
+        setValue: React.useCallback(setValue, [setInternalValues]),
+        getValues: React.useCallback(getValues, []),
+        reset: React.useCallback(reset, []),
+        clearErrors: React.useCallback(clearErrors, []),
+        unregister: React.useCallback(unregister, []),
+        setError: React.useCallback(setError, []),
     };
 }
 
@@ -1623,7 +1635,5 @@ function useWatch(props) {
     return value;
 }
 
-const Controller = (props) => props.render(useController(props));
-
 export { Controller, FormProvider, appendErrors, get, set, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
 //# sourceMappingURL=index.esm.js.map