@m4l/components 9.3.17-JT25092025.beta.1 → 9.3.18

package/components/Stepper/Stepper.js

@@ -57,13 +57,20 @@ function Stepper(props) {
   if (!hasPresentFlags) {
     return null;
   }
-  return /* @__PURE__ */ jsx(StepperProvider, { ...props, children: /* @__PURE__ */ jsxs(StepperRootStyled, { className: clsx(classRoot, className), children: [
-    /* @__PURE__ */ jsxs(ContentSectionStyled, { ownerState, children: [
-      /* @__PURE__ */ jsx(StepArea, {}),
-      /* @__PURE__ */ jsx(ContentArea, { children: stepperContent })
-    ] }),
-    stepperFooter
-  ] }) });
+  return /* @__PURE__ */ jsx(StepperProvider, { ...props, children: /* @__PURE__ */ jsxs(
+    StepperRootStyled,
+    {
+      className: clsx(classRoot, className),
+      "data-testid": "stepper-root",
+      children: [
+        /* @__PURE__ */ jsxs(ContentSectionStyled, { ownerState, children: [
+          /* @__PURE__ */ jsx(StepArea, {}),
+          /* @__PURE__ */ jsx(ContentArea, { children: stepperContent })
+        ] }),
+        stepperFooter
+      ]
+    }
+  ) });
 }
 export {
   Stepper as S

package/components/Stepper/Stepper.styles.js

@@ -24,13 +24,8 @@ const stepperStyles = {
     flexDirection: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "column" : "row",
     gap: theme.vars.size.baseSpacings.sp8
   }),
