@m4l/components 9.2.63-JT14072025.beta.1 → 9.2.64

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

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

@@ -1,19 +1,12 @@
 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 = props.fieldValue;
-  return (formatterProps) => {
-    return /* @__PURE__ */ jsx(
-      PriceFormatter,
-      {
-        obProps: formatterProps.row,
-        ...props,
-        fieldValue,
-        Component
-      }
-    );
+  const fieldValue = getFieldValueWithRow(props.fieldValue);
+  return (obProps) => {
+    return /* @__PURE__ */ jsx(PriceFormatter, { obProps, ...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: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    formatter: (obProps: any) => 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 { RenderCellProps } from 'react-data-grid';
+import { FormatterProps } 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: RenderCellProps<Row>) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnSetCheckFormatter<Row, TKey extends RowKey = RowKey>(parameters: ColumnSetCheckFormatterProps<Row, TKey>): (props: FormatterProps<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,
-        tabIndex: props.tabIndex,
+        isCellSelected: props.isCellSelected,
         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').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    formatter: (props: import('react-data-grid').FormatterProps<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,6 +1,5 @@
 import { ColumnUncertaintyFormatterProps } from './types';
-import { RenderCellProps } from 'react-data-grid';
 /**
  * Formatter for column uncertainty in DataGrid
  */
-export declare function ColumnUncertaintyFormatter<TRow>(props: ColumnUncertaintyFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnUncertaintyFormatter<TRow>(props: ColumnUncertaintyFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,23 +1,14 @@
 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 = props.fieldValue;
-  const fieldSymbol = props.fieldSymbol;
-  const fieldUnit = props.fieldUnit;
-  return (formatterProps) => {
-    return /* @__PURE__ */ jsx(
-      UncertaintyFormatter,
-      {
-        obProps: formatterProps.row,
-        ...props,
-        fieldValue,
-        fieldSymbol,
-        fieldUnit,
-        Component
-      }
-    );
+  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 });
   };
 }
 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: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    formatter: (obProps: any) => 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, RenderEditCellProps, RenderCellProps } from 'react-data-grid';
+export type { Column, EditorProps, FormatterProps } 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",
-        renderCell: ColumnInteractiveCheckFormatter,
+        formatter: ColumnInteractiveCheckFormatter,
         ...getAlignClass("center")
       },
       {
@@ -70,7 +70,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
         name: getLabel(DICTIONARY.SETTINGS_COLUMNS_FROZEN),
         width: 80,
         type: "boolean",
-        renderCell: ColumnInteractiveCheckFormatter,
+        formatter: ColumnInteractiveCheckFormatter,
         ...getAlignClass("center")
       }
     ],
@@ -176,7 +176,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
   const onInternalRowsChange = (newRows) => {
     setRows(newRows);
   };
-  const onCellClick = ({ row }) => {
+  const onRowClick = (row) => {
     if (selRows.has(row.key)) {
       return;
     }
@@ -196,8 +196,9 @@ const ColumnsConfig = forwardRef((props, ref) => {
           onRowsChange: onInternalRowsChange,
           selectedRows: selRows,
           onSelectedRowsChange: onInternalSelectedRowsChange,
-          onCellClick,
+          onRowClick,
           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 { RenderHeaderCellProps } from 'react-data-grid';
+import { HeaderRendererProps } 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<RenderHeaderCellProps<TRow, TSummaryRow>>;
+}) => FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>;

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

@@ -1,6 +1,6 @@
-import { Column, SortColumn } from 'react-data-grid';
+import { Column } 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, handleSortFromPopover?: (newSortColumns: SortColumn[]) => void): MenuAction[];
+export declare function useHeaderMenuActions<Trow, TSummaryRow>(columnKey: string | null, finalColumns: readonly Column<Trow, TSummaryRow>[], defaultSortable: boolean): 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, handleSortFromPopover) {
+function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
   const {
     columnsConfig,
     onChangeColumnsConfig,
@@ -14,13 +14,6 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
   } = 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]);
@@ -73,9 +66,8 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
     if (!columnKey) {
       return;
     }
-    const newSortColumns = sortColumns.filter((s) => s.columnKey !== columnKey);
-    executeSortChange(newSortColumns);
-  }, [columnKey, sortColumns, executeSortChange]);
+    setSortColumns((prev) => prev.filter((s) => s.columnKey !== columnKey));
+  }, [columnKey, setSortColumns]);
   const hasAnySortApplied = useMemo(() => {
     return Boolean(currentSort);
   }, [currentSort]);
@@ -161,7 +153,7 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
           if (externalSortSettings) {
             addExternalSort("asc");
           } else {
-            executeSortChange([
+            setSortColumns([
               {
                 columnKey,
                 direction: "ASC"
@@ -183,7 +175,7 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
           if (externalSortSettings) {
             addExternalSort("desc");
           } else {
-            executeSortChange([
+            setSortColumns([
               {
                 columnKey,
                 direction: "DESC"
@@ -263,8 +255,7 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
     host_static_assets,
     environment_assets,
     getLabel,
-    isAddFilterDisabled,
-    executeSortChange
+    isAddFilterDisabled
   ]);
 }
 export {

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

@@ -17,6 +17,7 @@ function getComparator(columns, sortColumn) {
     return column.customSort;
   }
   switch (typeOrder) {
+    //Si el tipo de dato de la columna es un numerico, retorna una función de ordenamiento numérica
     case "number":
       return (a, b) => {
         try {
@@ -25,6 +26,7 @@ function getComparator(columns, sortColumn) {
           return -1;
         }
       };
+    //Por defecto retorna una función de ordenamiento de string
     default:
       return (a, b) => {
         try {
@@ -137,20 +139,16 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
         return newColumn;
       }
       if (isSkeleton) {
-        newColumn.renderHeaderCell = SkeletonFormatter;
-        newColumn.renderCell = SkeletonFormatter;
-      } else {
-        if (newColumn.formatter && !newColumn.renderCell) {
-          newColumn.renderCell = newColumn.formatter;
-        }
+        newColumn.headerRenderer = SkeletonFormatter;
+        newColumn.formatter = SkeletonFormatter;
       }
-      if (newColumn.renderHeaderCell) {
-        newColumn.withinHeaderRenderer = newColumn.renderHeaderCell;
+      if (newColumn.headerRenderer) {
+        newColumn.withinHeaderRenderer = newColumn.headerRenderer;
       }
       if ((newColumn?.withFilter === void 0 || newColumn.withFilter === true) && activeFilters) {
         newColumn.headerCellClass = `${newColumn.headerCellClass} ${filterColumnClassName}`.trim();
       }
-      newColumn.renderHeaderCell = DragAndDropHeaderRenderer;
+      newColumn.headerRenderer = DragAndDropHeaderRenderer;
       return newColumn;
     });
   }, [

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

@@ -1,7 +1,5 @@
-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> & Omit<DataGridProps<TRow, TSummaryRow>, keyof 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>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,6 @@
 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";
@@ -19,19 +18,8 @@ function Table(props) {
     onRowsChange,
     rowKeyGetter,
     selectedRows,
-    onSelectedRowsChange,
-    defaultColumnOptions: defaultColumnOptionsProp,
-    ...restProps
+    onSelectedRowsChange
   } = props;
-  const renderCheckbox = (formatterProps) => {
-    return /* @__PURE__ */ jsx(
-      CheckboxFormatter,
-      {
-        ...formatterProps,
-        tabIndex: formatterProps.tabIndex
-      }
-    );
-  };
   const { finalColumns, finalRows } = useSortColumnsRows(
     columns,
     rows,
@@ -67,18 +55,7 @@ function Table(props) {
     anchorEl: null,
     columnKey: null
   });
-  const [allowSortChange, setAllowSortChange] = useState(false);
-  const handleSortColumnsChange = (newSortColumns) => {
-    if (allowSortChange) {
-      setSortColumns(newSortColumns);
-      setAllowSortChange(false);
-    }
-  };
-  const handleSortFromPopover = (newSortColumns) => {
-    setAllowSortChange(true);
-    setSortColumns(newSortColumns);
-  };
-  const onCellClick = ({ row }) => {
+  const onRowClick = (row) => {
     if (selectedRows && onSelectedRowsChange) {
       if (selectedRows.entries().next().value) {
         if (selectedRows.entries().next().value?.[1] === rowKeyGetter(row)) {
@@ -113,16 +90,11 @@ function Table(props) {
   const onColumnResize = (idx, width) => {
     onChangeColumnWidth(finalColumns[idx].key, width);
   };
-  const defaultColumnOptions = {
-    resizable: true,
-    sortable: true,
-    ...defaultColumnOptionsProp || {}
-  };
+  const defaultColumnOptions = { resizable: true, sortable: true };
   const menuActions = useHeaderMenuActions(
     popoverState.columnKey,
     finalColumns,
-    Boolean(defaultColumnOptions.sortable),
-    handleSortFromPopover
+    defaultColumnOptions.sortable
   );
   return /* @__PURE__ */ jsx(TableContainerStyled, { id: "WrapperTable", children: /* @__PURE__ */ jsxs(TableWrapperDataGridStyled, { ownerState: { size }, children: [
     /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
@@ -133,20 +105,18 @@ function Table(props) {
         headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
         columns: finalColumns,
         sortColumns,
-        onSortColumnsChange: handleSortColumnsChange,
+        onSortColumnsChange: setSortColumns,
         onColumnResize,
         rows: finalRows,
         onRowsChange,
         selectedRows,
         onSelectedRowsChange,
-        onCellClick,
+        onRowClick,
         rowHeight: currentRowHeight,
         rowKeyGetter,
-        renderers: {
-          renderCheckbox
-        },
-        defaultColumnOptions,
-        ...restProps
+        cellNavigationMode: "LOOP_OVER_ROW",
+        components: { checkboxFormatter: CheckboxFormatter },
+        defaultColumnOptions
       }
     ) }),
     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",
-  renderCell: ActionsFormatter
+  formatter: ActionsFormatter
 };
 function getActionLabel() {
   return "";

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

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

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

@@ -1,5 +1,5 @@
-import { RenderHeaderCellProps } from 'react-data-grid';
-interface DraggableHeaderRendererProps<TRow> extends RenderHeaderCellProps<TRow> {
+import { HeaderRendererProps } from 'react-data-grid';
+interface DraggableHeaderRendererProps<TRow> extends HeaderRendererProps<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 { renderHeaderCell } from "react-data-grid";
+import { HeaderRenderer } 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,13 +13,12 @@ function DraggableHeaderRenderer(props) {
   const {
     onColumnsReorder,
     column,
-    tabIndex: headerTabIndex,
+    isCellSelected,
     openPopover,
+    onSort,
     ...others
   } = props;
-  const { ref, tabIndex } = useFocusRef(
-    headerTabIndex !== void 0 && headerTabIndex >= 0
-  );
+  const { ref, tabIndex } = useFocusRef(isCellSelected);
   const { getLabel } = useModuleDictionary();
   const { size, classes, externalSortSettings, externalFilterSettings } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -134,9 +133,6 @@ function DraggableHeaderRenderer(props) {
         opacity: isDragging ? 0.5 : 1,
         backgroundColor: isOver ? "#ececec" : void 0
       },
-      onClick: (e) => {
-        e.stopPropagation();
-      },
       children: [
         /* @__PURE__ */ jsx(
           ButtonHeaderActionsStyled,
@@ -147,10 +143,12 @@ function DraggableHeaderRenderer(props) {
               openPopover?.(e.currentTarget, column.key);
             },
             children: /* @__PURE__ */ jsx(
-              renderHeaderCell,
+              HeaderRenderer,
               {
                 column: newColumn,
-                tabIndex: headerTabIndex,
+                isCellSelected,
+                onSort: () => {
+                },
                 ...others
               }
             )

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

@@ -128,7 +128,7 @@ function HeaderRenderClick(props) {
         paper: {
           ...paperProps,
           sx: {
-            mt: !activeFilters ? 0.3 : 5.6,
+            mt: !activeFilters ? 0.3 : 6.5,
             ...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,
-    tabIndex: props.tabIndex,
+    isCellSelected: props.isCellSelected,
     onChange,
     "aria-label": "Select Group"
   });
@@ -32,7 +32,7 @@ function SelectFormatter(props) {
     SelectCellFormatter,
     {
       value: checkedRows?.has(rowKeyGetter(props.row)) || false,
-      tabIndex: props.tabIndex,
+      isCellSelected: props.isCellSelected,
       onChange,
       "aria-label": "Select"
     }
@@ -53,7 +53,7 @@ const SelectColumnHeaderRenderer = (props) => {
   const allRowsChecked = rows.length === checkedRows?.size;
   return SelectCellFormatter({
     "aria-label": "Select All",
-    tabIndex: props.tabIndex,
+    isCellSelected: props.isCellSelected,
     value: allRowsChecked,
     onChange: onAllRowsCheckedChange
   });
@@ -68,9 +68,9 @@ const SelectColumn = {
   sortable: false,
   frozen: true,
   type: "boolean",
-  renderHeaderCell: SelectColumnHeaderRenderer,
-  renderCell: SelectFormatter,
-  renderGroupCell: SelectGroupFormatter
+  headerRenderer: SelectColumnHeaderRenderer,
+  formatter: SelectFormatter,
+  groupFormatter: SelectGroupFormatter
 };
 export {
   SelectColumn as S,

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

@@ -1,10 +1,10 @@
-import { RenderEditCellProps } from 'react-data-grid';
+import { EditorProps } from 'react-data-grid';
 /**
  * TODO: Documentar
  */
-export declare function TextEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: RenderEditCellProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
+export declare function TextEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: EditorProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
 /**
  * TODO: Documentar
  */
-export declare function NumberEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: RenderEditCellProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
+export declare function NumberEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: EditorProps<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, RenderCellProps, DataGridProps as NativeDataGridProps } from 'react-data-grid';
+import { Column, RowsChangeData, FormatterProps } 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> = RenderCellProps<T, SR>;
+export type GridFormatterPropss<T, SR> = FormatterProps<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,10 +31,9 @@ declare module 'react-data-grid' {
         align?: ColumnAlign;
         isDraggable?: boolean;
         withFilter?: boolean;
-        withinHeaderRenderer?: React.FunctionComponent<RenderHeaderCellProps<TRow, TSummaryRow>>;
+        withinHeaderRenderer?: React.FunctionComponent<HeaderRendererProps<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;
@@ -108,7 +107,7 @@ export interface FilterSettings {
     onChange: (event: FilterChangeEvent) => void;
 }
 /**--------------------Termina tipado de filtros-------------------------------------------- */
-export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Omit<NativeDataGridProps<TRow, TSummaryRow>, 'rowKeyGetter' | 'rows' | 'columns' | 'onRowsChange' | 'selectedRows' | 'onSelectedRowsChange' | 'renderers'> {
+export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> {
     id: string;
     withActions?: boolean;
     columns: readonly Column<TRow, TSummaryRow>[];

package/components/Image/Image.js

@@ -13,12 +13,14 @@ function Image(props) {
     threshold = 100,
     dataTestId,
     className,
+    cover,
     ...others
   } = props;
   const isSkeleton = useModuleSkeleton();
   const ownerState = useMemo(() => ({
-    isSkeleton
-  }), [isSkeleton]);
+    isSkeleton,
+    cover
+  }), [cover, isSkeleton]);
   const lazyLoadComponent = useMemo(() => {
     return /* @__PURE__ */ jsx(
       LazyLoadComponent,

package/components/Image/image.styles.js

@@ -2,11 +2,14 @@ const imageStyles = {
   /**
    * Estilos para Image.
    */
-  root: {
+  root: ({ ownerState }) => ({
     display: "flex",
     flexDirection: "column",
-    alignItems: "flex-start"
-  },
+    alignItems: "flex-start",
+    ...ownerState?.cover && {
+      objectFit: "cover"
+    }
+  }),
   /**
    * Estilos para el intersectComponente o para el 'span'
    */