react-hook-form 8.0.0-beta.1 → 8.0.0-beta.3

package/dist/index.esm.mjs

@@ -18,9 +18,9 @@ var getEventValue = (event) => isObject(event) && event.target
         : event.target.value
     : event;
 
-var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/)) || name;
-
-var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
+var isNameInFieldArray = (names, name) => name
+    .split('.')
+    .some((part, index, arr) => !isNaN(Number(part)) && names.has(arr.slice(0, index).join('.')));
 
 var isPlainObject = (tempObject) => {
     const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
@@ -52,19 +52,52 @@ function cloneObject(data) {
     return copy;
 }
 
-var isKey = (value) => /^\w*$/.test(value);
+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'];
+
+const IS_KEY_RE = /^\w*$/;
+var isKey = (value) => IS_KEY_RE.test(value);
 
 var isUndefined = (val) => val === undefined;
 
-var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
-
-var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
+const FIELD_PATH_RE = /[.[\]'"]/;
+var stringToPath = (input) => input.split(FIELD_PATH_RE).filter(Boolean);
 
 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
@@ -91,7 +124,7 @@ var set = (object, path, value) => {
                         ? []
                         : {};
         }
-        if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
+        if (PROTOTYPE_KEYWORDS.includes(key)) {
             return;
         }
         object[key] = newValue;
@@ -99,28 +132,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.
@@ -133,10 +144,7 @@ HookFormControlContext.displayName = 'HookFormControlContext';
 const useFormControlContext = () => React.useContext(HookFormControlContext);
 
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
-    const result = {
-        ...formState,
-        defaultValues: control._defaultValues,
-    };
+    const result = {};
     for (const key in formState) {
         Object.defineProperty(result, key, {
             get: () => {
@@ -152,7 +160,9 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
     return result;
 };
 
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicLayoutEffect = isWeb
+    ? React.useLayoutEffect
+    : React.useEffect;
 
 /**
  * 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.
@@ -187,7 +197,10 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayou
 function useFormState(props) {
     const formControl = useFormControlContext();
     const { control = formControl, disabled, name, exact } = props || {};
-    const [formState, updateFormState] = React.useState(control._formState);
+    const [formState, updateFormState] = React.useState(() => ({
+        ...control._formState,
+        defaultValues: control._defaultValues,
+    }));
     const _localProxyFormState = React.useRef({
         isDirty: false,
         isLoading: false,
@@ -207,6 +220,7 @@ function useFormState(props) {
                 updateFormState({
                     ...control._formState,
                     ...formState,
+                    defaultValues: control._defaultValues,
                 });
         },
     }), [name, disabled, exact]);
@@ -233,7 +247,11 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
 
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
-function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
+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);
     }
@@ -245,22 +263,36 @@ function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
     if (keys1.length !== keys2.length) {
         return false;
     }
-    if (_internal_visited.has(object1) || _internal_visited.has(object2)) {
+    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;
     }
-    _internal_visited.add(object1);
-    _internal_visited.add(object2);
+    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 (!keys2.includes(key)) {
+        if (!(key in object2)) {
             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)
+                ((isObject(val1) || Array.isArray(val1)) &&
+                    (isObject(val2) || Array.isArray(val2)))
+                ? !deepEqual(val1, val2, visited)
                 : !Object.is(val1, val2)) {
                 return false;
             }
@@ -396,7 +428,7 @@ function useController(props) {
         exact,
     });
     const _props = React.useRef(props);
-    const _previousNameRef = React.useRef(undefined);
+    const _proxyRef = React.useRef(null);
     const _registerProps = React.useRef(control.register(name, {
         ...props.rules,
         value,
@@ -425,13 +457,22 @@ function useController(props) {
             get: () => get(formState.errors, name),
         },
     }), [formState, name]);
-    const onChange = React.useCallback((event) => _registerProps.current.onChange({
-        target: {
-            value: getEventValue(event),
-            name: name,
-        },
-        type: EVENTS.CHANGE,
-    }), [name]);
+    const onChange = React.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.useCallback(() => _registerProps.current.onBlur({
         target: {
             value: get(control._formValues, name),
@@ -440,9 +481,12 @@ function useController(props) {
         type: EVENTS.BLUR,
     }), [name, control._formValues]);
     const ref = React.useCallback((elm) => {
+        if (elm) {
+            _proxyRef.current = elm;
+        }
         const field = get(control._fields, name);
         if (field && field._f && elm) {
-            field._f.ref = elm;
+            field._f.ref = _proxyRef.current;
         }
     }, [control._fields, name]);
     const field = React.useMemo(() => ({
@@ -457,10 +501,6 @@ function useController(props) {
     }), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
     React.useEffect(() => {
         const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
-        const previousName = _previousNameRef.current;
-        if (previousName && previousName !== name && !isArrayField) {
-            control.unregister(previousName);
-        }
         control.register(name, {
             ..._props.current.rules,
             ...(isBoolean(_props.current.disabled)
@@ -475,14 +515,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
@@ -551,7 +598,9 @@ const Controller = (props) => props.render(useController(props));
 const flatten = (obj) => {
     const output = {};
     for (const key of Object.keys(obj)) {
-        if (isObjectType(obj[key]) && obj[key] !== null) {
+        if (isObjectType(obj[key]) &&
+            obj[key] !== null &&
+            !isDateObject(obj[key])) {
             const nested = flatten(obj[key]);
             for (const nestedKey of Object.keys(nested)) {
                 output[`${key}.${nestedKey}`] = nested[nestedKey];
@@ -627,44 +676,46 @@ const useFormContext = () => React.useContext(HookFormContext);
  * }
  * ```
  */
-const FormProvider = (props) => {
-    const { children, watch, getValues, getFieldState, setError, clearErrors, setValue, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, } = props;
-    return (React.createElement(HookFormContext.Provider, { value: React.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.createElement(HookFormControlContext.Provider, { value: control }, children)));
+const FormProvider = ({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, }) => {
+    const memoizedValue = React.useMemo(() => ({
+        watch,
+        getValues,
+        getFieldState,
+        setError,
+        clearErrors,
+        setValue,
+        setValues,
+        trigger,
+        formState,
+        resetField,
+        reset,
+        handleSubmit,
+        unregister,
+        control,
+        register,
+        setFocus,
+        subscribe,
+    }), [
+        clearErrors,
+        control,
+        formState,
+        getFieldState,
+        getValues,
+        handleSubmit,
+        register,
+        reset,
+        resetField,
+        setError,
+        setFocus,
+        setValue,
+        setValues,
+        subscribe,
+        trigger,
+        unregister,
+        watch,
+    ]);
+    return (React.createElement(HookFormContext.Provider, { value: memoizedValue },
+        React.createElement(HookFormControlContext.Provider, { value: memoizedValue.control }, children)));
 };
 
 const POST_REQUEST = 'post';
@@ -694,7 +745,7 @@ function Form(props) {
     const methods = useFormContext();
     const [mounted, setMounted] = React.useState(false);
     const { control = methods.control, onSubmit, children, action, method = POST_REQUEST, headers, encType, onError, render, onSuccess, validateStatus, ...rest } = props;
-    const submit = async (event) => {
+    const submit = React.useCallback(async (event) => {
         let hasError = false;
         let type = '';
         await control.handleSubmit(async (data) => {
@@ -703,8 +754,8 @@ function Form(props) {
             try {
                 formDataJson = JSON.stringify(data);
             }
-            catch (_a) { }
-            const flattenFormValues = flatten(control._formValues);
+            catch { }
+            const flattenFormValues = flatten(data);
             for (const key in flattenFormValues) {
                 formData.append(key, flattenFormValues[key]);
             }
@@ -751,15 +802,25 @@ function Form(props) {
                 }
             }
         })(event);
-        if (hasError && props.control) {
-            props.control._subjects.state.next({
+        if (hasError && control) {
+            control._subjects.state.next({
                 isSubmitSuccessful: false,
             });
-            props.control.setError('root.server', {
+            control.setError('root.server', {
                 type,
             });
         }
-    };
+    }, [
+        control,
+        onSubmit,
+        method,
+        action,
+        headers,
+        encType,
+        validateStatus,
+        onError,
+        onSuccess,
+    ]);
     React.useEffect(() => {
         setMounted(true);
     }, []);
@@ -780,6 +841,8 @@ var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => va
     }
     : {};
 
+var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+
 var convertToArrayPayload = (value) => (Array.isArray(value) ? value : [value]);
 
 var createSubject = () => {
@@ -857,7 +920,12 @@ function baseGet(object, updatePath) {
     const length = updatePath.slice(0, -1).length;
     let index = 0;
     while (index < length) {
-        object = isUndefined(object) ? index++ : object[updatePath[index++]];
+        if (isNullOrUndefined(object)) {
+            object = undefined;
+            break;
+        }
+        object = object[updatePath[index]];
+        index++;
     }
     return object;
 }
@@ -870,11 +938,18 @@ function isEmptyArray(obj) {
     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];
@@ -914,6 +989,29 @@ function markFieldsDirty(data, fields = {}) {
     }
     return fields;
 }
+function pruneDirtyFields(value) {
+    if (value === false) {
+        return undefined;
+    }
+    if (value === true) {
+        return true;
+    }
+    if (Array.isArray(value)) {
+        const result = value.map((value) => pruneDirtyFields(value));
+        return (result.some((value) => value !== undefined) ? result : undefined);
+    }
+    if (isObject(value)) {
+        const result = {};
+        for (const key in value) {
+            const pruned = pruneDirtyFields(value[key]);
+            if (!isUndefined(pruned)) {
+                result[key] = pruned;
+            }
+        }
+        return (Object.keys(result).length ? result : undefined);
+    }
+    return undefined;
+}
 function getDirtyFields(data, formValues, dirtyFieldsFromValues) {
     if (!dirtyFieldsFromValues) {
         dirtyFieldsFromValues = markFieldsDirty(formValues);
@@ -933,7 +1031,7 @@ function getDirtyFields(data, formValues, dirtyFieldsFromValues) {
             dirtyFieldsFromValues[key] = !deepEqual(value, formValue);
         }
     }
-    return dirtyFieldsFromValues;
+    return pruneDirtyFields(dirtyFieldsFromValues) || {};
 }
 
 const defaultResult = {
@@ -1040,12 +1138,22 @@ var getValidationModes = (mode) => ({
 });
 
 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 ||
@@ -1056,11 +1164,17 @@ var hasValidation = (options) => options.mount &&
         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))));
+var isWatched = (name, _names, isBlurEvent) => {
+    if (isBlurEvent)
+        return false;
+    if (_names.watchAll || _names.watch.has(name))
+        return true;
+    for (const watchName of _names.watch) {
+        if (name.startsWith(watchName) && name.charAt(watchName.length) === '.')
+            return true;
+    }
+    return false;
+};
 
 const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
     for (const key of fieldsNames || Object.keys(fields)) {
@@ -1128,9 +1242,10 @@ function schemaErrorLookup(errors, _fields, 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] ===
+    const keys = Object.keys(formState);
+    return (!keys.length ||
+        (isRoot && keys.length >= Object.keys(_proxyFormState).length) ||
+        keys.find((key) => _proxyFormState[key] ===
             (!isRoot || VALIDATION_MODE.all)));
 };
 
@@ -1139,7 +1254,7 @@ var shouldSubscribeByName = (name, signalName, exact) => !name ||
     name === signalName ||
     convertToArrayPayload(name).some((currentName) => currentName &&
         (exact
-            ? currentName === signalName
+            ? currentName === signalName || currentName.startsWith(signalName + '.')
             : currentName.startsWith(signalName) ||
                 signalName.startsWith(currentName)));
 
@@ -1162,8 +1277,9 @@ var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode)
 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]);
+    const existingErrors = get(errors, name);
+    const fieldArrayErrors = Array.isArray(existingErrors) ? existingErrors : [];
+    set(fieldArrayErrors, ROOT_ERROR_TYPE, error[name]);
     set(errors, name, fieldArrayErrors);
     return errors;
 };
@@ -1196,7 +1312,13 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
     const inputRef = refs ? refs[0] : ref;
     const setCustomValidity = (message) => {
         if (shouldUseNativeValidation && inputRef.reportValidity) {
-            inputRef.setCustomValidity(isBoolean(message) ? '' : message || '');
+            const validityMessage = isBoolean(message) ? '' : message || '';
+            if (refs) {
+                refs.forEach((ref) => ref.setCustomValidity(validityMessage));
+            }
+            else {
+                inputRef.setCustomValidity(validityMessage);
+            }
             inputRef.reportValidity();
         }
     };
@@ -1371,24 +1493,28 @@ const defaultOptions = {
     reValidateMode: VALIDATION_MODE.onChange,
     shouldFocusError: true,
 };
+const FORM_ERROR_TYPE = 'form';
+const DEFAULT_FORM_STATE = {
+    submitCount: 0,
+    isDirty: false,
+    isReady: false,
+    isValidating: false,
+    isSubmitted: false,
+    isSubmitting: false,
+    isSubmitSuccessful: false,
+    isValid: false,
+    touchedFields: {},
+    dirtyFields: {},
+    validatingFields: {},
+};
 function createFormControl(props = {}) {
     let _options = {
         ...defaultOptions,
         ...props,
     };
     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,
     };
@@ -1411,9 +1537,13 @@ function createFormControl(props = {}) {
         unMount: new Set(),
         array: new Set(),
         watch: new Set(),
+        registerName: new Set(),
     };
     let delayErrorCallback;
     let timer = 0;
+    let _valuesSubscriberCount = 0;
+    let _validationModeBeforeSubmit = getValidationModes(_options.mode);
+    let _validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
     const defaultProxyFormState = {
         isDirty: false,
         dirtyFields: false,
@@ -1452,7 +1582,11 @@ function createFormControl(props = {}) {
                 _updateIsValidating();
             }
             else {
-                isValid = await executeBuiltInValidation(_fields, true);
+                isValid = await executeBuiltInValidation({
+                    fields: _fields,
+                    onlyCheckValid: true,
+                    eventType: EVENTS.VALID,
+                });
             }
             if (isValid !== _formState.isValid) {
                 _subjects.state.next({
@@ -1480,6 +1614,9 @@ function createFormControl(props = {}) {
             });
         }
     };
+    const _updateDirtyFields = () => {
+        _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
+    };
     const _setFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
         if (args && method && !_options.disabled) {
             _state.action = true;
@@ -1501,7 +1638,7 @@ function createFormControl(props = {}) {
                 shouldSetValues && set(_formState.touchedFields, name, touchedFields);
             }
             if (_proxyFormState.dirtyFields || _proxySubscribeFormState.dirtyFields) {
-                _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
+                _updateDirtyFields();
             }
             _subjects.state.next({
                 name,
@@ -1517,6 +1654,7 @@ function createFormControl(props = {}) {
     };
     const updateErrors = (name, error) => {
         set(_formState.errors, name, error);
+        _formState.errors = { ..._formState.errors };
         _subjects.state.next({
             errors: _formState.errors,
         });
@@ -1528,16 +1666,53 @@ 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 updateValidAndValue = (name, shouldSkipSetValueAs, value, ref) => {
         const field = get(_fields, name);
         if (field) {
+            if (hasExplicitNullIntermediate(name)) {
+                return;
+            }
+            const wasUnsetInFormValues = isUndefined(get(_formValues, name));
             const defaultValue = get(_formValues, name, isUndefined(value) ? get(_defaultValues, name) : value);
             isUndefined(defaultValue) ||
                 (ref && ref.defaultChecked) ||
                 shouldSkipSetValueAs
                 ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f))
                 : setFieldValue(name, defaultValue);
-            _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) => {
@@ -1548,16 +1723,22 @@ function createFormControl(props = {}) {
         };
         if (!_options.disabled) {
             if (!isBlurEvent || shouldDirty) {
+                const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
                 if (_proxyFormState.isDirty || _proxySubscribeFormState.isDirty) {
                     isPreviousDirty = _formState.isDirty;
-                    _formState.isDirty = output.isDirty = _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) {
+                    _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
+                }
+                else {
+                    isCurrentFieldPristine
+                        ? unset(_formState.dirtyFields, name)
+                        : set(_formState.dirtyFields, name, true);
+                }
                 output.dirtyFields = _formState.dirtyFields;
                 shouldUpdateField =
                     shouldUpdateField ||
@@ -1596,6 +1777,7 @@ function createFormControl(props = {}) {
             error
                 ? set(_formState.errors, name, error)
                 : unset(_formState.errors, name);
+            _formState.errors = { ..._formState.errors };
         }
         if ((error ? !deepEqual(previousFieldError, error) : previousFieldError) ||
             !isEmptyObject(fieldState) ||
@@ -1615,8 +1797,7 @@ function createFormControl(props = {}) {
     };
     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);
@@ -1625,18 +1806,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) {
@@ -1644,28 +1876,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;
@@ -1683,7 +1928,7 @@ function createFormControl(props = {}) {
     };
     const _getDirty = (name, data) => !_options.disabled &&
         (name && data && set(_formValues, name, data),
-            !deepEqual(getValues(), _defaultValues));
+            !deepEqual(_state.mount ? _formValues : _defaultValues, _defaultValues));
     const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
         ...(_state.mount
             ? _formValues
@@ -1694,7 +1939,7 @@ function createFormControl(props = {}) {
                     : 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) => {
         const field = get(_fields, name);
         let fieldValue = value;
         if (field) {
@@ -1732,20 +1977,20 @@ function createFormControl(props = {}) {
                 }
                 else {
                     fieldReference.ref.value = fieldValue;
-                    if (!fieldReference.ref.type) {
+                    if (!fieldReference.ref.type && !skipRender) {
                         _subjects.state.next({
                             name,
-                            values: cloneObject(_formValues),
+                            values: skipClone ? _formValues : cloneObject(_formValues),
                         });
                     }
                 }
             }
         }
         (options.shouldDirty || options.shouldTouch) &&
-            updateTouchAndDirty(name, fieldValue, options.shouldTouch, options.shouldDirty, true);
+            updateTouchAndDirty(name, fieldValue, options.shouldTouch, options.shouldDirty, !skipRender);
         options.shouldValidate && trigger(name);
     };
-    const setValues = (name, value, options) => {
+    const setFieldValues = (name, value, options, skipClone = false, skipRender = false) => {
         for (const fieldKey in value) {
             if (!value.hasOwnProperty(fieldKey)) {
                 return;
@@ -1757,49 +2002,84 @@ function createFormControl(props = {}) {
                 isObject(fieldValue) ||
                 (field && !field._f)) &&
                 !isDateObject(fieldValue)
-                ? setValues(fieldName, fieldValue, options)
-                : setFieldValue(fieldName, fieldValue, options);
+                ? setFieldValues(fieldName, fieldValue, options, skipClone, skipRender)
+                : setFieldValue(fieldName, fieldValue, options, skipClone, skipRender);
         }
     };
-    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);
+            if (!field || field._f || isNullOrUndefined(cloneValue) || isEmpty) {
+                setFieldValue(name, cloneValue, options, skipClone, skipStateEmit);
+            }
+            else {
+                setFieldValues(name, cloneValue, options, skipClone, skipStateEmit);
+            }
         }
-        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,
             });
         }
-        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,
+            };
+            const flattenedUpdates = flatten(updatedFormValues);
+            for (const fieldName of _names.mount) {
+                if (fieldName in flattenedUpdates) {
+                    _setValue(fieldName, flattenedUpdates[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) => {
@@ -1814,8 +2094,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;
@@ -1823,11 +2101,13 @@ 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);
             if (isBlurEvent) {
@@ -1845,10 +2125,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();
@@ -1861,18 +2144,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);
@@ -1885,7 +2176,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,
+                        });
                     }
                 }
             }
@@ -1918,12 +2214,19 @@ 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,
+            });
         }
         _subjects.state.next({
             ...(!isString(name) ||
@@ -1960,16 +2263,25 @@ function createFormControl(props = {}) {
         isTouched: !!get((formState || _formState).touchedFields, name),
     });
     const clearErrors = (name) => {
-        name &&
-            convertToArrayPayload(name).forEach((inputName) => unset(_formState.errors, inputName));
-        _subjects.state.next({
-            errors: name ? _formState.errors : {},
-        });
+        const names = name ? convertToArrayPayload(name) : undefined;
+        names?.forEach((inputName) => unset(_formState.errors, inputName));
+        if (names) {
+            names.forEach((inputName) => {
+                _subjects.state.next({
+                    name: inputName,
+                    errors: _formState.errors,
+                });
+            });
+        }
+        else {
+            _subjects.state.next({
+                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,
@@ -1983,20 +2295,59 @@ function createFormControl(props = {}) {
         });
         options && options.shouldFocus && ref && ref.focus && ref.focus();
     };
-    const watch = (name, defaultValue) => _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) => {
+        const needsValues = !!props.formState?.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 = {
@@ -2051,6 +2402,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: {
@@ -2061,7 +2413,7 @@ function createFormControl(props = {}) {
             },
         });
         _names.mount.add(name);
-        if (field) {
+        if (field && !shouldRevalidateRemount) {
             _setDisabledField({
                 disabled: isBoolean(options.disabled)
                     ? options.disabled
@@ -2091,7 +2443,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
@@ -2135,6 +2489,7 @@ function createFormControl(props = {}) {
         };
     };
     const _focusError = () => _options.shouldFocusError &&
+        !_options.shouldUseNativeValidation &&
         iterateFieldsByAction(_fields, _focusInput, _names.mount);
     const _disableForm = (disabled) => {
         if (isBoolean(disabled)) {
@@ -2170,14 +2525,17 @@ 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: {},
@@ -2236,7 +2594,7 @@ 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;
         if (!keepStateOptions.keepDefaultValues) {
             _defaultValues = updatedValues;
         }
@@ -2285,15 +2643,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 },
             });
         }
@@ -2301,6 +2669,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,
@@ -2314,9 +2683,6 @@ 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
         if (!keepStateOptions.keepErrors) {
             _formState.errors = {};
         }
@@ -2328,8 +2694,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,
@@ -2366,8 +2734,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 &&
@@ -2378,9 +2744,15 @@ 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,
         };
     };
     const _resetDefaultValues = () => isFunction(_options.defaultValues) &&
@@ -2390,6 +2762,21 @@ function createFormControl(props = {}) {
                 isLoading: false,
             });
         });
+    const resetDefaultValues = (values, options = {}) => {
+        _defaultValues = cloneObject(values);
+        if (!options.keepDirty) {
+            const newDirtyFields = getDirtyFields(_defaultValues, _formValues);
+            _formState.dirtyFields = newDirtyFields;
+            _formState.isDirty = !isEmptyObject(newDirtyFields);
+        }
+        if (!options.keepIsValid) {
+            _setValid();
+        }
+        _subjects.state.next({
+            ..._formState,
+            defaultValues: _defaultValues,
+        });
+    };
     const methods = {
         control: {
             register,
@@ -2446,6 +2833,8 @@ function createFormControl(props = {}) {
                     ..._options,
                     ...value,
                 };
+                _validationModeBeforeSubmit = getValidationModes(_options.mode);
+                _validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
             },
         },
         subscribe,
@@ -2454,9 +2843,11 @@ function createFormControl(props = {}) {
         handleSubmit,
         watch,
         setValue,
+        setValues,
         getValues,
         reset,
         resetField,
+        resetDefaultValues,
         clearErrors,
         unregister,
         setError,
@@ -2577,30 +2968,45 @@ var updateAt = (fieldValues, index, value) => {
  */
 function useFieldArray(props) {
     const formControl = useFormControlContext();
-    const { control = formControl, name, shouldUnregister, rules } = props;
+    const { control = formControl, name, shouldUnregister, rules, disabled, } = props;
     const [fields, setFields] = React.useState(control._getFieldArray(name));
     const ids = React.useRef(control._getFieldArray(name).map(generateId));
     const _actioned = React.useRef(false);
-    control._names.array.add(name);
-    React.useMemo(() => rules &&
+    if (!disabled) {
+        control._names.array.add(name);
+    }
+    React.useMemo(() => !disabled &&
+        rules &&
         fields.length >= 0 &&
-        control.register(name, rules), [control, name, fields.length, rules]);
-    useIsomorphicLayoutEffect(() => control._subjects.array.subscribe({
-        next: ({ values, name: fieldArrayName, }) => {
-            if (fieldArrayName === name || !fieldArrayName) {
-                const fieldValues = get(values, name);
-                if (Array.isArray(fieldValues)) {
-                    setFields(fieldValues);
-                    ids.current = fieldValues.map(generateId);
+        control.register(name, rules), [control, name, fields.length, rules, disabled]);
+    useIsomorphicLayoutEffect(() => {
+        if (disabled) {
+            return;
+        }
+        return control._subjects.array.subscribe({
+            next: ({ values, name: fieldArrayName, }) => {
+                if (fieldArrayName === name || !fieldArrayName) {
+                    const fieldValues = get(values, name);
+                    if (Array.isArray(fieldValues)) {
+                        setFields(fieldValues);
+                        ids.current = fieldValues.map(generateId);
+                    }
+                    else if (!fieldArrayName) {
+                        setFields([]);
+                        ids.current = [];
+                    }
                 }
-            }
-        },
-    }).unsubscribe, [control, name]);
+            },
+        }).unsubscribe;
+    }, [control, name, disabled]);
     const updateValues = React.useCallback((updatedFieldArrayValues) => {
         _actioned.current = true;
         control._setFieldArray(name, updatedFieldArrayValues);
     }, [control, name]);
     const append = (value, options) => {
+        if (disabled) {
+            return;
+        }
         const appendValue = convertToArrayPayload(cloneObject(value));
         const updatedFieldArrayValues = appendAt(control._getFieldArray(name), appendValue);
         control._names.focus = getFocusFieldName(name, updatedFieldArrayValues.length - 1, options);
@@ -2612,6 +3018,9 @@ function useFieldArray(props) {
         });
     };
     const prepend = (value, options) => {
+        if (disabled) {
+            return;
+        }
         const prependValue = convertToArrayPayload(cloneObject(value));
         const updatedFieldArrayValues = prependAt(control._getFieldArray(name), prependValue);
         control._names.focus = getFocusFieldName(name, 0, options);
@@ -2623,6 +3032,9 @@ function useFieldArray(props) {
         });
     };
     const remove = (index) => {
+        if (disabled) {
+            return;
+        }
         const updatedFieldArrayValues = removeArrayAt(control._getFieldArray(name), index);
         ids.current = removeArrayAt(ids.current, index);
         updateValues(updatedFieldArrayValues);
@@ -2634,6 +3046,9 @@ function useFieldArray(props) {
         });
     };
     const insert$1 = (index, value, options) => {
+        if (disabled) {
+            return;
+        }
         const insertValue = convertToArrayPayload(cloneObject(value));
         const updatedFieldArrayValues = insert(control._getFieldArray(name), index, insertValue);
         control._names.focus = getFocusFieldName(name, index, options);
@@ -2646,6 +3061,9 @@ function useFieldArray(props) {
         });
     };
     const swap = (indexA, indexB) => {
+        if (disabled) {
+            return;
+        }
         const updatedFieldArrayValues = control._getFieldArray(name);
         swapArrayAt(updatedFieldArrayValues, indexA, indexB);
         swapArrayAt(ids.current, indexA, indexB);
@@ -2657,6 +3075,9 @@ function useFieldArray(props) {
         }, false);
     };
     const move = (from, to) => {
+        if (disabled) {
+            return;
+        }
         const updatedFieldArrayValues = control._getFieldArray(name);
         moveArrayAt(updatedFieldArrayValues, from, to);
         moveArrayAt(ids.current, from, to);
@@ -2668,6 +3089,9 @@ function useFieldArray(props) {
         }, false);
     };
     const update = (index, value) => {
+        if (disabled) {
+            return;
+        }
         const updateValue = cloneObject(value);
         const updatedFieldArrayValues = updateAt(control._getFieldArray(name), index, updateValue);
         ids.current = [...updatedFieldArrayValues].map((item, i) => !item || i === index ? generateId() : ids.current[i]);
@@ -2679,6 +3103,9 @@ function useFieldArray(props) {
         }, true, false);
     };
     const replace = (value) => {
+        if (disabled) {
+            return;
+        }
         const updatedFieldArrayValues = convertToArrayPayload(cloneObject(value));
         ids.current = updatedFieldArrayValues.map(generateId);
         updateValues([...updatedFieldArrayValues]);
@@ -2686,29 +3113,42 @@ function useFieldArray(props) {
         control._setFieldArray(name, [...updatedFieldArrayValues], (data) => data, {}, true, false);
     };
     React.useEffect(() => {
+        if (disabled) {
+            return;
+        }
         control._state.action = false;
         isWatched(name, control._names) &&
             control._subjects.state.next({
                 ...control._formState,
             });
+        const validationModes = getValidationModes(control._options.mode);
         if (_actioned.current &&
-            (!getValidationModes(control._options.mode).isOnSubmit ||
-                control._formState.isSubmitted) &&
-            !getValidationModes(control._options.reValidateMode).isOnSubmit) {
+            (!validationModes.isOnSubmit || control._formState.isSubmitted) &&
+            !getValidationModes(control._options.reValidateMode).isOnSubmit &&
+            !validationModes.isOnBlur) {
             if (control._options.resolver) {
                 control._runSchema([name]).then((result) => {
                     control._updateIsValidating([name]);
                     const error = get(result.errors, name);
                     const existingError = get(control._formState.errors, name);
+                    const existingErrorType = existingError && (existingError.type || existingError.root?.type);
+                    const existingErrorMessage = existingError &&
+                        (existingError.message || existingError.root?.message);
                     if (existingError
-                        ? (!error && existingError.type) ||
+                        ? (!error && existingErrorType) ||
                             (error &&
-                                (existingError.type !== error.type ||
-                                    existingError.message !== error.message))
+                                (existingErrorType !== error.type ||
+                                    existingErrorMessage !== error.message))
                         : error && error.type) {
-                        error
-                            ? set(control._formState.errors, name, error)
-                            : unset(control._formState.errors, name);
+                        if (error) {
+                            isObject(error) &&
+                                !Object.keys(error).some((key) => !Number.isNaN(+key))
+                                ? updateFieldArrayRootError(control._formState.errors, { [name]: error }, name)
+                                : set(control._formState.errors, name, error);
+                        }
+                        else {
+                            unset(control._formState.errors, name);
+                        }
                         control._subjects.state.next({
                             errors: control._formState.errors,
                         });
@@ -2728,10 +3168,14 @@ function useFieldArray(props) {
                 }
             }
         }
-        control._subjects.state.next({
-            name,
-            values: cloneObject(control._formValues),
-        });
+        // External updates that change `fields` (e.g. reset() or setValue() on
+        // the array) already notify subscribers with the up-to-date values
+        // themselves, so only re-broadcast here for genuine array method calls.
+        _actioned.current &&
+            control._subjects.state.next({
+                name,
+                values: cloneObject(control._formValues),
+            });
         control._names.focus &&
             iterateFieldsByAction(control._fields, (ref, key) => {
                 if (control._names.focus &&
@@ -2745,34 +3189,57 @@ function useFieldArray(props) {
         control._names.focus = '';
         control._setValid();
         _actioned.current = false;
-    }, [fields, name, control]);
+    }, [fields, name, control, disabled]);
     React.useEffect(() => {
-        !get(control._formValues, name) && control._setFieldArray(name);
+        if (!disabled) {
+            !get(control._formValues, name) && control._setFieldArray(name);
+        }
         return () => {
+            if (disabled) {
+                return;
+            }
+            const shouldKeepFieldArrayValues = !(control._options.shouldUnregister || shouldUnregister);
             const updateMounted = (name, value) => {
                 const field = get(control._fields, name);
                 if (field && field._f) {
                     field._f.mount = value;
                 }
             };
-            control._options.shouldUnregister || shouldUnregister
-                ? control.unregister(name)
-                : updateMounted(name, false);
+            if (_actioned.current && shouldKeepFieldArrayValues) {
+                control._subjects.state.next({
+                    name,
+                    values: cloneObject(control._formValues),
+                });
+            }
+            shouldKeepFieldArrayValues
+                ? updateMounted(name, false)
+                : control.unregister(name);
         };
-    }, [name, control, shouldUnregister]);
+    }, [name, control, shouldUnregister, disabled]);
     return {
-        swap: React.useCallback(swap, [updateValues, name, control]),
-        move: React.useCallback(move, [updateValues, name, control]),
-        prepend: React.useCallback(prepend, [updateValues, name, control]),
-        append: React.useCallback(append, [updateValues, name, control]),
-        remove: React.useCallback(remove, [updateValues, name, control]),
-        insert: React.useCallback(insert$1, [updateValues, name, control]),
-        update: React.useCallback(update, [updateValues, name, control]),
-        replace: React.useCallback(replace, [updateValues, name, control]),
+        swap: React.useCallback(swap, [updateValues, name, control, disabled]),
+        move: React.useCallback(move, [updateValues, name, control, disabled]),
+        prepend: React.useCallback(prepend, [
+            updateValues,
+            name,
+            control,
+            disabled,
+        ]),
+        append: React.useCallback(append, [updateValues, name, control, disabled]),
+        remove: React.useCallback(remove, [updateValues, name, control, disabled]),
+        insert: React.useCallback(insert$1, [updateValues, name, control, disabled]),
+        update: React.useCallback(update, [updateValues, name, control, disabled]),
+        replace: React.useCallback(replace, [
+            updateValues,
+            name,
+            control,
+            disabled,
+        ]),
         fields: React.useMemo(() => fields.map((field, index) => ({
             ...field,
+            ...(isBoolean(disabled) ? { disabled } : {}),
             key: ids.current[index] || generateId(),
-        })), [fields]),
+        })), [fields, disabled]),
     };
 }
 