-  /**
-   * Estilos para el contenido del paso dentro del Stepper.
-   */
   stepContent: ({ ownerState }) => ({
-    height: "100%",
-    display: ownerState?.isStepVisible ? "flex" : "none",
-    flexDirection: "column"
+    display: ownerState?.isStepVisible ? "block" : "none"
   }),
   /**
    * Estilos para la sección que contiene los botones de acción del Stepper.
@@ -76,7 +71,8 @@ const stepperStyles = {
     const isLastStep = step === totalSteps - 1;
     return {
       cursor: "pointer",
-      display: ownerState?.isStepVisible ? "flex" : "none",
+      display: "flex",
+      visibility: ownerState?.isStepVisible ? "visible" : "hidden",
       flexDirection: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "column" : "row",
       alignItems: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "center" : "start",
       justifyContent: ownerState?.visibleTitle ? "space-between" : "center",
@@ -130,7 +126,7 @@ const stepperStyles = {
     whiteSpace: "normal",
     order: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? 1 : 0,
     "&.M4LTypography-root": {
-      color: ownerState?.originalStepIndex !== void 0 && typeof ownerState.originalStepIndex === "number" ? (ownerState.currentStep ?? 0) > ownerState.originalStepIndex ? theme.vars.palette.primary.semanticText : (ownerState.currentStep ?? 0) === ownerState.originalStepIndex ? theme.vars.palette.text.primary : theme.vars.palette.text.secondary : theme.vars.palette.text.secondary,
+      color: (ownerState?.currentStep ?? 0) > (ownerState?.step ?? 0) ? theme.vars.palette.primary.semanticText : (ownerState?.currentStep ?? 0) === (ownerState?.step ?? 0) ? theme.vars.palette.text.primary : theme.vars.palette.text.secondary,
       textAlign: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "center" : "right"
     }
   }),
@@ -138,12 +134,13 @@ const stepperStyles = {
    * Estilos para el indicador numérico de cada paso del Stepper.
    */
   indicator: ({ theme, ownerState }) => {
+    const currentStep = ownerState?.currentStep ?? 0;
     const step = ownerState?.step ?? 0;
     const totalSteps = ownerState?.totalSteps ?? 0;
-    const isCompleted = ownerState?.isCompleted ?? false;
-    const isCurrent = ownerState?.isCurrent ?? false;
-    const isValidStep = ownerState?.isValidStep ?? true;
+    const isCompleted = currentStep > step;
+    const isCurrent = currentStep === step;
     const isLastStep = step === totalSteps - 1;
+    const isValidStep = ownerState?.stepValidationStatus?.[step] ?? true;
     return {
       ...ownerState?.orientation === "horizontal" ? {
         marginTop: theme.generalSettings.isMobile ? "6px" : theme.vars.size.baseSpacings.sp1
@@ -153,7 +150,7 @@ const stepperStyles = {
       justifyContent: "center",
       flexShrink: 0,
       order: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? 0 : 1,
-      background: !isValidStep && ownerState?.hasBeenValidated ? theme.vars.palette.error.enabled : isCompleted && isValidStep ? ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : theme.vars.palette.primary.toneOpacity : isCurrent ? ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : theme.vars.palette.primary.enabled : ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : theme.vars.palette.default.enabled,
+      background: isCompleted ? ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : theme.vars.palette.primary.toneOpacity : !isValidStep ? theme.vars.palette.error.enabled : ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : isCurrent ? theme.vars.palette.primary.enabled : theme.vars.palette.default.enabled,
       borderRadius: theme.vars.size.borderRadius.r2,
       ...ownerState?.indicatorType === "number" && !theme.generalSettings.isMobile && {
         boxShadow: isCurrent ? "0 2px 8px 0 rgb(0, 100, 255, 0.16)" : "none"
@@ -181,13 +178,13 @@ const stepperStyles = {
    * Estilos para el número de texto dentro del indicador numérico del Stepper.
    */
   textNumber: ({ theme, ownerState }) => {
-    const isCompleted = ownerState?.isCompleted ?? false;
-    const isCurrent = ownerState?.isCurrent ?? false;
-    const isValidStep = ownerState?.isValidStep ?? true;
-    const hasBeenValidated = ownerState?.hasBeenValidated ?? false;
+    const currentStep = ownerState?.currentStep ?? 0;
+    const step = ownerState?.step ?? 0;
+    const isCompleted = currentStep > step;
+    const isCurrent = currentStep === step;
     return {
       "&.M4LTypography-root": {
-        color: !isValidStep && hasBeenValidated ? theme.vars.palette.error.contrastText : isCompleted || isCurrent ? theme.vars.palette.primary.contrastText : theme.vars.palette.text.primary
+        color: isCompleted || isCurrent ? theme.vars.palette.primary.contrastText : theme.vars.palette.text.primary
       }
     };
   },

package/components/Stepper/helpers/index.d.ts

@@ -2,5 +2,3 @@ export { evaluateVisibilityStepCondition } from './evaluateVisibilityStepConditi
 export { findNextVisibleValidStep } from './findNextVisibleValidStep';
 export { findPrevVisibleValidStep } from './findPrevVisibleValidStep';
 export { isLastVisibleValidStep } from './isLastVisibleValidStep';
-export { parseWatchedValues } from './parseWatchedValues';
-export { getInitialFieldValues } from './getInitialFieldValues';

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

@@ -2,10 +2,8 @@ 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,
@@ -43,20 +41,9 @@ function useStepperActions() {
       if (fieldsToValidate.length === 0) {
         return true;
       }
-      const result = await trigger(fieldsToValidate);
-      if (!result) {
-        activateFieldsValidation(fieldsToValidate);
-      }
-      return result;
+      return await trigger(fieldsToValidate);
     };
     const success = await nextStep(validateFn, formData);
-    if (success) {
-      const currentStepData = steps[currentStep - 1];
-      const fieldsJustValidated = currentStepData?.validationFields || [];
-      if (fieldsJustValidated.length > 0) {
-        clearAllValidation();
-      }
-    }
     if (success && futureFields.length > 0) {
       clearErrors(futureFields);
       setTimeout(() => {
@@ -75,16 +62,13 @@ function useStepperActions() {
     steps,
     currentStep,
     trigger,
-    getValues,
-    activateFieldsValidation,
-    clearAllValidation
+    getValues
   ]);
   const cancelAction = useCallback(() => {
     reset();
     clearErrors();
-    clearAllValidation();
     resetStepper();
-  }, [reset, clearErrors, clearAllValidation, resetStepper]);
+  }, [reset, clearErrors, resetStepper]);
   return { prevStepAction, nextStepAction, cancelAction };
 }
 export {

package/components/Stepper/store/StepperStore/index.js

@@ -35,18 +35,6 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
               if (!preserveStepValidationStatus) {
                 state.stepValidationStatus = {};
               }
-              if (!preserveStepValidationStatus) {
-                const firstVisibleStepIndex = findNextVisibleValidStep(
-                  -1,
-                  // Comenzar desde -1 para encontrar el primer step visible
-                  steps,
-                  {},
-                  state.visibilityData
-                );
-                if (firstVisibleStepIndex !== 0 && firstVisibleStepIndex < steps.length) {
-                  state.currentStep = firstVisibleStepIndex;
-                }
-              }
             });
           },
           /**
@@ -126,16 +114,9 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
            */
           resetStepper: () => {
             set((state) => {
+              state.currentStep = 0;
               state.stepValidationStatus = {};
               state.isValidating = false;
-              const firstVisibleStepIndex = findNextVisibleValidStep(
-                -1,
-                // Comenzar desde -1 para encontrar el primer step visible
-                state.steps,
-                {},
-                state.visibilityData
-              );
-              state.currentStep = firstVisibleStepIndex < state.steps.length ? firstVisibleStepIndex : 0;
             });
           }
         }

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

@@ -11,13 +11,20 @@ function ContentArea(props) {
   const ownerState = {
     orientation
   };
-  return /* @__PURE__ */ jsxs(ContentAreaStyled, { ownerState, children: [
-    /* @__PURE__ */ jsxs(ContentAreaHeaderStyled, { children: [
-      /* @__PURE__ */ jsx(WrapperIcon, {}),
-      /* @__PURE__ */ jsx(WrapperTitle, {})
-    ] }),
-    /* @__PURE__ */ jsx(ContentAreaBodyStyled, { children })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    ContentAreaStyled,
+    {
+      ownerState,
+      "data-testid": "stepper-content-area",
+      children: [
+        /* @__PURE__ */ jsxs(ContentAreaHeaderStyled, { "data-testid": "stepper-content-area-header", children: [
+          /* @__PURE__ */ jsx(WrapperIcon, {}),
+          /* @__PURE__ */ jsx(WrapperTitle, {})
+        ] }),
+        /* @__PURE__ */ jsx(ContentAreaBodyStyled, { "data-testid": "stepper-content-area-body", children })
+      ]
+    }
+  );
 }
 export {
   ContentArea as C

package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperIcon/index.js

@@ -17,7 +17,7 @@ function WrapperIcon() {
     IconStyled,
     {
       color: "primary.enabled",
-      src: currentStepConfig.icon ? currentStepConfig.icon : `${host_static_assets}/${environment_assets}/${pathIcons.patronum}`
+      src: currentStepConfig?.icon ? currentStepConfig.icon : `${host_static_assets}/${environment_assets}/${pathIcons.patronum}`
     }
   ) });
 }

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

@@ -5,12 +5,10 @@ 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, startExternalValidation, endExternalValidation } = useDynamicValidation();
   const {
     currentStep,
     steps,
@@ -34,19 +32,16 @@ function StepArea() {
     }),
     shallow
   );
