react-hook-form 7.80.0 → 7.82.0

package/dist/logic/createFormControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createFormControl.d.ts","sourceRoot":"","sources":["../../src/logic/createFormControl.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAcV,WAAW,EAiBX,YAAY,EAKZ,aAAa,EAYd,MAAM,UAAU,CAAC;AAyDlB,eAAO,MAAM,kBAAkB;;;;;;;;;;;;CAY9B,CAAC;AAEF,wBAAgB,iBAAiB,CAC/B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,QAAQ,GAAG,GAAG,EACd,kBAAkB,GAAG,YAAY,EAEjC,KAAK,GAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAM,GACnE,IAAI,CACL,aAAa,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC,EACzD,WAAW,CACZ,GAAG;IACF,WAAW,EAAE,IAAI,CACf,aAAa,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC,EACzD,WAAW,CACZ,CAAC;CACH,CA0yDA"}
+{"version":3,"file":"createFormControl.d.ts","sourceRoot":"","sources":["../../src/logic/createFormControl.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAcV,WAAW,EAkBX,YAAY,EAKZ,aAAa,EAYd,MAAM,UAAU,CAAC;AA0DlB,eAAO,MAAM,kBAAkB;;;;;;;;;;;;CAY9B,CAAC;AAEF,wBAAgB,iBAAiB,CAC/B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,QAAQ,GAAG,GAAG,EACd,kBAAkB,GAAG,YAAY,EAEjC,KAAK,GAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAM,GACnE,IAAI,CACL,aAAa,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC,EACzD,WAAW,CACZ,GAAG;IACF,WAAW,EAAE,IAAI,CACf,aAAa,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC,EACzD,WAAW,CACZ,CAAC;CACH,CA62DA"}

package/dist/logic/getDirtyFields.d.ts

@@ -1,4 +1,5 @@
-declare function markFieldsDirty<T>(data: T, fields?: Record<string, any>): Record<string, any>;
-export default function getDirtyFields<T>(data: T, formValues: T, dirtyFieldsFromValues?: Record<Extract<keyof T, string>, ReturnType<typeof markFieldsDirty> | boolean>): Record<Extract<keyof T, string>, boolean | Record<string, any>>;
+import type { FieldRefs } from '../types';
+declare function markFieldsDirty<T>(data: T, fields?: Record<string, any>, fieldRefs?: Record<string, any>): Record<string, any>;
+export default function getDirtyFields<T>(data: T, formValues: T, dirtyFieldsFromValues?: Record<Extract<keyof T, string>, ReturnType<typeof markFieldsDirty> | boolean>, fieldRefs?: FieldRefs): Record<Extract<keyof T, string>, boolean | Record<string, any>>;
 export {};
 //# sourceMappingURL=getDirtyFields.d.ts.map

package/dist/logic/getDirtyFields.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getDirtyFields.d.ts","sourceRoot":"","sources":["../../src/logic/getDirtyFields.ts"],"names":[],"mappings":"AAWA,iBAAS,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,uBAapE;AAmCD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EACtC,IAAI,EAAE,CAAC,EACP,UAAU,EAAE,CAAC,EACb,qBAAqB,CAAC,EAAE,MAAM,CAC5B,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,EACxB,UAAU,CAAC,OAAO,eAAe,CAAC,GAAG,OAAO,CAC7C,mEA6BF"}
+{"version":3,"file":"getDirtyFields.d.ts","sourceRoot":"","sources":["../../src/logic/getDirtyFields.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AA8B1C,iBAAS,eAAe,CAAC,CAAC,EACxB,IAAI,EAAE,CAAC,EACP,MAAM,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,EAChC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,uBAsBhC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EACtC,IAAI,EAAE,CAAC,EACP,UAAU,EAAE,CAAC,EACb,qBAAqB,CAAC,EAAE,MAAM,CAC5B,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,EACxB,UAAU,CAAC,OAAO,eAAe,CAAC,GAAG,OAAO,CAC7C,EACD,SAAS,CAAC,EAAE,SAAS,mEAwCtB"}

package/dist/react-server.esm.mjs

@@ -182,6 +182,24 @@ function extractFormValues(fieldsState, formValues) {
     return values;
 }
 
+const flatten = (obj) => {
+    const output = {};
+    for (const key of Object.keys(obj)) {
+        if (isObjectType(obj[key]) &&
+            obj[key] !== null &&
+            !isDateObject(obj[key])) {
+            const nested = flatten(obj[key]);
+            for (const nestedKey of Object.keys(nested)) {
+                output[`${key}.${nestedKey}`] = nested[nestedKey];
+            }
+        }
+        else {
+            output[key] = obj[key];
+        }
+    }
+    return output;
+};
+
 const IS_KEY_RE = /^\w*$/;
 var isKey = (value) => IS_KEY_RE.test(value);
 
@@ -293,6 +311,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];
@@ -332,12 +353,33 @@ var objectHasFunction = (data) => {
 function isTraversable(value) {
     return Array.isArray(value) || (isObject(value) && !objectHasFunction(value));
 }
-function markFieldsDirty(data, fields = {}) {
+function isRegisteredLeaf(fieldRef) {
+    return !!(fieldRef && '_f' in fieldRef);
+}
+function isEmptyDirtyContainer(value) {
+    return Array.isArray(value)
+        ? !value.some((item) => !isUndefined(item))
+        : !Object.keys(value).length;
+}
+function clearDirtyField(container, key) {
+    if (Array.isArray(container)) {
+        container[key] = undefined;
+    }
+    else {
+        delete container[key];
+    }
+}
+function markFieldsDirty(data, fields = {}, fieldRefs) {
     for (const key in data) {
         const value = data[key];
-        if (isTraversable(value)) {
+        const fieldRef = fieldRefs && fieldRefs[key];
+        if (isTraversable(value) &&
+            (!Array.isArray(value) || !isRegisteredLeaf(fieldRef))) {
             fields[key] = Array.isArray(value) ? [] : {};
-            markFieldsDirty(value, fields[key]);
+            markFieldsDirty(value, fields[key], fieldRef);
+            if (isEmptyDirtyContainer(fields[key])) {
+                clearDirtyField(fields, key);
+            }
         }
         else if (!isUndefined(value)) {
             fields[key] = true;
@@ -345,49 +387,33 @@ 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) {
+function getDirtyFields(data, formValues, dirtyFieldsFromValues, fieldRefs) {
     if (!dirtyFieldsFromValues) {
-        dirtyFieldsFromValues = markFieldsDirty(formValues);
+        dirtyFieldsFromValues = markFieldsDirty(formValues, {}, fieldRefs);
     }
     for (const key in data) {
         const value = data[key];
-        if (isTraversable(value)) {
+        const fieldRef = fieldRefs && fieldRefs[key];
+        if (isTraversable(value) &&
+            (!Array.isArray(value) || !isRegisteredLeaf(fieldRef))) {
             if (isUndefined(formValues) || isPrimitive(dirtyFieldsFromValues[key])) {
-                dirtyFieldsFromValues[key] = markFieldsDirty(value, Array.isArray(value) ? [] : {});
+                dirtyFieldsFromValues[key] = markFieldsDirty(value, Array.isArray(value) ? [] : {}, fieldRef);
             }
             else {
-                getDirtyFields(value, isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
+                getDirtyFields(value, isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key], fieldRef);
+            }
+            if (isEmptyDirtyContainer(dirtyFieldsFromValues[key])) {
+                clearDirtyField(dirtyFieldsFromValues, key);
             }
         }
+        else if (deepEqual(value, formValues[key])) {
+            clearDirtyField(dirtyFieldsFromValues, key);
+        }
         else {
-            const formValue = formValues[key];
-            dirtyFieldsFromValues[key] = !deepEqual(value, formValue);
+            dirtyFieldsFromValues[key] = true;
         }
     }
-    return pruneDirtyFields(dirtyFieldsFromValues) || {};
+    return dirtyFieldsFromValues;
 }
 
 var getEventValue = (event) => isObject(event) && event.target
@@ -620,7 +646,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)));
 
@@ -905,8 +931,8 @@ function createFormControl(props = {}) {
         watch: new Set(),
         registerName: new Set(),
     };
-    let delayErrorCallback;
-    let timer = 0;
+    const delayErrorCallbacks = {};
+    const timers = {};
     let _valuesSubscriberCount = 0;
     let _validationModeBeforeSubmit = getValidationModes(_options.mode);
     let _validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
@@ -929,10 +955,11 @@ function createFormControl(props = {}) {
         array: createSubject(),
         state: createSubject(),
     };
+    let _setValidCallId = 0;
     const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
-    const debounce = (callback) => (wait) => {
-        clearTimeout(timer);
-        timer = setTimeout(callback, wait);
+    const debounce = (name, callback) => (wait) => {
+        clearTimeout(timers[name]);
+        timers[name] = setTimeout(callback, wait);
     };
     const _setValid = async (shouldUpdateValid) => {
         if (_state.keepIsValid) {
@@ -942,10 +969,11 @@ function createFormControl(props = {}) {
             (_proxyFormState.isValid ||
                 _proxySubscribeFormState.isValid ||
                 shouldUpdateValid)) {
+            const callId = ++_setValidCallId;
             let isValid;
             if (_options.resolver) {
                 isValid = isEmptyObject((await _runSchema()).errors);
-                _updateIsValidating();
+                callId === _setValidCallId && _updateIsValidating();
             }
             else {
                 isValid = await executeBuiltInValidation({
@@ -954,7 +982,7 @@ function createFormControl(props = {}) {
                     eventType: EVENTS.VALID,
                 });
             }
-            if (isValid !== _formState.isValid) {
+            if (callId === _setValidCallId && isValid !== _formState.isValid) {
                 _subjects.state.next({
                     isValid,
                 });
@@ -981,7 +1009,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateDirtyFields = () => {
-        _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
+        _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues, undefined, _fields);
     };
     const _setFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
         if (args && method && !_options.disabled) {
@@ -1087,7 +1115,9 @@ function createFormControl(props = {}) {
         const output = {
             name,
         };
-        if (!_options.disabled) {
+        // an explicit programmatic update (e.g. setValue with shouldDirty: true)
+        // opts into dirty tracking even when the form is disabled
+        if (!_options.disabled || shouldDirty === true) {
             if (!isBlurEvent || shouldDirty) {
                 const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
                 if (_proxyFormState.isDirty || _proxySubscribeFormState.isDirty) {
@@ -1098,7 +1128,7 @@ function createFormControl(props = {}) {
                 }
                 isPreviousDirty = !!get(_formState.dirtyFields, name);
                 if (isCurrentFieldPristine !== _formState.isDirty) {
-                    _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
+                    _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues, undefined, _fields);
                 }
                 else {
                     isCurrentFieldPristine
@@ -1134,12 +1164,12 @@ function createFormControl(props = {}) {
             isBoolean(isValid) &&
             _formState.isValid !== isValid;
         if (_options.delayError && error) {
-            delayErrorCallback = debounce(() => updateErrors(name, error));
-            delayErrorCallback(_options.delayError);
+            delayErrorCallbacks[name] = debounce(name, () => updateErrors(name, error));
+            delayErrorCallbacks[name](_options.delayError);
         }
         else {
-            clearTimeout(timer);
-            delayErrorCallback = null;
+            clearTimeout(timers[name]);
+            delete delayErrorCallbacks[name];
             error
                 ? set(_formState.errors, name, error)
                 : unset(_formState.errors, name);
@@ -1292,9 +1322,8 @@ function createFormControl(props = {}) {
         }
         _names.unMount = new Set();
     };
-    const _getDirty = (name, data) => !_options.disabled &&
-        (name && data && set(_formValues, name, data),
-            !deepEqual(_state.mount ? _formValues : _defaultValues, _defaultValues));
+    const _getDirty = (name, data) => (name && data && set(_formValues, name, data),
+        !deepEqual(_state.mount ? _formValues : _defaultValues, _defaultValues));
     const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
         ...(_state.mount
             ? _formValues
@@ -1354,7 +1383,10 @@ function createFormControl(props = {}) {
         }
         (options.shouldDirty || options.shouldTouch) &&
             updateTouchAndDirty(name, fieldValue, options.shouldTouch, options.shouldDirty, !skipRender);
-        options.shouldValidate && trigger(name);
+        options.shouldValidate &&
+            trigger(name, {
+                delayError: options.delayError,
+            });
     };
     const setFieldValues = (name, value, options, skipClone = false, skipRender = false) => {
         for (const fieldKey in value) {
@@ -1431,8 +1463,11 @@ function createFormControl(props = {}) {
                 ..._formValues,
                 ...updatedFormValues,
             };
+            const flattenedUpdates = flatten(updatedFormValues);
             for (const fieldName of _names.mount) {
-                _setValue(fieldName, get(updatedFormValues, fieldName), options, true, true);
+                if (fieldName in flattenedUpdates) {
+                    _setValue(fieldName, flattenedUpdates[fieldName], options, true, true);
+                }
             }
             _subjects.state.next({
                 ..._formState,
@@ -1476,7 +1511,8 @@ function createFormControl(props = {}) {
             if (isBlurEvent) {
                 if (!target || !target.readOnly) {
                     field._f.onBlur && field._f.onBlur(event);
-                    delayErrorCallback && delayErrorCallback(0);
+                    const pendingDelayError = delayErrorCallbacks[name];
+                    pendingDelayError && pendingDelayError(0);
                 }
             }
             else if (field._f.onChange) {
@@ -1591,6 +1627,18 @@ function createFormControl(props = {}) {
                 eventType: EVENTS.TRIGGER,
             });
         }
+        if (options.delayError && _options.delayError && isString(name)) {
+            const error = get(_formState.errors, name);
+            if (error) {
+                unset(_formState.errors, name);
+                delayErrorCallbacks[name] = debounce(name, () => updateErrors(name, error));
+                delayErrorCallbacks[name](_options.delayError);
+            }
+            else {
+                clearTimeout(timers[name]);
+                delete delayErrorCallbacks[name];
+            }
+        }
         _subjects.state.next({
             ...(!isString(name) ||
                 ((_proxyFormState.isValid || _proxySubscribeFormState.isValid) &&
@@ -1959,6 +2007,7 @@ function createFormControl(props = {}) {
         const cloneUpdatedValues = cloneObject(updatedValues);
         const isEmptyResetValues = isEmptyObject(formValues);
         const values = cloneUpdatedValues;
+        const fieldRefs = _fields;
         if (!keepStateOptions.keepDefaultValues) {
             _defaultValues = updatedValues;
         }
@@ -1966,7 +2015,7 @@ function createFormControl(props = {}) {
             if (keepStateOptions.keepDirtyValues) {
                 const fieldsToCheck = new Set([
                     ..._names.mount,
-                    ...Object.keys(getDirtyFields(_defaultValues, _formValues)),
+                    ...Object.keys(getDirtyFields(_defaultValues, _formValues, undefined, fieldRefs)),
                 ]);
                 for (const fieldName of Array.from(fieldsToCheck)) {
                     const isDirty = get(_formState.dirtyFields, fieldName);
@@ -2024,6 +2073,8 @@ function createFormControl(props = {}) {
                 values: { ...values },
             });
             _subjects.state.next({
+                name: undefined,
+                type: undefined,
                 values: { ...values },
             });
         }
@@ -2067,10 +2118,10 @@ function createFormControl(props = {}) {
                 ? {}
                 : keepStateOptions.keepDirtyValues
                     ? keepStateOptions.keepDefaultValues && _formValues
-                        ? getDirtyFields(_defaultValues, _formValues)
+                        ? getDirtyFields(_defaultValues, _formValues, undefined, fieldRefs)
                         : _formState.dirtyFields
                     : keepStateOptions.keepDefaultValues && formValues
-                        ? getDirtyFields(_defaultValues, formValues)
+                        ? getDirtyFields(_defaultValues, formValues, undefined, fieldRefs)
                         : keepStateOptions.keepDirty
                             ? _formState.dirtyFields
                             : {},
@@ -2106,9 +2157,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) &&
@@ -2121,7 +2178,7 @@ function createFormControl(props = {}) {
     const resetDefaultValues = (values, options = {}) => {
         _defaultValues = cloneObject(values);
         if (!options.keepDirty) {
-            const newDirtyFields = getDirtyFields(_defaultValues, _formValues);
+            const newDirtyFields = getDirtyFields(_defaultValues, _formValues, undefined, _fields);
             _formState.dirtyFields = newDirtyFields;
             _formState.isDirty = !isEmptyObject(newDirtyFields);
         }