@m4l/components 9.3.15-BE100925-beta.1 → 9.3.15-JT19092025.beta.1

package/components/Stepper/hooks/useDynamicValidation/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hook que simula validación onChange de campos específicos del Stepper, manteniendo el formulario en modo onSubmit para preservar el rendimiento.
+ * @returns Objeto con funciones para manejar la validación dinámica
+ */
+export declare function useDynamicValidation(): {
+    activateFieldsValidation: (fields: string[]) => void;
+    clearAllValidation: () => void;
+    activeFields: string[];
+};

package/components/Stepper/hooks/useDynamicValidation/index.js

@@ -0,0 +1,57 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+function useDynamicValidation() {
+  const { trigger } = useFormContext();
+  const [activeFields, setActiveFields] = useState([]);
+  const watchValues = useWatch({
+    name: activeFields.length > 0 ? activeFields : ["__dummy__"]
+  });
+  const lastValuesRef = useRef({});
+  useEffect(() => {
+    if (activeFields.length === 0) {
+      return;
+    }
+    const currentValues = activeFields.length === 1 ? { [activeFields[0]]: watchValues } : activeFields.reduce((acc, field, index) => {
+      acc[field] = Array.isArray(watchValues) ? watchValues[index] : watchValues;
+      return acc;
+    }, {});
+    const changedFields = activeFields.filter((field) => {
+      const currentValue = currentValues[field];
+      const lastValue = lastValuesRef.current[field];
+      const hasChanged = JSON.stringify(currentValue) !== JSON.stringify(lastValue);
+      if (hasChanged) {
+        lastValuesRef.current[field] = currentValue;
+      }
+      return hasChanged;
+    });
+    if (changedFields.length > 0) {
+      const timeoutId = setTimeout(() => {
+        trigger(changedFields);
+      }, 100);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [activeFields, trigger, watchValues]);
+  const activateFieldsValidation = useCallback((fields) => {
+    setActiveFields((prev) => {
+      const newFields = fields.filter((field) => !prev.includes(field));
+      return [...prev, ...newFields];
+    });
+    fields.forEach((field) => {
+      if (!lastValuesRef.current.hasOwnProperty(field)) {
+        lastValuesRef.current[field] = void 0;
+      }
+    });
+  }, []);
+  const clearAllValidation = useCallback(() => {
+    setActiveFields([]);
+    lastValuesRef.current = {};
+  }, []);
+  return {
+    activateFieldsValidation,
+    clearAllValidation,
+    activeFields
+  };
+}
+export {
+  useDynamicValidation as u
+};

package/components/Stepper/hooks/useStepperActions/index.js

@@ -2,8 +2,10 @@ import { useCallback } from "react";
 import { u as useStepper } from "../useStepper/index.js";
 import { useFormContext } from "react-hook-form";
 import { shallow } from "zustand/shallow";
+import { u as useDynamicValidation } from "../useDynamicValidation/index.js";
 function useStepperActions() {
   const { trigger, clearErrors, getValues, reset } = useFormContext();
+  const { activateFieldsValidation, clearAllValidation } = useDynamicValidation();
   const {
     nextStep,
     prevStep,
@@ -41,9 +43,22 @@ function useStepperActions() {
       if (fieldsToValidate.length === 0) {
         return true;
       }
-      return await trigger(fieldsToValidate);
+      const result = await trigger(fieldsToValidate);
+      if (!result) {
+        activateFieldsValidation(fieldsToValidate);
+      }
+      return result;
     };
     const success = await nextStep(validateFn, formData);
+    if (success) {
+      const currentStepData = steps[currentStep - 1];
+      const fieldsJustValidated = currentStepData?.validationFields || [];
+      if (fieldsJustValidated.length > 0) {
+        setTimeout(() => {
+          clearAllValidation();
+        }, 100);
+      }
+    }
     if (success && futureFields.length > 0) {
       clearErrors(futureFields);
       setTimeout(() => {
@@ -62,13 +77,16 @@ function useStepperActions() {
     steps,
     currentStep,
     trigger,
-    getValues
+    getValues,
+    activateFieldsValidation,
+    clearAllValidation
   ]);
   const cancelAction = useCallback(() => {
     reset();
     clearErrors();
+    clearAllValidation();
     resetStepper();
-  }, [reset, clearErrors, resetStepper]);
+  }, [reset, clearErrors, clearAllValidation, resetStepper]);
   return { prevStepAction, nextStepAction, cancelAction };
 }
 export {

package/components/Stepper/subcomponents/StepArea/index.js

@@ -5,10 +5,12 @@ import { u as useStepper } from "../../hooks/useStepper/index.js";
 import { e as StepAreaStyled, f as StepStyled, g as StepNameStyled } from "../../slots/StepperSlot.js";
 import { I as Indicator } from "./subcomponents/Inidicator/index.js";
 import { shallow } from "zustand/shallow";
+import { u as useDynamicValidation } from "../../hooks/useDynamicValidation/index.js";
 import { e as evaluateVisibilityStepCondition } from "../../helpers/evaluateVisibilityStepCondition/index.js";
 function StepArea() {
   const { trigger, clearErrors } = useFormContext();
   const formValues = useWatch();
+  const { activateFieldsValidation } = useDynamicValidation();
   const {
     currentStep,
     steps,
@@ -64,6 +66,7 @@ function StepArea() {
         if (!isValid) {
           setCurrentStep(stepOriginalIndex);
           setStepValidationStatus(stepOriginalIndex, false);
+          activateFieldsValidation(step.validationFields || []);
           return;
         }
         setStepValidationStatus(stepOriginalIndex, true);
@@ -76,6 +79,7 @@ function StepArea() {
       const isCurrentValid = await trigger(currentStepData.validationFields);
       if (!isCurrentValid) {
         setStepValidationStatus(currentStepOriginalIndex, false);
+        activateFieldsValidation(currentStepData.validationFields || []);
         return;
       }
       setStepValidationStatus(currentStepOriginalIndex, true);

package/components/hook-form/RHFAutocomplete/RHFAutocomplete.js

@@ -1,4 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { getPropertyByString } from "@m4l/core";
+import { useIsMobile } from "@m4l/graphics";
+import { useTheme } from "@mui/material";
 import { useId, useState, useCallback, useEffect } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import { A as AutocompleteRootStyled, L as LabelStyled } from "./slots/RHFAutocompleteSlots.js";
@@ -10,22 +13,28 @@ function RHFAutocomplete(props) {
     getOptionLabel,
     isOptionEqualToValue,
     label,
+    color,
     options,
     disabled,
     onOpen,
     onClose,
     loading,
+    variant,
     helperMessage,
     size,
     onChangeFilterParmsLocal,
     mandatory,
     mandatoryMessage,
     multiple,
+    imageScale = true,
+    imageRepeat,
     refresh
     // onChange: onChangeRHF,
   } = props;
   const htmlForId = useId();
+  const theme = useTheme();
   const [open, setOpen] = useState(false);
+  const isDesktop = !useIsMobile();
   const onCloseLocal = useCallback((event, reason) => {
     setOpen(false);
     if (onClose) {
@@ -50,11 +59,34 @@ function RHFAutocomplete(props) {
     },
     [getOptionLabel]
   );
+  const paletteColor = getPropertyByString(
+    theme.vars.palette,
+    disabled ? "default" : color || "default",
+    theme.vars.palette.default
+  );
   const {
-    control
+    control,
+    formState: { errors }
   } = useFormContext();
+  const [currentVariant, setCurrentVariant] = useState(null);
+  useEffect(() => {
+    const hasError = errors[nameRHF];
+    if (hasError) {
+      setCurrentVariant("error");
+    } else if (variant) {
+      setCurrentVariant(variant);
+    } else {
+      setCurrentVariant(null);
+    }
+  }, [errors, nameRHF, variant, control]);
   const ownerState = {
-    disabled
+    size: !isDesktop ? "medium" : size,
+    semantics: currentVariant,
+    disabled,
+    multiple: Boolean(multiple),
+    imageScale: Boolean(imageScale),
+    imageRepeat: Boolean(imageRepeat),
+    paletteColor
   };
   return /* @__PURE__ */ jsx(
     AutocompleteRootStyled,
@@ -115,7 +147,7 @@ function RHFAutocomplete(props) {
                   htmlFor: htmlForId
                 }
               ),
-              error?.message ? /* @__PURE__ */ jsx(HelperError, { message: error?.message }) : null
+              currentVariant === "error" ? /* @__PURE__ */ jsx(HelperError, { message: error?.message }) : null
             ] });
           }
         }

package/components/hook-form/RHFAutocomplete/types.d.ts

@@ -1,4 +1,4 @@
-import { AutocompleteCloseReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteProps as MUIAutocompleteProps, Theme, PopperProps } from '@mui/material';
+import { AutocompleteCloseReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteProps as MUIAutocompleteProps, Theme, PaletteColor, PopperProps } from '@mui/material';
 import { ComponentPalletColor, Sizes } from '@m4l/styles';
 import { TextFieldProps } from '../../mui_extended/TextField/types';
 import { RFHAUTOCOMPLETE_KEY_COMPONENT } from './constants';
@@ -52,6 +52,11 @@ export interface RHFAutocompleteProps<T = any, Multiple extends boolean | undefi
  */
 export interface RHFAutocompleteOwnerState extends Pick<RHFAutocompleteProps<any>, 'size' | 'disabled' | 'variant'> {
     disabled?: boolean;
+    semantics: RHFAutocompleteVariants | 'error' | null;
+    multiple: boolean;
+    imageScale?: boolean;
+    imageRepeat?: boolean;
+    paletteColor: PaletteColor;
 }
 /**
  * Defines the types of Slots available for the Autocomplete.

package/components/hook-form/RHFormContext/index.d.ts

@@ -3,7 +3,7 @@ import { CustomFormArguments, FormProviderCustomProps, FormProviderProps } from
 /**
  * TODO: Documentar
  */
-export declare function useCustomForm({ validationSchema, values, statusLoad, mode }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
+export declare function useCustomForm({ validationSchema, values, statusLoad, mode, }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
 /**
  * TODO: Documentar
  */

package/components/hook-form/RHFormContext/index.js

@@ -6,7 +6,12 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { F as FormProviderRoot } from "./styles.js";
 import { R as RHFormProviderUtilityClasses } from "./classes/index.js";
 const classes = RHFormProviderUtilityClasses();
-function useCustomForm({ validationSchema, values, statusLoad, mode }) {
+function useCustomForm({
+  validationSchema,
+  values,
+  statusLoad,
+  mode
+}) {
   const formMethods = useForm({
     resolver: yupResolver(validationSchema),
     defaultValues: values,
@@ -39,11 +44,31 @@ function useCustomForm({ validationSchema, values, statusLoad, mode }) {
 }
 function FormProviderCustom(props) {
   const { children, onSubmit, className, handleSubmit } = props;
-  return /* @__PURE__ */ jsx(FormProvider, { ...props, children: /* @__PURE__ */ jsx(FormProviderRoot, { className: clsx(classes.root, className), onSubmit: handleSubmit(onSubmit), children }) });
+  return /* @__PURE__ */ jsx(FormProvider, { ...props, children: /* @__PURE__ */ jsx(
+    FormProviderRoot,
+    {
+      className: clsx(classes.root, className),
+      onSubmit: handleSubmit(onSubmit),
+      children
+    }
+  ) });
 }
 function RHFormProvider(props) {
-  const { children, onSubmit, values, validationSchema, statusLoad = "ready", className, mode } = props;
-  const formMethods = useCustomForm({ validationSchema, statusLoad, values, mode });
+  const {
+    children,
+    onSubmit,
+    values,
+    validationSchema,
+    statusLoad = "ready",
+    className,
+    mode
+  } = props;
+  const formMethods = useCustomForm({
+    validationSchema,
+    statusLoad,
+    values,
+    mode
+  });
   return /* @__PURE__ */ jsx(
     FormProviderCustom,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.15-BE100925-beta.1",
+  "version": "9.3.15-JT19092025.beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {