@mui/x-data-grid 9.13.0 → 9.15.0

package/components/GridScrollArea.js

@@ -27,6 +27,7 @@ var _useTimeout = require("../hooks/utils/useTimeout");
 var _gridColumnsUtils = require("../hooks/features/columns/gridColumnsUtils");
 var _createSelector = require("../utils/createSelector");
 var _gridRowsMetaSelector = require("../hooks/features/rows/gridRowsMetaSelector");
+var _gridRowReorderSelector = require("../hooks/features/rowReorder/gridRowReorderSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const CLIFF = 1;
 const SLOP = 1.5;
@@ -89,15 +90,27 @@ const offsetSelector = (0, _createSelector.createSelector)(_gridDimensionsSelect
   // For vertical scroll areas, we don't need horizontal offset
   return 0;
 });
+
+// The `columnReorder` state is only initialized by the Pro package,
+// so it is read defensively here.
+const gridColumnReorderDragColSelector = (0, _createSelector.createRootSelector)(state => state.columnReorder?.dragCol);
+
+// The drag direction is derived from the reorder state instead of the drag events.
+// An event handler subscribed during render can fire for a render pass that never mounts.
+// A `setState` call from such a handler triggers a React warning.
+// See https://github.com/mui/mui-x/issues/23469.
+const gridDragDirectionSelector = (0, _createSelector.createSelector)(gridColumnReorderDragColSelector, _gridRowReorderSelector.gridIsRowDragActiveSelector, (dragCol, isRowDragActive) => {
+  if (dragCol) {
+    return 'horizontal';
+  }
+  if (isRowDragActive) {
+    return 'vertical';
+  }
+  return 'none';
+});
 function GridScrollAreaWrapper(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const [dragDirection, setDragDirection] = React.useState('none');
-
-  // Listen for both column and row drag events
-  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragStart', () => setDragDirection('horizontal'));
-  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragEnd', () => setDragDirection('none'));
-  (0, _useGridEvent.useGridEvent)(apiRef, 'rowDragStart', () => setDragDirection('vertical'));
-  (0, _useGridEvent.useGridEvent)(apiRef, 'rowDragEnd', () => setDragDirection('none'));
+  const dragDirection = (0, _useGridSelector.useGridSelector)(apiRef, gridDragDirectionSelector);
   if (dragDirection === 'none') {
     return null;
   }

package/components/GridScrollArea.mjs

@@ -2,7 +2,7 @@
 
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import composeClasses from '@mui/utils/composeClasses';
@@ -18,8 +18,9 @@ import { gridDimensionsSelector, gridColumnsTotalWidthSelector } from "../hooks/
 import { gridDensityFactorSelector } from "../hooks/features/density/densitySelector.mjs";
 import { useTimeout } from "../hooks/utils/useTimeout.mjs";
 import { getTotalHeaderHeight } from "../hooks/features/columns/gridColumnsUtils.mjs";
-import { createSelector } from "../utils/createSelector.mjs";
+import { createRootSelector, createSelector } from "../utils/createSelector.mjs";
 import { gridRowsMetaSelector } from "../hooks/features/rows/gridRowsMetaSelector.mjs";
+import { gridIsRowDragActiveSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CLIFF = 1;
 const SLOP = 1.5;
@@ -82,15 +83,27 @@ const offsetSelector = createSelector(gridDimensionsSelector, (dimensions, direc
   // For vertical scroll areas, we don't need horizontal offset
   return 0;
 });
+
+// The `columnReorder` state is only initialized by the Pro package,
+// so it is read defensively here.
+const gridColumnReorderDragColSelector = createRootSelector(state => state.columnReorder?.dragCol);
+
+// The drag direction is derived from the reorder state instead of the drag events.
+// An event handler subscribed during render can fire for a render pass that never mounts.
+// A `setState` call from such a handler triggers a React warning.
+// See https://github.com/mui/mui-x/issues/23469.
+const gridDragDirectionSelector = createSelector(gridColumnReorderDragColSelector, gridIsRowDragActiveSelector, (dragCol, isRowDragActive) => {
+  if (dragCol) {
+    return 'horizontal';
+  }
+  if (isRowDragActive) {
+    return 'vertical';
+  }
+  return 'none';
+});
 function GridScrollAreaWrapper(props) {
   const apiRef = useGridApiContext();
-  const [dragDirection, setDragDirection] = React.useState('none');
-
-  // Listen for both column and row drag events
-  useGridEvent(apiRef, 'columnHeaderDragStart', () => setDragDirection('horizontal'));
-  useGridEvent(apiRef, 'columnHeaderDragEnd', () => setDragDirection('none'));
-  useGridEvent(apiRef, 'rowDragStart', () => setDragDirection('vertical'));
-  useGridEvent(apiRef, 'rowDragEnd', () => setDragDirection('none'));
+  const dragDirection = useGridSelector(apiRef, gridDragDirectionSelector);
   if (dragDirection === 'none') {
     return null;
   }

package/components/GridSelectedRowCount.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 const _excluded = ["className", "selectedRowCount"];
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/components/GridShadowScrollArea.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 const _excluded = ["children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/components/GridSkeletonLoadingOverlay.mjs

@@ -1,8 +1,8 @@
 'use client';
 
 import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 const _excluded = ["skeletonRowsCount", "visibleColumns", "showFirstRowBorder"];
 import * as React from 'react';
 import clsx from 'clsx';

package/components/base/GridFooterPlaceholder.mjs

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _extends from "@babel/runtime/helpers/extends";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridFooterPlaceholder() {

package/components/base/GridOverlays.js

@@ -21,19 +21,21 @@ var _jsxRuntime = require("react/jsx-runtime");
 const GridOverlayWrapperRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapper',
-  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right'
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant'
 })(({
   overlayType,
-  loadingOverlayVariant,
-  right
+  loadingOverlayVariant
 }) =>
 // Skeleton overlay should flow with the scroll container and not be sticky
 loadingOverlayVariant !== 'skeleton' ? {
   position: 'sticky',
   // To stay in place while scrolling
   top: 'var(--DataGrid-topContainerHeight)',
+  // Both 0-insets keep the overlay in the viewport in LTR and RTL alike. Sticky insets
+  // are independent constraints, and a width: 0 box satisfies both at once, so it
+  // clamps at whichever edge the scroll pushes it past.
   left: 0,
-  right: `${right}px`,
+  right: 0,
   width: 0,
   // To stay above the content instead of shifting it down
   height: 0,
@@ -70,7 +72,6 @@ function GridOverlayWrapper(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapperRoot, (0, _extends2.default)({
     className: classes.root
   }, props, {
-    right: dimensions.columnsTotalWidth - dimensions.viewportOuterSize.width,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapperInner, (0, _extends2.default)({
       className: classes.inner,
       style: {

package/components/base/GridOverlays.mjs

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
@@ -13,19 +13,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const GridOverlayWrapperRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapper',
-  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right'
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant'
 })(({
   overlayType,
-  loadingOverlayVariant,
-  right
+  loadingOverlayVariant
 }) =>
 // Skeleton overlay should flow with the scroll container and not be sticky
 loadingOverlayVariant !== 'skeleton' ? {
   position: 'sticky',
   // To stay in place while scrolling
   top: 'var(--DataGrid-topContainerHeight)',
+  // Both 0-insets keep the overlay in the viewport in LTR and RTL alike. Sticky insets
+  // are independent constraints, and a width: 0 box satisfies both at once, so it
+  // clamps at whichever edge the scroll pushes it past.
   left: 0,
-  right: `${right}px`,
+  right: 0,
   width: 0,
   // To stay above the content instead of shifting it down
   height: 0,
@@ -62,7 +64,6 @@ export function GridOverlayWrapper(props) {
   return /*#__PURE__*/_jsx(GridOverlayWrapperRoot, _extends({
     className: classes.root
   }, props, {
-    right: dimensions.columnsTotalWidth - dimensions.viewportOuterSize.width,
     children: /*#__PURE__*/_jsx(GridOverlayWrapperInner, _extends({
       className: classes.inner,
       style: {

package/components/cell/GridActionsCell.js

@@ -20,6 +20,7 @@ var _gridClasses = require("../../constants/gridClasses");
 var _GridMenu = require("../menu/GridMenu");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _domUtils = require("../../utils/domUtils");
 var _GridActionsCellItem = require("./GridActionsCellItem");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "onMenuOpen", "onMenuClose", "children", "suppressChildrenValidation"];
@@ -62,8 +63,8 @@ function GridActionsCell(props) {
         actions.push(child);
       } else if (process.env.NODE_ENV !== 'production') {
         const childType = typeof child.type === 'function' ? child.type.name : child.type;
-        (0, _warning.warnOnce)(`MUI X: Invalid child type in \`GridActionsCell\`. Expected \`GridActionsCellItem\` or \`React.Fragment\`, got \`${childType}\`.
-If this is intentional, you can suppress this warning by passing the \`suppressChildrenValidation\` prop to \`GridActionsCell\`.`, 'error');
+        (0, _warning.errorOnce)(`MUI X: Invalid child type in \`GridActionsCell\`. Expected \`GridActionsCellItem\` or \`React.Fragment\`, got \`${childType}\`.
+If this is intentional, you can suppress this warning by passing the \`suppressChildrenValidation\` prop to \`GridActionsCell\`.`);
       }
     }
   });
@@ -140,7 +141,9 @@ If this is intentional, you can suppress this warning by passing the \`suppressC
     }
   };
   const handleRootKeyDown = event => {
-    if (numberOfButtons <= 1) {
+    // The menu renders in a portal, but its key events still bubble through the React tree.
+    // They must not move the roving focus between the buttons behind the open menu.
+    if (numberOfButtons <= 1 || (0, _domUtils.isEventTargetInPortal)(event)) {
       return;
     }
     const getNewIndex = (index, direction) => {
@@ -170,55 +173,55 @@ If this is intentional, you can suppress this warning by passing the \`suppressC
       setFocusedButtonIndex(newIndex);
     }
   };
-
-  // role="menu" requires at least one child element
-  const attributes = numberOfButtons > 0 ? {
-    role: 'menu',
-    onKeyDown: handleRootKeyDown
-  } : undefined;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
-    ref: rootRef,
-    tabIndex: -1,
-    className: _gridClasses.gridClasses.actionsCell
-  }, attributes, other, {
-    children: [iconButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
-      key: index,
-      touchRippleRef: handleTouchRippleRef(index),
-      onClick: handleButtonClick(index, button.props.onClick),
-      tabIndex: focusedButtonIndex === index ? tabIndex : -1
-    })), menuButtons.length > 0 && buttonId && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
-      ref: buttonRef,
-      id: buttonId,
-      "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
-      "aria-haspopup": "menu",
-      "aria-expanded": open,
-      "aria-controls": open ? menuId : undefined,
-      role: "menuitem",
-      size: "small",
-      onClick: toggleMenu,
-      touchRippleRef: handleTouchRippleRef(buttonId),
-      tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
-    }, rootProps.slotProps?.baseIconButton, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.moreActionsIcon, {
-        fontSize: "small"
-      })
-    })), menuButtons.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
-      open: open,
-      target: buttonRef.current,
-      position: position,
-      onClose: hideMenu,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, {
-        id: menuId,
-        className: _gridClasses.gridClasses.menuList,
-        "aria-labelledby": buttonId,
-        autoFocusItem: true,
-        children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
-          key: index,
-          closeMenu: hideMenu
-        }))
-      })
-    })]
-  }));
+  return (
+    /*#__PURE__*/
+    // The wrapper carries no role on purpose: the buttons are plain buttons inside the
+    // `gridcell`. It only relays the key events bubbling from them.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
+      ref: rootRef,
+      tabIndex: -1,
+      className: _gridClasses.gridClasses.actionsCell,
+      onKeyDown: handleRootKeyDown
+    }, other, {
+      children: [iconButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
+        key: index,
+        touchRippleRef: handleTouchRippleRef(index),
+        onClick: handleButtonClick(index, button.props.onClick),
+        tabIndex: focusedButtonIndex === index ? tabIndex : -1
+      })), menuButtons.length > 0 && buttonId && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+        ref: buttonRef,
+        id: buttonId,
+        "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : undefined,
+        size: "small",
+        onClick: toggleMenu,
+        touchRippleRef: handleTouchRippleRef(buttonId),
+        tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
+      }, rootProps.slotProps?.baseIconButton, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.moreActionsIcon, {
+          fontSize: "small"
+        })
+      })), menuButtons.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
+        open: open,
+        target: buttonRef.current,
+        position: position,
+        onClose: hideMenu,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, {
+          id: menuId,
+          className: _gridClasses.gridClasses.menuList,
+          "aria-labelledby": buttonId,
+          autoFocusItem: true,
+          children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
+            key: index,
+            closeMenu: hideMenu
+          }))
+        })
+      })]
+    }))
+  );
 }
 process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/components/cell/GridActionsCell.mjs

@@ -1,18 +1,19 @@
 'use client';
 
 import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "onMenuOpen", "onMenuClose", "children", "suppressChildrenValidation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useRtl } from '@mui/system/RtlProvider';
 import useId from '@mui/utils/useId';
-import { warnOnce } from '@mui/x-internals/warning';
+import { errorOnce } from '@mui/x-internals/warning';
 import { gridClasses } from "../../constants/gridClasses.mjs";
 import { GridMenu } from "../menu/GridMenu.mjs";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.mjs";
+import { isEventTargetInPortal } from "../../utils/domUtils.mjs";
 import { GridActionsCellItem } from "./GridActionsCellItem.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const hasActions = colDef => typeof colDef.getActions === 'function';
@@ -54,8 +55,8 @@ function GridActionsCell(props) {
         actions.push(child);
       } else if (process.env.NODE_ENV !== 'production') {
         const childType = typeof child.type === 'function' ? child.type.name : child.type;
-        warnOnce(`MUI X: Invalid child type in \`GridActionsCell\`. Expected \`GridActionsCellItem\` or \`React.Fragment\`, got \`${childType}\`.
-If this is intentional, you can suppress this warning by passing the \`suppressChildrenValidation\` prop to \`GridActionsCell\`.`, 'error');
+        errorOnce(`MUI X: Invalid child type in \`GridActionsCell\`. Expected \`GridActionsCellItem\` or \`React.Fragment\`, got \`${childType}\`.
+If this is intentional, you can suppress this warning by passing the \`suppressChildrenValidation\` prop to \`GridActionsCell\`.`);
       }
     }
   });
@@ -132,7 +133,9 @@ If this is intentional, you can suppress this warning by passing the \`suppressC
     }
   };
   const handleRootKeyDown = event => {
-    if (numberOfButtons <= 1) {
+    // The menu renders in a portal, but its key events still bubble through the React tree.
+    // They must not move the roving focus between the buttons behind the open menu.
+    if (numberOfButtons <= 1 || isEventTargetInPortal(event)) {
       return;
     }
     const getNewIndex = (index, direction) => {
@@ -162,55 +165,55 @@ If this is intentional, you can suppress this warning by passing the \`suppressC
       setFocusedButtonIndex(newIndex);
     }
   };
-
-  // role="menu" requires at least one child element
-  const attributes = numberOfButtons > 0 ? {
-    role: 'menu',
-    onKeyDown: handleRootKeyDown
-  } : undefined;
-  return /*#__PURE__*/_jsxs("div", _extends({
-    ref: rootRef,
-    tabIndex: -1,
-    className: gridClasses.actionsCell
-  }, attributes, other, {
-    children: [iconButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
-      key: index,
-      touchRippleRef: handleTouchRippleRef(index),
-      onClick: handleButtonClick(index, button.props.onClick),
-      tabIndex: focusedButtonIndex === index ? tabIndex : -1
-    })), menuButtons.length > 0 && buttonId && /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-      ref: buttonRef,
-      id: buttonId,
-      "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
-      "aria-haspopup": "menu",
-      "aria-expanded": open,
-      "aria-controls": open ? menuId : undefined,
-      role: "menuitem",
-      size: "small",
-      onClick: toggleMenu,
-      touchRippleRef: handleTouchRippleRef(buttonId),
-      tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
-    }, rootProps.slotProps?.baseIconButton, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.moreActionsIcon, {
-        fontSize: "small"
-      })
-    })), menuButtons.length > 0 && /*#__PURE__*/_jsx(GridMenu, {
-      open: open,
-      target: buttonRef.current,
-      position: position,
-      onClose: hideMenu,
-      children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, {
-        id: menuId,
-        className: gridClasses.menuList,
-        "aria-labelledby": buttonId,
-        autoFocusItem: true,
-        children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
-          key: index,
-          closeMenu: hideMenu
-        }))
-      })
-    })]
-  }));
+  return (
+    /*#__PURE__*/
+    // The wrapper carries no role on purpose: the buttons are plain buttons inside the
+    // `gridcell`. It only relays the key events bubbling from them.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsxs("div", _extends({
+      ref: rootRef,
+      tabIndex: -1,
+      className: gridClasses.actionsCell,
+      onKeyDown: handleRootKeyDown
+    }, other, {
+      children: [iconButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
+        key: index,
+        touchRippleRef: handleTouchRippleRef(index),
+        onClick: handleButtonClick(index, button.props.onClick),
+        tabIndex: focusedButtonIndex === index ? tabIndex : -1
+      })), menuButtons.length > 0 && buttonId && /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+        ref: buttonRef,
+        id: buttonId,
+        "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : undefined,
+        size: "small",
+        onClick: toggleMenu,
+        touchRippleRef: handleTouchRippleRef(buttonId),
+        tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
+      }, rootProps.slotProps?.baseIconButton, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.moreActionsIcon, {
+          fontSize: "small"
+        })
+      })), menuButtons.length > 0 && /*#__PURE__*/_jsx(GridMenu, {
+        open: open,
+        target: buttonRef.current,
+        position: position,
+        onClose: hideMenu,
+        children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, {
+          id: menuId,
+          className: gridClasses.menuList,
+          "aria-labelledby": buttonId,
+          autoFocusItem: true,
+          children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
+            key: index,
+            closeMenu: hideMenu
+          }))
+        })
+      })]
+    }))
+  );
 }
 process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/components/cell/GridActionsCellItem.d.mts

@@ -2,14 +2,18 @@ import * as React from 'react';
 import type { GridSlotProps, GridBaseIconProps } from "../../models/gridSlotsComponentsProps.mjs";
 interface GridActionsCellItemCommonProps {
   icon?: React.JSXElementConstructor<GridBaseIconProps> | React.ReactNode;
-  /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
+  /**
+   * The component used for the root node.
+   * If not set, and `href` is set, the item renders as an anchor tag.
+   * from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component
+   */
   component?: React.ElementType;
 }
-export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
+export type GridActionsCellItemProps = GridActionsCellItemCommonProps & ({
   showInMenu?: false;
   icon: React.ReactElement<any>;
   label: string;
-} & Omit<GridSlotProps['baseIconButton'], 'component'>) | ({
+} & Omit<GridSlotProps['baseIconButton'], 'component'> | {
   showInMenu: true;
   /**
    * If false, the menu will not close when this item is clicked.
@@ -18,7 +22,7 @@ export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
   closeMenuOnClick?: boolean;
   closeMenu?: () => void;
   label: React.ReactNode;
-} & Omit<GridSlotProps['baseMenuItem'], 'component'>));
+} & Omit<GridSlotProps['baseMenuItem'], 'component'>);
 declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCellItemProps> | React.ForwardRefExoticComponent<(Omit<GridActionsCellItemCommonProps & {
   showInMenu?: false;
   icon: React.ReactElement<any>;
@@ -27,7 +31,12 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCe
   label?: string;
   color?: 'default' | 'inherit' | 'primary';
   edge?: 'start' | 'end' | false;
-} & import("@mui/x-data-grid").BaseIconButtonPropsOverrides, "component">, "ref"> | (GridActionsCellItemCommonProps & {
+} & {
+  component?: React.ElementType;
+  href?: string;
+  target?: React.HTMLAttributeAnchorTarget;
+  rel?: string;
+} & import("@mui/x-data-grid").BaseIconButtonPropsOverrides, "component">, "ref"> | GridActionsCellItemCommonProps & {
   showInMenu: true;
   /**
    * If false, the menu will not close when this item is clicked.
@@ -51,5 +60,10 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCe
   selected?: boolean;
   value?: number | string | readonly string[];
   style?: React.CSSProperties;
-} & import("@mui/x-data-grid").BaseMenuItemPropsOverrides, "component">)) & React.RefAttributes<HTMLElement>>;
+} & {
+  component?: React.ElementType;
+  href?: string;
+  target?: React.HTMLAttributeAnchorTarget;
+  rel?: string;
+} & import("@mui/x-data-grid").BaseMenuItemPropsOverrides, "component">) & React.RefAttributes<HTMLElement>>;
 export { GridActionsCellItem };

package/components/cell/GridActionsCellItem.d.ts

@@ -2,14 +2,18 @@ import * as React from 'react';
 import type { GridSlotProps, GridBaseIconProps } from "../../models/gridSlotsComponentsProps.js";
 interface GridActionsCellItemCommonProps {
   icon?: React.JSXElementConstructor<GridBaseIconProps> | React.ReactNode;
-  /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
+  /**
+   * The component used for the root node.
+   * If not set, and `href` is set, the item renders as an anchor tag.
+   * from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component
+   */
   component?: React.ElementType;
 }
-export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
+export type GridActionsCellItemProps = GridActionsCellItemCommonProps & ({
   showInMenu?: false;
   icon: React.ReactElement<any>;
   label: string;
-} & Omit<GridSlotProps['baseIconButton'], 'component'>) | ({
+} & Omit<GridSlotProps['baseIconButton'], 'component'> | {
   showInMenu: true;
   /**
    * If false, the menu will not close when this item is clicked.
@@ -18,7 +22,7 @@ export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
   closeMenuOnClick?: boolean;
   closeMenu?: () => void;
   label: React.ReactNode;
-} & Omit<GridSlotProps['baseMenuItem'], 'component'>));
+} & Omit<GridSlotProps['baseMenuItem'], 'component'>);
 declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCellItemProps> | React.ForwardRefExoticComponent<(Omit<GridActionsCellItemCommonProps & {
   showInMenu?: false;
   icon: React.ReactElement<any>;
@@ -27,7 +31,12 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCe
   label?: string;
   color?: 'default' | 'inherit' | 'primary';
   edge?: 'start' | 'end' | false;
-} & import("@mui/x-data-grid").BaseIconButtonPropsOverrides, "component">, "ref"> | (GridActionsCellItemCommonProps & {
+} & {
+  component?: React.ElementType;
+  href?: string;
+  target?: React.HTMLAttributeAnchorTarget;
+  rel?: string;
+} & import("@mui/x-data-grid").BaseIconButtonPropsOverrides, "component">, "ref"> | GridActionsCellItemCommonProps & {
   showInMenu: true;
   /**
    * If false, the menu will not close when this item is clicked.
@@ -51,5 +60,10 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCe
   selected?: boolean;
   value?: number | string | readonly string[];
   style?: React.CSSProperties;
-} & import("@mui/x-data-grid").BaseMenuItemPropsOverrides, "component">)) & React.RefAttributes<HTMLElement>>;
+} & {
+  component?: React.ElementType;
+  href?: string;
+  target?: React.HTMLAttributeAnchorTarget;
+  rel?: string;
+} & import("@mui/x-data-grid").BaseMenuItemPropsOverrides, "component">) & React.RefAttributes<HTMLElement>>;
 export { GridActionsCellItem };