react-hook-form 7.18.0-next.0 → 7.18.0

package/dist/index.esm.js

@@ -101,7 +101,13 @@ var shouldRenderFormState = (formStateData, _proxyFormState, isRoot) => {
             (!isRoot || VALIDATION_MODE.all)));
 };
 
-var convertToArrayPayload = (value) => Array.isArray(value) ? value : [value];
+var convertToArrayPayload = (value) => (Array.isArray(value) ? value : [value]);
+
+var shouldSubscribeByName = (name, signalName) => !name ||
+    !signalName ||
+    convertToArrayPayload(name).some((currentName) => currentName &&
+        (currentName.startsWith(signalName) ||
+            signalName.startsWith(currentName)));
 
 const tearDown = (_unsubscribe) => {
     if (_unsubscribe.current) {
@@ -149,12 +155,11 @@ function useFormState(props) {
     _name.current = name;
     useSubscribe({
         disabled,
-        callback: (formState) => (!_name.current ||
-            !formState.name ||
-            convertToArrayPayload(_name.current).includes(formState.name)) &&
+        callback: (formState) => shouldSubscribeByName(_name.current, formState.name) &&
             shouldRenderFormState(formState, _localProxyFormState.current) &&
             updateFormState(Object.assign(Object.assign({}, control._formState), formState)),
         subject: control._subjects.state,
+        skipEarlySubscription: true,
     });
     return getProxyFormState(formState, control._proxyFormState, _localProxyFormState.current, false);
 }
@@ -173,6 +178,7 @@ function useController(props) {
         subject: control._subjects.control,
         callback: (data) => (!data.name || _name.current === data.name) &&
             setInputStateValue(get(data.values, _name.current)),
+        skipEarlySubscription: true,
     });
     const registerProps = control.register(name, Object.assign(Object.assign({}, props.rules), { value }));
     const updateMounted = React.useCallback((name, value) => {
@@ -462,6 +468,15 @@ const useFieldArray = (props) => {
                 }
             }
         }
+        control._executeSchema([name]).then((result) => {
+            const error = get(result.errors, name);
+            if (error && error.type && !get(control._formState.errors, name)) {
+                set(control._formState.errors, name, error);
+                control._subjects.state.next({
+                    errors: control._formState.errors,
+                });
+            }
+        });
         control._subjects.watch.next({
             name,
             values: control._formValues,
@@ -519,6 +534,60 @@ function cloneObject(data) {
     return copy;
 }
 
+function createSubscription() {
+    let tearDowns = [];
+    const add = (tearDown) => {
+        tearDowns.push(tearDown);
+    };
+    const unsubscribe = () => {
+        for (const teardown of tearDowns) {
+            teardown();
+        }
+        tearDowns = [];
+    };
+    return {
+        add,
+        unsubscribe,
+    };
+}
+function createSubscriber(observer, subscription) {
+    let closed = false;
+    subscription.add(() => (closed = true));
+    const next = (value) => {
+        if (!closed) {
+            observer.next(value);
+        }
+    };
+    return {
+        next,
+    };
+}
+function createSubject() {
+    let _observers = [];
+    const next = (value) => {
+        for (const observer of _observers) {
+            observer.next(value);
+        }
+    };
+    const subscribe = (observer) => {
+        const subscription = createSubscription();
+        const subscriber = createSubscriber(observer, subscription);
+        _observers.push(subscriber);
+        return subscription;
+    };
+    const unsubscribe = () => {
+        _observers = [];
+    };
+    return {
+        get observers() {
+            return _observers;
+        },
+        next,
+        subscribe,
+        unsubscribe,
+    };
+}
+
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
 function deepEqual(object1, object2) {
@@ -562,6 +631,8 @@ var getValidationModes = (mode) => ({
 
 var isBoolean = (value) => typeof value === 'boolean';
 
+var isFileInput = (element) => element.type === 'file';
+
 var isHTMLElement = (value) => value instanceof HTMLElement;
 
 var isMultipleSelect = (element) => element.type === `select-multiple`;
@@ -576,53 +647,7 @@ var isWeb = typeof window !== 'undefined' &&
     typeof window.HTMLElement !== 'undefined' &&
     typeof document !== 'undefined';
 
-var live = (ref) => !isHTMLElement(ref) || !document.contains(ref);
-
-class Subscription {
-    constructor() {
-        this.tearDowns = [];
-    }
-    add(tearDown) {
-        this.tearDowns.push(tearDown);
-    }
-    unsubscribe() {
-        for (const teardown of this.tearDowns) {
-            teardown();
-        }
-        this.tearDowns = [];
-    }
-}
-class Subscriber {
-    constructor(observer, subscription) {
-        this.observer = observer;
-        this.closed = false;
-        subscription.add(() => (this.closed = true));
-    }
-    next(value) {
-        if (!this.closed) {
-            this.observer.next(value);
-        }
-    }
-}
-class Subject {
-    constructor() {
-        this.observers = [];
-    }
-    next(value) {
-        for (const observer of this.observers) {
-            observer.next(value);
-        }
-    }
-    subscribe(observer) {
-        const subscription = new Subscription();
-        const subscriber = new Subscriber(observer, subscription);
-        this.observers.push(subscriber);
-        return subscription;
-    }
-    unsubscribe() {
-        this.observers = [];
-    }
-}
+var live = (ref) => isHTMLElement(ref) && document.contains(ref);
 
 function baseGet(object, updatePath) {
     const length = updatePath.slice(0, -1).length;
@@ -663,8 +688,6 @@ function unset(object, path) {
     return object;
 }
 
-var isFileInput = (element) => element.type === 'file';
-
 const defaultResult = {
     value: false,
     isValid: false,
@@ -758,6 +781,35 @@ var hasValidation = (options) => options.mount &&
         options.pattern ||
         options.validate);
 
+function schemaErrorLookup(errors, _fields, name) {
+    const error = get(errors, name);
+    if (error || isKey(name)) {
+        return {
+            error,
+            name,
+        };
+    }
+    const names = name.split('.');
+    while (names.length) {
+        const fieldName = names.join('.');
+        const field = get(_fields, fieldName);
+        const foundError = get(errors, fieldName);
+        if (field && !Array.isArray(field) && name !== fieldName) {
+            return { name };
+        }
+        if (foundError && foundError.type) {
+            return {
+                name: fieldName,
+                error: foundError,
+            };
+        }
+        names.pop();
+    }
+    return {
+        name,
+    };
+}
+
 function deepMerge(target, source) {
     if (isPrimitive(target) || isPrimitive(source)) {
         return source;
@@ -1027,10 +1079,10 @@ function createFormControl(props = {}) {
         errors: false,
     };
     const _subjects = {
-        watch: new Subject(),
-        control: new Subject(),
-        array: new Subject(),
-        state: new Subject(),
+        watch: createSubject(),
+        control: createSubject(),
+        array: createSubject(),
+        state: createSubject(),
     };
     const validationModeBeforeSubmit = getValidationModes(_options.mode);
     const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
@@ -1047,7 +1099,7 @@ function createFormControl(props = {}) {
         let isValid = false;
         if (_proxyFormState.isValid) {
             isValid = _options.resolver
-                ? isEmptyObject((await executeResolver()).errors)
+                ? isEmptyObject((await _executeSchema()).errors)
                 : await executeBuildInValidation(_fields, true);
             if (!shouldSkipRender && isValid !== _formState.isValid) {
                 _formState.isValid = isValid;
@@ -1166,11 +1218,11 @@ function createFormControl(props = {}) {
             validateFields = {};
         }
     };
-    const executeResolver = async (name) => _options.resolver
+    const _executeSchema = async (name) => _options.resolver
         ? await _options.resolver(Object.assign({}, _formValues), _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation))
         : {};
-    const executeResolverValidation = async (names) => {
-        const { errors } = await executeResolver();
+    const executeSchemaAndUpdateState = async (names) => {
+        const { errors } = await _executeSchema();
         if (names) {
             for (const name of names) {
                 const error = get(errors, name);
@@ -1216,7 +1268,9 @@ function createFormControl(props = {}) {
         for (const name of _names.unMount) {
             const field = get(_fields, name);
             field &&
-                (field._f.refs ? field._f.refs.every(live) : live(field._f.ref)) &&
+                (field._f.refs
+                    ? field._f.refs.every((ref) => !live(ref))
+                    : !live(field._f.ref)) &&
                 unregister(name);
         }
         _names.unMount = new Set();
@@ -1239,7 +1293,7 @@ function createFormControl(props = {}) {
         isGlobal && (_names.watchAll = true);
         return fieldValues;
     };
-    const _getFieldArray = (name) => get(_stateFlags.mount ? _formValues : _defaultValues, name, []);
+    const _getFieldArray = (name) => get(_stateFlags.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get(_defaultValues, name, []) : []);
     const setFieldValue = (name, value, options = {}, shouldRender) => {
         const field = get(_fields, name);
         let fieldValue = value;
@@ -1251,7 +1305,10 @@ function createFormControl(props = {}) {
                     isWeb && isHTMLElement(fieldReference.ref) && isNullOrUndefined(value)
                         ? ''
                         : value;
-                if (isMultipleSelect(fieldReference.ref)) {
+                if (isFileInput(fieldReference.ref) && !isString(fieldValue)) {
+                    fieldReference.ref.files = fieldValue;
+                }
+                else if (isMultipleSelect(fieldReference.ref)) {
                     [...fieldReference.ref.options].forEach((selectRef) => (selectRef.selected = fieldValue.includes(selectRef.value)));
                 }
                 else if (fieldReference.refs) {
@@ -1362,18 +1419,11 @@ function createFormControl(props = {}) {
                     isValidating: true,
                 });
             if (_options.resolver) {
-                const { errors } = await executeResolver([name]);
-                error = get(errors, name);
-                if (isCheckBoxInput(target) && !error) {
-                    const parentNodeName = getNodeParentName(name);
-                    const parentField = get(_fields, parentNodeName);
-                    if (Array.isArray(parentField) &&
-                        parentField.every((field) => field._f && isCheckBoxInput(field._f.ref))) {
-                        const parentError = get(errors, parentNodeName, {});
-                        parentError.type && (error = parentError);
-                        name = parentNodeName;
-                    }
-                }
+                const { errors } = await _executeSchema([name]);
+                const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
+                const errorLookupResult = schemaErrorLookup(errors, _fields, previousErrorLookupResult.name || name);
+                error = errorLookupResult.error;
+                name = errorLookupResult.name;
                 isValid = isEmptyObject(errors);
             }
             else {
@@ -1392,7 +1442,7 @@ function createFormControl(props = {}) {
             isValidating: true,
         });
         if (_options.resolver) {
-            const errors = await executeResolverValidation(isUndefined(name) ? name : fieldNames);
+            const errors = await executeSchemaAndUpdateState(isUndefined(name) ? name : fieldNames);
             isValid = isEmptyObject(errors);
             validationResult = name
                 ? !fieldNames.some((name) => get(errors, name))
@@ -1408,7 +1458,10 @@ function createFormControl(props = {}) {
         else {
             validationResult = isValid = await executeBuildInValidation(_fields);
         }
-        _subjects.state.next(Object.assign(Object.assign({}, (!isString(name) || isValid !== _formState.isValid ? {} : { name })), { errors: _formState.errors, isValid, isValidating: false }));
+        _subjects.state.next(Object.assign(Object.assign(Object.assign({}, (!isString(name) ||
+            (_proxyFormState.isValid && isValid !== _formState.isValid)
+            ? {}
+            : { name })), (_options.resolver ? { isValid } : {})), { errors: _formState.errors, isValidating: false }));
         options.shouldFocus &&
             !validationResult &&
             focusFieldBy(_fields, (key) => get(_formState.errors, key), name ? fieldNames : _names.mount);
@@ -1428,6 +1481,7 @@ function createFormControl(props = {}) {
             : (_formState.errors = {});
         _subjects.state.next({
             errors: _formState.errors,
+            isValid: true,
         });
     };
     const setError = (name, error, options) => {
@@ -1502,7 +1556,7 @@ function createFormControl(props = {}) {
                         field = {
                             _f: isRadioOrCheckbox
                                 ? Object.assign(Object.assign({}, field._f), { refs: [
-                                        ...compact(field._f.refs || []).filter((ref) => isHTMLElement(ref) && document.contains(ref)),
+                                        ...compact(field._f.refs || []).filter(live),
                                         fieldRef,
                                     ], ref: { type: fieldRef.type, name } }) : Object.assign(Object.assign({}, field._f), { ref: fieldRef }),
                         };
@@ -1534,7 +1588,7 @@ function createFormControl(props = {}) {
         });
         try {
             if (_options.resolver) {
-                const { errors, values } = await executeResolver();
+                const { errors, values } = await _executeSchema();
                 _formState.errors = errors;
                 fieldValues = values;
             }
@@ -1594,7 +1648,11 @@ function createFormControl(props = {}) {
                     }
                 }
             }
-            _formValues = props.shouldUnregister ? {} : cloneUpdatedValues;
+            _formValues = props.shouldUnregister
+                ? keepStateOptions.keepDefaultValues
+                    ? cloneObject(_defaultValues)
+                    : {}
+                : cloneUpdatedValues;
             _fields = {};
             _subjects.control.next({
                 values: hasUpdatedFormValues ? cloneUpdatedValues : _defaultValues,
@@ -1619,14 +1677,16 @@ function createFormControl(props = {}) {
             isDirty: keepStateOptions.keepDirty
                 ? _formState.isDirty
                 : keepStateOptions.keepDefaultValues
-                    ? deepEqual(formValues, _defaultValues)
+                    ? !deepEqual(formValues, _defaultValues)
                     : false,
             isSubmitted: keepStateOptions.keepIsSubmitted
                 ? _formState.isSubmitted
                 : false,
             dirtyFields: keepStateOptions.keepDirty
                 ? _formState.dirtyFields
-                : {},
+                : (keepStateOptions.keepDefaultValues && formValues
+                    ? Object.entries(formValues).reduce((previous, [key, value]) => (Object.assign(Object.assign({}, previous), { [key]: value !== get(_defaultValues, key) })), {})
+                    : {}),
             touchedFields: keepStateOptions.keepTouched
                 ? _formState.touchedFields
                 : {},
@@ -1640,11 +1700,15 @@ function createFormControl(props = {}) {
             !_proxyFormState.isValid || !!keepStateOptions.keepIsValid;
         _stateFlags.watch = !!props.shouldUnregister;
     };
-    const setFocus = (name) => get(_fields, name)._f.ref.focus();
+    const setFocus = (name) => {
+        const field = get(_fields, name)._f;
+        (field.ref.focus ? field.ref : field.refs[0]).focus();
+    };
     return {
         control: {
             register,
             unregister,
+            _executeSchema,
             _getWatch,
             _getDirty,
             _updateValid,
@@ -1751,6 +1815,7 @@ function useForm(props = {}) {
         }
         control._removeUnmounted();
     });
+    React.useEffect(() => () => Object.values(control._subjects).forEach((subject) => subject.unsubscribe()), [control]);
     _formControl.current.formState = getProxyFormState(formState, control._proxyFormState);
     return _formControl.current;
 }
@@ -1763,13 +1828,8 @@ function useWatch(props) {
     useSubscribe({
         disabled,
         subject: control._subjects.watch,
-        callback: ({ name }) => {
-            if (!_name.current ||
-                !name ||
-                convertToArrayPayload(_name.current).some((currentName) => name &&
-                    currentName &&
-                    (name.startsWith(currentName) ||
-                        currentName.startsWith(name)))) {
+        callback: (formState) => {
+            if (shouldSubscribeByName(_name.current, formState.name)) {
                 control._stateFlags.mount = true;
                 const fieldValues = control._getWatch(_name.current, defaultValue);
                 updateValue(isObject(fieldValues)