@m4l/components 9.3.22 → 9.3.24-JT04112025.beta.1

package/components/Stepper/subcomponents/StepArea/hooks/useStepArea.js

@@ -0,0 +1,111 @@
+import { useCallback, useMemo } from "react";
+import { useFormContext } from "react-hook-form";
+import { u as useStepper } from "../../../hooks/useStepper/index.js";
+import { u as useDynamicValidation } from "../../../hooks/useDynamicValidation/index.js";
+import { d as deepShallow } from "../../../../../utils/deepShallow.js";
+function useStepArea(props) {
+  const { visibleSteps } = props;
+  const { trigger, clearErrors } = useFormContext();
+  const {
+    activateFieldsValidation,
+    startExternalValidation,
+    endExternalValidation
+  } = useDynamicValidation();
+  const {
+    currentStep,
+    steps,
+    visibleTitle,
+    setCurrentStep,
+    orientation,
+    setStepValidationStatus,
+    stepValidationStatus
+  } = useStepper(
+    (state) => ({
+      currentStep: state.currentStep,
+      steps: state.steps,
+      visibleTitle: state.visibleTitle,
+      setCurrentStep: state.actions.setCurrentStep,
+      indicatorType: state.indicatorType,
+      orientation: state.orientation,
+      setStepValidationStatus: state.actions.setStepValidationStatus,
+      stepValidationStatus: state.stepValidationStatus
+    }),
+    deepShallow
+  );
+  const handleStepClick = useCallback(async (targetIndex) => {
+    const currentIndex = visibleSteps.findIndex(
+      (step) => step.key === steps[currentStep].key
+    );
+    if (targetIndex === currentIndex) {
+      return;
+    }
+    const isNavigatingForward = targetIndex > currentIndex;
+    const targetOriginalIndex = steps.findIndex(
+      (s) => s.key === visibleSteps[targetIndex].key
+    );
+    if (!isNavigatingForward) {
+      setCurrentStep(targetOriginalIndex);
+      return;
+    }
+    const isSkippingSteps = targetIndex > currentIndex + 1;
+    if (isSkippingSteps) {
+      for (let i = currentIndex; i < targetIndex; i++) {
+        const step = visibleSteps[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 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 currentStepOriginalIndex = steps.findIndex(
+        (s) => s.key === currentStepData.key
+      );
+      const isCurrentStepValid = stepValidationStatus[currentStepOriginalIndex] !== false;
+      if (isCurrentStepValid) {
+        const targetStep = visibleSteps[targetIndex];
+        const targetStepFields = targetStep.validationFields || [];
+        if (targetStepFields.length > 0) {
+          clearErrors(targetStepFields);
+          setTimeout(() => {
+            clearErrors(targetStepFields);
+            setStepValidationStatus(targetOriginalIndex, true);
+          }, 100);
+        }
+      }
+    }
+  }, [visibleSteps, steps, setCurrentStep, currentStep, startExternalValidation, trigger, endExternalValidation, setStepValidationStatus, activateFieldsValidation, stepValidationStatus, clearErrors]);
+  return useMemo(() => ({
+    visibleTitle,
+    orientation,
+    handleStepClick,
+    steps,
+    currentStep
+  }), [visibleTitle, orientation, handleStepClick, steps, currentStep]);
+}
+export {
+  useStepArea as u
+};

package/components/Stepper/subcomponents/StepArea/hooks/useVisibileSteps.d.ts

@@ -0,0 +1,8 @@
+import { Step as StepType } from '../../../types';
+/**
+ * useVisibileSteps hook is responsible for calculating the visible steps based on the form values and the visibility data
+ * Optimizado con useSyncExternalStore para evitar re-renders innecesarios
+ */
+export declare function useVisibileSteps(): {
+    visibleSteps: StepType[];
+};

package/components/Stepper/subcomponents/StepArea/hooks/useVisibileSteps.js

@@ -0,0 +1,79 @@
+import { useRef, useCallback, useSyncExternalStore, useMemo } from "react";
+import { useFormContext } from "react-hook-form";
+import { u as useStepper } from "../../../hooks/useStepper/index.js";
+import { e as evaluateVisibilityStepCondition } from "../../../helpers/evaluateVisibilityStepCondition/index.js";
+import { d as deepShallow } from "../../../../../utils/deepShallow.js";
+function calculateVisibleSteps(steps, formValues, visibilityData) {
+  return steps.filter(
+    (step) => evaluateVisibilityStepCondition(step, formValues || {}, visibilityData || {})
+  );
+}
+function generateStepsKey(steps) {
+  return steps.map((step) => step.key).join(",");
+}
+function useVisibileSteps() {
+  const formContext = useFormContext();
+  const {
+    steps,
+    visibilityData
+  } = useStepper(
+    (state) => ({
+      steps: state.steps,
+      visibilityData: state.visibilityData
+    }),
+    deepShallow
+  );
+  const previousStepsKeyRef = useRef(null);
+  const cachedVisibleStepsRef = useRef([]);
+  const listenersRef = useRef(/* @__PURE__ */ new Set());
+  const subscribe = useCallback((callback) => {
+    listenersRef.current.add(callback);
+    const { unsubscribe } = formContext.watch((formValues) => {
+      const newVisibleSteps = calculateVisibleSteps(
+        steps,
+        formValues,
+        visibilityData
+      );
+      const newStepsKey = generateStepsKey(newVisibleSteps);
+      if (newStepsKey !== previousStepsKeyRef.current) {
+        previousStepsKeyRef.current = newStepsKey;
+        cachedVisibleStepsRef.current = newVisibleSteps;
+        listenersRef.current.forEach((listener) => listener());
+      }
+    });
+    return () => {
+      listenersRef.current.delete(callback);
+      unsubscribe();
+    };
+  }, [formContext, steps, visibilityData]);
+  const getSnapshot = useCallback(() => {
+    const formValues = formContext.getValues();
+    const currentVisibleSteps = calculateVisibleSteps(
+      steps,
+      formValues,
+      visibilityData
+    );
+    const stepsKey = generateStepsKey(currentVisibleSteps);
+    if (previousStepsKeyRef.current === null) {
+      previousStepsKeyRef.current = stepsKey;
+      cachedVisibleStepsRef.current = currentVisibleSteps;
+    }
+    if (stepsKey === previousStepsKeyRef.current) {
+      return cachedVisibleStepsRef.current;
+    }
+    previousStepsKeyRef.current = stepsKey;
+    cachedVisibleStepsRef.current = currentVisibleSteps;
+    return currentVisibleSteps;
+  }, [formContext, steps, visibilityData]);
+  const visibleSteps = useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getSnapshot
+  );
+  return useMemo(() => ({
+    visibleSteps
+  }), [visibleSteps]);
+}
+export {
+  useVisibileSteps as u
+};

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

@@ -1,127 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { useFormContext, useWatch } from "react-hook-form";
-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";
+import { u as useStepArea } from "./hooks/useStepArea.js";
+import { u as useVisibileSteps } from "./hooks/useVisibileSteps.js";
 function StepArea() {
-  const { trigger, clearErrors } = useFormContext();
-  const formValues = useWatch();
-  const {
-    activateFieldsValidation,
-    startExternalValidation,
-    endExternalValidation
-  } = useDynamicValidation();
-  const {
-    currentStep,
-    steps,
-    visibleTitle,
-    setCurrentStep,
-    orientation,
-    setStepValidationStatus,
-    stepValidationStatus,
-    visibilityData
-  } = useStepper(
-    (state) => ({
-      currentStep: state.currentStep,
-      steps: state.steps,
-      visibleTitle: state.visibleTitle,
-      setCurrentStep: state.actions.setCurrentStep,
-      indicatorType: state.indicatorType,
-      orientation: state.orientation,
-      setStepValidationStatus: state.actions.setStepValidationStatus,
-      stepValidationStatus: state.stepValidationStatus,
-      visibilityData: state.visibilityData
-    }),
-    shallow
-  );
-  const allSteps = steps;
-  const visibleSteps = useMemo(() => {
-    return steps.filter(
-      (step) => evaluateVisibilityStepCondition(step, formValues || {}, visibilityData)
-    );
-  }, [steps, formValues, visibilityData]);
+  const { visibleSteps } = useVisibileSteps();
+  const { handleStepClick, visibleTitle, orientation, steps, currentStep } = useStepArea({ visibleSteps });
   const ownerState = {
     visibleTitle,
     orientation,
     totalSteps: visibleSteps.length
   };
-  const handleStepClick = async (targetIndex) => {
-    const currentIndex = visibleSteps.findIndex(
-      (step) => step.key === steps[currentStep].key
-    );
-    if (targetIndex === currentIndex) {
-      return;
-    }
-    const isNavigatingForward = targetIndex > currentIndex;
-    const targetOriginalIndex = steps.findIndex(
-      (s) => s.key === visibleSteps[targetIndex].key
-    );
-    if (!isNavigatingForward) {
-      setCurrentStep(targetOriginalIndex);
-      return;
-    }
-    const isSkippingSteps = targetIndex > currentIndex + 1;
-    if (isSkippingSteps) {
-      for (let i = currentIndex; i < targetIndex; i++) {
-        const step = visibleSteps[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 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 currentStepOriginalIndex = steps.findIndex(
-        (s) => s.key === currentStepData.key
-      );
-      const isCurrentStepValid = stepValidationStatus[currentStepOriginalIndex] !== false;
-      if (isCurrentStepValid) {
-        const targetStep = visibleSteps[targetIndex];
-        const targetStepFields = targetStep.validationFields || [];
-        if (targetStepFields.length > 0) {
-          clearErrors(targetStepFields);
-          setTimeout(() => {
-            clearErrors(targetStepFields);
-            setStepValidationStatus(targetOriginalIndex, true);
-          }, 100);
-        }
-      }
-    }
-  };
-  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, children: steps.map((step, originalIndex) => {
+    const visibleStepIndex = visibleSteps.findIndex((visibleStep) => visibleStep.key === step.key);
+    const isStepVisible = visibleStepIndex !== -1;
     return /* @__PURE__ */ jsxs(
       StepStyled,
       {

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

@@ -1,5 +1,5 @@
-import { StepperButtonProps } from '../../../types';
+import { ActionFormCancelProps } from '../../../../CommonActions/components/ActionFormCancel/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(props: ActionFormCancelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,58 +1,8 @@
 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 { 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";
+import { A as ActionFormCancel } from "../../../../CommonActions/components/ActionFormCancel/ActionFormCancel.js";
 function StepperCancelButton(props) {
-  const { label, ...rest } = props;
-  const { getLabel } = useModuleDictionary();
-  const { cancelAction } = useStepperActions();
-  const { openModal } = useModal();
-  const { close: closeWindow } = useWindowToolsMF();
-  const { control } = useFormContext();
-  const { isDirty } = useFormState({
-    control
-  });
-  const onConfirmQuit = useCallback(() => {
-    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),
-      variant: "outlined",
-      color: "default",
-      onClick: handleCancel,
-      ...rest,
-      "data-testid": "stepper-cancel-button"
-    }
-  );
+  const { ...rest } = props;
+  return /* @__PURE__ */ jsx(ActionFormCancel, { "data-testid": "stepper-cancel-button", ...rest });
 }
 export {
   StepperCancelButton as S

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

@@ -7,15 +7,16 @@ 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;
+  const { label, forceIsMobile, ...rest } = props;
   const { nextStepAction } = useStepperActions();
   const isMobile = useIsMobile();
+  const isMobileForce = forceIsMobile !== void 0 ? forceIsMobile : isMobile;
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
   const handleNext = async () => {
     await nextStepAction();
   };
-  return isMobile ? /* @__PURE__ */ jsx(
+  return isMobileForce ? /* @__PURE__ */ jsx(
     IconButton,
     {
       type: "button",

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

@@ -8,12 +8,13 @@ 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;
+  const { label, forceIsMobile, ...rest } = props;
   const { currentStep } = useStepper((state) => ({
     currentStep: state.currentStep
   }));
   const { host_static_assets, environment_assets } = useEnvironment();
   const isMobile = useIsMobile();
+  const isMobileForce = forceIsMobile !== void 0 ? forceIsMobile : isMobile;
   const { getLabel } = useModuleDictionary();
   const { prevStepAction } = useStepperActions();
   const handlePrev = () => {
@@ -22,7 +23,7 @@ function StepperPrevButton(props) {
   if (currentStep === 0) {
     return null;
   }
-  return isMobile ? /* @__PURE__ */ jsx(
+  return isMobileForce ? /* @__PURE__ */ jsx(
     IconButton,
     {
       type: "button",

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

@@ -1,18 +1,37 @@
 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";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { useIsMobile } from "@m4l/graphics";
+import { p as pathIcons } from "../../../icons.js";
+import { useFormContext } from "react-hook-form";
+import { L as LoadingButton } from "../../../../mui_extended/LoadingButton/LoadingButton.js";
+import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
+import { C as CircularProgress } from "../../../../mui_extended/CircularProgress/CircularProgress.js";
 function StepperSubmitButton(props) {
-  const { label, ...rest } = props;
+  const { label, forceIsMobile, ...rest } = props;
   const { getLabel } = useModuleDictionary();
-  return /* @__PURE__ */ jsx(
-    Button,
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const isMobile = useIsMobile();
+  const isMobileForce = forceIsMobile !== void 0 ? forceIsMobile : isMobile;
+  const { formState: { isSubmitting } } = useFormContext();
+  return isMobileForce ? /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      type: "submit",
+      icon: isSubmitting ? /* @__PURE__ */ jsx(CircularProgress, { color: "default" }) : `${host_static_assets}/${environment_assets}/${pathIcons.circleCheck}`,
+      "data-testid": "stepper-prev-button",
+      variant: "contained",
+      color: "primary"
+    }
+  ) : /* @__PURE__ */ jsx(
+    LoadingButton,
     {
       type: "submit",
       label: label || getLabel(DICTIONARY.LABEL_SUBMIT_BUTTON),
       variant: "contained",
       color: "primary",
       "data-testid": "stepper-submit-button",
+      loading: isSubmitting,
       ...rest
     }
   );

package/components/Stepper/subcomponents/StepperContent/subcomponents/Step/hooks/useIsStepVisible.d.ts

@@ -0,0 +1,8 @@
+import { StepProps } from '../../../../../types';
+/**
+ * Hook que determina si un step debe ser visible
+ * Usa useSyncExternalStore para optimizar re-renders:
+ * - Solo re-renderiza el componente si el valor booleano cambia realmente
+ * - Aunque el formulario cambie, si la visibilidad sigue siendo la misma, no re-renderiza
+ */
+export declare function useIsStepVisible(props: Pick<StepProps, 'stepKey'>): boolean;

package/components/Stepper/subcomponents/StepperContent/subcomponents/Step/hooks/useIsStepVisible.js

@@ -0,0 +1,93 @@
+import { useRef, useCallback, useSyncExternalStore } from "react";
+import { u as useStepper } from "../../../../../hooks/useStepper/index.js";
+import { useFormContext } from "react-hook-form";
+import { d as deepShallow } from "../../../../../../../utils/deepShallow.js";
+import { e as evaluateVisibilityStepCondition } from "../../../../../helpers/evaluateVisibilityStepCondition/index.js";
+function calculateStepVisibility(stepKey, steps, currentStep, formValues, visibilityData) {
+  const stepConfig = steps.find((step) => step.key === stepKey);
+  if (!stepConfig) {
+    return false;
+  }
+  const meetsVisibilityCondition = 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;
+}
+function useIsStepVisible(props) {
+  const { stepKey } = props;
+  const formContext = useFormContext();
+  const { currentStep, steps, visibilityData } = useStepper((state) => ({
+    currentStep: state.currentStep,
+    steps: state.steps,
+    visibilityData: state.visibilityData
+  }), deepShallow);
+  const previousValueRef = useRef(null);
+  const listenersRef = useRef(/* @__PURE__ */ new Set());
+  const subscribe = useCallback((callback) => {
+    listenersRef.current.add(callback);
+    const { unsubscribe } = formContext.watch((formValues) => {
+      const newValue = calculateStepVisibility(
+        stepKey,
+        steps,
+        currentStep,
+        formValues,
+        visibilityData
+      );
+      if (newValue !== previousValueRef.current) {
+        previousValueRef.current = newValue;
+        listenersRef.current.forEach((listener) => listener());
+      }
+    });
+    return () => {
+      listenersRef.current.delete(callback);
+      unsubscribe();
+    };
+  }, [formContext, stepKey, steps, currentStep, visibilityData]);
+  const getSnapshot = useCallback(() => {
+    const formValues = formContext.getValues();
+    const value = calculateStepVisibility(
+      stepKey,
+      steps,
+      currentStep,
+      formValues,
+      visibilityData
+    );
+    if (previousValueRef.current === null) {
+      previousValueRef.current = value;
+    }
+    return value;
+  }, [formContext, stepKey, steps, currentStep, visibilityData]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+export {
+  useIsStepVisible as u
+};

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

@@ -1,58 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { u as useStepper } from "../../../../hooks/useStepper/index.js";
-import { useWatch } from "react-hook-form";
 import { j as StepContentStyled } from "../../../../slots/StepperSlot.js";
-import { e as evaluateVisibilityStepCondition } from "../../../../helpers/evaluateVisibilityStepCondition/index.js";
+import { u as useIsStepVisible } from "./hooks/useIsStepVisible.js";
 function Step(props) {
   const { stepKey, children } = props;
-  const formValues = useWatch();
-  const { currentStep, steps, visibilityData } = useStepper((state) => ({
-    currentStep: state.currentStep,
-    steps: state.steps,
-    visibilityData: state.visibilityData
-  }));
-  const stepConfig = useMemo(() => {
-    return steps.find((step) => step.key === stepKey);
-  }, [steps, stepKey]);
-  const isStepVisible = useMemo(() => {
-    if (!stepConfig) {
-      return false;
-    }
-    const meetsVisibilityCondition = 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]);
+  const isStepVisible = useIsStepVisible({ stepKey });
   return /* @__PURE__ */ jsx(StepContentStyled, { ownerState: { isStepVisible }, children });
 }
 export {

package/components/Stepper/types.d.ts

@@ -150,6 +150,10 @@ export interface StepperFooterLeftActionsProps {
  * Props para los botones del Stepper que extienden las props de Button de mui_extended
  */
 export interface StepperButtonProps extends Omit<ButtonProps, 'label'> {
+    /**
+     * Forzar a un una versión especifica no importando el dispositivo
+     */
+    forceIsMobile?: boolean;
     label?: string;
 }
 /**