react-hook-form 7.40.0-next.1 → 7.41.0

package/dist/index.esm.mjs

@@ -122,7 +122,10 @@ const useFormContext = () => React.useContext(HookFormContext);
  * }
  * ```
  */
-const FormProvider = ({ children, ...data }) => (React.createElement(HookFormContext.Provider, { value: React.useState(data)[0] }, children));
+const FormProvider = (props) => {
+    const { children, ...data } = props;
+    return (React.createElement(HookFormContext.Provider, { value: data }, children));
+};
 
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
     const result = {
@@ -215,6 +218,7 @@ function useFormState(props) {
     const _mounted = React.useRef(true);
     const _localProxyFormState = React.useRef({
         isDirty: false,
+        isLoading: false,
         dirtyFields: false,
         touchedFields: false,
         isValidating: false,
@@ -260,7 +264,7 @@ var generateWatchOutput = (names, _names, formValues, isGlobal) => {
     if (Array.isArray(names)) {
         return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName), get(formValues, fieldName)));
     }
-    _names.watchAll = !!isGlobal;
+    isGlobal && (_names.watchAll = true);
     return formValues;
 };
 
@@ -327,17 +331,11 @@ function useWatch(props) {
         next: (formState) => {
             if (shouldSubscribeByName(_name.current, formState.name, exact)) {
                 const fieldValues = generateWatchOutput(_name.current, control._names, formState.values || control._formValues);
-                updateValue(isUndefined(_name.current) || !isUndefined(fieldValues)
-                    ? cloneObject(fieldValues)
-                    : isUndefined(fieldValues)
-                        ? defaultValue
-                        : fieldValues);
+                updateValue(isUndefined(fieldValues) ? defaultValue : cloneObject(fieldValues));
             }
         },
     });
-    const [value, updateValue] = React.useState(isUndefined(defaultValue)
-        ? control._getWatch(name)
-        : defaultValue);
+    const [value, updateValue] = React.useState(control._getWatch(name, defaultValue));
     React.useEffect(() => control._removeUnmounted());
     return value;
 }
@@ -569,6 +567,14 @@ var getFocusFieldName = (name, index, options = {}) => options.shouldFocus || is
         `${name}.${isUndefined(options.focusIndex) ? index : options.focusIndex}.`
     : '';
 
+var getValidationModes = (mode) => ({
+    isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
+    isOnBlur: mode === VALIDATION_MODE.onBlur,
+    isOnChange: mode === VALIDATION_MODE.onChange,
+    isOnAll: mode === VALIDATION_MODE.all,
+    isOnTouch: mode === VALIDATION_MODE.onTouched,
+});
+
 var isWatched = (name, _names, isBlurEvent) => !isBlurEvent &&
     (_names.watchAll ||
         _names.watch.has(name) ||
@@ -667,7 +673,9 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
     const isRadio = isRadioInput(ref);
     const isCheckBox = isCheckBoxInput(ref);
     const isRadioOrCheckbox = isRadio || isCheckBox;
-    const isEmpty = ((valueAsNumber || isFileInput(ref)) && !ref.value) ||
+    const isEmpty = ((valueAsNumber || isFileInput(ref)) &&
+        isUndefined(ref.value) &&
+        isUndefined(inputValue)) ||
         inputValue === '' ||
         (Array.isArray(inputValue) && !inputValue.length);
     const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
@@ -832,14 +840,6 @@ function append(data, value) {
 
 var fillEmptyArray = (value) => Array.isArray(value) ? value.map(() => undefined) : undefined;
 
-var getValidationModes = (mode) => ({
-    isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
-    isOnBlur: mode === VALIDATION_MODE.onBlur,
-    isOnChange: mode === VALIDATION_MODE.onChange,
-    isOnAll: mode === VALIDATION_MODE.all,
-    isOnTouch: mode === VALIDATION_MODE.onTouched,
-});
-
 function insert(data, index, value) {
     return [
         ...data.slice(0, index),
@@ -1115,7 +1115,7 @@ function useFieldArray(props) {
             values: control._formValues,
         });
         control._names.focus &&
-            focusFieldBy(control._fields, (key) => !!key && key.startsWith(control._names.focus));
+            focusFieldBy(control._fields, (key) => !!key && key.startsWith(control._names.focus || ''));
         control._names.focus = '';
         control._proxyFormState.isValid && control._updateValid();
     }, [fields, name, control]);
@@ -1386,7 +1386,7 @@ const defaultOptions = {
     reValidateMode: VALIDATION_MODE.onChange,
     shouldFocusError: true,
 };
-function createFormControl(props = {}) {
+function createFormControl(props = {}, flushRootRender) {
     let _options = {
         ...defaultOptions,
         ...props,
@@ -1395,6 +1395,7 @@ function createFormControl(props = {}) {
     let _formState = {
         submitCount: 0,
         isDirty: false,
+        isLoading: true,
         isValidating: false,
         isSubmitted: false,
         isSubmitting: false,
@@ -1424,7 +1425,6 @@ function createFormControl(props = {}) {
     };
     let delayErrorCallback;
     let timer = 0;
-    let validateFields = {};
     const _proxyFormState = {
         isDirty: false,
         dirtyFields: false,
@@ -1449,7 +1449,7 @@ function createFormControl(props = {}) {
         if (_proxyFormState.isValid) {
             const isValid = _options.resolver
                 ? isEmptyObject((await _executeSchema()).errors)
-                : (await executeBuiltInValidation(_fields, true)).valid;
+                : await executeBuiltInValidation(_fields, true);
             if (isValid !== _formState.isValid) {
                 _formState.isValid = isValid;
                 _subjects.state.next({
@@ -1458,6 +1458,10 @@ function createFormControl(props = {}) {
             }
         }
     };
+    const _updateIsValidating = (value) => _proxyFormState.isValidating &&
+        _subjects.state.next({
+            isValidating: value,
+        });
     const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
         if (args && method) {
             _stateFlags.action = true;
@@ -1481,6 +1485,7 @@ function createFormControl(props = {}) {
                 _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
             }
             _subjects.state.next({
+                name,
                 isDirty: _getDirty(name, values),
                 dirtyFields: _formState.dirtyFields,
                 errors: _formState.errors,
@@ -1515,12 +1520,12 @@ function createFormControl(props = {}) {
         const output = {
             name,
         };
-        if (_proxyFormState.isDirty) {
-            isPreviousDirty = _formState.isDirty;
-            _formState.isDirty = output.isDirty = _getDirty();
-            shouldUpdateField = isPreviousDirty !== output.isDirty;
-        }
         if (!isBlurEvent || shouldDirty) {
+            if (_proxyFormState.isDirty) {
+                isPreviousDirty = _formState.isDirty;
+                _formState.isDirty = output.isDirty = _getDirty();
+                shouldUpdateField = isPreviousDirty !== output.isDirty;
+            }
             const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
             isPreviousDirty = get(_formState.dirtyFields, name);
             isCurrentFieldPristine
@@ -1577,18 +1582,9 @@ function createFormControl(props = {}) {
             };
             _subjects.state.next(updatedFormState);
         }
-        validateFields[name]--;
-        if (_proxyFormState.isValidating &&
-            !Object.values(validateFields).some((v) => v)) {
-            _subjects.state.next({
-                isValidating: false,
-            });
-            validateFields = {};
-        }
+        _updateIsValidating(false);
     };
-    const _executeSchema = async (name) => _options.resolver
-        ? await _options.resolver({ ..._formValues }, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation))
-        : {};
+    const _executeSchema = async (name) => await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
     const executeSchemaAndUpdateState = async (names) => {
         const { errors } = await _executeSchema();
         if (names) {
@@ -1615,9 +1611,6 @@ function createFormControl(props = {}) {
                     const isFieldArrayRoot = _names.array.has(_f.name);
                     const fieldError = await validateField(field, get(_formValues, _f.name), shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation, isFieldArrayRoot);
                     if (fieldError[_f.name]) {
-                        if (_f.name === context.name) {
-                            context.error = fieldError[context.name];
-                        }
                         context.valid = false;
                         if (shouldOnlyCheckValid) {
                             break;
@@ -1634,7 +1627,7 @@ function createFormControl(props = {}) {
                     (await executeBuiltInValidation(fieldValue, shouldOnlyCheckValid, context));
             }
         }
-        return context;
+        return context.valid;
     };
     const _removeUnmounted = () => {
         for (const name of _names.unMount) {
@@ -1748,17 +1741,17 @@ function createFormControl(props = {}) {
         _subjects.watch.next({
             name,
         });
+        !_stateFlags.mount && flushRootRender();
     };
     const onChange = async (event) => {
         const target = event.target;
         let name = target.name;
         const field = get(_fields, name);
+        const getCurrentFieldValue = () => target.type ? getFieldValue(field._f) : getEventValue(event);
         if (field) {
             let error;
             let isValid;
-            const fieldValue = target.type
-                ? getFieldValue(field._f)
-                : getEventValue(event);
+            const fieldValue = getCurrentFieldValue();
             const isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
             const shouldSkipValidation = (!hasValidation(field._f) &&
                 !_options.resolver &&
@@ -1787,12 +1780,7 @@ function createFormControl(props = {}) {
                     _subjects.state.next({ name, ...(watched ? {} : fieldState) }));
             }
             !isBlurEvent && watched && _subjects.state.next({});
-            validateFields[name] = validateFields[name]
-                ? validateFields[name] + 1
-                : 1;
-            _subjects.state.next({
-                isValidating: true,
-            });
+            _updateIsValidating(true);
             if (_options.resolver) {
                 const { errors } = await _executeSchema([name]);
                 const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
@@ -1802,30 +1790,29 @@ function createFormControl(props = {}) {
                 isValid = isEmptyObject(errors);
             }
             else {
-                if (_proxyFormState.isValid) {
-                    const buildInValidationResult = await executeBuiltInValidation(_fields, true, {
-                        name,
-                        valid: true,
-                    });
-                    error = buildInValidationResult.error || {};
-                    isValid = buildInValidationResult.valid;
+                error = (await validateField(field, get(_formValues, name), shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
+                if (error) {
+                    isValid = false;
                 }
-                if (!error || isEmptyObject(error)) {
-                    error = (await validateField(field, get(_formValues, name), shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
+                else if (_proxyFormState.isValid) {
+                    isValid = await executeBuiltInValidation(_fields, true);
                 }
             }
-            field._f.deps &&
-                trigger(field._f.deps);
-            shouldRenderByError(name, isValid, error, fieldState);
+            if (!isPrimitive(fieldValue) || getCurrentFieldValue() === fieldValue) {
+                field._f.deps &&
+                    trigger(field._f.deps);
+                shouldRenderByError(name, isValid, error, fieldState);
+            }
+            else {
+                _updateIsValidating(false);
+            }
         }
     };
     const trigger = async (name, options = {}) => {
         let isValid;
         let validationResult;
         const fieldNames = convertToArrayPayload(name);
-        _subjects.state.next({
-            isValidating: true,
-        });
+        _updateIsValidating(true);
         if (_options.resolver) {
             const errors = await executeSchemaAndUpdateState(isUndefined(name) ? name : fieldNames);
             isValid = isEmptyObject(errors);
@@ -1836,13 +1823,12 @@ function createFormControl(props = {}) {
         else if (name) {
             validationResult = (await Promise.all(fieldNames.map(async (fieldName) => {
                 const field = get(_fields, fieldName);
-                return (await executeBuiltInValidation(field && field._f ? { [fieldName]: field } : field)).valid;
+                return await executeBuiltInValidation(field && field._f ? { [fieldName]: field } : field);
             }))).every(Boolean);
             !(!validationResult && !_formState.isValid) && _updateValid();
         }
         else {
-            validationResult = isValid = (await executeBuiltInValidation(_fields))
-                .valid;
+            validationResult = isValid = await executeBuiltInValidation(_fields);
         }
         _subjects.state.next({
             ...(!isString(name) ||
@@ -1898,7 +1884,7 @@ function createFormControl(props = {}) {
     };
     const watch = (name, defaultValue) => isFunction(name)
         ? _subjects.watch.subscribe({
-            next: (info) => name(_getWatch(undefined, defaultValue), info),
+            next: (payload) => name(_getWatch(undefined, defaultValue), payload),
         })
         : _getWatch(name, defaultValue, true);
     const unregister = (name, options = {}) => {
@@ -1983,9 +1969,7 @@ function createFormControl(props = {}) {
                                     refs: [
                                         ...refs.filter(live),
                                         fieldRef,
-                                        ...(!!Array.isArray(get(_defaultValues, name))
-                                            ? [{}]
-                                            : []),
+                                        ...(Array.isArray(get(_defaultValues, name)) ? [{}] : []),
                                     ],
                                     ref: { type: fieldRef.type, name },
                                 }
@@ -2138,6 +2122,7 @@ function createFormControl(props = {}) {
             watchAll: false,
             focus: '',
         };
+        !_stateFlags.mount && flushRootRender();
         _stateFlags.mount =
             !_proxyFormState.isValid || !!keepStateOptions.keepIsValid;
         _stateFlags.watch = !!props.shouldUnregister;
@@ -2184,6 +2169,9 @@ function createFormControl(props = {}) {
     if (isFunction(_options.defaultValues)) {
         _options.defaultValues().then((values) => {
             reset(values, _options.resetOptions);
+            _subjects.state.next({
+                isLoading: false,
+            });
         });
     }
     return {
@@ -2289,6 +2277,7 @@ function useForm(props = {}) {
     const [formState, updateFormState] = React.useState({
         isDirty: false,
         isValidating: false,
+        isLoading: true,
         isSubmitted: false,
         isSubmitting: false,
         isSubmitSuccessful: false,
@@ -2303,7 +2292,7 @@ function useForm(props = {}) {
     });
     if (!_formControl.current) {
         _formControl.current = {
-            ...createFormControl(props),
+            ...createFormControl(props, () => updateFormState((formState) => ({ ...formState }))),
             formState,
         };
     }