@m4l/components 9.2.63-JT14072025.beta.1 → 9.2.63-JT15072025.beta.1

package/components/DataGrid/Datagrid.styles.js

@@ -263,6 +263,9 @@ const dataGridStyles = {
       border: theme.vars.size.borderStroke.container,
       borderColor: theme.vars.palette?.border.secondary,
       "& .rdg ": {
+        display: "grid",
+        contain: "content",
+        boxSizing: "border-box",
         border: "none",
         background: theme.vars.palette.background.default,
         gridColumnGap: theme.vars.size.baseSpacings.sp0,
@@ -291,6 +294,19 @@ const dataGridStyles = {
           boxShadow: `inset 0 0.5px 0 0 ${theme.vars.palette?.border.secondary}`
         }
       },
+      "&.MeasuringCell": {
+        contain: "strict",
+        gridRow: "1",
+        visibility: "hidden"
+      },
+      "&::before": {
+        content: "''",
+        gridColumn: "1/-1",
+        gridRow: "1/-1"
+      },
+      '& [role="row"], & .rdg-row, & .rdg-header-row, & .rdg-summary-row': {
+        display: "contents"
+      },
       '& [role="columnheader"]': {
         justifyContent: "center",
         alignItems: "center",
@@ -306,6 +322,13 @@ const dataGridStyles = {
         }
       },
       "& .rdg-row": {
+        display: "contents",
+        '&[aria-selected="true"]': {
+          backgroundColor: theme.vars.palette.primary.toneOpacity,
+          "&:hover": {
+            backgroundColor: theme.vars.palette.primary.toneOpacity
+          }
+        },
         "& .rdg-cell": {
           backgroundColor: theme.vars.palette.background.default
         },
@@ -329,19 +352,29 @@ const dataGridStyles = {
         backgroundColor: "transparent"
       },
       "& .rdg-cell": {
+        overflow: "clip",
+        position: "sticky",
+        outline: "none",
         color: theme.vars.palette.text.primary,
-        display: "inline",
-        justifyContent: "center",
-        alignItems: "center",
-        textOverflow: "inline",
-        gridTemplateColumns: "auto",
-        padding: "0 8px",
+        paddingBlock: 0,
+        paddingInline: "8px",
+        borderInlineEnd: "1px solid var(--rdg-border-color)",
+        borderBlockEnd: "1px solid var(--rdg-border-color)",
+        gridRowStart: "var(--rdg-grid-row-start)",
+        alignContent: "center",
+        backgroundColor: "inherit",
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis",
         ...getTypographyStyles(
           theme.generalSettings.isMobile,
           ownerState?.size || "medium",
           "body"
         ),
         lineHeight: "var(--rdg-row-height)!important",
+        '&[aria-selected="true"]': {
+          outline: `2px solid var(--rdg-selection-color)`,
+          outlineOffset: "-2px"
+        },
         "& .checkbox-checked": {
           "& path:first-of-type": {
             fill: theme.vars.palette.primary.main
@@ -403,6 +436,11 @@ const dataGridStyles = {
           height: "100%"
         },
         '&[role="columnheader"]': {
+          position: "sticky",
+          top: 0,
+          zIndex: 2,
+          justifyContent: "center",
+          alignItems: "center",
           '&[aria-colindex="1"]': {
             borderTopLeftRadius: theme.vars.size.baseSpacings.sp2
           }
@@ -501,7 +539,16 @@ const dataGridStyles = {
         borderColor: theme.vars.palette.background.surface
       },
       "& .rdg-header-row": {
-        backgroundColor: theme.vars.palette.background.base
+        display: "contents",
+        backgroundColor: theme.vars.palette.background.base,
+        fontWeight: "bold",
+        "& > .rdg-cell": {
+          zIndex: 2,
+          position: "sticky"
+        },
+        "& > .rdg-cell.rdg-cell-frozen": {
+          zIndex: 3
+        }
       },
       // Estilado de celdas de la cabecera
       "& .rdg-header-row .rdg-cell": {
@@ -510,9 +557,13 @@ const dataGridStyles = {
         boxShadow: "unset!important",
         borderBottom: theme.vars.size.borderStroke.container,
         borderColor: `${theme.vars.palette?.background.surface}!important`,
+        cursor: "pointer",
         "&:hover": {
           boxShadow: `inset 1px 0 0 0 ${theme.vars.palette?.border.default}, inset -1px 0 0 0 ${theme.vars.palette?.border.default}!important `
         },
+        "&[data-resize]": {
+          touchAction: "none"
+        },
         '& [draggable="true"]': {
           fontSize: theme.typography.body
         },
@@ -534,6 +585,15 @@ const dataGridStyles = {
         // Modificar el tamaño de la flecha
         "& .rdg-sort-arrow": {}
       },
+      // Estilo específico para el resize handle generado por react-data-grid
+      '& [class*="r1y6ywlx"]': {
+        cursor: "col-resize",
+        position: "absolute",
+        insetBlockStart: 0,
+        insetInlineEnd: 0,
+        insetBlockEnd: 0,
+        inlineSize: "10px"
+      },
       // Estilado de la ultima celda Header
       "& .rdg-header-row :last-child.rdg-cell": {
         borderTopRightRadius: theme.vars.size.baseSpacings.sp0,

package/components/DataGrid/subcomponents/Table/index.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState, useRef, useEffect } from "react";
 import DataGrid from "react-data-grid";
-import "react-data-grid/lib/styles.css";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { C as CheckboxFormatter } from "./subcomponents/CheckboxFormatter.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.63-JT14072025.beta.1",
+  "version": "9.2.63-JT15072025.beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {