@m4l/components 9.3.29-JT19112025.beta.2 → 9.3.29-JT19112025.beta.4

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, }: UseModalDetailProps<TRow>) => (row: TRow) => void;
+export declare const useModalDetail: <TRow>({ columns, viewMode, onRowsChange, rows, }: 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 { useCallback } from "react";
+import { useRef, useEffect, 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,16 +14,22 @@ import { A as ActionCancel } from "../../CommonActions/components/ActionCancel/A
 const useModalDetail = ({
   columns,
   viewMode,
-  onRowsChange
+  onRowsChange,
+  rows
 }) => {
   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,
@@ -42,6 +48,8 @@ const useModalDetail = ({
                 CardDetails,
                 {
                   row,
+                  rows: rowsRef.current,
+                  rowIndex,
                   columns,
                   viewColumnsConfig,
                   onRowsChange,

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

@@ -82,9 +82,16 @@ function useCardContent({
             const rawValue = row[column.key];
             const isEmpty = rawValue === null || rawValue === void 0 || rawValue === "";
             const isEditable = !!column.renderEditCell;
-            if (isEmpty && isEditable) {
+            if (isEditable) {
               return /* @__PURE__ */ jsxs(EditablePlaceholderStyled, { children: [
-                /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.secondary", children: getLabel(DICTIONARY.EDIT_PLACEHOLDER) }),
+                /* @__PURE__ */ jsx(
+                  ValueColumnStyled,
+                  {
+                    variant: "body",
+                    color: isEmpty ? "text.secondary" : "text.primary",
+                    children: isEmpty ? getLabel(DICTIONARY.EDIT_PLACEHOLDER) : rawValue
+                  }
+                ),
                 /* @__PURE__ */ jsx(
                   IconButtonEditStyled,
                   {

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

@@ -28,7 +28,8 @@ function Cards(props) {
   const handleOpenDetail = useModalDetail({
     columns: allProcessedColumns,
     viewMode: "cards",
-    onRowsChange
+    onRowsChange,
+    rows
   });
   const cardHeight = useMemo(() => {
     return calculateCardHeight({

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

@@ -10,7 +10,9 @@ function CardDetails({
   columns,
   viewColumnsConfig,
   onRowsChange,
-  size = "medium"
+  size = "medium",
+  rows,
+  rowIndex
 }) {
   const [editingColumnKey, setEditingColumnKey] = useState(null);
   const [refreshCounter, setRefreshCounter] = useState(0);
@@ -61,8 +63,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
                     });
                   }
@@ -82,8 +87,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
                     });
                   }
@@ -94,9 +102,16 @@ function CardDetails({
             const rawValue = row[modifiedColumn.key];
             const isEmpty = rawValue === null || rawValue === void 0 || rawValue === "";
             const isEditable = !!modifiedColumn.renderEditCell;
-            if (isEmpty && isEditable) {
+            if (isEditable) {
               return /* @__PURE__ */ jsxs(EditablePlaceholderStyled, { children: [
-                /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.secondary", children: getLabel(DICTIONARY.EDIT_PLACEHOLDER) }),
+                /* @__PURE__ */ jsx(
+                  ValueColumnStyled,
+                  {
+                    variant: "body",
+                    color: isEmpty ? "text.secondary" : "text.primary",
+                    children: isEmpty ? getLabel(DICTIONARY.EDIT_PLACEHOLDER) : rawValue
+                  }
+                ),
                 /* @__PURE__ */ jsx(
                   IconButtonEditStyled,
                   {

package/components/DataGrid/subcomponents/Cards/types.d.ts

@@ -148,6 +148,14 @@ export interface CardDetailsProps<TRow> {
     viewColumnsConfig: IViewConfig<any, any>[];
     onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
     size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * 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;
 }
 /**
  * Props para el componente CardHeader

package/components/DataGrid/types.d.ts

@@ -193,6 +193,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"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.29-JT19112025.beta.2",
+  "version": "9.3.29-JT19112025.beta.4",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {