react-hook-form 7.19.3 → 7.20.1

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);
@@ -177,47 +169,18 @@ function generateWatchOutput(names, _names, formValues, isGlobal) {
     return formValues;
 }
 
-var isKey = (value) => /^\w*$/.test(value);
-
-var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
-
-function set(object, path, value) {
-    let index = -1;
-    const tempPath = isKey(path) ? [path] : stringToPath(path);
-    const length = tempPath.length;
-    const lastIndex = length - 1;
-    while (++index < length) {
-        const key = tempPath[index];
-        let newValue = value;
-        if (index !== lastIndex) {
-            const objValue = object[key];
-            newValue =
-                isObject(objValue) || Array.isArray(objValue)
-                    ? objValue
-                    : !isNaN(+tempPath[index + 1])
-                        ? []
-                        : {};
-        }
-        object[key] = newValue;
-        object = object[key];
-    }
-    return object;
-}
-
 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(isObject(fieldValues) &&
-                    !(isString(_name.current) &&
-                        get(control._fields, _name.current, {})._f)
+                updateValue(isUndefined(_name.current)
                     ? Object.assign({}, fieldValues) : Array.isArray(fieldValues)
                     ? [...fieldValues]
                     : fieldValues);
@@ -236,10 +199,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,
@@ -258,7 +223,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 });
@@ -267,7 +232,7 @@ function useController(props) {
                 updateMounted(name, false);
             }
         };
-    }, [name, control, shouldUnregister]);
+    }, [name, control, isArrayField, shouldUnregister]);
     return {
         field: {
             onChange: (event) => {
@@ -282,7 +247,7 @@ function useController(props) {
             onBlur: () => {
                 registerProps.onBlur({
                     target: {
-                        value,
+                        value: get(control._formValues, name),
                         name: name,
                     },
                     type: EVENTS.BLUR,
@@ -316,6 +281,33 @@ const Controller = (props) => props.render(useController(props));
 var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
     ? Object.assign(Object.assign({}, errors[name]), { types: Object.assign(Object.assign({}, (errors[name] && errors[name].types ? errors[name].types : {})), { [type]: message || true }) }) : {};
 
+var isKey = (value) => /^\w*$/.test(value);
+
+var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
+
+function set(object, path, value) {
+    let index = -1;
+    const tempPath = isKey(path) ? [path] : stringToPath(path);
+    const length = tempPath.length;
+    const lastIndex = length - 1;
+    while (++index < length) {
+        const key = tempPath[index];
+        let newValue = value;
+        if (index !== lastIndex) {
+            const objValue = object[key];
+            newValue =
+                isObject(objValue) || Array.isArray(objValue)
+                    ? objValue
+                    : !isNaN(+tempPath[index + 1])
+                        ? []
+                        : {};
+        }
+        object[key] = newValue;
+        object = object[key];
+    }
+    return object;
+}
+
 const focusFieldBy = (fields, callback, fieldsNames) => {
     for (const key of fieldsNames || Object.keys(fields)) {
         const field = get(fields, key);
@@ -343,6 +335,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] } : {}));
@@ -433,12 +431,12 @@ const useFieldArray = (props) => {
         const updatedFieldArrayValues = omitKeys(updatedFieldArrayValuesWithKey, keyName);
         _actioned.current = true;
         set(control._formValues, name, updatedFieldArrayValues);
-        setFields(updatedFieldArrayValuesWithKey);
         return updatedFieldArrayValues;
     }, [control, name, keyName]);
     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));
@@ -446,6 +444,7 @@ const useFieldArray = (props) => {
     };
     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));
@@ -453,12 +452,14 @@ const useFieldArray = (props) => {
     };
     const remove = (index) => {
         const updatedFieldArrayValuesWithKey = removeArrayAt(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), index);
+        setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, removeArrayAt, {
             argA: index,
         }, updateValues(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),
@@ -468,6 +469,7 @@ const useFieldArray = (props) => {
     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,
@@ -480,11 +482,13 @@ const useFieldArray = (props) => {
             argA: from,
             argB: to,
         }, updateValues(updatedFieldArrayValuesWithKey), false);
+        setFields(updatedFieldArrayValuesWithKey);
     };
     const update = (index, value) => {
         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,
@@ -492,21 +496,12 @@ const useFieldArray = (props) => {
     };
     const replace = (value) => {
         const updatedFieldArrayValuesWithKey = mapIds(convertToArrayPayload(value), keyName);
+        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);
@@ -1103,10 +1098,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) {
@@ -1375,7 +1366,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,
         });
@@ -1394,7 +1385,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);
             }
@@ -1403,7 +1394,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,
@@ -1411,9 +1402,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({
@@ -1827,9 +1818,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));
             }
         },