-  const allSteps = steps;
-  const visibleSteps = useMemo(() => {
-    return steps.filter(
-      (step) => evaluateVisibilityStepCondition(step, formValues || {}, visibilityData)
-    );
-  }, [steps, formValues, visibilityData]);
+  const validSteps = useMemo(() => {
+    return steps;
+  }, [steps]);
   const ownerState = {
     visibleTitle,
     orientation,
-    totalSteps: visibleSteps.length
+    totalSteps: validSteps.length
   };
   const handleStepClick = async (targetIndex) => {
-    const currentIndex = visibleSteps.findIndex(
+    const currentIndex = validSteps.findIndex(
       (step) => step.key === steps[currentStep].key
     );
     if (targetIndex === currentIndex) {
@@ -54,7 +49,7 @@ function StepArea() {
     }
     const isNavigatingForward = targetIndex > currentIndex;
     const targetOriginalIndex = steps.findIndex(
-      (s) => s.key === visibleSteps[targetIndex].key
+      (s) => s.key === validSteps[targetIndex].key
     );
     if (!isNavigatingForward) {
       setCurrentStep(targetOriginalIndex);
@@ -63,43 +58,37 @@ function StepArea() {
     const isSkippingSteps = targetIndex > currentIndex + 1;
     if (isSkippingSteps) {
       for (let i = currentIndex; i < targetIndex; i++) {
-        const step = visibleSteps[i];
+        const step = validSteps[i];
         const stepOriginalIndex = steps.findIndex((s) => s.key === step.key);
-        startExternalValidation();
         const isValid = await trigger(step.validationFields);
-        endExternalValidation();
         if (!isValid) {
           setCurrentStep(stepOriginalIndex);
           setStepValidationStatus(stepOriginalIndex, false);
-          activateFieldsValidation(step.validationFields || []);
           return;
         }
         setStepValidationStatus(stepOriginalIndex, true);
       }
     } else {
-      const currentStepData = visibleSteps[currentIndex];
+      const currentStepData = validSteps[currentIndex];
       const currentStepOriginalIndex = steps.findIndex(
         (s) => s.key === currentStepData.key
       );
-      startExternalValidation();
       const isCurrentValid = await trigger(currentStepData.validationFields);
-      endExternalValidation();
       if (!isCurrentValid) {
         setStepValidationStatus(currentStepOriginalIndex, false);
-        activateFieldsValidation(currentStepData.validationFields || []);
         return;
       }
       setStepValidationStatus(currentStepOriginalIndex, true);
     }
     setCurrentStep(targetOriginalIndex);
     if (isNavigatingForward) {
-      const currentStepData = visibleSteps[currentIndex];
+      const currentStepData = validSteps[currentIndex];
       const currentStepOriginalIndex = steps.findIndex(
         (s) => s.key === currentStepData.key
       );
       const isCurrentStepValid = stepValidationStatus[currentStepOriginalIndex] !== false;
       if (isCurrentStepValid) {
-        const targetStep = visibleSteps[targetIndex];
+        const targetStep = validSteps[targetIndex];
         const targetStepFields = targetStep.validationFields || [];
         if (targetStepFields.length > 0) {
           clearErrors(targetStepFields);
@@ -111,37 +100,33 @@ function StepArea() {
       }
     }
   };
-  return /* @__PURE__ */ jsx(StepAreaStyled, { ownerState, children: allSteps.map((step, originalIndex) => {
-    const isStepVisible = evaluateVisibilityStepCondition(
-      step,
-      formValues || {},
-      visibilityData
-    );
-    const visibleStepIndex = isStepVisible ? visibleSteps.findIndex((visStep) => visStep.key === step.key) : -1;
+  return /* @__PURE__ */ jsx(StepAreaStyled, { ownerState, "data-testid": "stepper-step-area", children: validSteps.map((step, validIndex) => {
+    const originalIndex = steps.findIndex((s) => s.key === step.key);
+    const totalVisibleSteps = validSteps.filter(
+      (s) => evaluateVisibilityStepCondition(s, formValues || {}, visibilityData)
+    ).length;
     return /* @__PURE__ */ jsxs(
       StepStyled,
       {
         role: "button",
-        onClick: () => isStepVisible ? handleStepClick(visibleStepIndex) : void 0,
+        onClick: () => handleStepClick(validIndex),
         ownerState: {
           ...ownerState,
           currentStep,
-          step: visibleStepIndex,
-          // Usa el índice en la secuencia visible
-          isStepVisible
+          step: validIndex,
+          isStepVisible: evaluateVisibilityStepCondition(
+            step,
+            formValues || {},
+            visibilityData
+          )
         },
+        "data-testid": `stepper-step-${step.key}`,
         children: [
           visibleTitle && /* @__PURE__ */ jsx(
             StepNameStyled,
             {
               variant: "body",
-              ownerState: {
-                ...ownerState,
-                currentStep,
-                step: visibleStepIndex,
-                originalStepIndex: originalIndex,
-                isStepVisible
-              },
+              ownerState: { ...ownerState, currentStep, step: validIndex },
               children: step.title
             }
           ),
@@ -149,8 +134,8 @@ function StepArea() {
             Indicator,
             {
               currentStep,
-              step: visibleStepIndex,
-              totalSteps: visibleSteps.length,
+              step: validIndex,
+              totalSteps: totalVisibleSteps,
               originalStepIndex: originalIndex
             }
           )

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

@@ -21,6 +21,15 @@ function Indicator(props) {
   );
   const { host_static_assets, environment_assets } = useEnvironment();
   const { currentSize } = useComponentSize(size);
+  const ownerState = {
+    size: currentSize,
+    currentStep,
+    step,
+    totalSteps,
+    orientation,
+    indicatorType,
+    stepValidationStatus
+  };
   const isMobile = useIsMobile();
   const effectiveIndicatorType = useMemo(() => {
     return isMobile ? "dot" : indicatorType;
@@ -36,20 +45,6 @@ function Indicator(props) {
       hasBeenValidated: validated
     };
   }, [currentStep, originalStepIndex, stepValidationStatus]);
-  const ownerState = {
-    size: currentSize,
-    currentStep,
-    step,
-    totalSteps,
-    orientation,
-    indicatorType,
-    stepValidationStatus,
-    originalStepIndex,
-    isCompleted,
-    isCurrent: currentStep === originalStepIndex,
-    isValidStep,
-    hasBeenValidated
-  };
   return /* @__PURE__ */ jsx(IndicatorStyled, { ownerState, children: hasBeenValidated && !isValidStep ? (
     // Mostrar error solo si ha sido validado y es inválido
     /* @__PURE__ */ jsx(
@@ -72,10 +67,7 @@ function Indicator(props) {
     )
   ) : (
     // Mostrar estado normal (número o dot) para pasos no validados o actuales
-    /* @__PURE__ */ jsx(TextNumberStyled, { variant: "body", ownerState, children: effectiveIndicatorType === "number" ? (
-      // Solo mostrar número si el step es visible (step >= 0)
-      step >= 0 ? step + 1 : ""
-    ) : /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(TextNumberStyled, { variant: "body", ownerState: { currentStep, step }, children: effectiveIndicatorType === "number" ? step + 1 : /* @__PURE__ */ jsx(
       Icon,
       {
         src: `${host_static_assets}/${environment_assets}/${currentStep === originalStepIndex ? pathIcons.dotSelected : pathIcons.dotOutline}`,

package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.d.ts

@@ -1,5 +1,4 @@
-import { StepperButtonProps } from '../../../types';
 /**
  * Botón modular para cancelar el proceso del Stepper
  */
-export declare function StepperCancelButton(props: StepperButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepperCancelButton(): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.js

@@ -1,55 +1,23 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback } from "react";
-import { useFormContext, useFormState } from "react-hook-form";
 import { u as useStepperActions } from "../../../hooks/useStepperActions/index.js";
-import { D as DICTIONARY$1 } from "../../../dictionary.js";
-import { D as DICTIONARY } from "../../../../CommonActions/dictionary.js";
+import { D as DICTIONARY } from "../../../dictionary.js";
 import { useModuleDictionary } from "@m4l/core";
-import { u as useModal } from "../../../../../hooks/useModal/index.js";
-import { u as useWindowToolsMF } from "../../../../WindowBase/hooks/useWindowToolsMF/index.js";
-import { W as WindowConfirm } from "../../../../WindowConfirm/WindowConfirm.js";
 import { B as Button } from "../../../../mui_extended/Button/Button.js";
-function StepperCancelButton(props) {
-  const { label, ...rest } = props;
+function StepperCancelButton() {
   const { getLabel } = useModuleDictionary();
   const { cancelAction } = useStepperActions();
-  const { openModal } = useModal();
-  const { close: closeWindow } = useWindowToolsMF();
-  const { control } = useFormContext();
-  const { isDirty } = useFormState({
-    control
-  });
-  const onConfirmQuit = useCallback(() => {
+  const handleCancel = () => {
     cancelAction();
-    closeWindow();
-  }, [cancelAction, closeWindow]);
-  const handleCancel = useCallback(() => {
-    if (isDirty) {
-      openModal({
-        window: /* @__PURE__ */ jsx(
-          WindowConfirm,
-          {
-            variant: "warning",
-            title: getLabel(DICTIONARY.CONFIRM_QUIT_TITLE),
-            msg: getLabel(DICTIONARY.CONFIRM_QUIT_MSG),
-            onClickIntro: onConfirmQuit
-          }
-        ),
-        variant: "warning"
-      });
-    } else {
-      onConfirmQuit();
-    }
-  }, [getLabel, isDirty, openModal, onConfirmQuit]);
+  };
   return /* @__PURE__ */ jsx(
     Button,
     {
       type: "button",
-      label: label || getLabel(DICTIONARY$1.LABEL_CANCEL_BUTTON),
+      label: getLabel(DICTIONARY.LABEL_CANCEL_BUTTON),
       variant: "outlined",
       color: "default",
       onClick: handleCancel,
-      ...rest
+      "data-testid": "stepper-cancel-button"
     }
   );
 }

package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.d.ts

@@ -1,5 +1,4 @@
-import { StepperButtonProps } from '../../../types';
 /**
  * Botón modular para avanzar al siguiente step del Stepper
  */
-export declare function StepperNextButton(props: StepperButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepperNextButton(): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.js

@@ -6,8 +6,7 @@ import { D as DICTIONARY } from "../../../dictionary.js";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
 import { B as Button } from "../../../../mui_extended/Button/Button.js";
-function StepperNextButton(props) {
-  const { label, ...rest } = props;
+function StepperNextButton() {
   const { nextStepAction } = useStepperActions();
   const isMobile = useIsMobile();
   const { getLabel } = useModuleDictionary();
@@ -29,13 +28,12 @@ function StepperNextButton(props) {
     Button,
     {
       type: "button",
-      label: label || getLabel(DICTIONARY.LABEL_NEXT_BUTTON),
+      label: getLabel(DICTIONARY.LABEL_NEXT_BUTTON),
       variant: "contained",
       color: "primary",
       onClick: handleNext,
       endIcon: `${host_static_assets}/${environment_assets}/${pathIcons.arrowRight}`,
-      "data-testid": "stepper-next-button",
-      ...rest
+      "data-testid": "stepper-next-button"
     }
   );
 }

package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.d.ts

@@ -1,5 +1,4 @@
-import { StepperButtonProps } from '../../../types';
 /**
  * Botón modular para ir al step anterior del Stepper
  */
-export declare function StepperPrevButton(props: StepperButtonProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function StepperPrevButton(): import("react/jsx-runtime").JSX.Element | null;

package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.js

@@ -7,8 +7,7 @@ import { useIsMobile } from "@m4l/graphics";
 import { D as DICTIONARY } from "../../../dictionary.js";
 import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
 import { B as Button } from "../../../../mui_extended/Button/Button.js";
-function StepperPrevButton(props) {
-  const { label, ...rest } = props;
+function StepperPrevButton() {
   const { currentStep } = useStepper((state) => ({
     currentStep: state.currentStep
   }));
@@ -36,13 +35,12 @@ function StepperPrevButton(props) {
     Button,
     {
       type: "button",
-      label: label || getLabel(DICTIONARY.LABEL_PREV_BUTTON),
+      label: !isMobile ? getLabel(DICTIONARY.LABEL_PREV_BUTTON) : "",
       variant: "outlined",
       color: "default",
       onClick: handlePrev,
       startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.arrowLeft}`,
-      "data-testid": "stepper-prev-button",
-      ...rest
+      "data-testid": "stepper-prev-button"
     }
   );
 }

package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.d.ts

@@ -1,5 +1,4 @@
-import { StepperButtonProps } from '../../../types';
 /**
  * Botón modular para finalizar el Stepper y ejecutar onFinalSubmit
  */
-export declare function StepperSubmitButton(props: StepperButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepperSubmitButton(): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.js

@@ -2,18 +2,16 @@ import { jsx } from "react/jsx-runtime";
 import { D as DICTIONARY } from "../../../dictionary.js";
 import { useModuleDictionary } from "@m4l/core";
 import { B as Button } from "../../../../mui_extended/Button/Button.js";
-function StepperSubmitButton(props) {
-  const { label, ...rest } = props;
+function StepperSubmitButton() {
   const { getLabel } = useModuleDictionary();
   return /* @__PURE__ */ jsx(
     Button,
     {
       type: "submit",
-      label: label || getLabel(DICTIONARY.LABEL_SUBMIT_BUTTON),
+      label: getLabel(DICTIONARY.LABEL_SUBMIT_BUTTON),
       variant: "contained",
       color: "primary",
-      "data-testid": "stepper-submit-button",
-      ...rest
+      "data-testid": "stepper-submit-button"
     }
   );
 }

package/components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.js

@@ -12,47 +12,28 @@ function Step(props) {
     steps: state.steps,
     visibilityData: state.visibilityData
   }));
+  const currentStepConfig = useMemo(() => {
+    return steps[currentStep];
+  }, [steps, currentStep]);
   const stepConfig = useMemo(() => {
     return steps.find((step) => step.key === stepKey);
   }, [steps, stepKey]);
   const isStepVisible = useMemo(() => {
-    if (!stepConfig) {
+    if (!currentStepConfig) {
+      return false;
+    }
+    if (stepKey !== currentStepConfig.key) {
       return false;
     }
-    const meetsVisibilityCondition = evaluateVisibilityStepCondition(
+    if (stepConfig && !evaluateVisibilityStepCondition(
       stepConfig,
       formValues || {},
       visibilityData
-    );
-    if (!meetsVisibilityCondition) {
-      return false;
-    }
-    const currentStepConfig = steps[currentStep];
-    if (!currentStepConfig) {
-      return false;
-    }
-    if (evaluateVisibilityStepCondition(currentStepConfig, formValues || {}, visibilityData)) {
-      return stepKey === currentStepConfig.key;
-    }
-    const visibleStepsUpToCurrent = [];
-    for (let i = 0; i <= currentStep; i++) {
-      const step = steps[i];
-      if (evaluateVisibilityStepCondition(step, formValues || {}, visibilityData)) {
-        visibleStepsUpToCurrent.push(step);
-      }
-    }
-    if (visibleStepsUpToCurrent.length === 0) {
-      for (let i = currentStep + 1; i < steps.length; i++) {
-        const step = steps[i];
-        if (evaluateVisibilityStepCondition(step, formValues || {}, visibilityData)) {
-          return stepKey === step.key;
-        }
-      }
+    )) {
       return false;
     }
-    const activeVisibleStep = visibleStepsUpToCurrent[visibleStepsUpToCurrent.length - 1];
-    return stepKey === activeVisibleStep.key;
-  }, [currentStep, stepKey, stepConfig, steps, formValues, visibilityData]);
+    return true;
+  }, [currentStepConfig, stepKey, stepConfig, formValues, visibilityData]);
   return /* @__PURE__ */ jsx(StepContentStyled, { ownerState: { isStepVisible }, children });
 }
 export {

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

@@ -38,7 +38,7 @@ function StepperFooter(props) {
       stepperFooterRightActions: parsedRightActions
     };
   }, [children]);
-  return /* @__PURE__ */ jsxs(StepperFooterSectionStyled, { children: [
+  return /* @__PURE__ */ jsxs(StepperFooterSectionStyled, { "data-testid": "stepper-footer", children: [
     stepperFooterLeftActions,
     stepperFooterRightActions
   ] });

package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.js

@@ -1,29 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import { u as useIsLastVisibleValidStep } from "../../../../hooks/useIsLastVisibleValidStep/index.js";
 import { m as StepperFooterRightActionsStyled } from "../../../../slots/StepperSlot.js";
-import { S as StepperSubmitButton } from "../../../StepperButtons/StepperSubmitButton/index.js";
 import { S as StepperNextButton } from "../../../StepperButtons/StepperNextButton/index.js";
+import { S as StepperSubmitButton } from "../../../StepperButtons/StepperSubmitButton/index.js";
 function StepperFooterRightActions(props) {
   const { children } = props;
   const isLastVisibleValidStep = useIsLastVisibleValidStep();
-  const [hasCustomSubmitButton, setHasCustomSubmitButton] = useState(false);
-  useEffect(() => {
-    const hasCustomButton = React.Children.toArray(children).some((child) => {
-      if (React.isValidElement(child)) {
-        return child.type === StepperSubmitButton;
-      }
-      return false;
-    });
-    setHasCustomSubmitButton(hasCustomButton);
-  }, [children]);
-  const filteredChildren = useMemo(() => {
+  const childrenWithoutNextButton = useMemo(() => {
+    if (!isLastVisibleValidStep) {
+      return children;
+    }
     return React.Children.toArray(children).filter((child) => {
       if (React.isValidElement(child)) {
-        if (!isLastVisibleValidStep && child.type === StepperSubmitButton) {
-          return false;
-        }
-        if (isLastVisibleValidStep && child.type === StepperNextButton) {
+        if (child.type === StepperNextButton) {
           return false;
         }
       }
@@ -31,10 +21,10 @@ function StepperFooterRightActions(props) {
     });
   }, [children, isLastVisibleValidStep]);
   const submitButton = useMemo(() => {
-    return isLastVisibleValidStep && !hasCustomSubmitButton ? /* @__PURE__ */ jsx(StepperSubmitButton, {}) : null;
-  }, [isLastVisibleValidStep, hasCustomSubmitButton]);
+    return isLastVisibleValidStep ? /* @__PURE__ */ jsx(StepperSubmitButton, {}) : null;
+  }, [isLastVisibleValidStep]);
   return /* @__PURE__ */ jsxs(StepperFooterRightActionsStyled, { children: [
-    filteredChildren,
+    childrenWithoutNextButton,
     submitButton
   ] });
 }

package/components/Stepper/tests/Stepper.helpers.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Stepper/tests/Stepper.hooks.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Stepper/tests/Stepper.navigation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Stepper/tests/Stepper.rendering.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Stepper/tests/Stepper.subcomponents.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Stepper/tests/Stepper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Stepper/tests/constants.d.ts

@@ -0,0 +1,3 @@
+import { StepperProps } from '../types';
+export declare const mockSteps: StepperProps['steps'];
+export declare const defaultProps: StepperProps;

package/components/Stepper/types.d.ts

@@ -5,7 +5,6 @@ import { ContentAreaSlots, ContentSlots, StepperFooterSlots, StepperSlots } from
 import { STEPPER_PREFIX_NAME } from './constants';
 import { M4LOverridesStyleRules } from '../../@types/augmentations';
 import { Step as StepComponent } from './subcomponents/StepperContent/subcomponents/Step';
-import { ButtonProps } from '../mui_extended/Button';
 export type Orientation = 'horizontal' | 'vertical';
 export type IndicatorType = 'number' | 'dot';
 export type FormData = Record<string, string | number | boolean | null | undefined>;
@@ -146,12 +145,6 @@ export interface StepperFooterProps {
 export interface StepperFooterLeftActionsProps {
     children?: ReactNode;
 }
-/**
- * Props para los botones del Stepper que extienden las props de Button de mui_extended
- */
-export interface StepperButtonProps extends Omit<ButtonProps, 'label'> {
-    label?: string;
-}
 /**
  * Props del StepperFooterRightActions
  */

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,12 +6,7 @@ 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,
@@ -44,31 +39,11 @@ function useCustomForm({
 }
 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.17-JT25092025.beta.1",
+  "version": "9.3.18",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

package/components/Stepper/helpers/getInitialFieldValues/index.d.ts

@@ -1,12 +0,0 @@
-/**
- * Obtiene los valores iniciales de campos específicos del formulario.
- * Se usa para inicializar el ref que trackea cambios en los campos.
- * @param allValues - Todos los valores del formulario (de getValues())
- * @param fields - Lista de nombres de campos de los que queremos obtener valores
- * @returns Objeto con solo los valores de los campos especificados
- * @example
- * const formValues = { name: 'John', age: 25, city: 'NY', country: 'USA' };
- * getInitialFieldValues(formValues, ['name', 'age'])
- * // Retorna: { name: 'John', age: 25 }
- */
-export declare function getInitialFieldValues(allValues: Record<string, any>, fields?: string[]): Record<string, any>;

package/components/Stepper/helpers/getInitialFieldValues/index.js

@@ -1,14 +0,0 @@
-function getInitialFieldValues(allValues, fields = []) {
-  if (fields.length === 0) {
-    return {};
-  }
-  return fields.reduce((acc, field) => {
-    if (field in allValues) {
-      acc[field] = allValues[field];
-    }
-    return acc;
-  }, {});
-}
-export {
-  getInitialFieldValues as g
-};

package/components/Stepper/helpers/parseWatchedValues/index.d.ts

@@ -1,17 +0,0 @@
-/**
- * Convierte los valores observados de useWatch en un objeto estructurado con los nombres de campos como keys.
- *
- * useWatch de react-hook-form retorna diferentes estructuras según la cantidad de campos observados:
- * - Un solo campo: retorna el valor directamente
- * - Múltiples campos: retorna un array con los valores en el mismo orden de los campos
- * @param watchValues - Valores observados de useWatch (puede ser un valor único o un array)
- * @param fields - Lista de nombres de campos que se están observando
- * @returns Objeto con los valores actuales mapeados a sus respectivos nombres de campo
- * @example
- * // Para un solo campo
- * parseWatchedValues('John', ['name']) // { name: 'John' }
- *
- * // Para múltiples campos
- * parseWatchedValues(['John', 25], ['name', 'age']) // { name: 'John', age: 25 }
- */
-export declare function parseWatchedValues(watchValues: any, fields: string[]): Record<string, any>;

package/components/Stepper/helpers/parseWatchedValues/index.js

@@ -1,12 +0,0 @@
-function parseWatchedValues(watchValues, fields) {
-  if (fields.length === 1) {
-    return { [fields[0]]: watchValues };
-  }
-  return fields.reduce((acc, field, index) => {
-    acc[field] = Array.isArray(watchValues) ? watchValues[index] : watchValues;
-    return acc;
-  }, {});
-}
-export {
-  parseWatchedValues as p
-};

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

@@ -1,11 +0,0 @@
-/**
- * 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[], skipIfValidating?: boolean) => void;
-    clearAllValidation: () => void;
-    activeFields: string[];
-    startExternalValidation: () => void;
-    endExternalValidation: () => void;
-};

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

@@ -1,69 +0,0 @@
-import { useState, useRef, useEffect, useCallback } from "react";
-import { useFormContext, useWatch } from "react-hook-form";
-import { p as parseWatchedValues } from "../../helpers/parseWatchedValues/index.js";
-import { g as getInitialFieldValues } from "../../helpers/getInitialFieldValues/index.js";
-function useDynamicValidation() {
-  const { trigger, getValues } = useFormContext();
-  const [activeFields, setActiveFields] = useState([]);
-  const [isValidating, setIsValidating] = useState(false);
-  const statusLoad = useWatch({
-    name: "statusLoad"
-  });
-  const watchValues = useWatch({
-    name: activeFields.length > 0 ? activeFields : ["__dummy__"]
-  });
-  const lastValuesRef = useRef({});
-  useEffect(() => {
-    if (activeFields.length === 0 || statusLoad !== "ready" || isValidating) {
-      return;
-    }
-    const currentValues = parseWatchedValues(watchValues, activeFields);
-    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, statusLoad, isValidating]);
-  const startExternalValidation = useCallback(() => {
-    setIsValidating(true);
-  }, []);
-  const endExternalValidation = useCallback(() => {
-    setIsValidating(false);
-  }, []);
-  const activateFieldsValidation = useCallback(
-    (fields, skipIfValidating = true) => {
-      if (skipIfValidating && isValidating) {
-        return;
-      }
-      const formValues = getValues();
-      setActiveFields(fields);
-      const initialValues = getInitialFieldValues(formValues, fields);
-      lastValuesRef.current = initialValues;
-    },
-    [getValues, isValidating]
-  );
-  const clearAllValidation = useCallback(() => {
-    setActiveFields([]);
-    lastValuesRef.current = {};
-  }, []);
-  return {
-    activateFieldsValidation,
-    clearAllValidation,
-    activeFields,
-    startExternalValidation,
-    endExternalValidation
-  };
-}
-export {
-  useDynamicValidation as u
-};