react-hook-form 7.39.3 → 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);
 }
 
@@ -262,16 +269,41 @@ var generateWatchOutput = (names, _names, formValues, isGlobal) => {
     return formValues;
 };
 
-var isFunction = (value) => typeof value === 'function';
+var isPlainObject = (tempObject) => {
+    const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
+    return (isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
+};
 
-var objectHasFunction = (data) => {
-    for (const key in data) {
-        if (isFunction(data[key])) {
-            return true;
+var isWeb = typeof window !== 'undefined' &&
+    typeof window.HTMLElement !== 'undefined' &&
+    typeof document !== 'undefined';
+
+function cloneObject(data) {
+    let copy;
+    const isArray = Array.isArray(data);
+    if (data instanceof Date) {
+        copy = new Date(data);
+    }
+    else if (data instanceof Set) {
+        copy = new Set(data);
+    }
+    else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) &&
+        (isArray || isObject(data))) {
+        copy = isArray ? [] : {};
+        if (!Array.isArray(data) && !isPlainObject(data)) {
+            copy = data;
+        }
+        else {
+            for (const key in data) {
+                copy[key] = cloneObject(data[key]);
+            }
         }
     }
-    return false;
-};
+    else {
+        return data;
+    }
+    return copy;
+}
 
 /**
  * Custom hook to subscribe to field change and isolate re-rendering at the component level.
@@ -297,19 +329,16 @@ 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) ||
-                    (isObject(fieldValues) && !objectHasFunction(fieldValues))
-                    ? { ...fieldValues }
-                    : Array.isArray(fieldValues)
-                        ? [...fieldValues]
-                        : isUndefined(fieldValues)
-                            ? defaultValue
-                            : fieldValues);
+                updateValue(isUndefined(_name.current) || !isUndefined(fieldValues)
+                    ? cloneObject(fieldValues)
+                    : isUndefined(fieldValues)
+                        ? defaultValue
+                        : fieldValues);
             }
-        }, [control, exact, defaultValue]),
+        },
     });
     const [value, updateValue] = React.useState(isUndefined(defaultValue)
         ? control._getWatch(name)
@@ -562,6 +591,8 @@ var isBoolean = (value) => typeof value === 'boolean';
 
 var isFileInput = (element) => element.type === 'file';
 
+var isFunction = (value) => typeof value === 'function';
+
 var isMessage = (value) => isString(value) || React.isValidElement(value);
 
 var isRadioInput = (element) => element.type === 'radio';
@@ -632,8 +663,8 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
     }
     const inputRef = refs ? refs[0] : ref;
     const setCustomValidity = (message) => {
-        if (shouldUseNativeValidation && isString(message)) {
-            inputRef.setCustomValidity(message);
+        if (shouldUseNativeValidation && inputRef.reportValidity) {
+            inputRef.setCustomValidity(isBoolean(message) ? '' : message || '');
             inputRef.reportValidity();
         }
     };
@@ -804,42 +835,6 @@ function append(data, value) {
     return [...data, ...convertToArrayPayload(value)];
 }
 
-var isPlainObject = (tempObject) => {
-    const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
-    return (isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
-};
-
-var isWeb = typeof window !== 'undefined' &&
-    typeof window.HTMLElement !== 'undefined' &&
-    typeof document !== 'undefined';
-
-function cloneObject(data) {
-    let copy;
-    const isArray = Array.isArray(data);
-    if (data instanceof Date) {
-        copy = new Date(data);
-    }
-    else if (data instanceof Set) {
-        copy = new Set(data);
-    }
-    else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) &&
-        (isArray || isObject(data))) {
-        copy = isArray ? [] : {};
-        if (!Array.isArray(data) && !isPlainObject(data)) {
-            copy = data;
-        }
-        else {
-            for (const key in data) {
-                copy[key] = cloneObject(data[key]);
-            }
-        }
-    }
-    else {
-        return data;
-    }
-    return copy;
-}
-
 var fillEmptyArray = (value) => Array.isArray(value) ? value.map(() => undefined) : undefined;
 
 var getValidationModes = (mode) => ({
@@ -991,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) => {
@@ -1216,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`;
@@ -1226,6 +1220,15 @@ var isRadioOrCheckbox = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
 
 var live = (ref) => isHTMLElement(ref) && ref.isConnected;
 
+var objectHasFunction = (data) => {
+    for (const key in data) {
+        if (isFunction(data[key])) {
+            return true;
+        }
+    }
+    return false;
+};
+
 function markFieldsDirty(data, fields = {}) {
     const isParentNodeArray = Array.isArray(data);
     if (isObject(data) || isParentNodeArray) {
@@ -1406,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);
@@ -1512,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);
@@ -2168,6 +2175,11 @@ function createFormControl(props = {}) {
             }
         }
     };
+    if (isFunction(_options.defaultValues)) {
+        _options.defaultValues().then((values) => {
+            reset(values, _options.resetOptions);
+        });
+    }
     return {
         control: {
             register,
@@ -2181,6 +2193,7 @@ function createFormControl(props = {}) {
             _removeUnmounted,
             _updateFieldArray,
             _getFieldArray,
+            _reset,
             _subjects,
             _proxyFormState,
             get _fields() {
@@ -2278,7 +2291,9 @@ function useForm(props = {}) {
         dirtyFields: {},
         touchedFields: {},
         errors: {},
-        defaultValues: props.defaultValues,
+        defaultValues: isFunction(props.defaultValues)
+            ? undefined
+            : props.defaultValues,
     });
     if (!_formControl.current) {
         _formControl.current = {
@@ -2290,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,
@@ -2298,7 +2313,7 @@ function useForm(props = {}) {
                 };
                 updateFormState({ ...control._formState });
             }
-        }, [control]),
+        },
     });
     React.useEffect(() => {
         if (!control._stateFlags.mount) {
@@ -2311,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]);