@m4l/components 9.3.29-JT19112025.beta.6 → 9.3.30-BE211125-beta.1

package/components/AppBar/styles.js

@@ -8,7 +8,7 @@ const appBarStyles = {
     display: "flex",
     flexDirection: "row",
     flexWrap: "nowrap",
-    alignItems: theme.generalSettings.isMobile ? "center" : "initial",
+    alignItems: "center",
     height: theme.vars.size.baseSpacings.sp12,
     minHeight: theme.vars.size.baseSpacings.sp12,
     padding: `0 ${theme.generalSettings.isMobile ? theme.vars.size.baseSpacings.sp2 : theme.vars.size.baseSpacings.sp4}`,

package/components/Card/Card.styles.js

@@ -17,7 +17,7 @@ const cardStyles = {
       width: "100%",
       outline: "unset!important",
       borderRadius: theme.vars.size.borderRadius.r2,
-      backgroundColor: theme.palette.background.paper,
+      backgroundColor: theme.vars.palette.background.default,
       height: ownerState?.height ?? "auto",
       minHeight: ownerState?.height ?? "auto",
       maxHeight: ownerState?.height ?? "auto",

package/components/DataGrid/Datagrid.styles.js

@@ -24,42 +24,6 @@ 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,
-          "& .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
       }
@@ -416,19 +380,33 @@ const dataGridStyles = {
           outline: `2px solid var(--rdg-selection-color)`,
           outlineOffset: "-2px"
         },
-        "&:has(> .MuiCheckbox-root)": {
-          overflow: "visible",
-          paddingInline: 0
-        },
         "& .checkbox-checked": {
-          "& .M4LIcon-icon": {
-            backgroundColor: theme.vars.palette.primary.enabled
-          }
+          "& path:first-of-type": {
+            fill: theme.vars.palette.primary.main
+          },
+          ...getSizeStyles(
+            theme,
+            ownerState?.size || "medium",
+            "base",
+            (size) => ({
+              minHeight: size,
+              height: size
+            })
+          )
         },
         "& .checkbox-unChecked": {
-          "& .M4LIcon-icon": {
-            backgroundColor: theme.vars.palette.text.primary
-          }
+          "& path": {
+            fill: theme.vars.palette.text.primary
+          },
+          ...getSizeStyles(
+            theme,
+            ownerState?.size || "medium",
+            "base",
+            (size) => ({
+              minHeight: size,
+              height: size
+            })
+          )
         },
         "& .rdg-text-editor": {
           textAlign: "inherit",
@@ -694,54 +672,26 @@ const dataGridStyles = {
    * Estilos para el wrapper del CheckboxCellAdapter
    * Aplica los mismos estilos que los checkboxes dentro de celdas rdg
    */
-  checkboxCellWrapper: ({ theme }) => ({
+  checkboxCellWrapper: ({ theme, ownerState }) => ({
     "& .checkbox-checked": {
-      "& .M4LIcon-icon": {
-        backgroundColor: theme.vars.palette.primary.enabled
-      }
+      "& path:first-of-type": {
+        fill: theme.vars.palette.primary.main
+      },
+      ...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
+        minHeight: size,
+        height: size
+      }))
     },
     "& .checkbox-unChecked": {
-      "& .M4LIcon-icon": {
-        backgroundColor: theme.vars.palette.text.primary
-      }
+      "& path": {
+        fill: theme.vars.palette.text.primary
+      },
+      ...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
+        minHeight: size,
+        height: size
+      }))
     },
     "& .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
       }
@@ -942,28 +892,6 @@ const dataGridStyles = {
       }
     }
   }),
-  /**
-   * Placeholder editable
-   */
-  editablePlaceholder: ({ theme }) => ({
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(1)
-  }),
-  /**
-   * EditLabel
-   */
-  editLabel: ({ theme, ownerState }) => ({
-    width: "auto",
-    opacity: 1,
-    transition: "opacity 0.3s ease",
-    ...getTypographyStyles(
-      theme.generalSettings.isMobile,
-      ownerState?.size || "medium",
-      "body"
-    )
-  }),
-  iconButtonEdit: () => ({}),
   /**
    * Header de la card personalizada (avatar + nombre + email)
    */

package/components/DataGrid/dictionary.d.ts

