@m4l/components 9.3.34-JT25112025.beta.1 → 9.3.34-JT25112025.beta.2

package/@types/export.d.ts

@@ -55,9 +55,6 @@ declare module '@mui/material/styles' {
     M4LCheckBox?: {
       styleOverrides?: ComponentsOverrides<Theme>['M4LCheckBox'];
     };
-    M4LRadioButton?: {
-      styleOverrides?: ComponentsOverrides<Theme>['M4LRadioButton'];
-    };
     M4LDataGrid?: {
       styleOverrides?: ComponentsOverrides<Theme>['M4LDataGrid'];
     };

package/@types/types.d.ts

@@ -76,10 +76,6 @@ import {
   CheckBoxOwnerState,
   CheckBoxSlotsType,
 } from '../components/mui_extended/CheckBox/types';
-import {
-  RadioButtonOwnerState,
-  RadioButtonSlotsType,
-} from '../components/mui_extended/RadioButton/types';
 import {
   RHFNumberInputOwnerState,
   RHFNumberInputSlotsType,
@@ -296,19 +292,10 @@ import {
   ImageTextOwnerState,
   ImageTextSlotsType,
 } from '../components/ImageText/types';
-import {
-  FormContainerOwnerState,
-  FormContainerSlotsType,
-} from '../components/FormContainer/types';
-import { TabsNavigatorSlotsType } from 'src/components/TabsNavigator/types';
-import {
-  EditLabelOwnerState,
-  EditLabelSlotsType,
-} from '../components/EditLabel/types';
-import {
-  MFIsolationAppOwnerState,
-  MFIsolationAppSlotsType,
-} from '../components/MFIsolationApp/types';
+import { FormContainerOwnerState, FormContainerSlotsType } from '../components/FormContainer/types';
+import { TabsNavigatorSlotsType } from '../components/TabsNavigator/types';
+import { EditLabelOwnerState, EditLabelSlotsType } from '../components/EditLabel/types';
+import { MFIsolationAppOwnerState, MFIsolationAppSlotsType } from '../components/MFIsolationApp/types';
 import {
   TagsFormatterOwnerState,
   TagsFormatterSlotsType,
@@ -341,7 +328,6 @@ declare module '@mui/material/styles' {
     M4LSelect: SelectSlotsType;
     M4LTypography: TypographySlotsType;
     M4LCheckBox: CheckBoxSlotsType;
-    M4LRadioButton: RadioButtonSlotsType;
     M4LRHFNumberInput: RHFNumberInputSlotsType;
     M4LTab: TabSlotsType;
     M4LButton: ButtonSlotsType;
@@ -356,8 +342,7 @@ declare module '@mui/material/styles' {
     M4LChip: ChipSlotsType;
     M4LCircularProgress: CircularProgressSlotsType;
     M4LPaperForm: PaperFormSlotsType;
-    M4LWindowBase: WindowBaseType;
-    a;
+    M4LWindowBase: WindowBaseType;a
     M4LWindowConfirm: WindowConfirmType;
     M4LAppBar: AppBarSlotsType;
     M4LDialog: DialogType;
@@ -435,7 +420,6 @@ declare module '@mui/material/styles' {
     M4LSelect: Partial<SelectOwnerState>;
     M4LTypography: Partial<TypographyOwnerState>;
     M4LCheckBox: Partial<CheckBoxOwnerState>;
-    M4LRadioButton: Partial<RadioButtonOwnerState>;
     M4LRHFNumberInput: Partial<RHFNumberInputOwnerState>;
     M4LTab: Partial<TabOwnerState>;
     M4LButton: Partial<ButtonOwnerState>;
@@ -627,11 +611,6 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LCheckBox'];
       variants?: ComponentsVariants['M4LCheckBox'];
     };
-    M4LRadioButton?: {
-      defaultProps?: ComponentsPropsList['M4LRadioButton'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LRadioButton'];
-      variants?: ComponentsVariants['M4LRadioButton'];
-    };
     M4LActionCancel?: {
       defaultProps?: ComponentsPropsList['M4LActionCancel'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LActionCancel'];

package/components/DataGrid/DataGrid.js

@@ -30,7 +30,6 @@ function DataGrid(props) {
     initialRowHeightVariant,
     checkedRows,
     onCheckedRowsChange,
-    checkedRowsMultiple,
     dataTestId = "",
     customHeader: CustomHeader,
     visibleCustomHeader = true,
@@ -88,7 +87,6 @@ function DataGrid(props) {
           checkedRows,
           rowActionsGetter,
           onCheckedRowsChange,
-          checkedRowsMultiple,
           rowKeyGetter,
           rows,
           onChangeUserColumns,

package/components/DataGrid/Datagrid.styles.js

@@ -24,6 +24,42 @@ const dataGridStyles = {
     flex: 1,
     overflow: "hidden",
     "& .rdg .MuiCheckbox-root": {
+      overflow: "visible",
+      padding: 0,
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.small.action,
+        height: theme.vars.size.mobile.small.action
+      } : {
+        width: theme.vars.size.desktop.small.action,
+        height: theme.vars.size.desktop.small.action
+      },
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      borderRadius: theme.size.borderRadius.r1,
+      "&:hover": {
+        backgroundColor: theme.vars.palette.default.hoverOpacity
+      },
+      "&:active": {
+        backgroundColor: theme.vars.palette.default.activeOpacity
+      },
+      "&.Mui-checked": {
+        "&:hover": {
+          backgroundColor: theme.vars.palette.primary.hoverOpacity,
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette.primary.hover
+          }
+        },
+        "&:active": {
+          backgroundColor: theme.vars.palette.primary.activeOpacity,
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette.primary.active
+          }
+        }
+      },
+      "&.Mui-focusVisible, &:focus-visible": {
+        outline: `1px solid ${theme.vars.palette.primary.focusVisible}`
+      },
       "& > svg": {
         color: theme.vars.palette.text.secondary
       }
@@ -380,33 +416,19 @@ const dataGridStyles = {
           outline: `2px solid var(--rdg-selection-color)`,
           outlineOffset: "-2px"
         },
+        "&:has(> .MuiCheckbox-root)": {
+          overflow: "visible",
+          paddingInline: 0
+        },
         "& .checkbox-checked": {
-          "& path:first-of-type": {
-            fill: theme.vars.palette.primary.main
-          },
-          ...getSizeStyles(
-            theme,
-            ownerState?.size || "medium",
-            "base",
-            (size) => ({
-              minHeight: size,
-              height: size
-            })
-          )
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette.primary.enabled
+          }
         },
         "& .checkbox-unChecked": {
-          "& path": {
-            fill: theme.vars.palette.text.primary
-          },
-          ...getSizeStyles(
-            theme,
-            ownerState?.size || "medium",
-            "base",
-            (size) => ({
-              minHeight: size,
-              height: size
-            })
-          )
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette.text.primary
+          }
         },
         "& .rdg-text-editor": {
           textAlign: "inherit",
@@ -423,10 +445,6 @@ const dataGridStyles = {
           borderColor: `${theme.vars.palette?.border.disabled} !important`,
           ...theme.colorSchemes.finalTheme.typography.body
         },
-        "&:has(> .M4LRadioButton-root)": {
-          overflow: "visible",
-          paddingInline: 0
-        },
         "&.rdg-cell-frozen": {
           display: "flex",
           boxShadow: "unset",
@@ -676,26 +694,54 @@ const dataGridStyles = {
    * Estilos para el wrapper del CheckboxCellAdapter
    * Aplica los mismos estilos que los checkboxes dentro de celdas rdg
    */
-  checkboxCellWrapper: ({ theme, ownerState }) => ({
+  checkboxCellWrapper: ({ theme }) => ({
     "& .checkbox-checked": {
-      "& path:first-of-type": {
-        fill: theme.vars.palette.primary.main
-      },
-      ...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
-        minHeight: size,
-        height: size
-      }))
+      "& .M4LIcon-icon": {
+        backgroundColor: theme.vars.palette.primary.enabled
+      }
     },
     "& .checkbox-unChecked": {
-      "& path": {
-        fill: theme.vars.palette.text.primary
-      },
-      ...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
-        minHeight: size,
-        height: size
-      }))
+      "& .M4LIcon-icon": {
+        backgroundColor: theme.vars.palette.text.primary
+      }
     },
     "& .MuiCheckbox-root": {
+      overflow: "visible",
+      padding: 0,
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.small.action,
+        height: theme.vars.size.mobile.small.action
+      } : {
+        width: theme.vars.size.desktop.small.action,
+        height: theme.vars.size.desktop.small.action
+      },
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      borderRadius: theme.size.borderRadius.r1,
+      "&:hover": {
+        backgroundColor: theme.vars.palette.default.hoverOpacity
+      },
+      "&:active": {
+        backgroundColor: theme.vars.palette.default.activeOpacity
+      },
+      "&.Mui-checked": {
+        "&:hover": {
+          backgroundColor: theme.vars.palette.primary.hoverOpacity,
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette.primary.hover
+          }
+        },
+        "&:active": {
+          backgroundColor: theme.vars.palette.primary.activeOpacity,
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette.primary.active
+          }
+        }
+      },
+      "&.Mui-focusVisible, &:focus-visible": {
+        outline: `1px solid ${theme.vars.palette.primary.focusVisible}`
+      },
       "& > svg": {
         color: theme.vars.palette.text.secondary
       }
@@ -896,6 +942,28 @@ const dataGridStyles = {
       }
     }
   }),
+  /**
+   * Placeholder editable
+   */
+  editablePlaceholder: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1)
+  }),
+  /**
+   * EditLabel
+   */
+  editLabel: ({ theme, ownerState }) => ({
+    width: "auto",
+    opacity: 1,
+    transition: "opacity 0.3s ease",
+    ...getTypographyStyles(
+      theme.generalSettings.isMobile,
+      ownerState?.size || "medium",
+      "body"
+    )
+  }),
+  iconButtonEdit: () => ({}),
   /**
    * Header de la card personalizada (avatar + nombre + email)
    */

