@m4l/components 9.2.65 → 9.3.0

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

@@ -17,7 +17,6 @@ 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 {
@@ -26,7 +25,6 @@ function getComparator(columns, sortColumn) {
           return -1;
         }
       };
-    //Por defecto retorna una función de ordenamiento de string
     default:
       return (a, b) => {
         try {
@@ -139,16 +137,24 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
         return newColumn;
       }
       if (isSkeleton) {
-        newColumn.headerRenderer = SkeletonFormatter;
-        newColumn.formatter = SkeletonFormatter;
+        newColumn.renderHeaderCell = SkeletonFormatter;
+        newColumn.renderCell = SkeletonFormatter;
+        newColumn.renderEditCell = SkeletonFormatter;
+      } else {
+        if (newColumn.formatter && !newColumn.renderCell) {
+          newColumn.renderCell = newColumn.formatter;
+        }
+        if (newColumn.editor && !newColumn.renderEditCell) {
+          newColumn.renderEditCell = newColumn.editor;
+        }
       }
-      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

@@ -18,8 +18,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 +66,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 +112,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 +132,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,20 @@
-import { EditorProps } from 'react-data-grid';
+import { RenderEditCellProps } from 'react-data-grid';
 /**
- * TODO: Documentar
+ * Editor para campos de texto en el DataGrid.
+ * Permite editar valores de texto con navegación por teclado.
+ * @param row - Fila actual del DataGrid
+ * @param column - Columna actual del DataGrid
+ * @param onRowChange - Función para actualizar la fila
+ * @param onClose - Función para cerrar el editor
  */
-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
+ * Editor para campos numéricos en el DataGrid.
+ * Permite editar valores numéricos con validación y navegación por teclado.
+ * @param row - Fila actual del DataGrid
+ * @param column - Columna actual del DataGrid
+ * @param onRowChange - Función para actualizar la fila
+ * @param onClose - Función para cerrar el editor
  */
-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,8 @@ 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>;
+import { ReactNode } from 'react';
+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 +32,13 @@ 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;
+        /** @deprecated Usa renderCell en lugar de formatter. Este atributo será removido en una futura versión. */
+        formatter?: (props: any) => JSX.Element;
+        /** @deprecated Usa renderEditCell en lugar de editor. Este atributo será removido en una futura versión. */
+        editor?: Maybe<(props: RenderEditCellProps<TRow, TSummaryRow>) => ReactNode>;
     }
 }
 export declare type RowKey = string | number;
@@ -107,7 +112,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/NumberInput/hooks/useNumberInput/useNumberInput.js

@@ -56,11 +56,9 @@ const useNumberInput = (parameters) => {
     (event, field, fieldValue, reason) => {
       if (field === "value" && typeof fieldValue !== "string") {
         switch (reason) {
-          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:inputChange":
             onChange?.(event, fieldValue);
             break;
-          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:clamp":
             onChange?.(event, fieldValue);
             break;

package/components/areas/contexts/AreasContext/store.js

@@ -441,8 +441,8 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
                   bounds: {
                     left: MARGIN_GRIDLAYOUT,
                     top: MARGIN_GRIDLAYOUT,
-                    right: -MARGIN_GRIDLAYOUT,
-                    bottom: -MARGIN_GRIDLAYOUT
+                    right: -10,
+                    bottom: -10
                   }
                 });
               }

package/components/formatters/BooleanFormatter/BooleanFormatter.styles.js

@@ -13,7 +13,7 @@ const booleanFormatterStyles = {
    */
   icon: ({ theme }) => ({
     "& .M4LIcon-icon": {
-      backgroundColor: theme.vars.palette.text.primary
+      backgroundColor: theme.vars.palette.primary.semanticText
     }
   }),
   /**

package/components/hook-form/RHFAutocompleteAsync/reducer/RHFAutocompleteReducer.js

@@ -65,11 +65,6 @@ const RHFAutocompleteAsyncReducer = (onChangeFilterParms) => (state, action) =>
         ...state,
         isOpen: false
       };
-    // case actionsType.SET_SELECTED_OPTIONS_TO_AUTOCOMPLETE:
-    //   return {
-    //     ...state,
-    //     selectedOptions: action.payload,
-    //   };
     default:
       return state;
   }

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.65",
+  "version": "9.3.0",
   "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/DataGrid.stories.d.ts

@@ -19,6 +19,10 @@ export declare const DataGridWithEventChangeUserColumn: Story;
  * DataGrid con columns formatters
  */
 export declare const DatagridWithFormatters: Story;
+/**
+ * DataGrid con columns editors
+ */
+export declare const DatagridWithEditors: Story;
 /**
  * DataGrid con columns with actions
  */

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';
@@ -21,6 +21,7 @@ export interface SeedProps {
     withActionsUser?: boolean;
     withBooleanStatus?: boolean;
     withUserType?: boolean;
+    withEditors?: boolean;
     aligns?: Record<string, ColumnAlign>;
     names?: Record<string, string>;
 }
@@ -74,7 +75,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;
 }