@m4l/components 9.3.12-JT270825.beta.2 → 9.3.12-JT290825.beta.1

package/components/Stepper/Stepper.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, Children, isValidElement } from "react";
+import { useRef, useMemo, Children, isValidElement, cloneElement } from "react";
 import { useFlagsPresent, CommonFlags } from "@m4l/core";
 import { S as StepperRootStyled, C as ContentSectionStyled } from "./slots/StepperSlot.js";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
@@ -9,13 +9,21 @@ 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 } = props;
   const { currentSize } = useComponentSize(size);
+  const containerRef = useRef(null);
+  const contentSectionRef = useRef(null);
+  const stepperFooterSticky = useStickyStepperFooter(
+    containerRef,
+    contentSectionRef
+  );
   const ownerState = {
     size: currentSize,
-    orientation
+    orientation,
+    stepperFooterSticky
   };
   const classRoot = getComponentSlotRoot(STEPPER_PREFIX_NAME);
   const { stepperFooter, stepperContent } = useMemo(() => {
@@ -61,7 +69,7 @@ function Stepper(props) {
       /* @__PURE__ */ jsx(StepArea, {}),
       /* @__PURE__ */ jsx(ContentArea, { children: stepperContent })
     ] }),
-    stepperFooter
+    stepperFooter && cloneElement(stepperFooter, { ownerState })
   ] }) });
 }
 export {

package/components/Stepper/Stepper.styles.js

@@ -4,11 +4,13 @@ const stepperStyles = {
    *
    * Estilos para el contenedor principal del Stepper.
    */
-  stepperRoot: ({ theme }) => ({
+  stepperRoot: ({ theme, ownerState }) => ({
     display: "flex",
     flexDirection: "column",
+    justifyContent: ownerState?.stepperFooterSticky ? "flex-start" : "space-between",
     background: theme.vars.palette.background.default,
     width: "100%",
+    height: "100%",
     borderRadius: theme.vars.size.borderRadius.r1
   }),
   /**
@@ -245,11 +247,18 @@ const stepperStyles = {
   /**
    * Estilos para la sección de botones de acción del Stepper.
    */
-  stepperFooterSection: ({ theme }) => ({
+  stepperFooterSection: ({ theme, ownerState }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    paddingTop: theme.vars.size.baseSpacings.sp4
+    paddingTop: theme.vars.size.baseSpacings.sp4,
+    ...ownerState?.stepperFooterSticky && {
+      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/dictionary.js

@@ -1,4 +1,7 @@
 const STEPPER_DICTIONARY_ID = "stepper";
+function getStepperComponentsDictionary() {
+  return [STEPPER_DICTIONARY_ID];
+}
 const DICTIONARY = {
   LABEL_PREV_BUTTON: `${STEPPER_DICTIONARY_ID}.label_prev_button`,
   LABEL_NEXT_BUTTON: `${STEPPER_DICTIONARY_ID}.label_next_button`,
@@ -6,5 +9,6 @@ const DICTIONARY = {
   LABEL_SUBMIT_BUTTON: `${STEPPER_DICTIONARY_ID}.label_submit_button`
 };
 export {
-  DICTIONARY as D
+  DICTIONARY as D,
+  getStepperComponentsDictionary as g
 };

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

@@ -2,7 +2,14 @@ import { u as useStepper } from "../useStepper/index.js";
 import { useFormContext } from "react-hook-form";
 function useStepperActions() {
   const { trigger, clearErrors, getValues, reset } = useFormContext();
-  const { nextStep, prevStep, currentStep, steps, setStepValidationStatus, resetStepper } = useStepper((state) => ({
+  const {
+    nextStep,
+    prevStep,
+    currentStep,
+    steps,
+    setStepValidationStatus,
+    resetStepper
+  } = useStepper((state) => ({
     nextStep: state.actions.nextStep,
     prevStep: state.actions.prevStep,
     currentStep: state.currentStep,
@@ -27,7 +34,7 @@ function useStepperActions() {
       const currentStepData = steps[currentStep];
       const fieldsToValidate = currentStepData?.validationFields || [];
       if (fieldsToValidate.length === 0) {
-        return await trigger();
+        return true;
       }
       return await trigger(fieldsToValidate);
     };

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

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

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

package/components/Stepper/index.d.ts

@@ -11,3 +11,4 @@ export { StepperCancelButton } from './subcomponents/StepperButtons/StepperCance
 export { StepperSubmitButton } from './subcomponents/StepperButtons/StepperSubmitButton';
 export { evaluateVisibilityStepCondition } from './helpers/evaluateVisibilityStepCondition';
 export { type Step as TypeStep } from './types';
+export { getStepperComponentsDictionary } from './dictionary';

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

@@ -1,17 +1,23 @@
 import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { W as WrapperIconStyled, I as IconStyled } from "../../../../slots/StepperSlot.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { u as useStepper } from "../../../../hooks/useStepper/index.js";
 function WrapperIcon() {
-  const { host_static_assets, environment_assets } = useStepper((state) => ({
+  const { steps, currentStep, host_static_assets, environment_assets } = useStepper((state) => ({
     host_static_assets: state.host_static_assets,
-    environment_assets: state.environment_assets
+    environment_assets: state.environment_assets,
+    steps: state.steps,
+    currentStep: state.currentStep
   }));
+  const currentStepConfig = useMemo(() => {
+    return steps[currentStep];
+  }, [steps, currentStep]);
   return /* @__PURE__ */ jsx(WrapperIconStyled, { children: /* @__PURE__ */ jsx(
     IconStyled,
     {
       color: "primary.enabled",
-      src: `${host_static_assets}/${environment_assets}/${pathIcons.patronum}`
+      src: currentStepConfig.icon ? currentStepConfig.icon : `${host_static_assets}/${environment_assets}/${pathIcons.patronum}`
     }
   ) });
 }

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

@@ -4,7 +4,7 @@ import { i 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 } = props;
+  const { children, ownerState } = 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, { children: [
+  return /* @__PURE__ */ jsxs(StepperFooterSectionStyled, { ownerState, children: [
     stepperFooterLeftActions,
     stepperFooterRightActions
   ] });

package/components/Stepper/types.d.ts

@@ -22,6 +22,10 @@ export type Step = {
      * Descripción del step.
      */
     description?: string;
+    /**
+     * Icono del step.
+     */
+    icon?: string;
     /**
      * Array con los campos que se deben validar en el step.
      */
@@ -130,6 +134,7 @@ export interface IndicatorProps {
  */
 export interface StepperFooterProps {
     children?: ReactNode;
+    ownerState?: StepperOwnerState;
 }
 /**
  * Props del StepperFooterLeftActions
@@ -143,7 +148,7 @@ export interface StepperFooterLeftActionsProps {
 export interface StepperFooterRightActionsProps {
     children?: ReactNode;
 }
-export interface StepperOwnerState extends Pick<StepperProps, 'visibleTitle'> {
+export interface StepperOwnerState extends Pick<StepperProps, 'visibleTitle'>, Record<string, unknown> {
     step?: number;
     currentStep?: number;
     totalSteps?: number;
@@ -151,6 +156,7 @@ export interface StepperOwnerState extends Pick<StepperProps, 'visibleTitle'> {
     indicatorType?: IndicatorType;
     size?: Extract<Sizes, 'small' | 'medium'>;
     stepValidationStatus?: Record<number, boolean>;
+    stepperFooterSticky?: boolean;
 }
 export type StepperSlotsType = StepperSlots | ContentSlots | ContentAreaSlots | StepperFooterSlots;
 export type StepperStyles = M4LOverridesStyleRules<StepperSlotsType, typeof STEPPER_PREFIX_NAME, Theme>;

package/index.js

@@ -206,15 +206,16 @@ import { S as S18 } from "./components/Stepper/subcomponents/StepperButtons/Step
 import { S as S19 } from "./components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.js";
 import { S as S20 } from "./components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.js";
 import { e as e3 } from "./components/Stepper/helpers/evaluateVisibilityStepCondition/index.js";
+import { g as g29 } from "./components/Stepper/dictionary.js";
 import { F as F3, R as R23, u as u17 } from "./components/hook-form/RHFormContext/index.js";
-import { g as g29 } from "./components/hook-form/RHFormContext/dictionary.js";
+import { g as g30 } from "./components/hook-form/RHFormContext/dictionary.js";
 import { u as u18 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
 import { A as A16 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
 import { a as a15, M as M9 } from "./contexts/ModalContext/index.js";
 import { u as u19 } from "./hooks/useFormAddEdit/index.js";
 import { u as u20 } from "./hooks/useModal/index.js";
 import { u as u21 } from "./hooks/useTab/index.js";
-import { g as g30 } from "./hooks/useFormAddEdit/dictionary.js";
+import { g as g31 } from "./hooks/useFormAddEdit/dictionary.js";
 import { u as u22 } from "./hooks/useFormFocus/index.js";
 import { u as u23 } from "./hooks/useInterval/index.js";
 import { u as u24 } from "./hooks/useComponentSize/useComponentSize.js";
@@ -228,17 +229,17 @@ import { u as u30 } from "./hooks/usePopoverContainer/usePopoverContainer.js";
 import { u as u31 } from "./hooks/useIsVisible/useIsVisible.js";
 import { c as c4 } from "./utils/capitalizeFirstLetter.js";
 import { i as i2 } from "./utils/isValidDate.js";
-import { g as g31 } from "./utils/getComponentUtilityClass.js";
-import { g as g32 } from "./utils/getPaletteColor.js";
-import { g as g33 } from "./utils/getTypographyStyles.js";
-import { g as g34 } from "./utils/getIconColor.js";
-import { a as a16, g as g35 } from "./utils/getSizeStyles/getSizeStyles.js";
+import { g as g32 } from "./utils/getComponentUtilityClass.js";
+import { g as g33 } from "./utils/getPaletteColor.js";
+import { g as g34 } from "./utils/getTypographyStyles.js";
+import { g as g35 } from "./utils/getIconColor.js";
+import { a as a16, g as g36 } from "./utils/getSizeStyles/getSizeStyles.js";
 import { O as O2 } from "./utils/ObjectQueue.js";
-import { g as g36, a as a17 } from "./utils/getComponentSlotRoot.js";
+import { g as g37, a as a17 } from "./utils/getComponentSlotRoot.js";
 import { f } from "./utils/formatDistanceToNow/formatDistanteToNow.js";
-import { g as g37 } from "./utils/getValidDate.js";
-import { g as g38 } from "./utils/getNullGuard.js";
-import { g as g39 } from "./helpers/getStepsAndValidationSchema/getStepsAndValidationSchema.js";
+import { g as g38 } from "./utils/getValidDate.js";
+import { g as g39 } from "./utils/getNullGuard.js";
+import { g as g40 } from "./helpers/getStepsAndValidationSchema/getStepsAndValidationSchema.js";
 export {
   A7 as AREAS_DICCTIONARY,
   a3 as AREAS_DICTIONARY_ID,
@@ -436,23 +437,23 @@ export {
   b2 as getAreasComponentsDictionary,
   g3 as getAreasDictionary,
   g4 as getCommonActionsDictionary,
-  g36 as getComponentClasses,
+  g37 as getComponentClasses,
   a17 as getComponentSlotRoot,
-  g31 as getComponentUtilityClass,
+  g32 as getComponentUtilityClass,
   g5 as getDataGridComponentsDictionary,
   g6 as getDataGridRowsFromSet,
   g17 as getDistanceToNowFormatterComponentsDictionary,
   g7 as getDynamicFilterComponentsDictionary,
   a6 as getDynamicSortComponentsDictionary,
   a5 as getFilterGroupFieldsByName,
-  g29 as getFormComponentsDictionary,
+  g30 as getFormComponentsDictionary,
   g15 as getFormatConcatenated,
   g12 as getFormatDate,
   g14 as getFormatPoints,
   g16 as getFormatPrice,
   g18 as getFormattersComponentsDictionary,
   a16 as getHeightSizeStyles,
-  g34 as getIconColor,
+  g35 as getIconColor,
   g8 as getIsIfInDynamicFilter,
   g22 as getLoadingErrorComponentsDictionary,
   g24 as getMFLoaderComponentsDictionary,
@@ -461,21 +462,22 @@ export {
   g28 as getModalDictionary,
   g26 as getNoItemPrivilegesComponentsDictionary,
   g25 as getNoItemSelectedComponentsDictionary,
-  g38 as getNullGuard,
+  g39 as getNullGuard,
   g27 as getObjectLogsComponentsDictionary,
   g11 as getPagerComponentsDictionary,
-  g32 as getPaletteColor,
+  g33 as getPaletteColor,
   g21 as getPeriodComponetsDictionary,
   g20 as getRHFAutocompleteAsyncComponentsDictionary,
   g19 as getRHFAutocompleteComponentsDictionary,
   g9 as getRawFiltersForNetwork,
   g10 as getRawSortsForNetwork,
-  g35 as getSizeStyles,
-  g39 as getStepsAndValidationSchema,
-  g33 as getTypographyStyles,
+  g36 as getSizeStyles,
+  g29 as getStepperComponentsDictionary,
+  g40 as getStepsAndValidationSchema,
+  g34 as getTypographyStyles,
   g13 as getUncertaintyFormat,
-  g37 as getValidDate,
-  g30 as getformAddEditDictionary,
+  g38 as getValidDate,
+  g31 as getformAddEditDictionary,
   i as isEqualLayout,
   k as isEqualLayouts,
   i2 as isValidDate,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.12-JT270825.beta.2",
+  "version": "9.3.12-JT290825.beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

package/storybook/components/Stepper/subcomponents/StepperDecorator.d.ts

@@ -5,5 +5,5 @@ interface StepperDecoratorProps extends Omit<StepperProps, 'steps'> {
 /**
  * Decorator para Storybook
  */
-export declare function StepperDecorator({ withVisibilityConditions, }: StepperDecoratorProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepperDecorator({ withVisibilityConditions, orientation, visibleTitle, indicatorType, }: StepperDecoratorProps): import("react/jsx-runtime").JSX.Element;
 export {};