react-hook-form 7.17.4 → 7.19.0-next.0

package/dist/index.esm.js

@@ -105,37 +105,35 @@ var convertToArrayPayload = (value) => (Array.isArray(value) ? value : [value]);
 
 var shouldSubscribeByName = (name, signalName) => !name ||
     !signalName ||
+    name === signalName ||
     convertToArrayPayload(name).some((currentName) => currentName &&
         (currentName.startsWith(signalName) ||
             signalName.startsWith(currentName)));
 
-const tearDown = (_unsubscribe) => {
-    if (_unsubscribe.current) {
-        _unsubscribe.current.unsubscribe();
-        _unsubscribe.current = undefined;
+const tearDown = (_subscription) => {
+    if (_subscription.current) {
+        _subscription.current.unsubscribe();
+        _subscription.current = undefined;
     }
 };
-const updateSubscriptionProps = ({ _unsubscribe, props }) => () => {
+const updateSubscriptionProps = ({ _subscription, props }) => {
     if (props.disabled) {
-        tearDown(_unsubscribe);
+        tearDown(_subscription);
     }
-    else if (!_unsubscribe.current) {
-        _unsubscribe.current = props.subject.subscribe({
+    else if (!_subscription.current) {
+        _subscription.current = props.subject.subscribe({
             next: props.callback,
         });
     }
 };
 function useSubscribe(props) {
-    const _unsubscribe = React.useRef();
-    const _updateSubscription = React.useRef(() => { });
-    _updateSubscription.current = updateSubscriptionProps({
-        _unsubscribe,
+    const _subscription = React.useRef();
+    updateSubscriptionProps({
+        _subscription,
         props,
     });
-    !props.skipEarlySubscription && _updateSubscription.current();
     React.useEffect(() => {
-        _updateSubscription.current();
-        return () => tearDown(_unsubscribe);
+        return () => tearDown(_subscription);
     }, []);
 }
 
@@ -163,29 +161,71 @@ function useFormState(props) {
     return getProxyFormState(formState, control._proxyFormState, _localProxyFormState.current, false);
 }
 
+var isString = (value) => typeof value === 'string';
+
+function 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)));
+    }
+    isGlobal && (_names.watchAll = true);
+    return formValues;
+}
+
+function useWatch(props) {
+    const methods = useFormContext();
+    const { control = methods.control, name, defaultValue, disabled, } = props || {};
+    const _name = React.useRef(name);
+    _name.current = name;
+    useSubscribe({
+        disabled,
+        subject: control._subjects.watch,
+        callback: (formState) => {
+            if (shouldSubscribeByName(_name.current, formState.name)) {
+                const fieldValues = generateWatchOutput(_name.current, control._names, control._formValues);
+                updateValue(isObject(fieldValues)
+                    ? Object.assign({}, fieldValues) : Array.isArray(fieldValues)
+                    ? [...fieldValues]
+                    : fieldValues);
+            }
+        },
+    });
+    const [value, updateValue] = React.useState(isUndefined(defaultValue)
+        ? control._getWatch(name)
+        : defaultValue);
+    React.useEffect(() => {
+        control._removeUnmounted();
+    });
+    return value;
+}
+
 function useController(props) {
     const methods = useFormContext();
     const { name, control = methods.control, shouldUnregister } = props;
-    const [value, setInputStateValue] = React.useState(get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)));
+    const value = useWatch({
+        control,
+        name,
+        defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),
+    });
     const formState = useFormState({
-        control: control || methods.control,
+        control,
         name,
     });
     const _name = React.useRef(name);
     _name.current = name;
-    useSubscribe({
-        subject: control._subjects.control,
-        callback: (data) => (!data.name || _name.current === data.name) &&
-            setInputStateValue(get(data.values, _name.current)),
-    });
     const registerProps = control.register(name, Object.assign(Object.assign({}, props.rules), { value }));
-    const updateMounted = React.useCallback((name, value) => {
-        const field = get(control._fields, name);
-        if (field) {
-            field._f.mount = value;
-        }
-    }, [control]);
     React.useEffect(() => {
+        const updateMounted = (name, value) => {
+            const field = get(control._fields, name);
+            if (field) {
+                field._f.mount = value;
+            }
+        };
         updateMounted(name, true);
         return () => {
             const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
@@ -198,15 +238,13 @@ function useController(props) {
                 updateMounted(name, false);
             }
         };
-    }, [name, control, shouldUnregister, updateMounted]);
+    }, [name, control, shouldUnregister]);
     return {
         field: {
             onChange: (event) => {
-                const value = getControllerValue(event);
-                setInputStateValue(value);
                 registerProps.onChange({
                     target: {
-                        value,
+                        value: getControllerValue(event),
                         name: name,
                     },
                     type: EVENTS.CHANGE,
@@ -377,6 +415,7 @@ const useFieldArray = (props) => {
     const [fields, setFields] = React.useState(mapIds(control._getFieldArray(name), keyName));
     const _fieldIds = React.useRef(fields);
     const _name = React.useRef(name);
+    const _actioned = React.useRef(false);
     _name.current = name;
     _fieldIds.current = fields;
     control._names.array.add(name);
@@ -387,10 +426,10 @@ const useFieldArray = (props) => {
             }
         },
         subject: control._subjects.array,
-        skipEarlySubscription: true,
     });
     const updateValues = React.useCallback((updatedFieldArrayValuesWithKey) => {
         const updatedFieldArrayValues = omitKeys(updatedFieldArrayValuesWithKey, keyName);
+        _actioned.current = true;
         set(control._formValues, name, updatedFieldArrayValues);
         setFields(updatedFieldArrayValuesWithKey);
         return updatedFieldArrayValues;
@@ -466,6 +505,17 @@ const useFieldArray = (props) => {
                 }
             }
         }
+        if (_actioned.current) {
+            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,
@@ -523,6 +573,34 @@ function cloneObject(data) {
     return copy;
 }
 
+function createSubject() {
+    let _observers = [];
+    const next = (value) => {
+        for (const observer of _observers) {
+            observer.next(value);
+        }
+    };
+    const subscribe = (observer) => {
+        _observers.push(observer);
+        return {
+            unsubscribe: () => {
+                _observers = _observers.filter((o) => o !== observer);
+            },
+        };
+    };
+    const unsubscribe = () => {
+        _observers = [];
+    };
+    return {
+        get observers() {
+            return _observers;
+        },
+        next,
+        subscribe,
+        unsubscribe,
+    };
+}
+
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
 function deepEqual(object1, object2) {
@@ -566,6 +644,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`;
@@ -574,60 +654,12 @@ var isRadioInput = (element) => element.type === 'radio';
 
 var isRadioOrCheckboxFunction = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
 
-var isString = (value) => typeof value === 'string';
-
 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 = [];
-    }
-}
-
 function baseGet(object, updatePath) {
     const length = updatePath.slice(0, -1).length;
     let index = 0;
@@ -667,8 +699,6 @@ function unset(object, path) {
     return object;
 }
 
-var isFileInput = (element) => element.type === 'file';
-
 const defaultResult = {
     value: false,
     isValid: false,
@@ -762,6 +792,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;
@@ -1031,10 +1090,9 @@ function createFormControl(props = {}) {
         errors: false,
     };
     const _subjects = {
-        watch: new Subject(),
-        control: new Subject(),
-        array: new Subject(),
-        state: new Subject(),
+        watch: createSubject(),
+        array: createSubject(),
+        state: createSubject(),
     };
     const validationModeBeforeSubmit = getValidationModes(_options.mode);
     const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
@@ -1051,7 +1109,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;
@@ -1170,11 +1228,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);
@@ -1237,16 +1295,10 @@ function createFormControl(props = {}) {
                 : isString(names)
                     ? { [names]: defaultValue }
                     : defaultValue));
-        if (names) {
-            const result = convertToArrayPayload(names).map((fieldName) => (isGlobal && _names.watch.add(fieldName),
-                get(fieldValues, fieldName)));
-            return Array.isArray(names) ? result : result[0];
-        }
-        isGlobal && (_names.watchAll = true);
-        return fieldValues;
+        return generateWatchOutput(names, _names, fieldValues, isGlobal);
     };
     const _getFieldArray = (name) => get(_stateFlags.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get(_defaultValues, name, []) : []);
-    const setFieldValue = (name, value, options = {}, shouldRender) => {
+    const setFieldValue = (name, value, options = {}) => {
         const field = get(_fields, name);
         let fieldValue = value;
         if (field) {
@@ -1257,7 +1309,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) {
@@ -1275,11 +1330,6 @@ function createFormControl(props = {}) {
                 else {
                     fieldReference.ref.value = fieldValue;
                 }
-                shouldRender &&
-                    _subjects.control.next({
-                        values: _formValues,
-                        name,
-                    });
             }
         }
         (options.shouldDirty || options.shouldTouch) &&
@@ -1296,7 +1346,7 @@ function createFormControl(props = {}) {
                 (field && !field._f)) &&
                 !isDateObject(fieldValue)
                 ? setValues(fieldName, fieldValue, options)
-                : setFieldValue(fieldName, fieldValue, options, true);
+                : setFieldValue(fieldName, fieldValue, options);
         }
     };
     const setValue = (name, value, options = {}) => {
@@ -1321,7 +1371,7 @@ function createFormControl(props = {}) {
         else {
             field && !field._f && !isNullOrUndefined(value)
                 ? setValues(name, value, options)
-                : setFieldValue(name, value, options, true);
+                : setFieldValue(name, value, options);
         }
         isFieldWatched(name) && _subjects.state.next({});
         _subjects.watch.next({
@@ -1368,18 +1418,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 {
@@ -1398,7 +1441,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))
@@ -1414,7 +1457,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);
@@ -1434,6 +1480,7 @@ function createFormControl(props = {}) {
             : (_formState.errors = {});
         _subjects.state.next({
             errors: _formState.errors,
+            isValid: true,
         });
     };
     const setError = (name, error, options) => {
@@ -1478,7 +1525,8 @@ function createFormControl(props = {}) {
             _f: Object.assign(Object.assign(Object.assign({}, (field && field._f ? field._f : { ref: { name } })), { name, mount: true }), options),
         });
         _names.mount.add(name);
-        !isUndefined(options.value) && set(_formValues, name, options.value);
+        !isUndefined(options.value) &&
+            set(_formValues, name, get(_formValues, name, options.value));
         field
             ? isBoolean(options.disabled) &&
                 set(_formValues, name, options.disabled
@@ -1540,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;
             }
@@ -1576,10 +1624,35 @@ function createFormControl(props = {}) {
             });
         }
     };
+    const resetField = (name, options = {}) => {
+        if (isUndefined(options.defaultValue)) {
+            setValue(name, get(_defaultValues, name));
+        }
+        else {
+            setValue(name, options.defaultValue);
+            set(_defaultValues, name, options.defaultValue);
+        }
+        if (!options.keepTouched) {
+            unset(_formState.touchedFields, name);
+        }
+        if (!options.keepDirty) {
+            unset(_formState.dirtyFields, name);
+            _formState.isDirty = options.defaultValue
+                ? _getDirty(name, get(_defaultValues, name))
+                : _getDirty();
+        }
+        if (!options.keepError) {
+            unset(_formState.errors, name);
+            _proxyFormState.isValid && _updateValid();
+        }
+        _subjects.state.next(Object.assign({}, _formState));
+    };
     const reset = (formValues, keepStateOptions = {}) => {
-        const hasUpdatedFormValues = !isEmptyObject(formValues);
         const updatedValues = formValues || _defaultValues;
         const cloneUpdatedValues = cloneObject(updatedValues);
+        const values = !isEmptyObject(formValues)
+            ? cloneUpdatedValues
+            : _defaultValues;
         if (!keepStateOptions.keepDefaultValues) {
             _defaultValues = updatedValues;
         }
@@ -1602,16 +1675,15 @@ function createFormControl(props = {}) {
             }
             _formValues = props.shouldUnregister
                 ? keepStateOptions.keepDefaultValues
-                    ? _defaultValues
+                    ? cloneObject(_defaultValues)
                     : {}
                 : cloneUpdatedValues;
             _fields = {};
-            _subjects.control.next({
-                values: hasUpdatedFormValues ? cloneUpdatedValues : _defaultValues,
+            _subjects.watch.next({
+                values,
             });
-            _subjects.watch.next({});
             _subjects.array.next({
-                values: cloneUpdatedValues,
+                values,
             });
         }
         _names = {
@@ -1660,6 +1732,7 @@ function createFormControl(props = {}) {
         control: {
             register,
             unregister,
+            _executeSchema,
             _getWatch,
             _getDirty,
             _updateValid,
@@ -1718,6 +1791,7 @@ function createFormControl(props = {}) {
         setValue,
         getValues,
         reset,
+        resetField,
         clearErrors,
         unregister,
         setError,
@@ -1766,37 +1840,10 @@ 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;
 }
 
-function useWatch(props) {
-    const methods = useFormContext();
-    const { control = methods.control, name, defaultValue, disabled, } = props || {};
-    const _name = React.useRef(name);
-    _name.current = name;
-    useSubscribe({
-        disabled,
-        subject: control._subjects.watch,
-        callback: (formState) => {
-            if (shouldSubscribeByName(_name.current, formState.name)) {
-                control._stateFlags.mount = true;
-                const fieldValues = control._getWatch(_name.current, defaultValue);
-                updateValue(isObject(fieldValues)
-                    ? Object.assign({}, fieldValues) : Array.isArray(fieldValues)
-                    ? [...fieldValues]
-                    : fieldValues);
-            }
-        },
-    });
-    const [value, updateValue] = React.useState(isUndefined(defaultValue)
-        ? control._getWatch(name)
-        : defaultValue);
-    React.useEffect(() => {
-        control._removeUnmounted();
-    });
-    return value;
-}
-
 export { Controller, FormProvider, appendErrors, get, set, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
 //# sourceMappingURL=index.esm.js.map