@m4l/components 9.3.25-beta.0 → 9.3.26

package/components/DataGrid/slots/DataGridEnum.js

@@ -36,9 +36,11 @@ var TableSlots = /* @__PURE__ */ ((TableSlots2) => {
   TableSlots2["textToggleCardButton"] = "textToggleCardButton";
   TableSlots2["card"] = "card";
   TableSlots2["cardsContainer"] = "cardsContainer";
+  TableSlots2["cardContentWrapper"] = "cardContentWrapper";
   TableSlots2["cardHeader"] = "cardHeader";
   TableSlots2["cardHeaderLeft"] = "cardHeaderLeft";
   TableSlots2["cardHeaderRight"] = "cardHeaderRight";
+  TableSlots2["cardContent"] = "cardContent";
   TableSlots2["containerLabelValueColumn"] = "containerLabelValueColumn";
   TableSlots2["contentWrapperColumn"] = "contentWrapperColumn";
   TableSlots2["cardDetailContainer"] = "cardDetailContainer";

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

@@ -44,7 +44,9 @@ export declare const CardStyled: import('@emotion/styled').StyledComponent<any,
 export declare const CardHeaderStyled: 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 CardHeaderLeftStyled: 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 CardHeaderRightStyled: 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 CardsContainerStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
+export declare const CardContentWrapperStyled: 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 CardContentStyled: 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 CardsContainerStyled: 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 ContainerLabelValueColumnStyled: 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 ContentWrapperColumnStyled: 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 CardDetailContainerStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/DataGrid/slots/DataGridSlot.js

@@ -1,11 +1,10 @@
 import { styled } from "@mui/material/styles";
 import { MenuList, InputBase } from "@mui/material";
 import { D as DATAGRID_PREFIX_NAME } from "../constants.js";
-import { D as DataGridSlots, T as TextEditorSlots, A as ActionsSlots, C as ControlNavigateSlots, c as ColumnIconFormatterSlots, b as TableSlots, R as RowsCountSlots, a as ColumnsConfigSlots } from "./DataGridEnum.js";
+import { D as DataGridSlots, T as TextEditorSlots, A as ActionsSlots, C as ControlNavigateSlots, b as TableSlots, R as RowsCountSlots, a as ColumnsConfigSlots, c as ColumnIconFormatterSlots } from "./DataGridEnum.js";
 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 { C as ContainerFlow } from "../../ContainerFlow/ContainerFlow.js";
 import { T as Typography } from "../../mui_extended/Typography/Typography.js";
 const DataGridRootStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
@@ -91,7 +90,15 @@ const CardHeaderRightStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: TableSlots.cardHeaderRight
 })(dataGridStyles.cardHeaderRight);
-const CardsContainerStyled = styled(ContainerFlow, {
+const CardContentWrapperStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.cardContentWrapper
+})(dataGridStyles.cardContentWrapper);
+const CardContentStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.cardContent
+})(dataGridStyles.cardContent);
+const CardsContainerStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: TableSlots.cardsContainer
 })(dataGridStyles.cardsContainer);
@@ -207,54 +214,55 @@ const ControlNavigateStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: ControlNavigateSlots.controlNavigate
 })(dataGridStyles.controlNavigate);
