@mui/x-data-grid 5.8.0 → 5.11.0

package/modern/components/GridRow.js

@@ -9,7 +9,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { GridEvents } from '../models/events';
 import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
@@ -20,6 +19,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";
 
@@ -59,6 +59,7 @@ function GridRow(props) {
   const {
     selected,
     rowId,
+    row,
     index,
     style: styleProp,
     rowHeight,
@@ -130,7 +131,12 @@ function GridRow(props) {
       } // User opened a detail panel
 
 
-      if (field === '__detail_panel_toggle__') {
+      if (field === GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+        return;
+      } // User reorders a row
+
+
+      if (field === '__reorder__') {
         return;
       } // User is editing a cell
 
@@ -147,7 +153,7 @@ function GridRow(props) {
       }
     }
 
-    publish(GridEvents.rowClick, onClick)(event);
+    publish('rowClick', onClick)(event);
   }, [apiRef, onClick, publish, rowId]);
 
   const style = _extends({}, styleProp, {
@@ -174,7 +180,8 @@ function GridRow(props) {
 
     const rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
       isFirstVisible: indexRelativeToCurrentPage === 0,
-      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1
+      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+      indexRelativeToCurrentPage
     });
 
     rowClassName = rootProps.getRowClassName(rowParams);
@@ -207,7 +214,16 @@ function GridRow(props) {
     }
 
     if (editCellState != null && column.renderEditCell) {
-      const params = _extends({}, cellParams, editCellState, {
+      let updatedRow = row;
+
+      if (apiRef.current.unstable_getRowWithUpdatedValues) {
+        // Only the new editing API has this method
+        updatedRow = apiRef.current.unstable_getRowWithUpdatedValues(rowId, column.field);
+      }
+
+      const params = _extends({}, cellParams, {
+        row: updatedRow
+      }, editCellState, {
         api: apiRef.current
       });
 
@@ -223,24 +239,33 @@ function GridRow(props) {
 
     const hasFocus = cellFocus !== null && cellFocus.id === rowId && cellFocus.field === column.field;
     const 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.componentsProps?.cell, {
-      children: content
-    }), column.field));
+    const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
+
+    if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
+      const {
+        colSpan,
+        width
+      } = cellColSpanInfo.cellProps;
+      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.componentsProps?.cell, {
+        children: content
+      }), column.field));
+    }
   }
 
   const emptyCellWidth = containerWidth - columnsTotalWidth;
@@ -253,9 +278,9 @@ function GridRow(props) {
     "aria-selected": selected,
     style: style,
     onClick: publishClick,
-    onDoubleClick: publish(GridEvents.rowDoubleClick, onDoubleClick),
-    onMouseEnter: publish(GridEvents.rowMouseEnter, onMouseEnter),
-    onMouseLeave: publish(GridEvents.rowMouseLeave, onMouseLeave)
+    onDoubleClick: publish('rowDoubleClick', onDoubleClick),
+    onMouseEnter: publish('rowMouseEnter', onMouseEnter),
+    onMouseLeave: publish('rowMouseLeave', onMouseLeave)
   }, other, {
     children: [cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
       width: emptyCellWidth,
@@ -274,6 +299,11 @@ 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,

package/modern/components/GridRowCount.js

@@ -65,6 +65,7 @@ process.env.NODE_ENV !== "production" ? GridRowCount.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   rowCount: PropTypes.number.isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   visibleRowCount: PropTypes.number.isRequired
 } : void 0;
 export { GridRowCount };

package/modern/components/GridScrollArea.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { GridEvents } from '../models/events';
 import { useGridApiEventHandler } from '../hooks/utils/useGridApiEventHandler';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
@@ -100,9 +99,9 @@ function GridScrollAreaRaw(props) {
   const toggleDragging = React.useCallback(() => {
     setDragging(prevDragging => !prevDragging);
   }, []);
-  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, handleScrolling);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, toggleDragging);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnd, toggleDragging);
+  useGridApiEventHandler(apiRef, 'rowsScroll', handleScrolling);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', toggleDragging);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', toggleDragging);
   return dragging ? /*#__PURE__*/_jsx(GridScrollAreaRawRoot, {
     ref: rootRef,
     className: clsx(classes.root),

package/modern/components/GridSelectedRowCount.js

@@ -66,6 +66,7 @@ process.env.NODE_ENV !== "production" ? GridSelectedRowCount.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  selectedRowCount: PropTypes.number.isRequired
+  selectedRowCount: PropTypes.number.isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { GridSelectedRowCount };

package/modern/components/base/GridBody.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GridEvents } from '../../models/events';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridMainContainer } from '../containers/GridMainContainer';
 import { GridAutoSizer } from '../GridAutoSizer';
