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

package/dist/index.esm.mjs

@@ -18,15 +18,9 @@ var getEventValue = (event) => isObject(event) && event.target
         : event.target.value
     : event;
 
-var getFieldArrayParentNames = (names, name) => {
-    const parts = name.split('.');
-    const matches = [];
-    let prefix = parts[0];
-    for (let i = 1; i < parts.length; prefix += '.' + parts[i++]) {
-        !isNaN(+parts[i]) && names.has(prefix) && matches.push(prefix);
-    }
-    return matches;
-};
+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;
@@ -58,19 +52,49 @@ 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 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);
@@ -100,7 +124,7 @@ var set = (object, path, value) => {
                         ? []
                         : {};
         }
-        if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
+        if (PROTOTYPE_KEYWORDS.includes(key)) {
             return;
         }
         object[key] = newValue;
@@ -108,33 +132,6 @@ var set = (object, path, 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 FORM_ERROR_TYPE = 'form';
-const ROOT_ERROR_TYPE = 'root';
-
 /**
  * Separate context for `control` to prevent unnecessary rerenders.
  * Internal hooks that only need control use this instead of full form context.
@@ -163,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.
@@ -248,7 +247,8 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
 
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
-function deepEqual(object1, object2, 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;
     }
@@ -263,11 +263,25 @@ function deepEqual(object1, object2, visited = new WeakSet()) {
     if (keys1.length !== keys2.length) {
         return false;
     }
-    if (visited.has(object1) || 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;
     }
-    visited.add(object1);
-    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 (!(key in object2)) {
@@ -400,8 +414,7 @@ function useWatch(props) {
 function useController(props) {
     const formControl = useFormControlContext();
     const { name, disabled, control = formControl, shouldUnregister, defaultValue, exact = true, } = props;
-    const isArrayField = !!getFieldArrayParentNames(control._names.array, name)
-        .length;
+    const isArrayField = isNameInFieldArray(control._names.array, name);
     const defaultValueMemo = React.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
     const value = useWatch({
         control,
@@ -415,6 +428,7 @@ function useController(props) {
         exact,
     });
     const _props = React.useRef(props);
+    const _proxyRef = React.useRef(null);
     const _registerProps = React.useRef(control.register(name, {
         ...props.rules,
         value,
@@ -443,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),
@@ -458,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(() => ({
@@ -489,13 +515,21 @@ function useController(props) {
         };
         updateMounted(name, true);
         if (_shouldUnregisterField) {
-            const value = cloneObject(get(control._defaultValues, name, 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);
+        if (_proxyRef.current) {
+            const field = get(control._fields, name);
+            if (field && field._f) {
+                field._f.ref = _proxyRef.current;
+            }
+        }
         return () => {
             (isArrayField
                 ? _shouldUnregisterField && !control._state.action
@@ -564,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];
@@ -640,8 +676,7 @@ const useFormContext = () => React.useContext(HookFormContext);
  * }
  * ```
  */
-const FormProvider = (props) => {
-    const { children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, } = props;
+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,
@@ -806,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 = () => {
@@ -910,6 +947,9 @@ function unset(object, 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];
@@ -1098,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 ||
@@ -1114,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)) {
@@ -1186,10 +1242,10 @@ function schemaErrorLookup(errors, _fields, name) {
 var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {
     updateFormState(formStateData);
     const { name, ...formState } = formStateData;
-    return (isEmptyObject(formState) ||
-        (isRoot &&
-            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)));
 };
 
@@ -1198,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)));
 
@@ -1221,7 +1277,8 @@ 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));
+    const existingErrors = get(errors, name);
+    const fieldArrayErrors = Array.isArray(existingErrors) ? existingErrors : [];
     set(fieldArrayErrors, ROOT_ERROR_TYPE, error[name]);
     set(errors, name, fieldArrayErrors);
     return errors;
@@ -1255,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();
         }
     };
@@ -1268,8 +1331,7 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
         isUndefined(inputValue)) ||
         (isHTMLElement(ref) && ref.value === '') ||
         inputValue === '' ||
