react-hook-form 7.39.4 → 7.40.0-next.0

package/dist/index.esm.mjs

@@ -173,7 +173,7 @@ function useSubscribe(props) {
     React.useEffect(() => {
         const subscription = !props.disabled &&
             _props.current.subject.subscribe({
-                next: _props.current.callback,
+                next: _props.current.next,
             });
         return () => {
             subscription && subscription.unsubscribe();
@@ -228,21 +228,28 @@ function useFormState(props) {
     _name.current = name;
     useSubscribe({
         disabled,
-        callback: React.useCallback((value) => _mounted.current &&
+        next: (value) => _mounted.current &&
             shouldSubscribeByName(_name.current, value.name, exact) &&
             shouldRenderFormState(value, _localProxyFormState.current) &&
             updateFormState({
                 ...control._formState,
                 ...value,
-            }), [control, exact]),
+            }),
         subject: control._subjects.state,
     });
     React.useEffect(() => {
         _mounted.current = true;
+        const isDirty = control._proxyFormState.isDirty && control._getDirty();
+        if (isDirty !== control._formState.isDirty) {
+            control._subjects.state.next({
+                isDirty,
+            });
+        }
+        control._updateValid();
         return () => {
             _mounted.current = false;
         };
-    }, []);
+    }, [control]);
     return getProxyFormState(formState, control, _localProxyFormState.current, false);
 }
 