package/components/DataGrid/contexts/DataGridContext/index.js

@@ -155,7 +155,6 @@ function DataGridProvider(props) {
     initialRowHeightVariant = "standard",
     checkedRows,
     onCheckedRowsChange,
-    checkedRowsMultiple,
     rowKeyGetter,
     onChangeUserColumns,
     externalSortSettings: sortSettings,
@@ -531,7 +530,6 @@ function DataGridProvider(props) {
         rowActionsGetter,
         setRowHeightVariant: setCurrentRowHeightInternal,
         onCheckedRowsChange,
-        checkedRowsMultiple,
         rowKeyGetter,
         onChangeUserColumns,
         sortColumns,

package/components/DataGrid/contexts/DataGridContext/types.d.ts

@@ -79,7 +79,7 @@ export interface IGridConfig {
 export interface IGridConfigExtended extends IGridConfig {
     columnsConfigCards?: BaseConfigColumnCards[];
 }
-export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<GridProps<TRow, TSummaryRow, TKey>, 'rows' | 'columns' | 'rowActionsGetter' | 'rowHeaderHeights' | 'rowHeights' | 'initialRowHeightVariant' | 'checkedRows' | 'onCheckedRowsChange' | 'checkedRowsMultiple' | 'rowKeyGetter' | 'onChangeUserColumns' | 'defaultUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'defaultViewMode' | 'cardsViewConfig'> {
+export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<GridProps<TRow, TSummaryRow, TKey>, 'rows' | 'columns' | 'rowActionsGetter' | 'rowHeaderHeights' | 'rowHeights' | 'initialRowHeightVariant' | 'checkedRows' | 'onCheckedRowsChange' | 'rowKeyGetter' | 'onChangeUserColumns' | 'defaultUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'defaultViewMode' | 'cardsViewConfig'> {
     id: number | string;
     children: ReactNode;
     rowsCount: number;
@@ -92,7 +92,7 @@ export type RowHeightState = {
     rowHeight: number;
     rowHeaderHeight: number;
 };
-export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<DataGridProviderProps<TRow, TSummaryRow, TKey>, 'rows' | 'checkedRows' | 'onCheckedRowsChange' | 'checkedRowsMultiple' | 'rowHeights' | 'rowsCount' | 'rowActionsGetter' | 'rowKeyGetter' | 'onChangeUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'viewMode' | 'onViewModeChange' | 'defaultViewMode' | 'cardsViewConfig'> {
+export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<DataGridProviderProps<TRow, TSummaryRow, TKey>, 'rows' | 'checkedRows' | 'onCheckedRowsChange' | 'rowHeights' | 'rowsCount' | 'rowActionsGetter' | 'rowKeyGetter' | 'onChangeUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'viewMode' | 'onViewModeChange' | 'defaultViewMode' | 'cardsViewConfig'> {
     getConfigColumns: (viewMode: ViewMode) => IViewConfig[];
     onChangeColumnsConfig: (viewMode: ViewMode, config: IViewConfig[]) => void;
     onChangeColumnsOrder: (viewMode: ViewMode, sourceKey: string, targetKey: string) => void;

package/components/DataGrid/dictionary.d.ts

@@ -38,4 +38,5 @@ export declare const DICTIONARY: {
     VIEW_MODE_CARDS: string;
     TOOLTIP_VIEW_MODE: string;
     DETAILS: string;
+    EDIT_PLACEHOLDER: string;
 };

package/components/DataGrid/dictionary.js

@@ -37,7 +37,8 @@ const DICTIONARY = {
   VIEW_MODE_TABLE: `${DATAGRID_ID_DICTIONARY}.view_mode_table`,
   VIEW_MODE_CARDS: `${DATAGRID_ID_DICTIONARY}.view_mode_cards`,
   TOOLTIP_VIEW_MODE: `${DATAGRID_ID_DICTIONARY}.tooltip_view_mode`,
-  DETAILS: `${DATAGRID_ID_DICTIONARY}.details`
+  DETAILS: `${DATAGRID_ID_DICTIONARY}.details`,
+  EDIT_PLACEHOLDER: `${DATAGRID_ID_DICTIONARY}.edit_placeholder`
 };
 export {
   DICTIONARY as D,

package/components/DataGrid/formatters/ColumnTagsFormatter/tests/useColumnTags.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -14,7 +14,8 @@ import { A as ActionCancel } from "../../CommonActions/components/ActionCancel/A
 const useModalDetail = ({
   columns,
   viewMode,
-  onRowsChange
+  onRowsChange,
+  rows
 }) => {
   const { getConfigColumns, size } = useDataGrid();
   const { openModal, closeModal } = useModal();
@@ -24,6 +25,7 @@ const useModalDetail = ({
   const handleOpenDetail = useCallback(
     (row) => {
       const viewColumnsConfig = getConfigColumns(viewMode);
+      const rowIndex = rows.findIndex((r) => r === row);
       openModal({
         initialWidth: 500,
         initialHeight: 680,
@@ -42,6 +44,8 @@ const useModalDetail = ({
                 CardDetails,
                 {
                   row,
+                  rows,
+                  rowIndex,
                   columns,
                   viewColumnsConfig,
                   onRowsChange,
@@ -56,6 +60,7 @@ const useModalDetail = ({
     },
     [
       columns,
+      rows,
       onRowsChange,
       size,
       getConfigColumns,

package/components/DataGrid/icons.d.ts

@@ -27,4 +27,5 @@ export declare const pathIcons: {
     mail: string;
     smartphone: string;
     internet: string;
+    edit: string;
 };

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/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/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] ?? "-" });
           })()
         ]