@mui/x-data-grid 9.0.0-alpha.1 → 9.0.0-alpha.2

package/components/GridSkeletonLoadingOverlay.mjs

@@ -0,0 +1,196 @@
+'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";
+const _excluded = ["skeletonRowsCount", "visibleColumns", "showFirstRowBorder"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import useForkRef from '@mui/utils/useForkRef';
+import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.mjs";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.mjs";
+import { gridColumnPositionsSelector, gridDimensionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, useGridEvent, useGridSelector } from "../hooks/index.mjs";
+import { PinnedColumnPosition } from "../internals/constants.mjs";
+import { gridColumnsTotalWidthSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.mjs";
+import { getDataGridUtilityClass, gridClasses } from "../constants/gridClasses.mjs";
+import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.mjs";
+import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../utils/cellBorderUtils.mjs";
+import { escapeOperandAttributeSelector } from "../utils/domUtils.mjs";
+import { rtlFlipSide } from "../utils/rtlFlipSide.mjs";
+import { attachPinnedStyle } from "../internals/utils/index.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SkeletonOverlay = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'SkeletonLoadingOverlay'
+})({
+  minWidth: '100%',
+  width: 'max-content',
+  // prevents overflow: clip; cutting off the x axis
+  height: '100%',
+  overflow: 'clip' // y axis is hidden while the x axis is allowed to overflow
+});
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['skeletonLoadingOverlay']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const getColIndex = el => parseInt(el.getAttribute('data-colindex'), 10);
+export const GridSkeletonLoadingOverlayInner = forwardRef(function GridSkeletonLoadingOverlayInner(props, forwardedRef) {
+  const rootProps = useGridRootProps();
+  const {
+    slots
+  } = rootProps;
+  const isRtl = useRtl();
+  const classes = useUtilityClasses({
+    classes: rootProps.classes
+  });
+  const ref = React.useRef(null);
+  const handleRef = useForkRef(ref, forwardedRef);
+  const apiRef = useGridApiContext();
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const totalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  const positions = useGridSelector(apiRef, gridColumnPositionsSelector);
+  const inViewportCount = React.useMemo(() => positions.filter(value => value <= totalWidth).length, [totalWidth, positions]);
+  const {
+      skeletonRowsCount,
+      visibleColumns,
+      showFirstRowBorder
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const allVisibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const columns = React.useMemo(() => allVisibleColumns.slice(0, inViewportCount), [allVisibleColumns, inViewportCount]);
+  const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
+  const getPinnedPosition = React.useCallback(field => {
+    if (pinnedColumns.left.findIndex(col => col.field === field) !== -1) {
+      return PinnedColumnPosition.LEFT;
+    }
+    if (pinnedColumns.right.findIndex(col => col.field === field) !== -1) {
+      return PinnedColumnPosition.RIGHT;
+    }
+    return undefined;
+  }, [pinnedColumns.left, pinnedColumns.right]);
+  const children = React.useMemo(() => {
+    const array = [];
+    for (let i = 0; i < skeletonRowsCount; i += 1) {
+      const rowCells = [];
+      for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
+        const column = columns[colIndex];
+        const pinnedPosition = getPinnedPosition(column.field);
+        const isPinnedLeft = pinnedPosition === PinnedColumnPosition.LEFT;
+        const isPinnedRight = pinnedPosition === PinnedColumnPosition.RIGHT;
+        const pinnedSide = rtlFlipSide(pinnedPosition, isRtl);
+        const sectionLength = pinnedSide ? pinnedColumns[pinnedSide].length // pinned section
+        : columns.length - pinnedColumns.left.length - pinnedColumns.right.length; // middle section
+        const sectionIndex = pinnedSide ? pinnedColumns[pinnedSide].findIndex(col => col.field === column.field) // pinned section
+        : colIndex - pinnedColumns.left.length; // middle section
+        const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+        const pinnedStyle = attachPinnedStyle({}, isRtl, pinnedPosition, getPinnedCellOffset(pinnedPosition, column.computedWidth, colIndex, positions, dimensions.columnsTotalWidth, scrollbarWidth));
+        const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
+        const showRightBorder = shouldCellShowRightBorder(pinnedPosition, sectionIndex, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller, rootProps.pinnedColumnsSectionSeparator);
+        const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, sectionIndex, rootProps.showCellVerticalBorder, rootProps.pinnedColumnsSectionSeparator);
+        const isLastColumn = colIndex === columns.length - 1;
+        const isFirstPinnedRight = isPinnedRight && sectionIndex === 0;
+        const hasFillerBefore = isFirstPinnedRight && gridHasFiller;
+        const hasFillerAfter = isLastColumn && !isFirstPinnedRight && gridHasFiller;
+        const expandedWidth = dimensions.viewportOuterSize.width - dimensions.columnsTotalWidth;
+        const emptyCellWidth = Math.max(0, expandedWidth);
+        const emptyCell = /*#__PURE__*/_jsx(slots.skeletonCell, {
+          width: emptyCellWidth,
+          empty: true
+        }, `skeleton-filler-column-${i}`);
+        if (hasFillerBefore) {
+          rowCells.push(emptyCell);
+        }
+        rowCells.push(/*#__PURE__*/_jsx(slots.skeletonCell, {
+          field: column.field,
+          type: column.type,
+          align: column.align,
+          width: "var(--width)",
+          height: dimensions.rowHeight,
+          "data-colindex": colIndex,
+          empty: visibleColumns && !visibleColumns.has(column.field),
+          className: clsx(isPinnedLeft && gridClasses['cell--pinnedLeft'], isPinnedRight && gridClasses['cell--pinnedRight'], showRightBorder && gridClasses['cell--withRightBorder'], showLeftBorder && gridClasses['cell--withLeftBorder']),
+          style: _extends({
+            '--width': `${column.computedWidth}px`
+          }, pinnedStyle)
+        }, `skeleton-column-${i}-${column.field}`));
+        if (hasFillerAfter) {
+          rowCells.push(emptyCell);
+        }
+      }
+      array.push(/*#__PURE__*/_jsx("div", {
+        className: clsx(gridClasses.row, gridClasses.rowSkeleton, i === 0 && !showFirstRowBorder && gridClasses['row--firstVisible']),
+        children: rowCells
+      }, `skeleton-row-${i}`));
+    }
+    return array;
+  }, [skeletonRowsCount, columns, getPinnedPosition, isRtl, pinnedColumns, dimensions.hasScrollY, dimensions.scrollbarSize, dimensions.columnsTotalWidth, dimensions.viewportOuterSize.width, dimensions.rowHeight, positions, rootProps.showCellVerticalBorder, rootProps.pinnedColumnsSectionSeparator, slots, visibleColumns, showFirstRowBorder]);
+
+  // Sync the column resize of the overlay columns with the grid
+  const handleColumnResize = params => {
+    const {
+      colDef,
+      width
+    } = params;
+    const cells = ref.current?.querySelectorAll(`[data-field="${escapeOperandAttributeSelector(colDef.field)}"]`);
+    if (!cells) {
+      throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X: Expected skeleton cells to be defined with `data-field` attribute.' : _formatErrorMessage(56));
+    }
+    const resizedColIndex = columns.findIndex(col => col.field === colDef.field);
+    const pinnedPosition = getPinnedPosition(colDef.field);
+    const isPinnedLeft = pinnedPosition === PinnedColumnPosition.LEFT;
+    const isPinnedRight = pinnedPosition === PinnedColumnPosition.RIGHT;
+    const currentWidth = getComputedStyle(cells[0]).getPropertyValue('--width');
+    const delta = parseInt(currentWidth, 10) - width;
+    if (cells) {
+      cells.forEach(element => {
+        element.style.setProperty('--width', `${width}px`);
+      });
+    }
+    if (isPinnedLeft) {
+      const pinnedCells = ref.current?.querySelectorAll(`.${gridClasses['cell--pinnedLeft']}`);
+      pinnedCells?.forEach(element => {
+        const colIndex = getColIndex(element);
+        if (colIndex > resizedColIndex) {
+          element.style.left = `${parseInt(getComputedStyle(element).left, 10) - delta}px`;
+        }
+      });
+    }
+    if (isPinnedRight) {
+      const pinnedCells = ref.current?.querySelectorAll(`.${gridClasses['cell--pinnedRight']}`);
+      pinnedCells?.forEach(element => {
+        const colIndex = getColIndex(element);
+        if (colIndex < resizedColIndex) {
+          element.style.right = `${parseInt(getComputedStyle(element).right, 10) + delta}px`;
+        }
+      });
+    }
+  };
+  useGridEvent(apiRef, 'columnResize', handleColumnResize);
+  return /*#__PURE__*/_jsx(SkeletonOverlay, _extends({
+    className: classes.root
+  }, other, {
+    ref: handleRef,
+    children: children
+  }));
+});
+if (process.env.NODE_ENV !== "production") GridSkeletonLoadingOverlayInner.displayName = "GridSkeletonLoadingOverlayInner";
+export const GridSkeletonLoadingOverlay = forwardRef(function GridSkeletonLoadingOverlay(props, forwardedRef) {
+  const apiRef = useGridApiContext();
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const viewportHeight = dimensions?.viewportInnerSize.height ?? 0;
+  const skeletonRowsCount = Math.ceil(viewportHeight / dimensions.rowHeight);
+  return /*#__PURE__*/_jsx(GridSkeletonLoadingOverlayInner, _extends({}, props, {
+    skeletonRowsCount: skeletonRowsCount,
+    ref: forwardedRef
+  }));
+});
+if (process.env.NODE_ENV !== "production") GridSkeletonLoadingOverlay.displayName = "GridSkeletonLoadingOverlay";

