@m4l/components 9.3.10 → 9.3.12-JT270825.beta.1

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

@@ -0,0 +1,57 @@
+/**
+ * Slots Stepper
+ */
+export declare const StepperRootStyled: 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 ContentSectionStyled: 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<HTMLElement>, HTMLElement>, keyof import('react').HTMLAttributes<HTMLElement> | keyof import('react').ClassAttributes<HTMLElement>>, {}>;
+export declare const StepAreaStyled: 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 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 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>>, {}>;
+export declare const StepNameStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const IndicatorStyled: 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 TextNumberStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const ContentAreaHeaderStyled: 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 WrapperIconStyled: 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 WrapperTitleStyled: 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 IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon/types').IconProps, keyof import('../../Icon/types').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const TitleStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const DescriptionStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const StepperFooterSectionStyled: 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<HTMLElement>, HTMLElement>, keyof import('react').HTMLAttributes<HTMLElement> | keyof import('react').ClassAttributes<HTMLElement>>, {}>;
+export declare const StepperFooterLeftActionsStyled: 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 StepperFooterRightActionsStyled: 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 WrapperButtonsStyled: 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/store/StepperContext/index.d.ts

@@ -0,0 +1,12 @@
+import { StepperContextProps } from '../types';
+import { StepperStore } from '../StepperStore';
+declare const StepperContext: import('react').Context<{
+    store: StepperStore;
+} | null>;
+/**
+ * Contexto que crea y da alcance al Store (Zustand) para ser usado desde cualquier parte del componente.
+ * @param props StepperProps
+ * @returns Proveedor de contexto, y el contexto
+ */
+declare const StepperProvider: (props: StepperContextProps) => import("react/jsx-runtime").JSX.Element;
+export { StepperProvider, StepperContext };

package/components/Stepper/store/StepperStore/index.d.ts

@@ -0,0 +1,16 @@
+import { InitialStoreProps, StepperStateWithActions } from '../types';
+/**
+ *  Crea el store de zustand para el componente Stepper
+ * @param initProps Variables iniciales que necesita store para poder inicializarlo
+ * @returns
+ */
+export declare const createStepperStore: (initProps: InitialStoreProps, storeDevtoolsEnabled?: boolean) => Omit<Omit<import('zustand').StoreApi<StepperStateWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: StepperStateWithActions | Partial<StepperStateWithActions> | ((state: StepperStateWithActions) => StepperStateWithActions | Partial<StepperStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: StepperStateWithActions | Partial<StepperStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<StepperStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+};
+export type StepperStore = ReturnType<typeof createStepperStore>;

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

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+import { Step, StepperOwnerState, StepperProps } from '../types';
+export interface StepperState extends Pick<StepperProps, 'storeId' | 'visibleTitle' | 'steps' | 'indicatorType' | 'orientation' | 'size' | 'visibilityData'> {
+    /**
+     *  "ownerState" estado a nivel de clases del componente
+     */
+    ownerState: StepperOwnerState;
+    /**
+     * "currentStep" step actual
+     */
+    currentStep: number;
+    /**
+     * "host_static_assets" ruta base de los assets estáticos
+     */
+    host_static_assets: string;
+    /**
+     * "environment_assets" ruta del entorno de assets
+     */
+    environment_assets: string;
+    /**
+     * "completedSteps" pasos completados
+     */
+    completedSteps: number[];
+    /**
+     * "stepValidationStatus" estado de validación por cada step
+     * - true: el paso es válido
+     */
+    stepValidationStatus: Record<number, boolean>;
+    /**
+     * "isValidating" indica si el stepper está en proceso de validación
+     */
+    isValidating: boolean;
+}
+export interface StepperStateWithActions extends StepperState {
+    actions: {
+        /**
+         * inicializa el estado del componente con los steps que provienen desde afuera
+         */
+        init: (steps: Array<Step>) => void;
+        /**
+         * Establece el paso actual
+         * @param currentStep - Índice del paso actual
+         */
+        setCurrentStep: (currentStep: number) => void;
+        /**
+         * Marca un paso como completado
+         * @param stepIndex - Índice del paso
+         */
+        setCompletedStep: (stepIndex: number) => void;
+        /**
+         * Establece el estado de validación de un paso
+         * @param stepIndex - Índice del paso
+         * @param isValid - Estado de validación del paso
+         */
+        setStepValidationStatus: (stepIndex: number, isValid: boolean) => void;
+        /**
+         * Retrocede al paso anterior válido
+         * @param formData - Datos del formulario para evaluar conditions
+         * @param visibilityData - Datos adicionales para evaluar conditions
+         */
+        prevStep: (formData?: Record<string, any>, visibilityData?: any) => void;
+        /**
+         * Valida el paso actual y avanza al siguiente si es válido
+         * @param validateFn - Función de validación
+         * @param formData - Datos del formulario para evaluar conditions
+         * @param visibilityData - Datos adicionales para evaluar conditions
+         */
+        nextStep: (validateFn: () => Promise<boolean>, formData?: Record<string, any>, visibilityData?: any) => Promise<boolean>;
+        /**
+         * resetStepper - Resetea el Stepper a su estado inicial
+         */
+        resetStepper: () => void;
+    };
+}
+export interface StepperContextProps extends StepperProps {
+    children: ReactNode;
+}
+export type InitialStoreProps = Pick<StepperState, 'ownerState' | 'storeId' | 'steps' | 'visibleTitle' | 'host_static_assets' | 'environment_assets' | 'indicatorType' | 'orientation' | 'visibilityData'>;

