@mui/x-data-grid 7.0.0-beta.0 → 7.0.0-beta.2

package/hooks/features/rows/useGridParamsApi.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { getGridCellElement, getGridColumnHeaderElement, getGridRowElement } from '../../../utils/domUtils';
-import { GRID_ID_AUTOGENERATED } from './gridRowsUtils';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
 export class MissingRowIdError extends Error {}
@@ -13,10 +12,7 @@ export class MissingRowIdError extends Error {}
  * TODO: Impossible priority - useGridEditing also needs to be after useGridParamsApi
  * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
  */
-export function useGridParamsApi(apiRef, props) {
-  const {
-    getRowId
-  } = props;
+export function useGridParamsApi(apiRef) {
   const getColumnHeaderParams = React.useCallback(field => ({
     field,
     colDef: apiRef.current.getColumn(field)
@@ -33,28 +29,6 @@ export function useGridParamsApi(apiRef, props) {
     };
     return params;
   }, [apiRef]);
-  const getBaseCellParams = React.useCallback((id, field) => {
-    const row = apiRef.current.getRow(id);
-    const rowNode = apiRef.current.getRowNode(id);
-    if (!row || !rowNode) {
-      throw new MissingRowIdError(`No row with id #${id} found`);
-    }
-    const cellFocus = gridFocusCellSelector(apiRef);
-    const cellTabIndex = gridTabIndexCellSelector(apiRef);
-    const params = {
-      id,
-      field,
-      row,
-      rowNode,
-      value: row[field],
-      colDef: apiRef.current.getColumn(field),
-      cellMode: apiRef.current.getCellMode(id, field),
-      api: apiRef.current,
-      hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,
-      tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1
-    };
-    return params;
-  }, [apiRef]);
   const getCellParams = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
     const value = apiRef.current.getCellValue(id, field);
@@ -79,12 +53,7 @@ export function useGridParamsApi(apiRef, props) {
       isEditable: false
     };
     if (colDef && colDef.valueFormatter) {
-      params.formattedValue = colDef.valueFormatter({
-        id,
-        field: params.field,
-        value: params.value,
-        api: apiRef.current
-      });
+      params.formattedValue = colDef.valueFormatter(value, row, colDef, apiRef);
     }
     params.isEditable = colDef && apiRef.current.isCellEditable(params);
     return params;
@@ -98,32 +67,28 @@ export function useGridParamsApi(apiRef, props) {
       }
       return rowModel[field];
     }
-    return colDef.valueGetter(getBaseCellParams(id, field));
-  }, [apiRef, getBaseCellParams]);
+    const row = apiRef.current.getRow(id);
+    if (!row) {
+      throw new MissingRowIdError(`No row with id #${id} found`);
+    }
+    const value = row[colDef.field];
+    return colDef.valueGetter(value, row, colDef, apiRef);
+  }, [apiRef]);
   const getRowValue = React.useCallback((row, colDef) => {
-    var _getRowId;
-    const id = GRID_ID_AUTOGENERATED in row ? row[GRID_ID_AUTOGENERATED] : (_getRowId = getRowId == null ? void 0 : getRowId(row)) != null ? _getRowId : row.id;
     const field = colDef.field;
     if (!colDef || !colDef.valueGetter) {
       return row[field];
     }
-    return colDef.valueGetter(getBaseCellParams(id, field));
-  }, [getBaseCellParams, getRowId]);
+    const value = row[colDef.field];
+    return colDef.valueGetter(value, row, colDef, apiRef);
+  }, [apiRef]);
   const getRowFormattedValue = React.useCallback((row, colDef) => {
-    var _ref;
     const value = getRowValue(row, colDef);
     if (!colDef || !colDef.valueFormatter) {
       return value;
     }
-    const id = (_ref = getRowId ? getRowId(row) : row.id) != null ? _ref : row[GRID_ID_AUTOGENERATED];
-    const field = colDef.field;
-    return colDef.valueFormatter({
-      id,
-      field,
-      value,
-      api: apiRef.current
-    });
-  }, [apiRef, getRowId, getRowValue]);
+    return colDef.valueFormatter(value, row, colDef, apiRef);
+  }, [apiRef, getRowValue]);
   const getColumnHeaderElement = React.useCallback(field => {
     if (!apiRef.current.rootElementRef.current) {
       return null;

package/hooks/features/rows/useGridRows.js

@@ -121,7 +121,7 @@ export const useGridRows = (apiRef, props) => {
   }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange, apiRef]);
   const updateRows = React.useCallback(updates => {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
-      throw new Error(["MUI X: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+      throw new Error(['MUI X: You cannot update several rows at once in `apiRef.current.updateRows` on the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
     const nonPinnedRowsUpdates = [];
     updates.forEach(update => {
@@ -252,7 +252,7 @@ export const useGridRows = (apiRef, props) => {
   }, [apiRef, logger]);
   const replaceRows = React.useCallback((firstRowToRender, newRows) => {
     if (props.signature === GridSignature.DataGrid && newRows.length > 1) {
-      throw new Error(["MUI X: You can't replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+      throw new Error(['MUI X: You cannot replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
     if (newRows.length === 0) {
       return;

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -27,7 +27,6 @@ export declare const useGridVirtualScroller: () => {
         role: string;
     };
     getRenderZoneProps: () => {
-        ref: React.RefObject<HTMLDivElement>;
         role: string;
     };
     getScrollbarVerticalProps: () => {

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -46,7 +46,6 @@ export const useGridVirtualScroller = () => {
   const gridRootRef = apiRef.current.rootElementRef;
   const mainRef = apiRef.current.mainElementRef;
   const scrollerRef = apiRef.current.virtualScrollerRef;
-  const renderZoneRef = React.useRef(null);
   const scrollbarVerticalRef = React.useRef(null);
   const scrollbarHorizontalRef = React.useRef(null);
   const contentHeight = dimensions.contentSize.height;
@@ -247,6 +246,14 @@ export const useGridVirtualScroller = () => {
         id,
         model
       } = renderedRows[i];
+      const rowIndexInPage = ((currentPage == null || (_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0) + firstRowToRender + i;
+      let index = rowIndexOffset + rowIndexInPage;
+      if (isRowWithFocusedCellNotInRange && (cellFocus == null ? void 0 : cellFocus.id) === id) {
+        index = indexOfRowWithFocusedCell;
+        isRowWithFocusedCellRendered = true;
+      } else if (isRowWithFocusedCellRendered) {
+        index -= 1;
+      }
       const isRowNotVisible = isRowWithFocusedCellNotInRange && cellFocus.id === id;
       const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
       let isSelected;
@@ -257,7 +264,7 @@ export const useGridVirtualScroller = () => {
       }
       let isFirstVisible = false;
       if (params.position === undefined) {
-        isFirstVisible = i === 0;
+        isFirstVisible = rowIndexInPage === 0;
       }
       let isLastVisible = false;
       if (isLastSection) {
@@ -279,13 +286,6 @@ export const useGridVirtualScroller = () => {
         const cellParams = apiRef.current.getCellParams(id, cellTabIndex.field);
         tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null;
       }
-      let index = rowIndexOffset + ((currentPage == null || (_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0) + firstRowToRender + i;
-      if (isRowWithFocusedCellNotInRange && (cellFocus == null ? void 0 : cellFocus.id) === id) {
-        index = indexOfRowWithFocusedCell;
-        isRowWithFocusedCellRendered = true;
-      } else if (isRowWithFocusedCellRendered) {
-        index -= 1;
-      }
       rows.push( /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
         row: model,
         rowId: id,
@@ -387,7 +387,6 @@ export const useGridVirtualScroller = () => {
       role: 'presentation'
     }),
     getRenderZoneProps: () => ({
-      ref: renderZoneRef,
       role: 'rowgroup'
     }),
     getScrollbarVerticalProps: () => ({

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-beta.0
+ * @mui/x-data-grid v7.0.0-beta.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/utils/propValidation.js

@@ -1,4 +1,4 @@
-export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You can not use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined];
+export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined];
 const warnedOnceMap = new Set();
 const warnOnce = message => {
   if (!warnedOnceMap.has(message)) {

package/joy/joySlots.js

@@ -404,8 +404,8 @@ const joySlots = _extends({}, joyIconSlots, {
   baseSelect: Select,
   baseSelectOption: Option,
   baseInputLabel: InputLabel,
-  baseFormControl: JoyFormControl,
-  baseTooltip: JoyTooltip,
+  baseFormControl: JoyFormControl /* FIXME: typing error */,
+  baseTooltip: JoyTooltip /* FIXME: typing error */,
   pagination: Pagination,
   loadingOverlay: LoadingOverlay
 });

package/legacy/DataGrid/DataGrid.js

@@ -310,7 +310,7 @@ DataGridRaw.propTypes = {
   loading: PropTypes.bool,
   /**
    * Set the locale text of the Data Grid.
-   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
+   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
    */
   localeText: PropTypes.object,
   /**

package/legacy/DataGrid/useDataGridComponent.js

@@ -57,7 +57,7 @@ export var useDataGridComponent = function useDataGridComponent(inputApiRef, pro
   useGridRowSelection(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
-  useGridParamsApi(apiRef, props);
+  useGridParamsApi(apiRef);
   useGridColumnSpanning(apiRef);
   useGridColumnGrouping(apiRef, props);
   useGridEditing(apiRef, props);

package/legacy/DataGrid/useDataGridProps.js

@@ -74,7 +74,9 @@ export var DATA_GRID_PROPS_DEFAULT_VALUES = {
 };
 var defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 export var useDataGridProps = function useDataGridProps(inProps) {
-  var themedProps = useProps(useThemeProps({
+  var themedProps = useProps(
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  useThemeProps({
     props: inProps,
     name: 'MuiDataGrid'
   }));

package/legacy/colDef/gridBooleanColDef.js

@@ -4,11 +4,9 @@ import { renderBooleanCell } from '../components/cell/GridBooleanCell';
 import { renderEditBooleanCell } from '../components/cell/GridEditBooleanCell';
 import { gridNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
 import { getGridBooleanOperators } from './gridBooleanOperators';
-function gridBooleanFormatter(_ref) {
-  var value = _ref.value,
-    api = _ref.api;
-  return value ? api.getLocaleText('booleanCellTrueLabel') : api.getLocaleText('booleanCellFalseLabel');
-}
+var gridBooleanFormatter = function gridBooleanFormatter(value, row, column, apiRef) {
+  return value ? apiRef.current.getLocaleText('booleanCellTrueLabel') : apiRef.current.getLocaleText('booleanCellFalseLabel');
+};
 var stringToBoolean = function stringToBoolean(value) {
   switch (value.toLowerCase().trim()) {
     case 'true':

package/legacy/colDef/gridCheckboxSelectionColDef.js

@@ -19,9 +19,10 @@ export var GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF,
   disableReorder: true,
   disableExport: true,
   getApplyQuickFilterFn: undefined,
-  valueGetter: function valueGetter(params) {
-    var selectionLookup = selectedIdsLookupSelector(params.api.state, params.api.instanceId);
-    return selectionLookup[params.id] !== undefined;
+  valueGetter: function valueGetter(value, row, column, apiRef) {
+    var selectionLookup = selectedIdsLookupSelector(apiRef);
+    var rowId = apiRef.current.getRowId(row);
+    return selectionLookup[rowId] !== undefined;
   },
   renderHeader: function renderHeader(params) {
     return /*#__PURE__*/_jsx(GridHeaderCheckbox, _extends({}, params));

package/legacy/colDef/gridDateColDef.js

@@ -12,36 +12,32 @@ function throwIfNotDateObject(_ref) {
     throw new Error(["MUI X: `".concat(columnType, "` column type only accepts `Date` objects as values."), 'Use `valueGetter` to transform the value into a `Date` object.', "Row ID: ".concat(rowId, ", field: \"").concat(field, "\".")].join('\n'));
   }
 }
-export function gridDateFormatter(_ref2) {
-  var value = _ref2.value,
-    field = _ref2.field,
-    id = _ref2.id;
+export var gridDateFormatter = function gridDateFormatter(value, row, column, apiRef) {
   if (!value) {
     return '';
   }
+  var rowId = apiRef.current.getRowId(row);
   throwIfNotDateObject({
     value: value,
     columnType: 'date',
-    rowId: id,
-    field: field
+    rowId: rowId,
+    field: column.field
   });
   return value.toLocaleDateString();
-}
-export function gridDateTimeFormatter(_ref3) {
-  var value = _ref3.value,
-    field = _ref3.field,
-    id = _ref3.id;
+};
+export var gridDateTimeFormatter = function gridDateTimeFormatter(value, row, column, apiRef) {
   if (!value) {
     return '';
   }
+  var rowId = apiRef.current.getRowId(row);
   throwIfNotDateObject({
     value: value,
     columnType: 'dateTime',
-    rowId: id,
-    field: field
+    rowId: rowId,
+    field: column.field
   });
   return value.toLocaleString();
-}
+};
 export var GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'date',
   sortComparator: gridDateComparator,

package/legacy/colDef/gridNumericColDef.js

@@ -11,8 +11,7 @@ export var GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueParser: function valueParser(value) {
     return value === '' ? null : Number(value);
   },
-  valueFormatter: function valueFormatter(_ref) {
-    var value = _ref.value;
+  valueFormatter: function valueFormatter(value) {
     return isNumber(value) ? value.toLocaleString() : value || '';
   },
   filterOperators: getGridNumericOperators(),

package/legacy/colDef/gridSingleSelectColDef.js

@@ -18,18 +18,15 @@ export var GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'singleSelect',
   getOptionLabel: defaultGetOptionLabel,
   getOptionValue: defaultGetOptionValue,
-  valueFormatter: function valueFormatter(params) {
-    var id = params.id,
-      field = params.field,
-      value = params.value,
-      api = params.api;
-    var colDef = params.api.getColumn(field);
+  valueFormatter: function valueFormatter(value, row, colDef, apiRef) {
+    // const { id, field, value, api } = params;
+    var rowId = apiRef.current.getRowId(row);
     if (!isSingleSelectColDef(colDef)) {
       return '';
     }
     var valueOptions = getValueOptions(colDef, {
-      id: id,
-      row: id ? api.getRow(id) : null
+      id: rowId,
+      row: row
     });
     if (value == null) {
       return '';
@@ -48,8 +45,8 @@ export var GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   renderEditCell: renderEditSingleSelectCell,
   filterOperators: getGridSingleSelectOperators(),
   // @ts-ignore
-  pastedValueParser: function pastedValueParser(value, params) {
-    var colDef = params.colDef;
+  pastedValueParser: function pastedValueParser(value, row, column) {
+    var colDef = column;
     var valueOptions = getValueOptions(colDef) || [];
     var getOptionValue = colDef.getOptionValue;
     var valueOption = valueOptions.find(function (option) {

package/legacy/components/GridPagination.js

@@ -21,6 +21,9 @@ var GridPaginationRoot = styled(TablePagination)(function (_ref) {
     display: 'inline-flex'
   }));
 });
+
+// A mutable version of a readonly array.
+
 export var GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
@@ -31,7 +34,8 @@ export var GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginatio
     return (_ref3 = (_rootProps$rowCount = rootProps.rowCount) != null ? _rootProps$rowCount : visibleTopLevelRowCount) != null ? _ref3 : 0;
   }, [rootProps.rowCount, visibleTopLevelRowCount]);
   var lastPage = React.useMemo(function () {
-    return Math.floor(rowCount / (paginationModel.pageSize || 1));
+    var calculatedValue = Math.ceil(rowCount / (paginationModel.pageSize || 1)) - 1;
+    return Math.max(0, calculatedValue);
   }, [rowCount, paginationModel.pageSize]);
   var handlePageSizeChange = React.useCallback(function (event) {
     var pageSize = Number(event.target.value);
@@ -68,7 +72,11 @@ export var GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginatio
     ref: ref,
     component: "div",
     count: rowCount,
-    page: paginationModel.page <= lastPage ? paginationModel.page : lastPage,
+    page: paginationModel.page <= lastPage ? paginationModel.page : lastPage
+    // TODO: Remove the cast once the type is fixed in Material UI and that the min Material UI version
+    // for x-data-grid is past the fix.
+    // Note that Material UI will not mutate the array, so this is safe.
+    ,
     rowsPerPageOptions: pageSizeOptions,
     rowsPerPage: paginationModel.pageSize,
     onPageChange: handlePageChange,

package/legacy/components/GridRow.js

@@ -37,9 +37,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     rowHeight = ownerState.rowHeight,
     classes = ownerState.classes;
   var slots = {
-    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight'],
-    pinnedLeft: ['pinnedLeft'],
-    pinnedRight: ['pinnedRight']
+    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
@@ -273,13 +271,14 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
         break;
     }
     if ((rowNode == null ? void 0 : rowNode.type) === 'skeletonRow') {
+      var _column$align;
       var _width = cellColSpanInfo.cellProps.width;
       var contentWidth = Math.round(randomNumber());
       return /*#__PURE__*/_jsx(slots.skeletonCell, {
         width: _width,
         contentWidth: contentWidth,
         field: column.field,
-        align: column.align
+        align: (_column$align = column.align) != null ? _column$align : 'left'
       }, column.field);
     }
     var _cellColSpanInfo$cell = cellColSpanInfo.cellProps,
@@ -366,7 +365,10 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     "aria-selected": selected,
     style: style
   }, eventHandlers, other, {
-    children: [leftCells, cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
+    children: [leftCells, /*#__PURE__*/_jsx("div", {
+      className: gridClasses.cellOffsetLeft,
+      role: "presentation"
+    }), cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
       width: emptyCellWidth
     }), rightCells.length > 0 && /*#__PURE__*/_jsx("div", {
       role: "presentation",

package/legacy/components/GridScrollbarFillerCell.js

@@ -10,7 +10,7 @@ var classes = {
   borderTop: getClassName('scrollbarFiller--borderTop'),
   pinnedRight: getClassName('scrollbarFiller--pinnedRight')
 };
-var Style = styled('div')(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+var Style = styled('div')(_defineProperty(_defineProperty(_defineProperty({
   minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
   alignSelf: 'stretch'
 }, "&.".concat(classes.borderTop), {
@@ -20,8 +20,6 @@ var Style = styled('div')(_defineProperty(_defineProperty(_defineProperty(_defin
 }), "&.".concat(classes.pinnedRight, ":not(.").concat(classes.header, ")"), {
   position: 'sticky',
   right: 0
-}), "&:not(.".concat(classes.header, "):not(.").concat(classes.pinnedRight, ")"), {
-  transform: 'translate3d(var(--DataGrid-offsetLeft), 0, 0)'
 }));
 function GridScrollbarFillerCell(_ref) {
   var header = _ref.header,

package/legacy/components/base/GridFooterPlaceholder.js

@@ -8,5 +8,5 @@ export function GridFooterPlaceholder() {
   if (rootProps.hideFooter) {
     return null;
   }
-  return /*#__PURE__*/_jsx(rootProps.slots.footer, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.footer));
+  return /*#__PURE__*/_jsx(rootProps.slots.footer, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.footer /* FIXME: typing error */));
 }

package/legacy/components/cell/GridActionsCell.js

@@ -169,7 +169,7 @@ function GridActionsCell(props) {
     if (event.key === 'Tab') {
       event.preventDefault();
     }
-    if (['Tab', 'Enter', 'Escape'].includes(event.key)) {
+    if (['Tab', 'Escape'].includes(event.key)) {
       hideMenu();
     }
   };
@@ -208,7 +208,6 @@ function GridActionsCell(props) {
       target: buttonRef.current,
       position: position,
       onClose: hideMenu,
-      onClick: hideMenu,
       children: /*#__PURE__*/_jsx(MenuList, {
         id: menuId,
         className: gridClasses.menuList,
@@ -218,7 +217,8 @@ function GridActionsCell(props) {
         autoFocusItem: true,
         children: menuButtons.map(function (button, index) {
           return /*#__PURE__*/React.cloneElement(button, {
-            key: index
+            key: index,
+            closeMenu: hideMenu
           });
         })
       })

package/legacy/components/cell/GridActionsCellItem.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["label", "icon", "showInMenu", "onClick"];
+var _excluded = ["label", "icon", "showInMenu", "onClick"],
+  _excluded2 = ["label", "icon", "showInMenu", "onClick", "closeMenuOnClick", "closeMenu"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
@@ -9,36 +10,48 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var GridActionsCellItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var label = props.label,
-    icon = props.icon,
-    showInMenu = props.showInMenu,
-    onClick = props.onClick,
-    other = _objectWithoutProperties(props, _excluded);
   var rootProps = useGridRootProps();
-  var handleClick = function handleClick(event) {
-    if (onClick) {
-      onClick(event);
-    }
-  };
-  if (!showInMenu) {
+  if (!props.showInMenu) {
     var _rootProps$slotProps;
+    var _label = props.label,
+      _icon = props.icon,
+      _showInMenu = props.showInMenu,
+      _onClick = props.onClick,
+      _other = _objectWithoutProperties(props, _excluded);
+    var _handleClick = function _handleClick(event) {
+      _onClick == null || _onClick(event);
+    };
     return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
       ref: ref,
       size: "small",
       role: "menuitem",
-      "aria-label": label
-    }, other, {
-      onClick: handleClick
+      "aria-label": _label
+    }, _other, {
+      onClick: _handleClick
     }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
-      children: /*#__PURE__*/React.cloneElement(icon, {
+      children: /*#__PURE__*/React.cloneElement(_icon, {
         fontSize: 'small'
       })
     }));
   }
+  var label = props.label,
+    icon = props.icon,
+    showInMenu = props.showInMenu,
+    onClick = props.onClick,
+    _props$closeMenuOnCli = props.closeMenuOnClick,
+    closeMenuOnClick = _props$closeMenuOnCli === void 0 ? true : _props$closeMenuOnCli,
+    closeMenu = props.closeMenu,
+    other = _objectWithoutProperties(props, _excluded2);
+  var handleClick = function handleClick(event) {
+    onClick == null || onClick(event);
+    if (closeMenuOnClick) {
+      closeMenu == null || closeMenu();
+    }
+  };
   return /*#__PURE__*/_jsxs(MenuItem, _extends({
     ref: ref
   }, other, {
-    onClick: onClick,
+    onClick: handleClick,
     children: [icon && /*#__PURE__*/_jsx(ListItemIcon, {
       children: icon
     }), label]

package/legacy/components/cell/GridEditInputCell.js

@@ -80,7 +80,7 @@ var GridEditInputCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
             column = apiRef.current.getColumn(field);
             parsedValue = newValue;
             if (column.valueParser) {
-              parsedValue = column.valueParser(newValue, apiRef.current.getCellParams(id, field));
+              parsedValue = column.valueParser(newValue, apiRef.current.getRow(id), column, apiRef);
             }
             setValueState(parsedValue);
             apiRef.current.setEditCellValue({

package/legacy/components/columnSelection/GridCellCheckboxRenderer.js

@@ -88,7 +88,7 @@ var GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCell
     },
     onKeyDown: handleKeyDown,
     disabled: !isSelectable,
-    touchRippleRef: rippleRef
+    touchRippleRef: rippleRef /* FIXME: typing error */
   }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseCheckbox, other));
 });
 process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {