react-hook-form 7.71.2 → 7.72.1

package/dist/index.esm.mjs

@@ -18,9 +18,9 @@ var getEventValue = (event) => isObject(event) && event.target
         : event.target.value
     : event;
 
-var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/)) || name;
-
-var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
+var isNameInFieldArray = (names, name) => name
+    .split('.')
+    .some((part, index, arr) => !isNaN(Number(part)) && names.has(arr.slice(0, index).join('.')));
 
 var isPlainObject = (tempObject) => {
     const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
@@ -105,6 +105,9 @@ const EVENTS = {
     BLUR: 'blur',
     FOCUS_OUT: 'focusout',
     CHANGE: 'change',
+    SUBMIT: 'submit',
+    TRIGGER: 'trigger',
+    VALID: 'valid',
 };
 const VALIDATION_MODE = {
     onBlur: 'onBlur',
@@ -122,6 +125,8 @@ const INPUT_VALIDATION_RULES = {
     required: 'required',
     validate: 'validate',
 };
+const FORM_ERROR_TYPE = 'form';
+const ROOT_ERROR_TYPE = 'root';
 
 /**
  * Separate context for `control` to prevent unnecessary rerenders.
@@ -259,8 +264,8 @@ function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
         if (key !== 'ref') {
             const val2 = object2[key];
             if ((isDateObject(val1) && isDateObject(val2)) ||
-                (isObject(val1) && isObject(val2)) ||
-                (Array.isArray(val1) && Array.isArray(val2))
+                ((isObject(val1) || Array.isArray(val1)) &&
+                    (isObject(val2) || Array.isArray(val2)))
                 ? !deepEqual(val1, val2, _internal_visited)
                 : !Object.is(val1, val2)) {
                 return false;
@@ -635,42 +640,43 @@ const useFormContext = () => React.useContext(HookFormContext);
  */
 const FormProvider = (props) => {
     const { children, watch, getValues, getFieldState, setError, clearErrors, setValue, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, } = props;
-    return (React.createElement(HookFormContext.Provider, { value: React.useMemo(() => ({
-            watch,
-            getValues,
-            getFieldState,
-            setError,
-            clearErrors,
-            setValue,
-            trigger,
-            formState,
-            resetField,
-            reset,
-            handleSubmit,
-            unregister,
-            control,
-            register,
-            setFocus,
-            subscribe,
-        }), [
-            clearErrors,
-            control,
-            formState,
-            getFieldState,
-            getValues,
-            handleSubmit,
-            register,
-            reset,
-            resetField,
-            setError,
-            setFocus,
-            setValue,
-            subscribe,
-            trigger,
-            unregister,
-            watch,
-        ]) },
-        React.createElement(HookFormControlContext.Provider, { value: control }, children)));
+    const memoizedValue = React.useMemo(() => ({
+        watch,
+        getValues,
+        getFieldState,
+        setError,
+        clearErrors,
+        setValue,
+        trigger,
+        formState,
+        resetField,
+        reset,
+        handleSubmit,
+        unregister,
+        control,
+        register,
+        setFocus,
+        subscribe,
+    }), [
+        clearErrors,
+        control,
+        formState,
+        getFieldState,
+        getValues,
+        handleSubmit,
+        register,
+        reset,
+        resetField,
+        setError,
+        setFocus,
+        setValue,
+        subscribe,
+        trigger,
+        unregister,
+        watch,
+    ]);
+    return (React.createElement(HookFormContext.Provider, { value: memoizedValue },
+        React.createElement(HookFormControlContext.Provider, { value: memoizedValue.control }, children)));
 };
 
 const POST_REQUEST = 'post';
@@ -1009,6 +1015,8 @@ function getFieldValue(_f) {
     return getFieldValueAs(isUndefined(ref.value) ? _f.ref.value : ref.value, _f);
 }
 
+var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/)) || name;
+
 var getResolverOptions = (fieldsNames, _fields, criteriaMode, shouldUseNativeValidation) => {
     const fields = {};
     for (const name of fieldsNames) {
@@ -1167,7 +1175,7 @@ var unsetEmptyArray = (ref, name) => !compact(get(ref, name)).length && unset(re
 
 var updateFieldArrayRootError = (errors, error, name) => {
     const fieldArrayErrors = convertToArrayPayload(get(errors, name));
-    set(fieldArrayErrors, 'root', error[name]);
+    set(fieldArrayErrors, ROOT_ERROR_TYPE, error[name]);
     set(errors, name, fieldArrayErrors);
     return errors;
 };
@@ -1415,6 +1423,7 @@ function createFormControl(props = {}) {
         unMount: new Set(),
         array: new Set(),
         watch: new Set(),
+        registerName: new Set(),
     };
     let delayErrorCallback;
     let timer = 0;
@@ -1456,7 +1465,11 @@ function createFormControl(props = {}) {
                 _updateIsValidating();
             }
             else {
-                isValid = await executeBuiltInValidation(_fields, true);
+                isValid = await executeBuiltInValidation({
+                    fields: _fields,
+                    onlyCheckValid: true,
+                    eventType: EVENTS.VALID,
+                });
             }
             if (isValid !== _formState.isValid) {
                 _subjects.state.next({
@@ -1484,6 +1497,11 @@ function createFormControl(props = {}) {
             });
         }
     };
+    const _updateDirtyFields = (name) => {
+        const fullDirtyFields = getDirtyFields(_defaultValues, _formValues);
+        const rootName = getNodeParentName(name);
+        set(_formState.dirtyFields, rootName, get(fullDirtyFields, rootName));
+    };
     const _setFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
         if (args && method && !_options.disabled) {
             _state.action = true;
@@ -1505,7 +1523,7 @@ function createFormControl(props = {}) {
                 shouldSetValues && set(_formState.touchedFields, name, touchedFields);
             }
             if (_proxyFormState.dirtyFields || _proxySubscribeFormState.dirtyFields) {
-                _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
+                _updateDirtyFields(name);
             }
             _subjects.state.next({
                 name,
@@ -1619,8 +1637,7 @@ function createFormControl(props = {}) {
     };
     const _runSchema = async (name) => {
         _updateIsValidating(name, true);
-        const result = await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
-        return result;
+        return await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
     };
     const executeSchemaAndUpdateState = async (names) => {
         const { errors } = await _runSchema(names);
@@ -1638,9 +1655,55 @@ function createFormControl(props = {}) {
         }
         return errors;
     };
-    const executeBuiltInValidation = async (fields, shouldOnlyCheckValid, context = {
+    const validateForm = async ({ name, eventType, }) => {
+        if (props.validate) {
+            const result = await props.validate({
+                formValues: _formValues,
+                formState: _formState,
+                name,
+                eventType,
+            });
+            if (isObject(result)) {
+                for (const key in result) {
+                    const error = result[key];
+                    if (error) {
+                        setError(`${FORM_ERROR_TYPE}.${key}`, {
+                            message: isString(result.message) ? result.message : '',
+                            type: INPUT_VALIDATION_RULES.validate,
+                        });
+                    }
+                }
+            }
+            else if (isString(result) || !result) {
+                setError(FORM_ERROR_TYPE, {
+                    message: result || '',
+                    type: INPUT_VALIDATION_RULES.validate,
+                });
+            }
+            else {
+                clearErrors(FORM_ERROR_TYPE);
+            }
+            return result;
+        }
+        return true;
+    };
+    const executeBuiltInValidation = async ({ fields, onlyCheckValid, name, eventType, context = {
         valid: true,
-    }) => {
+        runRootValidation: false,
+    }, }) => {
+        if (props.validate) {
+            context.runRootValidation = true;
+            const result = await validateForm({
+                name,
+                eventType,
+            });
+            if (!result) {
+                context.valid = false;
+                if (onlyCheckValid) {
+                    return context.valid;
+                }
+            }
+        }
         for (const name in fields) {
             const field = fields[name];
             if (field) {
@@ -1651,25 +1714,34 @@ function createFormControl(props = {}) {
                     if (isPromiseFunction && _proxyFormState.validatingFields) {
                         _updateIsValidating([_f.name], true);
                     }
-                    const fieldError = await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
+                    const fieldError = await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !onlyCheckValid, isFieldArrayRoot);
                     if (isPromiseFunction && _proxyFormState.validatingFields) {
                         _updateIsValidating([_f.name]);
                     }
                     if (fieldError[_f.name]) {
                         context.valid = false;
-                        if (shouldOnlyCheckValid || props.shouldUseNativeValidation) {
+                        if (onlyCheckValid) {
                             break;
                         }
                     }
-                    !shouldOnlyCheckValid &&
+                    !onlyCheckValid &&
                         (get(fieldError, _f.name)
                             ? isFieldArrayRoot
                                 ? updateFieldArrayRootError(_formState.errors, fieldError, _f.name)
                                 : set(_formState.errors, _f.name, fieldError[_f.name])
                             : unset(_formState.errors, _f.name));
+                    if (props.shouldUseNativeValidation && fieldError[_f.name]) {
+                        break;
+                    }
                 }
                 !isEmptyObject(fieldValue) &&
-                    (await executeBuiltInValidation(fieldValue, shouldOnlyCheckValid, context));
+                    (await executeBuiltInValidation({
+                        context,
+                        onlyCheckValid,
+                        fields: fieldValue,
+                        name: name,
+                        eventType,
+                    }));
             }
         }
         return context.valid;
@@ -1780,9 +1852,10 @@ function createFormControl(props = {}) {
                 _proxySubscribeFormState.isDirty ||
                 _proxySubscribeFormState.dirtyFields) &&
                 options.shouldDirty) {
+                _updateDirtyFields(name);
                 _subjects.state.next({
                     name,
-                    dirtyFields: getDirtyFields(_defaultValues, _formValues),
+                    dirtyFields: _formState.dirtyFields,
                     isDirty: _getDirty(name, cloneValue),
                 });
             }
@@ -1828,6 +1901,7 @@ function createFormControl(props = {}) {
                 : getEventValue(event);
             const isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
             const shouldSkipValidation = (!hasValidation(field._f) &&
+                !props.validate &&
                 !_options.resolver &&
                 !get(_formState.errors, name) &&
                 !field._f.deps) ||
@@ -1865,6 +1939,12 @@ function createFormControl(props = {}) {
                 return (shouldRender &&
                     _subjects.state.next({ name, ...(watched ? {} : fieldState) }));
             }
+            if (!_options.resolver && props.validate) {
+                await validateForm({
+                    name: name,
+                    eventType: event.type,
+                });
+            }
             !isBlurEvent && watched && _subjects.state.next({ ..._formState });
             if (_options.resolver) {
                 const { errors } = await _runSchema([name]);
@@ -1889,7 +1969,12 @@ function createFormControl(props = {}) {
                     }
                     else if (_proxyFormState.isValid ||
                         _proxySubscribeFormState.isValid) {
-                        isValid = await executeBuiltInValidation(_fields, true);
+                        isValid = await executeBuiltInValidation({
+                            fields: _fields,
+                            onlyCheckValid: true,
+                            name: name,
+                            eventType: event.type,
+                        });
                     }
                 }
             }
@@ -1922,12 +2007,19 @@ 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({
+                    fields: field && field._f ? { [fieldName]: field } : field,
+                    eventType: EVENTS.TRIGGER,
+                });
             }))).every(Boolean);
             !(!validationResult && !_formState.isValid) && _setValid();
         }
         else {
-            validationResult = isValid = await executeBuiltInValidation(_fields);
+            validationResult = isValid = await executeBuiltInValidation({
+                fields: _fields,
+                name,
+                eventType: EVENTS.TRIGGER,
+            });
         }
         _subjects.state.next({
             ...(!isString(name) ||
@@ -2073,6 +2165,7 @@ function createFormControl(props = {}) {
     const register = (name, options = {}) => {
         let field = get(_fields, name);
         const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
+        const shouldRevalidateRemount = !_names.registerName.has(name) && field && !field._f.mount;
         set(_fields, name, {
             ...(field || {}),
             _f: {
@@ -2083,7 +2176,7 @@ function createFormControl(props = {}) {
             },
         });
         _names.mount.add(name);
-        if (field) {
+        if (field && !shouldRevalidateRemount) {
             _setDisabledField({
                 disabled: isBoolean(options.disabled)
                     ? options.disabled
@@ -2113,7 +2206,9 @@ function createFormControl(props = {}) {
             onBlur: onChange,
             ref: (ref) => {
                 if (ref) {
+                    _names.registerName.add(name);
                     register(name, options);
+                    _names.registerName.delete(name);
                     field = get(_fields, name);
                     const fieldRef = isUndefined(ref.value)
                         ? ref.querySelectorAll
@@ -2192,14 +2287,17 @@ function createFormControl(props = {}) {
             fieldValues = cloneObject(values);
         }
         else {
-            await executeBuiltInValidation(_fields);
+            await executeBuiltInValidation({
+                fields: _fields,
+                eventType: EVENTS.SUBMIT,
+            });
         }
         if (_names.disabled.size) {
             for (const name of _names.disabled) {
                 unset(fieldValues, name);
             }
         }
-        unset(_formState.errors, 'root');
+        unset(_formState.errors, ROOT_ERROR_TYPE);
         if (isEmptyObject(_formState.errors)) {
             _subjects.state.next({
                 errors: {},
@@ -2323,6 +2421,7 @@ function createFormControl(props = {}) {
             mount: keepStateOptions.keepDirtyValues ? _names.mount : new Set(),
             unMount: new Set(),
             array: new Set(),
+            registerName: new Set(),
             disabled: new Set(),
             watch: new Set(),
             watchAll: false,