@m4l/components 9.3.34-BE20251127-beta.1 → 9.3.34-JT20251210-beta.1

package/components/DataGrid/Datagrid.styles.js

@@ -24,6 +24,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
       }
@@ -212,7 +248,7 @@ const dataGridStyles = {
    * Estilos el el input editor del DataGrid.
    * *****************************************
    */
-  inputTexEditor: ({ theme }) => ({
+  inputTexEditor: ({ theme, ownerState }) => ({
     appearance: "none",
     boxSizing: "border-box",
     inlineSize: "100%",
@@ -222,13 +258,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": {
@@ -270,6 +312,7 @@ const dataGridStyles = {
       border: theme.vars.size.borderStroke.container,
       borderColor: theme.vars.palette?.border.secondary,
       "& .rdg ": {
+        scrollBehavior: "smooth",
         display: "grid",
         contain: "content",
         boxSizing: "border-box",
@@ -316,7 +359,14 @@ const dataGridStyles = {
       },
       '& [role="columnheader"]': {
         paddingTop: theme.vars.size.baseSpacings.sp2,
-        paddingBottom: theme.vars.size.baseSpacings.sp2
+        paddingBottom: theme.vars.size.baseSpacings.sp2,
+        "& .MuiInputBase-input": {
+          ...getTypographyStyles(
+            theme.generalSettings.isMobile,
+            ownerState?.size || "medium",
+            "body"
+          )
+        }
       },
       '& [role="grid"]': {
         '& [aria-rowindex="1"].rdg-row .rdg-cell:last-child': {
@@ -377,42 +427,28 @@ const dataGridStyles = {
         ),
         lineHeight: "var(--rdg-row-height)!important",
         '&[aria-selected="true"]': {
-          outline: `2px solid var(--rdg-selection-color)`,
-          outlineOffset: "-2px"
+          // outline: `2px solid var(--rdg-selection-color)`,
+          // outlineOffset: '-2px',
+        },
+        "&: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",
           color: theme.vars.palette.text.secondary,
           padding: `${theme.vars.size.baseSpacings.sp0} ${theme.vars.size.baseSpacings.sp2}`,
-          border: theme.vars.size.baseSpacings.sp0,
+          // 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,
@@ -420,9 +456,13 @@ const dataGridStyles = {
           //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`,
+          borderColor: `${theme.vars.palette?.border.secondary} !important`,
           ...theme.colorSchemes.finalTheme.typography.body
         },
+        "&:has(> .M4LRadio-root)": {
+          overflow: "visible",
+          paddingInline: 0
+        },
         "&.rdg-cell-frozen": {
           display: "flex",
           boxShadow: "unset",
@@ -522,12 +562,12 @@ const dataGridStyles = {
         //Se utiliza directamente el valor porque no está tokenizado
       },
       "&&& [aria-selected=true]": {
-        backgroundColor: theme.vars.palette.primary?.toneOpacity,
-        color: theme.vars.palette.text.primary,
+        // 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
+        // outline: theme.vars.size.borderStroke.container,
+        // outlineOffset: '-1px',
+        // outlineColor: theme.vars.palette.border.main,
       },
       // Alineaciones
       "& .rdg-cell.rdg-cell-align-left": {
@@ -672,26 +712,54 @@ const dataGridStyles = {
    * Estilos para el wrapper del CheckboxCellAdapter
    * Aplica los mismos estilos que los checkboxes dentro de celdas rdg
    */
-  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
       }
@@ -732,8 +800,14 @@ const dataGridStyles = {
    * Contenedor de los cards
    */
   cardsContainer: () => ({
-    height: "auto",
-    overflow: "auto"
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
+    minHeight: 0,
+    overflow: "auto",
+    "& > .M4LContainerFlow-root": {
+      alignItems: "start"
+    }
   }),
   /**
    * Card de la vista cards
@@ -745,6 +819,8 @@ const dataGridStyles = {
     minWidth: "280px",
     maxWidth: "580px",
     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
@@ -785,7 +861,7 @@ const dataGridStyles = {
   cardHeaderRight: ({ theme }) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.vars.size.baseSpacings.sp1
+    gap: theme.vars.size.baseSpacings["sp0-5"]
   }),
   /**
    * Contenido de la card (body)
@@ -865,33 +941,54 @@ 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"
       }
     }
   }),
+  /**
+   * 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`
+    }
+  }),
   /**
    * Header de la card personalizada (avatar + nombre + email)
    */

package/components/DataGrid/constants.d.ts

@@ -52,3 +52,16 @@ export declare const DATAGRID_ROW_HEIGHTS_CONFORTABLE: number[];
  * Densidad confortable
  */
 export declare const DATAGRID_DENSITIES_CONFORTABLE: DataGridDensityConfig;
+/**
+ * Constantes para el cálculo de altura de cards
+ */
+export declare const CARD_HEIGHT: {
+    /** Altura del CardHeader (checkbox + iconos de acción) */
+    HEADER: number;
+    /** Altura por columna (label + value) */
+    COLUMN: number;
+    /** Padding vertical total (arriba + abajo) */
+    PADDING_VERTICAL: number;
+    /** Altura mínima base */
+    BASE_MIN: number;
+};

package/components/DataGrid/constants.js

@@ -28,7 +28,18 @@ var DATAGRID_SEMANTIC_WIDTHS = /* @__PURE__ */ ((DATAGRID_SEMANTIC_WIDTHS2) => {
 })(DATAGRID_SEMANTIC_WIDTHS || {});
 const DATAGRID_ROW_HEADER_HEIGHTS = [32, 40, 48];
 const DATAGRID_ROW_HEIGHTS = [32, 40, 48];
+const CARD_HEIGHT = {
+  /** Altura del CardHeader (checkbox + iconos de acción) */
+  HEADER: 42,
+  /** Altura por columna (label + value) */
+  COLUMN: 32,
+  /** Padding vertical total (arriba + abajo) */
+  PADDING_VERTICAL: 40,
+  /** Altura mínima base */
+  BASE_MIN: 120
+};
 export {
+  CARD_HEIGHT as C,
   DATAGRID_PREFIX_NAME as D,
   TEST_SKELETON as T,
   DATAGRID_ROW_HEIGHTS as a,