@m4l/components 9.4.24 → 9.4.26

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/Window.js

@@ -3,8 +3,8 @@ import React from "react";
 import { M as MemonizedWindowBaseMicroFrontend } from "../../../../../../../WindowBase/subcomponents/MicroFrontend/MicroFrontend.js";
 import { W as WindowBaseComponent } from "../../../../../../../WindowBase/subcomponents/Component/index.js";
 import { T as TEST_PROP_ID } from "../../../../../../../../test/constants_no_mock.js";
-import { a as getNameDataTestId } from "../../../../../../../../test/getNameDataTestId.js";
-import { A as AREAS_VIEWER_CLASS_NAME } from "../../../../../../constants.js";
+import { g as getNameDataTestId } from "../../../../../../../../test/getNameDataTestId.js";
+import { a as AREAS_VIEWER_CLASS_NAME } from "../../../../../../constants.js";
 import { u as useWindow } from "./hooks/useWindow.js";
 import { W as WindowBaseStyled } from "../../../../slots/AreasViewerSlots.js";
 import { shallow } from "zustand/shallow";

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/WindowModal/WindowModal.js

@@ -3,7 +3,7 @@ import React, { useCallback } from "react";
 import { u as useAreasStore } from "../../../../../../hooks/useAreas/index.js";
 import { W as Window } from "../Window/Window.js";
 import { useIsMobile } from "@m4l/graphics";
-import { b as WrapperWindowModalStyled } from "../../../../slots/AreasViewerSlots.js";
+import { a as WrapperWindowModalStyled } from "../../../../slots/AreasViewerSlots.js";
 import { u as useStateRef } from "../../../../../../../../hooks/useStateRef/index.js";
 import { D as DragResizeWindowRND } from "../../../../../../../DragResizeWindowRND/DragResizeWindowRND.js";
 import { D as Dialog } from "../../../../../../../mui_extended/Dialog/Dialog.js";

package/components/areas/constants.js

@@ -1,6 +1,6 @@
 const AREAS_VIEWER_CLASS_NAME = "M4LAreasViewer";
 const AREAS_STORE_ID = "M4LAreasStore";
 export {
-  AREAS_VIEWER_CLASS_NAME as A,
-  AREAS_STORE_ID as a
+  AREAS_STORE_ID as A,
+  AREAS_VIEWER_CLASS_NAME as a
 };

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

@@ -92,6 +92,6 @@ function AreasProvider(props) {
   return /* @__PURE__ */ jsx(AreasContext.Provider, { value: areasStoreRef.current, children });
 }
 export {
-  AreasProvider as A,
-  AreasContext as a
+  AreasContext as A,
+  AreasProvider as a
 };

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

@@ -6,10 +6,10 @@ import { c as createDynamicMFStore } from "../../../WindowBase/contexts/DynamicM
 import cloneDeep from "lodash-es/cloneDeep";
 import debounce from "lodash-es/debounce";
 import { g as generateModuleCount } from "./helpers/generateModuleCount.js";
-import { a as AREAS_STORE_ID } from "../../constants.js";
+import { A as AREAS_STORE_ID } from "../../constants.js";
 import { h as helperSelectLayout } from "./helpers/selectLayout.js";
 import { d as deleteCookie, s as setCookie, g as getCookie } from "../../../../helpers/cookies/cookies.js";
