react-hook-form 7.84.0 → 7.85.0

package/dist/index.esm.mjs

@@ -170,6 +170,82 @@ const useIsomorphicLayoutEffect = isWeb
     ? React.useLayoutEffect
     : React.useEffect;
 
+var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
+
+const isEmptyObjectWithCustomPrototype = (object, keys) => keys.length === 0 && !Array.isArray(object) && !isPlainObject(object);
+function deepEqual(object1, object2, visited = new WeakMap()) {
+    if (object1 === object2) {
+        return true;
+    }
+    if (isPrimitive(object1) || isPrimitive(object2)) {
+        return Object.is(object1, object2);
+    }
+    if (isDateObject(object1) && isDateObject(object2)) {
+        return Object.is(object1.getTime(), object2.getTime());
+    }
+    const keys1 = Object.keys(object1);
+    const keys2 = Object.keys(object2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    if (isEmptyObjectWithCustomPrototype(object1, keys1) ||
+        isEmptyObjectWithCustomPrototype(object2, keys2)) {
+        return Object.is(object1, object2);
+    }
+    if (!keys1.length && Array.isArray(object1) !== Array.isArray(object2)) {
+        return false;
+    }
+    const visitedPairs = visited.get(object1);
+    if (visitedPairs && visitedPairs.has(object2)) {
+        return true;
+    }
+    if (visitedPairs) {
+        visitedPairs.add(object2);
+    }
+    else {
+        const ws = new WeakSet();
+        ws.add(object2);
+        visited.set(object1, ws);
+    }
+    for (const key of keys1) {
+        const val1 = object1[key];
+        if (!(key in object2)) {
+            return false;
+        }
+        if (key !== 'ref') {
+            const val2 = object2[key];
+            if ((isDateObject(val1) && isDateObject(val2)) ||
+                ((isObject(val1) || Array.isArray(val1)) &&
+                    (isObject(val2) || Array.isArray(val2)))
+                ? !deepEqual(val1, val2, visited)
+                : !Object.is(val1, val2)) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function useResyncOnReconnect() {
+    const _connected = React.useRef(false);
+    const _prevValue = React.useRef(undefined);
+    const resyncIfNeeded = React.useCallback((enabled, getCurrentValue, setValue) => {
+        if (enabled && _connected.current) {
+            const currentValue = getCurrentValue();
+            if (!deepEqual(_prevValue.current, currentValue)) {
+                setValue(currentValue);
+            }
+        }
+        _connected.current = true;
+    }, []);
+    const snapshot = React.useCallback((enabled, getCurrentValue) => {
+        if (enabled) {
+            _prevValue.current = cloneObject(getCurrentValue());
+        }
+    }, []);
+    return { resyncIfNeeded, snapshot };
+}
+
 /**
  * Subscribes to each form state and isolates re-renders at the custom hook level. It has its own scope for form state subscriptions, so it will not affect other useFormState or useForm instances. Using this hook can reduce the re-render impact on large and complex form applications.
  *
@@ -217,19 +293,31 @@ function useFormState(props) {
         isValid: false,
         errors: false,
     });
-    useIsomorphicLayoutEffect(() => control._subscribe({
-        name,
-        formState: _localProxyFormState.current,
-        exact,
-        callback: (formState) => {
-            !disabled &&
-                updateFormState({
-                    ...control._formState,
-                    ...formState,
-                    defaultValues: control._defaultValues,
-                });
-        },
-    }), [name, disabled, exact]);
+    const { resyncIfNeeded, snapshot } = useResyncOnReconnect();
+    useIsomorphicLayoutEffect(() => {
+        const getCurrentFormState = () => ({
+            ...control._formState,
+            defaultValues: control._defaultValues,
+        });
+        resyncIfNeeded(!disabled, getCurrentFormState, updateFormState);
+        const unsubscribe = control._subscribe({
+            name,
+            formState: _localProxyFormState.current,
+            exact,
+            callback: (formState) => {
+                !disabled &&
+                    updateFormState({
+                        ...control._formState,
+                        ...formState,
+                        defaultValues: control._defaultValues,
+                    });
+            },
+        });
+        return () => {
+            unsubscribe();
+            snapshot(!disabled, getCurrentFormState);
+        };
+    }, [name, disabled, exact, resyncIfNeeded, snapshot]);
     React.useEffect(() => {
         _localProxyFormState.current.isValid && control._setValid(true);
     }, [control]);
@@ -251,62 +339,6 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
     return formValues;
 };
 
-var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
-
-const isEmptyObjectWithCustomPrototype = (object, keys) => keys.length === 0 && !Array.isArray(object) && !isPlainObject(object);
-function deepEqual(object1, object2, visited = new WeakMap()) {
-    if (object1 === object2) {
-        return true;
-    }
-    if (isPrimitive(object1) || isPrimitive(object2)) {
-        return Object.is(object1, object2);
-    }
-    if (isDateObject(object1) && isDateObject(object2)) {
-        return Object.is(object1.getTime(), object2.getTime());
-    }
-    const keys1 = Object.keys(object1);
-    const keys2 = Object.keys(object2);
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-    if (isEmptyObjectWithCustomPrototype(object1, keys1) ||
-        isEmptyObjectWithCustomPrototype(object2, keys2)) {
-        return Object.is(object1, object2);
-    }
-    if (!keys1.length && Array.isArray(object1) !== Array.isArray(object2)) {
-        return false;
-    }
-    const visitedPairs = visited.get(object1);
-    if (visitedPairs && visitedPairs.has(object2)) {
-        return true;
-    }
-    if (visitedPairs) {
-        visitedPairs.add(object2);
-    }
-    else {
-        const ws = new WeakSet();
-        ws.add(object2);
-        visited.set(object1, ws);
-    }
-    for (const key of keys1) {
-        const val1 = object1[key];
-        if (!(key in object2)) {
-            return false;
-        }
-        if (key !== 'ref') {
-            const val2 = object2[key];
-            if ((isDateObject(val1) && isDateObject(val2)) ||
-                ((isObject(val1) || Array.isArray(val1)) &&
-                    (isObject(val2) || Array.isArray(val2)))
-                ? !deepEqual(val1, val2, visited)
-                : !Object.is(val1, val2)) {
-                return false;
-            }
-        }
-    }
-    return true;
-}
-
 /**
  * Custom hook to subscribe to field changes and isolate re-rendering at the component level.
  *
@@ -355,24 +387,39 @@ function useWatch(props) {
             }
         }
     }, [control._formValues, control._names, disabled, name]);
+    const { resyncIfNeeded, snapshot } = useResyncOnReconnect();
+    const _refreshValue = React.useRef(refreshValue);
+    _refreshValue.current = refreshValue;
+    const _getCurrentOutput = React.useRef(getCurrentOutput);
+    _getCurrentOutput.current = getCurrentOutput;
     useIsomorphicLayoutEffect(() => {
         if (_prevControl.current !== control ||
             !deepEqual(_prevName.current, name)) {
             _prevControl.current = control;
             _prevName.current = name;
-            refreshValue();
+            _refreshValue.current();
         }
-        return control._subscribe({
+        else {
+            resyncIfNeeded(!disabled, () => _getCurrentOutput.current(), (currentValue) => {
+                updateValue(currentValue);
+                _computeFormValues.current = currentValue;
+            });
+        }
+        const unsubscribe = control._subscribe({
             name,
             formState: {
                 values: true,
             },
             exact,
             callback: (formState) => {
-                refreshValue(formState.values);
+                _refreshValue.current(formState.values);
             },
         });
-    }, [control, exact, name, refreshValue]);
+        return () => {
+            unsubscribe();
+            snapshot(!disabled, () => _getCurrentOutput.current());
+        };
+    }, [control, exact, name, disabled, resyncIfNeeded, snapshot]);
     React.useEffect(() => control._removeUnmounted());
     // If name or control changed for this render, synchronously reflect the
     // latest value so callers (like useController) see the correct value
@@ -830,7 +877,9 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
         let exceedMin;
         const maxOutput = getValueAndMessage(max);
         const minOutput = getValueAndMessage(min);
-        if (!isNullOrUndefined(inputValue) && !isNaN(inputValue)) {
+        if (!isNullOrUndefined(inputValue) &&
+            !isDateObject(inputValue) &&
+            !isNaN(inputValue)) {
             const valueNumber = ref.valueAsNumber ||
                 (inputValue ? +inputValue : inputValue);
             if (!isNullOrUndefined(maxOutput.value)) {
@@ -1238,9 +1287,11 @@ function useFieldArray(props) {
     };
     React.useEffect(() => {
         if (disabled) {
+            control._state.actionArrayLengths.delete(name);
             return;
         }
         control._state.action = false;
+        control._state.actionArrayLengths.delete(name);
         isWatched(name, control._names) &&
             control._subjects.state.next({
                 ...control._formState,
@@ -1320,6 +1371,7 @@ function useFieldArray(props) {
             !get(control._formValues, name) && control._setFieldArray(name);
         }
         return () => {
+            control._state.actionArrayLengths.delete(name);
             if (disabled) {
                 return;
             }
@@ -1964,7 +2016,12 @@ var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode)
     return true;
 };
 
-var unsetEmptyArray = (ref, name) => !compact(get(ref, name)).length && unset(ref, name);
+var unsetEmptyArray = (ref, name) => {
+    const array = get(ref, name);
+    !compact(array).length &&
+        !(array === null || array === void 0 ? void 0 : array.root) &&
+        unset(ref, name);
+};
 
 const defaultOptions = {
     mode: VALIDATION_MODE.onSubmit,
@@ -2013,6 +2070,7 @@ function createFormControl(props = {}) {
         : cloneObject(_defaultValues);
     let _state = {
         action: false,
+        actionArrayLengths: new Map(),
         mount: false,
         watch: false,
         keepIsValid: false,
@@ -2108,13 +2166,22 @@ function createFormControl(props = {}) {
     const _setFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
         if (args && method && !_options.disabled) {
             _state.action = true;
+            if (!_state.actionArrayLengths.has(name)) {
+                const preActionFields = get(_fields, name);
+                _state.actionArrayLengths.set(name, Array.isArray(preActionFields) ? preActionFields.length : 0);
+            }
             if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
                 const fieldValues = method(get(_fields, name), args.argA, args.argB);
                 shouldSetValues && set(_fields, name, fieldValues);
             }
             if (shouldUpdateFieldsAndState &&
                 Array.isArray(get(_formState.errors, name))) {
-                const errors = method(get(_formState.errors, name), args.argA, args.argB);
+                const fieldArrayErrors = get(_formState.errors, name);
+                const rootError = fieldArrayErrors.root;
+                const errors = method(fieldArrayErrors, args.argA, args.argB) || fieldArrayErrors;
+                if (rootError) {
+                    errors.root = rootError;
+                }
                 shouldSetValues && set(_formState.errors, name, errors);
                 unsetEmptyArray(_formState.errors, name);
             }
@@ -2170,10 +2237,40 @@ function createFormControl(props = {}) {
         }
         return false;
     };
+    const isStaleArrayIndex = (name) => {
+        if (!_state.actionArrayLengths.size) {
+            return false;
+        }
+        const segments = isKey(name) ? [name] : stringToPath(name);
+        let node = _formValues;
+        let path = '';
+        let ownerDepth = -1;
+        let ownerPreActionLength = 0;
+        for (let i = 0; i < segments.length; i++) {
+            if (isNullOrUndefined(node)) {
+                return false;
+            }
+            const key = segments[i];
+            path = path ? `${path}.${key}` : key;
+            if (Array.isArray(node) && +key >= node.length) {
+                return ownerDepth === -1
+                    ? false
+                    : i === ownerDepth
+                        ? +key < ownerPreActionLength
+                        : true;
+            }
+            if (_state.actionArrayLengths.has(path)) {
+                ownerDepth = i + 1;
+                ownerPreActionLength = _state.actionArrayLengths.get(path);
+            }
+            node = node[key];
+        }
+        return false;
+    };
     const updateValidAndValue = (name, shouldSkipSetValueAs, value, ref) => {
         const field = get(_fields, name);
         if (field) {
-            if (hasExplicitNullIntermediate(name)) {
+            if (hasExplicitNullIntermediate(name) || isStaleArrayIndex(name)) {
                 return;
             }
             const wasUnsetInFormValues = isUndefined(get(_formValues, name));
@@ -2421,14 +2518,12 @@ function createFormControl(props = {}) {
     const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
         ...(_state.mount
             ? _formValues
-            : isUndefined(defaultValue)
+            : isUndefined(defaultValue) || isString(names)
                 ? _defaultValues
-                : isString(names)
-                    ? { [names]: defaultValue }
-                    : defaultValue),
+                : defaultValue),
     }, isGlobal, defaultValue);
     const _getFieldArray = (name) => compact(get(_state.mount ? _formValues : _defaultValues, name, _options.shouldUnregister ? get(_defaultValues, name, []) : []));
-    const setFieldValue = (name, value, options = {}, skipClone = false, skipRender = false) => {
+    const setFieldValue = (name, value, options = {}, skipClone = false, skipRender = false, skipValueRender = false) => {
         const field = get(_fields, name);
         let fieldValue = value;
         if (field) {
@@ -2466,7 +2561,7 @@ function createFormControl(props = {}) {
                 }
                 else {
                     fieldReference.ref.value = fieldValue;
-                    if (!fieldReference.ref.type && !skipRender) {
+                    if (!fieldReference.ref.type && !skipRender && !skipValueRender) {
                         _subjects.state.next({
                             name,
                             values: skipClone ? _formValues : cloneObject(_formValues),
@@ -2482,7 +2577,7 @@ function createFormControl(props = {}) {
                 delayError: options.delayError,
             });
     };
-    const setFieldValues = (name, value, options, skipClone = false, skipRender = false) => {
+    const setFieldValues = (name, value, options, skipClone = false, skipRender = false, skipValueRender = false) => {
         if (_names.array.has(name)) {
             _subjects.array.next({
                 name,
@@ -2500,8 +2595,8 @@ function createFormControl(props = {}) {
                 isObject(fieldValue) ||
                 (field && !field._f)) &&
                 !isDateObject(fieldValue)
-                ? setFieldValues(fieldName, fieldValue, options, skipClone, skipRender)
-                : setFieldValue(fieldName, fieldValue, options, skipClone, skipRender);
+                ? setFieldValues(fieldName, fieldValue, options, skipClone, skipRender, skipValueRender)
+                : setFieldValue(fieldName, fieldValue, options, skipClone, skipRender, skipValueRender);
         }
     };
     const _setValue = (name, value, options, skipClone, skipStateEmit = false) => {
@@ -2536,11 +2631,12 @@ function createFormControl(props = {}) {
         else {
             const isEmpty = (Array.isArray(cloneValue) && !cloneValue.length) ||
                 isEmptyObject(cloneValue);
+            const skipValueRender = !isValueUnchanged && !skipStateEmit;
             if (!field || field._f || isNullOrUndefined(cloneValue) || isEmpty) {
-                setFieldValue(name, cloneValue, options, skipClone, skipStateEmit);
+                setFieldValue(name, cloneValue, options, skipClone, skipStateEmit, skipValueRender);
             }
             else {
-                setFieldValues(name, cloneValue, options, skipClone, skipStateEmit);
+                setFieldValues(name, cloneValue, options, skipClone, skipStateEmit, skipValueRender);
             }
         }
         if (!isValueUnchanged && !skipStateEmit) {
@@ -3202,6 +3298,7 @@ function createFormControl(props = {}) {
         _state.watch = !!_options.shouldUnregister;
         _state.keepIsValid = !!keepStateOptions.keepIsValid;
         _state.action = false;
+        _state.actionArrayLengths.clear();
         if (!keepStateOptions.keepErrors) {
             _formState.errors = {};
         }
@@ -3274,6 +3371,7 @@ function createFormControl(props = {}) {
             ...formState,
         };
     };
+    _subjects.state.subscribe({ next: _setFormState });
     const _resetDefaultValues = () => isFunction(_options.defaultValues) &&
         _options.defaultValues().then((values) => {
             reset(values, _options.resetOptions);
@@ -3443,8 +3541,14 @@ function useForm(props = {}) {
     }
     const control = _formControl.current.control;
     control._options = props;
+    const { resyncIfNeeded, snapshot } = useResyncOnReconnect();
     useIsomorphicLayoutEffect(() => {
-        const sub = control._subscribe({
+        const getCurrentFormState = () => ({
+            ...control._formState,
+            defaultValues: control._defaultValues,
+        });
+        resyncIfNeeded(true, getCurrentFormState, updateFormState);
+        const unsubscribe = control._subscribe({
             formState: control._proxyFormState,
             callback: () => updateFormState({
                 ...control._formState,
@@ -3457,8 +3561,11 @@ function useForm(props = {}) {
             isReady: true,
         }));
         control._formState.isReady = true;
-        return sub;
-    }, [control]);
+        return () => {
+            unsubscribe();
+            snapshot(true, getCurrentFormState);
+        };
+    }, [control, resyncIfNeeded, snapshot]);
     React.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
     React.useEffect(() => {
         if (props.mode) {