react-hook-form 7.81.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;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,CA2zDA"}
+{"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

@@ -353,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;
@@ -366,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
@@ -926,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);
@@ -950,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) {
@@ -963,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({
@@ -975,7 +982,7 @@ function createFormControl(props = {}) {
                     eventType: EVENTS.VALID,
                 });
             }
-            if (isValid !== _formState.isValid) {
+            if (callId === _setValidCallId && isValid !== _formState.isValid) {
                 _subjects.state.next({
                     isValid,
                 });
@@ -1002,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) {
@@ -1108,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) {
@@ -1119,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
@@ -1155,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);
@@ -1313,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
@@ -1375,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) {
@@ -1500,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) {
@@ -1615,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) &&
@@ -1983,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;
         }
@@ -1990,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);
@@ -2093,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
                             : {},
@@ -2153,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);
         }