package/components/Stepper/subcomponents/ContentArea/index.d.ts

@@ -0,0 +1,6 @@
+import { ContentAreaProps } from '../../types';
+/**
+ * El componente ContentArea renderiza el área de contenido del Stepper.
+ * Contiene el encabezado con un icono, titulo y descripción, y el contenido del step actual.
+ */
+export declare function ContentArea(props: ContentAreaProps): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperIcon/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente WrapperIcon renderiza el icono del título del Stepper.
+ */
+export declare function WrapperIcon(): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperTitle/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * El componente WrapperTitle renderiza el título y la descripción del step en el Stepper.
+ */
+export declare function WrapperTitle(): import("react/jsx-runtime").JSX.Element | null;

package/components/Stepper/subcomponents/StepArea/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * El componente StepArea renderiza el área de pasos del Stepper.
+ * Muestra solo los pasos que cumplen su condition según los datos del formulario.
+ * Utiliza el hook useStepper para obtener el estado actual y los pasos definidos.
+ */
+export declare function StepArea(): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/StepArea/subcomponents/Inidicator/index.d.ts

@@ -0,0 +1,5 @@
+import { IndicatorProps } from '../../../../types';
+/**
+ * El componente Indicator renderiza el indicador del paso actual
+ */
+export declare function Indicator(props: IndicatorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+/**
+ * Botón modular para cancelar el proceso del Stepper
+ */
+export declare function StepperCancelButton(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+/**
+ * Botón modular para avanzar al siguiente step del Stepper
+ */
+export declare function StepperNextButton(): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,4 @@
+/**
+ * Botón modular para finalizar el Stepper y ejecutar onFinalSubmit
+ */
+export declare function StepperSubmitButton(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+export { StepperNextButton } from './StepperNextButton';
+export { StepperPrevButton } from './StepperPrevButton';
+export { StepperCancelButton } from './StepperCancelButton';
+export { StepperSubmitButton } from './StepperSubmitButton';

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

@@ -0,0 +1,7 @@
+import { StepperContentProps } from '../../types';
+/**
+ * Componente StepperContent - Contenedor que renderiza todos los Steps
+ * Cada Step maneja su propia lógica de renderizado condicional
+ * SOLO acepta componentes Step como hijos.
+ */
+export declare function StepperContent(props: StepperContentProps): import("react/jsx-runtime").JSX.Element;

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

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

package/components/Stepper/subcomponents/StepperFooter/index.d.ts

@@ -0,0 +1,6 @@
+import { StepperFooterProps } from '../../types';
+/**
+ * StepperFooter es el componente footer del Stepper que contiene las acciones de navegación.
+ * Puede incluir LeftActions y RightActions como children.
+ */
+export declare function StepperFooter(props: StepperFooterProps): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterLeftActions/index.d.ts

@@ -0,0 +1,6 @@
+import { StepperFooterLeftActionsProps } from '../../../../types';
+/**
+ * StepperFooterLeftActions es un componente de guía de estilos para acciones del lado izquierdo del footer del Stepper.
+ * Puede recibir children para renderizar contenido personalizado.
+ */
+export declare function StepperFooterLeftActions(props: StepperFooterLeftActionsProps): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.d.ts

@@ -0,0 +1,6 @@
+import { StepperFooterRightActionsProps } from '../../../../types';
+/**
+ * StepperFooterRightActions es un componente de guía de estilos para acciones del lado derecho del footer del Stepper.
+ * Puede recibir children para renderizar contenido personalizado.
+ */
+export declare function StepperFooterRightActions(props: StepperFooterRightActionsProps): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/types.d.ts

@@ -0,0 +1,156 @@
+import { ReactElement, ReactNode } from 'react';
+import { Theme } from '@mui/material/styles';
+import { Sizes } from '@m4l/styles';
+import { ContentAreaSlots, ContentSlots, StepperFooterSlots, StepperSlots } from './slots/StepperEnum';
+import { STEPPER_PREFIX_NAME } from './constants';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { Step as StepComponent } from './subcomponents/StepperContent/subcomponents/Step';
+export type Orientation = 'horizontal' | 'vertical';
+export type IndicatorType = 'number' | 'dot';
+export type FormData = Record<string, string | number | boolean | null | undefined>;
+export type VisibilityData = Record<string, string | number | boolean | null | undefined>;
+export type Step = {
+    /**
+     * Clave única que identifica el step.
+     */
+    key: string;
+    /**
+     * Título del step.
+     */
+    title: string;
+    /**
+     * Descripción del step.
+     */
+    description?: string;
+    /**
+     * Array con los campos que se deben validar en el step.
+     */
+    validationFields?: string[];
+    /**
+     * Función que determina si el step se debe mostrar.
+     * @param formData - Datos del formulario.
+     * @param visibilityData - Datos adicionales para evaluar visibilidad (ej: objectId).
+     * @returns true si el step se debe mostrar, false en caso contrario.
+     * Si no se proporciona, el step siempre se muestra.
+     */
+    visibilityCondition?: (formData?: FormData, visibilityData?: VisibilityData) => boolean;
+};
+export interface StepperProps {
+    /**
+     * Children opcional para inyectar componentes adicionales
+     */
+    children?: React.ReactNode;
+    /**
+     *  "storeId" identificador del store
+     */
+    storeId?: string;
+    /**
+     *  "storeDevtoolsEnabled" determina si se debe usar devtools para el store
+     */
+    storeDevtoolsEnabled?: boolean;
+    /**
+     * "visibleTitle": Propiedad que ejecuta condición para visualizar los titulos en el SteppArea
+     */
+    visibleTitle?: boolean;
+    /**
+     * Array con la configuración de cada step.
+     */
+    steps: Step[];
+    /**
+     * Datos adicionales para evaluar visibilityCondition de los steps.
+     * Por ejemplo, objectId para determinar si mostrar steps después del submit inicial.
+     */
+    visibilityData?: VisibilityData;
+    /**
+     * Indica que tipo de indicador se usará en el Stepper.
+     * Puede ser 'number' para números o 'dot' para puntos.
+     */
+    indicatorType?: IndicatorType;
+    /**
+     * "orientation" define la orientación del Stepper.
+     */
+    orientation?: Orientation;
+    /**
+     * Tamaño del componente, puede ser uno de los valores definidos en 'small' , 'medium'
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+}
+/**
+ * Props del StepperContent
+ */
+export interface StepperContentProps {
+    /**
+     * Array de componentes Step
+     */
+    children: ReactElement<typeof StepComponent>[];
+}
+/**
+ * Props del Step
+ */
+export interface StepProps {
+    /**
+     * Clave única del step que determina cuándo se renderiza
+     */
+    stepKey: string;
+    /**
+     * Contenido del step
+     */
+    children: ReactNode;
+}
+/**
+ * Props del ContentArea
+ */
+export interface ContentAreaProps {
+    children: ReactNode;
+}
+/**
+ * Props del Indicator
+ */
+export interface IndicatorProps {
+    /**
+     * El número del paso actual.
+     */
+    step: number;
+    /**
+     * Indica si el paso es el actual.
+     */
+    currentStep: number;
+    /**
+     * El número total de pasos.
+     */
+    totalSteps: number;
+    /**
+     * El índice original del paso en el array completo de pasos.
+     * Se usa para buscar el estado de validación en stepValidationStatus.
+     */
+    originalStepIndex: number;
+}
+/**
+ * Props del StepperFooter
+ */
+export interface StepperFooterProps {
+    children?: ReactNode;
+}
+/**
+ * Props del StepperFooterLeftActions
+ */
+export interface StepperFooterLeftActionsProps {
+    children?: ReactNode;
+}
+/**
+ * Props del StepperFooterRightActions
+ */
+export interface StepperFooterRightActionsProps {
+    children?: ReactNode;
+}
+export interface StepperOwnerState extends Pick<StepperProps, 'visibleTitle'> {
+    step?: number;
+    currentStep?: number;
+    totalSteps?: number;
+    orientation?: Orientation;
+    indicatorType?: IndicatorType;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    stepValidationStatus?: Record<number, boolean>;
+}
+export type StepperSlotsType = StepperSlots | ContentSlots | ContentAreaSlots | StepperFooterSlots;
+export type StepperStyles = M4LOverridesStyleRules<StepperSlotsType, typeof STEPPER_PREFIX_NAME, Theme>;

package/components/areas/contexts/AreasContext/store.js

@@ -441,8 +441,8 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
                   bounds: {
                     left: MARGIN_GRIDLAYOUT,
                     top: MARGIN_GRIDLAYOUT,
-                    right: -MARGIN_GRIDLAYOUT,
-                    bottom: -MARGIN_GRIDLAYOUT
+                    right: -10,
+                    bottom: -10
                   }
                 });
               }

package/components/hook-form/RHFAutocompleteAsync/reducer/RHFAutocompleteReducer.js

@@ -65,11 +65,6 @@ const RHFAutocompleteAsyncReducer = (onChangeFilterParms) => (state, action) =>
         ...state,
         isOpen: false
       };