package/components/base/GridBody.d.mts

@@ -0,0 +1,2 @@
+import { GridVirtualScroller } from "../virtualization/GridVirtualScroller.mjs";
+export { GridVirtualScroller as GridBody };

package/components/base/GridBody.mjs

@@ -0,0 +1,2 @@
+import { GridVirtualScroller } from "../virtualization/GridVirtualScroller.mjs";
+export { GridVirtualScroller as GridBody };

package/components/base/GridFooterPlaceholder.mjs

@@ -0,0 +1,10 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function GridFooterPlaceholder() {
+  const rootProps = useGridRootProps();
+  if (rootProps.hideFooter) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(rootProps.slots.footer, _extends({}, rootProps.slotProps?.footer /* FIXME: typing error */));
+}

package/components/base/GridOverlays.d.mts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { GridOverlayType, GridLoadingOverlayVariant } from "../../hooks/features/overlays/gridOverlaysInterfaces.mjs";
+interface GridOverlaysProps {
+  overlayType: GridOverlayType;
+  loadingOverlayVariant: GridLoadingOverlayVariant | null;
+}
+export declare function GridOverlayWrapper(props: React.PropsWithChildren<GridOverlaysProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace GridOverlayWrapper {
+  var propTypes: any;
+}
+export {};

package/components/base/GridOverlays.mjs

@@ -0,0 +1,83 @@
+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 composeClasses from '@mui/utils/composeClasses';
+import { minimalContentHeight } from "../../hooks/features/rows/gridRowsUtils.mjs";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.mjs";
+import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.mjs";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.mjs";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridOverlayWrapperRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'OverlayWrapper',
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right'
+})(({
+  overlayType,
+  loadingOverlayVariant,
+  right
+}) =>
+// 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-headersTotalHeight)',
+  // TODO: take pinned rows into account
+  left: 0,
+  right: `${right}px`,
+  width: 0,
+  // To stay above the content instead of shifting it down
+  height: 0,
+  // To stay above the content instead of shifting it down
+  zIndex: overlayType === 'loadingOverlay' ? 5 // Should be above pinned columns, pinned rows, and detail panel
+  : 4 // Should be above pinned columns and detail panel
+} : {});
+const GridOverlayWrapperInner = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'OverlayWrapperInner',
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant'
+})({});
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['overlayWrapper'],
+    inner: ['overlayWrapperInner']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+export function GridOverlayWrapper(props) {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  let height = Math.max(dimensions.viewportOuterSize.height - dimensions.topContainerHeight - dimensions.bottomContainerHeight - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0), 0);
+  if (height === 0) {
+    height = minimalContentHeight;
+  }
+  const classes = useUtilityClasses(_extends({}, props, {
+    classes: rootProps.classes
+  }));
+  return /*#__PURE__*/_jsx(GridOverlayWrapperRoot, _extends({
+    className: classes.root
+  }, props, {
+    right: dimensions.columnsTotalWidth - dimensions.viewportOuterSize.width,
+    children: /*#__PURE__*/_jsx(GridOverlayWrapperInner, _extends({
+      className: classes.inner,
+      style: {
+        height,
+        width: dimensions.viewportOuterSize.width
+      }
+    }, props))
+  }));
+}
+process.env.NODE_ENV !== "production" ? GridOverlayWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  loadingOverlayVariant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
+  overlayType: PropTypes.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay', 'noColumnsOverlay', 'emptyPivotOverlay'])
+} : void 0;

