@m4l/components 9.3.21-JAEBeta.2 → 9.3.21-JT20102025.beta.1

package/components/DataGrid/DataGrid.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { T as Table } from "./subcomponents/Table/index.js";
 import { H as HeaderActions } from "./subcomponents/HeaderActions/index.js";
 import { F as FilterProvider } from "./contexts/FilterContext/index.js";
 import { D as DataGridProvider } from "./contexts/DataGridContext/index.js";
@@ -12,6 +11,7 @@ import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { useRef } from "react";
 import { C as ControlNavigate } from "./subcomponents/ControlNavigate/ControlNavigate.js";
 import { useModuleSkeleton } from "@m4l/core";
+import { R as RenderContent } from "./subcomponents/RenderContent/index.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
 function DataGrid(props) {
   const {
@@ -37,7 +37,9 @@ function DataGrid(props) {
     onChangeUserColumns,
     size,
     externalSortSettings,
-    externalFilterSettings
+    externalFilterSettings,
+    defaultViewMode,
+    cardsViewConfig
   } = props;
   const {
     withSettings,
@@ -91,6 +93,8 @@ function DataGrid(props) {
           size: currentSize,
           externalSortSettings,
           externalFilterSettings,
+          defaultViewMode,
+          cardsViewConfig,
           children: /* @__PURE__ */ jsxs(FilterProvider, { initialActiveFilters: false, children: [
             withActions && actionsProps && /* @__PURE__ */ jsx(
               HeaderActions,
@@ -108,7 +112,7 @@ function DataGrid(props) {
             ),
             CustomHeader ? /* @__PURE__ */ jsx(CustomHeaderStyled, { ownerState, children: CustomHeader }) : null,
             /* @__PURE__ */ jsx(
-              Table,
+              RenderContent,
               {
                 id,
                 withActions,
@@ -117,7 +121,8 @@ function DataGrid(props) {
                 selectedRows,
                 onSelectedRowsChange,
                 rowKeyGetter,
-                onRowsChange
+                onRowsChange,
+                cardsViewConfig
               }
             ),
             withPager && /* @__PURE__ */ jsx(

package/components/DataGrid/Datagrid.styles.js

@@ -639,6 +639,276 @@ const dataGridStyles = {
       }
     };
   },
+  /**
+   * Estilos para el wrapper del CheckboxCellAdapter
+   * Aplica los mismos estilos que los checkboxes dentro de celdas rdg
+   */
+  checkboxCellWrapper: ({ theme, ownerState }) => ({
+    "& .checkbox-checked": {
+      "& path:first-of-type": {
+        fill: theme.vars.palette.primary.main
+      },
+      ...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
+        minHeight: size,
+        height: size
+      }))
+    },
+    "& .checkbox-unChecked": {
+      "& path": {
+        fill: theme.vars.palette.text.primary
+      },
+      ...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
+        minHeight: size,
+        height: size
+      }))
+    },
+    "& .MuiCheckbox-root": {
+      "& > svg": {
+        color: theme.vars.palette.text.secondary
+      }
+    }
+  }),
+  /**
+   * Contenedor de los cards
+   */
+  containerToggleCards: ({ theme }) => ({
+    display: "grid",
+    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+    gap: theme.vars.size.baseSpacings.sp3,
+    padding: theme.vars.size.baseSpacings.sp3
+  }),
+  /**
+   * Botón de toggle de cards
+   */
+  cardToggleCardButton: ({ theme, ownerState }) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    cursor: "pointer",
+    height: theme.vars.size.baseSpacings.sp14,
+    width: theme.vars.size.baseSpacings.sp14,
+    gap: theme.vars.size.baseSpacings.sp2,
+    borderColor: ownerState?.isActive ? theme.vars.palette.primary.toneOpacity : theme.vars.palette.border.disabled
+  }),
+  /**
+   * Texto del botón de toggle de cards
+   */
+  textToggleCardButton: ({ theme, ownerState }) => ({
+    "&.M4LTypography-root": {
+      color: ownerState?.isActive ? theme.vars.palette.primary.semanticText : theme.vars.palette.text.secondary,
+      cursor: "pointer"
+    }
+  }),
+  /**
+   * Contenedor de los cards
+   */
+  cardsContainer: () => ({
+    height: "auto",
+    overflow: "auto"
+  }),
+  /**
+   * Card de la vista cards
+   */
+  card: ({ theme, ownerState }) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "start",
+    minWidth: "280px",
+    maxWidth: "580px",
+    cursor: "pointer",
+    // 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
+    }
+  }),
+  /**
+   * Header de la card con checkbox y acciones
+   */
+  cardHeader: ({ theme }) => ({
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
+    height: "24px",
+    gap: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * Lado izquierdo del header (checkbox)
+   */
+  cardHeaderLeft: () => ({
+    display: "flex",
+    alignItems: "center"
+  }),
+  /**
+   * Lado derecho del header (botones de acción)
+   */
+  cardHeaderRight: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp1
+  }),
+  /**
+   * Contenedor de las columnas de la card
+   */
+  containerLabelValueColumn: ({ theme, ownerState }) => ({
+    display: "flex",
+    flexDirection: ownerState?.hasActions ? "row" : "column",
+    justifyContent: ownerState?.hasActions ? "space-between" : "flex-start",
+    alignItems: ownerState?.hasActions ? "center" : "start",
+    gap: theme.vars.size.baseSpacings["sp0-5"],
+    width: ownerState?.hasActions ? "100%" : "auto"
+  }),
+  /**
+   * Contenedor del contenido de la columna
+   */
+  contentWrapperColumn: ({ theme, ownerState }) => ({
+    flex: ownerState?.hasActions ? 1 : "none",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "start",
+    gap: theme.vars.size.baseSpacings["sp0-5"]
+  }),
+  /**
+   * Contenedor del detalle de la card
+   */
+  cardDetailContainer: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp3,
+    padding: theme.vars.size.baseSpacings.sp3,
+    height: "100%",
+    overflow: "auto"
+  }),
+  /**
+   * Etiqueta de la columna
+   */
+  labelHeaderColumn: () => ({}),
+  /**
+   * Valor de la columna
+   */
+  valueColumn: () => ({}),
+  /**
+   * Contenedor del editor en la card
+   */
+  editorCellWrapper: ({ theme, ownerState }) => ({
+    overflow: "clip",
+    outline: "none",
+    color: theme.vars.palette.text.primary,
+    paddingBlock: 0,
+    alignContent: "center",
+    backgroundColor: "inherit",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    inlineSize: "100%",
+    alignSelf: "stretch",
+    boxSizing: "border-box",
+    ...getTypographyStyles(
+      theme.generalSettings.isMobile,
+      ownerState?.size || "medium",
+      "body"
+    ),
+    ...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
+      minHeight: size,
+      height: 24,
+      lineHeight: `${size} !important`
+    })),
+    "& input": {
+      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",
+      ...theme.colorSchemes.finalTheme.typography.body,
+      "&: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`,
+        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",
+        outline: "none"
+      }
+    }
+  }),
+  /**
+   * Header de la card personalizada (avatar + nombre + email)
+   */
+  customCardHeader: ({ theme }) => ({
+    display: "flex",
+    gap: theme.vars.size.baseSpacings.sp4,
+    alignItems: "center",
+    marginBottom: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * Avatar con iniciales
+   */
+  customCardAvatar: ({ theme }) => ({
+    width: "32px",
+    height: "32px",
+    borderRadius: theme.vars.size.borderRadius.r3,
+    border: theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette.primary.toneOpacity,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  }),
+  /**
+   * Contenedor del nombre y email
+   */
+  customCardNameEmail: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings["sp0-5"]
+  }),
+  /**
+   * Campo con icono (reutilizable para phone, IP, etc)
+   */
+  customCardFieldWithIcon: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp3
+  }),
+  /**
+   * Contenedor del contenido del campo (label + valor)
+   */
+  customCardFieldContent: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings["sp0-5"]
+  }),
+  /**
+   * Contenedor del icono con border
+   */
+  customCardIconContainer: ({ theme }) => ({
+    width: "24px",
+    height: "24px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.vars.size.borderRadius.r2,
+    border: theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette.primary.toneOpacity,
+    flexShrink: 0
+  }),
   /**
    * Estilos para el header del componente
    */

package/components/DataGrid/constants.js

@@ -35,7 +35,7 @@ export {
   DATAGRID_ROW_HEADER_HEIGHTS as b,
   DATAGRID_ID_DICTIONARY as c,
   DATAGRID_SELECT_COLUMN_KEY as d,
-  DATAGRID_SEMANTIC_WIDTHS as e,
-  DATAGRID_ACTIONS_COLUMN_KEY as f,
+  DATAGRID_ACTIONS_COLUMN_KEY as e,
+  DATAGRID_SEMANTIC_WIDTHS as f,
   DATAGRID_HEADER_RENDER_CLICK_KEY as g
 };