react-hook-form 7.78.0 → 7.79.0

package/dist/index.esm.mjs

@@ -249,7 +249,7 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
 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 WeakSet()) {
+function deepEqual(object1, object2, visited = new WeakMap()) {
     if (object1 === object2) {
         return true;
     }
@@ -268,11 +268,16 @@ function deepEqual(object1, object2, visited = new WeakSet()) {
         isEmptyObjectWithCustomPrototype(object2, keys2)) {
         return Object.is(object1, object2);
     }
-    if (visited.has(object1) || visited.has(object2)) {
+    const visitedPairs = visited.get(object1);
+    if (visitedPairs && visitedPairs.has(object2)) {
         return true;
     }
-    visited.add(object1);
-    visited.add(object2);
+    if (visitedPairs) {
+        visitedPairs.add(object2);
+    }
+    else {
+        visited.set(object1, new WeakSet([object2]));
+    }
     for (const key of keys1) {
         const val1 = object1[key];
         if (!(key in object2)) {
@@ -419,6 +424,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,
@@ -455,7 +461,7 @@ function useController(props) {
                 value,
             });
         }
-        _registerProps.current.onChange({
+        return _registerProps.current.onChange({
             target: {
                 value: getEventValue(event),
                 name: name,
@@ -471,15 +477,18 @@ function useController(props) {
         type: EVENTS.BLUR,
     }), [name, control._formValues]);
     const ref = React.useCallback((elm) => {
-        const field = get(control._fields, name);
-        if (field && field._f && elm) {
-            field._f.ref = {
+        if (elm) {
+            _proxyRef.current = {
                 focus: () => isFunction(elm.focus) && elm.focus(),
                 select: () => isFunction(elm.select) && elm.select(),
                 setCustomValidity: (message) => isFunction(elm.setCustomValidity) && elm.setCustomValidity(message),
                 reportValidity: () => isFunction(elm.reportValidity) && elm.reportValidity(),
             };
         }
+        const field = get(control._fields, name);
+        if (field && field._f && elm) {
+            field._f.ref = _proxyRef.current;
+        }
     }, [control._fields, name]);
     const field = React.useMemo(() => ({
         name,
@@ -516,6 +525,12 @@ function useController(props) {
             }
         }
         !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
@@ -1274,7 +1289,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();
         }
     };
@@ -1606,6 +1627,7 @@ function createFormControl(props = {}) {
     };
     const updateErrors = (name, error) => {
         set(_formState.errors, name, error);
+        _formState.errors = { ..._formState.errors };
         _subjects.state.next({
             errors: _formState.errors,
         });
@@ -1663,6 +1685,15 @@ function createFormControl(props = {}) {
                         _subjects.state.next({ ..._formState });
                     }
                 }
+                // When a watched field is re-registered after being unregistered and
+                // its value is restored, trigger a deferred watch broadcast so that
+                // components using watch() re-render with the new value.
+                if (props.shouldUnregister &&
+                    wasUnsetInFormValues &&
+                    !isUndefined(get(_formValues, name)) &&
+                    isWatched(name, _names)) {
+                    _state.watch = true;
+                }
             }
         }
     };
@@ -1727,6 +1758,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) ||
@@ -1762,6 +1794,7 @@ function createFormControl(props = {}) {
                         : set(_formState.errors, name, error)
                     : unset(_formState.errors, name);
             }
+            _formState.errors = { ..._formState.errors };
         }
         else {
             _formState.errors = errors;
@@ -2875,34 +2908,45 @@ var updateAt = (fieldValues, index, value) => {
  */
 function useFieldArray(props) {
     const formControl = useFormControlContext();
-    const { control = formControl, name, keyName = 'id', shouldUnregister, rules, } = props;
-    const [fields, setFields] = React.useState(control._getFieldArray(name));
-    const ids = React.useRef(control._getFieldArray(name).map(generateId));
+    const { control = formControl, name, keyName = 'id', disabled, shouldUnregister, rules, } = props;
+    const [fields, setFields] = React.useState(disabled ? [] : control._getFieldArray(name));
+    const ids = React.useRef(disabled ? [] : 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);
-                }
-                else if (!fieldArrayName) {
-                    setFields([]);
-                    ids.current = [];
+        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);
@@ -2914,6 +2958,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);
@@ -2925,6 +2972,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);
@@ -2936,6 +2986,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);
@@ -2948,6 +3001,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);
@@ -2959,6 +3015,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);
@@ -2970,6 +3029,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]);
@@ -2981,6 +3043,9 @@ function useFieldArray(props) {
         }, true, false);
     };
     const replace = (value) => {
+        if (disabled) {
+            return;
+        }
         const updatedFieldArrayValues = convertToArrayPayload(cloneObject(value));
         ids.current = updatedFieldArrayValues.map(generateId);
         updateValues([...updatedFieldArrayValues]);
@@ -2988,6 +3053,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({
@@ -3048,10 +3116,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);
@@ -3069,16 +3142,26 @@ function useFieldArray(props) {
                 ? updateMounted(name, false)
                 : control.unregister(name);
         };
-    }, [name, control, keyName, shouldUnregister]);
+    }, [name, control, keyName, 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,
             [keyName]: ids.current[index] || generateId(),
@@ -3118,6 +3201,7 @@ function useFieldArray(props) {
 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),
@@ -3127,7 +3211,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,