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

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";
@@ -28,7 +28,8 @@ function Cards(props) {
   const handleOpenDetail = useModalDetail({
     columns: allProcessedColumns,
     viewMode: "cards",
-    onRowsChange
+    onRowsChange,
+    rows
   });
   const cardHeight = useMemo(() => {
     return calculateCardHeight({
@@ -64,7 +65,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;
@@ -72,6 +73,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,17 +57,21 @@ 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
                     });
+                    handleForceRefresh();
                   }
                 },
                 onClose: () => setEditingColumnKey(null)
@@ -66,8 +79,8 @@ function CardDetails({
             }
             if (modifiedColumn.renderCell) {
               const cellContent = modifiedColumn.renderCell({
-                column: originalColumn,
-                row,
+                column: modifiedColumn,
+                row: currentRow,
                 rowIdx: index,
                 isCellSelected: false,
                 tabIndex: -1,
@@ -76,16 +89,47 @@ 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
                     });
+                    handleForceRefresh();
                   }
                 }
               });
               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";
@@ -15,7 +15,7 @@ function CardHeader({
   checkedRows,
   onCheckedRowsChange
 }) {
-  const { rowKeyGetter, rowActionsGetter, size, checkedRowsMultiple } = useDataGrid();
+  const { rowKeyGetter, rowActionsGetter, size } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
   const rowKey = useMemo(() => rowKeyGetter(row), [rowKeyGetter, row]);
   const onChange = useCallback(
@@ -23,23 +23,15 @@ function CardHeader({
       if (!onCheckedRowsChange || !checkedRows) {
         return;
       }
-      if (checkedRowsMultiple === false) {
-        if (checked) {
-          onCheckedRowsChange(/* @__PURE__ */ new Set([rowKey]));
-        } else {
-          onCheckedRowsChange(/* @__PURE__ */ new Set());
-        }
+      const newCheckedRows = new Set(checkedRows);
+      if (checked) {
+        newCheckedRows.add(rowKey);
       } else {
-        const newCheckedRows = new Set(checkedRows);
-        if (checked) {
-          newCheckedRows.add(rowKey);
-        } else {
-          newCheckedRows.delete(rowKey);
-        }
-        onCheckedRowsChange(newCheckedRows);
+        newCheckedRows.delete(rowKey);
       }
+      onCheckedRowsChange(newCheckedRows);
     },
-    [checkedRows, onCheckedRowsChange, rowKey, checkedRowsMultiple]
+    [checkedRows, onCheckedRowsChange, rowKey]
   );
   const anchorOrigin = useMemo(
     () => ({

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

@@ -2,9 +2,8 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef, useContext } from "react";
 import { SelectCellFormatter } from "react-data-grid";
 import { C as CheckboxFormatter } from "../Table/subcomponents/CheckboxFormatter.js";
-import { R as RadioButtonFormatter } from "../Table/subcomponents/RadioButtonFormatter.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,
@@ -15,14 +14,12 @@ const CheckboxCellAdapter = forwardRef(function CheckboxCellAdapter2(props, ref)
   } = props;
   const context = useContext(DataGridContext);
   const viewMode = context?.viewMode ?? "cards";
-  const checkedRowsMultiple = context?.checkedRowsMultiple;
   if (viewMode !== "table") {
     const handleClick = (e) => {
       e.stopPropagation();
     };
-    const FormatterComponent = checkedRowsMultiple === false ? RadioButtonFormatter : CheckboxFormatter;
     return /* @__PURE__ */ jsx(CheckboxCellWrapperStyled, { onClick: handleClick, children: /* @__PURE__ */ jsx(
-      FormatterComponent,
+      CheckboxFormatter,
       {
         ref,
         checked: 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/hooks/useSortColumnsRows.js

@@ -2,7 +2,6 @@ import { useState, useEffect, useMemo } from "react";
 import { g as getDragHeaderRenderer } from "./getDragHeaderRenderer.js";
 import { A as ActionsColumn } from "../subcomponents/ActionsColumn.js";
 import { f as filterColumnClassName, S as SelectColumn } from "../subcomponents/SelectColumn.js";
-import { R as RadioSelectColumn } from "../subcomponents/RadioSelectColumn.js";
 import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
 import { u as useFilters } from "../../../hooks/useFilters.js";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
@@ -39,7 +38,7 @@ function getComparator(columns, sortColumn) {
   }
 }
 const getColumIndex = (key, columnsConfig) => columnsConfig.findIndex((columnConfig) => columnConfig.key === key);
-const getInOrderColumns = (columns, hasCheckedRows, checkedRowsMultiple, columnsConfig, columnsWidths, rowActionsGetter) => {
+const getInOrderColumns = (columns, hasCheckedRows, columnsConfig, columnsWidths, rowActionsGetter) => {
   let filteredSortedColumns = columns.filter((column) => {
     const columnConfigIndex = getColumIndex(column.key, columnsConfig);
     const visible = columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].visible : true;
@@ -65,8 +64,7 @@ const getInOrderColumns = (columns, hasCheckedRows, checkedRowsMultiple, columns
     filteredSortedColumns = [ActionsColumn, ...filteredSortedColumns];
   }
   if (hasCheckedRows) {
-    const selectionColumn = checkedRowsMultiple === false ? RadioSelectColumn : SelectColumn;
-    filteredSortedColumns = [selectionColumn, ...filteredSortedColumns];
+    filteredSortedColumns = [SelectColumn, ...filteredSortedColumns];
   }
   return filteredSortedColumns;
 };
@@ -91,7 +89,6 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
     rowActionsGetter,
     checkedRows,
     onCheckedRowsChange,
-    checkedRowsMultiple,
     sortColumns,
     setSortColumns
   } = useDataGrid();
@@ -112,7 +109,6 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
         sourceColumns,
         !!checkedRows && !!onCheckedRowsChange,
         //Si están seteados se habilita el múltipe
-        checkedRowsMultiple,
         columnsConfig,
         columnsWidths,
         rowActionsGetter

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

@@ -137,13 +137,6 @@ export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> exte
     onSelectedRowsChange?: (mapRowsSelected: ReadonlySet<TKey>) => void;
     checkedRows?: ReadonlySet<TKey>;
     onCheckedRowsChange?: (mapRowsSelected: ReadonlySet<TKey>) => void;
-    /**
-     * Define si la selección de filas es múltiple (checkboxes) o única (radio buttons).
-     *
-     * - `true` (default): Permite seleccionar múltiples filas con checkboxes
-     * - `false`: Permite seleccionar solo una fila con radio buttons
-     */
-    checkedRowsMultiple?: boolean;
     onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, TSummaryRow>) => void>;
     /**
      * Propiedad opcional que recibe la configuración de las columnas
@@ -200,6 +193,10 @@ export interface UseModalDetailProps<TRow> {
     columns: readonly Column<TRow, any>[];
     viewMode: ViewMode;
     onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
+    /**
+     * Array completo de todas las filas (necesario para reconstruir el array al editar en el modal)
+     */
+    rows: readonly TRow[];
 }
 /**
  * Configuración de una columna específica en vista "cards"
@@ -259,6 +256,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/mui_extended/index.d.ts

@@ -8,7 +8,6 @@ export { Breadcrumbs } from './Breadcrumbs';
 export type { TLink } from './Breadcrumbs/types';
 export * from './Button/Button';
 export * from './CheckBox';
-export * from './RadioButton';
 export { CircularProgress } from './CircularProgress';
 export { Badge } from './Badge';
 export * from './ImageButton/ImageButton';