@m4l/components 9.2.62-JT09072025.beta.2 → 9.2.63-JT14072025.beta.1

package/components/DataGrid/Datagrid.styles.js

@@ -335,6 +335,7 @@ const dataGridStyles = {
         alignItems: "center",
         textOverflow: "inline",
         gridTemplateColumns: "auto",
+        padding: "0 8px",
         ...getTypographyStyles(
           theme.generalSettings.isMobile,
           ownerState?.size || "medium",
@@ -400,6 +401,11 @@ const dataGridStyles = {
         },
         "& .m4l_icon": {
           height: "100%"
+        },
+        '&[role="columnheader"]': {
+          '&[aria-colindex="1"]': {
+            borderTopLeftRadius: theme.vars.size.baseSpacings.sp2
+          }
         }
       },
       '& .rdg-cell[role="columnheader"] .rdg-header-sort-name': {
@@ -576,6 +582,7 @@ const dataGridStyles = {
     alignItems: "center",
     backgroundColor: theme.vars.palette.default.enabled,
     padding: theme.vars.size.baseSpacings.sp1,
+    marginBottom: theme.vars.size.baseSpacings.sp2,
     gap: theme.vars.size.baseSpacings.sp1,
     borderRadius: theme.vars.size.borderRadius.r1,
     ...getSizeStyles(theme, ownerState?.size || "medium", "action", (size) => ({
@@ -664,11 +671,24 @@ const dataGridStyles = {
   /**
    * Estilos para el contenedor del boton de acciones del header
    */
-  buttonHeaderActions: () => ({
+  buttonHeaderActions: ({ theme }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    width: "100%"
+    width: "100%",
+    cursor: "pointer",
+    height: "100%",
+    "> span": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%",
+      "& svg": {
+        width: "8px",
+        height: "8px",
+        color: theme.vars.palette.chips.default.contained.backgroundColorTone
+      }
+    }
   }),
   /**
    * Estilos para el formatter de iconos

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

@@ -1,5 +1,6 @@
 import { ColumnBooleanFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
 /**
  * Función para formatear un booleano en una columna de un DataGrid
  */
-export declare function ColumnBooleanFormatter<TRow>(props: ColumnBooleanFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnBooleanFormatter<TRow>(props: ColumnBooleanFormatterProps<TRow>): (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,12 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
 import React from "react";
-import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 import { B as BooleanFormatter } from "../../../formatters/BooleanFormatter/BooleanFormatter.js";
 function ColumnBooleanFormatter(props) {
   const { fieldValue, presentationType, Component = React.Fragment } = props;
-  return (obProps) => {
-    const valueMaybeString = getPropertyByString(obProps, getFieldValueWithRow(fieldValue));
+  return (renderProps) => {
+    const valueMaybeString = getPropertyByString(renderProps.row, fieldValue);
     let fixedValue;
     if (typeof valueMaybeString === "boolean") {
       fixedValue = valueMaybeString;

package/components/DataGrid/formatters/ColumnBooleanFormatter/useColumnBoolean.d.ts

@@ -3,7 +3,7 @@ import { ColumnBooleanFormatterProps } from './types';
  * Hook function that return the formatter, filter and customSort for a boolean column
  */
 export declare const useColumnBoolean: <TRow>(props: ColumnBooleanFormatterProps<TRow>) => {
-    formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
+    formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

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

@@ -1,7 +1,8 @@
 import { ColumnChipStatusFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
 /**
  * Formatter para mostrar un chip de estado en una columna de un DataGrid
  * @param props - Propiedades del formatter
  * @returns Componente ChipStatusFormatter
  */
-export declare const ColumnChipStatusFormatter: (props: ColumnChipStatusFormatterProps<any>) => (obProps: any) => import("react/jsx-runtime").JSX.Element;
+export declare const ColumnChipStatusFormatter: <TRow>(props: ColumnChipStatusFormatterProps<TRow>) => (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,14 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
-import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 import { C as ChipStatusFormatterColumnWrapperStyled } from "../../../formatters/ChipStatusFormatter/slots/ChipStatusFormatterSlots.js";
 import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
 import { C as ChipStatusFormatter } from "../../../formatters/ChipStatusFormatter/ChipStatusFormatter.js";
 const ColumnChipStatusFormatter = (props) => {
   const { fieldStatus, fieldLabel, statusesColors, fallbackColor } = props;
-  return (obProps) => {
-    const status = getNullGuard(getPropertyByString(obProps, getFieldValueWithRow(fieldStatus.toString())));
-    const label = typeof fieldLabel === "string" ? getNullGuard(getPropertyByString(obProps, getFieldValueWithRow(fieldLabel))) : fieldLabel(obProps.row, status);
+  return (renderProps) => {
+    const cleanFieldStatus = fieldStatus.toString().startsWith("row.") ? fieldStatus.toString().substring(4) : fieldStatus.toString();
+    const cleanFieldLabel = typeof fieldLabel === "string" && fieldLabel.startsWith("row.") ? fieldLabel.substring(4) : fieldLabel;
+    const status = getNullGuard(getPropertyByString(renderProps.row, cleanFieldStatus));
+    const label = typeof cleanFieldLabel === "string" ? getNullGuard(getPropertyByString(renderProps.row, cleanFieldLabel)) : typeof fieldLabel === "function" ? fieldLabel(renderProps.row, status) : "";
     return /* @__PURE__ */ jsx(
       ChipStatusFormatter,
       {

package/components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatus.d.ts

@@ -3,7 +3,7 @@ import { ColumnChipStatusFormatterProps } from './types';
  * Funcion helper que retorna el formatter, filter y customSort de la columna concatenada.
  */
 export declare const useColumnChipStatus: <TRow>(props: ColumnChipStatusFormatterProps<TRow>) => {
-    formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
+    formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string | number) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

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

@@ -1,5 +1,6 @@
 import { ColumnConcatenatedValuesFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
 /**
  * Function to DataGrid that concatenates an array of strings
  */
-export declare function ColumnConcatenatedValuesFormatter<TRow>(props: ColumnConcatenatedValuesFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnConcatenatedValuesFormatter<TRow>(props: ColumnConcatenatedValuesFormatterProps<TRow>): (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
 import React from "react";
-import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 import { C as ConcatenatedFormatter } from "../../../formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
 function ColumnConcatenatedValuesFormatter(props) {
   const { fieldValue, fieldSeparator, Component = React.Fragment } = props;
-  return (obProps) => {
+  return (renderProps) => {
+    const rowData = renderProps.row;
     const values = fieldValue.map((element) => {
-      const valueMaybeString = getPropertyByString(obProps, getFieldValueWithRow(element));
+      const valueMaybeString = getPropertyByString(rowData, element);
       let fixedValue;
       if (typeof valueMaybeString === "string" || typeof valueMaybeString === "number") {
         fixedValue = valueMaybeString.toString();
@@ -16,7 +16,14 @@ function ColumnConcatenatedValuesFormatter(props) {
       }
       return fixedValue;
     });
-    return /* @__PURE__ */ jsx(ConcatenatedFormatter, { values, separator: fieldSeparator, Component });
+    return /* @__PURE__ */ jsx(
+      ConcatenatedFormatter,
+      {
+        values,
+        separator: fieldSeparator,
+        Component
+      }
+    );
   };
 }
 export {

package/components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/useColumnConcatenatedValues.d.ts

@@ -3,7 +3,7 @@ import { ColumnConcatenatedValuesFormatterProps } from './types';
  * Funcion helper que retorna el formatter, filter y customSort de la columna concatenada.
  */
 export declare const useColumnConcatenatedValues: <TRow>(props: ColumnConcatenatedValuesFormatterProps<TRow>) => {
-    formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
+    formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

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

@@ -1,5 +1,6 @@
 import { ColumnDateFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
 /**
  * Function to format a date in a column of a DataGrid
  */
-export declare function ColumnDateFormatter<TRow>(props: ColumnDateFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnDateFormatter<TRow>(props: ColumnDateFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,19 +1,28 @@
 import { jsx } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
 import React from "react";
-import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 import { D as DateFormatter } from "../../../formatters/DateFormatter/DateFormatter.js";
 function ColumnDateFormatter(props) {
   const { fieldValue, presentationType, Component = React.Fragment } = props;
-  return (obProps) => {
-    const valueMaybeDateStringNumber = getPropertyByString(obProps, getFieldValueWithRow(fieldValue));
+  return (formatterProps) => {
+    const valueMaybeDateStringNumber = getPropertyByString(
+      formatterProps.row,
+      fieldValue
+    );
     let fixedValue;
     if (typeof valueMaybeDateStringNumber === "string" || typeof valueMaybeDateStringNumber === "number" || valueMaybeDateStringNumber instanceof Date) {
       fixedValue = valueMaybeDateStringNumber;
     } else {
       fixedValue = "";
     }
-    return /* @__PURE__ */ jsx(DateFormatter, { presentationType, value: fixedValue, Component });
+    return /* @__PURE__ */ jsx(
+      DateFormatter,
+      {
+        presentationType,
+        value: fixedValue,
+        Component
+      }
+    );
   };
 }
 export {

package/components/DataGrid/formatters/ColumnDateFormatter/useColumnDate.d.ts

@@ -8,7 +8,7 @@ export declare const useCustomDateFilter: <TRow>(props: ColumnDateFormatterProps
  * customFilter and customSort of a date column
  */
 export declare const useColumnDate: <TRow>(props: ColumnDateFormatterProps<TRow>) => {
-    formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
+    formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

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

@@ -1,6 +1,7 @@
 import { ColumnIconFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
 /**
  * Function to format an icon in a column of a DataGrid
  * @template TRow - Tipo de datos de la fila
  */
-export declare function ColumnIconFormatter<TRow>(props: ColumnIconFormatterProps<TRow>): (rowData: TRow) => JSX.Element;
+export declare function ColumnIconFormatter<TRow>(props: ColumnIconFormatterProps<TRow>): (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,8 +2,8 @@ import { r as renderMultipleIcons } from "./helpers/renderMultipleIcons.js";
 import { r as renderIcon } from "./helpers/renderIcon.js";
 function ColumnIconFormatter(props) {
   const { getIconProps } = props;
-  return (rowData) => {
-    const iconProps = getIconProps(rowData);
+  return (renderProps) => {
+    const iconProps = getIconProps(renderProps.row);
     if (Array.isArray(iconProps)) {
       return renderMultipleIcons(iconProps);
     }

package/components/DataGrid/formatters/ColumnIconFormatter/useColumnIcon.d.ts

@@ -4,5 +4,5 @@ import { ColumnIconFormatterProps } from './types';
  * el formatter de la columna
  */
 export declare const useColumnIcon: <TRow>(props: ColumnIconFormatterProps<TRow>) => {
-    formatter: (rowData: TRow) => JSX.Element;
+    formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -1,2 +1,2 @@
-import { FormatterProps as RDGFormatterProps } from 'react-data-grid';
-export type ColumnInteractiveCheckFormatterProps<Row> = RDGFormatterProps<Row>;
+import { RenderCellProps } from 'react-data-grid';
+export type ColumnInteractiveCheckFormatterProps<Row> = RenderCellProps<Row>;

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

@@ -1,5 +1,6 @@
 import { ColumnNestedValueFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
 /**
  * Function to format a nested value in a column of a DataGrid
  */
-export declare function ColumnNestedValueFormatter<TRow>(props: ColumnNestedValueFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnNestedValueFormatter<TRow>(props: ColumnNestedValueFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,12 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
 import React from "react";
-import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
 function ColumnNestedValueFormatter(props) {
   const { fieldValue, Component = React.Fragment } = props;
-  return (obProps) => {
-    const property = getNullGuard(getPropertyByString(obProps, getFieldValueWithRow(fieldValue)));
+  return (formatterProps) => {
+    const property = getNullGuard(
+      getPropertyByString(formatterProps.row, fieldValue)
+    );
     const value = typeof property === "object" ? JSON.stringify(property) : property;
     return /* @__PURE__ */ jsx(Component, { children: value });
   };

package/components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.d.ts

@@ -4,7 +4,7 @@ import { ColumnNestedValueFormatterProps } from './types';
  * of the column for ColumnNestedValueFormatter.
  */
 export declare const useColumnNestedValue: <TRow>(props: ColumnNestedValueFormatterProps<TRow>) => {
-    formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
+    formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => any;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

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

@@ -1,5 +1,6 @@
 import { ColumnPointsFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
 /**
  * Formatter for column points in DataGrid
  */
-export declare function ColumnPointsFormatter<TRow>(props: ColumnPointsFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnPointsFormatter<TRow>(props: ColumnPointsFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +1,21 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { P as PointsFormatter } from "../../../formatters/PointsFormatter/PointsFormatter.js";
-import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 function ColumnPointsFormatter(props) {
   const { Component = React.Fragment } = props;
-  const fieldValue = getFieldValueWithRow(props.fieldValue);
-  const fieldUnit = getFieldValueWithRow(props.fieldUnit);
-  return (obProps) => {
-    return /* @__PURE__ */ jsx(PointsFormatter, { obProps, ...props, fieldValue, fieldUnit, Component });
+  const fieldValue = props.fieldValue;
+  const fieldUnit = props.fieldUnit;
+  return (formatterProps) => {
+    return /* @__PURE__ */ jsx(
+      PointsFormatter,
+      {
+        obProps: formatterProps.row,
+        ...props,
+        fieldValue,
+        fieldUnit,
+        Component
+      }
+    );
   };
 }
 export {

package/components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.d.ts

@@ -4,7 +4,7 @@ import { ColumnPointsFormatterProps } from './types';
  * return formatter, customFilter and customSort.
  */
 export declare const useColumnPoints: <TRow>(props: ColumnPointsFormatterProps<TRow>) => {
-    formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
+    formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

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

@@ -1,5 +1,6 @@
 import { ColumnPriceFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
 /**
  * Formatter for column price in DataGrid
  */
-export declare function ColumnPriceFormatter<TRow>(props: ColumnPriceFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnPriceFormatter<TRow>(props: ColumnPriceFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,12 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { P as PriceFormatter } from "../../../formatters/PriceFormatter/PriceFormatter.js";
-import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 function ColumnPriceFormatter(props) {
   const { Component = React.Fragment } = props;
-  const fieldValue = getFieldValueWithRow(props.fieldValue);
-  return (obProps) => {
-    return /* @__PURE__ */ jsx(PriceFormatter, { obProps, ...props, fieldValue, Component });
+  const fieldValue = props.fieldValue;
+  return (formatterProps) => {
+    return /* @__PURE__ */ jsx(
+      PriceFormatter,
+      {
+        obProps: formatterProps.row,
+        ...props,
+        fieldValue,
+        Component
+      }
+    );
   };
 }
 export {

package/components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.d.ts

@@ -4,7 +4,7 @@ import { ColumnPriceFormatterProps } from './types';
  * Returns formatter, customFilter and customSort.
  */
 export declare const useColumnPrice: <TRow>(props: ColumnPriceFormatterProps<TRow>) => {
-    formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
+    formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

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

@@ -1,4 +1,4 @@
-import { FormatterProps } from 'react-data-grid';
+import { RenderCellProps } from 'react-data-grid';
 import { ColumnSetCheckFormatterProps } from './types';
 import { RowKey } from '../../types';
 /**
@@ -6,4 +6,4 @@ import { RowKey } from '../../types';
  * acualizando un Set/Setter por medio de un hook generico el cual es invocado con el argumento field para ,
  * sin la necesidad de entrar en edición como lo hace un editor
  */
-export declare function ColumnSetCheckFormatter<Row, TKey extends RowKey = RowKey>(parameters: ColumnSetCheckFormatterProps<Row, TKey>): (props: FormatterProps<Row>) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnSetCheckFormatter<Row, TKey extends RowKey = RowKey>(parameters: ColumnSetCheckFormatterProps<Row, TKey>): (props: RenderCellProps<Row>) => import("react/jsx-runtime").JSX.Element;

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

@@ -23,7 +23,7 @@ function ColumnSetCheckFormatter(parameters) {
       {
         value: checkedRows.has(rowKeyGetter(row)) || false,
         disabled,
-        isCellSelected: props.isCellSelected,
+        tabIndex: props.tabIndex,
         onChange,
         "aria-label": "Select"
       }

package/components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.d.ts

@@ -5,7 +5,7 @@ import { ColumnSetCheckFormatterProps } from './types';
  * Returns formatter, customFilter and customSort.
  */
 export declare const useColumnSetCheck: <TRow, TKey extends RowKey = RowKey>(props: ColumnSetCheckFormatterProps<TRow, TKey>) => {
-    formatter: (props: import('react-data-grid').FormatterProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    formatter: (props: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: TKey) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

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

@@ -1,5 +1,6 @@
 import { ColumnUncertaintyFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
 /**
  * Formatter for column uncertainty in DataGrid
  */
-export declare function ColumnUncertaintyFormatter<TRow>(props: ColumnUncertaintyFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnUncertaintyFormatter<TRow>(props: ColumnUncertaintyFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,14 +1,23 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 import { U as UncertaintyFormatter } from "../../../formatters/UncertaintyFormatter/UncertaintyFormatter.js";
 function ColumnUncertaintyFormatter(props) {
   const { Component = React.Fragment } = props;
-  const fieldValue = getFieldValueWithRow(props.fieldValue);
-  const fieldSymbol = getFieldValueWithRow(props.fieldSymbol);
-  const fieldUnit = getFieldValueWithRow(props.fieldUnit);
-  return (obProps) => {
-    return /* @__PURE__ */ jsx(UncertaintyFormatter, { obProps, ...props, fieldValue, fieldSymbol, fieldUnit, Component });
+  const fieldValue = props.fieldValue;
+  const fieldSymbol = props.fieldSymbol;
+  const fieldUnit = props.fieldUnit;
+  return (formatterProps) => {
+    return /* @__PURE__ */ jsx(
+      UncertaintyFormatter,
+      {
+        obProps: formatterProps.row,
+        ...props,
+        fieldValue,
+        fieldSymbol,
+        fieldUnit,
+        Component
+      }
+    );
   };
 }
 export {

package/components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.d.ts

@@ -4,7 +4,7 @@ import { ColumnUncertaintyFormatterProps } from './types';
  * the filter and the customSort of the uncertainty column.
  */
 export declare const useColumnUncertanity: <TRow>(props: ColumnUncertaintyFormatterProps<TRow>) => {
-    formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
+    formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

package/components/DataGrid/index.d.ts

@@ -1,6 +1,6 @@
 export { DataGrid } from './DataGrid';
 export * from './formatters';
-export type { Column, EditorProps, FormatterProps } from 'react-data-grid';
+export type { Column, RenderEditCellProps, RenderCellProps } from 'react-data-grid';
 export type { RowKey, ChangeUserColumn } from './types';
 export { getDataGridComponentsDictionary } from './dictionary';
 export { TextEditor, NumberEditor } from './subcomponents/editors/TextEditor';

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfig/index.js

@@ -62,7 +62,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
         name: getLabel(DICTIONARY.SETTINGS_COLUMN_VISIBLE),
         width: 80,
         type: "boolean",
-        formatter: ColumnInteractiveCheckFormatter,
+        renderCell: ColumnInteractiveCheckFormatter,
         ...getAlignClass("center")
       },
       {
@@ -70,7 +70,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
         name: getLabel(DICTIONARY.SETTINGS_COLUMNS_FROZEN),
         width: 80,
         type: "boolean",
-        formatter: ColumnInteractiveCheckFormatter,
+        renderCell: ColumnInteractiveCheckFormatter,
         ...getAlignClass("center")
       }
     ],
@@ -176,7 +176,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
   const onInternalRowsChange = (newRows) => {
     setRows(newRows);
   };
-  const onRowClick = (row) => {
+  const onCellClick = ({ row }) => {
     if (selRows.has(row.key)) {
       return;
     }
@@ -196,9 +196,8 @@ const ColumnsConfig = forwardRef((props, ref) => {
           onRowsChange: onInternalRowsChange,
           selectedRows: selRows,
           onSelectedRowsChange: onInternalSelectedRowsChange,
-          onRowClick,
+          onCellClick,
           rowKeyGetter: (row) => row.key,
-          cellNavigationMode: "CHANGE_ROW",
           defaultColumnOptions: { resizable: true, sortable: true }
         }
       ) })

package/components/DataGrid/subcomponents/Table/hooks/getDragHeaderRenderer.d.ts

@@ -1,9 +1,9 @@
 import { FunctionComponent } from 'react';
-import { HeaderRendererProps } from 'react-data-grid';
+import { RenderHeaderCellProps } from 'react-data-grid';
 /**
  * Función encargada de retornar el componente de renderizado de cabecera con la capacidad de arrastrar columnas
  * @param handleColumnsReorder - Función que se ejecuta al reordenar columnas
  */
 export declare const getDragHeaderRenderer: <TRow, TSummaryRow>(handleColumnsReorder: (sourceKey: string, targetKey: string) => void, options?: {
     openPopover?: (anchorEl: HTMLElement, columnKey: string) => void;
-}) => FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>;
+}) => FunctionComponent<RenderHeaderCellProps<TRow, TSummaryRow>>;

package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.d.ts

@@ -1,6 +1,6 @@
-import { Column } from 'react-data-grid';
+import { Column, SortColumn } from 'react-data-grid';
 import { MenuAction } from '../subcomponents/HeaderRenderClick/types';
 /**
  * Función que retorna las acciones del menu del header de la columna
  */
-export declare function useHeaderMenuActions<Trow, TSummaryRow>(columnKey: string | null, finalColumns: readonly Column<Trow, TSummaryRow>[], defaultSortable: boolean): MenuAction[];
+export declare function useHeaderMenuActions<Trow, TSummaryRow>(columnKey: string | null, finalColumns: readonly Column<Trow, TSummaryRow>[], defaultSortable: boolean, handleSortFromPopover?: (newSortColumns: SortColumn[]) => void): MenuAction[];

package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.js

@@ -3,7 +3,7 @@ import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { D as DICTIONARY } from "../../../dictionary.js";
 import { p as pathIcons } from "../../../icons.js";
-function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
+function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSortFromPopover) {
   const {
     columnsConfig,
     onChangeColumnsConfig,
@@ -14,6 +14,13 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
   } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
   const { getLabel } = useModuleDictionary();
+  const executeSortChange = (newSortColumns) => {
+    if (handleSortFromPopover) {
+      handleSortFromPopover(newSortColumns);
+    } else {
+      setSortColumns(newSortColumns);
+    }
+  };
   const column = useMemo(() => {
     return finalColumns.find((c) => c.key === columnKey);
   }, [columnKey, finalColumns]);
@@ -66,8 +73,9 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
     if (!columnKey) {
       return;
     }
-    setSortColumns((prev) => prev.filter((s) => s.columnKey !== columnKey));
-  }, [columnKey, setSortColumns]);
+    const newSortColumns = sortColumns.filter((s) => s.columnKey !== columnKey);
+    executeSortChange(newSortColumns);
+  }, [columnKey, sortColumns, executeSortChange]);
   const hasAnySortApplied = useMemo(() => {
     return Boolean(currentSort);
   }, [currentSort]);
@@ -153,7 +161,7 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
           if (externalSortSettings) {
             addExternalSort("asc");
           } else {
-            setSortColumns([
+            executeSortChange([
               {
                 columnKey,
                 direction: "ASC"
@@ -175,7 +183,7 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
           if (externalSortSettings) {
             addExternalSort("desc");
           } else {
-            setSortColumns([
+            executeSortChange([
               {
                 columnKey,
                 direction: "DESC"
@@ -255,7 +263,8 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
     host_static_assets,
     environment_assets,
     getLabel,
-    isAddFilterDisabled
+    isAddFilterDisabled,
+    executeSortChange
   ]);
 }
 export {

package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js

@@ -137,16 +137,20 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
         return newColumn;
       }
       if (isSkeleton) {
-        newColumn.headerRenderer = SkeletonFormatter;
-        newColumn.formatter = SkeletonFormatter;
+        newColumn.renderHeaderCell = SkeletonFormatter;
+        newColumn.renderCell = SkeletonFormatter;
+      } else {
+        if (newColumn.formatter && !newColumn.renderCell) {
+          newColumn.renderCell = newColumn.formatter;
+        }
       }
-      if (newColumn.headerRenderer) {
-        newColumn.withinHeaderRenderer = newColumn.headerRenderer;
+      if (newColumn.renderHeaderCell) {
+        newColumn.withinHeaderRenderer = newColumn.renderHeaderCell;
       }
       if ((newColumn?.withFilter === void 0 || newColumn.withFilter === true) && activeFilters) {
         newColumn.headerCellClass = `${newColumn.headerCellClass} ${filterColumnClassName}`.trim();
       }
-      newColumn.headerRenderer = DragAndDropHeaderRenderer;
+      newColumn.renderHeaderCell = DragAndDropHeaderRenderer;
       return newColumn;
     });
   }, [

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

@@ -1,5 +1,7 @@
+import { DataGridProps } from 'react-data-grid';
 import { GridProps, RowKey } from '../../types';
 /**
  * Componente que renderiza la tabla con las filas y columnas
+ * Acepta todos los props de DataGrid y prioriza las configuraciones personalizadas
  */
-export declare function Table<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: GridProps<TRow, TSummaryRow, TKey>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: GridProps<TRow, TSummaryRow, TKey> & Omit<DataGridProps<TRow, TSummaryRow>, keyof GridProps<TRow, TSummaryRow, TKey>>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState, useRef, useEffect } from "react";
 import DataGrid from "react-data-grid";
+import "react-data-grid/lib/styles.css";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { C as CheckboxFormatter } from "./subcomponents/CheckboxFormatter.js";
@@ -18,8 +19,19 @@ function Table(props) {
     onRowsChange,
     rowKeyGetter,
     selectedRows,
-    onSelectedRowsChange
+    onSelectedRowsChange,
+    defaultColumnOptions: defaultColumnOptionsProp,
+    ...restProps
   } = props;
+  const renderCheckbox = (formatterProps) => {
+    return /* @__PURE__ */ jsx(
+      CheckboxFormatter,
+      {
+        ...formatterProps,
+        tabIndex: formatterProps.tabIndex
+      }
+    );
+  };
   const { finalColumns, finalRows } = useSortColumnsRows(
     columns,
     rows,
@@ -55,7 +67,18 @@ function Table(props) {
     anchorEl: null,
     columnKey: null
   });
-  const onRowClick = (row) => {
+  const [allowSortChange, setAllowSortChange] = useState(false);
+  const handleSortColumnsChange = (newSortColumns) => {
+    if (allowSortChange) {
+      setSortColumns(newSortColumns);
+      setAllowSortChange(false);
+    }
+  };
+  const handleSortFromPopover = (newSortColumns) => {
+    setAllowSortChange(true);
+    setSortColumns(newSortColumns);
+  };
+  const onCellClick = ({ row }) => {
     if (selectedRows && onSelectedRowsChange) {
       if (selectedRows.entries().next().value) {
         if (selectedRows.entries().next().value?.[1] === rowKeyGetter(row)) {
@@ -90,11 +113,16 @@ function Table(props) {
   const onColumnResize = (idx, width) => {
     onChangeColumnWidth(finalColumns[idx].key, width);
   };
-  const defaultColumnOptions = { resizable: true, sortable: true };
+  const defaultColumnOptions = {
+    resizable: true,
+    sortable: true,
+    ...defaultColumnOptionsProp || {}
+  };
   const menuActions = useHeaderMenuActions(
     popoverState.columnKey,
     finalColumns,
-    defaultColumnOptions.sortable
+    Boolean(defaultColumnOptions.sortable),
+    handleSortFromPopover
   );
   return /* @__PURE__ */ jsx(TableContainerStyled, { id: "WrapperTable", children: /* @__PURE__ */ jsxs(TableWrapperDataGridStyled, { ownerState: { size }, children: [
     /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
@@ -105,18 +133,20 @@ function Table(props) {
         headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
         columns: finalColumns,
         sortColumns,
-        onSortColumnsChange: setSortColumns,
+        onSortColumnsChange: handleSortColumnsChange,
         onColumnResize,
         rows: finalRows,
         onRowsChange,
         selectedRows,
         onSelectedRowsChange,
-        onRowClick,
+        onCellClick,
         rowHeight: currentRowHeight,
         rowKeyGetter,
-        cellNavigationMode: "LOOP_OVER_ROW",
-        components: { checkboxFormatter: CheckboxFormatter },
-        defaultColumnOptions
+        renderers: {
+          renderCheckbox
+        },
+        defaultColumnOptions,
+        ...restProps
       }
     ) }),
     popoverState.columnKey && popoverState.anchorEl instanceof HTMLDivElement && /* @__PURE__ */ jsx(

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

@@ -35,7 +35,7 @@ const ActionsColumn = {
   sortable: false,
   frozen: true,
   type: "custom",
-  formatter: ActionsFormatter
+  renderCell: ActionsFormatter
 };
 function getActionLabel() {
   return "";

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

@@ -1,2 +1,2 @@
-import { CheckboxFormatterProps } from 'react-data-grid';
-export declare const CheckboxFormatter: import('react').ForwardRefExoticComponent<CheckboxFormatterProps & import('react').RefAttributes<HTMLInputElement>>;
+import { RenderCheckboxProps } from 'react-data-grid';
+export declare const CheckboxFormatter: import('react').ForwardRefExoticComponent<RenderCheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -1,5 +1,5 @@
-import { HeaderRendererProps } from 'react-data-grid';
-interface DraggableHeaderRendererProps<TRow> extends HeaderRendererProps<TRow> {
+import { RenderHeaderCellProps } from 'react-data-grid';
+interface DraggableHeaderRendererProps<TRow> extends RenderHeaderCellProps<TRow> {
     onColumnsReorder: (sourceKey: string, targetKey: string) => void;
     openPopover?: (anchorEl: HTMLElement, columnKey: string) => void;
 }

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { useDrag, useDrop } from "react-dnd";
-import { HeaderRenderer } from "react-data-grid";
+import { renderHeaderCell } from "react-data-grid";
 import { u as useFocusRef } from "../hooks/useFocusRef.js";
 import { u as useFilters } from "../../../hooks/useFilters.js";
 import { N as NameColumnIconStyled, n as NameColumnStyled, I as IconColumnStyled, o as DraggableHeaderRootStyled, B as ButtonHeaderActionsStyled, p as DraggableWrapperInputBaseStyled, q as IconSearchStyled, H as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
@@ -13,12 +13,13 @@ function DraggableHeaderRenderer(props) {
   const {
     onColumnsReorder,
     column,
-    isCellSelected,
+    tabIndex: headerTabIndex,
     openPopover,
-    onSort,
     ...others
   } = props;
-  const { ref, tabIndex } = useFocusRef(isCellSelected);
+  const { ref, tabIndex } = useFocusRef(
+    headerTabIndex !== void 0 && headerTabIndex >= 0
+  );
   const { getLabel } = useModuleDictionary();
   const { size, classes, externalSortSettings, externalFilterSettings } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -133,6 +134,9 @@ function DraggableHeaderRenderer(props) {
         opacity: isDragging ? 0.5 : 1,
         backgroundColor: isOver ? "#ececec" : void 0
       },
+      onClick: (e) => {
+        e.stopPropagation();
+      },
       children: [
         /* @__PURE__ */ jsx(
           ButtonHeaderActionsStyled,
@@ -143,12 +147,10 @@ function DraggableHeaderRenderer(props) {
               openPopover?.(e.currentTarget, column.key);
             },
             children: /* @__PURE__ */ jsx(
-              HeaderRenderer,
+              renderHeaderCell,
               {
                 column: newColumn,
-                isCellSelected,
-                onSort: () => {
-                },
+                tabIndex: headerTabIndex,
                 ...others
               }
             )

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

@@ -128,7 +128,7 @@ function HeaderRenderClick(props) {
         paper: {
           ...paperProps,
           sx: {
-            mt: !activeFilters ? 0.3 : 6.5,
+            mt: !activeFilters ? 0.3 : 5.6,
             ...paperProps?.sx
           }
         }

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

@@ -5,13 +5,13 @@ import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
 const filterColumnClassName = "filter-cell";
 const filterHeight = 35;
 function SelectGroupFormatter(props) {
-  const [isRowSelected, onRowSelectionChange] = useRowSelection();
+  const { isRowSelected, onRowSelectionChange } = useRowSelection();
   const onChange = (checked) => {
     onRowSelectionChange({ row: props.row, checked, isShiftClick: false });
   };
   const cellFormater = SelectCellFormatter({
     value: isRowSelected,
-    isCellSelected: props.isCellSelected,
+    tabIndex: props.tabIndex,
     onChange,
     "aria-label": "Select Group"
   });
@@ -32,7 +32,7 @@ function SelectFormatter(props) {
     SelectCellFormatter,
     {
       value: checkedRows?.has(rowKeyGetter(props.row)) || false,
-      isCellSelected: props.isCellSelected,
+      tabIndex: props.tabIndex,
       onChange,
       "aria-label": "Select"
     }
@@ -53,7 +53,7 @@ const SelectColumnHeaderRenderer = (props) => {
   const allRowsChecked = rows.length === checkedRows?.size;
   return SelectCellFormatter({
     "aria-label": "Select All",
-    isCellSelected: props.isCellSelected,
+    tabIndex: props.tabIndex,
     value: allRowsChecked,
     onChange: onAllRowsCheckedChange
   });
@@ -68,9 +68,9 @@ const SelectColumn = {
   sortable: false,
   frozen: true,
   type: "boolean",
-  headerRenderer: SelectColumnHeaderRenderer,
-  formatter: SelectFormatter,
-  groupFormatter: SelectGroupFormatter
+  renderHeaderCell: SelectColumnHeaderRenderer,
+  renderCell: SelectFormatter,
+  renderGroupCell: SelectGroupFormatter
 };
 export {
   SelectColumn as S,

package/components/DataGrid/subcomponents/editors/TextEditor/index.d.ts

@@ -1,10 +1,10 @@
-import { EditorProps } from 'react-data-grid';
+import { RenderEditCellProps } from 'react-data-grid';
 /**
  * TODO: Documentar
  */
-export declare function TextEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: EditorProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
+export declare function TextEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: RenderEditCellProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
 /**
  * TODO: Documentar
  */
-export declare function NumberEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: EditorProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
+export declare function NumberEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: RenderEditCellProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
 export default TextEditor;

package/components/DataGrid/types.d.ts

@@ -1,6 +1,6 @@
 import { Maybe } from '@m4l/core';
 import { Theme } from '@mui/material/styles';
-import { Column, RowsChangeData, FormatterProps } from 'react-data-grid';
+import { Column, RowsChangeData, RenderCellProps, DataGridProps as NativeDataGridProps } from 'react-data-grid';
 import { MenuAction } from '../MenuActions/types';
 import { ActionsSlots, ColumnIconFormatterSlots, ColumnsConfigSlots, ControlNavigateSlots, DataGridSlots, RowsCountSlots, TableSlots, TextEditorSlots } from './slots/DataGridEnum';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
@@ -9,7 +9,7 @@ import { IGridConfig } from './contexts/DataGridContext/types';
 import { Sizes } from '@m4l/styles';
 import { PagerProps } from '../Pager';
 import { SettingsProps } from './subcomponents/HeaderActions/subcomponents/Settings/types';
-export type GridFormatterPropss<T, SR> = FormatterProps<T, SR>;
+export type GridFormatterPropss<T, SR> = RenderCellProps<T, SR>;
 export type { ColumnUncertaintyFormatter, ColumnPointsFormatter, ColumnNestedValueFormatter, } from './formatters';
 export declare type ColumnType = 'string' | 'date' | 'number' | 'boolean' | 'custom';
 export declare type ColumnAlign = 'left' | 'center' | 'right';
@@ -31,9 +31,10 @@ declare module 'react-data-grid' {
         align?: ColumnAlign;
         isDraggable?: boolean;
         withFilter?: boolean;
-        withinHeaderRenderer?: React.FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>;
+        withinHeaderRenderer?: React.FunctionComponent<RenderHeaderCellProps<TRow, TSummaryRow>>;
         customFilter?: (row: TRow, value: string) => boolean;
         customSort?: (a: TRow, b: TRow) => number;
+        formatter?: (props: any) => JSX.Element;
     }
 }
 export declare type RowKey = string | number;
@@ -107,7 +108,7 @@ export interface FilterSettings {
     onChange: (event: FilterChangeEvent) => void;
 }
 /**--------------------Termina tipado de filtros-------------------------------------------- */
-export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> {
+export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Omit<NativeDataGridProps<TRow, TSummaryRow>, 'rowKeyGetter' | 'rows' | 'columns' | 'onRowsChange' | 'selectedRows' | 'onSelectedRowsChange' | 'renderers'> {
     id: string;
     withActions?: boolean;
     columns: readonly Column<TRow, TSummaryRow>[];

package/components/mui_extended/MenuItem/MenuItem.js

@@ -20,6 +20,7 @@ const MenuItem = (props) => {
     checked = false,
     checkable = false,
     className,
+    dataTestId,
     ...other
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -83,7 +84,7 @@ const MenuItem = (props) => {
       disableRipple: true,
       size: adjustedSize,
       className: clsx(className, MENUITEM_CLASSES.root),
-      "data-testid": "MenuItemRoot",
+      "data-testid": dataTestId || "MenuItemRoot",
       children: [
         checkable && /* @__PURE__ */ jsx(
           MenuItemIconCheckedStyled,

package/components/mui_extended/MenuItem/types.d.ts

@@ -53,6 +53,10 @@ export interface MenuItemProps extends Omit<MUIMenuItemProps, 'size' | 'color'>
      * indica si debe aparecer el icono de check
      */
     checkable?: boolean;
+    /**
+     * ID para pruebas que se pasará como data-testid
+     */
+    dataTestId?: string;
 }
 /**
  * Estado del propietario del `MenuItem` utilizado para definir propiedades internas de estilo y comportamiento.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.62-JT09072025.beta.2",
+  "version": "9.2.63-JT14072025.beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -34,7 +34,7 @@
     "react": "18.3.1",
     "react-chartjs-2": "^5.2.0",
     "react-color": "^2.19.3",
-    "react-data-grid": "7.0.0-beta.13",
+    "react-data-grid": "7.0.0-beta.47",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.3.1",

package/storybook/components/DataGrid/helpers/types.d.ts

@@ -1,4 +1,4 @@
-import { HeaderRendererProps } from 'react-data-grid';
+import { RenderHeaderCellProps } from 'react-data-grid';
 import { ChipStatusFormatterProps } from '../../../../src/components/formatters/ChipStatusFormatter/types';
 import { DeepKeyOf } from '../../../../src/utils/types';
 import { ColumnAlign } from '../../../../src/components/DataGrid/types';
@@ -74,7 +74,7 @@ export interface Column<TRow, TSummaryRow> {
     type: ColumnType;
     formatter?: (props: any) => JSX.Element;
     width?: number;
-    withinHeaderRenderer?: React.FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>;
+    withinHeaderRenderer?: React.FunctionComponent<RenderHeaderCellProps<TRow, TSummaryRow>>;
     customFilter?: (row: TRow, value: string) => boolean;
     customSort?: (a: TRow, b: TRow) => number;
 }

package/helpers/getFieldValueWithRow.js

@@ -1,10 +0,0 @@
-const getFieldValueWithRow = (fieldValue) => {
-  const row = "row";
-  if (fieldValue.includes(row)) {
-    return fieldValue;
-  }
-  return `${row}.${fieldValue}`;
-};
-export {
-  getFieldValueWithRow as g
-};