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

package/dist/index.esm.mjs

@@ -122,10 +122,7 @@ const useFormContext = () => React.useContext(HookFormContext);
  * }
  * ```
  */
-const FormProvider = (props) => {
-    const { children, ...data } = props;
-    return (React.createElement(HookFormContext.Provider, { value: data }, children));
-};
+const FormProvider = ({ children, ...data }) => (React.createElement(HookFormContext.Provider, { value: React.useState(data)[0] }, children));
 
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
     const result = {
@@ -173,7 +170,7 @@ function useSubscribe(props) {
     React.useEffect(() => {
         const subscription = !props.disabled &&
             _props.current.subject.subscribe({
-                next: _props.current.callback,
+                next: _props.current.next,
             });
         return () => {
             subscription && subscription.unsubscribe();
@@ -228,13 +225,13 @@ function useFormState(props) {
     _name.current = name;
     useSubscribe({
         disabled,
-        callback: React.useCallback((value) => _mounted.current &&
+        next: (value) => _mounted.current &&
             shouldSubscribeByName(_name.current, value.name, exact) &&
             shouldRenderFormState(value, _localProxyFormState.current) &&
             updateFormState({
                 ...control._formState,
                 ...value,
-            }), [control, exact]),
+            }),
         subject: control._subjects.state,
     });
     React.useEffect(() => {
@@ -327,10 +324,14 @@ function useWatch(props) {
     useSubscribe({
         disabled,
         subject: control._subjects.watch,
-        callback: (formState) => {
+        next: (formState) => {
             if (shouldSubscribeByName(_name.current, formState.name, exact)) {
                 const fieldValues = generateWatchOutput(_name.current, control._names, formState.values || control._formValues);
-                updateValue(isUndefined(fieldValues) ? defaultValue : cloneObject(fieldValues));
+                updateValue(isUndefined(_name.current) || !isUndefined(fieldValues)
+                    ? cloneObject(fieldValues)
+                    : isUndefined(fieldValues)
+                        ? defaultValue
+                        : fieldValues);
             }
         },
     });
@@ -980,17 +981,16 @@ function useFieldArray(props) {
     control._names.array.add(name);
     props.rules &&
         control.register(name, props.rules);
-    const callback = React.useCallback(({ values, name: fieldArrayName, }) => {
-        if (fieldArrayName === _name.current || !fieldArrayName) {
-            const fieldValues = get(values, _name.current);
-            if (Array.isArray(fieldValues)) {
-                setFields(fieldValues);
-                ids.current = fieldValues.map(generateId);
-            }
-        }
-    }, []);
     useSubscribe({
-        callback,
+        next: ({ values, name: fieldArrayName, }) => {
+            if (fieldArrayName === _name.current || !fieldArrayName) {
+                const fieldValues = get(values, _name.current);
+                if (Array.isArray(fieldValues)) {
+                    setFields(fieldValues);
+                    ids.current = fieldValues.map(generateId);
+                }
+            }
+        },
         subject: control._subjects.array,
     });
     const updateValues = React.useCallback((updatedFieldArrayValues) => {
@@ -1205,8 +1205,8 @@ function deepEqual(object1, object2) {
 
 var isHTMLElement = (value) => {
     const owner = value ? value.ownerDocument : 0;
-    const ElementClass = owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement;
-    return value instanceof ElementClass;
+    return (value instanceof
+        (owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement));
 };
 
 var isMultipleSelect = (element) => element.type === `select-multiple`;
@@ -1391,6 +1391,7 @@ function createFormControl(props = {}) {
         ...defaultOptions,
         ...props,
     };
+    const shouldCaptureDirtyFields = props.resetOptions && props.resetOptions.keepDirtyValues;
     let _formState = {
         submitCount: 0,
         isDirty: false,
@@ -1404,7 +1405,9 @@ function createFormControl(props = {}) {
         errors: {},
     };
     let _fields = {};
-    let _defaultValues = cloneObject(_options.defaultValues) || {};
+    let _defaultValues = isObject(_options.defaultValues)
+        ? cloneObject(_options.defaultValues) || {}
+        : {};
     let _formValues = _options.shouldUnregister
         ? {}
         : cloneObject(_defaultValues);
@@ -1443,11 +1446,10 @@ function createFormControl(props = {}) {
         timer = window.setTimeout(callback, wait);
     };
     const _updateValid = async () => {
-        let isValid = false;
         if (_proxyFormState.isValid) {
-            isValid = _options.resolver
+            const isValid = _options.resolver
                 ? isEmptyObject((await _executeSchema()).errors)
-                : await executeBuiltInValidation(_fields, true);
+                : (await executeBuiltInValidation(_fields, true)).valid;
             if (isValid !== _formState.isValid) {
                 _formState.isValid = isValid;
                 _subjects.state.next({
@@ -1455,7 +1457,6 @@ function createFormControl(props = {}) {
                 });
             }
         }
-        return isValid;
     };
     const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
         if (args && method) {
@@ -1519,15 +1520,17 @@ function createFormControl(props = {}) {
             _formState.isDirty = output.isDirty = _getDirty();
             shouldUpdateField = isPreviousDirty !== output.isDirty;
         }
-        if (_proxyFormState.dirtyFields && (!isBlurEvent || shouldDirty)) {
-            isPreviousDirty = get(_formState.dirtyFields, name);
+        if (!isBlurEvent || shouldDirty) {
             const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
+            isPreviousDirty = get(_formState.dirtyFields, name);
             isCurrentFieldPristine
                 ? unset(_formState.dirtyFields, name)
                 : set(_formState.dirtyFields, name, true);
             output.dirtyFields = _formState.dirtyFields;
             shouldUpdateField =
-                shouldUpdateField || isPreviousDirty !== !isCurrentFieldPristine;
+                shouldUpdateField ||
+                    (_proxyFormState.dirtyFields &&
+                        isPreviousDirty !== !isCurrentFieldPristine);
         }
         if (isBlurEvent) {
             const isPreviousFieldTouched = get(_formState.touchedFields, name);
@@ -1612,6 +1615,9 @@ 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;
@@ -1628,7 +1634,7 @@ function createFormControl(props = {}) {
                     (await executeBuiltInValidation(fieldValue, shouldOnlyCheckValid, context));
             }
         }
-        return context.valid;
+        return context;
     };
     const _removeUnmounted = () => {
         for (const name of _names.unMount) {
@@ -1697,7 +1703,8 @@ function createFormControl(props = {}) {
         }
         (options.shouldDirty || options.shouldTouch) &&
             updateTouchAndDirty(name, fieldValue, options.shouldTouch, options.shouldDirty, true);
-        options.shouldValidate && trigger(name);
+        options.shouldValidate &&
+            trigger(name);
     };
     const setValues = (name, value, options) => {
         for (const fieldKey in value) {
@@ -1795,8 +1802,17 @@ function createFormControl(props = {}) {
                 isValid = isEmptyObject(errors);
             }
             else {
-                error = (await validateField(field, get(_formValues, name), shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
-                _updateValid();
+                if (_proxyFormState.isValid) {
+                    const buildInValidationResult = await executeBuiltInValidation(_fields, true, {
+                        name,
+                        valid: true,
+                    });
+                    error = buildInValidationResult.error || {};
+                    isValid = buildInValidationResult.valid;
+                }
+                if (!error || isEmptyObject(error)) {
+                    error = (await validateField(field, get(_formValues, name), shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
+                }
             }
             field._f.deps &&
                 trigger(field._f.deps);
@@ -1820,12 +1836,13 @@ 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);
+                return (await executeBuiltInValidation(field && field._f ? { [fieldName]: field } : field)).valid;
             }))).every(Boolean);
             !(!validationResult && !_formState.isValid) && _updateValid();
         }
         else {
-            validationResult = isValid = await executeBuiltInValidation(_fields);
+            validationResult = isValid = (await executeBuiltInValidation(_fields))
+                .valid;
         }
         _subjects.state.next({
             ...(!isString(name) ||
@@ -2074,7 +2091,7 @@ function createFormControl(props = {}) {
             _defaultValues = updatedValues;
         }
         if (!keepStateOptions.keepValues) {
-            if (keepStateOptions.keepDirtyValues) {
+            if (keepStateOptions.keepDirtyValues || shouldCaptureDirtyFields) {
                 for (const fieldName of _names.mount) {
                     get(_formState.dirtyFields, fieldName)
                         ? set(values, fieldName, get(_formValues, fieldName))
@@ -2164,6 +2181,11 @@ function createFormControl(props = {}) {
             }
         }
     };
+    if (isFunction(_options.defaultValues)) {
+        _options.defaultValues().then((values) => {
+            reset(values, _options.resetOptions);
+        });
+    }
     return {
         control: {
             register,
@@ -2177,6 +2199,7 @@ function createFormControl(props = {}) {
             _removeUnmounted,
             _updateFieldArray,
             _getFieldArray,
+            _reset,
             _subjects,
             _proxyFormState,
             get _fields() {
@@ -2274,7 +2297,9 @@ function useForm(props = {}) {
         dirtyFields: {},
         touchedFields: {},
         errors: {},
-        defaultValues: props.defaultValues,
+        defaultValues: isFunction(props.defaultValues)
+            ? undefined
+            : props.defaultValues,
     });
     if (!_formControl.current) {
         _formControl.current = {
@@ -2286,7 +2311,7 @@ function useForm(props = {}) {
     control._options = props;
     useSubscribe({
         subject: control._subjects.state,
-        callback: React.useCallback((value) => {
+        next: (value) => {
             if (shouldRenderFormState(value, control._proxyFormState, true)) {
                 control._formState = {
                     ...control._formState,
@@ -2294,7 +2319,7 @@ function useForm(props = {}) {
                 };
                 updateFormState({ ...control._formState });
             }
-        }, [control]),
+        },
     });
     React.useEffect(() => {
         if (!control._stateFlags.mount) {
@@ -2307,6 +2332,11 @@ function useForm(props = {}) {
         }
         control._removeUnmounted();
     });
+    React.useEffect(() => {
+        if (props.values && !deepEqual(props.values, control._defaultValues)) {
+            control._reset(props.values, control._options.resetOptions);
+        }
+    }, [props.values, control]);
     React.useEffect(() => {
         formState.submitCount && control._focusError();
     }, [control, formState.submitCount]);