-const ColumnIconFormatterStyled = styled("div", {
+styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: ColumnIconFormatterSlots.columnIconFormatter
 })(dataGridStyles.columnIconFormatter);
 export {
   ActionsRootStyled as A,
-  DraggableHeaderRootStyled as B,
+  NameColumnStyled as B,
   CustomHeaderStyled as C,
   DataGridRootStyled as D,
   EditorCellWrapperStyled as E,
-  ButtonHeaderActionsStyled as F,
-  DraggableWrapperInputBaseStyled as G,
-  IconSearchStyled as H,
+  DraggableHeaderRootStyled as F,
+  ButtonHeaderActionsStyled as G,
+  DraggableWrapperInputBaseStyled as H,
   IconColumnStyled as I,
-  HeaderInputBaseStyled as J,
-  HeaderRenderClickStyled as K,
+  IconSearchStyled as J,
+  HeaderInputBaseStyled as K,
   LabelHeaderColumnStyled as L,
   MenuListStyled as M,
   NameColumnIconStyled as N,
-  InputTextEditorStyled as O,
+  HeaderRenderClickStyled as O,
+  InputTextEditorStyled as P,
   RowsCountRootStyled as R,
   TableWrapperDataGridStyled as T,
   ValueColumnStyled as V,
   WrapperSkeletonStyled as W,
-  ColumnIconFormatterStyled as a,
-  ContentModalSettingStyled as b,
-  ContainerLabelValueColumnStyled as c,
-  ContentWrapperColumnStyled as d,
-  CardsContainerStyled as e,
-  CardDetailContainerStyled as f,
-  CardHeaderStyled as g,
-  CardHeaderLeftStyled as h,
-  CardHeaderRightStyled as i,
-  CardStyled as j,
-  CheckboxCellWrapperStyled as k,
-  ControlNavigateStyled as l,
-  ActionsConfigContainerStyled as m,
-  ContainerLeftActionsStyled as n,
-  ContainerRightActionsStyled as o,
-  RowsCountLabelStyled as p,
-  RowsCountValueStyled as q,
-  ColumnsConfigWrapperStyled as r,
-  ColumnsConfigDataGridStyled as s,
-  ColumnsConfigSelColumnsStyled as t,
-  ColumnsConfigActiosStyled as u,
-  ContainerToggleCardsStyled as v,
-  CardToggleButtonStyled as w,
-  TextToggleCardButtonStyled as x,
-  TableContainerStyled as y,
-  NameColumnStyled as z
+  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
 };

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

@@ -0,0 +1,18 @@
+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
+ * @param customMinHeight - Altura mínima personalizada (opcional, para customRender)
+ * @returns Altura calculada en píxeles
+ *
+ * Fórmula:
+ * - 32px por cada columna visible (altura de label + value)
+ * - 40px de padding, márgenes y header
+ * - 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
+ */
+export declare function calculateCardHeight(props: CalculateCardHeightProps): number;

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

@@ -0,0 +1,10 @@
+function calculateCardHeight(props) {
+  const { visibleColumnsCount, customMinHeight } = props;
+  if (customMinHeight !== void 0) {
+    return customMinHeight;
+  }
+  return Math.max(120, visibleColumnsCount * 32 + 40);
+}
+export {
+  calculateCardHeight as c
+};

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

@@ -0,0 +1,9 @@
+/**
+ * Helper para hacer scroll a una card por su key.
+ * Busca el elemento en el DOM usando querySelector y hace scrollIntoView.
+ * @param containerElement - Elemento contenedor que tiene scroll
+ * @param rowKey - Key de la fila/card a la que hacer scroll
+ * @param selectorType - Tipo de selector: 'class' o 'data-attribute'
+ * @param selectorName - Nombre de la clase o atributo base
+ */
+export declare function scrollToCardElement(containerElement: HTMLElement | null, rowKey: string | number, selectorType?: 'class' | 'data-attribute', selectorName?: string): void;

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

@@ -0,0 +1,25 @@
+function scrollToCardElement(containerElement, rowKey, selectorType = "data-attribute", selectorName = "data-row-key") {
+  if (!containerElement) {
+    console.warn("scrollToCardElement: containerElement is null");
+    return;
+  }
+  try {
+    const selector = selectorType === "class" ? `.${selectorName}-${rowKey}` : `[${selectorName}="${rowKey}"]`;
+    const foundElement = containerElement.querySelector(selector);
+    if (!foundElement) {
+      console.warn(
+        `scrollToCardElement: No se encontró card con selector "${selector}"`
+      );
+      return;
+    }
+    foundElement.scrollIntoView({
+      behavior: "auto",
+      block: "center"
+    });
+  } catch (error) {
+    console.error("scrollToCardElement: Error al hacer scroll", error);
+  }
+}
+export {
+  scrollToCardElement as s
+};

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

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

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

