@m4l/components 9.3.34-BE20251126-beta.1 → 9.3.34-JT20251210-beta.1

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,8 +2,9 @@ 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 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,
@@ -14,12 +15,14 @@ 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 ? RadioFormatter : CheckboxFormatter;
     return /* @__PURE__ */ jsx(CheckboxCellWrapperStyled, { onClick: handleClick, children: /* @__PURE__ */ jsx(
-      CheckboxFormatter,
+      FormatterComponent,
       {
         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/Density/index.js

@@ -1,7 +1,6 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { useTheme } from "@mui/material";
 import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
 import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
 import { p as pathIcons } from "../../../../icons.js";
@@ -45,7 +44,6 @@ function Density() {
     environment_assets,
     getLabel
   ]);
-  const theme = useTheme();
   const currenViewIcon = useMemo(() => {
     if (currentRowHeightVariant === "compact") {
       return `${host_static_assets}/${environment_assets}/${pathIcons.compact}`;
@@ -62,7 +60,6 @@ function Density() {
     MenuActions,
     {
       arrowType: "right-top",
-      menuActionSx: theme.components?.M4LDataGridDensityPopover?.styleOverrides,
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "left" },
       menuActions,

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,6 +2,7 @@ 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";
@@ -38,7 +39,7 @@ function getComparator(columns, sortColumn) {
   }
 }
 const getColumIndex = (key, columnsConfig) => columnsConfig.findIndex((columnConfig) => columnConfig.key === key);
-const getInOrderColumns = (columns, hasCheckedRows, columnsConfig, columnsWidths, rowActionsGetter) => {
+const getInOrderColumns = (columns, hasCheckedRows, checkedRowsMultiple, columnsConfig, columnsWidths, rowActionsGetter) => {
   let filteredSortedColumns = columns.filter((column) => {
     const columnConfigIndex = getColumIndex(column.key, columnsConfig);
     const visible = columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].visible : true;
@@ -64,7 +65,8 @@ const getInOrderColumns = (columns, hasCheckedRows, columnsConfig, columnsWidths
     filteredSortedColumns = [ActionsColumn, ...filteredSortedColumns];
   }
   if (hasCheckedRows) {
-    filteredSortedColumns = [SelectColumn, ...filteredSortedColumns];
+    const selectionColumn = checkedRowsMultiple === false ? RadioSelectColumn : SelectColumn;
+    filteredSortedColumns = [selectionColumn, ...filteredSortedColumns];
   }
   return filteredSortedColumns;
 };
@@ -89,6 +91,7 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
     rowActionsGetter,
     checkedRows,
     onCheckedRowsChange,
+    checkedRowsMultiple,
     sortColumns,
     setSortColumns
   } = useDataGrid();
@@ -109,6 +112,7 @@ 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) {
@@ -68,6 +68,7 @@ function Table(props) {
     anchorEl: null,
     columnKey: null
   });
+  const hasScrolledToFocusRow = useRef(false);
   const [allowSortChange, setAllowSortChange] = useState(false);
   const handleSortColumnsChange = (newSortColumns) => {
     if (allowSortChange) {
@@ -113,6 +114,10 @@ function Table(props) {
   }, [finalRows]);
   useEffect(() => {
     if (!focusOnRowKey) {
+      hasScrolledToFocusRow.current = false;
+      return;
+    }
+    if (hasScrolledToFocusRow.current) {
       return;
     }
     const rowIndex = finalRows.findIndex(
@@ -120,8 +125,12 @@ function Table(props) {
     );
     if (rowIndex !== -1) {
       ref_data_grid.current?.scrollToCell({ rowIdx: rowIndex });
+      if (onSelectedRowsChange) {
+        onSelectedRowsChange(/* @__PURE__ */ new Set([focusOnRowKey]));
+      }
+      hasScrolledToFocusRow.current = true;
     }
-  }, [focusOnRowKey, finalRows, rowKeyGetter]);
+  }, [focusOnRowKey, finalRows, rowKeyGetter, onSelectedRowsChange]);
   const onColumnResize = (idx, width) => {
     onChangeColumnWidth(finalColumns[idx].key, width);
   };

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

@@ -1,11 +1,9 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
-import { useTheme } from "@mui/material";
 import { f as DATAGRID_SEMANTIC_WIDTHS, e as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../constants.js";
 import { M as MenuActions } from "../../../../MenuActions/MenuActions.js";
 function ActionsFormatter(props) {
   const { rowActionsGetter } = useDataGrid();
-  const theme = useTheme();
   if (rowActionsGetter === void 0) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
@@ -15,7 +13,6 @@ function ActionsFormatter(props) {
       arrowType: "top-left",
       objItem: props.row,
       menuActions: rowActionsGetter,
-      menuActionSx: theme.components?.M4LDataGridActionsFormatter?.styleOverrides,
       marginTop: 1,
       marginLeft: "-11px",
       anchorOrigin: { vertical: "bottom", horizontal: "left" },

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/Table/subcomponents/RadioFormatter.d.ts

@@ -0,0 +1,6 @@
+import { RenderCheckboxProps } from 'react-data-grid';
+/**
+ * Componente visual del Radio que se renderiza dentro de cada celda del DataGrid.
+ * ¿Para que sirve? Es un wrapper alrededor del componente Radio del MUI que adapta las props de react-data-grid
+ */
+export declare const RadioFormatter: import('react').ForwardRefExoticComponent<RenderCheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { R as Radio } from "../../../../mui_extended/Radio/Radio.js";
+const RadioFormatter = forwardRef(function RadioFormatter2({ onChange, checked, ...props }, _ref) {
+  function handleChange(e) {
+    onChange(e.target.checked, e.nativeEvent.shiftKey);
+  }
+  return /* @__PURE__ */ jsx(Radio, { checked, onChange: handleChange, ...props });
+});
+export {
+  RadioFormatter as R
+};

package/components/DataGrid/subcomponents/Table/subcomponents/RadioSelectColumn.d.ts

@@ -0,0 +1,64 @@
+import { Column, RenderCellProps, RenderGroupCellProps, RenderHeaderCellProps } from 'react-data-grid';
+export declare const filterColumnClassName = "filter-cell";
+export declare const filterHeight = 35;
+/**
+ * Formateador para la celda de selección con radio button en filas agrupadas.
+ *
+ * **Nota:** Para radio buttons (selección única), no tiene sentido seleccionar grupos completos,
+ * por lo que este formateador retorna `null` y no renderiza ningún control.
+ * @param _props - Propiedades para renderizar la celda de grupo (no utilizadas).
+ * @returns `null` - No se renderiza ningún control de selección en grupos.
+ * @example
+ * // En un DataGrid con grupos, las filas de grupo no tendrán radio button
+ * // Solo las filas individuales tendrán radio buttons
+ */
+export declare function RadioSelectGroupFormatter(_props: RenderGroupCellProps<unknown>): null;
+/**
+ * Formateador para la celda de selección con radio button en filas individuales.
+ *
+ * Este componente maneja la lógica de **selección única**: cuando el usuario hace click
+ * en un radio button, se REEMPLAZA completamente la selección anterior con solo la fila actual.
+ *
+ * **Comportamiento:**
+ * - Si `checked` es `true`: El Set de `checkedRows` se reemplaza con `[rowKey actual]`
+ * - Si `checked` es `false`: El Set de `checkedRows` se vacía (deselección)
+ * @param props - Propiedades para renderizar la celda, incluyendo la fila actual.
+ * @returns Un componente `SelectCellFormatter` configurado como radio button.
+ * @example
+ * // Cuando el usuario hace click en el radio de la fila con ID=5:
+ * // checkedRows antes: Set([3])
+ * // checkedRows después: Set([5])  ← Reemplaza, no agrega
+ */
+export declare function RadioSelectFormatter(props: RenderCellProps<any, any>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Renderizador para la celda de cabecera (header) de la columna de selección con radio buttons.
+ *
+ * **Nota:** A diferencia de los checkboxes, los radio buttons NO tienen funcionalidad de
+ * "Seleccionar Todo", ya que solo se puede seleccionar una fila a la vez. Por lo tanto,
+ * este renderizador retorna `null` y no muestra ningún control en el header.
+ * @param _props - Propiedades para renderizar la celda de cabecera (no utilizadas).
+ * @returns `null` - No se renderiza ningún control en la cabecera.
+ * @example
+ * // La cabecera de la columna estará vacía (sin checkbox "Select All")
+ */
+export declare function RadioSelectColumnHeaderRenderer(_props: RenderHeaderCellProps<any, any>): null;
+/**
+ * Definición de la columna de selección con radio buttons para el DataGrid.
+ *
+ * Esta columna permite **selección única** de filas mediante radio buttons.
+ *
+ * **Características:**
+ * - **Ancho fijo:** 32px (igual que la columna de checkboxes)
+ * - **No redimensionable:** `resizable: false`
+ * - **No draggable:** `isDraggable: false`
+ * - **No sortable:** `sortable: false`
+ * - **Congelada:** `frozen: true` (siempre visible al hacer scroll horizontal)
+ * - **Header vacío:** No tiene control "Select All"
+ * - **Selección única:** Solo una fila puede estar seleccionada a la vez
+ * @example
+ * // En useSortColumnsRows.tsx:
+ * const selectionColumn = checkedRowsMultiple === false
+ *   ? RadioSelectColumn   // ← Selección única con radio buttons
+ *   : SelectColumn;       // ← Selección múltiple con checkboxes
+ */
+export declare const RadioSelectColumn: Column<any, any>;

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

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
+import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
+import { R as RadioFormatter } from "./RadioFormatter.js";
+function RadioSelectGroupFormatter(_props) {
+  return null;
+}
+function RadioSelectFormatter(props) {
+  const { checkedRows, onCheckedRowsChange, rowKeyGetter } = useDataGrid();
+  const onChange = (checked, _isShiftClick) => {
+    if (checked) {
+      onCheckedRowsChange && onCheckedRowsChange(/* @__PURE__ */ new Set([rowKeyGetter(props.row)]));
+    } else {
+      onCheckedRowsChange && onCheckedRowsChange(/* @__PURE__ */ new Set());
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    RadioFormatter,
+    {
+      checked: checkedRows?.has(rowKeyGetter(props.row)) || false,
+      tabIndex: props.tabIndex,
+      onChange,
+      "aria-label": "Select"
+    }
+  );
+}
+function RadioSelectColumnHeaderRenderer(_props) {
+  return null;
+}
+const RadioSelectColumn = {
+  key: DATAGRID_SELECT_COLUMN_KEY,
+  name: "",
+  width: 32,
+  minWidth: 32,
+  isDraggable: false,
+  resizable: false,
+  sortable: false,
+  frozen: true,
+  type: "boolean",
+  renderHeaderCell: RadioSelectColumnHeaderRenderer,
+  renderCell: RadioSelectFormatter,
+  renderGroupCell: RadioSelectGroupFormatter
+};
+export {
+  RadioSelectColumn as R
+};

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/tests/helpers/types.d.ts

@@ -20,6 +20,12 @@ export interface SeedProps {
     withCesar?: boolean;
     withChipStatus?: boolean;
     withTags?: boolean;
+    withImage?: boolean;
+    withImageCustomSize?: {
+        width: number;
+        height: number;
+    };
+    withImageWithoutText?: boolean;
     withActions?: boolean;
     withActionsUser?: boolean;
     withBooleanStatus?: boolean;
@@ -69,6 +75,10 @@ export interface RowType {
         currentStatus: 'superadmin' | 'admin' | 'user';
     };
     color?: string;
+    image?: {
+        url: string;
+        text?: string;
+    };
 }
 interface RangesUncertainty {
     cmcMin: number;

package/components/DataGrid/tests/table/subcomponents/RadioFormatter.test.d.ts

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

package/components/DataGrid/tests/table/subcomponents/RadioSelectColumn.test.d.ts

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

package/components/DataGrid/types.d.ts

@@ -61,12 +61,27 @@ export interface ColumnConfig {
     position?: number;
     frozen?: Maybe<boolean>;
 }
-type KeyUserColumns = keyof IGridConfigExtended;
-export interface ChangeUserColumn<T extends KeyUserColumns = KeyUserColumns> {
+type KeyConfig = keyof IGridConfigExtended;
+/**
+ * Tipo que representa un cambio de configuración del DataGrid.
+ */
+export interface ChangeConfig<T extends KeyConfig = KeyConfig> {
     reason: T;
     userConfig: IGridConfigExtended[T];
 }
-export type OnChangeUserColumns = (props: ChangeUserColumn) => void;
+/**
+ * @deprecated Usar `ChangeConfig` en su lugar. Este tipo será eliminado en futuras versiones.
+ */
+export type ChangeUserColumn = ChangeConfig;
+/**
+ * Callback que se ejecuta cuando cambia cualquier configuración del DataGrid.
+ * Maneja todas las vistas genéricamente a través de IGridConfigExtended.
+ */
+export type OnChangeConfig = (props: ChangeConfig) => void;
+/**
+ * @deprecated Usar `OnChangeConfig` en su lugar. Este tipo será eliminado en futuras versiones.
+ */
+export type OnChangeUserColumns = OnChangeConfig;
 export type SortApplied = {
     columnKey: string;
     removable: boolean;
@@ -137,14 +152,30 @@ 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
+     * Configuración inicial del DataGrid (anchos, orden, visibilidad, viewMode).
+     * Tiene prioridad sobre localStorage.
+     */
+    defaultConfig?: IGridConfigExtended;
+    /**
+     * Callback que se ejecuta cuando cambia cualquier configuración del DataGrid.
+     * @param props - Objeto con `reason` (tipo de cambio) y `userConfig` (nueva configuración)
+     */
+    onChangeConfig?: OnChangeConfig;
+    /**
+     * @deprecated Usar `defaultConfig` en su lugar. Esta prop será eliminada en futuras versiones.
      */
     defaultUserColumns?: IGridConfigExtended;
     /**
-     * Propiedad que recibe la función que se ejecuta cuando se cambian
-     * las configuraciones de las columnas.
+     * @deprecated Usar `onChangeConfig` en su lugar. Esta prop será eliminada en futuras versiones.
      */
     onChangeUserColumns?: OnChangeUserColumns;
     /**
@@ -193,6 +224,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"
@@ -252,6 +287,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.