package/components/base/index.d.mts

@@ -0,0 +1,2 @@
+export * from "./GridBody.mjs";
+export * from "./GridFooterPlaceholder.mjs";

package/components/base/index.mjs

@@ -0,0 +1,2 @@
+export * from "./GridBody.mjs";
+export * from "./GridFooterPlaceholder.mjs";

package/components/cell/GridActionsCell.d.mts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import type { GridRowParams } from "../../models/params/gridRowParams.mjs";
+import type { GridRenderCellParams } from "../../models/params/gridCellParams.mjs";
+import { type GridMenuProps } from "../menu/GridMenu.mjs";
+import type { GridValidRowModel, GridTreeNodeWithRender } from "../../models/gridRows.mjs";
+interface GridActionsCellProps<R extends GridValidRowModel = any, V = any, F = V, N extends GridTreeNodeWithRender = GridTreeNodeWithRender> extends Omit<GridRenderCellParams<R, V, F, N>, 'api'> {
+  api?: GridRenderCellParams['api'];
+  position?: GridMenuProps['position'];
+  children: React.ReactNode;
+  /**
+   * If true, the children passed to the component will not be validated.
+   * If false, only `GridActionsCellItem` and `React.Fragment` are allowed as children.
+   * Only use this prop if you know what you are doing.
+   * @default false
+   */
+  suppressChildrenValidation?: boolean;
+  /**
+   * Callback to fire before the menu gets opened.
+   * Use this callback to prevent the menu from opening.
+   *
+   * @param {GridRowParams<R>} params Row parameters.
+   * @param {React.MouseEvent<HTMLElement>} event The event triggering this callback.
+   * @returns {boolean} if the menu should be opened.
+   */
+  onMenuOpen?: (params: GridRowParams<R>, event: React.MouseEvent<HTMLElement>) => boolean;
+  /**
+   * Callback to fire before the menu gets closed.
+   * Use this callback to prevent the menu from closing.
+   *
+   * @param {GridRowParams<R>} params Row parameters.
+   * @param {React.MouseEvent<HTMLElement> | React.KeyboardEvent | MouseEvent | TouchEvent | undefined} event The event triggering this callback.
+   * @returns {boolean} if the menu should be closed.
+   */
+  onMenuClose?: (params: GridRowParams<R>, event: React.MouseEvent<HTMLElement> | React.KeyboardEvent | MouseEvent | TouchEvent | undefined) => boolean;
+}
+declare function GridActionsCell<R extends GridValidRowModel = any, V = any, F = V, N extends GridTreeNodeWithRender = GridTreeNodeWithRender>(props: GridActionsCellProps<R, V, F, N>): import("react/jsx-runtime").JSX.Element;
+declare namespace GridActionsCell {
+  var propTypes: any;
+}
+export { GridActionsCell };
+export declare const renderActionsCell: (params: GridRenderCellParams) => import("react/jsx-runtime").JSX.Element;