-        (Array.isArray(inputValue) && !inputValue.length) ||
-        (valueAsNumber && typeof inputValue === 'number' && isNaN(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;
@@ -1431,6 +1493,7 @@ const defaultOptions = {
     reValidateMode: VALIDATION_MODE.onChange,
     shouldFocusError: true,
 };
+const FORM_ERROR_TYPE = 'form';
 const DEFAULT_FORM_STATE = {
     submitCount: 0,
     isDirty: false,
@@ -1478,6 +1541,9 @@ function createFormControl(props = {}) {
     };
     let delayErrorCallback;
     let timer = 0;
+    let _valuesSubscriberCount = 0;
+    let _validationModeBeforeSubmit = getValidationModes(_options.mode);
+    let _validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
     const defaultProxyFormState = {
         isDirty: false,
         dirtyFields: false,
@@ -1588,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,
         });
@@ -1630,12 +1697,6 @@ function createFormControl(props = {}) {
                 : setFieldValue(name, defaultValue);
             if (_state.mount && !_state.action) {
                 _setValid();
-                // Re-registering a field after a prior unregister puts its key back
-                // into _formValues, which can flip isDirty back to false (#13397).
-                // Only run when we are currently dirty, otherwise an initial register
-                // for a field with no defaultValue would flip isDirty to true. Reset
-                // paths repopulate _formValues before re-register, so the key is
-                // present then and this branch is skipped (preserves keepDirty).
                 if (wasUnsetInFormValues &&
                     _formState.isDirty &&
                     (_proxyFormState.isDirty || _proxySubscribeFormState.isDirty)) {
@@ -1645,6 +1706,12 @@ function createFormControl(props = {}) {
                         _subjects.state.next({ ..._formState });
                     }
                 }
+                if (props.shouldUnregister &&
+                    wasUnsetInFormValues &&
+                    !isUndefined(get(_formValues, name)) &&
+                    isWatched(name, _names)) {
+                    _state.watch = true;
+                }
             }
         }
     };
@@ -1656,12 +1723,13 @@ 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);
                 if (isCurrentFieldPristine !== _formState.isDirty) {
                     _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
@@ -1709,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) ||
@@ -1737,11 +1806,14 @@ function createFormControl(props = {}) {
             for (const name of names) {
                 const error = get(errors, name);
                 error
-                    ? _names.array.has(name) && isObject(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;
@@ -1856,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
@@ -1867,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) {
@@ -1905,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 setFieldValues = (name, value, options) => {
+    const setFieldValues = (name, value, options, skipClone = false, skipRender = false) => {
         for (const fieldKey in value) {
             if (!value.hasOwnProperty(fieldKey)) {
                 return;
@@ -1930,14 +2002,14 @@ function createFormControl(props = {}) {
                 isObject(fieldValue) ||
                 (field && !field._f)) &&
                 !isDateObject(fieldValue)
-                ? setFieldValues(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);
+        const cloneValue = skipClone ? value : cloneObject(value);
         const previousValue = get(_formValues, name);
         const isValueUnchanged = deepEqual(previousValue, cloneValue);
         if (!isValueUnchanged) {
@@ -1946,7 +2018,7 @@ function createFormControl(props = {}) {
         if (isFieldArray) {
             _subjects.array.next({
                 name,
-                values: cloneObject(_formValues),
+                values: skipClone ? _formValues : cloneObject(_formValues),
             });
             if ((_proxyFormState.isDirty ||
                 _proxyFormState.dirtyFields ||
@@ -1954,31 +2026,28 @@ function createFormControl(props = {}) {
                 _proxySubscribeFormState.dirtyFields) &&
                 options.shouldDirty) {
                 _updateDirtyFields();
-                _subjects.state.next({
-                    name,
-                    dirtyFields: _formState.dirtyFields,
-                    isDirty: _getDirty(name, cloneValue),
-                });
+                if (!skipStateEmit) {
+                    _subjects.state.next({
+                        name,
+                        dirtyFields: _formState.dirtyFields,
+                        isDirty: _getDirty(name, cloneValue),
+                    });
+                }
             }
         }
         else {
             const isEmpty = (Array.isArray(cloneValue) && !cloneValue.length) ||
                 isEmptyObject(cloneValue);
             if (!field || field._f || isNullOrUndefined(cloneValue) || isEmpty) {
-                setFieldValue(name, cloneValue, options);
+                setFieldValue(name, cloneValue, options, skipClone, skipStateEmit);
             }
             else {
-                setFieldValues(name, cloneValue, options);
+                setFieldValues(name, cloneValue, options, skipClone, skipStateEmit);
             }
         }
-        if (!isValueUnchanged) {
+        if (!isValueUnchanged && !skipStateEmit) {
             const watched = isWatched(name, _names);
-            const values = cloneObject(_formValues);
-            if (!isFieldArray) {
-                for (const arrayName of getFieldArrayParentNames(_names.array, name)) {
-                    _subjects.array.next({ name: arrayName, values });
-                }
-            }
+            const values = skipClone ? _formValues : cloneObject(_formValues);
             _subjects.state.next({
                 ...(watched && _formState),
                 name: _state.mount || watched ? name : undefined,
@@ -1986,7 +2055,8 @@ function createFormControl(props = {}) {
             });
         }
     };
-    const setValues = (formValues) => {
+    const setValue = (name, value, options = {}) => _setValue(name, value, options, false);
+    const setValues = (formValues, options = {}) => {
         const updatedFormValues = isFunction(formValues)
             ? formValues(_formValues)
             : formValues;
@@ -1995,10 +2065,21 @@ function createFormControl(props = {}) {
                 ..._formValues,
                 ...updatedFormValues,
             };
+            const flattenedUpdates = flatten(updatedFormValues);
             for (const fieldName of _names.mount) {
-                setValue(fieldName, get(updatedFormValues, fieldName));
+                if (fieldName in flattenedUpdates) {
+                    _setValue(fieldName, flattenedUpdates[fieldName], options, true, true);
+                }
+            }
+            _subjects.state.next({
+                ..._formState,
+                name: undefined,
+                type: undefined,
+                ...(_valuesSubscriberCount ? { values: _formValues } : {}),
+            });
+            if (options.shouldValidate) {
+                _setValid();
             }
-            _subjects.state.next({ ..._formState, values: _formValues });
         }
     };
     const onChange = async (event) => {
@@ -2013,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;
@@ -2022,12 +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) {
@@ -2045,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();
@@ -2072,13 +2155,15 @@ function createFormControl(props = {}) {
                 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);
@@ -2181,8 +2266,6 @@ function createFormControl(props = {}) {
         const names = name ? convertToArrayPayload(name) : undefined;
         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,
@@ -2191,7 +2274,6 @@ function createFormControl(props = {}) {
             });
         }
         else {
-            // Clear all errors - emit without name to notify all subscribers
             _subjects.state.next({
                 errors: {},
             });
@@ -2200,7 +2282,6 @@ function createFormControl(props = {}) {
     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,
@@ -2214,21 +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)) {
-                const snapshot = { ..._formValues };
-                props.callback({
-                    values: snapshot,
-                    ..._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 = {
@@ -2363,8 +2482,7 @@ function createFormControl(props = {}) {
                         field._f.mount = false;
                     }
                     (_options.shouldUnregister || options.shouldUnregister) &&
-                        !(getFieldArrayParentNames(_names.array, name).length &&
-                            _state.action) &&
+                        !(isNameInFieldArray(_names.array, name) && _state.action) &&
                         _names.unMount.add(name);
                 }
             },
@@ -2476,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;
         }
@@ -2525,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 },
             });
         }
@@ -2555,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 = {};
         }
@@ -2569,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,
@@ -2607,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 &&
@@ -2619,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) &&
@@ -2631,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,
@@ -2687,6 +2833,8 @@ function createFormControl(props = {}) {
                     ..._options,
                     ...value,
                 };
+                _validationModeBeforeSubmit = getValidationModes(_options.mode);
+                _validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
             },
         },
         subscribe,
@@ -2699,6 +2847,7 @@ function createFormControl(props = {}) {
         getValues,
         reset,
         resetField,
+        resetDefaultValues,
         clearErrors,
         unregister,
         setError,
@@ -2819,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);
@@ -2854,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);
@@ -2865,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);
@@ -2876,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);
@@ -2888,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);
@@ -2899,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);
@@ -2910,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]);
@@ -2921,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]);
@@ -2928,6 +3113,9 @@ 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({
@@ -2943,15 +3131,24 @@ function useFieldArray(props) {
                     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,
                         });
@@ -2971,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 &&
@@ -2988,10 +3189,15 @@ 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);
@@ -3009,20 +3215,31 @@ function useFieldArray(props) {
                 ? 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]),
     };
 }
 
@@ -3069,6 +3286,7 @@ function updateMethodsReference(_formControl) {
 function useForm(props = {}) {
     const _formControl = React.useRef(undefined);
     const _values = React.useRef(undefined);
+    const _formControlProp = React.useRef(props.formControl);
     const [formState, updateFormState] = React.useState(() => ({
         ...cloneObject(DEFAULT_FORM_STATE),
         isLoading: isFunction(props.defaultValues),
@@ -3078,7 +3296,9 @@ function useForm(props = {}) {
             ? 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,