@bombillazo/rhf-plus 7.64.0-plus.0 → 7.64.0-plus.2

package/dist/index.esm.mjs

@@ -453,6 +453,8 @@ function useController(props) {
         ...props.rules,
         value,
         ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
+        ...(props.mode ? { mode: props.mode } : {}),
+        ...(props.reValidateMode ? { reValidateMode: props.reValidateMode } : {}),
     }));
     const mergedRules = React.useMemo(() => mergeMissingKeysAsUndefined(_previousRules.current, props.rules), [props.rules]);
     // Update register props when rules change
@@ -461,9 +463,20 @@ function useController(props) {
             ...mergedRules,
             value,
             ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
+            ...(props.mode ? { mode: props.mode } : {}),
+            ...(props.reValidateMode ? { reValidateMode: props.reValidateMode } : {}),
         });
         _previousRules.current = props.rules;
-    }, [mergedRules, props.rules, value, props.disabled, control, name]);
+    }, [
+        mergedRules,
+        props.rules,
+        value,
+        props.disabled,
+        props.mode,
+        props.reValidateMode,
+        control,
+        name,
+    ]);
     _props.current = props;
     const fieldState = React.useMemo(() => Object.defineProperties({}, {
         invalid: {
@@ -577,6 +590,10 @@ function useController(props) {
             ...(isBoolean(_props.current.disabled)
                 ? { disabled: _props.current.disabled }
                 : {}),
+            ...(_props.current.mode ? { mode: _props.current.mode } : {}),
+            ...(_props.current.reValidateMode
+                ? { reValidateMode: _props.current.reValidateMode }
+                : {}),
         });
         const updateMounted = (name, value) => {
             const field = get(control._fields, name);
@@ -1196,21 +1213,37 @@ var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode,
 /**
  * Need to keep this order of parameters for backward compatibility
  */
-isFocusEvent) => {
+isFocusEvent, 
+/**
+ * Optional field-level validation mode that overrides form-level mode.
+ * When provided, this field's mode takes precedence over the form's mode.
+ * Partial because only the relevant flags (e.g., isOnChange, isOnBlur) need to be checked.
+ */
+fieldMode, 
+/**
+ * Optional field-level revalidation mode that overrides form-level reValidateMode.
+ * When provided, this field's reValidateMode takes precedence after form submission.
+ * Only includes isOnBlur and isOnChange as these are the only valid revalidation modes.
+ */
+fieldReValidateMode) => {
+    // Use field-level modes if provided, otherwise fallback to form-level modes
+    // This allows individual fields to have different validation timing than the form
+    const effectiveMode = fieldMode || mode;
+    const effectiveReValidateMode = fieldReValidateMode || reValidateMode;
     // Focus events should always skip validation
     if (isFocusEvent) {
         return true;
     }
-    if (mode.isOnAll) {
+    if (effectiveMode.isOnAll) {
         return false;
     }
-    else if (!isSubmitted && mode.isOnTouch) {
+    else if (!isSubmitted && effectiveMode.isOnTouch) {
         return !(isTouched || isBlurEvent);
     }
-    else if (isSubmitted ? reValidateMode.isOnBlur : mode.isOnBlur) {
+    else if (isSubmitted ? effectiveReValidateMode.isOnBlur : effectiveMode.isOnBlur) {
         return !isBlurEvent;
     }
-    else if (isSubmitted ? reValidateMode.isOnChange : mode.isOnChange) {
+    else if (isSubmitted ? effectiveReValidateMode.isOnChange : effectiveMode.isOnChange) {
         return isBlurEvent;
     }
     return true;
@@ -1225,25 +1258,13 @@ var updateFieldArrayRootError = (errors, error, name) => {
     return errors;
 };
 
-var isMessage = (value) => {
-    // Support strings (existing functionality)
-    if (isString(value)) {
-        return true;
-    }
-    // Support React elements only (not primitives like null, undefined, numbers)
-    if (React.isValidElement(value)) {
-        return true;
-    }
-    return false;
-};
-
 function getValidateError(result, ref, type = 'validate') {
-    if (isMessage(result) ||
-        (Array.isArray(result) && result.every(isMessage)) ||
+    if (isString(result) ||
+        (Array.isArray(result) && result.every(isString)) ||
         (isBoolean(result) && !result)) {
         return {
             type,
-            message: isMessage(result) ? result : '',
+            message: isString(result) ? result : '',
             ref,
         };
     }
@@ -1265,16 +1286,7 @@ var validateField = async (field, skippedFieldNames, formValues, validateAllFiel
     const inputRef = refs ? refs[0] : ref;
     const setCustomValidity = (message) => {
         if (shouldUseNativeValidation && inputRef.reportValidity) {
-            if (isBoolean(message)) {
-                inputRef.setCustomValidity('');
-            }
-            else if (typeof message === 'string') {
-                inputRef.setCustomValidity(message || '');
-            }
-            else {
-                // For ReactNode messages, convert to string or use empty string for native validation
-                inputRef.setCustomValidity('');
-            }
+            inputRef.setCustomValidity(isBoolean(message) ? '' : message || '');
             inputRef.reportValidity();
         }
     };
@@ -1305,7 +1317,7 @@ var validateField = async (field, skippedFieldNames, formValues, validateAllFiel
                 (isBoolean(inputValue) && !inputValue) ||
                 (isCheckBox && !getCheckboxValue(refs).isValid) ||
                 (isRadio && !getRadioValue(refs).isValid))) {
-        const { value, message } = isMessage(required)
+        const { value, message } = isString(required)
             ? { value: !!required, message: required }
             : getValueAndMessage(required);
         if (value) {
@@ -1955,6 +1967,16 @@ function createFormControl(props = {}) {
         };
         const validationModeBeforeSubmit = getValidationModes(_options.mode);
         const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
+        // Extract field-level validation modes if they exist
+        // Field-level modes take precedence over form-level modes, allowing
+        // individual fields to override when they validate (mode) and when they
+        // revalidate after form submission (reValidateMode)
+        const fieldMode = (field === null || field === void 0 ? void 0 : field._f.mode)
+            ? getValidationModes(field._f.mode)
+            : undefined;
+        const fieldReValidateMode = (field === null || field === void 0 ? void 0 : field._f.reValidateMode)
+            ? getValidationModes(field._f.reValidateMode)
+            : undefined;
         if (field) {
             // Check if field is disabled and should not process events
             const isFieldDisabled = isBoolean(field._f.disabled)
@@ -2013,7 +2035,7 @@ function createFormControl(props = {}) {
                 !_options.resolver &&
                 !get(_formState.errors, name) &&
                 !field._f.deps) ||
-                skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, validationModeAfterSubmit, validationModeBeforeSubmit, isFocusEvent);
+                skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, validationModeAfterSubmit, validationModeBeforeSubmit, isFocusEvent, fieldMode, fieldReValidateMode);
             const watched = isWatched(name, _names, isBlurEvent || isFocusEvent);
             set(_formValues, name, fieldValue);
             if (isBlurEvent) {