@m4l/components 9.3.34 → 9.3.35-BE20251129-beta.1

package/components/CommonActions/components/ActionsContainer/slots/ActionsContainerSlots.d.ts

@@ -1,4 +1,4 @@
 declare const ActionsContainerRoot: import('@emotion/styled').StyledComponent<Pick<import('@mui/system').BoxOwnProps<import('@mui/material').Theme> & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-}, keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>>, "title" | "id" | "hidden" | "content" | "style" | "translate" | "className" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
+}, keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>>, "title" | "id" | "content" | "translate" | "className" | "style" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
 export { ActionsContainerRoot };

package/components/DataGrid/DataGrid.js

@@ -30,6 +30,7 @@ function DataGrid(props) {
     initialRowHeightVariant,
     checkedRows,
     onCheckedRowsChange,
+    checkedRowsMultiple,
     dataTestId = "",
     customHeader: CustomHeader,
     visibleCustomHeader = true,
@@ -87,6 +88,7 @@ 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,6 +424,10 @@ 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",
@@ -733,7 +738,10 @@ const dataGridStyles = {
    */
   cardsContainer: () => ({
     height: "auto",
-    overflow: "auto"
+    overflow: "auto",
+    "& > .M4LContainerFlow-root": {
+      alignItems: "start"
+    }
   }),
   /**
    * Card de la vista cards
@@ -745,6 +753,8 @@ const dataGridStyles = {
     minWidth: "280px",
     maxWidth: "580px",
     cursor: "pointer",
+    padding: theme.vars.size.baseSpacings["sp2-5"],
+    gap: "0 !important",
     // Si está checked (pero no selected), border de checked
     ...ownerState?.checked && !ownerState?.selected && {
       borderColor: theme.vars.palette.primary.activeOpacity
@@ -785,7 +795,7 @@ const dataGridStyles = {
   cardHeaderRight: ({ theme }) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.vars.size.baseSpacings.sp1
+    gap: theme.vars.size.baseSpacings["sp0-5"]
   }),
   /**
    * Contenido de la card (body)

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

@@ -155,6 +155,7 @@ function DataGridProvider(props) {
     initialRowHeightVariant = "standard",
     checkedRows,
     onCheckedRowsChange,
+    checkedRowsMultiple,
     rowKeyGetter,
     onChangeUserColumns,
     externalSortSettings: sortSettings,
@@ -530,6 +531,7 @@ 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' | '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' | 'checkedRowsMultiple' | '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' | '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' | 'checkedRowsMultiple' | '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/index.js

@@ -0,0 +1 @@
+

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

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

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 } = useDataGrid();
+  const { rowKeyGetter, rowActionsGetter, size, checkedRowsMultiple } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
   const rowKey = useMemo(() => rowKeyGetter(row), [rowKeyGetter, row]);
   const onChange = useCallback(
@@ -23,15 +23,23 @@ function CardHeader({
       if (!onCheckedRowsChange || !checkedRows) {
         return;
       }
-      const newCheckedRows = new Set(checkedRows);
-      if (checked) {
-        newCheckedRows.add(rowKey);
+      if (checkedRowsMultiple === false) {
+        if (checked) {
+          onCheckedRowsChange(/* @__PURE__ */ new Set([rowKey]));
+        } else {
+          onCheckedRowsChange(/* @__PURE__ */ new Set());
+        }
       } else {
-        newCheckedRows.delete(rowKey);
+        const newCheckedRows = new Set(checkedRows);
+        if (checked) {
+          newCheckedRows.add(rowKey);
+        } else {
+          newCheckedRows.delete(rowKey);
+        }
+        onCheckedRowsChange(newCheckedRows);
       }
-      onCheckedRowsChange(newCheckedRows);
     },
-    [checkedRows, onCheckedRowsChange, rowKey]
+    [checkedRows, onCheckedRowsChange, rowKey, checkedRowsMultiple]
   );
   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,6 +2,7 @@ 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) {
@@ -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 ? RadioButtonFormatter : CheckboxFormatter;
     return /* @__PURE__ */ jsx(CheckboxCellWrapperStyled, { onClick: handleClick, children: /* @__PURE__ */ jsx(
-      CheckboxFormatter,
+      FormatterComponent,
       {
         ref,
         checked: value,

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

@@ -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/RadioButtonFormatter.d.ts

@@ -0,0 +1,6 @@
+import { RenderCheckboxProps } from 'react-data-grid';
+/**
+ * Componente visual del RadioButton 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 RadioButtonFormatter: import('react').ForwardRefExoticComponent<RenderCheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

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

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