@@ -2819,26 +3286,19 @@ function updateMethodsReference(_formControl) {
 function useForm(props = {}) {
     const _formControl = React.useRef(undefined);
     const _values = React.useRef(undefined);
-    const [formState, updateFormState] = React.useState({
-        isDirty: false,
-        isValidating: false,
+    const _formControlProp = React.useRef(props.formControl);
+    const [formState, updateFormState] = React.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,
@@ -2861,7 +3321,10 @@ function useForm(props = {}) {
     useIsomorphicLayoutEffect(() => {
         const sub = control._subscribe({
             formState: control._proxyFormState,
-            callback: () => updateFormState({ ...control._formState }),
+            callback: () => updateFormState({
+                ...control._formState,
+                defaultValues: control._defaultValues,
+            }),
             reRenderRoot: true,
         });
         updateFormState((data) => ({
@@ -2903,14 +3366,13 @@ function useForm(props = {}) {
         }
     }, [control, formState.isDirty]);
     React.useEffect(() => {
-        var _a;
         if (props.values && !deepEqual(props.values, _values.current)) {
             updateMethodsReference(_formControl);
             control._reset(props.values, {
                 keepFieldsRef: true,
                 ...control._options.resetOptions,
             });
-            if (!((_a = control._options.resetOptions) === null || _a === void 0 ? void 0 : _a.keepIsValid)) {
+            if (!control._options.resetOptions?.keepIsValid) {
                 control._setValid();
             }
             _values.current = props.values;