-import { k as isEqualLayouts } from "../../../GridLayout/utils.js";
+import { l as isEqualLayouts } from "../../../GridLayout/utils.js";
 import { d as cloneLayouts, e as addLayoutItemToBreakPoints } from "../../../GridLayout/subcomponents/Responsive/responsiveUtils.js";
 const createDevtools = (immerMiddlewere, config) => {
   const { enabled = false } = config;

package/components/areas/hooks/useAreas/index.js

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { useStore } from "zustand";
-import { a as AreasContext } from "../../contexts/AreasContext/index.js";
+import { A as AreasContext } from "../../contexts/AreasContext/index.js";
 function useAreasStore(selector, equalityFn) {
   const context = useContext(AreasContext);
   if (!context) {

package/components/commercial/TopBar/TopBar.js

@@ -2,9 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.js";
 import { g as getTopBarClassesUtilityClass } from "./classes/index.js";
 import { C as ConteinItem } from "./component/ConteinItem/index.js";
-import { T as TopBarProvider } from "./context/index.js";
+import { a as TopBarProvider } from "./context/index.js";
 import { T as TopBarRoot } from "./style.js";
-import { a as getNameDataTestId } from "../../../test/getNameDataTestId.js";
+import { g as getNameDataTestId } from "../../../test/getNameDataTestId.js";
 import { c as componentName } from "./classes/constants.js";
 const TopBar = (props) => {
   const { dataMenu: DataMenu, dataTestId } = props;

package/components/commercial/TopBar/component/ConteinItem/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { u as useTopBar } from "../../hook/topBarContext/index.js";
 import { N as NavItemRoot } from "./subcomponets/NavItem/index.js";
 import { T as TEST_PROP_ID } from "../../../../../test/constants_no_mock.js";
-import { a as getNameDataTestId } from "../../../../../test/getNameDataTestId.js";
+import { g as getNameDataTestId } from "../../../../../test/getNameDataTestId.js";
 import { c as componentName } from "../../classes/constants.js";
 const ConteinItem = () => {
   const { dataMenu: DataMenu, classes, dataTestId } = useTopBar();

package/components/commercial/TopBar/component/ConteinItem/subcomponets/NavItem/index.js

@@ -7,7 +7,7 @@ import clsx from "clsx";
 import { i as isActive } from "../../../../utils/isActive/index.js";
 import { T as TopBarClasses } from "../../../../classes/index.js";
 import { T as TEST_PROP_ID } from "../../../../../../../test/constants_no_mock.js";
-import { a as getNameDataTestId } from "../../../../../../../test/getNameDataTestId.js";
+import { g as getNameDataTestId } from "../../../../../../../test/getNameDataTestId.js";
 import { c as componentName } from "../../../../classes/constants.js";
 import { A as Accordion } from "../../../../../../mui_extended/Accordion/Accordion.js";
 import { B as Button } from "../../../../../../mui_extended/Button/Button.js";

package/components/commercial/TopBar/context/index.js

@@ -19,6 +19,6 @@ const TopBarProvider = (props) => {
   );
 };
 export {
-  TopBarProvider as T,
-  TopBarContext as a
+  TopBarContext as T,
+  TopBarProvider as a
 };

package/components/commercial/TopBar/hook/topBarContext/index.js

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { a as TopBarContext } from "../../context/index.js";
+import { T as TopBarContext } from "../../context/index.js";
 const useTopBar = () => useContext(TopBarContext);
 export {
   useTopBar as u

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/BaseDataGrid/BaseDataGrid.js

@@ -3,13 +3,13 @@ import { useRef } from "react";
 import { useModuleSkeleton } from "@m4l/core";
 import { T as TEST_PROP_COLUMNS } from "../../types.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
-import { a as getNameDataTestId } from "../../../../test/getNameDataTestId.js";
-import { T as TEST_SKELETON, D as DATAGRID_PREFIX_NAME } from "../../constants.js";
-import { D as DataGridRootStyled, C as CustomHeaderStyled } from "../../slots/DataGridSlot.js";
-import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
+import { g as getNameDataTestId } from "../../../../test/getNameDataTestId.js";
+import { T as TEST_SKELETON, b as DATAGRID_PREFIX_NAME } from "../../constants.js";
+import { D as DataGridRootStyled, o as CustomHeaderStyled } from "../../slots/DataGridSlot.js";
+import { g as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
-import { D as DataGridProvider } from "../../contexts/DataGridContext/DataGridContext.js";
-import { F as FilterProvider } from "../../contexts/FilterContext/FilterContext.js";
+import { a as DataGridProvider } from "../../contexts/DataGridContext/DataGridContext.js";
+import { a as FilterProvider } from "../../contexts/FilterContext/FilterContext.js";
 import { H as HeaderActions } from "../../subcomponents/HeaderActions/HeaderActions.js";
 import { C as ControlNavigate } from "../../subcomponents/ControlNavigate/ControlNavigate.js";
 function BaseDataGrid(props) {

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/constants.js

@@ -39,10 +39,10 @@ const CARD_HEIGHT = {
 };
 export {
   CARD_HEIGHT as C,
-  DATAGRID_PREFIX_NAME as D,
+  DATAGRID_ROW_HEIGHTS as D,
   TEST_SKELETON as T,
-  DATAGRID_ROW_HEIGHTS as a,
-  DATAGRID_ROW_HEADER_HEIGHTS as b,
+  DATAGRID_ROW_HEADER_HEIGHTS as a,
+  DATAGRID_PREFIX_NAME as b,
   DATAGRID_ID_DICTIONARY as c,
   DATAGRID_ACTIONS_COLUMN_KEY as d,
   DATAGRID_SEMANTIC_WIDTHS as e,

package/components/datagrids/contexts/DataGridContext/DataGridContext.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { useState, useEffect, useMemo, createContext } from "react";
 import { useFirstRender } from "@m4l/graphics";
-import { g as getComponentClasses } from "../../../../utils/getComponentSlotRoot.js";
-import { a as DATAGRID_ROW_HEIGHTS, b as DATAGRID_ROW_HEADER_HEIGHTS, D as DATAGRID_PREFIX_NAME } from "../../constants.js";
+import { a as getComponentClasses } from "../../../../utils/getComponentSlotRoot.js";
+import { D as DATAGRID_ROW_HEIGHTS, a as DATAGRID_ROW_HEADER_HEIGHTS, b as DATAGRID_PREFIX_NAME } from "../../constants.js";
 import { C as ControlNavigateSlots, a as ColumnsConfigSlots, T as TextEditorSlots, b as TableSlots, R as RowsCountSlots, A as ActionsSlots, D as DataGridSlots } from "../../slots/DataGridEnum.js";
 import { deepEqual } from "fast-equals";
 import { u as useViewMode } from "../../hooks/useViewMode/useViewMode.js";
@@ -367,6 +367,6 @@ function DataGridProvider(props) {
   );
 }
 export {
-  DataGridProvider as D,
-  DataGridContext as a
+  DataGridContext as D,
+  DataGridProvider as a
 };

package/components/datagrids/contexts/FilterContext/FilterContext.js

@@ -45,6 +45,6 @@ function FilterProvider({
   );
 }
 export {
-  FilterProvider as F,
-  FilterContext as a
+  FilterContext as F,
+  FilterProvider as a
 };

package/components/datagrids/formatters/ColumnChipStatusFormatter/ColumnChipStatusGroupFormatter.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
-import { C as ChipStatusFormatterColumnWrapperStyled } from "../../../formatters/ChipStatusFormatter/slots/ChipStatusFormatterSlots.js";
+import { a as ChipStatusFormatterColumnWrapperStyled } from "../../../formatters/ChipStatusFormatter/slots/ChipStatusFormatterSlots.js";
 import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
 import { C as ChipStatusFormatter } from "../../../formatters/ChipStatusFormatter/ChipStatusFormatter.js";
 const ColumnChipStatusGroupFormatter = (props) => {

package/components/datagrids/formatters/ColumnChipStatusFormatter/formatter.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
-import { C as ChipStatusFormatterColumnWrapperStyled } from "../../../formatters/ChipStatusFormatter/slots/ChipStatusFormatterSlots.js";
+import { a as ChipStatusFormatterColumnWrapperStyled } from "../../../formatters/ChipStatusFormatter/slots/ChipStatusFormatterSlots.js";
 import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
 import { C as ChipStatusFormatter } from "../../../formatters/ChipStatusFormatter/ChipStatusFormatter.js";
 const ColumnChipStatusFormatter = (props) => {

package/components/datagrids/formatters/ColumnImageFormatter/ImageFormatterCell.js

@@ -2,7 +2,7 @@ import { jsx, Fragment } from "react/jsx-runtime";
 import { useContext } from "react";
 import { getPropertyByString } from "@m4l/core";
 import { I as IMAGE_SIZES } from "./constants.js";
-import { a as DataGridContext } from "../../contexts/DataGridContext/DataGridContext.js";
+import { D as DataGridContext } from "../../contexts/DataGridContext/DataGridContext.js";
 import { I as ImageFormatter } from "../../../formatters/ImageFormatter/ImageFormatter.js";
 function ImageFormatterCell(props) {
   const { formatterProps, fieldValue, fieldText, width, height, cover } = props;

package/components/datagrids/hooks/shared/useDataGrid/useDataGrid.js

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { a as DataGridContext } from "../../../contexts/DataGridContext/DataGridContext.js";
+import { D as DataGridContext } from "../../../contexts/DataGridContext/DataGridContext.js";
 function useDataGrid() {
   const context = useContext(DataGridContext);
   if (!context) {

package/components/datagrids/hooks/shared/useFilters/useFilters.js

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { a as FilterContext } from "../../../contexts/FilterContext/FilterContext.js";
+import { F as FilterContext } from "../../../contexts/FilterContext/FilterContext.js";
 const useFilters = () => useContext(FilterContext);
 export {
   useFilters as u

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

@@ -1,6 +1,6 @@
 import { styled } from "@mui/material/styles";
 import { MenuList, InputBase } from "@mui/material";
-import { D as DATAGRID_PREFIX_NAME } from "../constants.js";
+import { b as DATAGRID_PREFIX_NAME } from "../constants.js";
 import { T as TextEditorSlots, D as DataGridSlots, b as TableSlots, A as ActionsSlots, C as ControlNavigateSlots, R as RowsCountSlots, a as ColumnsConfigSlots, c as ColumnIconFormatterSlots } from "./DataGridEnum.js";
 import { d as dataGridStyles } from "../Datagrid.styles.js";
 import { I as Icon } from "../../Icon/Icon.js";
@@ -239,55 +239,60 @@ 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,
+  NameColumnStyled as B,
+  ContainerToggleCardsStyled as C,
   DataGridRootStyled as D,
   EditorCellWrapperStyled as E,
-  NameColumnStyled as F,
-  IconColumnStyled as G,
-  DraggableHeaderRootStyled as H,
-  InputTextEditorStyled as I,
-  ButtonHeaderActionsStyled as J,
-  DraggableWrapperInputBaseStyled as K,
+  IconColumnStyled as F,
+  DraggableHeaderRootStyled as G,
+  ButtonHeaderActionsStyled as H,
+  IconButtonEditStyled as I,
+  DraggableWrapperInputBaseStyled as J,
+  IconSearchStyled as K,
   LabelHeaderColumnStyled as L,
-  IconSearchStyled as M,
+  HeaderInputBaseStyled as M,
   NameColumnIconStyled as N,
-  HeaderInputBaseStyled as O,
-  MenuListStyled as P,
-  HeaderRenderClickStyled as Q,
+  CellBackgroundWrapperStyled as O,
+  DefaultRenderGroupCellRootStyled as P,
+  DefaultRenderGroupCellTextStyled as Q,
   RowsCountRootStyled as R,
-  DefaultRenderGroupCellRootStyled as S,
+  MenuListStyled as S,
   TextToggleCardButtonStyled as T,
-  DefaultRenderGroupCellTextStyled as U,
+  HeaderRenderClickStyled as U,
   ValueColumnStyled as V,
   WrapperSkeletonStyled as W,
-  CheckboxCellWrapperStyled as X,
-  ControlNavigateStyled as a,
-  RowsCountLabelStyled as b,
-  RowsCountValueStyled as c,
-  ActionsConfigContainerStyled as d,
-  ContainerLeftActionsStyled as e,
-  ContainerRightActionsStyled as f,
-  ContainerToggleCardsStyled as g,
-  CardToggleButtonStyled as h,
-  CardsContainerStyled as i,
-  ContainerLabelValueColumnStyled as j,
-  ContentWrapperColumnStyled as k,
-  EditablePlaceholderStyled as l,
-  IconButtonEditStyled as m,
-  ContentModalSettingStyled as n,
-  CardDetailContainerStyled as o,
-  CardContentWrapperStyled as p,
-  CardContentStyled as q,
-  CardStyled as r,
+  TableContainerStyled as X,
+  InputTextEditorStyled as Y,
+  CardToggleButtonStyled as a,
+  CheckboxCellWrapperStyled as b,
+  ColumnsConfigWrapperStyled as c,
+  ColumnsConfigDataGridStyled as d,
+  ColumnsConfigSelColumnsStyled as e,
+  TableWrapperDataGridStyled as f,
+  ColumnsConfigActiosStyled as g,
+  ContentModalSettingStyled as h,
+  ActionsConfigContainerStyled as i,
+  ContainerLeftActionsStyled as j,
+  ContainerRightActionsStyled as k,
+  RowsCountLabelStyled as l,
+  RowsCountValueStyled as m,
+  ControlNavigateStyled as n,
+  CustomHeaderStyled as o,
+  ContainerLabelValueColumnStyled as p,
+  ContentWrapperColumnStyled as q,
+  EditablePlaceholderStyled as r,
   CardHeaderStyled as s,
   CardHeaderLeftStyled as t,
   CardHeaderRightStyled as u,
-  ColumnsConfigWrapperStyled as v,
-  ColumnsConfigDataGridStyled as w,
-  ColumnsConfigSelColumnsStyled as x,
-  TableWrapperDataGridStyled as y,
-  ColumnsConfigActiosStyled as z
+  CardContentWrapperStyled as v,
+  CardContentStyled as w,
+  CardStyled as x,
+  CardDetailContainerStyled as y,
+  CardsContainerStyled as z
 };

package/components/datagrids/subcomponents/ControlNavigate/ControlNavigate.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useIsMobile } from "@m4l/graphics";
-import { a as ControlNavigateStyled } from "../../slots/DataGridSlot.js";
+import { n as ControlNavigateStyled } from "../../slots/DataGridSlot.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { R as RowsCount } from "./subcomponents/RowsCount/RowsCount.js";
 import { P as Pager } from "../../../Pager/Pager.js";

package/components/datagrids/subcomponents/ControlNavigate/subcomponents/RowsCount/RowsCount.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
-import { R as RowsCountRootStyled, b as RowsCountLabelStyled, c as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
+import { R as RowsCountRootStyled, l as RowsCountLabelStyled, m as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function RowsCount() {
   const { rowsCount, size } = useDataGrid();

package/components/datagrids/subcomponents/HeaderActions/HeaderActions.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useIsMobile } from "@m4l/graphics";
-import { A as ActionsRootStyled, d as ActionsConfigContainerStyled, e as ContainerLeftActionsStyled, f as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
+import { A as ActionsRootStyled, i as ActionsConfigContainerStyled, j as ContainerLeftActionsStyled, k as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { M as MobileMenuActions } from "./subcomponents/MobileMenuActions/MobileMenuActions.js";
 import { D as Density } from "./subcomponents/Density/Density.js";

package/components/datagrids/subcomponents/HeaderActions/subcomponents/ViewMode/ViewMode.js

@@ -4,7 +4,7 @@ import { useModuleDictionary } from "@m4l/core";
 import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
-import { g as ContainerToggleCardsStyled, h as CardToggleButtonStyled, T as TextToggleCardButtonStyled } from "../../../../slots/DataGridSlot.js";
+import { C as ContainerToggleCardsStyled, a as CardToggleButtonStyled, T as TextToggleCardButtonStyled } from "../../../../slots/DataGridSlot.js";
 import { LayoutTableOutlined, LayoutCardOutlined } from "@m4l/icons";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 import { I as Icon } from "../../../../../Icon/Icon.js";

package/components/datagrids/subcomponents/editors/TextEditor/TextEditor.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { I as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
+import { Y as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
 function autoFocusAndSelect(input) {
   input?.focus();
   input?.select();

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/CardsView/CardsView.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useMemo, useEffect } from "react";
-import { i as CardsContainerStyled } from "../../slots/DataGridSlot.js";
+import { z as CardsContainerStyled } from "../../slots/DataGridSlot.js";
 import { u as useProcessedColumns } from "./hooks/useProcessedColumns/useProcessedColumns.js";
 import { u as useModalDetail } from "./hooks/useModalDetail/useModalDetail.js";
 import { c as calculateCardHeight } from "./helpers/calculateCardHeight/calculateCardHeight.js";

package/components/datagrids/views/CardsView/hooks/useCardContent/useCardContent.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { j as ContainerLabelValueColumnStyled, k as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, l as EditablePlaceholderStyled, m as IconButtonEditStyled } from "../../../../slots/DataGridSlot.js";
+import { p as ContainerLabelValueColumnStyled, q as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, r as EditablePlaceholderStyled, I as IconButtonEditStyled } from "../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
 import { useModuleDictionary } from "@m4l/core";
 import { ActionsEditOutlined } from "@m4l/icons";

package/components/datagrids/views/CardsView/hooks/useModalDetail/useModalDetail.js

@@ -3,7 +3,7 @@ import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { useIsMobile } from "@m4l/graphics";
 import { useCallback } from "react";
 import { u as useModal } from "../../../../../../hooks/useModal/index.js";
-import { n as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../slots/DataGridSlot.js";
+import { h as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
 import { C as CardDetails } from "../../subcomponents/CardDetails/CardDetails.js";

package/components/datagrids/views/CardsView/subcomponents/CardDetails/CardDetails.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
-import { o as CardDetailContainerStyled, j as ContainerLabelValueColumnStyled, k as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, l as EditablePlaceholderStyled, m as IconButtonEditStyled } from "../../../../slots/DataGridSlot.js";
+import { y as CardDetailContainerStyled, p as ContainerLabelValueColumnStyled, q as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, r as EditablePlaceholderStyled, I as IconButtonEditStyled } from "../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
 import { useModuleDictionary } from "@m4l/core";
 import { ActionsEditOutlined } from "@m4l/icons";

package/components/datagrids/views/CardsView/subcomponents/CardRow/CardRow.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useMemo } from "react";
-import { p as CardContentWrapperStyled, q as CardContentStyled, r as CardStyled } from "../../../../slots/DataGridSlot.js";
+import { v as CardContentWrapperStyled, w as CardContentStyled, x as CardStyled } from "../../../../slots/DataGridSlot.js";
 import { deepEqual } from "fast-equals";
 import { u as useCardContent } from "../../hooks/useCardContent/useCardContent.js";
 import { C as CardHeader } from "./subcomponents/CardHeader/CardHeader.js";

package/components/datagrids/views/CardsView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.js

@@ -3,7 +3,7 @@ import { useModuleDictionary } from "@m4l/core";
 import { useIsMobile } from "@m4l/graphics";
 import { useRef, useCallback } from "react";
 import { u as useModal } from "../../../../../../../../hooks/useModal/index.js";
-import { n as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../../slots/DataGridSlot.js";
+import { h as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../../slots/DataGridSlot.js";
 import { SettingsConfigOutlined } from "@m4l/icons";
 import { C as ColumnsConfig } from "../../subcomponents/ColumnsConfig/ColumnsConfig.js";
 import { A as ActionsContainer } from "../../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";

package/components/datagrids/views/CardsView/subcomponents/Settings/subcomponents/ColumnsConfig/ColumnsConfig.js

@@ -3,7 +3,7 @@ import { forwardRef, useRef, useState, useImperativeHandle, useMemo, useEffect }
 import { useModuleDictionary } from "@m4l/core";
 import DataGrid from "react-data-grid";
 import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
-import { v as ColumnsConfigWrapperStyled, w as ColumnsConfigDataGridStyled, x as ColumnsConfigSelColumnsStyled, y as TableWrapperDataGridStyled, z as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
+import { c as ColumnsConfigWrapperStyled, d as ColumnsConfigDataGridStyled, e as ColumnsConfigSelColumnsStyled, f as TableWrapperDataGridStyled, g as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../../../dictionary.js";
 import { ArrowChevronUpOutlined, ArrowChevronMdUpOutlined, ArrowChevronDownOutlined, ArrowChevronMdDownOutlined, ActionsMultiCheckOutlined, ActionsCheckIndeterminateOutlined, ArrowRestoreOutlined } from "@m4l/icons";
 import { C as ColumnInteractiveCheckFormatter } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/formatter.js";