@m4l/components 9.3.19-BE061025-beta.1 → 9.3.19-BE101025-beta.1

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,11 @@
+/**
+ * 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

@@ -0,0 +1,69 @@
+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
+};

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,20 @@ 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) {
+        clearAllValidation();
+      }
+    }
     if (success && futureFields.length > 0) {
       clearErrors(futureFields);
       setTimeout(() => {
@@ -62,13 +75,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/store/StepperStore/index.js

@@ -35,6 +35,18 @@ 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;
+                }
+              }
             });
           },
           /**
@@ -114,9 +126,16 @@ 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/StepArea/index.js

@@ -5,10 +5,16 @@ 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,
@@ -32,16 +38,19 @@ function StepArea() {
     }),
     shallow
   );
-  const validSteps = useMemo(() => {
-    return steps;
-  }, [steps]);
+  const allSteps = steps;
+  const visibleSteps = useMemo(() => {
+    return steps.filter(
+      (step) => evaluateVisibilityStepCondition(step, formValues || {}, visibilityData)
+    );
+  }, [steps, formValues, visibilityData]);
   const ownerState = {
     visibleTitle,
     orientation,
-    totalSteps: validSteps.length
+    totalSteps: visibleSteps.length
   };
   const handleStepClick = async (targetIndex) => {
-    const currentIndex = validSteps.findIndex(
+    const currentIndex = visibleSteps.findIndex(
       (step) => step.key === steps[currentStep].key
     );
     if (targetIndex === currentIndex) {
@@ -49,7 +58,7 @@ function StepArea() {
     }
     const isNavigatingForward = targetIndex > currentIndex;
     const targetOriginalIndex = steps.findIndex(
-      (s) => s.key === validSteps[targetIndex].key
+      (s) => s.key === visibleSteps[targetIndex].key
     );
     if (!isNavigatingForward) {
       setCurrentStep(targetOriginalIndex);
@@ -58,37 +67,43 @@ function StepArea() {
     const isSkippingSteps = targetIndex > currentIndex + 1;
     if (isSkippingSteps) {
       for (let i = currentIndex; i < targetIndex; i++) {
-        const step = validSteps[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 = validSteps[currentIndex];
+      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 = validSteps[currentIndex];
+      const currentStepData = visibleSteps[currentIndex];
       const currentStepOriginalIndex = steps.findIndex(
         (s) => s.key === currentStepData.key
       );
       const isCurrentStepValid = stepValidationStatus[currentStepOriginalIndex] !== false;
       if (isCurrentStepValid) {
-        const targetStep = validSteps[targetIndex];
+        const targetStep = visibleSteps[targetIndex];
         const targetStepFields = targetStep.validationFields || [];
         if (targetStepFields.length > 0) {
           clearErrors(targetStepFields);
@@ -100,25 +115,24 @@ function StepArea() {
       }
     }
   };
-  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__ */ 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__ */ jsxs(
       StepStyled,
       {
         role: "button",
-        onClick: () => handleStepClick(validIndex),
+        onClick: () => isStepVisible ? handleStepClick(visibleStepIndex) : void 0,
         ownerState: {
           ...ownerState,
           currentStep,
-          step: validIndex,
-          isStepVisible: evaluateVisibilityStepCondition(
-            step,
-            formValues || {},
-            visibilityData
-          )
+          step: visibleStepIndex,
+          // Usa el índice en la secuencia visible
+          isStepVisible
         },
         "data-testid": `stepper-step-${step.key}`,
         children: [
@@ -126,7 +140,13 @@ function StepArea() {
             StepNameStyled,
             {
               variant: "body",
-              ownerState: { ...ownerState, currentStep, step: validIndex },
+              ownerState: {
+                ...ownerState,
+                currentStep,
+                step: visibleStepIndex,
+                originalStepIndex: originalIndex,
+                isStepVisible
+              },
               children: step.title
             }
           ),
@@ -134,8 +154,8 @@ function StepArea() {
             Indicator,
             {
               currentStep,
-              step: validIndex,
-              totalSteps: totalVisibleSteps,
+              step: visibleStepIndex,
+              totalSteps: visibleSteps.length,
               originalStepIndex: originalIndex
             }
           )

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

@@ -21,15 +21,6 @@ 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;
@@ -45,6 +36,20 @@ 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(
@@ -67,7 +72,10 @@ function Indicator(props) {
     )
   ) : (
     // Mostrar estado normal (número o dot) para pasos no validados o actuales
-    /* @__PURE__ */ jsx(TextNumberStyled, { variant: "body", ownerState: { currentStep, step }, children: effectiveIndicatorType === "number" ? step + 1 : /* @__PURE__ */ jsx(
+    /* @__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(
       Icon,
       {
         src: `${host_static_assets}/${environment_assets}/${currentStep === originalStepIndex ? pathIcons.dotSelected : pathIcons.dotOutline}`,

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

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

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

@@ -1,22 +1,55 @@
 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 } from "../../../dictionary.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";
-function StepperCancelButton() {
+function StepperCancelButton(props) {
+  const { label, ...rest } = props;
   const { getLabel } = useModuleDictionary();
   const { cancelAction } = useStepperActions();
-  const handleCancel = () => {
+  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: getLabel(DICTIONARY.LABEL_CANCEL_BUTTON),
+      label: label || getLabel(DICTIONARY$1.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,4 +1,5 @@
+import { StepperButtonProps } from '../../../types';
 /**
  * Botón modular para avanzar al siguiente step del Stepper
  */
-export declare function StepperNextButton(): import("react/jsx-runtime").JSX.Element;
+export declare function StepperNextButton(props: StepperButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -6,7 +6,8 @@ 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() {
+function StepperNextButton(props) {
+  const { label, ...rest } = props;
   const { nextStepAction } = useStepperActions();
   const isMobile = useIsMobile();
   const { getLabel } = useModuleDictionary();
@@ -28,12 +29,13 @@ function StepperNextButton() {
     Button,
     {
       type: "button",
-      label: getLabel(DICTIONARY.LABEL_NEXT_BUTTON),
+      label: 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"
+      "data-testid": "stepper-next-button",
+      ...rest
     }
   );
 }

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

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

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

@@ -7,7 +7,8 @@ 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() {
+function StepperPrevButton(props) {
+  const { label, ...rest } = props;
   const { currentStep } = useStepper((state) => ({
     currentStep: state.currentStep
   }));
@@ -35,12 +36,13 @@ function StepperPrevButton() {
     Button,
     {
       type: "button",
-      label: !isMobile ? getLabel(DICTIONARY.LABEL_PREV_BUTTON) : "",
+      label: label || getLabel(DICTIONARY.LABEL_PREV_BUTTON),
       variant: "outlined",
       color: "default",
       onClick: handlePrev,
       startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.arrowLeft}`,
-      "data-testid": "stepper-prev-button"
+      "data-testid": "stepper-prev-button",
+      ...rest
     }
   );
 }

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

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

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

@@ -2,16 +2,18 @@ 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() {
+function StepperSubmitButton(props) {
+  const { label, ...rest } = props;
   const { getLabel } = useModuleDictionary();
   return /* @__PURE__ */ jsx(
     Button,
     {
       type: "submit",
-      label: getLabel(DICTIONARY.LABEL_SUBMIT_BUTTON),
+      label: label || getLabel(DICTIONARY.LABEL_SUBMIT_BUTTON),
       variant: "contained",
       color: "primary",
-      "data-testid": "stepper-submit-button"
+      "data-testid": "stepper-submit-button",
+      ...rest
     }
   );
 }

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

@@ -12,28 +12,47 @@ 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 (!currentStepConfig) {
-      return false;
-    }
-    if (stepKey !== currentStepConfig.key) {
+    if (!stepConfig) {
       return false;
     }
-    if (stepConfig && !evaluateVisibilityStepCondition(
+    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;
     }
-    return true;
-  }, [currentStepConfig, stepKey, stepConfig, formValues, visibilityData]);
+    const activeVisibleStep = visibleStepsUpToCurrent[visibleStepsUpToCurrent.length - 1];
+    return stepKey === activeVisibleStep.key;
+  }, [currentStep, stepKey, stepConfig, steps, formValues, visibilityData]);
   return /* @__PURE__ */ jsx(StepContentStyled, { ownerState: { isStepVisible }, children });
 }
 export {