react-hook-form 7.44.0-next.1 → 7.44.0-rc.0

package/dist/index.esm.mjs

@@ -23,6 +23,42 @@ var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/))
 
 var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
 
+var isPlainObject = (tempObject) => {
+    const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
+    return (isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
+};
+
+var isWeb = typeof window !== 'undefined' &&
+    typeof window.HTMLElement !== 'undefined' &&
+    typeof document !== 'undefined';
+
+function cloneObject(data) {
+    let copy;
+    const isArray = Array.isArray(data);
+    if (data instanceof Date) {
+        copy = new Date(data);
+    }
+    else if (data instanceof Set) {
+        copy = new Set(data);
+    }
+    else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) &&
+        (isArray || isObject(data))) {
+        copy = isArray ? [] : {};
+        if (!Array.isArray(data) && !isPlainObject(data)) {
+            copy = data;
+        }
+        else {
+            for (const key in data) {
+                copy[key] = cloneObject(data[key]);
+            }
+        }
+    }
+    else {
+        return data;
+    }
+    return copy;
+}
+
 var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
 
 var isUndefined = (val) => val === undefined;
@@ -174,6 +210,7 @@ function useSubscribe(props) {
     _props.current = props;
     React__default.useEffect(() => {
         const subscription = !props.disabled &&
+            _props.current.subject &&
             _props.current.subject.subscribe({
                 next: _props.current.next,
             });
@@ -270,42 +307,6 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
     return formValues;
 };
 
-var isPlainObject = (tempObject) => {
-    const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
-    return (isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
-};
-
-var isWeb = typeof window !== 'undefined' &&
-    typeof window.HTMLElement !== 'undefined' &&
-    typeof document !== 'undefined';
-
-function cloneObject(data) {
-    let copy;
-    const isArray = Array.isArray(data);
-    if (data instanceof Date) {
-        copy = new Date(data);
-    }
-    else if (data instanceof Set) {
-        copy = new Set(data);
-    }
-    else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) &&
-        (isArray || isObject(data))) {
-        copy = isArray ? [] : {};
-        if (!Array.isArray(data) && !isPlainObject(data)) {
-            copy = data;
-        }
-        else {
-            for (const key in data) {
-                copy[key] = cloneObject(data[key]);
-            }
-        }
-    }
-    else {
-        return data;
-    }
-    return copy;
-}
-
 /**
  * Custom hook to subscribe to field change and isolate re-rendering at the component level.
  *
@@ -329,7 +330,7 @@ function useWatch(props) {
     _name.current = name;
     useSubscribe({
         disabled,
-        subject: control._subjects.watch,
+        subject: control._subjects.values,
         next: (formState) => {
             if (shouldSubscribeByName(_name.current, formState.name, exact)) {
                 updateValue(cloneObject(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, defaultValue)));
@@ -341,6 +342,33 @@ function useWatch(props) {
     return value;
 }
 
+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;
+}
+
 /**
  * Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.
  *
@@ -384,6 +412,7 @@ function useController(props) {
         value,
     }));
     React__default.useEffect(() => {
+        const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
         const updateMounted = (name, value) => {
             const field = get(control._fields, name);
             if (field) {
@@ -391,10 +420,12 @@ function useController(props) {
             }
         };
         updateMounted(name, true);
+        if (_shouldUnregisterField) {
+            set(control._defaultValues, name, cloneObject(get(control._options.defaultValues, name)));
+        }
         return () => {
-            const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
             (isArrayField
-                ? _shouldUnregisterField && !control._stateFlags.action
+                ? _shouldUnregisterField && !control._state.action
                 : _shouldUnregisterField)
                 ? control.unregister(name)
                 : updateMounted(name, false);
@@ -523,36 +554,33 @@ function Form(props) {
     const methods = useFormContext();
     const [mounted, setMounted] = React.useState(false);
     const { control = methods.control, onSubmit, children, action, method = POST_REQUEST, headers, encType, onError, render, onSuccess, validateStatus, fetcher, ...rest } = props;
-    const isPostRequest = method === POST_REQUEST;
     const submit = async (event) => {
         let serverError = false;
         await control.handleSubmit(async (values) => {
+            const formData = new FormData();
+            const formDataJson = JSON.stringify(values);
+            control._names.mount.forEach((name) => formData.append(name, get(values, name)));
             onSubmit && onSubmit(values);
             if (action) {
-                const formData = new FormData();
-                let shouldStringifySubmissionData = false;
-                if (headers) {
-                    shouldStringifySubmissionData =
-                        headers['Content-Type'].includes('json');
-                }
-                else {
-                    control._names.mount.forEach((name) => formData.append(name, get(values, name)));
-                }
-                if (!fetcher) {
-                    try {
+                try {
+                    if (fetcher) {
+                        await fetcher(action, {
+                            method,
+                            values,
+                            event,
+                            formData,
+                            formDataJson,
+                        });
+                    }
+                    else {
+                        const shouldStringifySubmissionData = headers && headers['Content-Type'].includes('json');
                         const response = await fetch(action, {
                             method,
                             headers: {
                                 ...headers,
                                 ...(encType ? { 'Content-Type': encType } : {}),
                             },
-                            ...(isPostRequest
-                                ? {
-                                    body: shouldStringifySubmissionData
-                                        ? JSON.stringify(values)
-                                        : formData,
-                                }
-                                : {}),
+                            body: shouldStringifySubmissionData ? formDataJson : formData,
                         });
                         if (response &&
                             (validateStatus
@@ -565,17 +593,10 @@ function Form(props) {
                             onSuccess && onSuccess({ response });
                         }
                     }
-                    catch (error) {
-                        serverError = true;
-                        onError && onError({ error });
-                    }
                 }
-                else {
-                    await fetcher(action, {
-                        method,
-                        values,
-                        event,
-                    });
+                catch (error) {
+                    serverError = true;
+                    onError && onError({ error });
                 }
             }
         })(event);
@@ -603,33 +624,6 @@ var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => va
     }
     : {};
 
-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);
@@ -1180,8 +1174,11 @@ function useFieldArray(props) {
         control._updateFieldArray(name, [...updatedFieldArrayValues], (data) => data, {}, true, false);
     };
     React__default.useEffect(() => {
-        control._stateFlags.action = false;
-        isWatched(name, control._names) && control._subjects.state.next({});
+        control._state.action = false;
+        isWatched(name, control._names) &&
+            control._subjects.state.next({
+                ...control._formState,
+            });
         if (_actioned.current &&
             (!getValidationModes(control._options.mode).isOnSubmit ||
                 control._formState.isSubmitted)) {
@@ -1209,9 +1206,9 @@ function useFieldArray(props) {
                 }
             }
         }
-        control._subjects.watch.next({
+        control._subjects.values.next({
             name,
-            values: control._formValues,
+            values: { ...control._formValues },
         });
         control._names.focus &&
             focusFieldBy(control._fields, (key) => !!key && key.startsWith(control._names.focus || ''));
@@ -1245,7 +1242,7 @@ function createSubject() {
     let _observers = [];
     const next = (value) => {
         for (const observer of _observers) {
-            observer.next(value);
+            observer.next && observer.next(value);
         }
     };
     const subscribe = (observer) => {
@@ -1350,9 +1347,7 @@ function getDirtyFieldsFromDefaultValues(data, formValues, dirtyFieldsFromValues
                 }
             }
             else {
-                deepEqual(data[key], formValues[key])
-                    ? delete dirtyFieldsFromValues[key]
-                    : (dirtyFieldsFromValues[key] = true);
+                dirtyFieldsFromValues[key] = !deepEqual(data[key], formValues[key]);
             }
         }
     }
@@ -1484,7 +1479,6 @@ function createFormControl(props = {}, flushRootRender) {
         ...defaultOptions,
         ...props,
     };
-    const shouldCaptureDirtyFields = props.resetOptions && props.resetOptions.keepDirtyValues;
     let _formState = {
         submitCount: 0,
         isDirty: false,
@@ -1505,7 +1499,7 @@ function createFormControl(props = {}, flushRootRender) {
     let _formValues = _options.shouldUnregister
         ? {}
         : cloneObject(_defaultValues);
-    let _stateFlags = {
+    let _state = {
         action: false,
         mount: false,
         watch: false,
@@ -1527,16 +1521,17 @@ function createFormControl(props = {}, flushRootRender) {
         errors: false,
     };
     const _subjects = {
-        watch: createSubject(),
+        values: createSubject(),
         array: createSubject(),
         state: createSubject(),
     };
+    const shouldCaptureDirtyFields = props.resetOptions && props.resetOptions.keepDirtyValues;
     const validationModeBeforeSubmit = getValidationModes(_options.mode);
     const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
     const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
     const debounce = (callback) => (wait) => {
         clearTimeout(timer);
-        timer = window.setTimeout(callback, wait);
+        timer = setTimeout(callback, wait);
     };
     const _updateValid = async (shouldUpdateValid) => {
         if (_proxyFormState.isValid || shouldUpdateValid) {
@@ -1556,7 +1551,7 @@ function createFormControl(props = {}, flushRootRender) {
         });
     const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
         if (args && method) {
-            _stateFlags.action = true;
+            _state.action = true;
             if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
                 const fieldValues = method(get(_fields, name), args.argA, args.argB);
                 shouldSetValues && set(_fields, name, fieldValues);
@@ -1603,7 +1598,7 @@ function createFormControl(props = {}, flushRootRender) {
                 shouldSkipSetValueAs
                 ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f))
                 : setFieldValue(name, defaultValue);
-            _stateFlags.mount && _updateValid();
+            _state.mount && _updateValid();
         }
     };
     const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
@@ -1676,7 +1671,7 @@ function createFormControl(props = {}, flushRootRender) {
         }
         _updateIsValidating(false);
     };
-    const _executeSchema = async (name) => await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
+    const _executeSchema = async (name) => _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
     const executeSchemaAndUpdateState = async (names) => {
         const { errors } = await _executeSchema();
         if (names) {
@@ -1701,7 +1696,7 @@ function createFormControl(props = {}, flushRootRender) {
                 const { _f, ...fieldValue } = field;
                 if (_f) {
                     const isFieldArrayRoot = _names.array.has(_f.name);
-                    const fieldError = await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation, isFieldArrayRoot);
+                    const fieldError = await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
                     if (fieldError[_f.name]) {
                         context.valid = false;
                         if (shouldOnlyCheckValid) {
@@ -1735,7 +1730,7 @@ function createFormControl(props = {}, flushRootRender) {
     const _getDirty = (name, data) => (name && data && set(_formValues, name, data),
         !deepEqual(getValues(), _defaultValues));
     const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
-        ...(_stateFlags.mount
+        ...(_state.mount
             ? _formValues
             : isUndefined(defaultValue)
                 ? _defaultValues
@@ -1743,7 +1738,7 @@ function createFormControl(props = {}, flushRootRender) {
                     ? { [names]: defaultValue }
                     : defaultValue),
     }, isGlobal, defaultValue);
-    const _getFieldArray = (name) => compact(get(_stateFlags.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get(_defaultValues, name, []) : []));
+    const _getFieldArray = (name) => compact(get(_state.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get(_defaultValues, name, []) : []));
     const setFieldValue = (name, value, options = {}) => {
         const field = get(_fields, name);
         let fieldValue = value;
@@ -1779,8 +1774,9 @@ function createFormControl(props = {}, flushRootRender) {
                 else {
                     fieldReference.ref.value = fieldValue;
                     if (!fieldReference.ref.type) {
-                        _subjects.watch.next({
+                        _subjects.values.next({
                             name,
+                            values: { ..._formValues },
                         });
                     }
                 }
@@ -1811,7 +1807,7 @@ function createFormControl(props = {}, flushRootRender) {
         if (isFieldArray) {
             _subjects.array.next({
                 name,
-                values: _formValues,
+                values: { ..._formValues },
             });
             if ((_proxyFormState.isDirty || _proxyFormState.dirtyFields) &&
                 options.shouldDirty) {
@@ -1827,15 +1823,17 @@ function createFormControl(props = {}, flushRootRender) {
                 ? setValues(name, cloneValue, options)
                 : setFieldValue(name, cloneValue, options);
         }
-        isWatched(name, _names) && _subjects.state.next({});
-        _subjects.watch.next({
+        isWatched(name, _names) && _subjects.state.next({ ..._formState });
+        _subjects.values.next({
             name,
+            values: { ..._formValues },
         });
-        !_stateFlags.mount && flushRootRender();
+        !_state.mount && flushRootRender();
     };
     const onChange = async (event) => {
         const target = event.target;
         let name = target.name;
+        let isFieldValueUpdated = true;
         const field = get(_fields, name);
         const getCurrentFieldValue = () => target.type ? getFieldValue(field._f) : getEventValue(event);
         if (field) {
@@ -1860,16 +1858,17 @@ function createFormControl(props = {}, flushRootRender) {
             const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent, false);
             const shouldRender = !isEmptyObject(fieldState) || watched;
             !isBlurEvent &&
-                _subjects.watch.next({
+                _subjects.values.next({
                     name,
                     type: event.type,
+                    values: { ..._formValues },
                 });
             if (shouldSkipValidation) {
                 _proxyFormState.isValid && _updateValid();
                 return (shouldRender &&
                     _subjects.state.next({ name, ...(watched ? {} : fieldState) }));
             }
-            !isBlurEvent && watched && _subjects.state.next({});
+            !isBlurEvent && watched && _subjects.state.next({ ..._formState });
             _updateIsValidating(true);
             if (_options.resolver) {
                 const { errors } = await _executeSchema([name]);
@@ -1881,16 +1880,21 @@ function createFormControl(props = {}, flushRootRender) {
             }
             else {
                 error = (await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
-                if (error) {
-                    isValid = false;
-                }
-                else if (_proxyFormState.isValid) {
-                    isValid = await executeBuiltInValidation(_fields, true);
+                isFieldValueUpdated = fieldValue === get(_formValues, name, fieldValue);
+                if (isFieldValueUpdated) {
+                    if (error) {
+                        isValid = false;
+                    }
+                    else if (_proxyFormState.isValid) {
+                        isValid = await executeBuiltInValidation(_fields, true);
+                    }
                 }
             }
-            field._f.deps &&
-                trigger(field._f.deps);
-            shouldRenderByError(name, isValid, error, fieldState);
+            if (isFieldValueUpdated) {
+                field._f.deps &&
+                    trigger(field._f.deps);
+                shouldRenderByError(name, isValid, error, fieldState);
+            }
         }
     };
     const trigger = async (name, options = {}) => {
@@ -1932,7 +1936,7 @@ function createFormControl(props = {}, flushRootRender) {
     const getValues = (fieldNames) => {
         const values = {
             ..._defaultValues,
-            ...(_stateFlags.mount ? _formValues : {}),
+            ...(_state.mount ? _formValues : {}),
         };
         return isUndefined(fieldNames)
             ? values
@@ -1967,7 +1971,7 @@ function createFormControl(props = {}, flushRootRender) {
         options && options.shouldFocus && ref && ref.focus && ref.focus();
     };
     const watch = (name, defaultValue) => isFunction(name)
-        ? _subjects.watch.subscribe({
+        ? _subjects.values.subscribe({
             next: (payload) => name(_getWatch(undefined, defaultValue), payload),
         })
         : _getWatch(name, defaultValue, true);
@@ -1988,7 +1992,9 @@ function createFormControl(props = {}, flushRootRender) {
                     unset(_defaultValues, fieldName);
             }
         }
-        _subjects.watch.next({});
+        _subjects.values.next({
+            values: { ..._formValues },
+        });
         _subjects.state.next({
             ..._formState,
             ...(!options.keepDirty ? {} : { isDirty: _getDirty() }),
@@ -2068,7 +2074,7 @@ function createFormControl(props = {}, flushRootRender) {
                         field._f.mount = false;
                     }
                     (_options.shouldUnregister || options.shouldUnregister) &&
-                        !(isNameInFieldArray(_names.array, name) && _stateFlags.action) &&
+                        !(isNameInFieldArray(_names.array, name) && _state.action) &&
                         _names.unMount.add(name);
                 }
             },
@@ -2105,6 +2111,7 @@ function createFormControl(props = {}, flushRootRender) {
                 await onInvalid({ ..._formState.errors }, e);
             }
             _focusError();
+            setTimeout(_focusError);
         }
         _subjects.state.next({
             isSubmitted: true,
@@ -2182,10 +2189,10 @@ function createFormControl(props = {}, flushRootRender) {
                     : {}
                 : cloneUpdatedValues;
             _subjects.array.next({
-                values,
+                values: { ...values },
             });
-            _subjects.watch.next({
-                values,
+            _subjects.values.next({
+                values: { ...values },
             });
         }
         _names = {
@@ -2196,22 +2203,21 @@ function createFormControl(props = {}, flushRootRender) {
             watchAll: false,
             focus: '',
         };
-        !_stateFlags.mount && flushRootRender();
-        _stateFlags.mount =
-            !_proxyFormState.isValid || !!keepStateOptions.keepIsValid;
-        _stateFlags.watch = !!props.shouldUnregister;
+        !_state.mount && flushRootRender();
+        _state.mount = !_proxyFormState.isValid || !!keepStateOptions.keepIsValid;
+        _state.watch = !!props.shouldUnregister;
         _subjects.state.next({
             submitCount: keepStateOptions.keepSubmitCount
                 ? _formState.submitCount
                 : 0,
-            isDirty: keepStateOptions.keepDirty || keepStateOptions.keepDirtyValues
+            isDirty: keepStateOptions.keepDirty
                 ? _formState.isDirty
                 : !!(keepStateOptions.keepDefaultValues &&
                     !deepEqual(formValues, _defaultValues)),
             isSubmitted: keepStateOptions.keepIsSubmitted
                 ? _formState.isSubmitted
                 : false,
-            dirtyFields: keepStateOptions.keepDirty || keepStateOptions.keepDirtyValues
+            dirtyFields: keepStateOptions.keepDirtyValues
                 ? _formState.dirtyFields
                 : keepStateOptions.keepDefaultValues && formValues
                     ? getDirtyFields(_defaultValues, formValues)
@@ -2262,7 +2268,6 @@ function createFormControl(props = {}, flushRootRender) {
             handleSubmit,
             setError,
             _executeSchema,
-            _focusError,
             _getWatch,
             _getDirty,
             _updateValid,
@@ -2279,11 +2284,11 @@ function createFormControl(props = {}, flushRootRender) {
             get _formValues() {
                 return _formValues;
             },
-            get _stateFlags() {
-                return _stateFlags;
+            get _state() {
+                return _state;
             },
-            set _stateFlags(value) {
-                _stateFlags = value;
+            set _state(value) {
+                _state = value;
             },
             get _defaultValues() {
                 return _defaultValues;
@@ -2389,25 +2394,22 @@ function useForm(props = {}) {
             }
         },
     });
-    React__default.useEffect(() => {
-        if (!control._stateFlags.mount) {
-            control._updateValid();
-            control._stateFlags.mount = true;
-        }
-        if (control._stateFlags.watch) {
-            control._stateFlags.watch = false;
-            control._subjects.state.next({});
-        }
-        control._removeUnmounted();
-    });
     React__default.useEffect(() => {
         if (props.values && !deepEqual(props.values, control._defaultValues)) {
             control._reset(props.values, control._options.resetOptions);
         }
     }, [props.values, control]);
     React__default.useEffect(() => {
-        formState.submitCount && control._focusError();
-    }, [control, formState.submitCount]);
+        if (!control._state.mount) {
+            control._updateValid();
+            control._state.mount = true;
+        }
+        if (control._state.watch) {
+            control._state.watch = false;
+            control._subjects.state.next({ ...control._formState });
+        }
+        control._removeUnmounted();
+    });
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }