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

package/components/DataGrid/icons.js

@@ -23,7 +23,8 @@ 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"
+  expanded: "frontend/components/data_grid/assets/icons/expanded.svg",
+  edit: "frontend/components/EditLabel/assets/icons/pencil.svg"
 };
 export {
   pathIcons as p

package/components/DataGrid/index.d.ts

@@ -1,9 +1,10 @@
 export { DataGrid } from './DataGrid';
 export * from './formatters';
-export type { Column, RenderEditCellProps, RenderCellProps } from 'react-data-grid';
-export type { RowKey, ChangeUserColumn, RowActionsGetter, RowKeyGetter } from './types';
+export type { Column, RenderEditCellProps, RenderCellProps, } from 'react-data-grid';
+export type { RowKey, ChangeConfig, ChangeUserColumn, RowActionsGetter, RowKeyGetter, } from './types';
 export { getDataGridComponentsDictionary } from './dictionary';
 export { TextEditor, NumberEditor } from './subcomponents/editors/TextEditor';
 export { getDataGridRowsFromSet } from './utils/getDataGridRowsFromSet';
-export type { IGridConfig, IGridConfigExtended, BaseConfigColumn } from './contexts/DataGridContext/types';
-export { DATAGRID_SEMANTIC_WIDTHS, DATAGRID_ROW_HEADER_HEIGHTS, DATAGRID_ROW_HEIGHTS } from './constants';
+export type { IGridConfigExtended, BaseConfigColumn, } from './contexts/DataGridContext/types';
+export { DATAGRID_SEMANTIC_WIDTHS, DATAGRID_ROW_HEADER_HEIGHTS, DATAGRID_ROW_HEIGHTS, } from './constants';
+export * from './types.helpers';

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

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

package/components/DataGrid/slots/DataGridEnum.js

@@ -54,6 +54,9 @@ 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,6 +76,9 @@ 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,6 +6,7 @@ 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
@@ -206,6 +207,18 @@ 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
@@ -220,49 +233,51 @@ styled("div", {
 })(dataGridStyles.columnIconFormatter);
 export {
   ActionsRootStyled as A,
-  NameColumnStyled as B,
+  TableContainerStyled as B,
   CustomHeaderStyled as C,
   DataGridRootStyled as D,
   EditorCellWrapperStyled as E,
-  DraggableHeaderRootStyled as F,
-  ButtonHeaderActionsStyled as G,
-  DraggableWrapperInputBaseStyled as H,
-  IconColumnStyled as I,
-  IconSearchStyled as J,
-  HeaderInputBaseStyled as K,
+  NameColumnStyled as F,
+  IconColumnStyled as G,
+  DraggableHeaderRootStyled as H,
+  IconButtonEditStyled as I,
+  ButtonHeaderActionsStyled as J,
+  DraggableWrapperInputBaseStyled as K,
   LabelHeaderColumnStyled as L,
-  MenuListStyled as M,
+  IconSearchStyled as M,
   NameColumnIconStyled as N,
-  HeaderRenderClickStyled as O,
-  InputTextEditorStyled as P,
+  HeaderInputBaseStyled as O,
+  MenuListStyled as P,
+  HeaderRenderClickStyled as Q,
   RowsCountRootStyled as R,
+  InputTextEditorStyled as S,
   TableWrapperDataGridStyled as T,
   ValueColumnStyled as V,
   WrapperSkeletonStyled as W,
   ContentModalSettingStyled as a,
   ContainerLabelValueColumnStyled as b,
   ContentWrapperColumnStyled as c,
-  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
+  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
 };

package/components/DataGrid/subcomponents/Cards/helpers/calculateCardHeight.d.ts

@@ -6,13 +6,14 @@ import { CalculateCardHeightProps } from '../types';
  * @returns Altura calculada en píxeles
  *
  * Fórmula:
+ * - 42px de header (checkbox + acciones)
  * - 32px por cada columna visible (altura de label + value)
- * - 40px de padding, márgenes y header
+ * - 40px de padding vertical
  * - Mínimo de 120px para garantizar una altura base
  *
  * Ejemplos:
- * - 3 columnas: Math.max(120, 3 * 32 + 40) = 136px
- * - 5 columnas: Math.max(120, 5 * 32 + 40) = 200px
- * - 10 columnas: Math.max(120, 10 * 32 + 40) = 360px
+ * - 3 columnas: Math.max(120, 42 + 3 * 32 + 40) = 178px
+ * - 5 columnas: Math.max(120, 42 + 5 * 32 + 40) = 242px
+ * - 10 columnas: Math.max(120, 42 + 10 * 32 + 40) = 402px
  */
 export declare function calculateCardHeight(props: CalculateCardHeightProps): number;

package/components/DataGrid/subcomponents/Cards/helpers/calculateCardHeight.js

@@ -1,9 +1,12 @@
+import { C as CARD_HEIGHT } from "../../../constants.js";
 function calculateCardHeight(props) {
   const { visibleColumnsCount, customMinHeight } = props;
   if (customMinHeight !== void 0) {
     return customMinHeight;
   }
-  return Math.max(120, visibleColumnsCount * 32 + 40);
+  const contentHeight = visibleColumnsCount * CARD_HEIGHT.COLUMN;
+  const totalHeight = CARD_HEIGHT.HEADER + contentHeight + CARD_HEIGHT.PADDING_VERTICAL;
+  return Math.max(CARD_HEIGHT.BASE_MIN, totalHeight);
 }
 export {
   calculateCardHeight as c

package/components/DataGrid/subcomponents/Cards/helpers/scrollToCardElement.js

@@ -13,8 +13,8 @@ function scrollToCardElement(containerElement, rowKey, selectorType = "data-attr
       return;
     }
     foundElement.scrollIntoView({
-      behavior: "auto",
-      block: "center"
+      behavior: "smooth",
+      block: "end"
     });
   } catch (error) {
     console.error("scrollToCardElement: Error al hacer scroll", error);

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, columns, onRowsChange, }: CardContentProps<TRow>): {
+export declare function useCardContent<TRow>({ row, rows, rowIndex, columns, onRowsChange, }: CardContentProps<TRow>): {
     cardContent: import("react/jsx-runtime").JSX.Element[];
     columnsCount: number;
 };

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

@@ -1,13 +1,22 @@
 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 } from "../../../slots/DataGridSlot.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";
 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) => {
@@ -34,8 +43,11 @@ function useCardContent({
                  */
                 onRowChange: (updatedRow) => {
                   if (onRowsChange) {
-                    onRowsChange([updatedRow], {
-                      indexes: [index],
+                    const updatedRows = rows.map(
+                      (r, i) => i === rowIndex ? updatedRow : r
+                    );
+                    onRowsChange(updatedRows, {
+                      indexes: [rowIndex],
                       column
                     });
                   }
@@ -55,8 +67,11 @@ function useCardContent({
                  */
                 onRowChange: (updatedRow) => {
                   if (onRowsChange) {
-                    onRowsChange([updatedRow], {
-                      indexes: [index],
+                    const updatedRows = rows.map(
+                      (r, i) => i === rowIndex ? updatedRow : r
+                    );
+                    onRowsChange(updatedRows, {
+                      indexes: [rowIndex],
                       column
                     });
                   }
@@ -64,6 +79,33 @@ 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 { d as CardsContainerStyled } from "../../slots/DataGridSlot.js";
+import { e 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";
@@ -21,6 +21,7 @@ function Cards(props) {
     onCheckedRowsChange
   } = props;
   const containerRef = useRef(null);
+  const hasScrolledToFocusRow = useRef(false);
   const processedColumns = useProcessedColumns(columns);
   const allProcessedColumns = useProcessedColumns(columns, {
     applyVisibilityFilter: false
@@ -28,16 +29,25 @@ function Cards(props) {
   const handleOpenDetail = useModalDetail({
     columns: allProcessedColumns,
     viewMode: "cards",
-    onRowsChange
+    onRowsChange,
+    rows
   });
   const cardHeight = useMemo(() => {
+    const imageHeight = processedColumns.reduce((totalHeight, col) => {
+      const formatterHeight = col.renderCell?.__imageFormatterHeight;
+      return formatterHeight ? totalHeight + formatterHeight : totalHeight;
+    }, 0);
     return calculateCardHeight({
       visibleColumnsCount: processedColumns.length,
       customMinHeight: cardsViewConfig?.customRender?.minHeight
-    });
-  }, [processedColumns.length, cardsViewConfig]);
+    }) + imageHeight;
+  }, [processedColumns, cardsViewConfig]);
   useEffect(() => {
     if (!focusOnRowKey) {
+      hasScrolledToFocusRow.current = false;
+      return;
+    }
+    if (hasScrolledToFocusRow.current) {
       return;
     }
     const rowIndex = rows.findIndex(
@@ -58,13 +68,17 @@ function Cards(props) {
         "data-attribute",
         "data-row-key"
       );
+      if (onSelectedRowsChange) {
+        onSelectedRowsChange(/* @__PURE__ */ new Set([focusOnRowKey]));
+      }
+      hasScrolledToFocusRow.current = true;
     }, 300);
     return () => clearTimeout(timer);
-  }, [focusOnRowKey, rows, rowKeyGetter, cardHeight]);
+  }, [focusOnRowKey, rows, rowKeyGetter, cardHeight, onSelectedRowsChange]);
   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) => {
+  return /* @__PURE__ */ jsx(CardsContainerStyled, { "data-testid": "cards-container", ref: containerRef, children: /* @__PURE__ */ jsx(ContainerFlow, { variant: "grid-layout", minWidth: 280, children: rows.map((row, rowIndex) => {
     const rowKey = rowKeyGetter(row);
     const isChecked = checkedRows?.has(rowKey) || false;
     const showCheckbox = checkedRows !== void 0 && onCheckedRowsChange !== void 0;
@@ -72,6 +86,8 @@ 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, }: CardDetailsProps<TRow>): import("react/jsx-runtime").JSX.Element;
+export declare function CardDetails<TRow>({ row, columns, viewColumnsConfig, onRowsChange, size, rows, rowIndex, }: CardDetailsProps<TRow>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,15 +1,25 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
-import { e as CardDetailContainerStyled, b as ContainerLabelValueColumnStyled, c as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled } from "../../../../slots/DataGridSlot.js";
+import { f as CardDetailContainerStyled, 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";
 function CardDetails({
   row,
   columns,
   viewColumnsConfig,
   onRowsChange,
-  size = "medium"
+  size = "medium",
+  rows,
+  rowIndex
 }) {
   const [editingColumnKey, setEditingColumnKey] = useState(null);
   const [refreshCounter, setRefreshCounter] = useState(0);
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { currentSize } = useComponentSize(size);
+  const currentRow = rows[rowIndex] || row;
   const handleForceRefresh = useCallback(() => {
     setRefreshCounter((prev) => prev + 1);
   }, []);
@@ -17,10 +27,8 @@ function CardDetails({
     if (column.renderCell) {
       return {
         ...column,
-        // Agregar onAfterChange al objeto de la columna si no existe
-        ...!column.onAfterChange && {
-          onAfterChange: handleForceRefresh
-        }
+        // Agregar onAfterChange al objeto de la columna
+        onAfterChange: handleForceRefresh
       };
     }
     return column;
@@ -30,7 +38,8 @@ function CardDetails({
       (config) => config.key === modifiedColumn.key
     );
     const originalColumn = columns[index];
-    const columnKey = `${originalColumn.key}-${refreshCounter}`;
+    const hasInteractiveFormatter = !!modifiedColumn.onAfterChange;
+    const columnKey = hasInteractiveFormatter ? `${originalColumn.key}-${refreshCounter}` : `${originalColumn.key}`;
     const shouldShowTitle = configColumn?.showTitle !== false;
     return /* @__PURE__ */ jsx(ContainerLabelValueColumnStyled, { children: /* @__PURE__ */ jsxs(
       ContentWrapperColumnStyled,
@@ -48,15 +57,18 @@ function CardDetails({
             if (modifiedColumn.renderEditCell && editingColumnKey === modifiedColumn.key) {
               return /* @__PURE__ */ jsx(EditorCellWrapperStyled, { ownerState: { size }, children: modifiedColumn.renderEditCell({
                 column: originalColumn,
-                row,
+                row: currentRow,
                 rowIdx: index,
                 /**
                  * onRowChange es una función que se ejecuta cuando el usuario edita una celda.
                  */
                 onRowChange: (updatedRow) => {
                   if (onRowsChange) {
-                    onRowsChange([updatedRow], {
-                      indexes: [index],
+                    const updatedRows = rows.map(
+                      (r, i) => i === rowIndex ? updatedRow : r
+                    );
+                    onRowsChange(updatedRows, {
+                      indexes: [rowIndex],
                       column: originalColumn
                     });
                   }
@@ -66,8 +78,8 @@ function CardDetails({
             }
             if (modifiedColumn.renderCell) {
               const cellContent = modifiedColumn.renderCell({
-                column: originalColumn,
-                row,
+                column: modifiedColumn,
+                row: currentRow,
                 rowIdx: index,
                 isCellSelected: false,
                 tabIndex: -1,
@@ -76,8 +88,11 @@ function CardDetails({
                  */
                 onRowChange: (updatedRow) => {
                   if (onRowsChange) {
-                    onRowsChange([updatedRow], {
-                      indexes: [index],
+                    const updatedRows = rows.map(
+                      (r, i) => i === rowIndex ? updatedRow : r
+                    );
+                    onRowsChange(updatedRows, {
+                      indexes: [rowIndex],
                       column: originalColumn
                     });
                   }
@@ -85,7 +100,34 @@ function CardDetails({
               });
               return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: cellContent });
             }
-            return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: row[modifiedColumn.key] ?? "-" });
+            const rawValue = currentRow[modifiedColumn.key];
+            const isEmpty = rawValue === null || rawValue === void 0 || rawValue === "";
+            const isEditable = !!modifiedColumn.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(modifiedColumn.key);
+                    },
+                    size: currentSize,
+                    role: "button",
+                    "aria-label": "Editar texto"
+                  }
+                )
+              ] });
+            }
+            return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: rawValue ?? "-" });
           })()
         ]
       }

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo, useCallback } from "react";
 import { useEnvironment } from "@m4l/core";
 import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-import { f as CardHeaderStyled, g as CardHeaderLeftStyled, h as CardHeaderRightStyled } from "../../../../slots/DataGridSlot.js";
+import { g as CardHeaderStyled, h as CardHeaderLeftStyled, i as CardHeaderRightStyled } from "../../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { C as CheckboxCellAdapter } from "../../../CheckboxCellAdapter/index.js";
 import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
@@ -15,7 +15,7 @@ function CardHeader({
   checkedRows,
   onCheckedRowsChange
 }) {
-  const { rowKeyGetter, rowActionsGetter, size } = useDataGrid();
+  const { rowKeyGetter, rowActionsGetter, size, checkedRowsMultiple } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
   const rowKey = useMemo(() => rowKeyGetter(row), [rowKeyGetter, row]);
   const onChange = useCallback(
@@ -23,15 +23,23 @@ function CardHeader({
       if (!onCheckedRowsChange || !checkedRows) {
         return;
       }
-      const newCheckedRows = new Set(checkedRows);
-      if (checked) {
-        newCheckedRows.add(rowKey);
+      if (checkedRowsMultiple === false) {
+        if (checked) {
+          onCheckedRowsChange(/* @__PURE__ */ new Set([rowKey]));
+        } else {
+          onCheckedRowsChange(/* @__PURE__ */ new Set());
+        }
       } else {
-        newCheckedRows.delete(rowKey);
+        const newCheckedRows = new Set(checkedRows);
+        if (checked) {
+          newCheckedRows.add(rowKey);
+        } else {
+          newCheckedRows.delete(rowKey);
+        }
+        onCheckedRowsChange(newCheckedRows);
       }
-      onCheckedRowsChange(newCheckedRows);
     },
-    [checkedRows, onCheckedRowsChange, rowKey]
+    [checkedRows, onCheckedRowsChange, rowKey, checkedRowsMultiple]
   );
   const anchorOrigin = useMemo(
     () => ({

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

@@ -3,9 +3,9 @@ import { CardRowProps } from '../../types';
 /**
  * Componente que muestra una fila de tarjetas.
  */
-declare function CardRowComponent<TRow, TKey extends RowKey = RowKey>({ row, columns, originalColumns, rowKeyGetter, selectedRows, onSelectedRowsChange, onRowsChange, customRender, minHeight, isChecked, checkedRows, showCheckbox, onCheckedRowsChange, onOpenDetail, }: CardRowProps<TRow, TKey>): import("react/jsx-runtime").JSX.Element;
+declare function CardRowComponent<TRow, TKey extends RowKey = RowKey>({ row, rows, rowIndex, columns, originalColumns, rowKeyGetter, selectedRows, onSelectedRowsChange, onRowsChange, customRender, minHeight, isChecked, checkedRows, showCheckbox, onCheckedRowsChange, onOpenDetail, }: CardRowProps<TRow, TKey>): import("react/jsx-runtime").JSX.Element;
 /**
- *
+ * Componente que muestra CardRow
  */
 export declare const CardRow: typeof CardRowComponent;
 export {};

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

@@ -1,12 +1,14 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useMemo } from "react";
-import { i as CardContentWrapperStyled, j as CardContentStyled, k as CardStyled } from "../../../../slots/DataGridSlot.js";
+import { j as CardContentWrapperStyled, k as CardContentStyled, l as CardStyled } from "../../../../slots/DataGridSlot.js";
 import { L as LazyLoadCard } from "../LazyLoadCard/index.js";
 import { u as useCardContent } from "../../hooks/useCardContent.js";
 import { C as CardHeader } from "../CardHeader/index.js";
 import { deepEqual } from "fast-equals";
 function CardRowComponent({
   row,
+  rows,
+  rowIndex,
   columns,
   originalColumns,
   rowKeyGetter,
@@ -24,6 +26,8 @@ function CardRowComponent({
   const hasCustomRender = customRender !== void 0;
   const { cardContent } = useCardContent({
     row,
+    rows,
+    rowIndex,
     columns,
     onRowsChange
   });
@@ -88,6 +92,7 @@ function CardRowComponent({
           },
           onClick: onCardClick,
           "data-testid": "data-grid-card",
+          "data-row-key": rowKeyGetter(row),
           children: content
         }
       )