-    // case actionsType.SET_SELECTED_OPTIONS_TO_AUTOCOMPLETE:
-    //   return {
-    //     ...state,
-    //     selectedOptions: action.payload,
-    //   };
     default:
       return state;
   }

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 }: 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,10 +6,11 @@ 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 }) {
+function useCustomForm({ validationSchema, values, statusLoad, mode }) {
   const formMethods = useForm({
     resolver: yupResolver(validationSchema),
-    defaultValues: values
+    defaultValues: values,
+    ...mode && { mode }
   });
   useEffect(() => {
     if (statusLoad === "reload_values_provider") {
@@ -41,8 +42,8 @@ function FormProviderCustom(props) {
   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 } = props;
-  const formMethods = useCustomForm({ validationSchema, statusLoad, values });
+  const { children, onSubmit, values, validationSchema, statusLoad = "ready", className, mode } = props;
+  const formMethods = useCustomForm({ validationSchema, statusLoad, values, mode });
   return /* @__PURE__ */ jsx(
     FormProviderCustom,
     {

package/components/hook-form/RHFormContext/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { FieldValues, FormProviderProps as RHFormProviderProps } from 'react-hook-form';
+import { FieldValues, FormProviderProps as RHFormProviderProps, Mode } from 'react-hook-form';
 export type FormStatusLoad = 'initial' | 'new' | 'edit' | 'reload_values_provider' | 'ready' | 'error';
 export type FormInitialValues = FieldValues;
 export interface FormProviderProps {
@@ -9,10 +9,12 @@ export interface FormProviderProps {
     validationSchema: any;
     statusLoad?: FormStatusLoad;
     className?: string;
+    mode?: Mode;
 }
 export type FormProviderCustomProps = RHFormProviderProps & FormProviderProps;
 export interface CustomFormArguments {
     values: FormInitialValues;
     validationSchema: any;
     statusLoad?: FormStatusLoad;
+    mode?: Mode;
 }

package/components/mui_extended/Select/Select.js

@@ -176,6 +176,7 @@ const Select = forwardRef(
               paddingBottom: theme.vars.size.baseSpacings.sp3,
               paddingLeft: 0,
               paddingRight: 0,
+              maxHeight: "200px",
               "& .MuiList-root": {
                 padding: 0,
                 display: "flex",

package/components/mui_extended/Select/Select.styles.js

@@ -35,7 +35,12 @@ const selectStyles = {
         },
         "& .MuiSelect-select": {
           padding: `${theme.vars.size.baseSpacings.sp1}!important`,
-          minHeight: "unset"
+          minHeight: "unset",
+          maxHeight: "80px",
+          overflow: "auto",
+          boxSizing: "border-box",
+          display: "flex",
+          flexDirection: "column"
         },
         // Estilos para la variante text
         [`&.${SELECT_CLASSES.text}`]: {
@@ -69,7 +74,8 @@ const selectStyles = {
           (height) => {
             return {
               minHeight: height,
-              maxHeight: height
+              height: "fit-content",
+              maxHeight: "80px"
             };
           }
         )
@@ -88,7 +94,9 @@ const selectStyles = {
     display: "flex",
     alignItems: "center",
     gap: theme.vars.size.baseSpacings.sp1,
-    flexWrap: "wrap"
+    flexWrap: "wrap",
+    overflow: "auto",
+    flexShrink: 1
   }),
   arrowDown: {},
   renderValueTypography: () => ({

package/helpers/getStepsAndValidationSchema/getStepsAndValidationSchema.d.ts

@@ -0,0 +1,11 @@
+import { Step } from '../../components/Stepper/types';
+import { GetStepsAndValidationSchemaProps } from './types';
+import * as Yup from 'yup';
+/**
+ * Hook personalizado que recibe un array de steps con validaciones y regresa todo listo para el Stepper
+ * Una sola configuración genera: validationSchema + steps + validationFields automáticamente
+ */
+export declare function getStepsAndValidationSchema({ steps, visibilityData, }: GetStepsAndValidationSchemaProps): {
+    validationSchema: Yup.ObjectSchema<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, Record<string, any>>, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, Record<string, any>>>, import('yup/lib/object').AssertsShape<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, Record<string, any>>>>;
+    steps: Step[];
+};

package/helpers/getStepsAndValidationSchema/index.d.ts

@@ -0,0 +1 @@
+export { getStepsAndValidationSchema } from './getStepsAndValidationSchema';

package/helpers/getStepsAndValidationSchema/types.d.ts

@@ -0,0 +1,21 @@
+import { Step } from '../../components/Stepper/types';
+/**
+ * Configuración completa de un step con validaciones incluidas
+ */
+export interface StepWithValidation extends Omit<Step, 'validationFields'> {
+    /**
+     * Función de validación que retorna un objeto con esquemas Yup
+     * Ejemplo: ContactDataValidation
+     */
+    validationFunction?: () => Record<string, any>;
+}
+export interface GetStepsAndValidationSchemaProps {
+    /**
+     * Array de steps con sus validaciones incluidas
+     */
+    steps: StepWithValidation[];
+    /**
+     * Datos adicionales para visibilityCondition (ej: objectId)
+     */
+    visibilityData?: any;
+}

package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js

@@ -389,7 +389,8 @@ const useDynamicFilterAndSort = (props) => {
     return {
       filterColumns: fields.map((filter) => ({
         name: filter.name,
-        multiple: filter.multiple || false
+        multiple: filter.multiple || false,
+        skipColumnValidation: filter.skipColumnValidation || false
       })),
       filtersApplied: getCurrentFilters().map((filter) => ({
         columnKey: filter.field.name,

package/package.json

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

package/storybook/components/DataGrid/subcomponents/DataGridRender.d.ts

@@ -10,8 +10,6 @@ interface DataGridRenderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> {
     visibleRefreshFilterSort?: boolean;
     withExternalSortSettings?: boolean;
     withExternalFilterSettings?: boolean;
-    skipSortValidation?: boolean;
-    skipFilterValidation?: boolean;
 }
 /**
  * Componente que renderiza el DataGrid para el storybook