@@ -1,89 +1,78 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useMemo } from "react";
-import { u as useModalDetail } from "../../../hooks/useModalCardDetail.js";
+import { useState } from "react";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
-import { c as ContainerLabelValueColumnStyled, d 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 } from "../../../slots/DataGridSlot.js";
 function useCardContent({
   row,
   columns,
-  originalColumns,
   onRowsChange
 }) {
   const { getConfigColumns, size } = useDataGrid();
   const [editingColumnKey, setEditingColumnKey] = useState(null);
   const columnsConfig = getConfigColumns("cards");
-  const onOpenDetail = useModalDetail({
-    row,
-    columns: originalColumns,
-    viewMode: "cards",
-    onRowsChange
-  });
-  const cardContent = useMemo(() => {
-    return columns.map((column, index) => {
-      const configColumn = columnsConfig.find(
-        (config) => config.key === column.key
-      );
-      const shouldShowTitle = configColumn?.showTitle !== false;
-      return /* @__PURE__ */ jsx(ContainerLabelValueColumnStyled, { children: /* @__PURE__ */ jsxs(
-        ContentWrapperColumnStyled,
-        {
-          onDoubleClick: column.renderEditCell && editingColumnKey !== column.key ? () => {
-            setEditingColumnKey(column.key);
-          } : void 0,
-          children: [
-            shouldShowTitle && /* @__PURE__ */ jsx(LabelHeaderColumnStyled, { variant: "body", color: "text.secondary", children: column.name }),
-            (() => {
-              if (column.renderEditCell && editingColumnKey === column.key) {
-                return /* @__PURE__ */ jsx(EditorCellWrapperStyled, { ownerState: { size }, children: column.renderEditCell({
-                  column,
-                  row,
-                  rowIdx: index,
-                  /**
-                   * onRowChange es una función que se ejecuta cuando el usuario edita una celda.
-                   */
-                  onRowChange: (updatedRow) => {
-                    if (onRowsChange) {
-                      onRowsChange([updatedRow], {
-                        indexes: [index],
-                        column
-                      });
-                    }
-                  },
-                  onClose: () => setEditingColumnKey(null)
-                }) });
-              }
-              if (column.renderCell) {
-                const cellContent = column.renderCell({
-                  column,
-                  row,
-                  rowIdx: index,
-                  isCellSelected: false,
-                  tabIndex: -1,
-                  /**
-                   * onRowChange es una función que se ejecuta cuando el usuario edita una celda.
-                   */
-                  onRowChange: (updatedRow) => {
-                    if (onRowsChange) {
-                      onRowsChange([updatedRow], {
-                        indexes: [index],
-                        column
-                      });
-                    }
+  const cardContent = columns.map((column, index) => {
+    const configColumn = columnsConfig.find(
+      (config) => config.key === column.key
+    );
+    const shouldShowTitle = configColumn?.showTitle !== false;
+    return /* @__PURE__ */ jsx(ContainerLabelValueColumnStyled, { children: /* @__PURE__ */ jsxs(
+      ContentWrapperColumnStyled,
+      {
+        onDoubleClick: column.renderEditCell && editingColumnKey !== column.key ? () => {
+          setEditingColumnKey(column.key);
+        } : void 0,
+        children: [
+          shouldShowTitle && /* @__PURE__ */ jsx(LabelHeaderColumnStyled, { variant: "body", color: "text.secondary", children: column.name }),
+          (() => {
+            if (column.renderEditCell && editingColumnKey === column.key) {
+              return /* @__PURE__ */ jsx(EditorCellWrapperStyled, { ownerState: { size }, children: column.renderEditCell({
+                column,
+                row,
+                rowIdx: index,
+                /**
+                 * onRowChange es una función que se ejecuta cuando el usuario edita una celda.
+                 */
+                onRowChange: (updatedRow) => {
+                  if (onRowsChange) {
+                    onRowsChange([updatedRow], {
+                      indexes: [index],
+                      column
+                    });
+                  }
+                },
+                onClose: () => setEditingColumnKey(null)
+              }) });
+            }
+            if (column.renderCell) {
+              const cellContent = column.renderCell({
+                column,
+                row,
+                rowIdx: index,
+                isCellSelected: false,
+                tabIndex: -1,
+                /**
+                 * onRowChange es una función que se ejecuta cuando el usuario edita una celda.
+                 */
+                onRowChange: (updatedRow) => {
+                  if (onRowsChange) {
+                    onRowsChange([updatedRow], {
+                      indexes: [index],
+                      column
+                    });
                   }
-                });
-                return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: cellContent });
-              }
-              return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: row[column.key] ?? "-" });
-            })()
-          ]
-        }
-      ) }, column.key);
-    });
-  }, [columns, columnsConfig, row, onRowsChange, editingColumnKey, size]);
+                }
+              });
+              return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: cellContent });
+            }
+            return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: row[column.key] ?? "-" });
+          })()
+        ]
+      }
+    ) }, column.key);
+  });
   return {
     cardContent,
-    columnsCount: columns.length,
-    onOpenDetail
+    columnsCount: columns.length
   };
 }
 export {

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

@@ -1,7 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import { e as CardsContainerStyled } from "../../slots/DataGridSlot.js";
+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 { C as ContainerFlow } from "../../../ContainerFlow/ContainerFlow.js";
 function Cards(props) {
   const {
@@ -11,29 +15,80 @@ function Cards(props) {
     selectedRows,
     onSelectedRowsChange,
     onRowsChange,
-    cardsViewConfig
+    cardsViewConfig,
+    focusOnRowKey,
+    checkedRows,
+    onCheckedRowsChange
   } = props;
+  const containerRef = useRef(null);
   const processedColumns = useProcessedColumns(columns);
   const allProcessedColumns = useProcessedColumns(columns, {
     applyVisibilityFilter: false
   });
+  const handleOpenDetail = useModalDetail({
+    columns: allProcessedColumns,
+    viewMode: "cards",
+    onRowsChange
+  });
+  const cardHeight = useMemo(() => {
+    return calculateCardHeight({
+      visibleColumnsCount: processedColumns.length,
+      customMinHeight: cardsViewConfig?.customRender?.minHeight
+    });
+  }, [processedColumns.length, cardsViewConfig]);
+  useEffect(() => {
+    if (!focusOnRowKey) {
+      return;
+    }
+    const rowIndex = rows.findIndex(
+      (row) => rowKeyGetter(row) === focusOnRowKey
+    );
+    if (rowIndex === -1) {
+      return;
+    }
+    const timer = setTimeout(() => {
+      const container = containerRef.current;
+      if (!container) {
+        console.warn("container es null, abortando scroll");
+        return;
+      }
+      scrollToCardElement(
+        container,
+        focusOnRowKey,
+        "data-attribute",
+        "data-row-key"
+      );
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [focusOnRowKey, rows, rowKeyGetter, cardHeight]);
   if (processedColumns.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(CardsContainerStyled, { "data-testid": "cards-container", children: /* @__PURE__ */ jsx(ContainerFlow, { variant: "grid-layout", minWidth: 280, children: rows.map((row) => /* @__PURE__ */ jsx(
-    CardRow,
-    {
-      row,
-      columns: processedColumns,
-      originalColumns: allProcessedColumns,
-      rowKeyGetter,
-      selectedRows,
-      onSelectedRowsChange,
-      onRowsChange,
-      customRender: cardsViewConfig?.customRender
-    },
-    rowKeyGetter(row)
-  )) }) });
+  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;
+    return /* @__PURE__ */ jsx(
+      CardRow,
+      {
+        row,
+        columns: processedColumns,
+        originalColumns: allProcessedColumns,
+        rowKeyGetter,
+        selectedRows,
+        onSelectedRowsChange,
+        onRowsChange,
+        customRender: cardsViewConfig?.customRender,
+        minHeight: cardHeight,
+        isChecked,
+        showCheckbox,
+        checkedRows,
+        onCheckedRowsChange,
+        onOpenDetail: handleOpenDetail
+      },
+      rowKeyGetter(row)
+    );
+  }) }) });
 }
 export {
   Cards as C

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { f as CardDetailContainerStyled, c as ContainerLabelValueColumnStyled, d as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled } from "../../../../slots/DataGridSlot.js";
+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";
 function CardDetails({
   row,
   columns,
@@ -9,27 +9,45 @@ function CardDetails({
   size = "medium"
 }) {
   const [editingColumnKey, setEditingColumnKey] = useState(null);
-  return /* @__PURE__ */ jsx(CardDetailContainerStyled, { children: columns.map((column, index) => {
+  const [refreshCounter, setRefreshCounter] = useState(0);
+  const handleForceRefresh = useCallback(() => {
+    setRefreshCounter((prev) => prev + 1);
+  }, []);
+  const columnsWithRefresh = columns.map((column) => {
+    if (column.renderCell) {
+      return {
+        ...column,
+        // Agregar onAfterChange al objeto de la columna si no existe
+        ...!column.onAfterChange && {
+          onAfterChange: handleForceRefresh
+        }
+      };
+    }
+    return column;
+  });
+  return /* @__PURE__ */ jsx(CardDetailContainerStyled, { children: columnsWithRefresh.map((modifiedColumn, index) => {
     const configColumn = viewColumnsConfig.find(
-      (config) => config.key === column.key
+      (config) => config.key === modifiedColumn.key
     );
+    const originalColumn = columns[index];
+    const columnKey = `${originalColumn.key}-${refreshCounter}`;
     const shouldShowTitle = configColumn?.showTitle !== false;
     return /* @__PURE__ */ jsx(ContainerLabelValueColumnStyled, { children: /* @__PURE__ */ jsxs(
       ContentWrapperColumnStyled,
       {
-        "data-testid": `card-detail-column-${column.key}`,
-        onDoubleClick: column.renderEditCell && editingColumnKey !== column.key ? () => {
-          setEditingColumnKey(column.key);
+        "data-testid": `card-detail-column-${originalColumn.key}`,
+        onDoubleClick: modifiedColumn.renderEditCell && editingColumnKey !== modifiedColumn.key ? () => {
+          setEditingColumnKey(modifiedColumn.key);
         } : void 0,
         children: [
           shouldShowTitle && /* @__PURE__ */ jsxs(LabelHeaderColumnStyled, { variant: "body", color: "text.secondary", children: [
-            column.name,
+            modifiedColumn.name,
             ":"
           ] }),
           (() => {
-            if (column.renderEditCell && editingColumnKey === column.key) {
-              return /* @__PURE__ */ jsx(EditorCellWrapperStyled, { ownerState: { size }, children: column.renderEditCell({
-                column,
+            if (modifiedColumn.renderEditCell && editingColumnKey === modifiedColumn.key) {
+              return /* @__PURE__ */ jsx(EditorCellWrapperStyled, { ownerState: { size }, children: modifiedColumn.renderEditCell({
+                column: originalColumn,
                 row,
                 rowIdx: index,
                 /**
@@ -39,16 +57,16 @@ function CardDetails({
                   if (onRowsChange) {
                     onRowsChange([updatedRow], {
                       indexes: [index],
-                      column
+                      column: originalColumn
                     });
                   }
                 },
                 onClose: () => setEditingColumnKey(null)
               }) });
             }
-            if (column.renderCell) {
-              const cellContent = column.renderCell({
-                column,
+            if (modifiedColumn.renderCell) {
+              const cellContent = modifiedColumn.renderCell({
+                column: originalColumn,
                 row,
                 rowIdx: index,
                 isCellSelected: false,
@@ -60,18 +78,18 @@ function CardDetails({
                   if (onRowsChange) {
                     onRowsChange([updatedRow], {
                       indexes: [index],
-                      column
+                      column: originalColumn
                     });
                   }
                 }
               });
               return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: cellContent });
             }
-            return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: row[column.key] ?? "-" });
+            return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: row[modifiedColumn.key] ?? "-" });
           })()
         ]
       }
-    ) }, column.key);
+    ) }, columnKey);
   }) });
 }
 export {

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

@@ -4,4 +4,4 @@ import { CardHeaderProps } from '../../types';
  * - Checkbox en el lado izquierdo (solo si existen checkedRows/onCheckedRowsChange)
  * - Botones de acción en el lado derecho (IconButton + MenuActions)
  */
-export declare function CardHeader<TRow>({ row, onOpenDetail }: CardHeaderProps<TRow>): import("react/jsx-runtime").JSX.Element;
+export declare function CardHeader<TRow>({ row, onOpenDetail, isChecked, showCheckbox, checkedRows, onCheckedRowsChange, }: CardHeaderProps<TRow>): import("react/jsx-runtime").JSX.Element;