@vritti/quantum-ui 0.5.3 → 0.5.5

package/dist/index.esm.js

@@ -2,6 +2,8 @@ import React__default from 'react';
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
+var isFileInput = (element) => element.type === 'file';
+
 var isDateObject = (value) => value instanceof Date;
 
 var isNullOrUndefined = (value) => value == null;
@@ -15,23 +17,41 @@ var isObject = (value) => !isNullOrUndefined(value) &&
 var getEventValue = (event) => isObject(event) && event.target
     ? isCheckBoxInput(event.target)
         ? event.target.checked
-        : event.target.value
+        : isFileInput(event.target)
+            ? event.target.files
+            : event.target.value
     : event;
 
-var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/)) || name;
-
-var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
+const FIELD_PATH_RE = /[.[\]'"]/;
+var stringToPath = (input) => input.split(FIELD_PATH_RE).filter(Boolean);
+
+function getNullAncestorValue(control, name) {
+    const segments = stringToPath(name);
+    let formValues = control._formValues;
+    let defaultValues = control._defaultValues;
+    for (let i = 0; i < segments.length - 1; i++) {
+        const key = segments[i];
+        formValues = formValues == null ? formValues : formValues[key];
+        defaultValues = defaultValues == null ? defaultValues : defaultValues[key];
+        if (formValues === null || defaultValues === null) {
+            return null;
+        }
+    }
+    return undefined;
+}
 
-var isPlainObject = (tempObject) => {
-    const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
-    return (isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
-};
+var isNameInFieldArray = (names, name) => name
+    .split('.')
+    .some((part, index, arr) => !isNaN(Number(part)) && names.has(arr.slice(0, index).join('.')));
 
 var isWeb = typeof window !== 'undefined' &&
     typeof window.HTMLElement !== 'undefined' &&
     typeof document !== 'undefined';
 
 function cloneObject(data) {
+    if (data === null || typeof data !== 'object') {
+        return data;
+    }
     if (data instanceof Date) {
         return new Date(data);
     }
@@ -40,7 +60,7 @@ function cloneObject(data) {
         return data;
     }
     const isArray = Array.isArray(data);
-    if (!isArray && !(isObject(data) && isPlainObject(data))) {
+    if (!isArray && data.constructor !== Object) {
         return data;
     }
     const copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
@@ -52,19 +72,49 @@ function cloneObject(data) {
     return copy;
 }
 
-var isKey = (value) => /^\w*$/.test(value);
-
-var isUndefined = (val) => val === undefined;
+const EVENTS = {
+    BLUR: 'blur',
+    FOCUS_OUT: 'focusout',
+    CHANGE: 'change',
+    SUBMIT: 'submit',
+    TRIGGER: 'trigger',
+    VALID: 'valid',
+};
+const VALIDATION_MODE = {
+    onBlur: 'onBlur',
+    onChange: 'onChange',
+    onSubmit: 'onSubmit',
+    onTouched: 'onTouched',
+    all: 'all',
+};
+const INPUT_VALIDATION_RULES = {
+    max: 'max',
+    min: 'min',
+    maxLength: 'maxLength',
+    minLength: 'minLength',
+    pattern: 'pattern',
+    required: 'required',
+    validate: 'validate',
+};
+const ROOT_ERROR_TYPE = 'root';
+const PROTOTYPE_KEYWORDS = ['__proto__', 'constructor', 'prototype'];
 
-var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+const IS_KEY_RE = /^\w*$/;
+var isKey = (value) => IS_KEY_RE.test(value);
 
-var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
+var isUndefined = (val) => val === undefined;
 
 var get = (object, path, defaultValue) => {
     if (!path || !isObject(object)) {
         return defaultValue;
     }
-    const result = (isKey(path) ? [path] : stringToPath(path)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], object);
+    const paths = isKey(path) ? [path] : stringToPath(path);
+    if (paths.some((key) => PROTOTYPE_KEYWORDS.includes(key))) {
+        return defaultValue;
+    }
+    const result = paths.reduce((result, key) => {
+        return isNullOrUndefined(result) ? undefined : result[key];
+    }, object);
     return isUndefined(result) || result === object
         ? isUndefined(object[path])
             ? defaultValue
@@ -93,7 +143,7 @@ var set = (object, path, value) => {
                         ? []
                         : {};
         }
-        if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
+        if (PROTOTYPE_KEYWORDS.includes(key)) {
             return;
         }
         object[key] = newValue;
@@ -101,28 +151,6 @@ var set = (object, path, value) => {
     }
 };
 
-const EVENTS = {
-    BLUR: 'blur',
-    FOCUS_OUT: 'focusout',
-    CHANGE: 'change',
-};
-const VALIDATION_MODE = {
-    onBlur: 'onBlur',
-    onChange: 'onChange',
-    onSubmit: 'onSubmit',
-    onTouched: 'onTouched',
-    all: 'all',
-};
-const INPUT_VALIDATION_RULES = {
-    max: 'max',
-    min: 'min',
-    maxLength: 'maxLength',
-    minLength: 'minLength',
-    pattern: 'pattern',
-    required: 'required',
-    validate: 'validate',
-};
-
 /**
  * Separate context for `control` to prevent unnecessary rerenders.
  * Internal hooks that only need control use this instead of full form context.
@@ -135,9 +163,7 @@ HookFormControlContext.displayName = 'HookFormControlContext';
 const useFormControlContext = () => React__default.useContext(HookFormControlContext);
 
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
-    const result = {
-        defaultValues: control._defaultValues,
-    };
+    const result = {};
     for (const key in formState) {
         Object.defineProperty(result, key, {
             get: () => {
@@ -153,15 +179,107 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
     return result;
 };
 
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
+const useIsomorphicLayoutEffect = isWeb
+    ? React__default.useLayoutEffect
+    : React__default.useEffect;
+
+var isPlainObject = (tempObject) => {
+    const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
+    return (isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
+};
+
+var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
+
+const isEmptyObjectWithCustomPrototype = (object, keys) => keys.length === 0 && !Array.isArray(object) && !isPlainObject(object);
+function deepEqual(object1, object2, visited = new WeakMap()) {
+    if (object1 === object2) {
+        return true;
+    }
+    if (isPrimitive(object1) || isPrimitive(object2)) {
+        return Object.is(object1, object2);
+    }
+    if (isDateObject(object1) && isDateObject(object2)) {
+        return Object.is(object1.getTime(), object2.getTime());
+    }
+    const keys1 = Object.keys(object1);
+    const keys2 = Object.keys(object2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    if (isEmptyObjectWithCustomPrototype(object1, keys1) ||
+        isEmptyObjectWithCustomPrototype(object2, keys2)) {
+        return Object.is(object1, object2);
+    }
+    if (!keys1.length && Array.isArray(object1) !== Array.isArray(object2)) {
+        return false;
+    }
+    const visitedPairs = visited.get(object1);
+    if (visitedPairs && visitedPairs.has(object2)) {
+        return true;
+    }
+    if (visitedPairs) {
+        visitedPairs.add(object2);
+    }
+    else {
+        const ws = new WeakSet();
+        ws.add(object2);
+        visited.set(object1, ws);
+    }
+    for (const key of keys1) {
+        const val1 = object1[key];
+        if (!(key in object2)) {
+            return false;
+        }
+        if (key !== 'ref') {
+            const val2 = object2[key];
+            if ((isDateObject(val1) && isDateObject(val2)) ||
+                ((isObject(val1) || Array.isArray(val1)) &&
+                    (isObject(val2) || Array.isArray(val2)))
+                ? !deepEqual(val1, val2, visited)
+                : !Object.is(val1, val2)) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function useResyncOnReconnect(getInitialValue) {
+    const _connected = React__default.useRef(false);
+    const _initialized = React__default.useRef(false);
+    const _prevValue = React__default.useRef(undefined);
+    const _renderCount = React__default.useRef(0);
+    _renderCount.current++;
+    if (!_initialized.current && getInitialValue) {
+        _initialized.current = true;
+        _prevValue.current = cloneObject(getInitialValue());
+    }
+    const resyncIfNeeded = React__default.useCallback((enabled, getCurrentValue, setValue) => {
+        if (enabled &&
+            (_connected.current ||
+                (_initialized.current && _renderCount.current > 1))) {
+            const currentValue = getCurrentValue();
+            if (!deepEqual(_prevValue.current, currentValue)) {
+                setValue(currentValue);
+            }
+        }
+        _connected.current = true;
+    }, []);
+    const snapshot = React__default.useCallback((enabled, getCurrentValue) => {
+        if (enabled) {
+            _prevValue.current = cloneObject(getCurrentValue());
+        }
+    }, []);
+    return { resyncIfNeeded, snapshot };
+}
 
 /**
- * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
+ * Subscribes to each form state and isolates re-renders at the custom hook level. It has its own scope for form state subscriptions, so it will not affect other useFormState or useForm instances. Using this hook can reduce the re-render impact on large and complex form applications.
  *
  * @remarks
  * [API](https://react-hook-form.com/docs/useformstate) • [Demo](https://codesandbox.io/s/useformstate-75xly)
  *
- * @param props - include options on specify fields to subscribe. {@link UseFormStateReturn}
+ * @param props - Include options to specify fields to subscribe to. {@link UseFormStateReturn}
  *
  * @example
  * ```tsx
@@ -188,7 +306,11 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React__default
 function useFormState(props) {
     const formControl = useFormControlContext();
     const { control = formControl, disabled, name, exact } = props || {};
-    const [formState, updateFormState] = React__default.useState(control._formState);
+    const getCurrentFormState = () => ({
+        ...control._formState,
+        defaultValues: control._defaultValues,
+    });
+    const [formState, updateFormState] = React__default.useState(getCurrentFormState);
     const _localProxyFormState = React__default.useRef({
         isDirty: false,
         isLoading: false,
@@ -199,18 +321,27 @@ function useFormState(props) {
         isValid: false,
         errors: false,
     });
-    useIsomorphicLayoutEffect(() => control._subscribe({
-        name,
-        formState: _localProxyFormState.current,
-        exact,
-        callback: (formState) => {
-            !disabled &&
-                updateFormState({
-                    ...control._formState,
-                    ...formState,
-                });
-        },
-    }), [name, disabled, exact]);
+    const { resyncIfNeeded, snapshot } = useResyncOnReconnect(getCurrentFormState);
+    useIsomorphicLayoutEffect(() => {
+        resyncIfNeeded(!disabled, getCurrentFormState, updateFormState);
+        const unsubscribe = control._subscribe({
+            name,
+            formState: _localProxyFormState.current,
+            exact,
+            callback: (formState) => {
+                !disabled &&
+                    updateFormState({
+                        ...control._formState,
+                        ...formState,
+                        defaultValues: control._defaultValues,
+                    });
+            },
+        });
+        return () => {
+            unsubscribe();
+            snapshot(!disabled, getCurrentFormState);
+        };
+    }, [name, disabled, exact, resyncIfNeeded, snapshot]);
     React__default.useEffect(() => {
         _localProxyFormState.current.isValid && control._setValid(true);
     }, [control]);
@@ -226,52 +357,14 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
     }
     if (Array.isArray(names)) {
         return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName),
-            get(formValues, fieldName)));
+            get(formValues, fieldName, get(defaultValue, fieldName))));
     }
     isGlobal && (_names.watchAll = true);
     return formValues;
 };
 
-var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
-
-function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
-    if (isPrimitive(object1) || isPrimitive(object2)) {
-        return Object.is(object1, object2);
-    }
-    if (isDateObject(object1) && isDateObject(object2)) {
-        return Object.is(object1.getTime(), object2.getTime());
-    }
-    const keys1 = Object.keys(object1);
-    const keys2 = Object.keys(object2);
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-    if (_internal_visited.has(object1) || _internal_visited.has(object2)) {
-        return true;
-    }
-    _internal_visited.add(object1);
-    _internal_visited.add(object2);
-    for (const key of keys1) {
-        const val1 = object1[key];
-        if (!keys2.includes(key)) {
-            return false;
-        }
-        if (key !== 'ref') {
-            const val2 = object2[key];
-            if ((isDateObject(val1) && isDateObject(val2)) ||
-                (isObject(val1) && isObject(val2)) ||
-                (Array.isArray(val1) && Array.isArray(val2))
-                ? !deepEqual(val1, val2, _internal_visited)
-                : !Object.is(val1, val2)) {
-                return false;
-            }
-        }
-    }
-    return true;
-}
-
 /**
- * Custom hook to subscribe to field change and isolate re-rendering at the component level.
+ * Custom hook to subscribe to field changes and isolate re-rendering at the component level.
  *
  * @remarks
  *
@@ -281,7 +374,7 @@ function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
  * ```tsx
  * const { control } = useForm();
  * const values = useWatch({
- *   name: "fieldName"
+ *   name: "fieldName",
  *   control,
  * })
  * ```
@@ -295,10 +388,11 @@ function useWatch(props) {
     const _prevControl = React__default.useRef(control);
     const _prevName = React__default.useRef(name);
     _compute.current = compute;
-    const [value, updateValue] = React__default.useState(() => {
+    const getInitialOutput = () => {
         const defaultValue = control._getWatch(name, _defaultValue.current);
         return _compute.current ? _compute.current(defaultValue) : defaultValue;
-    });
+    };
+    const [value, updateValue] = React__default.useState(getInitialOutput);
     const getCurrentOutput = React__default.useCallback((values) => {
         const formValues = generateWatchOutput(name, control._names, values || control._formValues, false, _defaultValue.current);
         return _compute.current ? _compute.current(formValues) : formValues;
@@ -318,24 +412,39 @@ function useWatch(props) {
             }
         }
     }, [control._formValues, control._names, disabled, name]);
+    const { resyncIfNeeded, snapshot } = useResyncOnReconnect(getInitialOutput);
+    const _refreshValue = React__default.useRef(refreshValue);
+    _refreshValue.current = refreshValue;
+    const _getCurrentOutput = React__default.useRef(getCurrentOutput);
+    _getCurrentOutput.current = getCurrentOutput;
     useIsomorphicLayoutEffect(() => {
         if (_prevControl.current !== control ||
             !deepEqual(_prevName.current, name)) {
             _prevControl.current = control;
             _prevName.current = name;
-            refreshValue();
+            _refreshValue.current();
         }
-        return control._subscribe({
+        else {
+            resyncIfNeeded(!disabled, () => _getCurrentOutput.current(), (currentValue) => {
+                updateValue(currentValue);
+                _computeFormValues.current = currentValue;
+            });
+        }
+        const unsubscribe = control._subscribe({
             name,
             formState: {
                 values: true,
             },
             exact,
             callback: (formState) => {
-                refreshValue(formState.values);
+                _refreshValue.current(formState.values);
             },
         });
-    }, [control, exact, name, refreshValue]);
+        return () => {
+            unsubscribe();
+            snapshot(!disabled, () => _getCurrentOutput.current());
+        };
+    }, [control, exact, name, disabled, resyncIfNeeded, snapshot]);
     React__default.useEffect(() => control._removeUnmounted());
     // If name or control changed for this render, synchronously reflect the
     // latest value so callers (like useController) see the correct value
@@ -343,17 +452,17 @@ function useWatch(props) {
     // Optimize: Check control reference first before expensive deepEqual
     const controlChanged = _prevControl.current !== control;
     const prevName = _prevName.current;
-    // Cache the computed output to avoid duplicate calls within the same render
-    // We include shouldReturnImmediate in deps to ensure proper recomputation
-    const computedOutput = React__default.useMemo(() => {
+    // `null`/`undefined` are valid watched values, so a boolean flag (rather
+    // than a sentinel return value) decides whether to return the freshly
+    // computed output instead of the possibly-stale state value.
+    const shouldReturnImmediate = React__default.useMemo(() => {
         if (disabled) {
-            return null;
+            return false;
         }
         const nameChanged = !controlChanged && !deepEqual(prevName, name);
-        const shouldReturnImmediate = controlChanged || nameChanged;
-        return shouldReturnImmediate ? getCurrentOutput() : null;
-    }, [disabled, controlChanged, name, prevName, getCurrentOutput]);
-    return computedOutput !== null ? computedOutput : value;
+        return controlChanged || nameChanged;
+    }, [disabled, controlChanged, name, prevName]);
+    return shouldReturnImmediate ? getCurrentOutput() : value;
 }
 
 /**
@@ -384,7 +493,12 @@ function useController(props) {
     const formControl = useFormControlContext();
     const { name, disabled, control = formControl, shouldUnregister, defaultValue, exact = true, } = props;
     const isArrayField = isNameInFieldArray(control._names.array, name);
-    const defaultValueMemo = React__default.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
+    const defaultValueMemo = React__default.useMemo(() => {
+        const resolved = get(control._formValues, name, get(control._defaultValues, name, defaultValue));
+        return isUndefined(resolved)
+            ? getNullAncestorValue(control, name)
+            : resolved;
+    }, [control, name, defaultValue]);
     const value = useWatch({
         control,
         name,
@@ -397,7 +511,7 @@ function useController(props) {
         exact,
     });
     const _props = React__default.useRef(props);
-    const _previousNameRef = React__default.useRef(undefined);
+    const _proxyRef = React__default.useRef(null);
     const _registerProps = React__default.useRef(control.register(name, {
         ...props.rules,
         value,
@@ -426,13 +540,22 @@ function useController(props) {
             get: () => get(formState.errors, name),
         },
     }), [formState, name]);
-    const onChange = React__default.useCallback((event) => _registerProps.current.onChange({
-        target: {
-            value: getEventValue(event),
-            name: name,
-        },
-        type: EVENTS.CHANGE,
-    }), [name]);
+    const onChange = React__default.useCallback((event) => {
+        const value = getEventValue(event);
+        if (!get(control._fields, name)) {
+            _registerProps.current = control.register(name, {
+                ..._props.current.rules,
+                value,
+            });
+        }
+        return _registerProps.current.onChange({
+            target: {
+                value: getEventValue(event),
+                name: name,
+            },
+            type: EVENTS.CHANGE,
+        });
+    }, [name, control]);
     const onBlur = React__default.useCallback(() => _registerProps.current.onBlur({
         target: {
             value: get(control._formValues, name),
@@ -441,15 +564,18 @@ function useController(props) {
         type: EVENTS.BLUR,
     }), [name, control._formValues]);
     const ref = React__default.useCallback((elm) => {
-        const field = get(control._fields, name);
-        if (field && field._f && elm) {
-            field._f.ref = {
+        if (elm) {
+            _proxyRef.current = {
                 focus: () => isFunction(elm.focus) && elm.focus(),
                 select: () => isFunction(elm.select) && elm.select(),
                 setCustomValidity: (message) => isFunction(elm.setCustomValidity) && elm.setCustomValidity(message),
                 reportValidity: () => isFunction(elm.reportValidity) && elm.reportValidity(),
             };
         }
+        const field = get(control._fields, name);
+        if (field && field._f && elm) {
+            field._f.ref = _proxyRef.current;
+        }
     }, [control._fields, name]);
     const field = React__default.useMemo(() => ({
         name,
@@ -463,11 +589,7 @@ function useController(props) {
     }), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
     React__default.useEffect(() => {
         const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
-        const previousName = _previousNameRef.current;
-        if (previousName && previousName !== name && !isArrayField) {
-            control.unregister(previousName);
-        }
-        control.register(name, {
+        _registerProps.current = control.register(name, {
             ..._props.current.rules,
             ...(isBoolean(_props.current.disabled)
                 ? { disabled: _props.current.disabled }
@@ -481,14 +603,21 @@ function useController(props) {
         };
         updateMounted(name, true);
         if (_shouldUnregisterField) {
-            const value = cloneObject(get(control._options.defaultValues, name, _props.current.defaultValue));
+            const value = cloneObject(get(shouldUnregister
+                ? control._defaultValues
+                : control._options.values || control._defaultValues, name, get(control._options.defaultValues, name, _props.current.defaultValue)));
             set(control._defaultValues, name, value);
             if (isUndefined(get(control._formValues, name))) {
                 set(control._formValues, name, value);
             }
         }
         !isArrayField && control.register(name);
-        _previousNameRef.current = name;
+        if (_proxyRef.current) {
+            const field = get(control._fields, name);
+            if (field && field._f) {
+                field._f.ref = _proxyRef.current;
+            }
+        }
         return () => {
             (isArrayField
                 ? _shouldUnregisterField && !control._state.action
@@ -554,95 +683,472 @@ function useController(props) {
  */
 const Controller = (props) => props.render(useController(props));
 
-const HookFormContext = React__default.createContext(null);
-HookFormContext.displayName = '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 = (props) => {
-    const { children, watch, getValues, getFieldState, setError, clearErrors, setValue, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, } = props;
-    return (React__default.createElement(HookFormContext.Provider, { value: React__default.useMemo(() => ({
-            watch,
-            getValues,
-            getFieldState,
-            setError,
-            clearErrors,
-            setValue,
-            trigger,
-            formState,
-            resetField,
-            reset,
-            handleSubmit,
-            unregister,
-            control,
-            register,
-            setFocus,
-            subscribe,
-        }), [
-            clearErrors,
-            control,
-            formState,
-            getFieldState,
-            getValues,
-            handleSubmit,
-            register,
-            reset,
-            resetField,
-            setError,
-            setFocus,
-            setValue,
-            subscribe,
-            trigger,
-            unregister,
-            watch,
-        ]) },
-        React__default.createElement(HookFormControlContext.Provider, { value: control }, children)));
-};
+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 appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
-    ? {
-        ...errors[name],
-        types: {
-            ...(errors[name] && errors[name].types ? errors[name].types : {}),
-            [type]: message || true,
-        },
+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;
     }
-    : {};
-
-var convertToArrayPayload = (value) => (Array.isArray(value) ? value : [value]);
+    return false;
+};
 
-var createSubject = () => {
-    let _observers = [];
-    const next = (value) => {
-        for (const observer of _observers) {
-            observer.next && observer.next(value);
+const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
+    for (const key of fieldsNames || Object.keys(fields)) {
+        if (key === '_f') {
+            continue;
+        }
+        const field = fieldsNames ? get(fields, key) : fields[key];
+        if (field) {
+            const { _f } = 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(field, action)) {
+                        break;
+                    }
+                }
+            }
+            else if (isObject(field) || Array.isArray(field)) {
+                if (iterateFieldsByAction(field, action)) {
+                    break;
+                }
+            }
+        }
+    }
+    return;
+};
+
+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;
+
+var isHTMLElement = (value) => {
+    if (!isWeb) {
+        return false;
+    }
+    const owner = value ? value.ownerDocument : 0;
+    return (value instanceof
+        (owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement));
+};
+
+var isRadioInput = (element) => element.type === 'radio';
+
+var isRegex = (value) => value instanceof RegExp;
+
+var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
+    ? {
+        ...errors[name],
+        types: {
+            ...(errors[name] && errors[name].types ? errors[name].types : {}),
+            [type]: message || true,
+        },
+    }
+    : {};
+
+const defaultResult = {
+    value: false,
+    isValid: false,
+};
+const validResult = { value: true, isValid: true };
+var getCheckboxValue = (options) => {
+    if (!Array.isArray(options)) {
+        return defaultResult;
+    }
+    if (options.length > 1) {
+        const values = options
+            .filter((option) => option && option.checked && !option.disabled)
+            .map((option) => option.value);
+        return { value: values, isValid: !!values.length };
+    }
+    const option = options[0];
+    if (!option || !option.checked || option.disabled) {
+        return defaultResult;
+    }
+    if (!option.attributes || !('value' in option.attributes)) {
+        return validResult;
+    }
+    return isUndefined(option.value) || option.value === ''
+        ? validResult
+        : { value: option.value, isValid: true };
+};
+
+const defaultReturn = {
+    isValid: false,
+    value: null,
+};
+var getRadioValue = (options) => Array.isArray(options)
+    ? options.reduce((previous, option) => option && option.checked && !option.disabled
+        ? {
+            isValid: true,
+            value: option.value,
+        }
+        : previous, defaultReturn)
+    : defaultReturn;
+
+function getValidateError(result, ref, type = 'validate') {
+    if (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 validateField = async (field, disabledFieldNames, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
+    const { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount, } = field._f;
+    const inputValue = get(formValues, name);
+    if (!mount || disabledFieldNames.has(name)) {
+        return {};
+    }
+    const inputRef = refs ? refs[0] : ref;
+    const setCustomValidity = (message) => {
+        if (shouldUseNativeValidation && inputRef.reportValidity) {
+            const validityMessage = isBoolean(message) ? '' : message || '';
+            if (refs) {
+                refs.forEach((ref) => ref.setCustomValidity(validityMessage));
+            }
+            else {
+                inputRef.setCustomValidity(validityMessage);
+            }
+            inputRef.reportValidity();
+        }
+    };
+    const error = {};
+    const isRadio = isRadioInput(ref);
+    const isCheckBox = isCheckBoxInput(ref);
+    const isRadioOrCheckbox = isRadio || isCheckBox;
+    const isEmpty = ((valueAsNumber || isFileInput(ref)) &&
+        isUndefined(ref.value) &&
+        isUndefined(inputValue)) ||
+        (isHTMLElement(ref) && ref.value === '') ||
+        inputValue === '' ||
+        (Array.isArray(inputValue) && !inputValue.length);
+    const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
+    const getMinMaxMessage = (exceedMax, maxLengthMessage, minLengthMessage, maxType = INPUT_VALIDATION_RULES.maxLength, minType = INPUT_VALIDATION_RULES.minLength) => {
+        const message = exceedMax ? maxLengthMessage : minLengthMessage;
+        error[name] = {
+            type: exceedMax ? maxType : minType,
+            message,
+            ref,
+            ...appendErrorsCurry(exceedMax ? maxType : minType, message),
+        };
+    };
+    if (isFieldArray
+        ? !Array.isArray(inputValue) || !inputValue.length
+        : required &&
+            ((!isRadioOrCheckbox && (isEmpty || isNullOrUndefined(inputValue))) ||
+                (isBoolean(inputValue) && !inputValue) ||
+                (isCheckBox && !getCheckboxValue(refs).isValid) ||
+                (isRadio && !getRadioValue(refs).isValid))) {
+        const { value, message } = isString(required)
+            ? { value: !!required, message: required }
+            : getValueAndMessage(required);
+        if (value) {
+            error[name] = {
+                type: INPUT_VALIDATION_RULES.required,
+                message,
+                ref: inputRef,
+                ...appendErrorsCurry(INPUT_VALIDATION_RULES.required, message),
+            };
+            if (!validateAllFieldCriteria) {
+                setCustomValidity(message);
+                return error;
+            }
+        }
+    }
+    if (!isEmpty && (!isNullOrUndefined(min) || !isNullOrUndefined(max))) {
+        let exceedMax;
+        let exceedMin;
+        const maxOutput = getValueAndMessage(max);
+        const minOutput = getValueAndMessage(min);
+        if (!isNullOrUndefined(inputValue) &&
+            !isDateObject(inputValue) &&
+            !isNaN(inputValue)) {
+            const valueNumber = ref.valueAsNumber ||
+                (inputValue ? +inputValue : 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);
+            const convertTimeToDate = (time) => new Date(new Date().toDateString() + ' ' + time);
+            const isTime = ref.type == 'time';
+            const isWeek = ref.type == 'week';
+            if (isString(maxOutput.value) && inputValue) {
+                exceedMax = isTime
+                    ? convertTimeToDate(inputValue) > convertTimeToDate(maxOutput.value)
+                    : isWeek
+                        ? inputValue > maxOutput.value
+                        : valueDate > new Date(maxOutput.value);
+            }
+            if (isString(minOutput.value) && inputValue) {
+                exceedMin = isTime
+                    ? convertTimeToDate(inputValue) < convertTimeToDate(minOutput.value)
+                    : isWeek
+                        ? inputValue < minOutput.value
+                        : valueDate < new Date(minOutput.value);
+            }
+        }
+        if (exceedMax || exceedMin) {
+            getMinMaxMessage(!!exceedMax, maxOutput.message, minOutput.message, INPUT_VALIDATION_RULES.max, INPUT_VALIDATION_RULES.min);
+            if (!validateAllFieldCriteria) {
+                setCustomValidity(error[name].message);
+                return error;
+            }
+        }
+    }
+    if ((maxLength || minLength) &&
+        !isEmpty &&
+        (isString(inputValue) || (isFieldArray && Array.isArray(inputValue)))) {
+        const maxLengthOutput = getValueAndMessage(maxLength);
+        const minLengthOutput = getValueAndMessage(minLength);
+        const exceedMax = !isNullOrUndefined(maxLengthOutput.value) &&
+            inputValue.length > +maxLengthOutput.value;
+        const exceedMin = !isNullOrUndefined(minLengthOutput.value) &&
+            inputValue.length < +minLengthOutput.value;
+        if (exceedMax || exceedMin) {
+            getMinMaxMessage(exceedMax, maxLengthOutput.message, minLengthOutput.message);
+            if (!validateAllFieldCriteria) {
+                setCustomValidity(error[name].message);
+                return error;
+            }
+        }
+    }
+    if (pattern && !isEmpty && isString(inputValue)) {
+        const { value: patternValue, message } = getValueAndMessage(pattern);
+        if (isRegex(patternValue) && !inputValue.match(patternValue)) {
+            error[name] = {
+                type: INPUT_VALIDATION_RULES.pattern,
+                message,
+                ref,
+                ...appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message),
+            };
+            if (!validateAllFieldCriteria) {
+                setCustomValidity(message);
+                return error;
+            }
+        }
+    }
+    if (validate) {
+        if (isFunction(validate)) {
+            const result = await validate(inputValue, formValues);
+            const validateError = getValidateError(result, inputRef);
+            if (validateError) {
+                error[name] = {
+                    ...validateError,
+                    ...appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message),
+                };
+                if (!validateAllFieldCriteria) {
+                    setCustomValidity(validateError.message);
+                    return error;
+                }
+            }
+        }
+        else if (isObject(validate)) {
+            let validationResult = {};
+            for (const key in validate) {
+                if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
+                    break;
+                }
+                const validateError = getValidateError(await validate[key](inputValue, formValues), inputRef, key);
+                if (validateError) {
+                    validationResult = {
+                        ...validateError,
+                        ...appendErrorsCurry(key, validateError.message),
+                    };
+                    setCustomValidity(validateError.message);
+                    if (validateAllFieldCriteria) {
+                        error[name] = validationResult;
+                    }
+                }
+            }
+            if (!isEmptyObject(validationResult)) {
+                error[name] = {
+                    ref: inputRef,
+                    ...validationResult,
+                };
+                if (!validateAllFieldCriteria) {
+                    return error;
+                }
+            }
+        }
+    }
+    const fieldError = error[name];
+    setCustomValidity(fieldError ? fieldError.message : true);
+    return error;
+};
+
+var convertToArrayPayload = (value) => (Array.isArray(value) ? value : [value]);
+
+var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+
+function baseGet(object, updatePath) {
+    const length = updatePath.length - 1;
+    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;
+}
+
+const HookFormContext = React__default.createContext(null);
+HookFormContext.displayName = '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, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }) => {
+    const memoizedValue = React__default.useMemo(() => ({
+        watch,
+        getValues,
+        getErrors,
+        getFieldState,
+        setError,
+        clearErrors,
+        setValue,
+        setValues,
+        trigger,
+        formState,
+        resetField,
+        reset,
+        resetDefaultValues,
+        handleSubmit,
+        unregister,
+        control,
+        register,
+        setFocus,
+        subscribe,
+    }), [
+        clearErrors,
+        control,
+        formState,
+        getErrors,
+        getFieldState,
+        getValues,
+        handleSubmit,
+        register,
+        reset,
+        resetDefaultValues,
+        resetField,
+        setError,
+        setFocus,
+        setValue,
+        setValues,
+        subscribe,
+        trigger,
+        unregister,
+        watch,
+    ]);
+    return (React__default.createElement(HookFormContext.Provider, { value: memoizedValue },
+        React__default.createElement(HookFormControlContext.Provider, { value: memoizedValue.control }, children)));
+};
+
+var createSubject = () => {
+    let _observers = [];
+    const next = (value) => {
+        for (const observer of _observers) {
+            observer.next && observer.next(value);
         }
     };
     const subscribe = (observer) => {
@@ -686,61 +1192,46 @@ function extractFormValues(fieldsState, formValues) {
     return values;
 }
 
-var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
-
-var isFileInput = (element) => element.type === 'file';
-
-var isHTMLElement = (value) => {
-    if (!isWeb) {
+const hasOwn = (value, key) => value !== null &&
+    isObjectType(value) &&
+    Object.prototype.hasOwnProperty.call(value, key);
+var has = (object, path) => {
+    if (!path) {
         return false;
     }
-    const owner = value ? value.ownerDocument : 0;
-    return (value instanceof
-        (owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement));
+    let result = object;
+    for (const key of isKey(path) ? [path] : stringToPath(path)) {
+        if (!hasOwn(result, key)) {
+            // `get` also resolves a path held as a single literal key, eg `{ 'a.b': 1 }`
+            return hasOwn(object, path);
+        }
+        result = result[key];
+    }
+    return true;
 };
 
 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) {
-        object = isUndefined(object) ? index++ : object[updatePath[index++]];
-    }
-    return object;
+function isDirtyContainer(value) {
+    return Array.isArray(value) || isObject(value);
 }
-function isEmptyArray(obj) {
-    for (const key in obj) {
-        if (obj.hasOwnProperty(key) && !isUndefined(obj[key])) {
-            return false;
+function collectDirtyFieldNames(dirtyTree, cachedDirtyFields, prefix = '', names = []) {
+    for (const key in dirtyTree) {
+        const path = prefix ? `${prefix}.${key}` : key;
+        const value = dirtyTree[key];
+        if (isDirtyContainer(value) &&
+            isDirtyContainer(get(cachedDirtyFields, path))) {
+            collectDirtyFieldNames(value, cachedDirtyFields, path, names);
+        }
+        else {
+            names.push(path);
         }
     }
-    return true;
-}
-function unset(object, path) {
-    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;
+    return names;
 }
 
 var objectHasFunction = (data) => {
@@ -755,12 +1246,33 @@ var objectHasFunction = (data) => {
 function isTraversable(value) {
     return Array.isArray(value) || (isObject(value) && !objectHasFunction(value));
 }
-function markFieldsDirty(data, fields = {}) {
+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];
-        if (isTraversable(value)) {
+        const fieldRef = fieldRefs && fieldRefs[key];
+        if (isTraversable(value) &&
+            (!Array.isArray(value) || !isRegisteredLeaf(fieldRef))) {
             fields[key] = Array.isArray(value) ? [] : {};
-            markFieldsDirty(value, fields[key]);
+            markFieldsDirty(value, fields[key], fieldRef);
+            if (isEmptyDirtyContainer(fields[key])) {
+                clearDirtyField(fields, key);
+            }
         }
         else if (!isUndefined(value)) {
             fields[key] = true;
@@ -768,51 +1280,45 @@ function markFieldsDirty(data, fields = {}) {
     }
     return fields;
 }
-function getDirtyFields(data, formValues, dirtyFieldsFromValues) {
+function getDirtyFields(data, formValues, dirtyFieldsFromValues, fieldRefs) {
     if (!dirtyFieldsFromValues) {
-        dirtyFieldsFromValues = markFieldsDirty(formValues);
+        dirtyFieldsFromValues = markFieldsDirty(formValues, {}, fieldRefs);
     }
     for (const key in data) {
         const value = data[key];
-        if (isTraversable(value)) {
+        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) ? [] : {});
+                dirtyFieldsFromValues[key] = markFieldsDirty(value, Array.isArray(value) ? [] : {}, fieldRef);
             }
             else {
-                getDirtyFields(value, isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
+                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 {
-            const formValue = formValues[key];
-            dirtyFieldsFromValues[key] = !deepEqual(value, formValue);
+            dirtyFieldsFromValues[key] = true;
         }
     }
     return dirtyFieldsFromValues;
 }
 
-const defaultResult = {
-    value: false,
-    isValid: false,
-};
-const validResult = { value: true, isValid: true };
-var getCheckboxValue = (options) => {
-    if (Array.isArray(options)) {
-        if (options.length > 1) {
-            const values = options
-                .filter((option) => option && option.checked && !option.disabled)
-                .map((option) => option.value);
-            return { value: values, isValid: !!values.length };
-        }
-        return options[0].checked && !options[0].disabled
-            ? // @ts-expect-error expected to work in the browser
-                options[0].attributes && !isUndefined(options[0].attributes.value)
-                    ? isUndefined(options[0].value) || options[0].value === ''
-                        ? validResult
-                        : { value: options[0].value, isValid: true }
-                    : validResult
-            : defaultResult;
-    }
-    return defaultResult;
+var getFieldArrayItemNames = (names, name) => {
+    const segments = name.split('.');
+    const matches = [];
+    let prefix = segments[0];
+    for (let i = 1; i < segments.length; prefix += '.' + segments[i++]) {
+        if (!isNaN(+segments[i]) && names.has(prefix)) {
+            matches.push(`${prefix}.${segments[i]}`);
+        }
+    }
+    return matches;
 };
 
 var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isUndefined(value)
@@ -829,19 +1335,6 @@ var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isU
                 ? setValueAs(value)
                 : value;
 
-const defaultReturn = {
-    isValid: false,
-    value: null,
-};
-var getRadioValue = (options) => Array.isArray(options)
-    ? options.reduce((previous, option) => option && option.checked && !option.disabled
-        ? {
-            isValid: true,
-            value: option.value,
-        }
-        : previous, defaultReturn)
-    : defaultReturn;
-
 function getFieldValue(_f) {
     const ref = _f.ref;
     if (isFileInput(ref)) {
@@ -856,7 +1349,7 @@ function getFieldValue(_f) {
     if (isCheckBoxInput(ref)) {
         return getCheckboxValue(_f.refs).value;
     }
-    return getFieldValueAs(isUndefined(ref.value) ? _f.ref.value : ref.value, _f);
+    return getFieldValueAs(ref.value, _f);
 }
 
 var getResolverOptions = (fieldsNames, _fields, criteriaMode, shouldUseNativeValidation) => {
@@ -873,8 +1366,6 @@ var getResolverOptions = (fieldsNames, _fields, criteriaMode, shouldUseNativeVal
     };
 };
 
-var isRegex = (value) => value instanceof RegExp;
-
 var getRuleValue = (rule) => isUndefined(rule)
     ? rule
     : isRegex(rule)
@@ -885,65 +1376,34 @@ var getRuleValue = (rule) => isUndefined(rule)
                 : 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) => !!fieldReference &&
-    !!fieldReference.validate &&
-    !!((isFunction(fieldReference.validate) &&
-        fieldReference.validate.constructor.name === ASYNC_FUNCTION) ||
-        (isObject(fieldReference.validate) &&
-            Object.values(fieldReference.validate).find((validateFunction) => validateFunction.constructor.name === ASYNC_FUNCTION)));
+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 ||
+        (!isUndefined(options.required) && options.required !== false) ||
+        !isUndefined(options.min) ||
+        !isUndefined(options.max) ||
+        !isUndefined(options.maxLength) ||
+        !isUndefined(options.minLength) ||
         options.pattern ||
         options.validate);
 
-var isWatched = (name, _names, isBlurEvent) => !isBlurEvent &&
-    (_names.watchAll ||
-        _names.watch.has(name) ||
-        [..._names.watch].some((watchName) => name.startsWith(watchName) &&
-            /^\.\w+/.test(name.slice(watchName.length))));
-
-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)) {
@@ -958,266 +1418,66 @@ function schemaErrorLookup(errors, _fields, name) {
         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;
-    return (isEmptyObject(formState) ||
-        Object.keys(formState).length >= Object.keys(_proxyFormState).length ||
-        Object.keys(formState).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 fieldArrayErrors = convertToArrayPayload(get(errors, name));
-    set(fieldArrayErrors, 'root', 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 validateField = async (field, disabledFieldNames, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
-    const { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount, } = field._f;
-    const inputValue = get(formValues, name);
-    if (!mount || disabledFieldNames.has(name)) {
-        return {};
-    }
-    const inputRef = refs ? refs[0] : ref;
-    const setCustomValidity = (message) => {
-        if (shouldUseNativeValidation && inputRef.reportValidity) {
-            inputRef.setCustomValidity(isBoolean(message) ? '' : message || '');
-            inputRef.reportValidity();
-        }
-    };
-    const error = {};
-    const isRadio = isRadioInput(ref);
-    const isCheckBox = isCheckBoxInput(ref);
-    const isRadioOrCheckbox = isRadio || isCheckBox;
-    const isEmpty = ((valueAsNumber || isFileInput(ref)) &&
-        isUndefined(ref.value) &&
-        isUndefined(inputValue)) ||
-        (isHTMLElement(ref) && ref.value === '') ||
-        inputValue === '' ||
-        (Array.isArray(inputValue) && !inputValue.length);
-    const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
-    const getMinMaxMessage = (exceedMax, maxLengthMessage, minLengthMessage, maxType = INPUT_VALIDATION_RULES.maxLength, minType = INPUT_VALIDATION_RULES.minLength) => {
-        const message = exceedMax ? maxLengthMessage : minLengthMessage;
-        error[name] = {
-            type: exceedMax ? maxType : minType,
-            message,
-            ref,
-            ...appendErrorsCurry(exceedMax ? maxType : minType, message),
-        };
-    };
-    if (isFieldArray
-        ? !Array.isArray(inputValue) || !inputValue.length
-        : required &&
-            ((!isRadioOrCheckbox && (isEmpty || isNullOrUndefined(inputValue))) ||
-                (isBoolean(inputValue) && !inputValue) ||
-                (isCheckBox && !getCheckboxValue(refs).isValid) ||
-                (isRadio && !getRadioValue(refs).isValid))) {
-        const { value, message } = isString(required)
-            ? { value: !!required, message: required }
-            : getValueAndMessage(required);
-        if (value) {
-            error[name] = {
-                type: INPUT_VALIDATION_RULES.required,
-                message,
-                ref: inputRef,
-                ...appendErrorsCurry(INPUT_VALIDATION_RULES.required, message),
-            };
-            if (!validateAllFieldCriteria) {
-                setCustomValidity(message);
-                return error;
-            }
-        }
-    }
-    if (!isEmpty && (!isNullOrUndefined(min) || !isNullOrUndefined(max))) {
-        let exceedMax;
-        let exceedMin;
-        const maxOutput = getValueAndMessage(max);
-        const minOutput = getValueAndMessage(min);
-        if (!isNullOrUndefined(inputValue) && !isNaN(inputValue)) {
-            const valueNumber = ref.valueAsNumber ||
-                (inputValue ? +inputValue : 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);
-            const convertTimeToDate = (time) => new Date(new Date().toDateString() + ' ' + time);
-            const isTime = ref.type == 'time';
-            const isWeek = ref.type == 'week';
-            if (isString(maxOutput.value) && inputValue) {
-                exceedMax = isTime
-                    ? convertTimeToDate(inputValue) > convertTimeToDate(maxOutput.value)
-                    : isWeek
-                        ? inputValue > maxOutput.value
-                        : valueDate > new Date(maxOutput.value);
-            }
-            if (isString(minOutput.value) && inputValue) {
-                exceedMin = isTime
-                    ? convertTimeToDate(inputValue) < convertTimeToDate(minOutput.value)
-                    : isWeek
-                        ? inputValue < minOutput.value
-                        : valueDate < new Date(minOutput.value);
-            }
-        }
-        if (exceedMax || exceedMin) {
-            getMinMaxMessage(!!exceedMax, maxOutput.message, minOutput.message, INPUT_VALIDATION_RULES.max, INPUT_VALIDATION_RULES.min);
-            if (!validateAllFieldCriteria) {
-                setCustomValidity(error[name].message);
-                return error;
-            }
-        }
-    }
-    if ((maxLength || minLength) &&
-        !isEmpty &&
-        (isString(inputValue) || (isFieldArray && Array.isArray(inputValue)))) {
-        const maxLengthOutput = getValueAndMessage(maxLength);
-        const minLengthOutput = getValueAndMessage(minLength);
-        const exceedMax = !isNullOrUndefined(maxLengthOutput.value) &&
-            inputValue.length > +maxLengthOutput.value;
-        const exceedMin = !isNullOrUndefined(minLengthOutput.value) &&
-            inputValue.length < +minLengthOutput.value;
-        if (exceedMax || exceedMin) {
-            getMinMaxMessage(exceedMax, maxLengthOutput.message, minLengthOutput.message);
-            if (!validateAllFieldCriteria) {
-                setCustomValidity(error[name].message);
-                return error;
-            }
-        }
-    }
-    if (pattern && !isEmpty && isString(inputValue)) {
-        const { value: patternValue, message } = getValueAndMessage(pattern);
-        if (isRegex(patternValue) && !inputValue.match(patternValue)) {
-            error[name] = {
-                type: INPUT_VALIDATION_RULES.pattern,
-                message,
-                ref,
-                ...appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message),
-            };
-            if (!validateAllFieldCriteria) {
-                setCustomValidity(message);
-                return error;
-            }
+            return { name };
         }
-    }
-    if (validate) {
-        if (isFunction(validate)) {
-            const result = await validate(inputValue, formValues);
-            const validateError = getValidateError(result, inputRef);
-            if (validateError) {
-                error[name] = {
-                    ...validateError,
-                    ...appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message),
-                };
-                if (!validateAllFieldCriteria) {
-                    setCustomValidity(validateError.message);
-                    return error;
-                }
-            }
+        if (foundError && foundError.type) {
+            return {
+                name: fieldName,
+                error: foundError,
+            };
         }
-        else if (isObject(validate)) {
-            let validationResult = {};
-            for (const key in validate) {
-                if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
-                    break;
-                }
-                const validateError = getValidateError(await validate[key](inputValue, formValues), inputRef, key);
-                if (validateError) {
-                    validationResult = {
-                        ...validateError,
-                        ...appendErrorsCurry(key, validateError.message),
-                    };
-                    setCustomValidity(validateError.message);
-                    if (validateAllFieldCriteria) {
-                        error[name] = validationResult;
-                    }
-                }
-            }
-            if (!isEmptyObject(validationResult)) {
-                error[name] = {
-                    ref: inputRef,
-                    ...validationResult,
-                };
-                if (!validateAllFieldCriteria) {
-                    return error;
-                }
-            }
+        if (foundError && foundError.root && foundError.root.type) {
+            return {
+                name: `${fieldName}.root`,
+                error: foundError.root,
+            };
         }
+        names.pop();
     }
-    setCustomValidity(true);
-    return error;
+    return {
+        name,
+    };
+}
+
+var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {
+    updateFormState(formStateData);
+    const keys = Object.keys(formStateData).filter((key) => key !== 'name');
+    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) => {
+    const array = get(ref, name);
+    !compact(array).length &&
+        !(array === null || array === void 0 ? void 0 : array.root) &&
+        unset(ref, name);
 };
 
 const defaultOptions = {
@@ -1225,24 +1485,36 @@ const defaultOptions = {
     reValidateMode: VALIDATION_MODE.onChange,
     shouldFocusError: true,
 };
+const FORM_ERROR_TYPE = 'form';
+const updateDirtyFields = (dirtyFields, nextDirtyFields) => {
+    for (const key in dirtyFields) {
+        if (!(key in nextDirtyFields)) {
+            delete dirtyFields[key];
+        }
+    }
+    Object.assign(dirtyFields, nextDirtyFields);
+};
+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,
     };
     let _formState = {
-        submitCount: 0,
-        isDirty: false,
-        isReady: false,
+        ...cloneObject(DEFAULT_FORM_STATE),
         isLoading: isFunction(_options.defaultValues),
-        isValidating: false,
-        isSubmitted: false,
-        isSubmitting: false,
-        isSubmitSuccessful: false,
-        isValid: false,
-        touchedFields: {},
-        dirtyFields: {},
-        validatingFields: {},
         errors: _options.errors || {},
         disabled: _options.disabled || false,
     };
@@ -1255,6 +1527,7 @@ function createFormControl(props = {}) {
         : cloneObject(_defaultValues);
     let _state = {
         action: false,
+        actionArrayLengths: new Map(),
         mount: false,
         watch: false,
         keepIsValid: false,
@@ -1265,9 +1538,13 @@ function createFormControl(props = {}) {
         unMount: new Set(),
         array: new Set(),
         watch: new Set(),
+        registerName: new Set(),
     };
-    let delayErrorCallback;
-    let timer = 0;
+    const delayErrorCallbacks = {};
+    const timers = {};
+    let _valuesSubscriberCount = 0;
+    let _validationModeBeforeSubmit = getValidationModes(_options.mode);
+    let _validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
     const defaultProxyFormState = {
         isDirty: false,
         dirtyFields: false,
@@ -1287,10 +1564,11 @@ function createFormControl(props = {}) {
         array: createSubject(),
         state: createSubject(),
     };
+    let _setValidCallId = 0;
     const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
-    const debounce = (callback) => (wait) => {
-        clearTimeout(timer);
-        timer = setTimeout(callback, wait);
+    const debounce = (name, callback) => (wait) => {
+        clearTimeout(timers[name]);
+        timers[name] = setTimeout(callback, wait);
     };
     const _setValid = async (shouldUpdateValid) => {
         if (_state.keepIsValid) {
@@ -1300,15 +1578,20 @@ function createFormControl(props = {}) {
             (_proxyFormState.isValid ||
                 _proxySubscribeFormState.isValid ||
                 shouldUpdateValid)) {
+            const callId = ++_setValidCallId;
             let isValid;
             if (_options.resolver) {
                 isValid = isEmptyObject((await _runSchema()).errors);
-                _updateIsValidating();
+                callId === _setValidCallId && _updateIsValidating();
             }
             else {
-                isValid = await executeBuiltInValidation(_fields, true);
+                isValid = await executeBuiltInValidation({
+                    fields: _fields,
+                    onlyCheckValid: true,
+                    eventType: EVENTS.VALID,
+                });
             }
-            if (isValid !== _formState.isValid) {
+            if (callId === _setValidCallId && isValid !== _formState.isValid) {
                 _subjects.state.next({
                     isValid,
                 });
@@ -1321,7 +1604,7 @@ function createFormControl(props = {}) {
                 _proxyFormState.validatingFields ||
                 _proxySubscribeFormState.isValidating ||
                 _proxySubscribeFormState.validatingFields)) {
-            (names || Array.from(_names.mount)).forEach((name) => {
+            (names || _names.mount).forEach((name) => {
                 if (name) {
                     isValidating
                         ? set(_formState.validatingFields, name, isValidating)
@@ -1334,28 +1617,40 @@ function createFormControl(props = {}) {
             });
         }
     };
+    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);
+            const fields = get(_fields, name);
+            if (!_state.actionArrayLengths.has(name)) {
+                _state.actionArrayLengths.set(name, Array.isArray(fields) ? fields.length : 0);
+            }
+            if (shouldUpdateFieldsAndState && Array.isArray(fields)) {
+                const fieldValues = method(fields, 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);
+            const fieldArrayErrors = get(_formState.errors, name);
+            if (shouldUpdateFieldsAndState && Array.isArray(fieldArrayErrors)) {
+                const rootError = fieldArrayErrors.root;
+                const errors = method(fieldArrayErrors, args.argA, args.argB) || fieldArrayErrors;
+                if (rootError) {
+                    errors.root = rootError;
+                }
                 shouldSetValues && set(_formState.errors, name, errors);
                 unsetEmptyArray(_formState.errors, name);
             }
+            const touchedFieldsArray = get(_formState.touchedFields, name);
             if ((_proxyFormState.touchedFields ||
                 _proxySubscribeFormState.touchedFields) &&
                 shouldUpdateFieldsAndState &&
-                Array.isArray(get(_formState.touchedFields, name))) {
-                const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
+                Array.isArray(touchedFieldsArray)) {
+                const touchedFields = method(touchedFieldsArray, args.argA, args.argB);
                 shouldSetValues && set(_formState.touchedFields, name, touchedFields);
             }
             if (_proxyFormState.dirtyFields || _proxySubscribeFormState.dirtyFields) {
-                _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
+                _updateDirtyFields();
             }
             _subjects.state.next({
                 name,
@@ -1371,6 +1666,7 @@ function createFormControl(props = {}) {
     };
     const updateErrors = (name, error) => {
         set(_formState.errors, name, error);
+        _formState.errors = { ..._formState.errors };
         _subjects.state.next({
             errors: _formState.errors,
         });
@@ -1382,16 +1678,83 @@ function createFormControl(props = {}) {
             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 isStaleArrayIndex = (name) => {
+        if (!_state.actionArrayLengths.size) {
+            return false;
+        }
+        const segments = isKey(name) ? [name] : stringToPath(name);
+        let node = _formValues;
+        let path = '';
+        let ownerDepth = -1;
+        let ownerPreActionLength = 0;
+        for (let i = 0; i < segments.length; i++) {
+            if (isNullOrUndefined(node)) {
+                return false;
+            }
+            const key = segments[i];
+            path = path ? `${path}.${key}` : key;
+            if (Array.isArray(node) && +key >= node.length) {
+                return ownerDepth === -1
+                    ? false
+                    : i === ownerDepth
+                        ? +key < ownerPreActionLength
+                        : true;
+            }
+            if (_state.actionArrayLengths.has(path)) {
+                ownerDepth = i + 1;
+                ownerPreActionLength = _state.actionArrayLengths.get(path);
+            }
+            node = node[key];
+        }
+        return false;
+    };
     const updateValidAndValue = (name, shouldSkipSetValueAs, value, ref) => {
         const field = get(_fields, name);
         if (field) {
+            if (hasExplicitNullIntermediate(name) || isStaleArrayIndex(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);
-            _state.mount && !_state.action && _setValid();
+            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 updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
@@ -1400,18 +1763,26 @@ function createFormControl(props = {}) {
         const output = {
             name,
         };
-        if (!_options.disabled) {
+        // 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 = _getDirty();
+                    _formState.isDirty = output.isDirty =
+                        !isCurrentFieldPristine || _getDirty();
                     shouldUpdateField = isPreviousDirty !== output.isDirty;
                 }
-                const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
                 isPreviousDirty = !!get(_formState.dirtyFields, name);
-                isCurrentFieldPristine
-                    ? unset(_formState.dirtyFields, name)
-                    : set(_formState.dirtyFields, name, true);
+                if (isCurrentFieldPristine !== _formState.isDirty) {
+                    updateDirtyFields(_formState.dirtyFields, getDirtyFields(_defaultValues, _formValues, undefined, _fields));
+                }
+                else {
+                    isCurrentFieldPristine
+                        ? unset(_formState.dirtyFields, name)
+                        : set(_formState.dirtyFields, name, true);
+                }
                 output.dirtyFields = _formState.dirtyFields;
                 shouldUpdateField =
                     shouldUpdateField ||
@@ -1441,15 +1812,16 @@ function createFormControl(props = {}) {
             isBoolean(isValid) &&
             _formState.isValid !== isValid;
         if (_options.delayError && error) {
-            delayErrorCallback = debounce(() => updateErrors(name, error));
-            delayErrorCallback(_options.delayError);
+            delayErrorCallbacks[name] = debounce(name, () => updateErrors(name, error));
+            delayErrorCallbacks[name](_options.delayError);
         }
         else {
-            clearTimeout(timer);
-            delayErrorCallback = null;
+            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) ||
@@ -1460,17 +1832,12 @@ function createFormControl(props = {}) {
                 errors: _formState.errors,
                 name,
             };
-            _formState = {
-                ..._formState,
-                ...updatedFormState,
-            };
             _subjects.state.next(updatedFormState);
         }
     };
     const _runSchema = async (name) => {
         _updateIsValidating(name, true);
-        const result = await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
-        return result;
+        return await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
     };
     const executeSchemaAndUpdateState = async (names) => {
         const { errors } = await _runSchema(names);
@@ -1479,18 +1846,69 @@ function createFormControl(props = {}) {
             for (const name of names) {
                 const error = get(errors, name);
                 error
-                    ? set(_formState.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;
     };
-    const executeBuiltInValidation = async (fields, shouldOnlyCheckValid, context = {
+    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;
+    };
+    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) {
@@ -1498,28 +1916,41 @@ function createFormControl(props = {}) {
                 if (_f) {
                     const isFieldArrayRoot = _names.array.has(_f.name);
                     const isPromiseFunction = field._f && hasPromiseValidation(field._f);
-                    if (isPromiseFunction && _proxyFormState.validatingFields) {
+                    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 && !shouldOnlyCheckValid, isFieldArrayRoot);
-                    if (isPromiseFunction && _proxyFormState.validatingFields) {
+                    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 (shouldOnlyCheckValid || props.shouldUseNativeValidation) {
+                        if (onlyCheckValid) {
                             break;
                         }
                     }
-                    !shouldOnlyCheckValid &&
+                    !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(fieldValue, shouldOnlyCheckValid, context));
+                    (await executeBuiltInValidation({
+                        context,
+                        onlyCheckValid,
+                        fields: fieldValue,
+                        name: name,
+                        eventType,
+                    }));
             }
         }
         return context.valid;
@@ -1535,20 +1966,17 @@ function createFormControl(props = {}) {
         }
         _names.unMount = new Set();
     };
-    const _getDirty = (name, data) => !_options.disabled &&
-        (name && data && set(_formValues, name, data),
-            !deepEqual(getValues(), _defaultValues));
+    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)
+            : isUndefined(defaultValue) || isString(names)
                 ? _defaultValues
-                : isString(names)
-                    ? { [names]: defaultValue }
-                    : defaultValue),
+                : defaultValue),
     }, isGlobal, defaultValue);
     const _getFieldArray = (name) => compact(get(_state.mount ? _formValues : _defaultValues, name, _options.shouldUnregister ? get(_defaultValues, name, []) : []));
-    const setFieldValue = (name, value, options = {}) => {
+    const setFieldValue = (name, value, options = {}, skipClone = false, skipRender = false, skipValueRender = false) => {
         const field = get(_fields, name);
         let fieldValue = value;
         if (field) {
@@ -1586,23 +2014,32 @@ function createFormControl(props = {}) {
                 }
                 else {
                     fieldReference.ref.value = fieldValue;
-                    if (!fieldReference.ref.type) {
+                    if (!fieldReference.ref.type && !skipRender && !skipValueRender) {
                         _subjects.state.next({
                             name,
-                            values: cloneObject(_formValues),
+                            values: skipClone ? _formValues : cloneObject(_formValues),
                         });
                     }
                 }
             }
         }
         (options.shouldDirty || options.shouldTouch) &&
-            updateTouchAndDirty(name, fieldValue, options.shouldTouch, options.shouldDirty, true);
-        options.shouldValidate && trigger(name);
+            updateTouchAndDirty(name, fieldValue, options.shouldTouch, options.shouldDirty, !skipRender);
+        options.shouldValidate &&
+            trigger(name, {
+                delayError: options.delayError,
+            });
     };
-    const setValues = (name, value, options) => {
+    const setFieldValues = (name, value, options, skipClone = false, skipRender = false, skipValueRender = false) => {
+        if (_names.array.has(name)) {
+            _subjects.array.next({
+                name,
+                values: skipClone ? _formValues : cloneObject(_formValues),
+            });
+        }
         for (const fieldKey in value) {
             if (!value.hasOwnProperty(fieldKey)) {
-                return;
+                continue;
             }
             const fieldValue = value[fieldKey];
             const fieldName = name + '.' + fieldKey;
@@ -1611,49 +2048,89 @@ function createFormControl(props = {}) {
                 isObject(fieldValue) ||
                 (field && !field._f)) &&
                 !isDateObject(fieldValue)
-                ? setValues(fieldName, fieldValue, options)
-                : setFieldValue(fieldName, fieldValue, options);
+                ? setFieldValues(fieldName, fieldValue, options, skipClone, skipRender, skipValueRender)
+                : setFieldValue(fieldName, fieldValue, options, skipClone, skipRender, skipValueRender);
         }
     };
-    const setValue = (name, value, options = {}) => {
+    const _setValue = (name, value, options, skipClone, skipStateEmit = false) => {
         const field = get(_fields, name);
         const isFieldArray = _names.array.has(name);
-        const cloneValue = cloneObject(value);
-        set(_formValues, name, cloneValue);
+        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: cloneObject(_formValues),
+                values: skipClone ? _formValues : cloneObject(_formValues),
             });
             if ((_proxyFormState.isDirty ||
                 _proxyFormState.dirtyFields ||
                 _proxySubscribeFormState.isDirty ||
                 _proxySubscribeFormState.dirtyFields) &&
                 options.shouldDirty) {
-                _subjects.state.next({
-                    name,
-                    dirtyFields: getDirtyFields(_defaultValues, _formValues),
-                    isDirty: _getDirty(name, cloneValue),
-                });
+                _updateDirtyFields();
+                if (!skipStateEmit) {
+                    _subjects.state.next({
+                        name,
+                        dirtyFields: _formState.dirtyFields,
+                        isDirty: _getDirty(name, cloneValue),
+                    });
+                }
             }
         }
         else {
-            field && !field._f && !isNullOrUndefined(cloneValue)
-                ? setValues(name, cloneValue, options)
-                : setFieldValue(name, cloneValue, options);
+            const isEmpty = (Array.isArray(cloneValue) && !cloneValue.length) ||
+                isEmptyObject(cloneValue);
+            const skipValueRender = !isValueUnchanged && !skipStateEmit;
+            if (!field || field._f || isNullOrUndefined(cloneValue) || isEmpty) {
+                setFieldValue(name, cloneValue, options, skipClone, skipStateEmit, skipValueRender);
+            }
+            else {
+                setFieldValues(name, cloneValue, options, skipClone, skipStateEmit, skipValueRender);
+            }
         }
-        if (isWatched(name, _names)) {
+        if (!isValueUnchanged && !skipStateEmit) {
+            const watched = isWatched(name, _names);
+            const values = skipClone ? _formValues : cloneObject(_formValues);
             _subjects.state.next({
-                ..._formState,
-                name,
-                values: cloneObject(_formValues),
+                ...(watched && _formState),
+                name: _state.mount || watched ? name : undefined,
+                values,
             });
+            if (!isFieldArray) {
+                for (const itemName of getFieldArrayItemNames(_names.array, name)) {
+                    _subjects.state.next({ name: itemName, values });
+                }
+            }
         }
-        else {
+    };
+    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) {
+                if (has(updatedFormValues, fieldName)) {
+                    _setValue(fieldName, get(updatedFormValues, fieldName), options, true, true);
+                }
+            }
             _subjects.state.next({
-                name: _state.mount ? name : undefined,
-                values: cloneObject(_formValues),
+                ..._formState,
+                name: undefined,
+                type: undefined,
+                ...(_valuesSubscriberCount ? { values: _formValues } : {}),
             });
+            if (options.shouldValidate) {
+                _setValid();
+            }
         }
     };
     const onChange = async (event) => {
@@ -1668,8 +2145,6 @@ function createFormControl(props = {}) {
                     (isDateObject(fieldValue) && isNaN(fieldValue.getTime())) ||
                     deepEqual(fieldValue, get(_formValues, name, fieldValue));
         };
-        const validationModeBeforeSubmit = getValidationModes(_options.mode);
-        const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
         if (field) {
             let error;
             let isValid;
@@ -1677,17 +2152,20 @@ function createFormControl(props = {}) {
                 ? getFieldValue(field._f)
                 : getEventValue(event);
             const isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
-            const shouldSkipValidation = (!hasValidation(field._f) &&
+            const hasNoValidationEffect = !hasValidation(field._f) &&
+                !props.validate &&
                 !_options.resolver &&
                 !get(_formState.errors, name) &&
-                !field._f.deps) ||
-                skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, validationModeAfterSubmit, validationModeBeforeSubmit);
+                !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);
+            set(_formValues, name, cloneObject(fieldValue));
             if (isBlurEvent) {
                 if (!target || !target.readOnly) {
                     field._f.onBlur && field._f.onBlur(event);
-                    delayErrorCallback && delayErrorCallback(0);
+                    const pendingDelayError = delayErrorCallbacks[name];
+                    pendingDelayError && pendingDelayError(0);
                 }
             }
             else if (field._f.onChange) {
@@ -1699,10 +2177,13 @@ function createFormControl(props = {}) {
                 _subjects.state.next({
                     name,
                     type: event.type,
-                    values: cloneObject(_formValues),
+                    ...(_valuesSubscriberCount
+                        ? { values: cloneObject(_formValues) }
+                        : {}),
                 });
             if (shouldSkipValidation) {
-                if (_proxyFormState.isValid || _proxySubscribeFormState.isValid) {
+                if ((!hasNoValidationEffect || !_formState.isValid) &&
+                    (_proxyFormState.isValid || _proxySubscribeFormState.isValid)) {
                     if (_options.mode === 'onBlur') {
                         if (isBlurEvent) {
                             _setValid();
@@ -1715,18 +2196,26 @@ function createFormControl(props = {}) {
                 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) {
-                    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 (!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);
             }
             else {
                 _updateIsValidating([name], true);
@@ -1739,7 +2228,12 @@ function createFormControl(props = {}) {
                     }
                     else if (_proxyFormState.isValid ||
                         _proxySubscribeFormState.isValid) {
-                        isValid = await executeBuiltInValidation(_fields, true);
+                        isValid = await executeBuiltInValidation({
+                            fields: _fields,
+                            onlyCheckValid: true,
+                            name: name,
+                            eventType: event.type,
+                        });
                     }
                 }
             }
@@ -1772,12 +2266,37 @@ function createFormControl(props = {}) {
         else if (name) {
             validationResult = (await Promise.all(fieldNames.map(async (fieldName) => {
                 const field = get(_fields, fieldName);
-                return await executeBuiltInValidation(field && field._f ? { [fieldName]: field } : field);
+                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);
+            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];
+            }
+        }
+        if (options.shouldTouch) {
+            for (const fieldName of name ? fieldNames : _names.mount) {
+                !_names.array.has(fieldName) &&
+                    set(_formState.touchedFields, fieldName, true);
+            }
         }
         _subjects.state.next({
             ...(!isString(name) ||
@@ -1786,6 +2305,10 @@ function createFormControl(props = {}) {
                 ? {}
                 : { name }),
             ...(_options.resolver || !name ? { isValid } : {}),
+            ...(options.shouldTouch &&
+                (_proxyFormState.touchedFields || _proxySubscribeFormState.touchedFields)
+                ? { touchedFields: _formState.touchedFields }
+                : {}),
             errors: _formState.errors,
         });
         options.shouldFocus &&
@@ -1806,19 +2329,26 @@ function createFormControl(props = {}) {
                 ? get(values, fieldNames)
                 : fieldNames.map((name) => get(values, name));
     };
-    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 getErrors = (fieldNames) => isUndefined(fieldNames)
+        ? { ..._formState.errors }
+        : isString(fieldNames)
+            ? get(_formState.errors, fieldNames)
+            : fieldNames.map((name) => get(_formState.errors, name));
+    const getFieldState = (name, formState) => {
+        const targetFormState = formState || _formState;
+        const error = get(targetFormState.errors, name);
+        return {
+            invalid: !!error,
+            isDirty: !!get(targetFormState.dirtyFields, name),
+            error,
+            isValidating: !!get(_formState.validatingFields, name),
+            isTouched: !!get(targetFormState.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) {
-            // Emit for each cleared field with the field name so that
-            // shouldSubscribeByName can filter and avoid broad re-renders
             names.forEach((inputName) => {
                 _subjects.state.next({
                     name: inputName,
@@ -1827,16 +2357,15 @@ function createFormControl(props = {}) {
             });
         }
         else {
-            // Clear all errors - emit without name to notify all subscribers
+            _formState.errors = {};
             _subjects.state.next({
-                errors: {},
+                errors: _formState.errors,
             });
         }
     };
     const setError = (name, error, options) => {
         const ref = (get(_fields, name, { _f: {} })._f || {}).ref;
         const currentError = get(_formState.errors, name) || {};
-        // Don't override existing error messages elsewhere in the object tree.
         const { ref: currentRef, message, type, ...restOfErrorTree } = currentError;
         set(_formState.errors, name, {
             ...restOfErrorTree,
@@ -1850,25 +2379,60 @@ function createFormControl(props = {}) {
         });
         options && options.shouldFocus && ref && ref.focus && ref.focus();
     };
-    const watch = (name, defaultValue) => isFunction(name)
-        ? _subjects.state.subscribe({
-            next: (payload) => 'values' in payload &&
-                name(_getWatch(undefined, defaultValue), payload),
-        })
-        : _getWatch(name, defaultValue, true);
-    const _subscribe = (props) => _subjects.state.subscribe({
-        next: (formState) => {
-            if (shouldSubscribeByName(props.name, formState.name, props.exact) &&
-                shouldRenderFormState(formState, props.formState || _proxyFormState, _setFormState, props.reRenderRoot)) {
-                props.callback({
-                    values: { ..._formValues },
-                    ..._formState,
-                    ...formState,
-                    defaultValues: _defaultValues,
-                });
+    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,
+                    });
+                }
+            },
+        });
+        if (!needsValues) {
+            return unsubscribe;
+        }
+        let called = false;
+        return () => {
+            if (called) {
+                return;
             }
-        },
-    }).unsubscribe;
+            called = true;
+            _valuesSubscriberCount--;
+            unsubscribe();
+        };
+    };
     const subscribe = (props) => {
         _state.mount = true;
         _proxySubscribeFormState = {
@@ -1900,12 +2464,13 @@ function createFormControl(props = {}) {
                 !options.keepDefaultValue &&
                 unset(_defaultValues, fieldName);
         }
-        _subjects.state.next({
-            values: cloneObject(_formValues),
-        });
+        _valuesSubscriberCount &&
+            _subjects.state.next({
+                values: cloneObject(_formValues),
+            });
         _subjects.state.next({
             ..._formState,
-            ...(!options.keepDirty ? {} : { isDirty: _getDirty() }),
+            ...(options.keepDirty ? {} : { isDirty: _getDirty() }),
         });
         !options.keepIsValid && _setValid();
     };
@@ -1923,6 +2488,7 @@ function createFormControl(props = {}) {
     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: {
@@ -1933,7 +2499,7 @@ function createFormControl(props = {}) {
             },
         });
         _names.mount.add(name);
-        if (field) {
+        if (field && !shouldRevalidateRemount) {
             _setDisabledField({
                 disabled: isBoolean(options.disabled)
                     ? options.disabled
@@ -1963,7 +2529,9 @@ function createFormControl(props = {}) {
             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
@@ -1977,20 +2545,23 @@ function createFormControl(props = {}) {
                         : fieldRef === field._f.ref) {
                         return;
                     }
+                    const newField = {
+                        ...field._f,
+                    };
+                    if (radioOrCheckbox) {
+                        newField.refs = [
+                            ...refs.filter(live),
+                            fieldRef,
+                            ...(Array.isArray(get(_defaultValues, name)) ? [{}] : []),
+                        ];
+                        newField.ref = { type: fieldRef.type, name };
+                    }
+                    else {
+                        newField.ref = fieldRef;
+                        delete newField.refs;
+                    }
                     set(_fields, name, {
-                        _f: {
-                            ...field._f,
-                            ...(radioOrCheckbox
-                                ? {
-                                    refs: [
-                                        ...refs.filter(live),
-                                        fieldRef,
-                                        ...(Array.isArray(get(_defaultValues, name)) ? [{}] : []),
-                                    ],
-                                    ref: { type: fieldRef.type, name },
-                                }
-                                : { ref: fieldRef }),
-                        },
+                        _f: newField,
                     });
                     updateValidAndValue(name, false, undefined, fieldRef);
                 }
@@ -2007,6 +2578,7 @@ function createFormControl(props = {}) {
         };
     };
     const _focusError = () => _options.shouldFocusError &&
+        !_options.shouldUseNativeValidation &&
         iterateFieldsByAction(_fields, _focusInput, _names.mount);
     const _disableForm = (disabled) => {
         if (isBoolean(disabled)) {
@@ -2025,6 +2597,7 @@ function createFormControl(props = {}) {
         }
     };
     const handleSubmit = (onValid, onInvalid) => async (e) => {
+        let result = undefined;
         let onValidError = undefined;
         if (e) {
             e.preventDefault && e.preventDefault();
@@ -2042,20 +2615,23 @@ function createFormControl(props = {}) {
             fieldValues = cloneObject(values);
         }
         else {
-            await executeBuiltInValidation(_fields);
+            await executeBuiltInValidation({
+                fields: _fields,
+                eventType: EVENTS.SUBMIT,
+            });
         }
         if (_names.disabled.size) {
             for (const name of _names.disabled) {
                 unset(fieldValues, name);
             }
         }
-        unset(_formState.errors, 'root');
+        unset(_formState.errors, ROOT_ERROR_TYPE);
         if (isEmptyObject(_formState.errors)) {
             _subjects.state.next({
                 errors: {},
             });
             try {
-                await onValid(fieldValues, e);
+                result = await onValid(fieldValues, e);
             }
             catch (error) {
                 onValidError = error;
@@ -2078,6 +2654,7 @@ function createFormControl(props = {}) {
         if (onValidError) {
             throw onValidError;
         }
+        return result;
     };
     const resetField = (name, options = {}) => {
         if (get(_fields, name)) {
@@ -2099,7 +2676,7 @@ function createFormControl(props = {}) {
             }
             if (!options.keepError) {
                 unset(_formState.errors, name);
-                _proxyFormState.isValid && _setValid();
+                _setValid();
             }
             _subjects.state.next({ ..._formState });
         }
@@ -2108,7 +2685,8 @@ function createFormControl(props = {}) {
         const updatedValues = formValues ? cloneObject(formValues) : _defaultValues;
         const cloneUpdatedValues = cloneObject(updatedValues);
         const isEmptyResetValues = isEmptyObject(formValues);
-        const values = isEmptyResetValues ? _defaultValues : cloneUpdatedValues;
+        const values = cloneUpdatedValues;
+        const fieldRefs = _fields;
         if (!keepStateOptions.keepDefaultValues) {
             _defaultValues = updatedValues;
         }
@@ -2116,9 +2694,9 @@ function createFormControl(props = {}) {
             if (keepStateOptions.keepDirtyValues) {
                 const fieldsToCheck = new Set([
                     ..._names.mount,
-                    ...Object.keys(getDirtyFields(_defaultValues, _formValues)),
+                    ...collectDirtyFieldNames(getDirtyFields(_defaultValues, _formValues, undefined, fieldRefs), _formState.dirtyFields),
                 ]);
-                for (const fieldName of Array.from(fieldsToCheck)) {
+                for (const fieldName of fieldsToCheck) {
                     const isDirty = get(_formState.dirtyFields, fieldName);
                     const existingValue = get(_formValues, fieldName);
                     const newValue = get(values, fieldName);
@@ -2157,15 +2735,25 @@ function createFormControl(props = {}) {
                     _fields = {};
                 }
             }
-            _formValues = _options.shouldUnregister
-                ? keepStateOptions.keepDefaultValues
+            if (_options.shouldUnregister) {
+                _formValues = keepStateOptions.keepDefaultValues
                     ? cloneObject(_defaultValues)
-                    : {}
-                : cloneObject(values);
+                    : {};
+                if (keepStateOptions.keepFieldsRef) {
+                    for (const fieldName of _names.mount) {
+                        set(_formValues, fieldName, get(values, fieldName));
+                    }
+                }
+            }
+            else {
+                _formValues = cloneObject(values);
+            }
             _subjects.array.next({
                 values: { ...values },
             });
             _subjects.state.next({
+                name: undefined,
+                type: undefined,
                 values: { ...values },
             });
         }
@@ -2173,6 +2761,7 @@ function createFormControl(props = {}) {
             mount: keepStateOptions.keepDirtyValues ? _names.mount : new Set(),
             unMount: new Set(),
             array: new Set(),
+            registerName: new Set(),
             disabled: new Set(),
             watch: new Set(),
             watchAll: false,
@@ -2186,9 +2775,7 @@ function createFormControl(props = {}) {
         _state.watch = !!_options.shouldUnregister;
         _state.keepIsValid = !!keepStateOptions.keepIsValid;
         _state.action = false;
-        // Clear errors synchronously to prevent validation errors on subsequent submissions
-        // This fixes the issue where form.reset() causes validation errors on subsequent
-        // submissions in Next.js 16 with Server Actions
+        _state.actionArrayLengths.clear();
         if (!keepStateOptions.keepErrors) {
             _formState.errors = {};
         }
@@ -2200,8 +2787,10 @@ function createFormControl(props = {}) {
                 ? false
                 : keepStateOptions.keepDirty
                     ? _formState.isDirty
-                    : !!(keepStateOptions.keepDefaultValues &&
-                        !deepEqual(formValues, _defaultValues)),
+                    : keepStateOptions.keepValues
+                        ? _getDirty()
+                        : !!(keepStateOptions.keepDefaultValues &&
+                            !deepEqual(formValues, _defaultValues)),
             isSubmitted: keepStateOptions.keepIsSubmitted
                 ? _formState.isSubmitted
                 : false,
@@ -2209,10 +2798,10 @@ function createFormControl(props = {}) {
                 ? {}
                 : keepStateOptions.keepDirtyValues
                     ? keepStateOptions.keepDefaultValues && _formValues
-                        ? getDirtyFields(_defaultValues, _formValues)
+                        ? getDirtyFields(_defaultValues, _formValues, undefined, fieldRefs)
                         : _formState.dirtyFields
                     : keepStateOptions.keepDefaultValues && formValues
-                        ? getDirtyFields(_defaultValues, formValues)
+                        ? getDirtyFields(_defaultValues, formValues, undefined, fieldRefs)
                         : keepStateOptions.keepDirty
                             ? _formState.dirtyFields
                             : {},
@@ -2238,8 +2827,6 @@ function createFormControl(props = {}) {
                 ? fieldReference.refs[0]
                 : fieldReference.ref;
             if (fieldRef.focus) {
-                // Use setTimeout to ensure focus happens after any pending state updates
-                // This fixes the issue where setFocus doesn't work immediately after setError
                 setTimeout(() => {
                     fieldRef.focus();
                     options.shouldSelect &&
@@ -2250,11 +2837,18 @@ function createFormControl(props = {}) {
         }
     };
     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,
-            ...updatedFormState,
+            ...formState,
         };
     };
+    _subjects.state.subscribe({ next: _setFormState });
     const _resetDefaultValues = () => isFunction(_options.defaultValues) &&
         _options.defaultValues().then((values) => {
             reset(values, _options.resetOptions);
@@ -2262,6 +2856,21 @@ function createFormControl(props = {}) {
                 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,
@@ -2318,6 +2927,8 @@ function createFormControl(props = {}) {
                     ..._options,
                     ...value,
                 };
+                _validationModeBeforeSubmit = getValidationModes(_options.mode);
+                _validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
             },
         },
         subscribe,
@@ -2326,9 +2937,12 @@ function createFormControl(props = {}) {
         handleSubmit,
         watch,
         setValue,
+        setValues,
         getValues,
+        getErrors,
         reset,
         resetField,
+        resetDefaultValues,
         clearErrors,
         unregister,
         setError,
@@ -2373,26 +2987,19 @@ function createFormControl(props = {}) {
 function useForm(props = {}) {
     const _formControl = React__default.useRef(undefined);
     const _values = React__default.useRef(undefined);
-    const [formState, updateFormState] = React__default.useState({
-        isDirty: false,
-        isValidating: false,
+    const _formControlProp = React__default.useRef(props.formControl);
+    const [formState, updateFormState] = React__default.useState(() => ({
+        ...cloneObject(DEFAULT_FORM_STATE),
         isLoading: isFunction(props.defaultValues),
-        isSubmitted: false,
-        isSubmitting: false,
-        isSubmitSuccessful: false,
-        isValid: false,
-        submitCount: 0,
-        dirtyFields: {},
-        touchedFields: {},
-        validatingFields: {},
         errors: props.errors || {},
         disabled: props.disabled || false,
-        isReady: false,
         defaultValues: isFunction(props.defaultValues)
             ? undefined
             : props.defaultValues,
-    });
-    if (!_formControl.current) {
+    }));
+    if (!_formControl.current ||
+        (props.formControl && _formControlProp.current !== props.formControl)) {
+        _formControlProp.current = props.formControl;
         if (props.formControl) {
             _formControl.current = {
                 ...props.formControl,
@@ -2412,10 +3019,19 @@ function useForm(props = {}) {
     }
     const control = _formControl.current.control;
     control._options = props;
+    const { resyncIfNeeded, snapshot } = useResyncOnReconnect();
     useIsomorphicLayoutEffect(() => {
-        const sub = control._subscribe({
+        const getCurrentFormState = () => ({
+            ...control._formState,
+            defaultValues: control._defaultValues,
+        });
+        resyncIfNeeded(true, getCurrentFormState, updateFormState);
+        const unsubscribe = control._subscribe({
             formState: control._proxyFormState,
-            callback: () => updateFormState({ ...control._formState }),
+            callback: () => updateFormState({
+                ...control._formState,
+                defaultValues: control._defaultValues,
+            }),
             reRenderRoot: true,
         });
         updateFormState((data) => ({
@@ -2423,8 +3039,11 @@ function useForm(props = {}) {
             isReady: true,
         }));
         control._formState.isReady = true;
-        return sub;
-    }, [control]);
+        return () => {
+            unsubscribe();
+            snapshot(true, getCurrentFormState);
+        };
+    }, [control, resyncIfNeeded, snapshot]);
     React__default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
     React__default.useEffect(() => {
         if (props.mode) {