package/components/cell/GridActionsCell.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GridActionsCell = GridActionsCell;
 exports.renderActionsCell = void 0;
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -283,7 +284,7 @@ function GridActionsCellWrapper(props) {
   } = props;
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   if (!hasActions(colDef)) {
-    throw new Error('MUI X: Missing the `getActions` property in the `GridColDef`.');
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X: Missing the `getActions` property in the `GridColDef`.' : (0, _formatErrorMessage2.default)(60));
   }
   const actions = colDef.getActions(apiRef.current.getRowParams(id));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridActionsCell, (0, _extends2.default)({

package/components/cell/GridActionsCell.mjs

@@ -0,0 +1,291 @@
+'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";
+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 { 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 { GridActionsCellItem } from "./GridActionsCellItem.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const hasActions = colDef => typeof colDef.getActions === 'function';
+function GridActionsCell(props) {
+  const {
+      id,
+      hasFocus,
+      tabIndex,
+      position = 'bottom-end',
+      onMenuOpen,
+      onMenuClose,
+      children,
+      suppressChildrenValidation
+    } = 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 isRtl = useRtl();
+  const menuId = useId();
+  const buttonId = useId();
+  const rootProps = useGridRootProps();
+  const rowParams = apiRef.current.getRowParams(id);
+  const actions = [];
+  React.Children.forEach(children, child => {
+    // Unwrap React.Fragment
+    if (/*#__PURE__*/React.isValidElement(child)) {
+      if (child.type === React.Fragment) {
+        React.Children.forEach(child.props.children, fragChild => {
+          if (/*#__PURE__*/React.isValidElement(fragChild)) {
+            actions.push(fragChild);
+          }
+        });
+      } else if (child.type === GridActionsCellItem || suppressChildrenValidation) {
+        actions.push(child);
+      } else {
+        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');
+      }
+    }
+  });
+  const iconButtons = actions.filter(option => !option.props.showInMenu);
+  const menuButtons = actions.filter(option => option.props.showInMenu);
+  const numberOfButtons = iconButtons.length + (menuButtons.length ? 1 : 0);
+  React.useLayoutEffect(() => {
+    if (!hasFocus) {
+      Object.entries(touchRippleRefs.current).forEach(([index, ref]) => {
+        ref?.stop({}, () => {
+          delete touchRippleRefs.current[index];
+        });
+      });
+    }
+  }, [hasFocus]);
+  React.useEffect(() => {
+    if (focusedButtonIndex < 0 || !rootRef.current) {
+      return;
+    }
+    if (focusedButtonIndex >= rootRef.current.children.length) {
+      return;
+    }
+    const child = rootRef.current.children[focusedButtonIndex];
+    child.focus({
+      preventScroll: true
+    });
+  }, [focusedButtonIndex]);
+  const firstFocusableButtonIndex = actions.findIndex(o => !o.props.disabled);
+  React.useEffect(() => {
+    if (hasFocus && focusedButtonIndex === -1) {
+      setFocusedButtonIndex(firstFocusableButtonIndex);
+    }
+    if (!hasFocus) {
+      setFocusedButtonIndex(-1);
+      ignoreCallToFocus.current = false;
+    }
+  }, [hasFocus, focusedButtonIndex, firstFocusableButtonIndex]);
+  React.useEffect(() => {
+    if (focusedButtonIndex >= numberOfButtons) {
+      setFocusedButtonIndex(numberOfButtons - 1);
+    }
+  }, [focusedButtonIndex, numberOfButtons]);
+  const showMenu = event => {
+    if (onMenuOpen && !onMenuOpen(rowParams, event)) {
+      return;
+    }
+    setOpen(true);
+    setFocusedButtonIndex(numberOfButtons - 1);
+    ignoreCallToFocus.current = true;
+  };
+  const hideMenu = event => {
+    if (onMenuClose && !onMenuClose(rowParams, event)) {
+      return;
+    }
+    setOpen(false);
+  };
+  const toggleMenu = event => {
+    event.stopPropagation();
+    event.preventDefault();
+    if (open) {
+      hideMenu(event);
+    } else {
+      showMenu(event);
+    }
+  };
+  const handleTouchRippleRef = index => instance => {
+    touchRippleRefs.current[index] = instance;
+  };
+  const handleButtonClick = (index, onClick) => event => {
+    setFocusedButtonIndex(index);
+    ignoreCallToFocus.current = true;
+    if (onClick) {
+      onClick(event);
+    }
+  };
+  const handleRootKeyDown = event => {
+    if (numberOfButtons <= 1) {
+      return;
+    }
+    const getNewIndex = (index, direction) => {
+      if (index < 0 || index > actions.length) {
+        return index;
+      }
+
+      // for rtl mode we need to reverse the direction
+      const rtlMod = isRtl ? -1 : 1;
+      const indexMod = (direction === 'left' ? -1 : 1) * rtlMod;
+
+      // if the button that should receive focus is disabled go one more step
+      return actions[index + indexMod]?.props.disabled ? getNewIndex(index + indexMod, direction) : index + indexMod;
+    };
+    let newIndex = focusedButtonIndex;
+    if (event.key === 'ArrowRight') {
+      newIndex = getNewIndex(focusedButtonIndex, 'right');
+    } else if (event.key === 'ArrowLeft') {
+      newIndex = getNewIndex(focusedButtonIndex, 'left');
+    }
+    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, for example ArrowUp
+      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
+        }))
+      })
+    })]
+  }));
+}
+process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  api: PropTypes.object,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  children: PropTypes.node.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,
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * 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.any.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,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
+export { GridActionsCell };
+
+// Temporary wrapper for backward compatibility.
+// Only used to support `getActions` method in `GridColDef`.
+// TODO(v9): Remove this wrapper and the default `renderCell` in gridActionsColDef
+function GridActionsCellWrapper(props) {
+  const {
+    colDef,
+    id
+  } = props;
+  const apiRef = useGridApiContext();
+  if (!hasActions(colDef)) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X: Missing the `getActions` property in the `GridColDef`.' : _formatErrorMessage(60));
+  }
+  const actions = colDef.getActions(apiRef.current.getRowParams(id));
+  return /*#__PURE__*/_jsx(GridActionsCell, _extends({
+    suppressChildrenValidation: true
+  }, props, {
+    children: actions
+  }));
+}
+export const renderActionsCell = params => /*#__PURE__*/_jsx(GridActionsCellWrapper, _extends({}, params));
+if (process.env.NODE_ENV !== "production") renderActionsCell.displayName = "renderActionsCell";