@m4l/components 9.3.29-JT19112025.beta.3 → 9.3.29-JT19112025.beta.5

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";
@@ -22,10 +22,14 @@ const useModalDetail = ({
   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 = rows.findIndex((r) => r === row);
+      const rowIndex = rowsRef.current.findIndex((r) => r === row);
       openModal({
         initialWidth: 500,
         initialHeight: 680,
@@ -44,7 +48,7 @@ const useModalDetail = ({
                 CardDetails,
                 {
                   row,
-                  rows,
+                  rows: rowsRef.current,
                   rowIndex,
                   columns,
                   viewColumnsConfig,
@@ -60,7 +64,6 @@ const useModalDetail = ({
     },
     [
       columns,
-      rows,
       onRowsChange,
       size,
       getConfigColumns,

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

@@ -19,6 +19,7 @@ function CardDetails({
   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);
   }, []);
@@ -56,7 +57,7 @@ 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.
@@ -78,7 +79,7 @@ function CardDetails({
             if (modifiedColumn.renderCell) {
               const cellContent = modifiedColumn.renderCell({
                 column: modifiedColumn,
-                row,
+                row: currentRow,
                 rowIdx: index,
                 isCellSelected: false,
                 tabIndex: -1,
@@ -99,7 +100,7 @@ function CardDetails({
               });
               return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: cellContent });
             }
-            const rawValue = row[modifiedColumn.key];
+            const rawValue = currentRow[modifiedColumn.key];
             const isEmpty = rawValue === null || rawValue === void 0 || rawValue === "";
             const isEditable = !!modifiedColumn.renderEditCell;
             if (isEditable) {

package/package.json

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