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

package/components/DataGrid/subcomponents/editors/TextEditor/index.js

@@ -1,55 +1 @@
-import { jsx } from "react/jsx-runtime";
-import { P as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
-function autoFocusAndSelect(input) {
-  input?.focus();
-  input?.select();
-}
-function TextEditor({
-  row,
-  column,
-  onRowChange,
-  onClose
-}) {
-  return /* @__PURE__ */ jsx(
-    InputTextEditorStyled,
-    {
-      ref: autoFocusAndSelect,
-      value: row[column.key],
-      onChange: (event) => onRowChange({ ...row, [column.key]: event.target.value }),
-      onBlur: () => onClose(true)
-    }
-  );
-}
-function NumberEditor({
-  row,
-  column,
-  onRowChange,
-  onClose
-}) {
-  const handleKeyDown = (event) => {
-    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-      onClose(true);
-    }
-    if (event.key === "Enter") {
-      onClose(true);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    InputTextEditorStyled,
-    {
-      ref: autoFocusAndSelect,
-      type: "number",
-      value: row[column.key],
-      onKeyDown: handleKeyDown,
-      onChange: (event) => onRowChange({
-        ...row,
-        [column.key]: event.target.value !== "" ? Number(event.target.value) : ""
-      }),
-      onBlur: () => onClose(true)
-    }
-  );
-}
-export {
-  NumberEditor as N,
-  TextEditor as T
-};
+

package/components/DataGrid/subcomponents/editors/index.d.ts

@@ -0,0 +1,2 @@
+export { TextEditor, NumberEditor } from './TextEditor';
+export { ColumnEditLabelFormatter, useColumnEditLabel, type ColumnEditLabelFormatterProps, } from './EditLabelEditor';

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

@@ -0,0 +1,3 @@
+export { HeaderActions } from './HeaderActions';
+export { ControlNavigate } from './ControlNavigate';
+export * from './editors';

package/components/DataGrid/types.d.ts

@@ -8,7 +8,7 @@ import { DATAGRID_PREFIX_NAME } from './constants';
 import { IGridConfigExtended, ViewMode } from './contexts/DataGridContext/types';
 import { Sizes } from '@m4l/styles';
 import { PagerProps } from '../Pager';
-import { SettingsProps } from './subcomponents/HeaderActions/subcomponents/Settings/types';
+import { SettingsProps } from './views/TableView/subcomponents/Settings/types';
 import { ReactNode } from 'react';
 export type GridFormatterPropss<T, SR> = RenderCellProps<T, SR>;
 export type { ColumnUncertaintyFormatter, ColumnPointsFormatter, ColumnNestedValueFormatter, } from './formatters';
@@ -228,6 +228,10 @@ export interface UseModalDetailProps<TRow> {
     columns: readonly Column<TRow, any>[];
     viewMode: ViewMode;
     onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
+    /**
+     * Array completo de todas las filas (necesario para reconstruir el array al editar en el modal)
+     */
+    rows: readonly TRow[];
 }
 /**
  * Configuración de una columna específica en vista "cards"
@@ -287,6 +291,14 @@ export interface CardContentProps<TRow> {
     columns: readonly Column<TRow, any>[];
     originalColumns: readonly Column<TRow, any>[];
     onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
+    /**
+     * Array completo de todas las filas (necesario para reconstruir el array al editar)
+     */
+    rows: readonly TRow[];
+    /**
+     * Índice de la fila actual en el array de filas
+     */
+    rowIndex: number;
 }
 /**
  * Configuración de densidad para el DataGrid.

package/components/DataGrid/views/CardsView/CardsView.d.ts

@@ -0,0 +1,6 @@
+import { RowKey } from '../../types';
+import { CardsViewProps } from './types';
+/**
+ * Componente que muestra las filas del DataGrid en formato de tarjetas.
+ */
+export declare function CardsView<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: CardsViewProps<TRow, TSummaryRow, TKey>): import("react/jsx-runtime").JSX.Element | null;

package/components/DataGrid/{subcomponents/Cards/index.js → views/CardsView/CardsView.js}

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useMemo, useEffect } from "react";
-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";
-import { u as useModalDetail } from "../../hooks/useModalCardDetail.js";
-import { s as scrollToCardElement } from "./helpers/scrollToCardElement.js";
+import { i as CardsContainerStyled } from "../../slots/DataGridSlot.js";
+import { u as useProcessedColumns } from "./hooks/useProcessedColumns/useProcessedColumns.js";
+import { u as useModalDetail } from "./hooks/useModalDetail/useModalDetail.js";
+import { c as calculateCardHeight } from "./helpers/calculateCardHeight/calculateCardHeight.js";
+import { s as scrollToCardElement } from "./helpers/scrollToCardElement/scrollToCardElement.js";
 import { C as ContainerFlow } from "../../../ContainerFlow/ContainerFlow.js";
-function Cards(props) {
+import { C as CardRow } from "./subcomponents/CardRow/CardRow.js";
+function CardsView(props) {
   const {
     rows,
     columns,
@@ -28,8 +28,8 @@ function Cards(props) {
   });
   const handleOpenDetail = useModalDetail({
     columns: allProcessedColumns,
-    viewMode: "cards",
-    onRowsChange
+    onRowsChange,
+    rows
   });
   const cardHeight = useMemo(() => {
     const imageHeight = processedColumns.reduce((totalHeight, col) => {
@@ -77,7 +77,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) => {
+  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;
@@ -85,6 +85,8 @@ function Cards(props) {
       CardRow,
       {
         row,
+        rows,
+        rowIndex,
         columns: processedColumns,
         originalColumns: allProcessedColumns,
         rowKeyGetter,
@@ -104,5 +106,5 @@ function Cards(props) {
   }) }) });
 }
 export {
-  Cards as C
+  CardsView as C
 };

package/components/DataGrid/{subcomponents/Cards/helpers → views/CardsView/helpers/calculateCardHeight}/calculateCardHeight.d.ts

@@ -1,4 +1,4 @@
-import { CalculateCardHeightProps } from '../types';
+import { CalculateCardHeightProps } from '../../types';
 /**
  * Calcula la altura estimada de una card basándose en el número de columnas visibles.
  * @param visibleColumnsCount - Número de columnas visibles en la card

package/components/DataGrid/{subcomponents/Cards/helpers → views/CardsView/helpers/calculateCardHeight}/calculateCardHeight.js

@@ -1,4 +1,4 @@
-import { C as CARD_HEIGHT } from "../../../constants.js";
+import { C as CARD_HEIGHT } from "../../../../constants.js";
 function calculateCardHeight(props) {
   const { visibleColumnsCount, customMinHeight } = props;
   if (customMinHeight !== void 0) {

package/components/DataGrid/views/CardsView/helpers/calculateCardHeight/index.d.ts

@@ -0,0 +1 @@
+export * from './calculateCardHeight';

package/components/DataGrid/views/CardsView/helpers/calculateCardHeight/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/helpers/scrollToCardElement/index.d.ts

@@ -0,0 +1 @@
+export * from './scrollToCardElement';

package/components/DataGrid/views/CardsView/helpers/scrollToCardElement/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/hooks/useCardContent/index.d.ts

@@ -0,0 +1 @@
+export * from './useCardContent';

package/components/DataGrid/views/CardsView/hooks/useCardContent/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/{subcomponents/Cards/hooks → views/CardsView/hooks/useCardContent}/useCardContent.d.ts

@@ -1,8 +1,8 @@
-import { CardContentProps } from '../../../types';
+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 → views/CardsView/hooks/useCardContent}/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 { j as ContainerLabelValueColumnStyled, k as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, l as EditablePlaceholderStyled, m 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 { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.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/views/CardsView/hooks/useModalDetail/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useModalDetail';
+export * from './types';

package/components/DataGrid/views/CardsView/hooks/useModalDetail/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/hooks/useModalDetail/types.d.ts

@@ -0,0 +1,19 @@
+import { Column, RowsChangeData } from 'react-data-grid';
+import { Maybe } from '@m4l/core';
+/**
+ * Props para el hook useModalDetail
+ */
+export interface UseModalDetailProps<TRow> {
+    /**
+     * Columnas a mostrar en el modal de detalle
+     */
+    columns: readonly Column<TRow, any>[];
+    /**
+     * Función para manejar cambios en las filas (para editores)
+     */
+    onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
+    /**
+     * Array completo de todas las filas (necesario para reconstruir el array al editar en el modal)
+     */
+    rows: readonly TRow[];
+}

package/components/DataGrid/views/CardsView/hooks/useModalDetail/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/hooks/useModalDetail/useModalDetail.d.ts

@@ -0,0 +1,6 @@
+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, onRowsChange, rows, }: UseModalDetailProps<TRow>) => (row: TRow) => void;

package/components/DataGrid/{hooks/useModalCardDetail.js → views/CardsView/hooks/useModalDetail/useModalDetail.js}

@@ -2,19 +2,19 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { useIsMobile } from "@m4l/graphics";
 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";
