@m4l/components 9.4.5 → 9.4.6-JT19122025.beta.1

package/components/DataGrid/Datagrid.styles.js

@@ -10,12 +10,8 @@ const dataGridStyles = {
   datagridRoot: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    //padding: theme.vars.size.baseSpacings.sp0,
-    //inset: theme.vars.size.baseSpacings.sp0,
-    //overflow: 'hidden',
     container: "container / inline-size",
     background: "transparent",
-    //boxShadow: 'unset',
     borderRadius: theme.vars.size.borderRadius.r1,
     position: "relative",
     gap: theme.vars.size.baseSpacings.sp3,
@@ -24,6 +20,42 @@ const dataGridStyles = {
     flex: 1,
     overflow: "hidden",
     "& .rdg .MuiCheckbox-root": {
+      overflow: "visible",
+      padding: 0,
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.small.action,
+        height: theme.vars.size.mobile.small.action
+      } : {
+        width: theme.vars.size.desktop.small.action,
+        height: theme.vars.size.desktop.small.action
+      },
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      borderRadius: theme.size.borderRadius.r1,
+      "&:hover": {
+        backgroundColor: theme.vars.palette.default.hoverOpacity
+      },
+      "&:active": {
+        backgroundColor: theme.vars.palette.default.activeOpacity
+      },
+      "&.Mui-checked": {
+        "&:hover": {
+          backgroundColor: theme.vars.palette.primary.hoverOpacity,
+          "& ..": {
+            backgroundColor: theme.vars.palette.primary.hover
+          }
+        },
+        "&:active": {
+          backgroundColor: theme.vars.palette.primary.activeOpacity,
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette.primary.active
+          }
+        }
+      },
+      "&.Mui-focusVisible, &:focus-visible": {
+        outline: `1px solid ${theme.vars.palette.primary.focusVisible}`
+      },
       "& > svg": {
         color: theme.vars.palette.text.secondary
       }
@@ -46,7 +78,6 @@ const dataGridStyles = {
     },
     "&& .M4lclassCssSpecificity": {
       fontWeight: 400
-      //Se utiliza directamente el valor porque no está tokenizado
     },
     '& [role="row"]:last-of-type': {
       "& .rdg-cell": {
@@ -134,7 +165,6 @@ const dataGridStyles = {
   rowsCountLabel: ({ theme, ownerState }) => ({
     color: theme.vars.palette.text.primary,
     fontWeight: 400,
-    //Se utiliza directamente el valor porque no está tokenizado
     height: "100%",
     lineHeight: theme.vars.size.baseSpacings.sp4,
     fontSize: getTypographyStyles(
@@ -152,7 +182,6 @@ const dataGridStyles = {
     paddingBottom: theme.vars.size.baseSpacings["sp0-5"],
     paddingLeft: theme.vars.size.baseSpacings.sp1,
     paddingRight: "6px",
-    //No hay token para este valor
     paddingTop: theme.vars.size.baseSpacings.sp1,
     fontSize: getTypographyStyles(
       theme.generalSettings.isMobile,
@@ -212,7 +241,7 @@ const dataGridStyles = {
    * Estilos el el input editor del DataGrid.
    * *****************************************
    */
-  inputTexEditor: ({ theme }) => ({
+  inputTexEditor: ({ theme, ownerState }) => ({
     appearance: "none",
     boxSizing: "border-box",
     inlineSize: "100%",
@@ -222,13 +251,19 @@ const dataGridStyles = {
     textAlign: "right",
     fontFamily: "inherit",
     background: "transparent",
+    border: `1px solid ${theme.vars.palette?.border.secondary}`,
+    borderRadius: theme.vars.size.borderRadius["r1-5"],
+    ...getSizeStyles(theme, ownerState?.size || "medium", "case", (size) => ({
+      height: size
+    })),
+    padding: theme.vars.size.baseSpacings.sp1,
+    outline: "none",
     "&:focus": {
       outline: "none",
-      border: "none",
+      border: `1px solid ${theme.vars.palette?.border.secondary}`,
       boxShadow: "none"
     },
     "&:hover": {
-      border: "none",
       outline: "none"
     },
     "&::placeholder": {
@@ -384,37 +419,20 @@ const dataGridStyles = {
           "body"
         ),
         lineHeight: "var(--rdg-row-height)!important",
-        '&[aria-selected="true"]': {
-          // outline: `2px solid var(--rdg-selection-color)`,
-          // outlineOffset: '-2px',
+        '&[aria-selected="true"]': {},
+        "&:has(> .MuiCheckbox-root)": {
+          overflow: "visible",
+          paddingInline: 0
         },
         "& .checkbox-checked": {
-          "& path:first-of-type": {
-            fill: theme.vars.palette.primary.main
-          },
-          ...getSizeStyles(
-            theme,
-            ownerState?.size || "medium",
-            "base",
-            (size) => ({
-              minHeight: size,
-              height: size
-            })
-          )
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette.primary.enabled
+          }
         },
         "& .checkbox-unChecked": {
-          "& path": {
-            fill: theme.vars.palette.text.primary
-          },
-          ...getSizeStyles(
-            theme,
-            ownerState?.size || "medium",
-            "base",
-            (size) => ({
-              minHeight: size,
-              height: size
-            })
-          )
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette.text.primary
+          }
         },
         "& .rdg-text-editor": {
           textAlign: "inherit",
@@ -422,12 +440,9 @@ const dataGridStyles = {
           padding: `${theme.vars.size.baseSpacings.sp0} ${theme.vars.size.baseSpacings.sp2}`,
           border: theme.vars.size.baseSpacings.sp0,
           borderTop: "0.5px solid",
-          //Se deja el valor directamente porque no está tokenizado
           borderBottom: theme.vars.size.borderStroke.container,
           borderLeft: "0.5px solid",
-          //Se deja el valor directamente porque no está tokenizado
           borderRight: "0.5px solid",
-          //Se deja el valor directamente porque no está tokenizado
           borderColor: `${theme.vars.palette?.border.disabled} !important`,
           ...theme.colorSchemes.finalTheme.typography.body
         },
@@ -445,14 +460,12 @@ const dataGridStyles = {
           position: "sticky !important",
           zIndex: 1
         },
-        // Ajuste de celda checkbox (No header)
         '&:has(> .MuiCheckbox-root):not([role="columnheader"])': {
           overflow: "visible",
           display: "flex",
           alignItems: "center",
           justifyContent: "center"
         },
-        // Ajuste al checkbox (Header)
         '&[role="columnheader"]:has(> .MuiCheckbox-root)': {
           justifyContent: "center",
           alignItems: "center"
@@ -462,7 +475,6 @@ const dataGridStyles = {
           borderRight: `${theme.vars.size.baseSpacings.sp0} solid ${theme.vars.palette.divider}`,
           position: "absolute",
           right: theme.vars.size.baseSpacings.sp0,
-          // Por desajuste en chrome en el espaciado
           height: "100%"
         },
         "& .m4l_icon": {
@@ -472,7 +484,6 @@ const dataGridStyles = {
           position: "sticky",
           top: 0,
           zIndex: 2,
-          // Ajuste de header checkbox
           "&:has(> .MuiCheckbox-root)": {
             borderTopLeftRadius: theme.vars.size.baseSpacings.sp2,
             overflow: "visible",
@@ -484,7 +495,6 @@ const dataGridStyles = {
       },
       '& .rdg-cell[role="columnheader"] .rdg-header-sort-name': {
         ...theme.colorSchemes.finalTheme.typography.bodyDens,
-        //ajuste de contenido filtro del DataGrid
         width: "100%",
         display: "-webkit-box !important",
         WebkitBoxOrient: "vertical !important",
@@ -501,12 +511,6 @@ const dataGridStyles = {
         lineHeight: "var(--rdg-summary-row-height)!important",
         color: `${theme.vars.palette.text.secondary}`
       },
-      /**
-       * Estilos para las celdas de datos del grid (no headers, no checkbox)
-       * - .rdg-cell: Todas las celdas del grid
-       * - :not([role="columnheader"]): EXCLUYE las celdas de header
-       * - :not(:has(> .MuiCheckbox-root)): EXCLUYE las celdas que contienen checkbox
-       */
       '& .rdg-cell:not([role="columnheader"]):not(:has(> .MuiCheckbox-root))': {
         display: "-webkit-box !important",
         WebkitBoxOrient: "vertical !important",
@@ -528,20 +532,10 @@ const dataGridStyles = {
           }
         }
       },
-      // Esta condicion para el flujo de cabecera cuando no tiene utilidad sort
       '& .rdg-cell[role="columnheader"] [draggable="true"]': {
         fontWeight: 600
-        //Se utiliza directamente el valor porque no está tokenizado
-      },
-      "&&& [aria-selected=true]": {
-        // backgroundColor: theme.vars.palette.primary?.toneOpacity,
-        // color: theme.vars.palette.text.primary,
-        //cambia el color del contorno de cada celda selecionada
-        // outline: theme.vars.size.borderStroke.container,
-        // outlineOffset: '-1px',
-        // outlineColor: theme.vars.palette.border.main,
       },
-      // Alineaciones
+      "&&& [aria-selected=true]": {},
       "& .rdg-cell.rdg-cell-align-left": {
         textAlign: "start",
         justifyContent: "center",
@@ -550,7 +544,6 @@ const dataGridStyles = {
         '&:not([role="columnheader"])': {
           "& > div:first-of-type": {
             marginRight: "auto"
-            // Alinea en dirección izquierda en el contenedor de la celda cuando es un formatter diferente a texto
           }
         }
       },
@@ -560,7 +553,6 @@ const dataGridStyles = {
         '&:not([role="columnheader"])': {
           "& > div:first-of-type": {
             margin: "0 auto"
-            // Alinea al centro en el contenedor de la celda cuando es un formatter diferente a texto
           }
         }
       },
@@ -570,7 +562,6 @@ const dataGridStyles = {
         '&:not([role="columnheader"])': {
           "& > div:first-of-type": {
             marginLeft: "auto"
-            // Alinea en dirección derecha en el contenedor de la celda cuando es un formatter diferente a texto
           }
         }
       },
@@ -584,7 +575,6 @@ const dataGridStyles = {
         textAlign: "right",
         paddingRight: theme.vars.size.baseSpacings.sp3
       },
-      // Estilado de la ultima celda congelada
       "& .rdg-row .rdg-cell-frozen-last:after": {
         borderRight: `0px solid transparent`
       },
@@ -598,7 +588,6 @@ const dataGridStyles = {
         zIndex: 1,
         left: "var(--rdg-cell-left, 0)"
       },
-      // Estilado de la ultima celda (Quitar la linea divisora derecha)
       "& .rdg-row :last-child:after": {
         borderRight: `0px solid`,
         borderColor: theme.vars.palette.background.surface
@@ -615,7 +604,6 @@ const dataGridStyles = {
           zIndex: 3
         }
       },
-      // Estilado de celdas de la cabecera
       "& .rdg-header-row .rdg-cell": {
         gridTemplateColumns: "auto",
         boxShadow: "unset!important",
@@ -631,7 +619,6 @@ const dataGridStyles = {
         '& [draggable="true"]': {
           fontSize: theme.typography.body
         },
-        // Ultima celda de la cebecera frozen
         "&.rdg-cell-frozen-last": {
           borderColor: theme.vars.palette.background.default,
           boxShadow: "var(--rdg-frozen-cell-box-shadow)"
@@ -646,10 +633,8 @@ 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",
@@ -658,19 +643,16 @@ const dataGridStyles = {
         insetBlockEnd: 0,
         inlineSize: "10px"
       },
-      // Estilado de la ultima celda Header
       "& .rdg-header-row :last-child.rdg-cell": {
         borderTopRightRadius: theme.vars.size.baseSpacings.sp0,
         "&:after": {
           borderRight: `${theme.vars.size.baseSpacings.sp0} solid transparent`
         }
       },
-      // filter
       "& .filter_cell_div": {
         paddingLeft: theme.vars.size.baseSpacings.sp2,
         paddingRight: theme.vars.size.baseSpacings.sp2
       },
-      //
       "& .rdg-header-sort-cell": {
         width: "100%",
         flexGrow: "1",
@@ -681,36 +663,63 @@ const dataGridStyles = {
     };
   },
   /**
-   * Estilos para el wrapper del CheckboxCellAdapter
-   * Aplica los mismos estilos que los checkboxes dentro de celdas rdg
+   * Estilos para el wrapper del checkbox en las celdas.
    */
-  checkboxCellWrapper: ({ theme, ownerState }) => ({
+  checkboxCellWrapper: ({ theme }) => ({
     "& .checkbox-checked": {
-      "& path:first-of-type": {
-        fill: theme.vars.palette.primary.main
-      },
-      ...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
-        minHeight: size,
-        height: size
-      }))
+      "& .M4LIcon-icon": {
+        backgroundColor: theme.vars.palette.primary.enabled
+      }
     },
     "& .checkbox-unChecked": {
-      "& path": {
-        fill: theme.vars.palette.text.primary
-      },
-      ...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
-        minHeight: size,
-        height: size
-      }))
+      "& .M4LIcon-icon": {
+        backgroundColor: theme.vars.palette.text.primary
+      }
     },
     "& .MuiCheckbox-root": {
+      overflow: "visible",
+      padding: 0,
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.small.action,
+        height: theme.vars.size.mobile.small.action
+      } : {
+        width: theme.vars.size.desktop.small.action,
+        height: theme.vars.size.desktop.small.action
+      },
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      borderRadius: theme.size.borderRadius.r1,
+      "&:hover": {
+        backgroundColor: theme.vars.palette.default.hoverOpacity
+      },
+      "&:active": {
+        backgroundColor: theme.vars.palette.default.activeOpacity
+      },
+      "&.Mui-checked": {
+        "&:hover": {
+          backgroundColor: theme.vars.palette.primary.hoverOpacity,
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette.primary.hover
+          }
+        },
+        "&:active": {
+          backgroundColor: theme.vars.palette.primary.activeOpacity,
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette.primary.active
+          }
+        }
+      },
+      "&.Mui-focusVisible, &:focus-visible": {
+        outline: `1px solid ${theme.vars.palette.primary.focusVisible}`
+      },
       "& > svg": {
         color: theme.vars.palette.text.secondary
       }
     }
   }),
   /**
-   * Contenedor de los cards
+   * Estilos para el contenedor de toggle de vista cards.
    */
   containerToggleCards: ({ theme }) => ({
     display: "grid",
@@ -719,7 +728,7 @@ const dataGridStyles = {
     padding: theme.vars.size.baseSpacings.sp3
   }),
   /**
-   * Botón de toggle de cards
+   * Estilos para el botón de toggle de tarjeta.
    */
   cardToggleCardButton: ({ theme, ownerState }) => ({
     display: "flex",
@@ -732,7 +741,7 @@ const dataGridStyles = {
     borderColor: ownerState?.isActive ? theme.vars.palette.primary.toneOpacity : theme.vars.palette.border.disabled
   }),
   /**
-   * Texto del botón de toggle de cards
+   * Estilos para el texto del botón de toggle.
    */
   textToggleCardButton: ({ theme, ownerState }) => ({
     "&.M4LTypography-root": {
@@ -741,17 +750,20 @@ const dataGridStyles = {
     }
   }),
   /**
-   * Contenedor de los cards
+   * Estilos para el contenedor de tarjetas en CardsView.
    */
   cardsContainer: () => ({
-    height: "auto",
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
+    minHeight: 0,
     overflow: "auto",
     "& > .M4LContainerFlow-root": {
       alignItems: "start"
     }
   }),
   /**
-   * Card de la vista cards
+   * Estilos para cada tarjeta individual en CardsView.
    */
   card: ({ theme, ownerState }) => ({
     display: "flex",
@@ -762,24 +774,18 @@ const dataGridStyles = {
     cursor: "pointer",
     padding: theme.vars.size.baseSpacings["sp2-5"],
     gap: "0 !important",
-    // Si está checked (pero no selected), border de checked
     ...ownerState?.checked && !ownerState?.selected && {
       borderColor: theme.vars.palette.primary.activeOpacity
     },
-    // Si está selected, usar el color original del Card (primary.enabled)
-    // Este tiene prioridad sobre checked
     ...ownerState?.selected && {
       borderColor: theme.vars.palette.primary.selected
     }
   }),
-  /**
-   * Contenedor del contenido de la card
-   */
   cardContentWrapper: () => ({
     width: "100%"
   }),
   /**
-   * Header de la card con checkbox y acciones
+   * Estilos para el header de la tarjeta.
    */
   cardHeader: ({ theme, ownerState }) => ({
     display: "flex",
@@ -790,14 +796,14 @@ const dataGridStyles = {
     gap: theme.vars.size.baseSpacings.sp2
   }),
   /**
-   * Lado izquierdo del header (checkbox)
+   * Estilos para la sección izquierda del header de tarjeta.
    */
   cardHeaderLeft: () => ({
     display: "flex",
     alignItems: "center"
   }),
   /**
-   * Lado derecho del header (botones de acción)
+   * Estilos para la sección derecha del header de tarjeta.
    */
   cardHeaderRight: ({ theme }) => ({
     display: "flex",
@@ -805,7 +811,7 @@ const dataGridStyles = {
     gap: theme.vars.size.baseSpacings["sp0-5"]
   }),
   /**
-   * Contenido de la card (body)
+   * Estilos para el contenido de la tarjeta.
    */
   cardContent: ({ theme }) => ({
     display: "flex",
@@ -814,7 +820,7 @@ const dataGridStyles = {
     padding: theme.vars.size.density.compact
   }),
   /**
-   * Contenedor de las columnas de la card
+   * Estilos para el contenedor de label y valor de columna.
    */
   containerLabelValueColumn: ({ theme, ownerState }) => ({
     display: "flex",
@@ -825,7 +831,7 @@ const dataGridStyles = {
     width: ownerState?.hasActions ? "100%" : "auto"
   }),
   /**
-   * Contenedor del contenido de la columna
+   * Estilos para el wrapper del contenido de columna.
    */
   contentWrapperColumn: ({ theme, ownerState }) => ({
     flex: ownerState?.hasActions ? 1 : "none",
@@ -835,7 +841,7 @@ const dataGridStyles = {
     gap: theme.vars.size.baseSpacings["sp0-5"]
   }),
   /**
-   * Contenedor del detalle de la card
+   * Estilos para el contenedor de detalle de tarjeta.
    */
   cardDetailContainer: ({ theme }) => ({
     display: "flex",
@@ -846,15 +852,15 @@ const dataGridStyles = {
     overflow: "auto"
   }),
   /**
-   * Etiqueta de la columna
+   * Estilos para el label del header de columna.
    */
   labelHeaderColumn: () => ({}),
   /**
-   * Valor de la columna
+   * Estilos para el valor de columna.
    */
   valueColumn: () => ({}),
   /**
-   * Contenedor del editor en la card
+   * Estilos para el wrapper del editor de celda.
    */
   editorCellWrapper: ({ theme, ownerState }) => ({
     overflow: "clip",
@@ -882,35 +888,56 @@ const dataGridStyles = {
       width: "100%",
       textAlign: "inherit",
       color: theme.vars.palette.text.secondary,
-      padding: `${theme.vars.size.baseSpacings.sp0} ${theme.vars.size.baseSpacings.sp2}`,
-      border: theme.vars.size.baseSpacings.sp0,
-      borderTop: "0.5px solid",
-      borderBottom: theme.vars.size.borderStroke.container,
-      borderLeft: "0.5px solid",
-      borderRight: "0.5px solid",
-      borderColor: "transparent",
+      padding: `${theme.vars.size.baseSpacings.sp0} ${theme.vars.size.baseSpacings.sp1}`,
+      border: `1px solid ${theme.vars.palette.border.secondary}`,
+      borderRadius: theme.vars.size.borderRadius["r1-5"],
+      outline: "none",
       ...theme.colorSchemes.finalTheme.typography.body,
+      ...getSizeStyles(theme, ownerState?.size || "medium", "case", (size) => ({
+        height: size
+      })),
       "&:focus": {
-        borderTop: "0.5px solid",
-        borderBottom: theme.vars.size.borderStroke.container,
-        borderLeft: "0.5px solid",
-        borderRight: "0.5px solid",
-        borderColor: `${theme.vars.palette.primary.focusVisible} !important`,
+        border: `1px solid ${theme.vars.palette.border.secondary}`,
         outline: "none",
         boxShadow: "none"
       },
       "&:hover": {
-        borderTop: "0.5px solid",
-        borderBottom: theme.vars.size.borderStroke.container,
-        borderLeft: "0.5px solid",
-        borderRight: "0.5px solid",
-        borderColor: "transparent",
+        border: `1px solid ${theme.vars.palette.border.secondary}`,
         outline: "none"
       }
     }
   }),
   /**
-   * Header de la card personalizada (avatar + nombre + email)
+   * Placeholder editable
+   */
+  editablePlaceholder: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp1
+  }),
+  /**
+   * EditLabel
+   */
+  editLabel: ({ theme, ownerState }) => ({
+    width: "auto",
+    opacity: 1,
+    transition: "opacity 0.3s ease",
+    ...getTypographyStyles(
+      theme.generalSettings.isMobile,
+      ownerState?.size || "medium",
+      "body"
+    )
+  }),
+  /**
+   * Botón para mostrar el input en los editores (cards)
+   */
+  iconButtonEdit: ({ theme }) => ({
+    "& .M4LIcon-icon": {
+      backgroundColor: `${theme.vars.palette.text.secondary} !important`
+    }
+  }),
+  /**
+   * Estilos para el header de tarjeta personalizada.
    */
   customCardHeader: ({ theme }) => ({
     display: "flex",
@@ -919,7 +946,7 @@ const dataGridStyles = {
     marginBottom: theme.vars.size.baseSpacings.sp2
   }),
   /**
-   * Avatar con iniciales
+   * Estilos para el avatar de tarjeta personalizada.
    */
   customCardAvatar: ({ theme }) => ({
     width: "32px",
@@ -933,7 +960,7 @@ const dataGridStyles = {
     flexShrink: 0
   }),
   /**
-   * Contenedor del nombre y email
+   * Estilos para nombre y email en tarjeta personalizada.
    */
   customCardNameEmail: ({ theme }) => ({
     display: "flex",
@@ -941,7 +968,7 @@ const dataGridStyles = {
     gap: theme.vars.size.baseSpacings["sp0-5"]
   }),
   /**
-   * Campo con icono (reutilizable para phone, IP, etc)
+   * Estilos para campo con icono en tarjeta personalizada.
    */
   customCardFieldWithIcon: ({ theme }) => ({
     display: "flex",
@@ -949,7 +976,7 @@ const dataGridStyles = {
     gap: theme.vars.size.baseSpacings.sp3
   }),
   /**
-   * Contenedor del contenido del campo (label + valor)
+   * Estilos para contenido de campo en tarjeta personalizada.
    */
   customCardFieldContent: ({ theme }) => ({
     display: "flex",
@@ -957,7 +984,7 @@ const dataGridStyles = {
     gap: theme.vars.size.baseSpacings["sp0-5"]
   }),
   /**
-   * Contenedor del icono con border
+   * Estilos para contenedor de icono en tarjeta personalizada.
    */
   customCardIconContainer: ({ theme }) => ({
     width: "24px",
@@ -971,7 +998,7 @@ const dataGridStyles = {
     flexShrink: 0
   }),
   /**
-   * Estilos para el header del componente
+   * Estilos para el contenedor raíz de las cabeceras arrastrables
    */
   draggableHeaderRoot: () => ({
     cursor: "move",
@@ -982,12 +1009,9 @@ const dataGridStyles = {
     width: "100%",
     justifyContent: "center"
   }),
-  /**
-   * Estilos para el icono de busqueda para los campos de ordenamiento en columnas
-   */
   iconSearch: {},
   /**
-   * Estilos para el contenedor del input de header
+   * Estilos para el wrapper del input en cabeceras arrastrables
    */
   draggableWrapperInputBase: ({ theme, ownerState }) => ({
     borderTop: "1px solid var(--rdg-border-color)",
@@ -1005,7 +1029,7 @@ const dataGridStyles = {
     }))
   }),
   /**
-   * Estilos de los inputs del header para el filtro
+   * Estilos base para el input del header
    */
   headerInputBase: () => ({
     width: "100%",
@@ -1013,7 +1037,7 @@ const dataGridStyles = {
     backgroundColor: "unset"
   }),
   /**
-   * Estilos para el contenedor del skeleton de los formatter
+   * Estilos para el contenedor del skeleton de carga
    */
   wrapperSkeleton: ({ theme, ownerState }) => ({
     display: "flex",
@@ -1028,7 +1052,7 @@ const dataGridStyles = {
     }
   }),
   /**
-   * Estilos para el contenedor del cuerpo del modal de configuración
+   * Estilos para el contenido del modal de configuración
    */
   contentModalSetting: () => ({
     "&": {
@@ -1038,7 +1062,7 @@ const dataGridStyles = {
     }
   }),
   /**
-   * Estilos para el contenedor del nombre de la columna y el icono de sort
+   * Estilos para el contenedor de nombre de columna con icono
    */
   nameColumnIcon: ({ theme }) => ({
     display: "flex",
@@ -1048,7 +1072,7 @@ const dataGridStyles = {
     overflow: "visible"
   }),
   /**
-   * Estilos para el contenedor del nombre de la columna
+   * Estilos para el nombre de columna con truncado de texto
    */
   nameColumn: ({ ownerState }) => ({
     display: "-webkit-box",
@@ -1061,21 +1085,18 @@ const dataGridStyles = {
     width: "100%"
   }),
   /**
-   * Estilos para el contenedor del icono de la columna
+   * Estilos para el contenedor de icono de columna
    */
   iconColumn: ({ theme }) => ({
     display: "flex",
     alignItems: "center",
     gap: theme.vars.size.baseSpacings.sp1
   }),
-  /**
-   * Estilos para el popover del header actions
-   */
   headerRenderClick: () => ({
     width: "fit-content"
   }),
   /**
-   * Estilos para el menuList del header actions
+   * Estilos para la lista del menú de opciones
    */
   menuList: ({ theme }) => ({
     padding: theme.vars.size.baseSpacings.sp3,
@@ -1088,7 +1109,7 @@ const dataGridStyles = {
     }
   }),
   /**
-   * Estilos para el contenedor del boton de acciones del header
+   * Estilos para el botón de acciones del header
    */
   buttonHeaderActions: ({ theme }) => ({
     display: "flex",
@@ -1110,7 +1131,7 @@ const dataGridStyles = {
     }
   }),
   /**
-   * Estilos para el formatter de iconos
+   * Estilos para el formateador de iconos de columna
    */
   columnIconFormatter: ({ theme }) => ({
     display: "flex",