react-hook-form 7.40.0-next.0 → 7.40.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.next,
+                next: _props.current.callback,
             });
         return () => {
             subscription && subscription.unsubscribe();
@@ -228,13 +228,13 @@ function useFormState(props) {
     _name.current = name;
     useSubscribe({
         disabled,
-        next: (value) => _mounted.current &&
+        callback: React.useCallback((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(() => {
@@ -256,14 +256,12 @@ function useFormState(props) {
 var isString = (value) => typeof value === 'string';
 
 var generateWatchOutput = (names, _names, formValues, isGlobal) => {
-    const isArray = Array.isArray(names);
     if (isString(names)) {
         isGlobal && _names.watch.add(names);
         return get(formValues, names);
     }
-    if (isArray) {
-        return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName),
-            get(formValues, fieldName)));
+    if (Array.isArray(names)) {
+        return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName), get(formValues, fieldName)));
     }
     isGlobal && (_names.watchAll = true);
     return formValues;
@@ -329,14 +327,10 @@ function useWatch(props) {
     useSubscribe({
         disabled,
         subject: control._subjects.watch,
-        next: (formState) => {
+        callback: (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)
-                    ? cloneObject(fieldValues)
-                    : isUndefined(fieldValues)
-                        ? defaultValue
-                        : fieldValues);
+                updateValue(isUndefined(fieldValues) ? defaultValue : cloneObject(fieldValues));
             }
         },
     });
@@ -986,16 +980,17 @@ function useFieldArray(props) {
     control._names.array.add(name);
     props.rules &&
         control.register(name, props.rules);
-    useSubscribe({
-        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);
-                }
+    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,
         subject: control._subjects.array,
     });
     const updateValues = React.useCallback((updatedFieldArrayValues) => {
@@ -1120,7 +1115,7 @@ function useFieldArray(props) {
             values: control._formValues,
         });
         control._names.focus &&
-            focusFieldBy(control._fields, (key) => !!key && key.startsWith(control._names.focus));
+            focusFieldBy(control._fields, (key) => !!key && key.startsWith(control._names.focus || ''));
         control._names.focus = '';
         control._proxyFormState.isValid && control._updateValid();
     }, [fields, name, control]);
@@ -1210,8 +1205,8 @@ function deepEqual(object1, object2) {
 
 var isHTMLElement = (value) => {
     const owner = value ? value.ownerDocument : 0;
-    return (value instanceof
-        (owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement));
+    const ElementClass = owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement;
+    return value instanceof ElementClass;
 };
 
 var isMultipleSelect = (element) => element.type === `select-multiple`;
@@ -1321,7 +1316,7 @@ var getResolverOptions = (fieldsNames, _fields, criteriaMode, shouldUseNativeVal
 };
 
 var getRuleValue = (rule) => isUndefined(rule)
-    ? undefined
+    ? rule
     : isRegex(rule)
         ? rule.source
         : isObject(rule)
@@ -1409,9 +1404,7 @@ function createFormControl(props = {}) {
         errors: {},
     };
     let _fields = {};
-    let _defaultValues = isObject(_options.defaultValues)
-        ? cloneObject(_options.defaultValues) || {}
-        : {};
+    let _defaultValues = cloneObject(_options.defaultValues) || {};
     let _formValues = _options.shouldUnregister
         ? {}
         : cloneObject(_defaultValues);
@@ -1428,7 +1421,6 @@ function createFormControl(props = {}) {
     };
     let delayErrorCallback;
     let timer = 0;
-    let validateFields = {};
     const _proxyFormState = {
         isDirty: false,
         dirtyFields: false,
@@ -1450,9 +1442,8 @@ function createFormControl(props = {}) {
         timer = window.setTimeout(callback, wait);
     };
     const _updateValid = async () => {
-        let isValid = false;
         if (_proxyFormState.isValid) {
-            isValid = _options.resolver
+            const isValid = _options.resolver
                 ? isEmptyObject((await _executeSchema()).errors)
                 : await executeBuiltInValidation(_fields, true);
             if (isValid !== _formState.isValid) {
@@ -1462,8 +1453,12 @@ function createFormControl(props = {}) {
                 });
             }
         }
-        return isValid;
     };
+    const _updateIsValidating = (value) => _proxyFormState.isValidating &&
+        value !== _formState.isValidating &&
+        _subjects.state.next({
+            isValidating: value,
+        });
     const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
         if (args && method) {
             _stateFlags.action = true;
@@ -1471,8 +1466,7 @@ function createFormControl(props = {}) {
                 const fieldValues = method(get(_fields, name), args.argA, args.argB);
                 shouldSetValues && set(_fields, name, fieldValues);
             }
-            if (_proxyFormState.errors &&
-                shouldUpdateFieldsAndState &&
+            if (shouldUpdateFieldsAndState &&
                 Array.isArray(get(_formState.errors, name))) {
                 const errors = method(get(_formState.errors, name), args.argA, args.argB);
                 shouldSetValues && set(_formState.errors, name, errors);
@@ -1488,6 +1482,7 @@ function createFormControl(props = {}) {
                 _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
             }
             _subjects.state.next({
+                name,
                 isDirty: _getDirty(name, values),
                 dirtyFields: _formState.dirtyFields,
                 errors: _formState.errors,
@@ -1522,20 +1517,22 @@ function createFormControl(props = {}) {
         const output = {
             name,
         };
-        if (_proxyFormState.isDirty) {
-            isPreviousDirty = _formState.isDirty;
-            _formState.isDirty = output.isDirty = _getDirty();
-            shouldUpdateField = isPreviousDirty !== output.isDirty;
-        }
-        if (_proxyFormState.dirtyFields && (!isBlurEvent || shouldDirty)) {
-            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;
+        if (!isBlurEvent || shouldDirty) {
+            if (_proxyFormState.isDirty) {
+                isPreviousDirty = _formState.isDirty;
+                _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;
+            }
         }
         if (isBlurEvent) {
             const isPreviousFieldTouched = get(_formState.touchedFields, name);
@@ -1582,18 +1579,9 @@ function createFormControl(props = {}) {
             };
             _subjects.state.next(updatedFormState);
         }
-        validateFields[name]--;
-        if (_proxyFormState.isValidating &&
-            !Object.values(validateFields).some((v) => v)) {
-            _subjects.state.next({
-                isValidating: false,
-            });
-            validateFields = {};
-        }
+        _updateIsValidating(false);
     };
-    const _executeSchema = async (name) => _options.resolver
-        ? await _options.resolver({ ..._formValues }, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation))
-        : {};
+    const _executeSchema = async (name) => await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
     const executeSchemaAndUpdateState = async (names) => {
         const { errors } = await _executeSchema();
         if (names) {
@@ -1651,18 +1639,15 @@ function createFormControl(props = {}) {
     };
     const _getDirty = (name, data) => (name && data && set(_formValues, name, data),
         !deepEqual(getValues(), _defaultValues));
-    const _getWatch = (names, defaultValue, isGlobal) => {
-        const fieldValues = {
-            ...(_stateFlags.mount
-                ? _formValues
-                : isUndefined(defaultValue)
-                    ? _defaultValues
-                    : isString(names)
-                        ? { [names]: defaultValue }
-                        : defaultValue),
-        };
-        return generateWatchOutput(names, _names, fieldValues, isGlobal);
-    };
+    const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
+        ...(_stateFlags.mount
+            ? _formValues
+            : isUndefined(defaultValue)
+                ? _defaultValues
+                : isString(names)
+                    ? { [names]: defaultValue }
+                    : defaultValue),
+    }, isGlobal);
     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);
@@ -1757,12 +1742,11 @@ function createFormControl(props = {}) {
         const target = event.target;
         let name = target.name;
         const field = get(_fields, name);
+        const getCurrentFieldValue = () => target.type ? getFieldValue(field._f) : getEventValue(event);
         if (field) {
             let error;
             let isValid;
-            const fieldValue = target.type
-                ? getFieldValue(field._f)
-                : getEventValue(event);
+            const fieldValue = getCurrentFieldValue();
             const isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
             const shouldSkipValidation = (!hasValidation(field._f) &&
                 !_options.resolver &&
@@ -1791,12 +1775,7 @@ function createFormControl(props = {}) {
                     _subjects.state.next({ name, ...(watched ? {} : fieldState) }));
             }
             !isBlurEvent && watched && _subjects.state.next({});
-            validateFields[name] = validateFields[name]
-                ? validateFields[name] + 1
-                : 1;
-            _subjects.state.next({
-                isValidating: true,
-            });
+            _updateIsValidating(true);
             if (_options.resolver) {
                 const { errors } = await _executeSchema([name]);
                 const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
@@ -1807,20 +1786,28 @@ function createFormControl(props = {}) {
             }
             else {
                 error = (await validateField(field, get(_formValues, name), shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
-                _updateValid();
+                if (error) {
+                    isValid = false;
+                }
+                else if (_proxyFormState.isValid) {
+                    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 = {}) => {
         let isValid;
         let validationResult;
         const fieldNames = convertToArrayPayload(name);
-        _subjects.state.next({
-            isValidating: true,
-        });
+        _updateIsValidating(true);
         if (_options.resolver) {
             const errors = await executeSchemaAndUpdateState(isUndefined(name) ? name : fieldNames);
             isValid = isEmptyObject(errors);
@@ -1892,7 +1879,7 @@ function createFormControl(props = {}) {
     };
     const watch = (name, defaultValue) => isFunction(name)
         ? _subjects.watch.subscribe({
-            next: (info) => name(_getWatch(undefined, defaultValue), info),
+            next: (payload) => name(_getWatch(undefined, defaultValue), payload),
         })
         : _getWatch(name, defaultValue, true);
     const unregister = (name, options = {}) => {
@@ -1977,9 +1964,7 @@ function createFormControl(props = {}) {
                                     refs: [
                                         ...refs.filter(live),
                                         fieldRef,
-                                        ...(!!Array.isArray(get(_defaultValues, name))
-                                            ? [{}]
-                                            : []),
+                                        ...(Array.isArray(get(_defaultValues, name)) ? [{}] : []),
                                     ],
                                     ref: { type: fieldRef.type, name },
                                 }
@@ -2175,11 +2160,6 @@ function createFormControl(props = {}) {
             }
         }
     };
-    if (isFunction(_options.defaultValues)) {
-        _options.defaultValues().then((values) => {
-            reset(values, _options.resetOptions);
-        });
-    }
     return {
         control: {
             register,
@@ -2193,7 +2173,6 @@ function createFormControl(props = {}) {
             _removeUnmounted,
             _updateFieldArray,
             _getFieldArray,
-            _reset,
             _subjects,
             _proxyFormState,
             get _fields() {
@@ -2291,9 +2270,7 @@ function useForm(props = {}) {
         dirtyFields: {},
         touchedFields: {},
         errors: {},
-        defaultValues: isFunction(props.defaultValues)
-            ? undefined
-            : props.defaultValues,
+        defaultValues: props.defaultValues,
     });
     if (!_formControl.current) {
         _formControl.current = {
@@ -2305,7 +2282,7 @@ function useForm(props = {}) {
     control._options = props;
     useSubscribe({
         subject: control._subjects.state,
-        next: (value) => {
+        callback: React.useCallback((value) => {
             if (shouldRenderFormState(value, control._proxyFormState, true)) {
                 control._formState = {
                     ...control._formState,
@@ -2313,7 +2290,7 @@ function useForm(props = {}) {
                 };
                 updateFormState({ ...control._formState });
             }
-        },
+        }, [control]),
     });
     React.useEffect(() => {
         if (!control._stateFlags.mount) {
@@ -2326,11 +2303,6 @@ 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]);