react-hook-form 7.19.4 → 7.20.2

package/dist/index.esm.js

@@ -103,43 +103,35 @@ var shouldRenderFormState = (formStateData, _proxyFormState, isRoot) => {
 
 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 = (_subscription) => {
-    if (_subscription.current) {
-        _subscription.current.unsubscribe();
-        _subscription.current = undefined;
-    }
-};
-const updateSubscriptionProps = ({ _subscription, props }) => {
-    if (props.disabled) {
-        tearDown(_subscription);
-    }
-    else if (!_subscription.current) {
-        _subscription.current = props.subject.subscribe({
-            next: props.callback,
-        });
-    }
-};
+var shouldSubscribeByName = (name, signalName, exact) => exact && signalName
+    ? name === signalName
+    : !name ||
+        !signalName ||
+        name === signalName ||
+        convertToArrayPayload(name).some((currentName) => currentName &&
+            (currentName.startsWith(signalName) ||
+                signalName.startsWith(currentName)));
+
 function useSubscribe(props) {
-    const _subscription = React.useRef();
-    updateSubscriptionProps({
-        _subscription,
-        props,
-    });
+    const _props = React.useRef(props);
+    _props.current = props;
     React.useEffect(() => {
-        return () => tearDown(_subscription);
-    }, []);
+        const tearDown = (subscription) => {
+            if (subscription) {
+                subscription.unsubscribe();
+            }
+        };
+        const subscription = !props.disabled &&
+            _props.current.subject.subscribe({
+                next: _props.current.callback,
+            });
+        return () => tearDown(subscription);
+    }, [props.disabled]);
 }
 
 function useFormState(props) {
     const methods = useFormContext();
-    const { control = methods.control, disabled, name } = props || {};
+    const { control = methods.control, disabled, name, exact } = props || {};
     const [formState, updateFormState] = React.useState(control._formState);
     const _localProxyFormState = React.useRef({
         isDirty: false,
@@ -153,9 +145,9 @@ function useFormState(props) {
     _name.current = name;
     useSubscribe({
         disabled,
-        callback: (formState) => shouldSubscribeByName(_name.current, formState.name) &&
-            shouldRenderFormState(formState, _localProxyFormState.current) &&
-            updateFormState(Object.assign(Object.assign({}, control._formState), formState)),
+        callback: (value) => shouldSubscribeByName(_name.current, value.name, exact) &&
+            shouldRenderFormState(value, _localProxyFormState.current) &&
+            updateFormState(Object.assign(Object.assign({}, control._formState), value)),
         subject: control._subjects.state,
     });
     return getProxyFormState(formState, control._proxyFormState, _localProxyFormState.current, false);
@@ -163,7 +155,7 @@ function useFormState(props) {
 
 var isString = (value) => typeof value === 'string';
 
-function generateWatchOutput(names, _names, formValues, isGlobal) {
+var generateWatchOutput = (names, _names, formValues, isGlobal) => {
     const isArray = Array.isArray(names);
     if (isString(names)) {
         isGlobal && _names.watch.add(names);
@@ -175,20 +167,32 @@ function generateWatchOutput(names, _names, formValues, isGlobal) {
     }
     isGlobal && (_names.watchAll = true);
     return formValues;
-}
+};
+
+var isFunction = (value) => typeof value === 'function';
+
+var objectHasFunction = (data) => {
+    for (const key in data) {
+        if (isFunction(data[key])) {
+            return true;
+        }
+    }
+    return false;
+};
 
 function useWatch(props) {
     const methods = useFormContext();
-    const { control = methods.control, name, defaultValue, disabled, } = props || {};
+    const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
     const _name = React.useRef(name);
     _name.current = name;
     useSubscribe({
         disabled,
         subject: control._subjects.watch,
         callback: (formState) => {
-            if (shouldSubscribeByName(_name.current, formState.name)) {
+            if (shouldSubscribeByName(_name.current, formState.name, exact)) {
                 const fieldValues = generateWatchOutput(_name.current, control._names, formState.values || control._formValues);
-                updateValue(isUndefined(_name.current)
+                updateValue(isUndefined(_name.current) ||
+                    (isObject(fieldValues) && !objectHasFunction(fieldValues))
                     ? Object.assign({}, fieldValues) : Array.isArray(fieldValues)
                     ? [...fieldValues]
                     : fieldValues);
@@ -207,10 +211,12 @@ function useWatch(props) {
 function useController(props) {
     const methods = useFormContext();
     const { name, control = methods.control, shouldUnregister } = props;
+    const isArrayField = isNameInFieldArray(control._names.array, name);
     const value = useWatch({
         control,
         name,
         defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),
+        exact: !isArrayField,
     });
     const formState = useFormState({
         control,
@@ -229,7 +235,7 @@ function useController(props) {
         updateMounted(name, true);
         return () => {
             const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
-            if (isNameInFieldArray(control._names.array, name)
+            if (isArrayField
                 ? _shouldUnregisterField && !control._stateFlags.action
                 : _shouldUnregisterField) {
                 control.unregister(name, { keepDefaultValue: true });
@@ -238,7 +244,7 @@ function useController(props) {
                 updateMounted(name, false);
             }
         };
-    }, [name, control, shouldUnregister]);
+    }, [name, control, isArrayField, shouldUnregister]);
     return {
         field: {
             onChange: (event) => {
@@ -253,7 +259,7 @@ function useController(props) {
             onBlur: () => {
                 registerProps.onBlur({
                     target: {
-                        value,
+                        value: get(control._formValues, name),
                         name: name,
                     },
                     type: EVENTS.BLUR,
@@ -341,6 +347,12 @@ var getFocusFieldName = (name, index, options = {}) => options.shouldFocus || is
         `${name}.${isUndefined(options.focusIndex) ? index : options.focusIndex}.`
     : '';
 
+var isWatched = (name, _names, isBlurEvent) => !isBlurEvent &&
+    (_names.watchAll ||
+        _names.watch.has(name) ||
+        [..._names.watch].some((watchName) => name.startsWith(watchName) &&
+            /^\.\w+/.test(name.slice(watchName.length))));
+
 var mapCurrentIds = (values, _fieldIds, keyName) => values.map((value, index) => {
     const output = _fieldIds.current[index];
     return Object.assign(Object.assign({}, value), (output ? { [keyName]: output[keyName] } : {}));
@@ -436,44 +448,44 @@ const useFieldArray = (props) => {
     const append$1 = (value, options) => {
         const appendValue = convertToArrayPayload(value);
         const updatedFieldArrayValuesWithKey = append(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), mapIds(appendValue, keyName));
+        setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, append, {
             argA: fillEmptyArray(value),
         }, updateValues(updatedFieldArrayValuesWithKey));
-        setFields(updatedFieldArrayValuesWithKey);
         control._names.focus = getFocusFieldName(name, updatedFieldArrayValuesWithKey.length - appendValue.length, options);
     };
     const prepend$1 = (value, options) => {
         const updatedFieldArrayValuesWithKey = prepend(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), mapIds(convertToArrayPayload(value), keyName));
+        setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, prepend, {
             argA: fillEmptyArray(value),
         }, updateValues(updatedFieldArrayValuesWithKey));
-        setFields(updatedFieldArrayValuesWithKey);
         control._names.focus = getFocusFieldName(name, 0, options);
     };
     const remove = (index) => {
         const updatedFieldArrayValuesWithKey = removeArrayAt(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), index);
+        setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, removeArrayAt, {
             argA: index,
         }, updateValues(updatedFieldArrayValuesWithKey));
-        setFields(updatedFieldArrayValuesWithKey);
     };
     const insert$1 = (index, value, options) => {
         const updatedFieldArrayValuesWithKey = insert(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), index, mapIds(convertToArrayPayload(value), keyName));
+        setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, insert, {
             argA: index,
             argB: fillEmptyArray(value),
         }, updateValues(updatedFieldArrayValuesWithKey));
-        setFields(updatedFieldArrayValuesWithKey);
         control._names.focus = getFocusFieldName(name, index, options);
     };
     const swap = (indexA, indexB) => {
         const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
         swapArrayAt(updatedFieldArrayValuesWithKey, indexA, indexB);
+        setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, swapArrayAt, {
             argA: indexA,
             argB: indexB,
         }, updateValues(updatedFieldArrayValuesWithKey), false);
-        setFields(updatedFieldArrayValuesWithKey);
     };
     const move = (from, to) => {
         const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
@@ -488,30 +500,20 @@ const useFieldArray = (props) => {
         const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
         const updatedFieldArrayValues = updateAt(updatedFieldArrayValuesWithKey, index, value);
         _fieldIds.current = mapIds(updatedFieldArrayValues, keyName);
+        setFields(_fieldIds.current);
         control._updateFieldArray(name, updateAt, {
             argA: index,
             argB: value,
         }, updateValues(_fieldIds.current), true, false);
-        setFields(_fieldIds.current);
     };
     const replace = (value) => {
         const updatedFieldArrayValuesWithKey = mapIds(convertToArrayPayload(value), keyName);
-        control._updateFieldArray(name, () => updatedFieldArrayValuesWithKey, {}, updateValues(updatedFieldArrayValuesWithKey), true, false);
         setFields(updatedFieldArrayValuesWithKey);
+        control._updateFieldArray(name, () => updatedFieldArrayValuesWithKey, {}, updateValues(updatedFieldArrayValuesWithKey), true, false);
     };
     React.useEffect(() => {
         control._stateFlags.action = false;
-        if (control._names.watchAll) {
-            control._subjects.state.next({});
-        }
-        else {
-            for (const watchField of control._names.watch) {
-                if (name.startsWith(watchField)) {
-                    control._subjects.state.next({});
-                    break;
-                }
-            }
-        }
+        isWatched(name, control._names) && control._subjects.state.next({});
         if (_actioned.current) {
             control._executeSchema([name]).then((result) => {
                 const error = get(result.errors, name);
@@ -553,8 +555,6 @@ const useFieldArray = (props) => {
     };
 };
 
-var isFunction = (value) => typeof value === 'function';
-
 function cloneObject(data) {
     let copy;
     const isArray = Array.isArray(data);
@@ -1108,10 +1108,6 @@ function createFormControl(props = {}) {
         clearTimeout(timer);
         timer = window.setTimeout(() => callback(...args), wait);
     };
-    const isFieldWatched = (name, isBlurEvent) => !isBlurEvent &&
-        (_names.watchAll ||
-            _names.watch.has(name) ||
-            _names.watch.has((name.match(/\w+/) || [])[0]));
     const _updateValid = async (shouldSkipRender) => {
         let isValid = false;
         if (_proxyFormState.isValid) {
@@ -1380,7 +1376,7 @@ function createFormControl(props = {}) {
                 ? setValues(name, value, options)
                 : setFieldValue(name, value, options);
         }
-        isFieldWatched(name) && _subjects.state.next({});
+        isWatched(name, _names) && _subjects.state.next({});
         _subjects.watch.next({
             name,
         });
@@ -1399,7 +1395,7 @@ function createFormControl(props = {}) {
                 !get(_formState.errors, name) &&
                 !field._f.deps) ||
                 skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, validationModeAfterSubmit, validationModeBeforeSubmit);
-            const isWatched = isFieldWatched(name, isBlurEvent);
+            const watched = isWatched(name, _names, isBlurEvent);
             if (isBlurEvent) {
                 field._f.onBlur && field._f.onBlur(event);
             }
@@ -1408,7 +1404,7 @@ function createFormControl(props = {}) {
             }
             set(_formValues, name, fieldValue);
             const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent, false);
-            const shouldRender = !isEmptyObject(fieldState) || isWatched;
+            const shouldRender = !isEmptyObject(fieldState) || watched;
             !isBlurEvent &&
                 _subjects.watch.next({
                     name,
@@ -1416,9 +1412,9 @@ function createFormControl(props = {}) {
                 });
             if (shouldSkipValidation) {
                 return (shouldRender &&
-                    _subjects.state.next(Object.assign({ name }, (isWatched ? {} : fieldState))));
+                    _subjects.state.next(Object.assign({ name }, (watched ? {} : fieldState))));
             }
-            !isBlurEvent && isWatched && _subjects.state.next({});
+            !isBlurEvent && watched && _subjects.state.next({});
             validateFields[name] = validateFields[name] ? +1 : 1;
             _proxyFormState.isValidating &&
                 _subjects.state.next({
@@ -1832,9 +1828,9 @@ function useForm(props = {}) {
     const control = _formControl.current.control;
     useSubscribe({
         subject: control._subjects.state,
-        callback: (formState) => {
-            if (shouldRenderFormState(formState, control._proxyFormState, true)) {
-                control._formState = Object.assign(Object.assign({}, control._formState), formState);
+        callback: (value) => {
+            if (shouldRenderFormState(value, control._proxyFormState, true)) {
+                control._formState = Object.assign(Object.assign({}, control._formState), value);
                 updateFormState(Object.assign({}, control._formState));
             }
         },