-import { C as CardDetails } from "../subcomponents/Cards/subcomponents/CardDetails/index.js";
-import { D as DICTIONARY } from "../dictionary.js";
-import { u as useDataGrid } from "./useDataGrid.js";
-import { A as ActionsContainer } from "../../CommonActions/components/ActionsContainer/ActionsContainer.js";
-import { W as WindowBase } from "../../WindowBase/WindowBase.js";
-import { A as ActionCancel } from "../../CommonActions/components/ActionCancel/ActionCancel.js";
+import { u as useModal } from "../../../../../../hooks/useModal/index.js";
+import { n as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../slots/DataGridSlot.js";
+import { p as pathIcons } from "../../../../icons.js";
+import { D as DICTIONARY } from "../../../../dictionary.js";
+import { C as CardDetails } from "../../subcomponents/CardDetails/CardDetails.js";
+import { A as ActionsContainer } from "../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { W as WindowBase } from "../../../../../WindowBase/WindowBase.js";
+import { A as ActionCancel } from "../../../../../CommonActions/components/ActionCancel/ActionCancel.js";
 const useModalDetail = ({
   columns,
-  viewMode,
-  onRowsChange
+  onRowsChange,
+  rows
 }) => {
   const { getConfigColumns, size } = useDataGrid();
   const { openModal, closeModal } = useModal();
@@ -23,7 +23,8 @@ const useModalDetail = ({
   const isMobile = useIsMobile();
   const handleOpenDetail = useCallback(
     (row) => {
-      const viewColumnsConfig = getConfigColumns(viewMode);
+      const viewColumnsConfig = getConfigColumns("cards");
+      const rowIndex = rows.findIndex((r) => r === row);
       openModal({
         initialWidth: 500,
         initialHeight: 680,
@@ -42,6 +43,8 @@ const useModalDetail = ({
                 CardDetails,
                 {
                   row,
+                  rows,
+                  rowIndex,
                   columns,
                   viewColumnsConfig,
                   onRowsChange,
@@ -56,6 +59,7 @@ const useModalDetail = ({
     },
     [
       columns,
+      rows,
       onRowsChange,
       size,
       getConfigColumns,
@@ -64,8 +68,7 @@ const useModalDetail = ({
       getLabel,
       host_static_assets,
       environment_assets,
-      isMobile,
-      viewMode
+      isMobile
     ]
   );
   return handleOpenDetail;

package/components/DataGrid/views/CardsView/hooks/useProcessedColumns/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useProcessedColumns';
+export * from './types';

package/components/DataGrid/views/CardsView/hooks/useProcessedColumns/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/hooks/useProcessedColumns/types.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Opciones para el hook useProcessedColumns
+ */
+export interface ProcessedColumnsOptions {
+    /**
+     * Si es true, aplica el filtro de visibilidad según la configuración.
+     * Si es false, muestra todas las columnas (útil para el modal de detalle).
+     * @default true
+     */
+    applyVisibilityFilter?: boolean;
+}

package/components/DataGrid/views/CardsView/hooks/useProcessedColumns/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/{hooks → views/CardsView/hooks/useProcessedColumns}/useProcessedColumns.d.ts

@@ -1,5 +1,5 @@
 import { Column } from 'react-data-grid';
-import { ProcessedColumnsOptions } from '../types';
+import { ProcessedColumnsOptions } from './types';
 /**
  * Hook que procesa columnas para cualquier vista que no sea Table.
  * - Aplica configuración de visibilidad y orden (opcional)
@@ -38,8 +38,8 @@ export declare function useProcessedColumns<TRow, TSummaryRow>(columns: readonly
     visible?: boolean;
     hidden?: boolean;
     fixed?: boolean;
-    type: import('../types').ColumnType;
-    align?: import('../types').ColumnAlign;
+    type: import('../../../../types').ColumnType;
+    align?: import('../../../../types').ColumnAlign;
     isDraggable?: boolean;
     withFilter?: boolean;
     withinHeaderRenderer?: import('react').FunctionComponent<import('react-data-grid').RenderHeaderCellProps<TRow, TSummaryRow>> | undefined;

package/components/DataGrid/{hooks → views/CardsView/hooks/useProcessedColumns}/useProcessedColumns.js

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
-import { u as useDataGrid } from "./useDataGrid.js";
-import { d as DATAGRID_SELECT_COLUMN_KEY, e as DATAGRID_ACTIONS_COLUMN_KEY } from "../constants.js";
+import { d as DATAGRID_SELECT_COLUMN_KEY, e as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../../constants.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function useProcessedColumns(columns, options = {}) {
   const { applyVisibilityFilter = true } = options;
   const { getConfigColumns, viewMode } = useDataGrid();

package/components/DataGrid/views/CardsView/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CardsView';
+export * from './types';

package/components/DataGrid/views/CardsView/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/{subcomponents/Cards/subcomponents/CardDetails/index.d.ts → views/CardsView/subcomponents/CardDetails/CardDetails.d.ts}

@@ -1,8 +1,8 @@
-import { CardDetailsProps } from '../../types';
+import { CardDetailsProps } from './types';
 /**
  * Componente genérico que renderiza TODAS las columnas de una fila
  * en formato detalle dentro del modal.
  *
  * 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 → views/CardsView/subcomponents/CardDetails/CardDetails.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 { o as CardDetailContainerStyled, j as ContainerLabelValueColumnStyled, k as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, l as EditablePlaceholderStyled, m 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/views/CardsView/subcomponents/CardDetails/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CardDetails';
+export * from './types';

package/components/DataGrid/views/CardsView/subcomponents/CardDetails/index.js

@@ -0,0 +1 @@
+