@m4l/components 9.3.35 → 9.3.36-JT20251128-beta.1

package/components/ActionsGroup/subcomponents/ActionIconButton/ActionIconButton.js

@@ -0,0 +1,76 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
+import { a as ActionIconButtonSkeletonStyled, b as ActionIconButtonStyled, I as IconTooltipMessageStyled, T as TextTooltipMessageStyled } from "../../slots/ActionsGroupSlots.js";
+import { useEnvironment, useModuleSkeleton } from "@m4l/core";
+import { A as ACTIONS_GROUP_ICONS } from "../../icons.js";
+import { a as actionsGroupStyles } from "../../ActionsGroup.styles.js";
+import { T as Tooltip } from "../../../mui_extended/Tooltip/Tooltip.js";
+const ActionIconButton = (props) => {
+  const { action, selected, ownerState, onChange, groupDisabled } = props;
+  const { iconUrl: urlIcon, onClick, disabled, label } = action;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const isSkeleton = useModuleSkeleton();
+  const { currentSize } = useComponentSize();
+  const handleClick = () => {
+    if (disabled) {
+      return;
+    }
+    onChange?.(action.id);
+    onClick?.(action.id);
+  };
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(ActionIconButtonSkeletonStyled, { ownerState: { ...ownerState } });
+  }
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      arrow: true,
+      PopperProps: {
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 10]
+            }
+          }
+        ]
+      },
+      slotProps: {
+        tooltip: {
+          /**
+           * Estilos del tooltip.
+           */
+          sx: (theme) => typeof actionsGroupStyles.tooltip === "function" ? actionsGroupStyles.tooltip({ theme }) : {}
+        }
+      },
+      title: /* @__PURE__ */ jsxs(Fragment, { children: [
+        (disabled || groupDisabled) && /* @__PURE__ */ jsx(
+          IconTooltipMessageStyled,
+          {
+            variant: "text",
+            size: "small",
+            src: `${host_static_assets}/${environment_assets}/${ACTIONS_GROUP_ICONS.blocked}`
+          }
+        ),
+        /* @__PURE__ */ jsx(TextTooltipMessageStyled, { variant: "body", children: label })
+      ] }),
+      children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        ActionIconButtonStyled,
+        {
+          ownerState: { ...ownerState, itemSelected: selected, itemDisabled: disabled },
+          size: currentSize,
+          src: urlIcon,
+          onClick: handleClick,
+          disabled: disabled || groupDisabled,
+          variant: "text",
+          color: selected ? "primary" : "default",
+          "aria-label": label,
+          "aria-pressed": selected
+        }
+      ) })
+    }
+  );
+};
+export {
+  ActionIconButton as A
+};

package/components/ActionsGroup/subcomponents/ActionIconButton/types.d.ts

@@ -0,0 +1,7 @@
+import { ActionGroupItem, ActionsGroupOwnerState, ActionsGroupProps, ActionsGroupValueType } from '../../types';
+export interface ActionIconButtonProps<T extends ActionsGroupValueType> extends Pick<ActionsGroupProps<T>, 'onChange'> {
+    action: ActionGroupItem<T>;
+    ownerState: ActionsGroupOwnerState;
+    groupDisabled: boolean;
+    selected: boolean;
+}

package/components/ActionsGroup/types.d.ts

