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

package/dist/index.esm.mjs

@@ -469,27 +469,50 @@ function useController(props) {
         },
         type: EVENTS.BLUR,
     }), [name, control._formValues]);
+    const elementRef = React.useRef(null);
     const ref = React.useCallback((elm) => {
+        elementRef.current = elm;
         const field = get(control._fields, name);
         if (field && elm) {
             field._f.ref = {
-                focus: () => elm.focus && elm.focus(),
-                select: () => elm.select && elm.select(),
+                focus: () => { var _a; return (_a = elm.focus) === null || _a === void 0 ? void 0 : _a.call(elm); },
+                select: () => { var _a; return (_a = elm.select) === null || _a === void 0 ? void 0 : _a.call(elm); },
                 setCustomValidity: (message) => elm.setCustomValidity(message),
                 reportValidity: () => elm.reportValidity(),
             };
         }
     }, [control._fields, name]);
-    const field = React.useMemo(() => ({
-        name,
-        value,
-        ...(isBoolean(disabled) || formState.disabled
-            ? { disabled: formState.disabled || disabled }
-            : {}),
-        onChange,
-        onBlur,
-        ref,
-    }), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
+    // Add scrollIntoView method to the ref callback function
+    ref.scrollIntoView = React.useCallback((options) => {
+        if (elementRef.current &&
+            typeof elementRef.current.scrollIntoView === 'function') {
+            elementRef.current.scrollIntoView(options);
+        }
+    }, []);
+    const field = React.useMemo(() => {
+        // Calculate if this specific field should be disabled
+        let isFieldDisabled;
+        if (isBoolean(disabled)) {
+            // Field-level disabled prop takes precedence
+            isFieldDisabled = disabled;
+        }
+        else if (isBoolean(control._options.disabled)) {
+            // Form-level boolean disabled
+            isFieldDisabled = control._options.disabled;
+        }
+        else if (Array.isArray(control._options.disabled)) {
+            // Form-level array disabled - check if this field is in the array
+            isFieldDisabled = control._options.disabled.includes(name);
+        }
+        return {
+            name,
+            value,
+            ...(isBoolean(isFieldDisabled) ? { disabled: isFieldDisabled } : {}),
+            onChange,
+            onBlur,
+            ref,
+        };
+    }, [name, disabled, control._options.disabled, onChange, onBlur, ref, value]);
     React.useEffect(() => {
         const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
         control.register(name, {
@@ -1122,7 +1145,17 @@ var updateFieldArrayRootError = (errors, error, name) => {
     return errors;
 };
 
-var isMessage = (value) => isString(value);
+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) ||
@@ -1152,7 +1185,16 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
     const inputRef = refs ? refs[0] : ref;
     const setCustomValidity = (message) => {
         if (shouldUseNativeValidation && inputRef.reportValidity) {
-            inputRef.setCustomValidity(isBoolean(message) ? '' : message || '');
+            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.reportValidity();
         }
     };
@@ -1347,7 +1389,9 @@ function createFormControl(props = {}) {
         dirtyFields: {},
         validatingFields: {},
         errors: _options.errors || {},
-        disabled: _options.disabled || false,
+        disabled: Array.isArray(_options.disabled)
+            ? false
+            : _options.disabled || false,
         metadata: _options.defaultMetadata || {},
     };
     let _fields = {};
@@ -1394,7 +1438,7 @@ function createFormControl(props = {}) {
         timer = setTimeout(callback, wait);
     };
     const _setValid = async (shouldUpdateValid) => {
-        if (!_options.disabled &&
+        if ((Array.isArray(_options.disabled) || !_options.disabled) &&
             (_proxyFormState.isValid ||
                 _proxySubscribeFormState.isValid ||
                 shouldUpdateValid)) {
@@ -1756,6 +1800,22 @@ function createFormControl(props = {}) {
         const validationModeBeforeSubmit = getValidationModes(_options.mode);
         const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
         if (field) {
+            // Check if field is disabled and should not process events
+            const isFieldDisabled = isBoolean(field._f.disabled)
+                ? field._f.disabled
+                : isBoolean(_options.disabled)
+                    ? _options.disabled
+                    : Array.isArray(_options.disabled)
+                        ? new Set(_options.disabled).has(name)
+                        : false;
+            if (isFieldDisabled) {
+                // Restore the original value if the field is disabled
+                const originalValue = get(_formValues, name);
+                if (target.value !== originalValue) {
+                    target.value = originalValue;
+                }
+                return;
+            }
             let error;
             let isValid;
             const fieldValue = target.type
@@ -1982,7 +2042,9 @@ function createFormControl(props = {}) {
     };
     const register = (name, options = {}) => {
         let field = get(_fields, name);
-        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
+        const disabledIsDefined = isBoolean(options.disabled) ||
+            isBoolean(_options.disabled) ||
+            Array.isArray(_options.disabled);
         set(_fields, name, {
             ...(field || {}),
             _f: {
@@ -1997,7 +2059,9 @@ function createFormControl(props = {}) {
             _setDisabledField({
                 disabled: isBoolean(options.disabled)
                     ? options.disabled
-                    : _options.disabled,
+                    : Array.isArray(_options.disabled)
+                        ? new Set(_options.disabled).has(name)
+                        : _options.disabled,
                 name,
             });
         }
@@ -2006,7 +2070,13 @@ function createFormControl(props = {}) {
         }
         return {
             ...(disabledIsDefined
-                ? { disabled: options.disabled || _options.disabled }
+                ? {
+                    disabled: isBoolean(options.disabled)
+                        ? options.disabled
+                        : Array.isArray(_options.disabled)
+                            ? new Set(_options.disabled).has(name)
+                            : !!_options.disabled,
+                }
                 : {}),
             ...(_options.progressive
                 ? {
@@ -2074,10 +2144,33 @@ function createFormControl(props = {}) {
             iterateFieldsByAction(_fields, (ref, name) => {
                 const currentField = get(_fields, name);
                 if (currentField) {
-                    ref.disabled = currentField._f.disabled || disabled;
+                    ref.disabled = isBoolean(currentField._f.disabled)
+                        ? currentField._f.disabled
+                        : disabled;
+                    if (Array.isArray(currentField._f.refs)) {
+                        currentField._f.refs.forEach((inputRef) => {
+                            inputRef.disabled = isBoolean(currentField._f.disabled)
+                                ? currentField._f.disabled
+                                : disabled;
+                        });
+                    }
+                }
+            }, 0, false);
+        }
+        else if (Array.isArray(disabled)) {
+            // For array mode, we don't set the global disabled state
+            // but we update individual fields based on their inclusion in the array
+            iterateFieldsByAction(_fields, (ref, name) => {
+                const currentField = get(_fields, name);
+                if (currentField) {
+                    // Field-level disabled takes precedence over array disabled
+                    const isFieldDisabled = isBoolean(currentField._f.disabled)
+                        ? currentField._f.disabled
+                        : new Set(disabled).has(name);
+                    ref.disabled = isFieldDisabled;
                     if (Array.isArray(currentField._f.refs)) {
                         currentField._f.refs.forEach((inputRef) => {
-                            inputRef.disabled = currentField._f.disabled || disabled;
+                            inputRef.disabled = isFieldDisabled;
                         });
                     }
                 }
@@ -2781,7 +2874,9 @@ function useForm(props = {}) {
         touchedFields: {},
         validatingFields: {},
         errors: props.errors || {},
-        disabled: props.disabled || false,
+        // If it's an array, set formState.disabled to false because when using array mode,
+        // the form itself isn't disabled - only specific fields are
+        disabled: Array.isArray(props.disabled) ? false : props.disabled || false,
         isReady: false,
         defaultValues: isFunction(props.defaultValues)
             ? undefined