@m4l/components 9.4.24 → 9.4.26-BE20260206-2

package/components/Stepper/Stepper.styles.js

@@ -111,35 +111,47 @@ const stepperStyles = {
    * Estilos para el nombre del paso dentro del Stepper.
    */
   stepName: ({ theme, ownerState }) => ({
-    ...ownerState?.orientation === "horizontal" && {
-      height: theme.generalSettings.isMobile ? theme.vars.size.mobile.medium.action : theme.vars.size.desktop.medium.action
+    ...ownerState?.orientation === "horizontal" && !theme.generalSettings.isMobile && {
+      minHeight: theme.vars.size.desktop.medium.action,
+      maxWidth: "120px",
+      width: "100%"
     },
     ...(ownerState?.orientation === "vertical" || theme.generalSettings.isMobile) && {
       maxWidth: "120px",
       width: "100%",
-      lineHeight: "1.2",
       marginTop: theme.vars.size.baseSpacings.sp1
     },
     alignContent: "center",
     cursor: "pointer",
-    overflow: "hidden",
     ...theme.generalSettings.isMobile ? {
       display: "none"
     } : {
-      display: ownerState?.visibleTitle ? "-webkit-box" : "none"
+      display: ownerState?.visibleTitle ? "block" : "none"
     },
-    WebkitBoxOrient: "vertical",
-    WebkitLineClamp: 2,
-    textOverflow: "ellipsis",
     flex: 1,
     minWidth: 0,
-    whiteSpace: "normal",
     order: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? 1 : 0,
     "&.M4LTypography-root": {
       color: ownerState?.originalStepIndex !== void 0 && typeof ownerState.originalStepIndex === "number" ? (ownerState.currentStep ?? 0) > ownerState.originalStepIndex ? theme.vars.palette.primary.semanticText : (ownerState.currentStep ?? 0) === ownerState.originalStepIndex ? theme.vars.palette.text.primary : theme.vars.palette.text.secondary : theme.vars.palette.text.secondary,
       textAlign: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "center" : "right"
     }
   }),
+  /**
+   * Estilos para el texto del nombre del paso con truncado (line-clamp).
+   */
+  stepNameText: ({ theme, ownerState }) => ({
+    display: "-webkit-box",
+    "-webkit-box-orient": "vertical",
+    "-webkit-line-clamp": "2",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    wordBreak: "break-word",
+    whiteSpace: "normal",
+    width: "100%",
+    direction: "ltr",
+    lineHeight: 1.2,
+    textAlign: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "center" : "left"
+  }),
   /**
    * Estilos para el indicador numérico de cada paso del Stepper.
    */
@@ -228,6 +240,7 @@ const stepperStyles = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
+    flexShrink: 0,
     background: theme.vars.palette.primary.enabledOpacity,
     borderRadius: theme.vars.size.borderRadius["r1-5"],
     ...getSizeStyles(theme, ownerState?.size || "medium", "box", (size) => ({

package/components/Stepper/helpers/findAllVisibleStepsBefore/index.d.ts

@@ -0,0 +1,19 @@
+import { FormData, Step, StepWithIndex, VisibilityData } from '../../types';
+/**
+ * Obtiene todos los steps visibles que están antes de un step específico.
+ *
+ * Esta función es utilizada por la feature `initialStepKey` para determinar
+ * qué steps deben ser validados antes de poder navegar al step inicial deseado.
+ * @example
+ * // Si tenemos steps: [A, B (oculto), C, D] y queremos iniciar en D (índice 3)
+ * // Esta función retornará: [{ step: A, originalIndex: 0 }, { step: C, originalIndex: 2 }]
+ * // El step B se omite porque está oculto por su visibilityCondition
+ * @param initialStepIndex - El índice del step donde se desea iniciar.
+ *                           Los steps en este índice y posteriores NO se incluyen en el resultado.
+ * @param steps - Array completo de steps configurados en el Stepper.
+ * @param formData - Valores actuales del formulario para evaluar las condiciones de visibilidad.
+ * @param visibilityData - Datos adicionales para evaluar visibilidad (ej: objectId, accountId).
+ * @returns Array de steps visibles con su índice original, ordenados de menor a mayor índice.
+ *          Retorna array vacío si initialStepIndex es 0 o no hay steps visibles antes.
+ */
+export declare const findAllVisibleStepsBefore: (initialStepIndex: number, steps: Step[], formData?: FormData, visibilityData?: VisibilityData) => StepWithIndex[];

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

@@ -0,0 +1,22 @@
+import { e as evaluateVisibilityStepCondition } from "../evaluateVisibilityStepCondition/index.js";
+const findAllVisibleStepsBefore = (initialStepIndex, steps, formData, visibilityData) => {
+  const visibleStepsBefore = [];
+  for (let currentIndex = 0; currentIndex < initialStepIndex && currentIndex < steps.length; currentIndex++) {
+    const currentStep = steps[currentIndex];
+    const isStepVisible = evaluateVisibilityStepCondition(
+      currentStep,
+      formData || {},
+      visibilityData
+    );
+    if (isStepVisible) {
+      visibleStepsBefore.push({
+        step: currentStep,
+        originalIndex: currentIndex
+      });
+    }
+  }
+  return visibleStepsBefore;
+};
+export {
+  findAllVisibleStepsBefore as f
+};

package/components/Stepper/helpers/findStepIndexByKey/index.d.ts

@@ -0,0 +1,8 @@
+import { Step } from '../../types';
+/**
+ * findStepIndexByKey - Encuentra el índice de un step por su key
+ * @param stepKey - La key del step a buscar
+ * @param steps - Array de steps
+ * @returns El índice del step, o -1 si no se encuentra
+ */
+export declare const findStepIndexByKey: (stepKey: string, steps: Step[]) => number;

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

@@ -0,0 +1,6 @@
+const findStepIndexByKey = (stepKey, steps) => {
+  return steps.findIndex((step) => step.key === stepKey);
+};
+export {
+  findStepIndexByKey as f
+};

package/components/Stepper/helpers/index.d.ts

@@ -6,3 +6,5 @@ export { isElementInViewport } from './isElementInViewport';
 export { isLastVisibleValidStep } from './isLastVisibleValidStep';
 export { parseWatchedValues } from './parseWatchedValues';
 export { getInitialFieldValues } from './getInitialFieldValues';
+export { findStepIndexByKey } from './findStepIndexByKey';
+export { findAllVisibleStepsBefore } from './findAllVisibleStepsBefore';

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

@@ -0,0 +1,5 @@
+/**
+ * Hook que aplica initialStepKey cuando el formulario está en estado 'ready'.
+ * Valida los steps anteriores y navega al step inicial o al primer step con errores.
+ */
+export declare function useInitialStepKey(): void;

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

@@ -0,0 +1,44 @@
+import { useRef, useEffect } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+import { shallow } from "zustand/shallow";
+import { u as useStepper } from "../useStepper/index.js";
+function useInitialStepKey() {
+  const { trigger, getValues } = useFormContext();
+  const hasAttemptedRef = useRef(false);
+  const statusLoad = useWatch({ name: "statusLoad" });
+  const { initialStepKey, initialStepKeyApplied, applyInitialStepKey } = useStepper(
+    (state) => ({
+      initialStepKey: state.initialStepKey,
+      initialStepKeyApplied: state.initialStepKeyApplied,
+      applyInitialStepKey: state.actions.applyInitialStepKey
+    }),
+    shallow
+  );
+  useEffect(() => {
+    if (statusLoad !== "ready" || !initialStepKey || initialStepKeyApplied || hasAttemptedRef.current) {
+      return;
+    }
+    hasAttemptedRef.current = true;
+    const executeInitialStepKey = async () => {
+      const validateFieldsFn = async (fields) => {
+        if (fields.length === 0) {
+          return true;
+        }
+        return trigger(fields);
+      };
+      const formData = getValues();
+      await applyInitialStepKey(validateFieldsFn, formData);
+    };
+    executeInitialStepKey();
+  }, [
+    statusLoad,
+    initialStepKey,
+    initialStepKeyApplied,
+    applyInitialStepKey,
+    trigger,
+    getValues
+  ]);
+}
+export {
+  useInitialStepKey as u
+};

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

@@ -6,6 +6,7 @@ export declare enum ContentSlots {
     stepArea = "stepArea",
     step = "step",
     stepName = "stepName",
+    stepNameText = "stepNameText",
     indicator = "indicator",
     textNumber = "textNumber"
 }

package/components/Stepper/slots/StepperEnum.js

@@ -7,6 +7,7 @@ var ContentSlots = /* @__PURE__ */ ((ContentSlots2) => {
   ContentSlots2["stepArea"] = "stepArea";
   ContentSlots2["step"] = "step";
   ContentSlots2["stepName"] = "stepName";
+  ContentSlots2["stepNameText"] = "stepNameText";
   ContentSlots2["indicator"] = "indicator";
   ContentSlots2["textNumber"] = "textNumber";
   return ContentSlots2;

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

@@ -22,6 +22,9 @@ export declare const StepStyled: import('@emotion/styled').StyledComponent<impor
 export declare const StepNameStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/Typography/types').TypographyProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>, "size" | "children" | "title" | "component" | "zIndex" | "id" | "disabled" | "paragraph" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "variant" | "color" | "dataTestid" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "className" | "style" | "classes" | "sx" | "p" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "htmlFor" | "gutterBottom" | "noWrap" | "variantMapping" | "skeletonWidth" | "skeletonRows" | "ellipsis" | keyof import('react').RefAttributes<HTMLSpanElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
+export declare const StepNameTextStyled: 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 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>>, {}>;

package/components/Stepper/slots/StepperSlot.js

@@ -32,6 +32,10 @@ const StepNameStyled = styled(Typography, {
   name: STEPPER_PREFIX_NAME,
   slot: ContentSlots.stepName
 })(stepperStyles.stepName);
+const StepNameTextStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentSlots.stepNameText
+})(stepperStyles.stepNameText);
 const IndicatorStyled = styled("div", {
   name: STEPPER_PREFIX_NAME,
   slot: ContentSlots.indicator
@@ -98,10 +102,11 @@ export {
   StepAreaStyled as e,
   StepStyled as f,
   StepNameStyled as g,
-  IndicatorStyled as h,
-  TextNumberStyled as i,
-  StepContentStyled as j,
-  StepperFooterSectionStyled as k,
-  StepperFooterLeftActionsStyled as l,
-  StepperFooterRightActionsStyled as m
+  StepNameTextStyled as h,
+  IndicatorStyled as i,
+  TextNumberStyled as j,
+  StepContentStyled as k,
+  StepperFooterSectionStyled as l,
+  StepperFooterLeftActionsStyled as m,
+  StepperFooterRightActionsStyled as n
 };

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

@@ -12,6 +12,7 @@ const StepperProvider = (props) => {
     indicatorType = "number",
     orientation = "horizontal",
     visibilityData,
+    initialStepKey,
     children
   } = props;
   const stepperStoreRef = useRef();
@@ -25,7 +26,8 @@ const StepperProvider = (props) => {
         ownerState: {},
         indicatorType,
         orientation,
-        visibilityData
+        visibilityData,
+        initialStepKey
       },
       storeDevtoolsEnabled
     );

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

@@ -2,6 +2,9 @@ import { createStore } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 import { a as STEPPER_STORE_ID } from "../../constants.js";
+import { f as findStepIndexByKey } from "../../helpers/findStepIndexByKey/index.js";
+import { e as evaluateVisibilityStepCondition } from "../../helpers/evaluateVisibilityStepCondition/index.js";
+import { f as findAllVisibleStepsBefore } from "../../helpers/findAllVisibleStepsBefore/index.js";
 import { f as findNextVisibleValidStep } from "../../helpers/findNextVisibleValidStep/index.js";
 import { f as findPrevVisibleValidStep } from "../../helpers/findPrevVisibleValidStep/index.js";
 const createDevtools = (immerMiddlewere, config) => {
@@ -16,6 +19,7 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
     currentStep: 0,
     stepValidationStatus: {},
     isValidating: false,
+    initialStepKeyApplied: false,
     ...initProps
   };
   return createStore(
@@ -128,6 +132,7 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
             set((state) => {
               state.stepValidationStatus = {};
               state.isValidating = false;
+              state.initialStepKeyApplied = false;
               const firstVisibleStepIndex = findNextVisibleValidStep(
                 -1,
                 // Comenzar desde -1 para encontrar el primer step visible
@@ -137,6 +142,71 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
               );
               state.currentStep = firstVisibleStepIndex < state.steps.length ? firstVisibleStepIndex : 0;
             });
+          },
+          /**
+           * applyInitialStepKey - Valida los steps anteriores y navega al step indicado por initialStepKey.
+           * Si algún step anterior tiene errores, navega al primer step con errores.
+           */
+          applyInitialStepKey: async (validateFieldsFn, formData) => {
+            const state = get();
+            const { initialStepKey, steps, visibilityData, initialStepKeyApplied } = state;
+            if (!initialStepKey || initialStepKey.trim() === "" || initialStepKeyApplied) {
+              return;
+            }
+            const initialStepIndex = findStepIndexByKey(initialStepKey, steps);
+            if (initialStepIndex === -1) {
+              const availableKeys = steps.map((s) => s.key).join(", ");
+              throw new Error(
+                `Stepper: initialStepKey "${initialStepKey}" no corresponde a ningún step. Keys disponibles: [${availableKeys}]`
+              );
+            }
+            const initialStep = steps[initialStepIndex];
+            if (!evaluateVisibilityStepCondition(initialStep, formData, visibilityData)) {
+              console.warn(
+                `Stepper: initialStepKey "${initialStepKey}" apunta a un step oculto. Iniciando en step 0.`
+              );
+              set((draft) => {
+                draft.initialStepKeyApplied = true;
+              });
+              return;
+            }
+            if (initialStepIndex === 0) {
+              set((draft) => {
+                draft.initialStepKeyApplied = true;
+              });
+              return;
+            }
+            const previousVisibleSteps = findAllVisibleStepsBefore(
+              initialStepIndex,
+              steps,
+              formData,
+              visibilityData
+            );
+            for (const { step, originalIndex } of previousVisibleSteps) {
+              const fieldsToValidate = step.validationFields || [];
+              if (fieldsToValidate.length === 0) {
+                set((draft) => {
+                  draft.stepValidationStatus[originalIndex] = true;
+                });
+                continue;
+              }
+              const isValid = await validateFieldsFn(fieldsToValidate);
+              if (!isValid) {
+                set((draft) => {
+                  draft.currentStep = originalIndex;
+                  draft.stepValidationStatus[originalIndex] = false;
+                  draft.initialStepKeyApplied = true;
+                });
+                return;
+              }
+              set((draft) => {
+                draft.stepValidationStatus[originalIndex] = true;
+              });
+            }
+            set((draft) => {
+              draft.currentStep = initialStepIndex;
+              draft.initialStepKeyApplied = true;
+            });
           }
         }
       })),

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Step, StepperOwnerState, StepperProps } from '../types';
-export interface StepperState extends Pick<StepperProps, 'storeId' | 'visibleTitle' | 'steps' | 'indicatorType' | 'orientation' | 'size' | 'visibilityData'> {
+export interface StepperState extends Pick<StepperProps, 'storeId' | 'visibleTitle' | 'steps' | 'indicatorType' | 'orientation' | 'size' | 'visibilityData' | 'initialStepKey'> {
     /**
      *  "ownerState" estado a nivel de clases del componente
      */
@@ -18,6 +18,10 @@ export interface StepperState extends Pick<StepperProps, 'storeId' | 'visibleTit
      * "isValidating" indica si el stepper está en proceso de validación
      */
     isValidating: boolean;
+    /**
+     * Indica si initialStepKey ya fue aplicado. Previene re-aplicación después de navegación.
+     */
+    initialStepKeyApplied: boolean;
 }
 export interface StepperStateWithActions extends StepperState {
     actions: {
@@ -55,9 +59,15 @@ export interface StepperStateWithActions extends StepperState {
          * resetStepper - Resetea el Stepper a su estado inicial
          */
         resetStepper: () => void;
+        /**
+         * Aplica initialStepKey validando los steps anteriores.
+         * @param validateFieldsFn - Función que valida campos específicos usando RHF trigger()
+         * @param formData - Valores actuales del formulario
+         */
+        applyInitialStepKey: (validateFieldsFn: (fields: string[]) => Promise<boolean>, formData: Record<string, any>) => Promise<void>;
     };
 }
 export interface StepperContextProps extends StepperProps {
     children: ReactNode;
 }
-export type InitialStoreProps = Pick<StepperState, 'ownerState' | 'storeId' | 'steps' | 'visibleTitle' | 'indicatorType' | 'orientation' | 'visibilityData'>;
+export type InitialStoreProps = Pick<StepperState, 'ownerState' | 'storeId' | 'steps' | 'visibleTitle' | 'indicatorType' | 'orientation' | 'visibilityData' | 'initialStepKey'>;

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

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { u as useStepper } from "../../hooks/useStepper/index.js";
+import { u as useInitialStepKey } from "../../hooks/useInitialStepKey/index.js";
 import { a as ContentAreaStyled, b as ContentAreaHeaderStyled, c as ContentAreaBodyStyled } from "../../slots/StepperSlot.js";
 import { W as WrapperIcon } from "./subcomponents/WrapperIcon/index.js";
 import { W as WrapperTitle } from "./subcomponents/WrapperTitle/index.js";
@@ -8,6 +9,7 @@ function ContentArea(props) {
   const { orientation } = useStepper((state) => ({
     orientation: state.orientation
   }));
+  useInitialStepKey();
   const ownerState = {
     orientation
   };

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { e as StepAreaStyled, f as StepStyled, g as StepNameStyled } from "../../slots/StepperSlot.js";
+import { e as StepAreaStyled, f as StepStyled, g as StepNameStyled, h as StepNameTextStyled } from "../../slots/StepperSlot.js";
 import { I as Indicator } from "./subcomponents/Inidicator/index.js";
 import { u as useStepArea } from "./hooks/useStepArea.js";
 import { u as useVisibileSteps } from "./hooks/useVisibileSteps.js";
@@ -39,7 +39,7 @@ function StepArea() {
                 originalStepIndex: originalIndex,
                 isStepVisible
               },
-              children: step.title
+              children: /* @__PURE__ */ jsx(StepNameTextStyled, { ownerState: { orientation }, children: step.title })
             }
           ),
           /* @__PURE__ */ jsx(

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { h as IndicatorStyled, i as TextNumberStyled } from "../../../../slots/StepperSlot.js";
+import { i as IndicatorStyled, j as TextNumberStyled } from "../../../../slots/StepperSlot.js";
 import { u as useStepper } from "../../../../hooks/useStepper/index.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { useIsMobile } from "@m4l/graphics";

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

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { j as StepContentStyled } from "../../../../slots/StepperSlot.js";
+import { k as StepContentStyled } from "../../../../slots/StepperSlot.js";
 import { u as useIsStepVisible } from "./hooks/useIsStepVisible.js";
 function Step(props) {
   const { stepKey, children } = props;

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

@@ -1,6 +1,6 @@
 import { jsxs } from "react/jsx-runtime";
 import { useMemo, Children, isValidElement } from "react";
-import { k as StepperFooterSectionStyled } from "../../slots/StepperSlot.js";
+import { l 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) {

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

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { l as StepperFooterLeftActionsStyled } from "../../../../slots/StepperSlot.js";
+import { m 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, { useState, useEffect, useMemo } from "react";
 import { u as useIsLastVisibleValidStep } from "../../../../hooks/useIsLastVisibleValidStep/index.js";
-import { m as StepperFooterRightActionsStyled } from "../../../../slots/StepperSlot.js";
+import { n as StepperFooterRightActionsStyled } from "../../../../slots/StepperSlot.js";
 import { S as StepperSubmitButton } from "../../../StepperButtons/StepperSubmitButton/index.js";
 import { S as StepperNextButton } from "../../../StepperButtons/StepperNextButton/index.js";
 function StepperFooterRightActions(props) {

package/components/Stepper/types.d.ts

@@ -83,6 +83,13 @@ export interface StepperProps {
      * Clase personalizada para el Stepper.
      */
     className?: string;
+    /**
+     * Key del step en el que se desea iniciar el Stepper.
+     * Si se proporciona, valida los steps anteriores antes de navegar al step indicado.
+     * Si algún step anterior tiene errores, inicia en el primer step con errores.
+     * Lanza Error si la key no corresponde a ningún step.
+     */
+    initialStepKey?: string;
 }
 /**
  * Props del StepperContent
@@ -172,5 +179,20 @@ export interface StepperOwnerState extends Pick<StepperProps, 'visibleTitle'>, R
     stepValidationStatus?: Record<number, boolean>;
     isStepVisible?: boolean;
 }
+/**
+ * Representa un step junto con su posición original en el array de steps.
+ * Se usa para mantener la referencia al índice original después de filtrar steps ocultos.
+ */
+export interface StepWithIndex {
+    /**
+     * El objeto Step con toda su configuración (key, title, validationFields, etc.)
+     */
+    step: Step;
+    /**
+     * El índice del step en el array original de steps.
+     * Es necesario para actualizar correctamente el stepValidationStatus del store.
+     */
+    originalIndex: number;
+}
 export type StepperSlotsType = StepperSlots | ContentSlots | ContentAreaSlots | StepperFooterSlots;
 export type StepperStyles = M4LOverridesStyleRules<StepperSlotsType, typeof STEPPER_PREFIX_NAME, Theme>;

package/components/datagrids/Datagrid.styles.js

@@ -1165,6 +1165,33 @@ const dataGridStyles = {
     textOverflow: "ellipsis",
     wordBreak: "break-word",
     whiteSpace: "normal"
+  }),
+  /**
+   * Wrapper para celdas con color de fondo personalizado.
+   *
+   * Este estilo aplica backgroundColor y ocupa toda la celda,
+   * manteniendo el comportamiento de truncado con ellipsis.
+   * El color se recibe a través de ownerState.cellBackgroundColor
+   */
+  cellBackgroundWrapper: ({ ownerState }) => ({
+    // Ocupar toda la celda con margin negativo
+    margin: "-8px",
+    padding: "8px",
+    width: "calc(100% + 16px)",
+    height: "calc(100% + 16px)",
+    boxSizing: "border-box",
+    // Mantener el comportamiento de truncado igual que las celdas
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: ownerState?.currentRowHeightVariant === "compact" ? 1 : ownerState?.currentRowHeightVariant === "confortable" ? 3 : 2,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    wordBreak: "break-word",
+    whiteSpace: "normal",
+    alignContent: "center",
+    ...ownerState?.cellBackgroundColor && {
+      backgroundColor: ownerState.cellBackgroundColor
+    }
   })
 };
 export {

package/components/datagrids/components/DataGridMain/DataGridMain.js

@@ -14,7 +14,8 @@ function DataGrid(props) {
     cardsViewConfig,
     focusOnRowKey,
     checkedRows,
-    onCheckedRowsChange
+    onCheckedRowsChange,
+    rowCellsBackground
   } = props;
   return /* @__PURE__ */ jsx(BaseDataGrid, { ...props, children: /* @__PURE__ */ jsx(
     RenderContent,
@@ -30,7 +31,8 @@ function DataGrid(props) {
       cardsViewConfig,
       focusOnRowKey,
       checkedRows,
-      onCheckedRowsChange
+      onCheckedRowsChange,
+      rowCellsBackground
     }
   ) });
 }

package/components/datagrids/components/TreeDataGrid/TreeDataGrid.js

@@ -17,7 +17,8 @@ function TreeDataGrid(props) {
     onCheckedRowsChange,
     rowGrouper,
     expandedGroupIds: expandedGroupIdsProp,
-    onExpandedGroupIdsChange: onExpandedGroupIdsChangeProp
+    onExpandedGroupIdsChange: onExpandedGroupIdsChangeProp,
+    rowCellsBackground
   } = props;
   const [internalExpandedGroupIds, setInternalExpandedGroupIds] = useState(() => new Set(expandedGroupIdsProp ?? []));
   const isControlled = expandedGroupIdsProp !== void 0 && onExpandedGroupIdsChangeProp !== void 0;
@@ -37,6 +38,7 @@ function TreeDataGrid(props) {
       focusOnRowKey,
       checkedRows,
       onCheckedRowsChange,
+      rowCellsBackground,
       treeProps: {
         rowGrouper,
         expandedGroupIds,

package/components/datagrids/slots/DataGridEnum.d.ts

@@ -55,7 +55,8 @@ export declare enum TableSlots {
     editLabel = "editLabel",
     iconButtonEdit = "iconButtonEdit",
     defaultRenderGroupCellRoot = "defaultRenderGroupCellRoot",
-    defaultRenderGroupCellText = "defaultRenderGroupCellText"
+    defaultRenderGroupCellText = "defaultRenderGroupCellText",
+    cellBackgroundWrapper = "cellBackgroundWrapper"
 }
 export declare enum TextEditorSlots {
     inputTexEditor = "inputTexEditor"

package/components/datagrids/slots/DataGridEnum.js

@@ -59,6 +59,7 @@ var TableSlots = /* @__PURE__ */ ((TableSlots2) => {
   TableSlots2["iconButtonEdit"] = "iconButtonEdit";
   TableSlots2["defaultRenderGroupCellRoot"] = "defaultRenderGroupCellRoot";
   TableSlots2["defaultRenderGroupCellText"] = "defaultRenderGroupCellText";
+  TableSlots2["cellBackgroundWrapper"] = "cellBackgroundWrapper";
   return TableSlots2;
 })(TableSlots || {});
 var TextEditorSlots = /* @__PURE__ */ ((TextEditorSlots2) => {

package/components/datagrids/slots/DataGridSlot.d.ts

@@ -99,3 +99,4 @@ export declare const ControlNavigateStyled: import('@emotion/styled').StyledComp
 export declare const ColumnIconFormatterStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const DefaultRenderGroupCellRootStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
 export declare const DefaultRenderGroupCellTextStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
+export declare const CellBackgroundWrapperStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;

package/components/datagrids/slots/DataGridSlot.js

@@ -239,31 +239,36 @@ const DefaultRenderGroupCellTextStyled = styled("span", {
   name: DATAGRID_PREFIX_NAME,
   slot: TableSlots.defaultRenderGroupCellText
 })(dataGridStyles.defaultRenderGroupCellText);
+const CellBackgroundWrapperStyled = styled("span", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.cellBackgroundWrapper
+})(dataGridStyles.cellBackgroundWrapper);
 export {
   ActionsRootStyled as A,
   TableContainerStyled as B,
   CustomHeaderStyled as C,
   DataGridRootStyled as D,
   EditorCellWrapperStyled as E,
-  NameColumnStyled as F,
-  IconColumnStyled as G,
-  DraggableHeaderRootStyled as H,
+  CellBackgroundWrapperStyled as F,
+  NameColumnStyled as G,
+  IconColumnStyled as H,
   InputTextEditorStyled as I,
-  ButtonHeaderActionsStyled as J,
-  DraggableWrapperInputBaseStyled as K,
+  DraggableHeaderRootStyled as J,
+  ButtonHeaderActionsStyled as K,
   LabelHeaderColumnStyled as L,
-  IconSearchStyled as M,
+  DraggableWrapperInputBaseStyled as M,
   NameColumnIconStyled as N,
-  HeaderInputBaseStyled as O,
-  MenuListStyled as P,
-  HeaderRenderClickStyled as Q,
+  IconSearchStyled as O,
+  HeaderInputBaseStyled as P,
+  MenuListStyled as Q,
   RowsCountRootStyled as R,
-  DefaultRenderGroupCellRootStyled as S,
+  HeaderRenderClickStyled as S,
   TextToggleCardButtonStyled as T,
-  DefaultRenderGroupCellTextStyled as U,
+  DefaultRenderGroupCellRootStyled as U,
   ValueColumnStyled as V,
-  WrapperSkeletonStyled as W,
-  CheckboxCellWrapperStyled as X,
+  DefaultRenderGroupCellTextStyled as W,
+  WrapperSkeletonStyled as X,
+  CheckboxCellWrapperStyled as Y,
   ControlNavigateStyled as a,
   RowsCountLabelStyled as b,
   RowsCountValueStyled as c,

package/components/datagrids/types.d.ts

@@ -54,6 +54,33 @@ declare module 'react-data-grid' {
     }
 }
 export declare type RowKey = string | number;
+/**
+ * Define una celda específica que tendrá un color de fondo personalizado.
+ * rowKey - Identificador único de la fila (el mismo que usa rowKeyGetter)
+ * columnKey - Identificador de la columna (el key de la columna)
+ * color - Color de fondo a aplicar (puede ser hex como '#FF0000', rgb, etc.)
+ */
+export interface RowCellBackground<TKey extends RowKey = RowKey> {
+    rowKey: TKey;
+    columnKey: string;
+    color: string;
+}
+/**
+ * Función que retorna el color de fondo para una celda específica.
+ * Esta variante es más óptima para muchas filas porque solo se llama
+ * para las celdas visibles durante la virtualización.
+ * @param rowKey - Identificador único de la fila
+ * @param columnKey - Identificador de la columna
+ * @returns El color de fondo (hex, rgb, etc.) o undefined/null para transparente
+ */
+export type RowCellsBackgroundGetter<TKey extends RowKey = RowKey> = (rowKey: TKey, columnKey: string) => string | undefined | null;
+/**
+ * Tipo union que permite array o función para rowCellsBackground.
+ *
+ * - Array: Más simple de usar, pero procesa todas las celdas al inicio
+ * - Función: Más óptima para muchas filas, solo se llama para celdas visibles
+ */
+export type RowCellsBackgroundProp<TKey extends RowKey = RowKey> = RowCellBackground<TKey>[] | RowCellsBackgroundGetter<TKey>;
 export declare interface WithActionsProps {
     withActions?: boolean;
 }
@@ -228,6 +255,12 @@ export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> exte
      * Útil cuando se agrega un nuevo elemento y se quiere enfocar en él.
      */
     focusOnRowKey?: TKey;
+    /**
+     * Colores de fondo para celdas específicas.
+     * - Array: `[{ rowKey, columnKey, color }]`
+     * - Función: `(rowKey, columnKey) => color | undefined` (más óptima para muchas filas)
+     */
+    rowCellsBackground?: RowCellsBackgroundProp<TKey>;
 }
 export declare const DATAGRID_TEST_ID = "m4ldatagrid";
 export declare const PREFIX_TEST_ATTRIBUTE = "data-testid";

package/components/datagrids/views/TableView/TableView.js

@@ -7,6 +7,7 @@ import { B as TableContainerStyled, y as TableWrapperDataGridStyled } from "../.
 import { u as useSortColumnsRows } from "./hooks/useSortColumnsRows/useSortColumnsRows.js";
 import { g as getGroupBy } from "./helpers/getGroupBy/getGroupBy.js";
 import { d as defaultRowGrouper } from "./helpers/defaultRowGrouper/defaultRowGrouper.js";
+import { c as createRowCellsBackgroundMap, p as processColumnsWithRowCellsBackground } from "./helpers/rowCellsBackground/rowCellsBackground.js";
 import { u as useHeaderMenuActions } from "./hooks/useHeaderMenuActions/useHeaderMenuActions.js";
 import { f as filterHeight } from "./subcomponents/SelectColumn/SelectColumn.js";
 import { H as HeaderRenderClick } from "./subcomponents/HeaderRenderClick/HeaderRenderClick.js";
@@ -24,6 +25,7 @@ function TableView(props) {
     onSelectedRowsChange,
     defaultColumnOptions: defaultColumnOptionsProp,
     focusOnRowKey,
+    rowCellsBackground,
     treeProps,
     ...restProps
   } = props;
@@ -76,6 +78,24 @@ function TableView(props) {
     return getGroupBy(columnsConfig);
   }, [columnsConfig, treeProps]);
   const rowGrouper = treeProps?.rowGrouper ?? defaultRowGrouper;
+  const colorGetter = useMemo(() => {
+    if (!rowCellsBackground) {
+      return void 0;
+    }
+    if (typeof rowCellsBackground === "function") {
+      return rowCellsBackground;
+    }
+    return createRowCellsBackgroundMap(rowCellsBackground);
+  }, [rowCellsBackground]);
+  const columnsWithBackground = useMemo(
+    () => processColumnsWithRowCellsBackground(
+      finalColumns,
+      colorGetter,
+      rowKeyGetter,
+      currentRowHeightVariant
+    ),
+    [finalColumns, colorGetter, rowKeyGetter, currentRowHeightVariant]
+  );
   const ref_data_grid = useRef(null);
   const [popoverState, setPopoverState] = useState({
     anchorEl: null,
@@ -179,7 +199,7 @@ function TableView(props) {
             className: "rdg-light",
             ref: ref_data_grid,
             headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
-            columns: finalColumns,
+            columns: columnsWithBackground,
             sortColumns,
             onSortColumnsChange: handleSortColumnsChange,
             onColumnResize,
@@ -207,7 +227,7 @@ function TableView(props) {
             className: "rdg-light",
             ref: ref_data_grid,
             headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
-            columns: finalColumns,
+            columns: columnsWithBackground,
             sortColumns,
             onSortColumnsChange: handleSortColumnsChange,
             onColumnResize,

package/components/datagrids/views/TableView/helpers/index.d.ts

@@ -1,3 +1,4 @@
 export { getDragHeaderRenderer } from './getDragHeaderRenderer';
 export { getGroupBy } from './getGroupBy';
 export { defaultRowGrouper } from './defaultRowGrouper';
+export { createRowCellsBackgroundMap, processColumnsWithRowCellsBackground, } from './rowCellsBackground';

package/components/datagrids/views/TableView/helpers/rowCellsBackground/index.d.ts

@@ -0,0 +1,2 @@
+export { createRowCellsBackgroundMap, processColumnsWithRowCellsBackground, } from './rowCellsBackground';
+export type { CellColorGetter } from './types';

package/components/datagrids/views/TableView/helpers/rowCellsBackground/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/views/TableView/helpers/rowCellsBackground/rowCellsBackground.d.ts

@@ -0,0 +1,32 @@
+import { Column } from 'react-data-grid';
+import { RowKey, RowCellBackground, RowHeightVariants } from '../../../../types';
+import { CellColorGetter } from './types';
+/**
+ * Convierte el array de rowCellsBackground en un Map para buscar el color
+ * de una celda usando la combinación de rowKey y columnKey.
+ *
+ * El Map usa como llave la combinación "rowKey|columnKey" (separados por |)
+ * y como valor el color.
+ *
+ * Ejemplo:
+ * - Entrada: [{ rowKey: 'user_1', columnKey: 'status', color: '#FF0000' }]
+ * - Map resultante: { 'user_1|status' => '#FF0000' }
+ * @param rowCellsBackground - Array de celdas con sus colores (puede ser undefined)
+ * @returns Map con la llave "rowKey|columnKey" y el color como valor
+ */
+export declare const createRowCellsBackgroundMap: <TKey extends RowKey>(rowCellsBackground: RowCellBackground<TKey>[] | undefined) => Map<string, string>;
+/**
+ * Procesa las columnas para agregar el wrapper de color donde corresponda.
+ *
+ * Para cada columna, modifica el renderCell para:
+ * 1. Obtener el rowKey de la fila actual
+ * 2. Buscar si existe un color para esa combinación rowKey + columnKey
+ * 3. Si existe color, envolver el contenido con CellBackgroundWrapperStyled
+ * 4. Si no existe color, mostrar el contenido normal sin cambios
+ * @param columns - Las columnas originales del DataGrid
+ * @param colorGetter - Map con los colores o función que retorna el color
+ * @param rowKeyGetter - Función que obtiene el key de una fila
+ * @param currentRowHeightVariant - Variante de altura de fila para el truncado
+ * @returns Las columnas modificadas con el renderCell actualizado
+ */
+export declare const processColumnsWithRowCellsBackground: <TRow, TSummaryRow, TKey extends RowKey>(columns: readonly Column<TRow, TSummaryRow>[], colorGetter: CellColorGetter<TKey> | undefined, rowKeyGetter: (row: TRow) => TKey, currentRowHeightVariant?: RowHeightVariants) => Column<TRow, TSummaryRow>[];

package/components/datagrids/views/TableView/helpers/rowCellsBackground/rowCellsBackground.js

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import { F as CellBackgroundWrapperStyled } from "../../../../slots/DataGridSlot.js";
+const getCellColor = (colorGetter, rowKey, columnKey) => {
+  if (colorGetter instanceof Map) {
+    return colorGetter.get(`${rowKey}|${columnKey}`);
+  }
+  return colorGetter(rowKey, columnKey);
+};
+const createRowCellsBackgroundMap = (rowCellsBackground) => {
+  const map = /* @__PURE__ */ new Map();
+  if (!rowCellsBackground) {
+    return map;
+  }
+  rowCellsBackground.forEach(({ rowKey, columnKey, color }) => {
+    map.set(`${rowKey}|${columnKey}`, color);
+  });
+  return map;
+};
+const processColumnsWithRowCellsBackground = (columns, colorGetter, rowKeyGetter, currentRowHeightVariant) => {
+  if (!colorGetter) {
+    return columns;
+  }
+  if (colorGetter instanceof Map && colorGetter.size === 0) {
+    return columns;
+  }
+  return columns.map((column) => {
+    const originalRenderCell = column.renderCell;
+    return {
+      ...column,
+      // Mantener todas las propiedades originales de la columna
+      /**
+       * Reemplazar renderCell con nuestra versión que agrega el color
+       */
+      renderCell: (props) => {
+        const rowKey = rowKeyGetter(props.row);
+        const cellColor = getCellColor(colorGetter, rowKey, column.key);
+        const originalContent = originalRenderCell ? originalRenderCell(props) : props.row[column.key];
+        if (cellColor) {
+          return /* @__PURE__ */ jsx(
+            CellBackgroundWrapperStyled,
+            {
+              ownerState: {
+                cellBackgroundColor: cellColor,
+                currentRowHeightVariant
+              },
+              children: originalContent
+            }
+          );
+        }
+        return originalContent;
+      }
+    };
+  });
+};
+export {
+  createRowCellsBackgroundMap as c,
+  processColumnsWithRowCellsBackground as p
+};

package/components/datagrids/views/TableView/helpers/rowCellsBackground/types.d.ts

@@ -0,0 +1,7 @@
+import { RowKey, RowCellsBackgroundGetter } from '../../../../types';
+/**
+ * Tipo para el getter de color - puede ser Map (desde array) o función directa.
+ * - Map: Resultado de convertir un array de RowCellBackground
+ * - Función: La función directa que retorna el color para cada celda
+ */
+export type CellColorGetter<TKey extends RowKey> = Map<string, string> | RowCellsBackgroundGetter<TKey>;

package/components/datagrids/views/TableView/subcomponents/DraggableHeaderRenderer/DraggableHeaderRenderer.js

@@ -3,7 +3,7 @@ import { useState, useEffect } from "react";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { useDrag, useDrop } from "react-dnd";
 import { renderHeaderCell } from "react-data-grid";
-import { N as NameColumnIconStyled, F as NameColumnStyled, G as IconColumnStyled, H as DraggableHeaderRootStyled, J as ButtonHeaderActionsStyled, K as DraggableWrapperInputBaseStyled, M as IconSearchStyled, O as HeaderInputBaseStyled } from "../../../../slots/DataGridSlot.js";
+import { N as NameColumnIconStyled, G as NameColumnStyled, H as IconColumnStyled, J as DraggableHeaderRootStyled, K as ButtonHeaderActionsStyled, M as DraggableWrapperInputBaseStyled, O as IconSearchStyled, P as HeaderInputBaseStyled } from "../../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { I as Icon } from "../../../../../Icon/Icon.js";
 import { u as useFocusRef } from "../../hooks/useFocusRef/useFocusRef.js";

package/components/datagrids/views/TableView/subcomponents/HeaderRenderClick/HeaderRenderClick.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useMemo, useEffect, useCallback } from "react";
 import { useModuleDictionary } from "@m4l/core";
 import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
-import { P as MenuListStyled, Q as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
+import { Q as MenuListStyled, S as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
 import { M as MenuDivider } from "../../../../../mui_extended/MenuDivider/MenuDivider.js";
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";

package/components/datagrids/views/TableView/subcomponents/RenderGroupCell/RenderGroupCell.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useEnvironment } from "@m4l/core";
 import { p as pathIcons } from "../../../../icons.js";
 import { I as Icon } from "../../../../../Icon/Icon.js";
-import { S as DefaultRenderGroupCellRootStyled, U as DefaultRenderGroupCellTextStyled } from "../../../../slots/DataGridSlot.js";
+import { U as DefaultRenderGroupCellRootStyled, W as DefaultRenderGroupCellTextStyled } from "../../../../slots/DataGridSlot.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function RenderGroupCell(props) {
   const { groupKey, isExpanded, toggleGroup, column, customRenderGroupCell, ...restProps } = props;

package/components/datagrids/views/TableView/subcomponents/SkeletonFormatter/SkeletonFormatter.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { S as Skeleton } from "../../../../../mui_extended/Skeleton/Skeleton.js";
-import { W as WrapperSkeletonStyled } from "../../../../slots/DataGridSlot.js";
+import { X as WrapperSkeletonStyled } from "../../../../slots/DataGridSlot.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function SkeletonFormatter() {
   const { size } = useDataGrid();

package/components/datagrids/views/adapters/CheckboxCellAdapter/CheckboxCellAdapter.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useContext } from "react";
 import { SelectCellFormatter } from "react-data-grid";
-import { X as CheckboxCellWrapperStyled } from "../../../slots/DataGridSlot.js";
+import { Y as CheckboxCellWrapperStyled } from "../../../slots/DataGridSlot.js";
 import { a as DataGridContext } from "../../../contexts/DataGridContext/DataGridContext.js";
 import { R as RadioFormatter } from "../../TableView/subcomponents/RadioSelectColumn/subcomponents/RadioFormatter/RadioFormatter.js";
 import { C as CheckboxFormatter } from "../../TableView/subcomponents/CheckboxFormatter/CheckboxFormatter.js";

package/components/hook-form/RHFAutocomplete/RHFAutocomplete.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useId, useState, useCallback, useEffect } from "react";
+import { useId } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import { r as rhfAutocompleteClasses } from "./constants.js";
 import clsx from "clsx";
@@ -31,31 +31,6 @@ function RHFAutocomplete(props) {
     // onChange: onChangeRHF,
   } = props;
   const htmlForId = useId();
-  const [open, setOpen] = useState(false);
-  const onCloseLocal = useCallback((event, reason) => {
-    setOpen(false);
-    if (onClose) {
-      onClose(event, reason);
-    }
-  }, [onClose]);
-  const onOpenLocal = useCallback(
-    (event) => {
-      setOpen((currentState) => !currentState);
-      if (onOpen) {
-        onOpen(event);
-      }
-    },
-    [onOpen]
-  );
-  const getOptionLabelLocal = useCallback(
-    (option) => {
-      if (option === void 0 || option === null) {
-        return "";
-      }
-      return getOptionLabel(option);
-    },
-    [getOptionLabel]
-  );
   const {
     control
   } = useFormContext();
@@ -74,17 +49,6 @@ function RHFAutocomplete(props) {
           name: nameRHF,
           control,
           render: ({ field: { onChange, value }, fieldState: { error }, formState: { isSubmitting } }) => {
-            const [inputValue, setInputValue] = useState(
-              getOptionLabelLocal(value)
-            );
-            useEffect(() => {
-              if (!open && value === null && inputValue !== "") {
-                setInputValue("");
-              }
-              if (!open && value !== null && options.length === 0) {
-                onChangeFilterParmsLocal?.(getOptionLabelLocal(value), "reset");
-              }
-            }, [value, inputValue]);
             return /* @__PURE__ */ jsxs(Fragment, { children: [
               label && /* @__PURE__ */ jsx(
                 LabelStyled,
@@ -115,8 +79,8 @@ function RHFAutocomplete(props) {
                   refresh,
                   disabled: disabled || isSubmitting,
                   loading,
-                  onOpen: onOpenLocal,
-                  onClose: onCloseLocal,
+                  onOpen,
+                  onClose,
                   size,
                   value,
                   htmlFor: htmlForId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.4.24",
+  "version": "9.4.26-BE20260206-2+PRhotfix-autocomplete",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {