@m4l/components 9.3.13-JT02092025.beta.4 → 9.3.13-JT03092025.beta.2

package/components/Stepper/Stepper.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useMemo, Children, isValidElement, cloneElement } from "react";
+import { useMemo, Children, isValidElement } from "react";
 import clsx from "clsx";
 import { useFlagsPresent, CommonFlags } from "@m4l/core";
 import { S as StepperRootStyled, C as ContentSectionStyled } from "./slots/StepperSlot.js";
@@ -10,21 +10,13 @@ import { C as ContentArea } from "./subcomponents/ContentArea/index.js";
 import { S as StepperProvider } from "./store/StepperContext/index.js";
 import { S as StepperFooter } from "./subcomponents/StepperFooter/index.js";
 import { S as StepperContent } from "./subcomponents/StepperContent/index.js";
-import { u as useStickyStepperFooter } from "./hooks/useStickyStepperFooter/index.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
 function Stepper(props) {
   const { orientation, size, children, className } = props;
   const { currentSize } = useComponentSize(size);
-  const containerRef = useRef(null);
-  const contentSectionRef = useRef(null);
-  const stepperFooterSticky = useStickyStepperFooter(
-    containerRef,
-    contentSectionRef
-  );
   const ownerState = {
     size: currentSize,
-    orientation,
-    stepperFooterSticky
+    orientation
   };
   const classRoot = getComponentSlotRoot(STEPPER_PREFIX_NAME);
   const { stepperFooter, stepperContent } = useMemo(() => {
@@ -70,7 +62,7 @@ function Stepper(props) {
       /* @__PURE__ */ jsx(StepArea, {}),
       /* @__PURE__ */ jsx(ContentArea, { children: stepperContent })
     ] }),
-    stepperFooter && cloneElement(stepperFooter, { ownerState })
+    stepperFooter
   ] }) });
 }
 export {

package/components/Stepper/Stepper.styles.js

@@ -4,10 +4,10 @@ const stepperStyles = {
    *
    * Estilos para el contenedor principal del Stepper.
    */
-  stepperRoot: ({ theme, ownerState }) => ({
+  stepperRoot: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    justifyContent: ownerState?.stepperFooterSticky ? "flex-start" : "space-between",
+    justifyContent: "flex-start",
     background: theme.vars.palette.background.default,
     width: "100%",
     height: "100%",
@@ -24,6 +24,9 @@ const stepperStyles = {
     flexDirection: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "column" : "row",
     gap: theme.vars.size.baseSpacings.sp8
   }),
+  stepContent: ({ ownerState }) => ({
+    display: ownerState?.isStepVisible ? "block" : "none"
+  }),
   /**
    * Estilos para la sección que contiene los botones de acción del Stepper.
    */
@@ -69,6 +72,7 @@ const stepperStyles = {
     return {
       cursor: "pointer",
       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",
@@ -164,12 +168,10 @@ const stepperStyles = {
           borderLeft: `1px ${isCompleted ? "solid" : "dashed"} ${isCompleted ? theme.vars.palette.primary.enabled : theme.vars.palette.border.default}`
         }
       },
-      width: "20px",
-      height: "20px"
-      // ...getSizeStyles(theme, ownerState?.size || 'medium', 'case', (size) => ({
-      //   width: size,
-      //   height: size,
-      // })),
+      ...getSizeStyles(theme, ownerState?.size || "medium", "case", (size) => ({
+        width: size,
+        height: size
+      }))
     };
   },
   /**
@@ -256,18 +258,16 @@ const stepperStyles = {
   /**
    * Estilos para la sección de botones de acción del Stepper.
    */
-  stepperFooterSection: ({ theme, ownerState }) => ({
+  stepperFooterSection: ({ theme }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     paddingTop: theme.vars.size.baseSpacings.sp4,
-    ...ownerState?.stepperFooterSticky && {
-      position: "sticky",
-      bottom: 0,
-      backgroundColor: theme.vars.palette.background.default,
-      marginTop: "auto",
-      zIndex: 10
-    }
+    position: "sticky",
+    bottom: 0,
+    backgroundColor: theme.vars.palette.background.default,
+    marginTop: "auto",
+    zIndex: 10
   }),
   /**
    * Estilos para las acciones del lado izquierdo del StepperFooter.

package/components/Stepper/slots/StepperEnum.d.ts

@@ -11,6 +11,7 @@ export declare enum ContentSlots {
 }
 export declare enum ContentAreaSlots {
     contentArea = "contentArea",
+    stepContent = "stepContent",
     contentAreaHeader = "contentAreaHeader",
     contentAreaBody = "contentAreaBody",
     wrapperIcon = "wrapperIcon",

package/components/Stepper/slots/StepperEnum.js

@@ -13,6 +13,7 @@ var ContentSlots = /* @__PURE__ */ ((ContentSlots2) => {
 })(ContentSlots || {});
 var ContentAreaSlots = /* @__PURE__ */ ((ContentAreaSlots2) => {
   ContentAreaSlots2["contentArea"] = "contentArea";
+  ContentAreaSlots2["stepContent"] = "stepContent";
   ContentAreaSlots2["contentAreaHeader"] = "contentAreaHeader";
   ContentAreaSlots2["contentAreaBody"] = "contentAreaBody";
   ContentAreaSlots2["wrapperIcon"] = "wrapperIcon";
@@ -32,6 +33,6 @@ var StepperFooterSlots = /* @__PURE__ */ ((StepperFooterSlots2) => {
 export {
   ContentSlots as C,
   StepperSlots as S,
-  StepperFooterSlots as a,
-  ContentAreaSlots as b
+  ContentAreaSlots as a,
+  StepperFooterSlots as b
 };

package/components/Stepper/slots/StepperSlot.d.ts

@@ -13,6 +13,9 @@ export declare const StepAreaStyled: import('@emotion/styled').StyledComponent<i
 export declare const ContentAreaStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const StepContentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const StepStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/Stepper/slots/StepperSlot.js

@@ -1,6 +1,6 @@
 import { styled } from "@mui/material/styles";
 import { S as STEPPER_PREFIX_NAME } from "../constants.js";
-import { S as StepperSlots, C as ContentSlots, a as StepperFooterSlots, b as ContentAreaSlots } from "./StepperEnum.js";
+import { S as StepperSlots, C as ContentSlots, a as ContentAreaSlots, b as StepperFooterSlots } from "./StepperEnum.js";
 import { s as stepperStyles } from "../Stepper.styles.js";
 import { T as Typography } from "../../mui_extended/Typography/Typography.js";
 import { I as Icon } from "../../Icon/Icon.js";
@@ -20,6 +20,10 @@ const ContentAreaStyled = styled("div", {
   name: STEPPER_PREFIX_NAME,
   slot: ContentAreaSlots.contentArea
 })(stepperStyles.contentArea);
+const StepContentStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentAreaSlots.stepContent
+})(stepperStyles.stepContent);
 const StepStyled = styled("div", {
   name: STEPPER_PREFIX_NAME,
   slot: ContentSlots.step
@@ -96,7 +100,8 @@ export {
   StepNameStyled as g,
   IndicatorStyled as h,
   TextNumberStyled as i,
-  StepperFooterSectionStyled as j,
-  StepperFooterLeftActionsStyled as k,
-  StepperFooterRightActionsStyled as l
+  StepContentStyled as j,
+  StepperFooterSectionStyled as k,
+  StepperFooterLeftActionsStyled as l,
+  StepperFooterRightActionsStyled as m
 };

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

@@ -64,7 +64,7 @@ const StepperProvider = (props) => {
     if (stepperStoreRef.current && steps) {
       const store = stepperStoreRef.current;
       const currentState = store.getState();
-      store.getState().actions.init(steps);
+      store.getState().actions.init(steps, true);
       if (visibilityData) {
         const hasVisibilityDataChanged = JSON.stringify(prevVisibilityDataRef.current) !== JSON.stringify(visibilityData);
         if (hasVisibilityDataChanged) {

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

@@ -29,10 +29,12 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
           /**
            * init es la acción que se ejecuta al inicializar el store
            */
-          init: (steps) => {
+          init: (steps, preserveStepValidationStatus = false) => {
             set((state) => {
               state.steps = steps;
-              state.stepValidationStatus = {};
+              if (!preserveStepValidationStatus) {
+                state.stepValidationStatus = {};
+              }
             });
           },
           /**

package/components/Stepper/store/types.d.ts

@@ -22,9 +22,11 @@ export interface StepperState extends Pick<StepperProps, 'storeId' | 'visibleTit
 export interface StepperStateWithActions extends StepperState {
     actions: {
         /**
-         * inicializa el estado del componente con los steps que provienen desde afuera
+         * inicializa el estado del componente con los steps que provienen desde afuera,
+         * @param steps - Array de steps
+         * @param preserveStepValidationStatus - Indica si se debe preservar el estado de validación de los pasos, por defecto es false
          */
-        init: (steps: Array<Step>) => void;
+        init: (steps: Array<Step>, preserveStepValidationStatus?: boolean) => void;
         /**
          * Establece el paso actual
          * @param currentStep - Índice del paso actual

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

@@ -33,10 +33,8 @@ function StepArea() {
     shallow
   );
   const validSteps = useMemo(() => {
-    return steps.filter(
-      (step) => evaluateVisibilityStepCondition(step, formValues || {}, visibilityData)
-    );
-  }, [steps, formValues, visibilityData]);
+    return steps;
+  }, [steps]);
   const ownerState = {
     visibleTitle,
     orientation,
@@ -104,12 +102,24 @@ function StepArea() {
   };
   return /* @__PURE__ */ jsx(StepAreaStyled, { ownerState, 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: () => handleStepClick(validIndex),
-        ownerState: { ...ownerState, currentStep, step: validIndex },
+        ownerState: {
+          ...ownerState,
+          currentStep,
+          step: validIndex,
+          isStepVisible: evaluateVisibilityStepCondition(
+            step,
+            formValues || {},
+            visibilityData
+          )
+        },
         children: [
           visibleTitle && /* @__PURE__ */ jsx(
             StepNameStyled,
@@ -124,7 +134,7 @@ function StepArea() {
             {
               currentStep,
               step: validIndex,
-              totalSteps: validSteps.length,
+              totalSteps: totalVisibleSteps,
               originalStepIndex: originalIndex
             }
           )

package/components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.d.ts

@@ -3,4 +3,4 @@ import { StepProps } from '../../../../types';
  * Componente Step - Representa un paso individual en el Stepper
  * Solo se renderiza cuando el step actual coincide con stepKey Y la condition es true
  */
-export declare function Step(props: StepProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Step(props: StepProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,8 @@
-import { jsx, Fragment } from "react/jsx-runtime";
+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";
 function Step(props) {
   const { stepKey, children } = props;
@@ -24,18 +25,16 @@ function Step(props) {
     if (stepKey !== currentStepConfig.key) {
       return false;
     }
-    if (stepConfig && !evaluateVisibilityStepCondition(stepConfig, formValues || {}, visibilityData)) {
+    if (stepConfig && !evaluateVisibilityStepCondition(
+      stepConfig,
+      formValues || {},
+      visibilityData
+    )) {
       return false;
     }
     return true;
   }, [currentStepConfig, stepKey, stepConfig, formValues, visibilityData]);
-  const renderedContent = useMemo(() => {
-    if (!isStepVisible) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }, [isStepVisible, children]);
-  return renderedContent;
+  return /* @__PURE__ */ jsx(StepContentStyled, { ownerState: { isStepVisible }, children });
 }
 export {
   Step as S

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

@@ -1,10 +1,10 @@
 import { jsxs } from "react/jsx-runtime";
 import { useMemo, Children, isValidElement } from "react";
-import { j as StepperFooterSectionStyled } from "../../slots/StepperSlot.js";
+import { k as StepperFooterSectionStyled } from "../../slots/StepperSlot.js";
 import { S as StepperFooterLeftActions } from "./subcomponents/StepperFooterLeftActions/index.js";
 import { S as StepperFooterRightActions } from "./subcomponents/StepperFooterRightActions/index.js";
 function StepperFooter(props) {
-  const { children, ownerState } = props;
+  const { children } = props;
   const { stepperFooterLeftActions, stepperFooterRightActions } = useMemo(() => {
     let parsedLeftActions = null;
     let parsedRightActions = null;
@@ -38,7 +38,7 @@ function StepperFooter(props) {
       stepperFooterRightActions: parsedRightActions
     };
   }, [children]);
-  return /* @__PURE__ */ jsxs(StepperFooterSectionStyled, { ownerState, children: [
+  return /* @__PURE__ */ jsxs(StepperFooterSectionStyled, { children: [
     stepperFooterLeftActions,
     stepperFooterRightActions
   ] });

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

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { k as StepperFooterLeftActionsStyled } from "../../../../slots/StepperSlot.js";
+import { l as StepperFooterLeftActionsStyled } from "../../../../slots/StepperSlot.js";
 function StepperFooterLeftActions(props) {
   const { children } = props;
   return /* @__PURE__ */ jsx(StepperFooterLeftActionsStyled, { children });

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useMemo } from "react";
 import { u as useIsLastVisibleValidStep } from "../../../../hooks/useIsLastVisibleValidStep/index.js";
-import { l as StepperFooterRightActionsStyled } from "../../../../slots/StepperSlot.js";
+import { m as StepperFooterRightActionsStyled } from "../../../../slots/StepperSlot.js";
 import { S as StepperNextButton } from "../../../StepperButtons/StepperNextButton/index.js";
 import { S as StepperSubmitButton } from "../../../StepperButtons/StepperSubmitButton/index.js";
 function StepperFooterRightActions(props) {

package/components/Stepper/types.d.ts

@@ -138,7 +138,6 @@ export interface IndicatorProps {
  */
 export interface StepperFooterProps {
     children?: ReactNode;
-    ownerState?: StepperOwnerState;
 }
 /**
  * Props del StepperFooterLeftActions
@@ -160,7 +159,7 @@ export interface StepperOwnerState extends Pick<StepperProps, 'visibleTitle'>, R
     indicatorType?: IndicatorType;
     size?: Extract<Sizes, 'small' | 'medium'>;
     stepValidationStatus?: Record<number, boolean>;
-    stepperFooterSticky?: boolean;
+    isStepVisible?: boolean;
 }
 export type StepperSlotsType = StepperSlots | ContentSlots | ContentAreaSlots | StepperFooterSlots;
 export type StepperStyles = M4LOverridesStyleRules<StepperSlotsType, typeof STEPPER_PREFIX_NAME, Theme>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.13-JT02092025.beta.4",
+  "version": "9.3.13-JT03092025.beta.2",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

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

@@ -1,7 +0,0 @@
-/**
- * Hook para determinar cuando el footer del Stepper debe usar posición sticky.
- * @param containerRef - Referencia al contenedor del Stepper
- * @param contentRef - Referencia al área de contenido del Stepper
- * @returns boolean - true si el footer debe ser sticky, false en caso contrario
- */
-export declare function useStickyStepperFooter(containerRef: React.RefObject<HTMLDivElement>, contentRef: React.RefObject<HTMLElement>): boolean;

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

@@ -1,20 +0,0 @@
-import { useMemo } from "react";
-import { u as useSizeContainer } from "../../../../hooks/useSizeContainer/index.js";
-function useStickyStepperFooter(containerRef, contentRef) {
-  const containerSize = useSizeContainer(containerRef.current);
-  const shouldBeSticky = useMemo(() => {
-    if (!containerRef.current || !contentRef.current) {
-      return false;
-    }
-    const containerHeight = containerRef.current.clientHeight;
-    const contentHeight = contentRef.current.clientHeight;
-    const totalContentHeight = contentHeight + 80;
-    const exceedsContainer = totalContentHeight > containerHeight;
-    const hasMinimumSpace = containerHeight > 120;
-    return exceedsContainer && hasMinimumSpace;
-  }, [containerSize, containerRef, contentRef]);
-  return shouldBeSticky;
-}
-export {
-  useStickyStepperFooter as u
-};