react-hook-form 7.18.0 → 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);
     }, []);
 }
 
@@ -159,35 +157,75 @@ function useFormState(props) {
             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);
 }
 
+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)),
-        skipEarlySubscription: true,
-    });
     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;
@@ -200,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,
@@ -379,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);
@@ -389,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;
@@ -468,15 +505,17 @@ 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,
-                });
-            }
-        });
+        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,
@@ -534,34 +573,6 @@ 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) => {
@@ -570,10 +581,12 @@ function createSubject() {
         }
     };
     const subscribe = (observer) => {
-        const subscription = createSubscription();
-        const subscriber = createSubscriber(observer, subscription);
-        _observers.push(subscriber);
-        return subscription;
+        _observers.push(observer);
+        return {
+            unsubscribe: () => {
+                _observers = _observers.filter((o) => o !== observer);
+            },
+        };
     };
     const unsubscribe = () => {
         _observers = [];
@@ -641,8 +654,6 @@ 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';
@@ -1080,7 +1091,6 @@ function createFormControl(props = {}) {
     };
     const _subjects = {
         watch: createSubject(),
-        control: createSubject(),
         array: createSubject(),
         state: createSubject(),
     };
@@ -1285,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) {
@@ -1326,11 +1330,6 @@ function createFormControl(props = {}) {
                 else {
                     fieldReference.ref.value = fieldValue;
                 }
-                shouldRender &&
-                    _subjects.control.next({
-                        values: _formValues,
-                        name,
-                    });
             }
         }
         (options.shouldDirty || options.shouldTouch) &&
@@ -1347,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 = {}) => {
@@ -1372,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({
@@ -1526,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
@@ -1624,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;
         }
@@ -1654,12 +1679,11 @@ function createFormControl(props = {}) {
                     : {}
                 : cloneUpdatedValues;
             _fields = {};
-            _subjects.control.next({
-                values: hasUpdatedFormValues ? cloneUpdatedValues : _defaultValues,
+            _subjects.watch.next({
+                values,
             });
-            _subjects.watch.next({});
             _subjects.array.next({
-                values: cloneUpdatedValues,
+                values,
             });
         }
         _names = {
@@ -1767,6 +1791,7 @@ function createFormControl(props = {}) {
         setValue,
         getValues,
         reset,
+        resetField,
         clearErrors,
         unregister,
         setError,
@@ -1820,33 +1845,5 @@ function useForm(props = {}) {
     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