@@ -38,5 +38,4 @@ export declare const DICTIONARY: {
     VIEW_MODE_CARDS: string;
     TOOLTIP_VIEW_MODE: string;
     DETAILS: string;
-    EDIT_PLACEHOLDER: string;
 };

package/components/DataGrid/dictionary.js

@@ -37,8 +37,7 @@ const DICTIONARY = {
   VIEW_MODE_TABLE: `${DATAGRID_ID_DICTIONARY}.view_mode_table`,
   VIEW_MODE_CARDS: `${DATAGRID_ID_DICTIONARY}.view_mode_cards`,
   TOOLTIP_VIEW_MODE: `${DATAGRID_ID_DICTIONARY}.tooltip_view_mode`,
-  DETAILS: `${DATAGRID_ID_DICTIONARY}.details`,
-  EDIT_PLACEHOLDER: `${DATAGRID_ID_DICTIONARY}.edit_placeholder`
+  DETAILS: `${DATAGRID_ID_DICTIONARY}.details`
 };
 export {
   DICTIONARY as D,

package/components/DataGrid/formatters/ColumnIconFormatter/constants.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Clave única para identificar el componente IconAction en el sistema
+ */
+export declare const COLUMN_ICON_KEY_COMPONENT = "M4LColumnIconFormatter";

package/components/DataGrid/hooks/useModalCardDetail.d.ts

@@ -3,4 +3,4 @@ import { UseModalDetailProps } from '../types';
  * Hook que renderiza el modal de detalle para cualquier vista
  * mostrando TODAS las columnas sin excepción
  */
-export declare const useModalDetail: <TRow>({ columns, viewMode, onRowsChange, rows, }: UseModalDetailProps<TRow>) => (row: TRow) => void;
+export declare const useModalDetail: <TRow>({ columns, viewMode, onRowsChange, }: UseModalDetailProps<TRow>) => (row: TRow) => void;

package/components/DataGrid/hooks/useModalCardDetail.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { useIsMobile } from "@m4l/graphics";
-import { useRef, useEffect, useCallback } from "react";
+import { useCallback } from "react";
 import { u as useModal } from "../../../hooks/useModal/index.js";
 import { a as ContentModalSettingStyled, D as DataGridRootStyled } from "../slots/DataGridSlot.js";
 import { p as pathIcons } from "../icons.js";
@@ -14,22 +14,16 @@ import { A as ActionCancel } from "../../CommonActions/components/ActionCancel/A
 const useModalDetail = ({
   columns,
   viewMode,
-  onRowsChange,
-  rows
+  onRowsChange
 }) => {
   const { getConfigColumns, size } = useDataGrid();
   const { openModal, closeModal } = useModal();
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
   const isMobile = useIsMobile();
-  const rowsRef = useRef(rows);
-  useEffect(() => {
-    rowsRef.current = rows;
-  }, [rows]);
   const handleOpenDetail = useCallback(
     (row) => {
       const viewColumnsConfig = getConfigColumns(viewMode);
-      const rowIndex = rowsRef.current.findIndex((r) => r === row);
       openModal({
         initialWidth: 500,
         initialHeight: 680,
@@ -48,8 +42,6 @@ const useModalDetail = ({
                 CardDetails,
                 {
                   row,
-                  rows: rowsRef.current,
-                  rowIndex,
                   columns,
                   viewColumnsConfig,
                   onRowsChange,

package/components/DataGrid/icons.d.ts

@@ -27,5 +27,4 @@ export declare const pathIcons: {
     mail: string;
     smartphone: string;
     internet: string;
-    edit: string;
 };

package/components/DataGrid/icons.js

@@ -23,8 +23,7 @@ const pathIcons = {
   viewTable: "frontend/components/data_grid/assets/icons/table.svg",
   viewCards: "frontend/components/data_grid/assets/icons/card.svg",
   info: "frontend/components/data_grid/assets/icons/info.svg",
-  expanded: "frontend/components/data_grid/assets/icons/expanded.svg",
-  edit: "frontend/components/EditLabel/assets/icons/pencil.svg"
+  expanded: "frontend/components/data_grid/assets/icons/expanded.svg"
 };
 export {
   pathIcons as p

package/components/DataGrid/slots/DataGridEnum.d.ts

@@ -50,10 +50,7 @@ export declare enum TableSlots {
     customCardFieldContent = "customCardFieldContent",
     customCardIconContainer = "customCardIconContainer",
     checkboxCellWrapper = "checkboxCellWrapper",
-    editorCellWrapper = "editorCellWrapper",
-    editablePlaceholder = "editablePlaceholder",
-    editLabel = "editLabel",
-    iconButtonEdit = "iconButtonEdit"
+    editorCellWrapper = "editorCellWrapper"
 }
 export declare enum TextEditorSlots {
     inputTexEditor = "inputTexEditor"

package/components/DataGrid/slots/DataGridEnum.js

@@ -54,9 +54,6 @@ var TableSlots = /* @__PURE__ */ ((TableSlots2) => {
   TableSlots2["customCardIconContainer"] = "customCardIconContainer";
   TableSlots2["checkboxCellWrapper"] = "checkboxCellWrapper";
   TableSlots2["editorCellWrapper"] = "editorCellWrapper";
-  TableSlots2["editablePlaceholder"] = "editablePlaceholder";
-  TableSlots2["editLabel"] = "editLabel";
-  TableSlots2["iconButtonEdit"] = "iconButtonEdit";
   return TableSlots2;
 })(TableSlots || {});
 var TextEditorSlots = /* @__PURE__ */ ((TextEditorSlots2) => {

package/components/DataGrid/slots/DataGridSlot.d.ts

@@ -76,9 +76,6 @@ export declare const ButtonHeaderActionsStyled: import('@emotion/styled').Styled
 export declare const NameColumnIconStyled: 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 IconColumnStyled: 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 NameColumnStyled: 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 EditablePlaceholderStyled: 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 EditLabelStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
-export declare const IconButtonEditStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
 /**
  * ****************
  * Slots TextEditor

package/components/DataGrid/slots/DataGridSlot.js

@@ -6,7 +6,6 @@ import { d as dataGridStyles } from "../Datagrid.styles.js";
 import { I as Icon } from "../../Icon/Icon.js";
 import { C as Card } from "../../Card/Card.js";
 import { T as Typography } from "../../mui_extended/Typography/Typography.js";
-import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
 const DataGridRootStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: DataGridSlots.datagridRoot
@@ -207,18 +206,6 @@ const NameColumnStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: TableSlots.nameColumn
 })(dataGridStyles.nameColumn);
-const EditablePlaceholderStyled = styled("div", {
-  name: DATAGRID_PREFIX_NAME,
-  slot: TableSlots.editablePlaceholder
-})(dataGridStyles.editablePlaceholder);
-styled(Typography, {
-  name: DATAGRID_PREFIX_NAME,
-  slot: TableSlots.editLabel
-})(dataGridStyles.editLabel);
-const IconButtonEditStyled = styled(IconButton, {
-  name: DATAGRID_PREFIX_NAME,
-  slot: TableSlots.iconButtonEdit
-})(dataGridStyles.iconButtonEdit);
 const InputTextEditorStyled = styled("input", {
   name: DATAGRID_PREFIX_NAME,
   slot: TextEditorSlots.inputTexEditor
@@ -233,51 +220,49 @@ styled("div", {
 })(dataGridStyles.columnIconFormatter);
 export {
   ActionsRootStyled as A,
-  TableContainerStyled as B,
+  NameColumnStyled as B,
   CustomHeaderStyled as C,
   DataGridRootStyled as D,
   EditorCellWrapperStyled as E,
-  NameColumnStyled as F,
-  IconColumnStyled as G,
-  DraggableHeaderRootStyled as H,
-  IconButtonEditStyled as I,
-  ButtonHeaderActionsStyled as J,
-  DraggableWrapperInputBaseStyled as K,
+  DraggableHeaderRootStyled as F,
+  ButtonHeaderActionsStyled as G,
+  DraggableWrapperInputBaseStyled as H,
+  IconColumnStyled as I,
+  IconSearchStyled as J,
+  HeaderInputBaseStyled as K,
   LabelHeaderColumnStyled as L,
-  IconSearchStyled as M,
+  MenuListStyled as M,
   NameColumnIconStyled as N,
-  HeaderInputBaseStyled as O,
-  MenuListStyled as P,
-  HeaderRenderClickStyled as Q,
+  HeaderRenderClickStyled as O,
+  InputTextEditorStyled as P,
   RowsCountRootStyled as R,
-  InputTextEditorStyled as S,
   TableWrapperDataGridStyled as T,
   ValueColumnStyled as V,
   WrapperSkeletonStyled as W,
   ContentModalSettingStyled as a,
   ContainerLabelValueColumnStyled as b,
   ContentWrapperColumnStyled as c,
-  EditablePlaceholderStyled as d,
-  CardsContainerStyled as e,
-  CardDetailContainerStyled as f,
-  CardHeaderStyled as g,
-  CardHeaderLeftStyled as h,
-  CardHeaderRightStyled as i,
-  CardContentWrapperStyled as j,
-  CardContentStyled as k,
-  CardStyled as l,
-  CheckboxCellWrapperStyled as m,
-  ControlNavigateStyled as n,
-  ActionsConfigContainerStyled as o,
-  ContainerLeftActionsStyled as p,
-  ContainerRightActionsStyled as q,
-  RowsCountLabelStyled as r,
-  RowsCountValueStyled as s,
-  ColumnsConfigWrapperStyled as t,
-  ColumnsConfigDataGridStyled as u,
-  ColumnsConfigSelColumnsStyled as v,
-  ColumnsConfigActiosStyled as w,
-  ContainerToggleCardsStyled as x,
-  CardToggleButtonStyled as y,
-  TextToggleCardButtonStyled as z
+  CardsContainerStyled as d,
+  CardDetailContainerStyled as e,
+  CardHeaderStyled as f,
+  CardHeaderLeftStyled as g,
+  CardHeaderRightStyled as h,
+  CardContentWrapperStyled as i,
+  CardContentStyled as j,
+  CardStyled as k,
+  CheckboxCellWrapperStyled as l,
+  ControlNavigateStyled as m,
+  ActionsConfigContainerStyled as n,
+  ContainerLeftActionsStyled as o,
+  ContainerRightActionsStyled as p,
+  RowsCountLabelStyled as q,
+  RowsCountValueStyled as r,
+  ColumnsConfigWrapperStyled as s,
+  ColumnsConfigDataGridStyled as t,
+  ColumnsConfigSelColumnsStyled as u,
+  ColumnsConfigActiosStyled as v,
+  ContainerToggleCardsStyled as w,
+  CardToggleButtonStyled as x,
+  TextToggleCardButtonStyled as y,
+  TableContainerStyled as z
 };

package/components/DataGrid/subcomponents/Cards/hooks/useCardContent.d.ts

@@ -2,7 +2,7 @@ import { CardContentProps } from '../../../types';
 /**
  * Hook que encapsula toda la lógica de renderizado del contenido de una Card
  */
-export declare function useCardContent<TRow>({ row, rows, rowIndex, columns, onRowsChange, }: CardContentProps<TRow>): {
+export declare function useCardContent<TRow>({ row, columns, onRowsChange, }: CardContentProps<TRow>): {
     cardContent: import("react/jsx-runtime").JSX.Element[];
     columnsCount: number;
 };

package/components/DataGrid/subcomponents/Cards/hooks/useCardContent.js

@@ -1,22 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
-import { b as ContainerLabelValueColumnStyled, c as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, d as EditablePlaceholderStyled, I as IconButtonEditStyled } from "../../../slots/DataGridSlot.js";
-import { D as DICTIONARY } from "../../../dictionary.js";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { p as pathIcons } from "../../../icons.js";
-import { u as useComponentSize } from "../../../../../hooks/useComponentSize/useComponentSize.js";
+import { b as ContainerLabelValueColumnStyled, c as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled } from "../../../slots/DataGridSlot.js";
 function useCardContent({
   row,
-  rows,
-  rowIndex,
   columns,
   onRowsChange
 }) {
   const { getConfigColumns, size } = useDataGrid();
-  const { getLabel } = useModuleDictionary();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { currentSize } = useComponentSize(size);
   const [editingColumnKey, setEditingColumnKey] = useState(null);
   const columnsConfig = getConfigColumns("cards");
   const cardContent = columns.map((column, index) => {
@@ -43,11 +34,8 @@ function useCardContent({
                  */
                 onRowChange: (updatedRow) => {
                   if (onRowsChange) {
-                    const updatedRows = rows.map(
-                      (r, i) => i === rowIndex ? updatedRow : r
-                    );
-                    onRowsChange(updatedRows, {
-                      indexes: [rowIndex],
+                    onRowsChange([updatedRow], {
+                      indexes: [index],
                       column
                     });
                   }
@@ -67,11 +55,8 @@ function useCardContent({
                  */
                 onRowChange: (updatedRow) => {
                   if (onRowsChange) {
-                    const updatedRows = rows.map(
-                      (r, i) => i === rowIndex ? updatedRow : r
-                    );
-                    onRowsChange(updatedRows, {
-                      indexes: [rowIndex],
+                    onRowsChange([updatedRow], {
+                      indexes: [index],
                       column
                     });
                   }
@@ -79,33 +64,6 @@ function useCardContent({
               });
               return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: cellContent });
             }
-            const rawValue = row[column.key];
-            const isEmpty = rawValue === null || rawValue === void 0 || rawValue === "";
-            const isEditable = !!column.renderEditCell;
-            if (isEditable) {
-              return /* @__PURE__ */ jsxs(EditablePlaceholderStyled, { children: [
-                /* @__PURE__ */ jsx(
-                  ValueColumnStyled,
-                  {
-                    variant: "body",
-                    color: isEmpty ? "text.secondary" : "text.primary",
-                    children: isEmpty ? getLabel(DICTIONARY.EDIT_PLACEHOLDER) : rawValue
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  IconButtonEditStyled,
-                  {
-                    src: `${host_static_assets}/${environment_assets}/${pathIcons.edit}`,
-                    onClick: () => {
-                      setEditingColumnKey(column.key);
-                    },
-                    size: currentSize,
-                    role: "button",
-                    "aria-label": "Editar texto"
-                  }
-                )
-              ] });
-            }
             return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: row[column.key] ?? "-" });
           })()
         ]

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useMemo, useEffect } from "react";
-import { e as CardsContainerStyled } from "../../slots/DataGridSlot.js";
+import { d as CardsContainerStyled } from "../../slots/DataGridSlot.js";
 import { C as CardRow } from "./subcomponents/CardRow/index.js";
 import { u as useProcessedColumns } from "../../hooks/useProcessedColumns.js";
 import { c as calculateCardHeight } from "./helpers/calculateCardHeight.js";
@@ -28,8 +28,7 @@ function Cards(props) {
   const handleOpenDetail = useModalDetail({
     columns: allProcessedColumns,
     viewMode: "cards",
-    onRowsChange,
-    rows
+    onRowsChange
   });
   const cardHeight = useMemo(() => {
     return calculateCardHeight({
@@ -65,7 +64,7 @@ function Cards(props) {
   if (processedColumns.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(CardsContainerStyled, { "data-testid": "cards-container", ref: containerRef, children: /* @__PURE__ */ jsx(ContainerFlow, { variant: "grid-layout", minWidth: 280, children: rows.map((row, rowIndex) => {
+  return /* @__PURE__ */ jsx(CardsContainerStyled, { "data-testid": "cards-container", ref: containerRef, children: /* @__PURE__ */ jsx(ContainerFlow, { variant: "grid-layout", minWidth: 280, children: rows.map((row) => {
     const rowKey = rowKeyGetter(row);
     const isChecked = checkedRows?.has(rowKey) || false;
     const showCheckbox = checkedRows !== void 0 && onCheckedRowsChange !== void 0;
@@ -73,8 +72,6 @@ function Cards(props) {
       CardRow,
       {
         row,
-        rows,
-        rowIndex,
         columns: processedColumns,
         originalColumns: allProcessedColumns,
         rowKeyGetter,

package/components/DataGrid/subcomponents/Cards/subcomponents/CardDetails/index.d.ts

@@ -5,4 +5,4 @@ import { CardDetailsProps } from '../../types';
  *
  * A diferencia del componente Cards, este muestra TODAS las columnas
  */
-export declare function CardDetails<TRow>({ row, columns, viewColumnsConfig, onRowsChange, size, rows, rowIndex, }: CardDetailsProps<TRow>): import("react/jsx-runtime").JSX.Element;
+export declare function CardDetails<TRow>({ row, columns, viewColumnsConfig, onRowsChange, size, }: CardDetailsProps<TRow>): import("react/jsx-runtime").JSX.Element;