@m4l/components 9.4.5 → 9.4.6

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,
+          "& ..": {
+            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
       }
@@ -212,7 +248,7 @@ const dataGridStyles = {
    * Estilos el el input editor del DataGrid.
    * *****************************************
    */
-  inputTexEditor: ({ theme }) => ({
+  inputTexEditor: ({ theme, ownerState }) => ({
     appearance: "none",
     boxSizing: "border-box",
     inlineSize: "100%",
@@ -222,13 +258,19 @@ const dataGridStyles = {
     textAlign: "right",
     fontFamily: "inherit",
     background: "transparent",
+    border: `1px solid ${theme.vars.palette?.border.secondary}`,
+    borderRadius: theme.vars.size.borderRadius["r1-5"],
+    ...getSizeStyles(theme, ownerState?.size || "medium", "case", (size) => ({
+      height: size
+    })),
+    padding: theme.vars.size.baseSpacings.sp1,
+    outline: "none",
     "&:focus": {
       outline: "none",
-      border: "none",
+      border: `1px solid ${theme.vars.palette?.border.secondary}`,
       boxShadow: "none"
     },
     "&:hover": {
-      border: "none",
       outline: "none"
     },
     "&::placeholder": {
@@ -388,39 +430,25 @@ 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",
           color: theme.vars.palette.text.secondary,
           padding: `${theme.vars.size.baseSpacings.sp0} ${theme.vars.size.baseSpacings.sp2}`,
-          border: theme.vars.size.baseSpacings.sp0,
+          // border: theme.vars.size.baseSpacings.sp0,
           borderTop: "0.5px solid",
           //Se deja el valor directamente porque no está tokenizado
           borderBottom: theme.vars.size.borderStroke.container,
@@ -428,7 +456,7 @@ const dataGridStyles = {
           //Se deja el valor directamente porque no está tokenizado
           borderRight: "0.5px solid",
           //Se deja el valor directamente porque no está tokenizado
-          borderColor: `${theme.vars.palette?.border.disabled} !important`,
+          borderColor: `${theme.vars.palette?.border.secondary} !important`,
           ...theme.colorSchemes.finalTheme.typography.body
         },
         "&:has(> .M4LRadio-root)": {
@@ -684,26 +712,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
       }
@@ -744,7 +800,10 @@ const dataGridStyles = {
    * Contenedor de los cards
    */
   cardsContainer: () => ({
-    height: "auto",
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
+    minHeight: 0,
     overflow: "auto",
     "& > .M4LContainerFlow-root": {
       alignItems: "start"
@@ -882,33 +941,54 @@ const dataGridStyles = {
       width: "100%",
       textAlign: "inherit",
       color: theme.vars.palette.text.secondary,
-      padding: `${theme.vars.size.baseSpacings.sp0} ${theme.vars.size.baseSpacings.sp2}`,
-      border: theme.vars.size.baseSpacings.sp0,
-      borderTop: "0.5px solid",
-      borderBottom: theme.vars.size.borderStroke.container,
-      borderLeft: "0.5px solid",
-      borderRight: "0.5px solid",
-      borderColor: "transparent",
+      padding: `${theme.vars.size.baseSpacings.sp0} ${theme.vars.size.baseSpacings.sp1}`,
+      border: `1px solid ${theme.vars.palette.border.secondary}`,
+      borderRadius: theme.vars.size.borderRadius["r1-5"],
+      outline: "none",
       ...theme.colorSchemes.finalTheme.typography.body,
+      ...getSizeStyles(theme, ownerState?.size || "medium", "case", (size) => ({
+        height: size
+      })),
       "&:focus": {
-        borderTop: "0.5px solid",
-        borderBottom: theme.vars.size.borderStroke.container,
-        borderLeft: "0.5px solid",
-        borderRight: "0.5px solid",
-        borderColor: `${theme.vars.palette.primary.focusVisible} !important`,
+        border: `1px solid ${theme.vars.palette.border.secondary}`,
         outline: "none",
         boxShadow: "none"
       },
       "&:hover": {
-        borderTop: "0.5px solid",
-        borderBottom: theme.vars.size.borderStroke.container,
-        borderLeft: "0.5px solid",
-        borderRight: "0.5px solid",
-        borderColor: "transparent",
+        border: `1px solid ${theme.vars.palette.border.secondary}`,
         outline: "none"
       }
     }
   }),
+  /**
+   * Placeholder editable
+   */
+  editablePlaceholder: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp1
+  }),
+  /**
+   * EditLabel
+   */
+  editLabel: ({ theme, ownerState }) => ({
+    width: "auto",
+    opacity: 1,
+    transition: "opacity 0.3s ease",
+    ...getTypographyStyles(
+      theme.generalSettings.isMobile,
+      ownerState?.size || "medium",
+      "body"
+    )
+  }),
+  /**
+   * Botón para mostrar el input en los editores (cards)
+   */
+  iconButtonEdit: ({ theme }) => ({
+    "& .M4LIcon-icon": {
+      backgroundColor: `${theme.vars.palette.text.secondary} !important`
+    }
+  }),
   /**
    * Header de la card personalizada (avatar + nombre + email)
    */

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

@@ -182,6 +182,9 @@ function DataGridProvider(props) {
       setViewModeState(
         getViewMode(id, resolvedDefaultConfig, defaultViewMode) ?? "table"
       );
+      setViewModeState(
+        getViewMode(id, resolvedDefaultConfig, defaultViewMode) ?? "table"
+      );
       updateConfigColumns(
         "table",
         getInitialColumnsConfig(

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/ColumnColorFormatter/tests/ColumnColorFormatter.test.d.ts

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

package/components/DataGrid/formatters/ColumnColorFormatter/tests/useColumnColor.test.d.ts

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useMemo, useEffect } from "react";
-import { d as CardsContainerStyled } from "../../slots/DataGridSlot.js";
+import { e 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";
@@ -29,7 +29,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 +78,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 +86,8 @@ function Cards(props) {
       CardRow,
       {
         row,
+        rows,
+        rowIndex,
         columns: processedColumns,
         originalColumns: allProcessedColumns,
         rowKeyGetter,

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

@@ -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 { f as CardDetailContainerStyled, 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 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/subcomponents/Cards/subcomponents/CardHeader/index.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo, useCallback } from "react";
 import { useEnvironment } from "@m4l/core";
 import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-import { f as CardHeaderStyled, g as CardHeaderLeftStyled, h as CardHeaderRightStyled } from "../../../../slots/DataGridSlot.js";
+import { g as CardHeaderStyled, h as CardHeaderLeftStyled, i as CardHeaderRightStyled } from "../../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { C as CheckboxCellAdapter } from "../../../CheckboxCellAdapter/index.js";
 import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";

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

@@ -3,9 +3,9 @@ import { CardRowProps } from '../../types';
 /**
  * Componente que muestra una fila de tarjetas.
  */
-declare function CardRowComponent<TRow, TKey extends RowKey = RowKey>({ row, columns, originalColumns, rowKeyGetter, selectedRows, onSelectedRowsChange, onRowsChange, customRender, minHeight, isChecked, checkedRows, showCheckbox, onCheckedRowsChange, onOpenDetail, }: CardRowProps<TRow, TKey>): import("react/jsx-runtime").JSX.Element;
+declare function CardRowComponent<TRow, TKey extends RowKey = RowKey>({ row, rows, rowIndex, columns, originalColumns, rowKeyGetter, selectedRows, onSelectedRowsChange, onRowsChange, customRender, minHeight, isChecked, checkedRows, showCheckbox, onCheckedRowsChange, onOpenDetail, }: CardRowProps<TRow, TKey>): import("react/jsx-runtime").JSX.Element;
 /**
- *
+ * Componente que muestra CardRow
  */
 export declare const CardRow: typeof CardRowComponent;
 export {};

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

@@ -1,12 +1,14 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useMemo } from "react";
-import { i as CardContentWrapperStyled, j as CardContentStyled, k as CardStyled } from "../../../../slots/DataGridSlot.js";
+import { j as CardContentWrapperStyled, k as CardContentStyled, l as CardStyled } from "../../../../slots/DataGridSlot.js";
 import { L as LazyLoadCard } from "../LazyLoadCard/index.js";
 import { u as useCardContent } from "../../hooks/useCardContent.js";
 import { C as CardHeader } from "../CardHeader/index.js";
 import { deepEqual } from "fast-equals";
 function CardRowComponent({
   row,
+  rows,
+  rowIndex,
   columns,
   originalColumns,
   rowKeyGetter,
@@ -24,6 +26,8 @@ function CardRowComponent({
   const hasCustomRender = customRender !== void 0;
   const { cardContent } = useCardContent({
     row,
+    rows,
+    rowIndex,
     columns,
     onRowsChange
   });

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

@@ -78,6 +78,14 @@ export interface CardRowProps<TRow, TKey extends RowKey = RowKey> {
      * Fila que se mostrará en la tarjeta
      */
     row: TRow;
+    /**
+     * 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;
     /**
      * Columnas que se mostrarán en la tarjeta (procesadas, filtradas por visibilidad)
      */
@@ -140,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/subcomponents/CheckboxCellAdapter/index.js

@@ -4,7 +4,7 @@ import { SelectCellFormatter } from "react-data-grid";
 import { C as CheckboxFormatter } from "../Table/subcomponents/CheckboxFormatter.js";
 import { R as RadioFormatter } from "../Table/subcomponents/RadioFormatter.js";
 import { a as DataGridContext } from "../../contexts/DataGridContext/index.js";
-import { l as CheckboxCellWrapperStyled } from "../../slots/DataGridSlot.js";
+import { m as CheckboxCellWrapperStyled } from "../../slots/DataGridSlot.js";
 const CheckboxCellAdapter = forwardRef(function CheckboxCellAdapter2(props, ref) {
   const {
     value,

package/components/DataGrid/subcomponents/ControlNavigate/ControlNavigate.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useIsMobile } from "@m4l/graphics";
-import { m as ControlNavigateStyled } from "../../slots/DataGridSlot.js";
+import { n as ControlNavigateStyled } from "../../slots/DataGridSlot.js";
 import { R as RowsCount } from "../HeaderActions/subcomponents/RowsCount/index.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { P as Pager } from "../../../Pager/Pager.js";

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

@@ -6,7 +6,7 @@ import { V as ViewMode } from "./subcomponents/ViewMode/index.js";
 import { u as useDataGrid } from "../../hooks/useDataGrid.js";
 import { useIsMobile } from "@m4l/graphics";
 import { M as MobileMenuActions } from "./subcomponents/MobileMenuActions/index.js";
-import { A as ActionsRootStyled, n as ActionsConfigContainerStyled, o as ContainerLeftActionsStyled, p as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
+import { A as ActionsRootStyled, o as ActionsConfigContainerStyled, p as ContainerLeftActionsStyled, q as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 function HeaderActions(props) {
   const {
@@ -29,7 +29,7 @@ function HeaderActions(props) {
   ] }) : /* @__PURE__ */ jsxs(ActionsConfigContainerStyled, { ownerState: { withPager }, children: [
     /* @__PURE__ */ jsxs(ContainerLeftActionsStyled, { children: [
       leftActions,
-      typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}),
+      typeof rowHeights !== "number" && viewMode !== "cards" && /* @__PURE__ */ jsx(Density, {}),
       withLocalFilters && /* @__PURE__ */ jsx(Filter, {}),
       withSettings && !(viewMode === "cards" && cardsViewConfig?.customRender) && /* @__PURE__ */ jsx(Settings, { ...settingsProps, columns }),
       cardsViewConfig !== void 0 && /* @__PURE__ */ jsx(ViewMode, {})

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/RowsCount/index.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
 import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-import { R as RowsCountRootStyled, q as RowsCountLabelStyled, r as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
+import { R as RowsCountRootStyled, r as RowsCountLabelStyled, s as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
 function RowsCount() {
   const { rowsCount, size } = useDataGrid();
   const { getLabel } = useModuleDictionary();

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfig/index.js

@@ -4,7 +4,7 @@ import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import DataGrid from "react-data-grid";
 import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
 import { p as pathIcons } from "../../../../../../icons.js";
-import { s as ColumnsConfigWrapperStyled, t as ColumnsConfigDataGridStyled, u as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, v as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
+import { t as ColumnsConfigWrapperStyled, u as ColumnsConfigDataGridStyled, v as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, w as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../../../dictionary.js";
 import { C as ColumnInteractiveCheckFormatter } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/formatter.js";
 function getRowsFromColumnsConfig(columnsConfig, columns) {

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfigCards/index.js

@@ -4,7 +4,7 @@ import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import DataGrid from "react-data-grid";
 import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
 import { p as pathIcons } from "../../../../../../icons.js";
-import { s as ColumnsConfigWrapperStyled, t as ColumnsConfigDataGridStyled, u as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, v as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
+import { t as ColumnsConfigWrapperStyled, u as ColumnsConfigDataGridStyled, v as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, w as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../../../dictionary.js";
 import { C as ColumnInteractiveCheckFormatter } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/formatter.js";
 function getRowsFromColumnsConfigCards(columnsConfigCards, columns) {

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/ViewMode/index.js

@@ -6,7 +6,7 @@ import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButt
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
-import { w as ContainerToggleCardsStyled, x as CardToggleButtonStyled, y as TextToggleCardButtonStyled } from "../../../../slots/DataGridSlot.js";
+import { x as ContainerToggleCardsStyled, y as CardToggleButtonStyled, z as TextToggleCardButtonStyled } from "../../../../slots/DataGridSlot.js";
 import { I as Icon } from "../../../../../Icon/Icon.js";
 function ViewMode() {
   const { host_static_assets, environment_assets } = useEnvironment();

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

@@ -8,7 +8,7 @@ import { a as filterHeight } from "./subcomponents/SelectColumn.js";
 import { u as useSortColumnsRows } from "./hooks/useSortColumnsRows.js";
 import { u as useFilters } from "../../hooks/useFilters.js";
 import { u as useDataGrid } from "../../hooks/useDataGrid.js";
-import { z as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
+import { B as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
 import { u as useHeaderMenuActions } from "./hooks/useHeaderMenuActions.js";
 import { H as HeaderRenderClick } from "./subcomponents/HeaderRenderClick/HeaderRenderClick.js";
 function Table(props) {

package/components/DataGrid/subcomponents/Table/subcomponents/CheckboxFormatter.js

@@ -12,6 +12,7 @@ const CheckboxFormatter = forwardRef(function CheckboxFormatter2({ onChange, che
       checked,
       size: "small",
       icon: /* @__PURE__ */ jsx(CheckboxIcon, {}),
+      disableRipple: true,
       checkedIcon: /* @__PURE__ */ jsx(CheckboxCheckedIcon, {}),
       indeterminateIcon: /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {}),
       onChange: handleChange,

package/components/DataGrid/subcomponents/Table/subcomponents/CustomIcons.js

@@ -1,22 +1,47 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { SvgIcon } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useEnvironment } from "@m4l/core";
+import "@mui/material";
+import { I as Icon } from "../../../../Icon/Icon.js";
 function CheckboxIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, { ...props, viewBox: "0 0 16 17", className: "checkbox-unChecked", children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "17", viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsx("g", { "clip-path": "url(#clip0_13395_49048)", children: /* @__PURE__ */ jsx("path", { d: "M13.0156 2.5H3.01562C2.75041 2.5 2.49605 2.60536 2.30852 2.79289C2.12098 2.98043 2.01563 3.23478 2.01562 3.5V13.5C2.01563 13.7652 2.12098 14.0196 2.30852 14.2071C2.49605 14.3946 2.75041 14.5 3.01562 14.5H13.0156C13.2808 14.5 13.5352 14.3946 13.7227 14.2071C13.9103 14.0196 14.0156 13.7652 14.0156 13.5V3.5C14.0156 3.23478 13.9103 2.98043 13.7227 2.79289C13.5352 2.60536 13.2808 2.5 13.0156 2.5ZM3.01562 13.5V3.5H13.0156V13.5H3.01562Z", fill: "#323B3B" }) }),
-    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_13395_49048", children: /* @__PURE__ */ jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(0 0.5)" }) }) })
-  ] }) });
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const uncheckedIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/check_box/assets/icons/unchecked.svg`;
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      src: uncheckedIconUrl,
+      size: "small",
+      color: "text.primary",
+      className: "checkbox-unChecked",
+      ...props
+    }
+  );
 }
 function CheckboxCheckedIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, viewBox: "0 0 16 17", className: "checkbox-checked", children: [
-    /* @__PURE__ */ jsxs("g", { "clip-path": "url(#clip0_13395_49057)", children: [
-      /* @__PURE__ */ jsx("path", { d: "M13.4323 2H2.59896C2.31164 2 2.03609 2.11414 1.83293 2.3173C1.62976 2.52047 1.51563 2.79602 1.51562 3.08333V13.9167C1.51563 14.204 1.62976 14.4795 1.83293 14.6827C2.03609 14.8859 2.31164 15 2.59896 15H13.4323C13.7196 15 13.9952 14.8859 14.1983 14.6827C14.4015 14.4795 14.5156 14.204 14.5156 13.9167V3.08333C14.5156 2.79602 14.4015 2.52047 14.1983 2.3173C13.9952 2.11414 13.7196 2 13.4323 2Z", fill: "#323B3B" }),
-      /* @__PURE__ */ jsx("path", { d: "M6.92119 11.6245L4.10001 8.8274L4.99759 7.95696L6.92119 9.84467L11.1014 5.70001L11.9996 6.58993L6.92119 11.6245Z", fill: "#F3F5F7" })
-    ] }),
-    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_13395_49057", children: /* @__PURE__ */ jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(0 0.5)" }) }) })
-  ] });
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const checkedIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/check_box/assets/icons/checked.svg`;
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      src: checkedIconUrl,
+      size: "small",
+      color: "primary.enabled",
+      className: "checkbox-checked",
+      ...props
+    }
+  );
 }
 function CheckboxIndeterminateIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.75 8h-6.5a.75.75 0 00-.75.75v.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-.5a.75.75 0 00-.75-.75z" }) });
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const indeterminateIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/check_box/assets/icons/indeterminate.svg`;
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      src: indeterminateIconUrl,
+      size: "small",
+      color: "primary.enabled",
+      ...props
+    }
+  );
 }
 export {
   CheckboxIndeterminateIcon as C,

package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.js

@@ -5,7 +5,7 @@ import { useDrag, useDrop } from "react-dnd";
 import { renderHeaderCell } from "react-data-grid";
 import { u as useFocusRef } from "../hooks/useFocusRef.js";
 import { u as useFilters } from "../../../hooks/useFilters.js";
-import { N as NameColumnIconStyled, B as NameColumnStyled, I as IconColumnStyled, F as DraggableHeaderRootStyled, G as ButtonHeaderActionsStyled, H as DraggableWrapperInputBaseStyled, J as IconSearchStyled, K as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
+import { N as NameColumnIconStyled, F as NameColumnStyled, G as IconColumnStyled, H as DraggableHeaderRootStyled, J as ButtonHeaderActionsStyled, K as DraggableWrapperInputBaseStyled, M as IconSearchStyled, O as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../icons.js";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { I as Icon } from "../../../../Icon/Icon.js";

package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/HeaderRenderClick.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useMemo, useEffect, useCallback } from "react";
 import { useModuleDictionary } from "@m4l/core";
 import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
-import { M as MenuListStyled, O as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
+import { P as MenuListStyled, Q as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
 import { M as MenuDivider } from "../../../../../mui_extended/MenuDivider/MenuDivider.js";
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";

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

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { P as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
+import { S as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
 function autoFocusAndSelect(input) {
   input?.focus();
   input?.select();

package/components/DataGrid/types.d.ts

@@ -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/formatters/ImageFormatter/ImageFormatter.styles.js

@@ -20,6 +20,7 @@ const imageFormatterStyles = {
     border: `1px solid ${theme.vars.palette.border.disabled}`,
     ...!ownerState?.hasDefinedSize && {
       height: "90%",
+      width: "auto",
       aspectRatio: "1 / 1"
     },
     objectFit: ownerState?.cover ? "cover" : "contain"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.4.5",
+  "version": "9.4.6",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

package/components/DataGrid/formatters/ColumnIconFormatter/constants.d.ts

@@ -1,4 +0,0 @@
-/**
- * Clave única para identificar el componente IconAction en el sistema
- */
-export declare const COLUMN_ICON_KEY_COMPONENT = "M4LColumnIconFormatter";