@@ -0,0 +1,60 @@
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { ActionsGroupSlots } from './slots/ActionsGroupEnum';
+import { ACTIONS_GROUP_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material';
+import { Sizes } from '@m4l/styles';
+export type ActionsGroupValueType = string | number | null;
+export interface ActionGroupItem<T extends ActionsGroupValueType> {
+    id: T;
+    label: string;
+    iconUrl: string;
+    onClick?: (item: T) => void;
+    disabled?: boolean;
+}
+export interface ActionsGroupProps<T extends ActionsGroupValueType> {
+    /**
+     * Indica si el grupo de acciones está deshabilitado.
+     */
+    disabled?: boolean;
+    /**
+     * Clase personalizada para el grupo de acciones.
+     */
+    className?: string;
+    /**
+     * Etiqueta accesible para el grupo (role toolbar).
+     */
+    ariaLabel?: string;
+    /**
+     * ID de elemento que etiqueta al grupo (alternativa a ariaLabel).
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Item seleccionado.
+     */
+    value: T;
+    /**
+     * Función que se ejecuta cuando se selecciona una acción.
+     */
+    onChange: (newValue: T) => void;
+    /**
+     * Tamaño del grupo de acciones.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Lista de acciones para el grupo.
+     */
+    actions: ActionGroupItem<T>[];
+    /**
+     * Variante del grupo de acciones.
+     */
+    variant?: 'vertical' | 'horizontal';
+}
+export type ActionsGroupSlotsType = keyof typeof ActionsGroupSlots;
+export type ActionsGroupOwnerState = {
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    disabled?: boolean;
+    variant?: 'vertical' | 'horizontal';
+    itemSelected?: boolean;
+    itemDisabled?: boolean;
+};
+export type ActionsGroupStyles = M4LOverridesStyleRules<ActionsGroupSlotsType, typeof ACTIONS_GROUP_KEY_COMPONENT, Theme>;

package/components/Chip/slots/ChipSlots.d.ts

@@ -7,7 +7,7 @@ declare const SkeletonChipStyled: import('@emotion/styled').StyledComponent<Pick
 declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('..').ChipOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-declare const TextChipStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/Typography/types').TypographyProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>, "size" | "children" | "title" | "component" | "zIndex" | "id" | "disabled" | "paragraph" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "flex" | "hidden" | "color" | "left" | "right" | "bottom" | "top" | "ellipsis" | "content" | "style" | "position" | "padding" | "variant" | "borderRadius" | "width" | "display" | "borderColor" | "height" | "gap" | "minHeight" | "margin" | "overflow" | "boxShadow" | "minWidth" | "justifyContent" | "alignItems" | "paddingLeft" | "borderLeft" | "borderTop" | "maxWidth" | "flexDirection" | "paddingRight" | "borderRight" | "flexGrow" | "marginLeft" | "textOverflow" | "borderBottom" | "gridTemplateColumns" | "marginBottom" | "dataTestid" | "alignContent" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateRows" | "justifyItems" | "justifySelf" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "marginRight" | "marginTop" | "maxHeight" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingTop" | "rowGap" | "textAlign" | "translate" | "visibility" | "whiteSpace" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "paddingBlock" | "paddingInline" | "className" | "classes" | "sx" | "p" | "slot" | "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" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "htmlFor" | "gutterBottom" | "noWrap" | "variantMapping" | "skeletonWidth" | "skeletonRows" | keyof import('react').RefAttributes<HTMLSpanElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+declare const TextChipStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/Typography/types').TypographyProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>, "size" | "children" | "title" | "component" | "zIndex" | "id" | "disabled" | "paragraph" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "flex" | "hidden" | "color" | "left" | "right" | "bottom" | "top" | "content" | "style" | "position" | "ellipsis" | "padding" | "variant" | "borderRadius" | "width" | "display" | "borderColor" | "height" | "gap" | "minHeight" | "margin" | "overflow" | "boxShadow" | "minWidth" | "justifyContent" | "alignItems" | "paddingLeft" | "borderLeft" | "borderTop" | "maxWidth" | "flexDirection" | "paddingRight" | "borderRight" | "flexGrow" | "marginLeft" | "textOverflow" | "borderBottom" | "gridTemplateColumns" | "marginBottom" | "dataTestid" | "alignContent" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateRows" | "justifyItems" | "justifySelf" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "marginRight" | "marginTop" | "maxHeight" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingTop" | "rowGap" | "textAlign" | "translate" | "visibility" | "whiteSpace" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "paddingBlock" | "paddingInline" | "className" | "classes" | "sx" | "p" | "slot" | "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" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "htmlFor" | "gutterBottom" | "noWrap" | "variantMapping" | "skeletonWidth" | "skeletonRows" | keyof import('react').RefAttributes<HTMLSpanElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('..').ChipOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
 declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "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" | "instaceDataTestId" | "placement" | "rotationAngle" | "ariaLabel" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeProps" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {

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

@@ -424,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",
@@ -734,7 +738,10 @@ const dataGridStyles = {
    */
   cardsContainer: () => ({
     height: "auto",
-    overflow: "auto"
+    overflow: "auto",
+    "& > .M4LContainerFlow-root": {
+      alignItems: "start"
+    }
   }),
   /**
    * Card de la vista cards
@@ -746,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
@@ -786,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/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/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/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/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
+};

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 RadioButtonFormatter } from "./RadioButtonFormatter.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(
+    RadioButtonFormatter,
+    {
+      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/tests/table/subcomponents/RadioButtonFormatter.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

@@ -137,6 +137,13 @@ 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