@@ -322,7 +329,7 @@ function useWatch(props) {
     useSubscribe({
         disabled,
         subject: control._subjects.watch,
-        callback: React.useCallback((formState) => {
+        next: (formState) => {
             if (shouldSubscribeByName(_name.current, formState.name, exact)) {
                 const fieldValues = generateWatchOutput(_name.current, control._names, formState.values || control._formValues);
                 updateValue(isUndefined(_name.current) || !isUndefined(fieldValues)
@@ -331,7 +338,7 @@ function useWatch(props) {
                         ? defaultValue
                         : fieldValues);
             }
-        }, [control, exact, defaultValue]),
+        },
     });
     const [value, updateValue] = React.useState(isUndefined(defaultValue)
         ? control._getWatch(name)
@@ -979,17 +986,16 @@ function useFieldArray(props) {
     control._names.array.add(name);
     props.rules &&
         control.register(name, props.rules);
-    const callback = React.useCallback(({ values, name: fieldArrayName, }) => {
-        if (fieldArrayName === _name.current || !fieldArrayName) {
-            const fieldValues = get(values, _name.current);
-            if (Array.isArray(fieldValues)) {
-                setFields(fieldValues);
-                ids.current = fieldValues.map(generateId);
-            }
-        }
-    }, []);
     useSubscribe({
-        callback,
+        next: ({ values, name: fieldArrayName, }) => {
+            if (fieldArrayName === _name.current || !fieldArrayName) {
+                const fieldValues = get(values, _name.current);
+                if (Array.isArray(fieldValues)) {
+                    setFields(fieldValues);
+                    ids.current = fieldValues.map(generateId);
+                }
+            }
+        },
         subject: control._subjects.array,
     });
     const updateValues = React.useCallback((updatedFieldArrayValues) => {
@@ -1204,8 +1210,8 @@ function deepEqual(object1, object2) {
 
 var isHTMLElement = (value) => {
     const owner = value ? value.ownerDocument : 0;
-    const ElementClass = owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement;
-    return value instanceof ElementClass;
+    return (value instanceof
+        (owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement));
 };
 
 var isMultipleSelect = (element) => element.type === `select-multiple`;
@@ -1403,7 +1409,9 @@ function createFormControl(props = {}) {
         errors: {},
     };
     let _fields = {};
-    let _defaultValues = cloneObject(_options.defaultValues) || {};
+    let _defaultValues = isObject(_options.defaultValues)
+        ? cloneObject(_options.defaultValues) || {}
+        : {};
     let _formValues = _options.shouldUnregister
         ? {}
         : cloneObject(_defaultValues);
@@ -1509,37 +1517,39 @@ function createFormControl(props = {}) {
         }
     };
     const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
-        let isFieldDirty = false;
+        let shouldUpdateField = false;
+        let isPreviousDirty = false;
         const output = {
             name,
         };
-        const isPreviousFieldTouched = get(_formState.touchedFields, name);
         if (_proxyFormState.isDirty) {
-            const isPreviousFormDirty = _formState.isDirty;
+            isPreviousDirty = _formState.isDirty;
             _formState.isDirty = output.isDirty = _getDirty();
-            isFieldDirty = isPreviousFormDirty !== output.isDirty;
+            shouldUpdateField = isPreviousDirty !== output.isDirty;
         }
         if (_proxyFormState.dirtyFields && (!isBlurEvent || shouldDirty)) {
-            const isPreviousFieldDirty = get(_formState.dirtyFields, name);
+            isPreviousDirty = get(_formState.dirtyFields, name);
             const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
             isCurrentFieldPristine
                 ? unset(_formState.dirtyFields, name)
                 : set(_formState.dirtyFields, name, true);
             output.dirtyFields = _formState.dirtyFields;
-            isFieldDirty =
-                isFieldDirty ||
-                    isPreviousFieldDirty !== get(_formState.dirtyFields, name);
+            shouldUpdateField =
+                shouldUpdateField || isPreviousDirty !== !isCurrentFieldPristine;
         }
-        if (isBlurEvent && !isPreviousFieldTouched) {
-            set(_formState.touchedFields, name, isBlurEvent);
-            output.touchedFields = _formState.touchedFields;
-            isFieldDirty =
-                isFieldDirty ||
-                    (_proxyFormState.touchedFields &&
-                        isPreviousFieldTouched !== isBlurEvent);
+        if (isBlurEvent) {
+            const isPreviousFieldTouched = get(_formState.touchedFields, name);
+            if (!isPreviousFieldTouched) {
+                set(_formState.touchedFields, name, isBlurEvent);
+                output.touchedFields = _formState.touchedFields;
+                shouldUpdateField =
+                    shouldUpdateField ||
+                        (_proxyFormState.touchedFields &&
+                            isPreviousFieldTouched !== isBlurEvent);
+            }
         }
-        isFieldDirty && shouldRender && _subjects.state.next(output);
-        return isFieldDirty ? output : {};
+        shouldUpdateField && shouldRender && _subjects.state.next(output);
+        return shouldUpdateField ? output : {};
     };
     const shouldRenderByError = (name, isValid, error, fieldState) => {
         const previousFieldError = get(_formState.errors, name);
@@ -2165,6 +2175,11 @@ function createFormControl(props = {}) {
             }
         }
     };
+    if (isFunction(_options.defaultValues)) {
+        _options.defaultValues().then((values) => {
+            reset(values, _options.resetOptions);
+        });
+    }
     return {
         control: {
             register,
@@ -2178,6 +2193,7 @@ function createFormControl(props = {}) {
             _removeUnmounted,
             _updateFieldArray,
             _getFieldArray,
+            _reset,
             _subjects,
             _proxyFormState,
             get _fields() {
@@ -2275,7 +2291,9 @@ function useForm(props = {}) {
         dirtyFields: {},
         touchedFields: {},
         errors: {},
-        defaultValues: props.defaultValues,
+        defaultValues: isFunction(props.defaultValues)
+            ? undefined
+            : props.defaultValues,
     });
     if (!_formControl.current) {
         _formControl.current = {
@@ -2287,7 +2305,7 @@ function useForm(props = {}) {
     control._options = props;
     useSubscribe({
         subject: control._subjects.state,
-        callback: React.useCallback((value) => {
+        next: (value) => {
             if (shouldRenderFormState(value, control._proxyFormState, true)) {
                 control._formState = {
                     ...control._formState,
@@ -2295,7 +2313,7 @@ function useForm(props = {}) {
                 };
                 updateFormState({ ...control._formState });
             }
-        }, [control]),
+        },
     });
     React.useEffect(() => {
         if (!control._stateFlags.mount) {
@@ -2308,6 +2326,11 @@ function useForm(props = {}) {
         }
         control._removeUnmounted();
     });
+    React.useEffect(() => {
+        if (props.values && !deepEqual(props.values, control._defaultValues)) {
+            control._reset(props.values, control._options.resetOptions);
+        }
+    }, [props.values, control]);
     React.useEffect(() => {
         formState.submitCount && control._focusError();
     }, [control, formState.submitCount]);