react-hook-form 7.40.0 → 7.41.1

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();
@@ -218,6 +218,7 @@ function useFormState(props) {
     const _mounted = React.useRef(true);
     const _localProxyFormState = React.useRef({
         isDirty: false,
+        isLoading: false,
         dirtyFields: false,
         touchedFields: false,
         isValidating: false,
@@ -228,13 +229,13 @@ 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(() => {
@@ -255,10 +256,10 @@ function useFormState(props) {
 
 var isString = (value) => typeof value === 'string';
 
-var generateWatchOutput = (names, _names, formValues, isGlobal) => {
+var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
     if (isString(names)) {
         isGlobal && _names.watch.add(names);
-        return get(formValues, names);
+        return get(formValues, names, defaultValue);
     }
     if (Array.isArray(names)) {
         return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName), get(formValues, fieldName)));
@@ -327,16 +328,13 @@ function useWatch(props) {
     useSubscribe({
         disabled,
         subject: control._subjects.watch,
-        callback: (formState) => {
+        next: (formState) => {
             if (shouldSubscribeByName(_name.current, formState.name, exact)) {
-                const fieldValues = generateWatchOutput(_name.current, control._names, formState.values || control._formValues);
-                updateValue(isUndefined(fieldValues) ? defaultValue : cloneObject(fieldValues));
+                updateValue(cloneObject(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, defaultValue)));
             }
         },
     });
-    const [value, updateValue] = React.useState(isUndefined(defaultValue)
-        ? control._getWatch(name)
-        : defaultValue);
+    const [value, updateValue] = React.useState(control._getWatch(name, defaultValue));
     React.useEffect(() => control._removeUnmounted());
     return value;
 }
@@ -568,6 +566,14 @@ var getFocusFieldName = (name, index, options = {}) => options.shouldFocus || is
         `${name}.${isUndefined(options.focusIndex) ? index : options.focusIndex}.`
     : '';
 
+var getValidationModes = (mode) => ({
+    isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
+    isOnBlur: mode === VALIDATION_MODE.onBlur,
+    isOnChange: mode === VALIDATION_MODE.onChange,
+    isOnAll: mode === VALIDATION_MODE.all,
+    isOnTouch: mode === VALIDATION_MODE.onTouched,
+});
+
 var isWatched = (name, _names, isBlurEvent) => !isBlurEvent &&
     (_names.watchAll ||
         _names.watch.has(name) ||
@@ -666,7 +672,9 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
     const isRadio = isRadioInput(ref);
     const isCheckBox = isCheckBoxInput(ref);
     const isRadioOrCheckbox = isRadio || isCheckBox;
-    const isEmpty = ((valueAsNumber || isFileInput(ref)) && !ref.value) ||
+    const isEmpty = ((valueAsNumber || isFileInput(ref)) &&
+        isUndefined(ref.value) &&
+        isUndefined(inputValue)) ||
         inputValue === '' ||
         (Array.isArray(inputValue) && !inputValue.length);
     const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
@@ -831,14 +839,6 @@ function append(data, value) {
 
 var fillEmptyArray = (value) => Array.isArray(value) ? value.map(() => undefined) : undefined;
 
-var getValidationModes = (mode) => ({
-    isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
-    isOnBlur: mode === VALIDATION_MODE.onBlur,
-    isOnChange: mode === VALIDATION_MODE.onChange,
-    isOnAll: mode === VALIDATION_MODE.all,
-    isOnTouch: mode === VALIDATION_MODE.onTouched,
-});
-
 function insert(data, index, value) {
     return [
         ...data.slice(0, index),
@@ -980,17 +980,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) => {
@@ -1205,8 +1204,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`;
@@ -1386,14 +1385,16 @@ const defaultOptions = {
     reValidateMode: VALIDATION_MODE.onChange,
     shouldFocusError: true,
 };
-function createFormControl(props = {}) {
+function createFormControl(props = {}, flushRootRender) {
     let _options = {
         ...defaultOptions,
         ...props,
     };
+    const shouldCaptureDirtyFields = props.resetOptions && props.resetOptions.keepDirtyValues;
     let _formState = {
         submitCount: 0,
         isDirty: false,
+        isLoading: true,
         isValidating: false,
         isSubmitted: false,
         isSubmitting: false,
@@ -1404,7 +1405,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);
@@ -1455,7 +1458,6 @@ function createFormControl(props = {}) {
         }
     };
     const _updateIsValidating = (value) => _proxyFormState.isValidating &&
-        value !== _formState.isValidating &&
         _subjects.state.next({
             isValidating: value,
         });
@@ -1523,16 +1525,16 @@ function createFormControl(props = {}) {
                 _formState.isDirty = output.isDirty = _getDirty();
                 shouldUpdateField = isPreviousDirty !== output.isDirty;
             }
-            if (_proxyFormState.dirtyFields) {
-                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;
-                shouldUpdateField =
-                    shouldUpdateField || isPreviousDirty !== !isCurrentFieldPristine;
-            }
+            const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
+            isPreviousDirty = get(_formState.dirtyFields, name);
+            isCurrentFieldPristine
+                ? unset(_formState.dirtyFields, name)
+                : set(_formState.dirtyFields, name, true);
+            output.dirtyFields = _formState.dirtyFields;
+            shouldUpdateField =
+                shouldUpdateField ||
+                    (_proxyFormState.dirtyFields &&
+                        isPreviousDirty !== !isCurrentFieldPristine);
         }
         if (isBlurEvent) {
             const isPreviousFieldTouched = get(_formState.touchedFields, name);
@@ -1647,7 +1649,7 @@ function createFormControl(props = {}) {
                 : isString(names)
                     ? { [names]: defaultValue }
                     : defaultValue),
-    }, isGlobal);
+    }, isGlobal, defaultValue);
     const _getFieldArray = (name) => compact(get(_stateFlags.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get(_defaultValues, name, []) : []));
     const setFieldValue = (name, value, options = {}) => {
         const field = get(_fields, name);
@@ -1693,7 +1695,8 @@ function createFormControl(props = {}) {
         }
         (options.shouldDirty || options.shouldTouch) &&
             updateTouchAndDirty(name, fieldValue, options.shouldTouch, options.shouldDirty, true);
-        options.shouldValidate && trigger(name);
+        options.shouldValidate &&
+            trigger(name);
     };
     const setValues = (name, value, options) => {
         for (const fieldKey in value) {
@@ -1737,6 +1740,7 @@ function createFormControl(props = {}) {
         _subjects.watch.next({
             name,
         });
+        !_stateFlags.mount && flushRootRender();
     };
     const onChange = async (event) => {
         const target = event.target;
@@ -1793,14 +1797,9 @@ function createFormControl(props = {}) {
                     isValid = await executeBuiltInValidation(_fields, true);
                 }
             }
-            if (!isPrimitive(fieldValue) || getCurrentFieldValue() === fieldValue) {
-                field._f.deps &&
-                    trigger(field._f.deps);
-                shouldRenderByError(name, isValid, error, fieldState);
-            }
-            else {
-                _updateIsValidating(false);
-            }
+            field._f.deps &&
+                trigger(field._f.deps);
+            shouldRenderByError(name, isValid, error, fieldState);
         }
     };
     const trigger = async (name, options = {}) => {
@@ -2070,7 +2069,7 @@ function createFormControl(props = {}) {
             _defaultValues = updatedValues;
         }
         if (!keepStateOptions.keepValues) {
-            if (keepStateOptions.keepDirtyValues) {
+            if (keepStateOptions.keepDirtyValues || shouldCaptureDirtyFields) {
                 for (const fieldName of _names.mount) {
                     get(_formState.dirtyFields, fieldName)
                         ? set(values, fieldName, get(_formValues, fieldName))
@@ -2117,6 +2116,7 @@ function createFormControl(props = {}) {
             watchAll: false,
             focus: '',
         };
+        !_stateFlags.mount && flushRootRender();
         _stateFlags.mount =
             !_proxyFormState.isValid || !!keepStateOptions.keepIsValid;
         _stateFlags.watch = !!props.shouldUnregister;
@@ -2160,6 +2160,14 @@ function createFormControl(props = {}) {
             }
         }
     };
+    if (isFunction(_options.defaultValues)) {
+        _options.defaultValues().then((values) => {
+            reset(values, _options.resetOptions);
+            _subjects.state.next({
+                isLoading: false,
+            });
+        });
+    }
     return {
         control: {
             register,
@@ -2173,6 +2181,7 @@ function createFormControl(props = {}) {
             _removeUnmounted,
             _updateFieldArray,
             _getFieldArray,
+            _reset,
             _subjects,
             _proxyFormState,
             get _fields() {
@@ -2262,6 +2271,7 @@ function useForm(props = {}) {
     const [formState, updateFormState] = React.useState({
         isDirty: false,
         isValidating: false,
+        isLoading: true,
         isSubmitted: false,
         isSubmitting: false,
         isSubmitSuccessful: false,
@@ -2270,11 +2280,13 @@ function useForm(props = {}) {
         dirtyFields: {},
         touchedFields: {},
         errors: {},
-        defaultValues: props.defaultValues,
+        defaultValues: isFunction(props.defaultValues)
+            ? undefined
+            : props.defaultValues,
     });
     if (!_formControl.current) {
         _formControl.current = {
-            ...createFormControl(props),
+            ...createFormControl(props, () => updateFormState((formState) => ({ ...formState }))),
             formState,
         };
     }
@@ -2282,7 +2294,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,
@@ -2290,7 +2302,7 @@ function useForm(props = {}) {
                 };
                 updateFormState({ ...control._formState });
             }
-        }, [control]),
+        },
     });
     React.useEffect(() => {
         if (!control._stateFlags.mount) {
@@ -2303,6 +2315,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]);