@mui/x-data-grid 5.6.1 → 5.9.0

package/legacy/{models/colDef → colDef}/gridDefaultColumnTypes.js

@@ -1,10 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { GRID_STRING_COL_DEF } from '../../colDef/gridStringColDef';
-import { GRID_NUMERIC_COL_DEF } from '../../colDef/gridNumericColDef';
-import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from '../../colDef/gridDateColDef';
-import { GRID_BOOLEAN_COL_DEF } from '../../colDef/gridBooleanColDef';
-import { GRID_SINGLE_SELECT_COL_DEF } from '../../colDef/gridSingleSelectColDef';
-import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from '../../colDef/gridActionsColDef';
+import { GRID_STRING_COL_DEF } from './gridStringColDef';
+import { GRID_NUMERIC_COL_DEF } from './gridNumericColDef';
+import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from './gridDateColDef';
+import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
+import { GRID_SINGLE_SELECT_COL_DEF } from './gridSingleSelectColDef';
+import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from './gridActionsColDef';
 export var DEFAULT_GRID_COL_TYPE_KEY = '__default__';
 export var getGridDefaultColumnTypes = function getGridDefaultColumnTypes() {
   var _nativeColumnTypes;

package/legacy/colDef/index.js

@@ -9,4 +9,5 @@ export * from './gridBooleanOperators';
 export * from './gridDateOperators';
 export * from './gridNumericOperators';
 export * from './gridSingleSelectOperators';
-export * from './gridStringOperators';
+export * from './gridStringOperators';
+export * from './gridDefaultColumnTypes';

package/legacy/components/ErrorOverlay.js

@@ -4,6 +4,8 @@ var _excluded = ["message", "hasError", "errorInfo"];
 import * as React from 'react';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { GridOverlay } from './containers/GridOverlay';
+import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { gridDensityRowHeightSelector } from '../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 // TODO v6: rename to GridErrorOverlay
 export var ErrorOverlay = /*#__PURE__*/React.forwardRef(function ErrorOverlay(props, ref) {
@@ -14,8 +16,13 @@ export var ErrorOverlay = /*#__PURE__*/React.forwardRef(function ErrorOverlay(pr
 
   var apiRef = useGridApiContext();
   var defaultLabel = apiRef.current.getLocaleText('errorOverlayDefaultLabel');
+  var rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
   return /*#__PURE__*/_jsx(GridOverlay, _extends({
-    ref: ref
+    ref: ref,
+    sx: {
+      width: '100%',
+      minHeight: 2 * rowHeight
+    }
   }, other, {
     children: message || defaultLabel
   }));

package/legacy/components/GridLoadingOverlay.js

@@ -1,12 +1,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import CircularProgress from '@mui/material/CircularProgress';
 import { GridOverlay } from './containers/GridOverlay';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
+var GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
   return /*#__PURE__*/_jsx(GridOverlay, _extends({
     ref: ref
   }, props, {
     children: /*#__PURE__*/_jsx(CircularProgress, {})
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? GridLoadingOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridLoadingOverlay };

package/legacy/components/GridNoRowsOverlay.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { GridOverlay } from './containers/GridOverlay';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRowsOverlay(props, ref) {
+var GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRowsOverlay(props, ref) {
   var apiRef = useGridApiContext();
   var noRowsLabel = apiRef.current.getLocaleText('noRowsLabel');
   return /*#__PURE__*/_jsx(GridOverlay, _extends({
@@ -11,4 +12,12 @@ export var GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRows
   }, props, {
     children: noRowsLabel
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? GridNoRowsOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridNoRowsOverlay };

package/legacy/components/GridRow.js

@@ -20,6 +20,7 @@ import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 import { findParentElementFromClassName } from '../utils/domUtils';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
 import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -134,7 +135,7 @@ function GridRow(props) {
       } // User opened a detail panel
 
 
-      if (field === '__detail_panel_toggle__') {
+      if (field === GRID_DETAIL_PANEL_TOGGLE_FIELD) {
         return;
       } // User is editing a cell
 
@@ -179,7 +180,8 @@ function GridRow(props) {
 
     var rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
       isFirstVisible: indexRelativeToCurrentPage === 0,
-      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1
+      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+      indexRelativeToCurrentPage: indexRelativeToCurrentPage
     });
 
     rowClassName = rootProps.getRowClassName(rowParams);
@@ -188,8 +190,6 @@ function GridRow(props) {
   var cells = [];
 
   for (var i = 0; i < renderedColumns.length; i += 1) {
-    var _rootProps$components;
-
     var column = renderedColumns[i];
     var indexRelativeToAllColumns = firstColumnToRender + i;
     var isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1;
@@ -218,7 +218,16 @@ function GridRow(props) {
     if (editCellState != null && column.renderEditCell) {
       var _rootProps$classes2;
 
-      var params = _extends({}, cellParams, editCellState, {
+      var updatedRow = row;
+
+      if (apiRef.current.unstable_getRowWithUpdatedValues) {
+        // Only the new editing API has this method
+        updatedRow = apiRef.current.unstable_getRowWithUpdatedValues(rowId, column.field);
+      }
+
+      var params = _extends({}, cellParams, {
+        row: updatedRow
+      }, editCellState, {
         api: apiRef.current
       });
 
@@ -234,24 +243,34 @@ function GridRow(props) {
 
     var hasFocus = cellFocus !== null && cellFocus.id === rowId && cellFocus.field === column.field;
     var tabIndex = cellTabIndex !== null && cellTabIndex.id === rowId && cellTabIndex.field === column.field && cellParams.cellMode === 'view' ? 0 : -1;
-    cells.push( /*#__PURE__*/_jsx(rootProps.components.Cell, _extends({
-      value: cellParams.value,
-      field: column.field,
-      width: column.computedWidth,
-      rowId: rowId,
-      height: rowHeight,
-      showRightBorder: showRightBorder,
-      formattedValue: cellParams.formattedValue,
-      align: column.align || 'left',
-      cellMode: cellParams.cellMode,
-      colIndex: indexRelativeToAllColumns,
-      isEditable: cellParams.isEditable,
-      hasFocus: hasFocus,
-      tabIndex: tabIndex,
-      className: clsx(classNames)
-    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
-      children: content
-    }), column.field));
+    var cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
+
+    if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
+      var _rootProps$components;
+
+      var _cellColSpanInfo$cell = cellColSpanInfo.cellProps,
+          colSpan = _cellColSpanInfo$cell.colSpan,
+          width = _cellColSpanInfo$cell.width;
+      cells.push( /*#__PURE__*/_jsx(rootProps.components.Cell, _extends({
+        value: cellParams.value,
+        field: column.field,
+        width: width,
+        rowId: rowId,
+        height: rowHeight,
+        showRightBorder: showRightBorder,
+        formattedValue: cellParams.formattedValue,
+        align: column.align || 'left',
+        cellMode: cellParams.cellMode,
+        colIndex: indexRelativeToAllColumns,
+        isEditable: cellParams.isEditable,
+        hasFocus: hasFocus,
+        tabIndex: tabIndex,
+        className: clsx(classNames),
+        colSpan: colSpan
+      }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
+        children: content
+      }), column.field));
+    }
   }
 
   var emptyCellWidth = containerWidth - columnsTotalWidth;
@@ -285,11 +304,16 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   containerWidth: PropTypes.number.isRequired,
   editRowsState: PropTypes.object.isRequired,
   firstColumnToRender: PropTypes.number.isRequired,
+
+  /**
+   * Index of the row in the whole sorted and filtered dataset.
+   * If some rows above have expanded children, this index also take those children into account.
+   */
   index: PropTypes.number.isRequired,
   isLastVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
   renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
   rowHeight: PropTypes.number.isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   selected: PropTypes.bool.isRequired,

package/legacy/components/base/GridErrorHandler.js

@@ -1,21 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridLogger } from '../../hooks/utils/useGridLogger';
 import { GridMainContainer } from '../containers/GridMainContainer';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { GridAutoSizer } from '../GridAutoSizer';
-import { GridEvents } from '../../models/events/gridEvents';
 import { jsx as _jsx } from "react/jsx-runtime";
-var ErrorOverlayWrapper = styled('div')({
-  position: 'absolute',
-  top: 0,
-  width: '100%',
-  height: '100%'
-});
 
 function GridErrorHandler(props) {
   var children = props.children;
@@ -23,28 +14,16 @@ function GridErrorHandler(props) {
   var logger = useGridLogger(apiRef, 'GridErrorHandler');
   var rootProps = useGridRootProps();
   var error = apiRef.current.state.error;
-  var handleResize = React.useCallback(function (size) {
-    apiRef.current.publishEvent(GridEvents.resize, size);
-  }, [apiRef]);
   return /*#__PURE__*/_jsx(ErrorBoundary, {
     hasError: error != null,
     componentProps: error,
     api: apiRef,
     logger: logger,
     render: function render(errorProps) {
-      return /*#__PURE__*/_jsx(GridMainContainer, {
-        children: /*#__PURE__*/_jsx(GridAutoSizer, {
-          nonce: rootProps.nonce,
-          disableHeight: rootProps.autoHeight,
-          onResize: handleResize,
-          children: function children() {
-            var _rootProps$components;
+      var _rootProps$components;
 
-            return /*#__PURE__*/_jsx(ErrorOverlayWrapper, {
-              children: /*#__PURE__*/_jsx(rootProps.components.ErrorOverlay, _extends({}, errorProps, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.errorOverlay))
-            });
-          }
-        })
+      return /*#__PURE__*/_jsx(GridMainContainer, {
+        children: /*#__PURE__*/_jsx(rootProps.components.ErrorOverlay, _extends({}, errorProps, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.errorOverlay))
       });
     },
     children: children

package/legacy/components/base/GridOverlays.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridVisibleRowCountSelector } from '../../hooks/features/filter/gridFilterSelector';
-import { gridRowCountSelector } from '../../hooks/features/rows/gridRowsSelector';
+import { gridRowCountSelector, gridRowsLoadingSelector } from '../../hooks/features/rows/gridRowsSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
@@ -61,8 +61,9 @@ export function GridOverlays() {
   var rootProps = useGridRootProps();
   var totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   var visibleRowCount = useGridSelector(apiRef, gridVisibleRowCountSelector);
-  var showNoRowsOverlay = !rootProps.loading && totalRowCount === 0;
-  var showNoResultsOverlay = !rootProps.loading && totalRowCount > 0 && visibleRowCount === 0;
+  var loading = useGridSelector(apiRef, gridRowsLoadingSelector);
+  var showNoRowsOverlay = !loading && totalRowCount === 0;
+  var showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
   var overlay = null;
 
   if (showNoRowsOverlay) {

package/legacy/components/cell/GridActionsCell.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["colDef", "id", "api", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "getValue", "tabIndex", "position", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import IconButton from '@mui/material/IconButton';
@@ -8,6 +10,7 @@ import { unstable_useId as useId } from '@mui/material/utils';
 import { gridClasses } from '../../constants/gridClasses';
 import { GridMenu } from '../menu/GridMenu';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -16,23 +19,42 @@ var hasActions = function hasActions(colDef) {
 };
 
 var GridActionsCell = function GridActionsCell(props) {
-  var _React$useState = React.useState(false),
+  var colDef = props.colDef,
+      id = props.id,
+      api = props.api,
+      hasFocus = props.hasFocus,
+      isEditable = props.isEditable,
+      field = props.field,
+      value = props.value,
+      formattedValue = props.formattedValue,
+      row = props.row,
+      rowNode = props.rowNode,
+      cellMode = props.cellMode,
+      getValue = props.getValue,
+      tabIndex = props.tabIndex,
+      _props$position = props.position,
+      position = _props$position === void 0 ? 'bottom-end' : _props$position,
+      focusElementRef = props.focusElementRef,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var _React$useState = React.useState(-1),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      open = _React$useState2[0],
-      setOpen = _React$useState2[1];
+      focusedButtonIndex = _React$useState2[0],
+      setFocusedButtonIndex = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      open = _React$useState4[0],
+      setOpen = _React$useState4[1];
 
+  var apiRef = useGridApiContext();
+  var rootRef = React.useRef(null);
   var buttonRef = React.useRef(null);
+  var ignoreCallToFocus = React.useRef(false);
   var touchRippleRefs = React.useRef({});
   var menuId = useId();
   var buttonId = useId();
   var rootProps = useGridRootProps();
-  var colDef = props.colDef,
-      id = props.id,
-      api = props.api,
-      hasFocus = props.hasFocus,
-      _props$position = props.position,
-      position = _props$position === void 0 ? 'bottom-end' : _props$position; // TODO apply the rest to the root element
-
   React.useLayoutEffect(function () {
     if (!hasFocus) {
       Object.entries(touchRippleRefs.current).forEach(function (_ref) {
@@ -46,26 +68,53 @@ var GridActionsCell = function GridActionsCell(props) {
       });
     }
   }, [hasFocus]);
+  React.useEffect(function () {
+    if (focusedButtonIndex >= 0) {
+      var _rootRef$current;
+
+      var child = (_rootRef$current = rootRef.current) == null ? void 0 : _rootRef$current.children[focusedButtonIndex];
+      child.focus();
+    }
+  }, [focusedButtonIndex]);
+  React.useEffect(function () {
+    if (!hasFocus) {
+      setFocusedButtonIndex(-1);
+      ignoreCallToFocus.current = false;
+    }
+  }, [hasFocus]);
+  React.useImperativeHandle(focusElementRef, function () {
+    return {
+      focus: function focus() {
+        // If ignoreCallToFocus is true, then one of the buttons was clicked and the focus is already set
+        if (!ignoreCallToFocus.current) {
+          setFocusedButtonIndex(0);
+        }
+      }
+    };
+  }, []);
 
   if (!hasActions(colDef)) {
     throw new Error('MUI: Missing the `getActions` property in the `GridColDef`.');
   }
 
-  var showMenu = function showMenu() {
-    return setOpen(true);
-  };
-
-  var hideMenu = function hideMenu() {
-    return setOpen(false);
-  };
-
-  var options = colDef.getActions(api.getRowParams(id));
+  var options = colDef.getActions(apiRef.current.getRowParams(id));
   var iconButtons = options.filter(function (option) {
     return !option.props.showInMenu;
   });
   var menuButtons = options.filter(function (option) {
     return option.props.showInMenu;
   });
+  var numberOfButtons = iconButtons.length + (menuButtons.length ? 1 : 0);
+
+  var showMenu = function showMenu() {
+    setOpen(true);
+    setFocusedButtonIndex(numberOfButtons - 1);
+    ignoreCallToFocus.current = true;
+  };
+
+  var hideMenu = function hideMenu() {
+    setOpen(false);
+  };
 
   var handleTouchRippleRef = function handleTouchRippleRef(index) {
     return function (instance) {
@@ -73,35 +122,95 @@ var GridActionsCell = function GridActionsCell(props) {
     };
   };
 
-  return /*#__PURE__*/_jsxs("div", {
+  var handleButtonClick = function handleButtonClick(index, onClick) {
+    return function (event) {
+      setFocusedButtonIndex(index);
+      ignoreCallToFocus.current = true;
+
+      if (onClick) {
+        onClick(event);
+      }
+    };
+  };
+
+  var handleRootKeyDown = function handleRootKeyDown(event) {
+    if (numberOfButtons <= 1) {
+      return;
+    }
+
+    var newIndex = focusedButtonIndex;
+
+    if (event.key === 'ArrowRight') {
+      newIndex += 1;
+    } else if (event.key === 'ArrowLeft') {
+      newIndex -= 1;
+    }
+
+    if (newIndex < 0 || newIndex >= numberOfButtons) {
+      return; // We're already in the first or last item = do nothing and let the grid listen the event
+    }
+
+    if (newIndex !== focusedButtonIndex) {
+      event.preventDefault(); // Prevent scrolling
+
+      event.stopPropagation(); // Don't stop propagation for other keys, e.g. ArrowUp
+
+      setFocusedButtonIndex(newIndex);
+    }
+  };
+
+  var handleListKeyDown = function handleListKeyDown(event) {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+    }
+
+    if (['Tab', 'Enter', 'Escape'].includes(event.key)) {
+      hideMenu();
+    }
+  };
+
+  return /*#__PURE__*/_jsxs("div", _extends({
+    role: "menu",
+    ref: rootRef,
+    tabIndex: -1,
     className: gridClasses.actionsCell,
+    onKeyDown: handleRootKeyDown
+  }, other, {
     children: [iconButtons.map(function (button, index) {
       return /*#__PURE__*/React.cloneElement(button, {
         key: index,
-        touchRippleRef: handleTouchRippleRef(index)
+        touchRippleRef: handleTouchRippleRef(index),
+        onClick: handleButtonClick(index, button.props.onClick),
+        tabIndex: focusedButtonIndex === index ? tabIndex : -1
       });
-    }), menuButtons.length > 0 && /*#__PURE__*/_jsx(IconButton, {
+    }), menuButtons.length > 0 && buttonId && /*#__PURE__*/_jsx(IconButton, {
       ref: buttonRef,
       id: buttonId,
-      "aria-label": api.getLocaleText('actionsCellMore'),
+      "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
       "aria-controls": menuId,
       "aria-expanded": open ? 'true' : undefined,
       "aria-haspopup": "true",
+      role: "menuitem",
       size: "small",
       onClick: showMenu,
+      touchRippleRef: handleTouchRippleRef(buttonId),
+      tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1,
       children: /*#__PURE__*/_jsx(rootProps.components.MoreActionsIcon, {
         fontSize: "small"
       })
     }), menuButtons.length > 0 && /*#__PURE__*/_jsx(GridMenu, {
-      id: menuId,
       onClickAway: hideMenu,
       onClick: hideMenu,
       open: open,
       target: buttonRef.current,
       position: position,
-      "aria-labelledby": buttonId,
       children: /*#__PURE__*/_jsx(MenuList, {
+        id: menuId,
         className: gridClasses.menuList,
+        onKeyDown: handleListKeyDown,
+        "aria-labelledby": buttonId,
+        variant: "menu",
+        autoFocusItem: true,
         children: menuButtons.map(function (button, index) {
           return /*#__PURE__*/React.cloneElement(button, {
             key: index
@@ -109,7 +218,7 @@ var GridActionsCell = function GridActionsCell(props) {
         })
       })
     })]
-  });
+  }));
 };
 
 process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
@@ -124,11 +233,42 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
    */
   api: PropTypes.any.isRequired,
 
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+
   /**
    * The column of the row that the current cell belongs to.
    */
   colDef: PropTypes.object.isRequired,
 
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focus: PropTypes.func.isRequired
+    })
+  })]),
+  formattedValue: PropTypes.any,
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {any} The cell value.
+   * @deprecated Use `params.row` to directly access the fields you want instead.
+   */
+  getValue: PropTypes.func.isRequired,
+
   /**
    * If true, the cell is the active element.
    */
@@ -138,7 +278,28 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
    * The grid row id.
    */
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  position: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top'])
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  position: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.object.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  value: PropTypes.any
 } : void 0;
 export { GridActionsCell };
 export var renderActionsCell = function renderActionsCell(params) {

package/legacy/components/cell/GridActionsCellItem.js

@@ -8,8 +8,7 @@ import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
-var GridActionsCellItem = function GridActionsCellItem(props) {
+var GridActionsCellItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var label = props.label,
       icon = props.icon,
       showInMenu = props.showInMenu,
@@ -24,7 +23,9 @@ var GridActionsCellItem = function GridActionsCellItem(props) {
 
   if (!showInMenu) {
     return /*#__PURE__*/_jsx(IconButton, _extends({
+      ref: ref,
       size: "small",
+      role: "menuitem",
       "aria-label": label
     }, other, {
       onClick: handleClick,
@@ -34,14 +35,15 @@ var GridActionsCellItem = function GridActionsCellItem(props) {
     }));
   }
 
-  return /*#__PURE__*/_jsxs(MenuItem, _extends({}, other, {
+  return /*#__PURE__*/_jsxs(MenuItem, _extends({
+    ref: ref
+  }, other, {
     onClick: onClick,
     children: [icon && /*#__PURE__*/_jsx(ListItemIcon, {
       children: icon
     }), label]
   }));
-};
-
+});
 process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |