@m4l/components 9.3.34-JT25112025.beta.3 → 9.3.34-JT26112025.beta.1

package/@types/export.d.ts

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

package/@types/types.d.ts

@@ -76,10 +76,6 @@ import {
   CheckBoxOwnerState,
   CheckBoxSlotsType,
 } from '../components/mui_extended/CheckBox/types';
-import {
-  RadioButtonOwnerState,
-  RadioButtonSlotsType,
-} from '../components/mui_extended/RadioButton/types';
 import {
   RHFNumberInputOwnerState,
   RHFNumberInputSlotsType,
@@ -296,19 +292,10 @@ import {
   ImageTextOwnerState,
   ImageTextSlotsType,
 } from '../components/ImageText/types';
-import {
-  FormContainerOwnerState,
-  FormContainerSlotsType,
-} from '../components/FormContainer/types';
-import { TabsNavigatorSlotsType } from 'src/components/TabsNavigator/types';
-import {
-  EditLabelOwnerState,
-  EditLabelSlotsType,
-} from '../components/EditLabel/types';
-import {
-  MFIsolationAppOwnerState,
-  MFIsolationAppSlotsType,
-} from '../components/MFIsolationApp/types';
+import { FormContainerOwnerState, FormContainerSlotsType } from '../components/FormContainer/types';
+import { TabsNavigatorSlotsType } from '../components/TabsNavigator/types';
+import { EditLabelOwnerState, EditLabelSlotsType } from '../components/EditLabel/types';
+import { MFIsolationAppOwnerState, MFIsolationAppSlotsType } from '../components/MFIsolationApp/types';
 import {
   TagsFormatterOwnerState,
   TagsFormatterSlotsType,
@@ -317,6 +304,10 @@ import {
   IconsFormatterOwnerState,
   IconsFormatterSlotsType,
 } from '../components/formatters/IconsFormatter/types';
+import {
+  ImageFormatterOwnerState,
+  ImageFormatterSlotsType,
+} from '../components/formatters/ImageFormatter';
 
 declare module '@mui/material/styles' {
   // Define the slots in the theme
@@ -341,7 +332,6 @@ declare module '@mui/material/styles' {
     M4LSelect: SelectSlotsType;
     M4LTypography: TypographySlotsType;
     M4LCheckBox: CheckBoxSlotsType;
-    M4LRadioButton: RadioButtonSlotsType;
     M4LRHFNumberInput: RHFNumberInputSlotsType;
     M4LTab: TabSlotsType;
     M4LButton: ButtonSlotsType;
@@ -356,8 +346,7 @@ declare module '@mui/material/styles' {
     M4LChip: ChipSlotsType;
     M4LCircularProgress: CircularProgressSlotsType;
     M4LPaperForm: PaperFormSlotsType;
-    M4LWindowBase: WindowBaseType;
-    a;
+    M4LWindowBase: WindowBaseType;a
     M4LWindowConfirm: WindowConfirmType;
     M4LAppBar: AppBarSlotsType;
     M4LDialog: DialogType;
@@ -412,6 +401,7 @@ declare module '@mui/material/styles' {
     M4LMFIsolationApp: MFIsolationAppSlotsType;
     M4LTagsFormatter: TagsFormatterSlotsType;
     M4LIconsFormatter: IconsFormatterSlotsType;
+    M4LImageFormatter: ImageFormatterSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -435,7 +425,6 @@ declare module '@mui/material/styles' {
     M4LSelect: Partial<SelectOwnerState>;
     M4LTypography: Partial<TypographyOwnerState>;
     M4LCheckBox: Partial<CheckBoxOwnerState>;
-    M4LRadioButton: Partial<RadioButtonOwnerState>;
     M4LRHFNumberInput: Partial<RHFNumberInputOwnerState>;
     M4LTab: Partial<TabOwnerState>;
     M4LButton: Partial<ButtonOwnerState>;
@@ -505,6 +494,7 @@ declare module '@mui/material/styles' {
     M4LMFIsolationApp: Partial<MFIsolationAppOwnerState>;
     M4LTagsFormatter: Partial<TagsFormatterOwnerState>;
     M4LIconsFormatter: Partial<IconsFormatterOwnerState>;
+    M4LImageFormatter: Partial<ImageFormatterOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -627,11 +617,6 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LCheckBox'];
       variants?: ComponentsVariants['M4LCheckBox'];
     };
-    M4LRadioButton?: {
-      defaultProps?: ComponentsPropsList['M4LRadioButton'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LRadioButton'];
-      variants?: ComponentsVariants['M4LRadioButton'];
-    };
     M4LActionCancel?: {
       defaultProps?: ComponentsPropsList['M4LActionCancel'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LActionCancel'];
@@ -967,5 +952,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LIconsFormatter'];
       variants?: ComponentsVariants['M4LIconsFormatter'];
     };
+    M4LImageFormatter?: {
+      defaultProps?: ComponentsPropsList['M4LImageFormatter'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LImageFormatter'];
+      variants?: ComponentsVariants['M4LImageFormatter'];
+    };
   }
 }

package/components/DataGrid/DataGrid.js

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

package/components/DataGrid/Datagrid.styles.js

@@ -270,6 +270,7 @@ const dataGridStyles = {
       border: theme.vars.size.borderStroke.container,
       borderColor: theme.vars.palette?.border.secondary,
       "& .rdg ": {
+        scrollBehavior: "smooth",
         display: "grid",
         contain: "content",
         boxSizing: "border-box",
@@ -423,10 +424,6 @@ const dataGridStyles = {
           borderColor: `${theme.vars.palette?.border.disabled} !important`,
           ...theme.colorSchemes.finalTheme.typography.body
         },
-        "&:has(> .M4LRadioButton-root)": {
-          overflow: "visible",
-          paddingInline: 0
-        },
         "&.rdg-cell-frozen": {
           display: "flex",
           boxShadow: "unset",
@@ -749,7 +746,6 @@ const dataGridStyles = {
     minWidth: "280px",
     maxWidth: "580px",
     cursor: "pointer",
-    padding: theme.vars.size.baseSpacings["sp2-5"],
     // Si está checked (pero no selected), border de checked
     ...ownerState?.checked && !ownerState?.selected && {
       borderColor: theme.vars.palette.primary.activeOpacity
@@ -790,7 +786,7 @@ const dataGridStyles = {
   cardHeaderRight: ({ theme }) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.vars.size.baseSpacings["sp0-5"]
+    gap: theme.vars.size.baseSpacings.sp1
   }),
   /**
    * Contenido de la card (body)

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

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

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

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

package/components/DataGrid/formatters/ColumnImageFormatter/ImageFormatterCell.d.ts

@@ -0,0 +1,13 @@
+import { ColumnImageFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
+/**
+ * Componente interno que renderiza la celda y puede usar hooks
+ */
+export declare function ImageFormatterCell<TRow>(props: {
+    formatterProps: RenderCellProps<TRow>;
+    fieldValue: ColumnImageFormatterProps<TRow>['fieldValue'];
+    fieldText: ColumnImageFormatterProps<TRow>['fieldText'];
+    width?: ColumnImageFormatterProps<TRow>['width'];
+    height?: ColumnImageFormatterProps<TRow>['height'];
+    cover?: ColumnImageFormatterProps<TRow>['cover'];
+}): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnImageFormatter/ImageFormatterCell.js

@@ -0,0 +1,33 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useContext } from "react";
+import { getPropertyByString } from "@m4l/core";
+import { I as IMAGE_SIZES } from "./constants.js";
+import { a as DataGridContext } from "../../contexts/DataGridContext/index.js";
+import { I as ImageFormatter } from "../../../formatters/ImageFormatter/ImageFormatter.js";
+function ImageFormatterCell(props) {
+  const { formatterProps, fieldValue, fieldText, width, height, cover } = props;
+  const context = useContext(DataGridContext);
+  const viewMode = context?.viewMode ?? "cards";
+  const hasCustomSize = width !== void 0 && height !== void 0;
+  const finalWidth = viewMode === "cards" && hasCustomSize ? width : viewMode === "cards" ? IMAGE_SIZES.cards : void 0;
+  const finalHeight = viewMode === "cards" && hasCustomSize ? height : viewMode === "cards" ? IMAGE_SIZES.cards : void 0;
+  const src = getPropertyByString(formatterProps.row, fieldValue) ?? void 0;
+  const text = fieldText ? getPropertyByString(formatterProps.row, fieldText) ?? void 0 : void 0;
+  if (!src) {
+    return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+  }
+  return /* @__PURE__ */ jsx(
+    ImageFormatter,
+    {
+      src,
+      alt: text || src,
+      width: finalWidth,
+      height: finalHeight,
+      text,
+      cover
+    }
+  );
+}
+export {
+  ImageFormatterCell as I
+};

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

@@ -0,0 +1,6 @@
+/**
+ * Dimensiones de imagen según densidad en vista tabla
+ */
+export declare const IMAGE_SIZES: {
+    readonly cards: 60;
+};

package/components/DataGrid/formatters/ColumnImageFormatter/constants.js

@@ -0,0 +1,6 @@
+const IMAGE_SIZES = {
+  cards: 60
+};
+export {
+  IMAGE_SIZES as I
+};

package/components/DataGrid/formatters/ColumnImageFormatter/formatter.d.ts

@@ -0,0 +1,8 @@
+import { RenderCellProps } from 'react-data-grid';
+import { ColumnImageFormatterProps } from './types';
+/**
+ * Formatter para mostrar imágenes con o sin texto
+ * @param props - Propiedades del formatter
+ * @returns Función que recibe RenderCellProps y retorna el ImageFormatter
+ */
+export declare function ColumnImageFormatter<TRow>(props: ColumnImageFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnImageFormatter/formatter.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { I as ImageFormatterCell } from "./ImageFormatterCell.js";
+function ColumnImageFormatter(props) {
+  const { fieldValue, fieldText, cover } = props;
+  const width = "width" in props && props.width !== void 0 ? props.width : void 0;
+  const height = "height" in props && props.height !== void 0 ? props.height : void 0;
+  const formatter = (formatterProps) => {
+    return /* @__PURE__ */ jsx(
+      ImageFormatterCell,
+      {
+        formatterProps,
+        fieldValue,
+        fieldText,
+        width,
+        height,
+        cover
+      }
+    );
+  };
+  formatter.__imageFormatterHeight = height ?? 60;
+  return formatter;
+}
+export {
+  ColumnImageFormatter as C
+};

package/components/DataGrid/formatters/ColumnImageFormatter/index.d.ts

@@ -0,0 +1,3 @@
+export { useColumnImage } from './useColumnImage';
+export { ColumnImageFormatter } from './formatter';
+export * from './types';

package/components/DataGrid/formatters/ColumnImageFormatter/types.d.ts

@@ -0,0 +1,44 @@
+import { DeepKeyOf } from '../../../../utils/types';
+interface ColumnImageFormatterBaseProps<TRow> {
+    /**
+     * Campo del row que contiene la URL de la imagen
+     */
+    fieldValue: DeepKeyOf<TRow>;
+    /**
+     * Campo opcional del row que contiene el texto a mostrar junto a la imagen
+     */
+    fieldText?: DeepKeyOf<TRow>;
+    /**
+     * Si es true, la imagen usa object-fit: cover (recorta si es necesario)
+     * Si es false o undefined, usa object-fit: contain (muestra completa)
+     * @default false
+     */
+    cover?: boolean;
+}
+/**
+ * Props sin dimensiones personalizadas (usa IMAGE_SIZES.cards por defecto)
+ */
+interface ColumnImageFormatterWithoutSize<TRow> extends ColumnImageFormatterBaseProps<TRow> {
+    width?: never;
+    height?: never;
+}
+/**
+ * Props con dimensiones personalizadas para vista cards
+ * IMPORTANTE: width y height deben proporcionarse juntas
+ */
+interface ColumnImageFormatterWithSize<TRow> extends ColumnImageFormatterBaseProps<TRow> {
+    /**
+     * Ancho personalizado para la imagen en vista cards (en píxeles)
+     */
+    width: number;
+    /**
+     * Alto personalizado para la imagen en vista cards (en píxeles)
+     */
+    height: number;
+}
+/**
+ * Props para ColumnImageFormatter
+ * Puede tener dimensiones personalizadas (width Y height juntas) o ninguna
+ */
+export type ColumnImageFormatterProps<TRow> = ColumnImageFormatterWithoutSize<TRow> | ColumnImageFormatterWithSize<TRow>;
+export {};

package/components/DataGrid/formatters/ColumnImageFormatter/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/formatters/ColumnImageFormatter/useColumnImage.d.ts

@@ -0,0 +1,9 @@
+import { ColumnImageFormatterProps } from './types';
+/**
+ * Hook que retorna el formatter para columnas con imágenes en DataGrid
+ * @param props - Propiedades del formatter
+ * @returns Objeto con el formatter
+ */
+export declare const useColumnImage: <TRow>(props: ColumnImageFormatterProps<TRow>) => {
+    formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+};

package/components/DataGrid/formatters/ColumnImageFormatter/useColumnImage.js

@@ -0,0 +1,22 @@
+import { useState, useRef, useEffect, useMemo } from "react";
+import { deepEqual } from "fast-equals";
+import { C as ColumnImageFormatter } from "./formatter.js";
+const useColumnImage = (props) => {
+  const [stateProps, setStateProps] = useState(props);
+  const refProps = useRef({ ...props });
+  useEffect(() => {
+    if (!deepEqual(refProps.current, props)) {
+      refProps.current = props;
+      setStateProps(props);
+    }
+  }, [props]);
+  return useMemo(
+    () => ({
+      formatter: ColumnImageFormatter(stateProps)
+    }),
+    [stateProps]
+  );
+};
+export {
+  useColumnImage as u
+};

package/components/DataGrid/formatters/index.d.ts

@@ -11,3 +11,4 @@ export * from './ColumnUncertaintyFormatter';
 export * from './ColumnChipStatusFormatter';
 export * from './ColumnTagsFormatter';
 export * from './ColumnColorFormatter';
+export * from './ColumnImageFormatter';

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

@@ -13,8 +13,8 @@ function scrollToCardElement(containerElement, rowKey, selectorType = "data-attr
       return;
     }
     foundElement.scrollIntoView({
-      behavior: "auto",
-      block: "center"
+      behavior: "smooth",
+      block: "end"
     });
   } catch (error) {
     console.error("scrollToCardElement: Error al hacer scroll", error);

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

@@ -21,6 +21,7 @@ function Cards(props) {
     onCheckedRowsChange
   } = props;
   const containerRef = useRef(null);
+  const hasScrolledToFocusRow = useRef(false);
   const processedColumns = useProcessedColumns(columns);
   const allProcessedColumns = useProcessedColumns(columns, {
     applyVisibilityFilter: false
@@ -31,13 +32,21 @@ function Cards(props) {
     onRowsChange
   });
   const cardHeight = useMemo(() => {
+    const imageHeight = processedColumns.reduce((totalHeight, col) => {
+      const formatterHeight = col.renderCell?.__imageFormatterHeight;
+      return formatterHeight ? totalHeight + formatterHeight : totalHeight;
+    }, 0);
     return calculateCardHeight({
       visibleColumnsCount: processedColumns.length,
       customMinHeight: cardsViewConfig?.customRender?.minHeight
-    });
-  }, [processedColumns.length, cardsViewConfig]);
+    }) + imageHeight;
+  }, [processedColumns, cardsViewConfig]);
   useEffect(() => {
     if (!focusOnRowKey) {
+      hasScrolledToFocusRow.current = false;
+      return;
+    }
+    if (hasScrolledToFocusRow.current) {
       return;
     }
     const rowIndex = rows.findIndex(
@@ -58,9 +67,13 @@ function Cards(props) {
         "data-attribute",
         "data-row-key"
       );
+      if (onSelectedRowsChange) {
+        onSelectedRowsChange(/* @__PURE__ */ new Set([focusOnRowKey]));
+      }
+      hasScrolledToFocusRow.current = true;
     }, 300);
     return () => clearTimeout(timer);
-  }, [focusOnRowKey, rows, rowKeyGetter, cardHeight]);
+  }, [focusOnRowKey, rows, rowKeyGetter, cardHeight, onSelectedRowsChange]);
   if (processedColumns.length === 0) {
     return null;
   }

package/components/DataGrid/subcomponents/Cards/subcomponents/CardHeader/index.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.js

@@ -88,6 +88,7 @@ function CardRowComponent({
           },
           onClick: onCardClick,
           "data-testid": "data-grid-card",
+          "data-row-key": rowKeyGetter(row),
           children: content
         }
       )

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

@@ -2,7 +2,6 @@ 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";
 const CheckboxCellAdapter = forwardRef(function CheckboxCellAdapter2(props, ref) {
@@ -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/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

@@ -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/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/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