@@ -46,7 +45,7 @@ function GridBody(props) {
   apiRef.current.renderingZoneRef = renderingZoneRef; // TODO remove, nobody should have access to internal parts of the virtualization
 
   const handleResize = React.useCallback(size => {
-    apiRef.current.publishEvent(GridEvents.resize, size);
+    apiRef.current.publishEvent('resize', size);
   }, [apiRef]);
   return /*#__PURE__*/_jsxs(GridMainContainer, {
     children: [/*#__PURE__*/_jsx(GridOverlays, {}), /*#__PURE__*/_jsx(ColumnHeadersComponent, {

package/modern/components/base/GridOverlays.js

@@ -3,11 +3,10 @@ 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';
-import { GridEvents } from '../../models/events';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 function GridOverlayWrapper(props) {
@@ -19,7 +18,7 @@ function GridOverlayWrapper(props) {
     setViewportInnerSize(apiRef.current.getRootDimensions()?.viewportInnerSize ?? null);
   }, [apiRef]);
   useEnhancedEffect(() => {
-    return apiRef.current.subscribeEvent(GridEvents.viewportInnerSizeChange, handleViewportSizeChange);
+    return apiRef.current.subscribeEvent('viewportInnerSizeChange', handleViewportSizeChange);
   }, [apiRef, handleViewportSizeChange]);
   let height = viewportInnerSize?.height ?? 0;
 
@@ -47,8 +46,9 @@ export function GridOverlays() {
   const rootProps = useGridRootProps();
   const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   const visibleRowCount = useGridSelector(apiRef, gridVisibleRowCountSelector);
-  const showNoRowsOverlay = !rootProps.loading && totalRowCount === 0;
-  const showNoResultsOverlay = !rootProps.loading && totalRowCount > 0 && visibleRowCount === 0;
+  const loading = useGridSelector(apiRef, gridRowsLoadingSelector);
+  const showNoRowsOverlay = !loading && totalRowCount === 0;
+  const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
   let overlay = null;
 
   if (showNoRowsOverlay) {

package/modern/components/cell/GridActionsCell.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _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';
@@ -7,26 +9,33 @@ 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";
 
 const hasActions = colDef => typeof colDef.getActions === 'function';
 
 const GridActionsCell = props => {
+  const {
+    colDef,
+    id,
+    hasFocus,
+    tabIndex,
+    position = 'bottom-end',
+    focusElementRef
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const [focusedButtonIndex, setFocusedButtonIndex] = React.useState(-1);
   const [open, setOpen] = React.useState(false);
+  const apiRef = useGridApiContext();
+  const rootRef = React.useRef(null);
   const buttonRef = React.useRef(null);
+  const ignoreCallToFocus = React.useRef(false);
   const touchRippleRefs = React.useRef({});
   const menuId = useId();
   const buttonId = useId();
   const rootProps = useGridRootProps();
-  const {
-    colDef,
-    id,
-    api,
-    hasFocus,
-    position = 'bottom-end'
-  } = props; // TODO apply the rest to the root element
-
   React.useLayoutEffect(() => {
     if (!hasFocus) {
       Object.entries(touchRippleRefs.current).forEach(([index, ref]) => {
@@ -36,56 +45,153 @@ const GridActionsCell = props => {
       });
     }
   }, [hasFocus]);
+  React.useEffect(() => {
+    if (focusedButtonIndex < 0 || !rootRef.current) {
+      return;
+    }
+
+    if (focusedButtonIndex >= rootRef.current.children.length) {
+      return;
+    }
+
+    const child = rootRef.current.children[focusedButtonIndex];
+    child.focus();
+  }, [focusedButtonIndex]);
+  React.useEffect(() => {
+    if (!hasFocus) {
+      setFocusedButtonIndex(-1);
+      ignoreCallToFocus.current = false;
+    }
+  }, [hasFocus]);
+  React.useImperativeHandle(focusElementRef, () => ({
+    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`.');
   }
 
-  const showMenu = () => setOpen(true);
-
-  const hideMenu = () => setOpen(false);
-
-  const options = colDef.getActions(api.getRowParams(id));
+  const options = colDef.getActions(apiRef.current.getRowParams(id));
   const iconButtons = options.filter(option => !option.props.showInMenu);
   const menuButtons = options.filter(option => option.props.showInMenu);
+  const numberOfButtons = iconButtons.length + (menuButtons.length ? 1 : 0);
+  React.useEffect(() => {
+    if (focusedButtonIndex >= numberOfButtons) {
+      setFocusedButtonIndex(numberOfButtons - 1);
+    }
+  }, [focusedButtonIndex, numberOfButtons]);
+
+  const showMenu = () => {
+    setOpen(true);
+    setFocusedButtonIndex(numberOfButtons - 1);
+    ignoreCallToFocus.current = true;
+  };
+
+  const hideMenu = () => {
+    setOpen(false);
+  };
 
   const handleTouchRippleRef = index => instance => {
     touchRippleRefs.current[index] = instance;
   };
 
-  return /*#__PURE__*/_jsxs("div", {
+  const handleButtonClick = (index, onClick) => event => {
+    setFocusedButtonIndex(index);
+    ignoreCallToFocus.current = true;
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  const handleRootKeyDown = event => {
+    if (numberOfButtons <= 1) {
+      return;
+    }
+
+    let 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);
+    }
+  };
+
+  const 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((button, index) => /*#__PURE__*/React.cloneElement(button, {
       key: index,
-      touchRippleRef: handleTouchRippleRef(index)
-    })), menuButtons.length > 0 && /*#__PURE__*/_jsx(IconButton, {
+      touchRippleRef: handleTouchRippleRef(index),
+      onClick: handleButtonClick(index, button.props.onClick),
+      tabIndex: focusedButtonIndex === index ? tabIndex : -1
+    })), 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((button, index) => /*#__PURE__*/React.cloneElement(button, {
           key: index
         }))
       })
     })]
-  });
+  }));
 };
 
 process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
@@ -100,11 +206,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.
    */
@@ -114,7 +251,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 const renderActionsCell = params => /*#__PURE__*/_jsx(GridActionsCell, _extends({}, params));

package/modern/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";
-
-const GridActionsCellItem = props => {
+const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     label,
     icon,
@@ -26,7 +25,9 @@ const GridActionsCellItem = props => {
 
   if (!showInMenu) {
     return /*#__PURE__*/_jsx(IconButton, _extends({
+      ref: ref,
       size: "small",
+      role: "menuitem",
       "aria-label": label
     }, other, {
       onClick: handleClick,
@@ -36,14 +37,15 @@ const 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 |

package/modern/components/cell/GridCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["align", "children", "colIndex", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onKeyDown", "onDragEnter", "onDragOver"];
+const _excluded = ["align", "children", "colIndex", "colDef", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onKeyDown", "onDragEnter", "onDragOver"];
 
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import * as React from 'react';
@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { ownerDocument, capitalize } from '@mui/material/utils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { GridEvents, GridCellModes } from '../../models';
+import { GridCellModes } from '../../models';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridFocusCellSelector } from '../../hooks/features/focus/gridFocusStateSelector';
@@ -64,6 +64,7 @@ function GridCell(props) {
     width,
     className,
     showRightBorder,
+    colSpan,
     onClick,
     onDoubleClick,
     onMouseDown,
@@ -76,6 +77,7 @@ function GridCell(props) {
 
   const valueToRender = formattedValue == null ? value : formattedValue;
   const cellRef = React.useRef(null);
+  const focusElementRef = React.useRef(null);
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const ownerState = {
@@ -126,7 +128,7 @@ function GridCell(props) {
 
     if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
       const focusableElement = cellRef.current.querySelector('[tabindex="0"]');
-      const elementToFocus = focusableElement || cellRef.current;
+      const elementToFocus = focusElementRef.current || focusableElement || cellRef.current;
 
       if (doesSupportPreventScroll()) {
         elementToFocus.focus({
@@ -160,6 +162,26 @@ function GridCell(props) {
     };
   }
 
+  const column = apiRef.current.getColumn(field);
+  const managesOwnFocus = column.type === 'actions';
+
+  const renderChildren = () => {
+    if (children == null) {
+      return /*#__PURE__*/_jsx("div", {
+        className: classes.content,
+        children: valueToRender?.toString()
+      });
+    }
+
+    if ( /*#__PURE__*/React.isValidElement(children) && managesOwnFocus) {
+      return /*#__PURE__*/React.cloneElement(children, {
+        focusElementRef
+      });
+    }
+
+    return children;
+  };
+
   return /*#__PURE__*/_jsx("div", _extends({
     ref: cellRef,
     className: clsx(className, classes.root),
@@ -167,21 +189,19 @@ function GridCell(props) {
     "data-field": field,
     "data-colindex": colIndex,
     "aria-colindex": colIndex + 1,
+    "aria-colspan": colSpan,
     style: style,
-    tabIndex: cellMode === 'view' || !isEditable ? tabIndex : -1,
-    onClick: publish(GridEvents.cellClick, onClick),
-    onDoubleClick: publish(GridEvents.cellDoubleClick, onDoubleClick),
-    onMouseDown: publish(GridEvents.cellMouseDown, onMouseDown),
-    onMouseUp: publishMouseUp(GridEvents.cellMouseUp),
-    onKeyDown: publish(GridEvents.cellKeyDown, onKeyDown),
-    onDragEnter: publish(GridEvents.cellDragEnter, onDragEnter),
-    onDragOver: publish(GridEvents.cellDragOver, onDragOver)
+    tabIndex: (cellMode === 'view' || !isEditable) && !managesOwnFocus ? tabIndex : -1,
+    onClick: publish('cellClick', onClick),
+    onDoubleClick: publish('cellDoubleClick', onDoubleClick),
+    onMouseDown: publish('cellMouseDown', onMouseDown),
+    onMouseUp: publishMouseUp('cellMouseUp'),
+    onKeyDown: publish('cellKeyDown', onKeyDown),
+    onDragEnter: publish('cellDragEnter', onDragEnter),
+    onDragOver: publish('cellDragOver', onDragOver)
   }, other, {
     onFocus: handleFocus,
-    children: children != null ? children : /*#__PURE__*/_jsx("div", {
-      className: classes.content,
-      children: valueToRender?.toString()
-    })
+    children: renderChildren()
   }));
 }
 
@@ -195,6 +215,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   colIndex: PropTypes.number.isRequired,
+  colSpan: PropTypes.number,
   field: PropTypes.string.isRequired,
   formattedValue: PropTypes.any,
   hasFocus: PropTypes.bool,