@mui/x-data-grid 8.0.0-alpha.9 → 8.0.0-beta.0

package/node/components/GridSkeletonLoadingOverlay.js

@@ -1,189 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GridSkeletonLoadingOverlay = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _system = require("@mui/system");
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _RtlProvider = require("@mui/system/RtlProvider");
-var _forwardRef = require("@mui/x-internals/forwardRef");
-var _useGridApiContext = require("../hooks/utils/useGridApiContext");
-var _useGridRootProps = require("../hooks/utils/useGridRootProps");
-var _hooks = require("../hooks");
-var _constants = require("../internals/constants");
-var _gridClasses = require("../constants/gridClasses");
-var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
-var _cellBorderUtils = require("../utils/cellBorderUtils");
-var _domUtils = require("../utils/domUtils");
-var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
-var _rtlFlipSide = require("../utils/rtlFlipSide");
-var _utils = require("../internals/utils");
-var _jsxRuntime = require("react/jsx-runtime");
-const SkeletonOverlay = (0, _system.styled)('div', {
-  name: 'MuiDataGrid',
-  slot: 'SkeletonLoadingOverlay',
-  overridesResolver: (props, styles) => styles.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 (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
-};
-const getColIndex = el => parseInt(el.getAttribute('data-colindex'), 10);
-const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = (0, _forwardRef.forwardRef)(function GridSkeletonLoadingOverlay(props, forwardedRef) {
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const {
-    slots
-  } = rootProps;
-  const isRtl = (0, _RtlProvider.useRtl)();
-  const classes = useUtilityClasses({
-    classes: rootProps.classes
-  });
-  const ref = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(ref, forwardedRef);
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const dimensions = (0, _hooks.useGridSelector)(apiRef, _hooks.gridDimensionsSelector);
-  const viewportHeight = dimensions?.viewportInnerSize.height ?? 0;
-  const skeletonRowsCount = Math.ceil(viewportHeight / dimensions.rowHeight);
-  const totalWidth = (0, _hooks.useGridSelector)(apiRef, _hooks.gridColumnsTotalWidthSelector);
-  const positions = (0, _hooks.useGridSelector)(apiRef, _hooks.gridColumnPositionsSelector);
-  const inViewportCount = React.useMemo(() => positions.filter(value => value <= totalWidth).length, [totalWidth, positions]);
-  const allVisibleColumns = (0, _hooks.useGridSelector)(apiRef, _hooks.gridVisibleColumnDefinitionsSelector);
-  const columns = React.useMemo(() => allVisibleColumns.slice(0, inViewportCount), [allVisibleColumns, inViewportCount]);
-  const pinnedColumns = (0, _hooks.useGridSelector)(apiRef, _hooks.gridVisiblePinnedColumnDefinitionsSelector);
-  const getPinnedPosition = React.useCallback(field => {
-    if (pinnedColumns.left.findIndex(col => col.field === field) !== -1) {
-      return _constants.PinnedColumnPosition.LEFT;
-    }
-    if (pinnedColumns.right.findIndex(col => col.field === field) !== -1) {
-      return _constants.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 === _constants.PinnedColumnPosition.LEFT;
-        const isPinnedRight = pinnedPosition === _constants.PinnedColumnPosition.RIGHT;
-        const pinnedSide = (0, _rtlFlipSide.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 = (0, _utils.attachPinnedStyle)({}, isRtl, pinnedPosition, (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, column.computedWidth, colIndex, positions, dimensions.columnsTotalWidth, scrollbarWidth));
-        const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
-        const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, sectionIndex, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
-        const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, sectionIndex);
-        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__*/(0, _jsxRuntime.jsx)(slots.skeletonCell, {
-          width: emptyCellWidth,
-          empty: true
-        }, `skeleton-filler-column-${i}`);
-        const hasScrollbarFiller = isLastColumn && scrollbarWidth !== 0;
-        if (hasFillerBefore) {
-          rowCells.push(emptyCell);
-        }
-        rowCells.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(slots.skeletonCell, {
-          field: column.field,
-          type: column.type,
-          align: column.align,
-          width: "var(--width)",
-          height: dimensions.rowHeight,
-          "data-colindex": colIndex,
-          className: (0, _clsx.default)(isPinnedLeft && _gridClasses.gridClasses['cell--pinnedLeft'], isPinnedRight && _gridClasses.gridClasses['cell--pinnedRight'], showRightBorder && _gridClasses.gridClasses['cell--withRightBorder'], showLeftBorder && _gridClasses.gridClasses['cell--withLeftBorder']),
-          style: (0, _extends2.default)({
-            '--width': `${column.computedWidth}px`
-          }, pinnedStyle)
-        }, `skeleton-column-${i}-${column.field}`));
-        if (hasFillerAfter) {
-          rowCells.push(emptyCell);
-        }
-        if (hasScrollbarFiller) {
-          rowCells.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
-            pinnedRight: pinnedColumns.right.length > 0
-          }, `skeleton-scrollbar-filler-${i}`));
-        }
-      }
-      array.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _clsx.default)(_gridClasses.gridClasses.row, _gridClasses.gridClasses.rowSkeleton, i === 0 && _gridClasses.gridClasses['row--firstVisible']),
-        children: rowCells
-      }, `skeleton-row-${i}`));
-    }
-    return array;
-  }, [slots, columns, pinnedColumns, skeletonRowsCount, rootProps.showCellVerticalBorder, dimensions, positions, getPinnedPosition, isRtl]);
-
-  // 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="${(0, _domUtils.escapeOperandAttributeSelector)(colDef.field)}"]`);
-    if (!cells) {
-      throw new Error('MUI X: Expected skeleton cells to be defined with `data-field` attribute.');
-    }
-    const resizedColIndex = columns.findIndex(col => col.field === colDef.field);
-    const pinnedPosition = getPinnedPosition(colDef.field);
-    const isPinnedLeft = pinnedPosition === _constants.PinnedColumnPosition.LEFT;
-    const isPinnedRight = pinnedPosition === _constants.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.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.gridClasses['cell--pinnedRight']}`);
-      pinnedCells?.forEach(element => {
-        const colIndex = getColIndex(element);
-        if (colIndex < resizedColIndex) {
-          element.style.right = `${parseInt(getComputedStyle(element).right, 10) + delta}px`;
-        }
-      });
-    }
-  };
-  (0, _hooks.useGridApiEventHandler)(apiRef, 'columnResize', handleColumnResize);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonOverlay, (0, _extends2.default)({
-    className: classes.root
-  }, props, {
-    ref: handleRef,
-    children: children
-  }));
-});

package/node/components/base/GridBody.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "GridBody", {
-  enumerable: true,
-  get: function () {
-    return _GridVirtualScroller.GridVirtualScroller;
-  }
-});
-var _GridVirtualScroller = require("../virtualization/GridVirtualScroller");

package/node/components/base/GridFooterPlaceholder.js

@@ -1,19 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GridFooterPlaceholder = GridFooterPlaceholder;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _jsxRuntime = require("react/jsx-runtime");
-function GridFooterPlaceholder() {
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  if (rootProps.hideFooter) {
-    return null;
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.footer, (0, _extends2.default)({}, rootProps.slotProps?.footer /* FIXME: typing error */));
-}

package/node/components/base/GridOverlays.js

@@ -1,94 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GridOverlayWrapper = GridOverlayWrapper;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _system = require("@mui/system");
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _gridRowsUtils = require("../../hooks/features/rows/gridRowsUtils");
-var _useGridSelector = require("../../hooks/utils/useGridSelector");
-var _dimensions = require("../../hooks/features/dimensions");
-var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
-var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _gridClasses = require("../../constants/gridClasses");
-var _jsxRuntime = require("react/jsx-runtime");
-const GridOverlayWrapperRoot = (0, _system.styled)('div', {
-  name: 'MuiDataGrid',
-  slot: 'OverlayWrapper',
-  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right',
-  overridesResolver: (props, styles) => styles.overlayWrapper
-})(({
-  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 = (0, _system.styled)('div', {
-  name: 'MuiDataGrid',
-  slot: 'OverlayWrapperInner',
-  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant',
-  overridesResolver: (props, styles) => styles.overlayWrapperInner
-})({});
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['overlayWrapper'],
-    inner: ['overlayWrapperInner']
-  };
-  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
-};
-function GridOverlayWrapper(props) {
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
-  let height = Math.max(dimensions.viewportOuterSize.height - dimensions.topContainerHeight - dimensions.bottomContainerHeight - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0), 0);
-  if (height === 0) {
-    height = _gridRowsUtils.minimalContentHeight;
-  }
-  const classes = useUtilityClasses((0, _extends2.default)({}, props, {
-    classes: rootProps.classes
-  }));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapperRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(classes.root)
-  }, props, {
-    right: dimensions.columnsTotalWidth - dimensions.viewportOuterSize.width,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapperInner, (0, _extends2.default)({
-      className: (0, _clsx.default)(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.default.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
-  overlayType: _propTypes.default.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay'])
-} : void 0;

package/node/components/base/index.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _GridBody = require("./GridBody");
-Object.keys(_GridBody).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _GridBody[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _GridBody[key];
-    }
-  });
-});
-var _GridFooterPlaceholder = require("./GridFooterPlaceholder");
-Object.keys(_GridFooterPlaceholder).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _GridFooterPlaceholder[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _GridFooterPlaceholder[key];
-    }
-  });
-});

package/node/components/cell/GridActionsCell.js

@@ -1,269 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GridActionsCell = GridActionsCell;
-exports.renderActionsCell = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _RtlProvider = require("@mui/system/RtlProvider");
-var _utils = require("@mui/utils");
-var _gridClasses = require("../../constants/gridClasses");
-var _GridMenu = require("../menu/GridMenu");
-var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "focusElementRef"];
-const hasActions = colDef => typeof colDef.getActions === 'function';
-function GridActionsCell(props) {
-  const {
-      colDef,
-      id,
-      hasFocus,
-      tabIndex,
-      position = 'bottom-end',
-      focusElementRef
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const [focusedButtonIndex, setFocusedButtonIndex] = React.useState(-1);
-  const [open, setOpen] = React.useState(false);
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const rootRef = React.useRef(null);
-  const buttonRef = React.useRef(null);
-  const ignoreCallToFocus = React.useRef(false);
-  const touchRippleRefs = React.useRef({});
-  const isRtl = (0, _RtlProvider.useRtl)();
-  const menuId = (0, _utils.unstable_useId)();
-  const buttonId = (0, _utils.unstable_useId)();
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  if (!hasActions(colDef)) {
-    throw new Error('MUI X: Missing the `getActions` property in the `GridColDef`.');
-  }
-  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.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]);
-  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) {
-        // find the first focusable button and pass the index to the state
-        const focusableButtonIndex = options.findIndex(o => !o.props.disabled);
-        setFocusedButtonIndex(focusableButtonIndex);
-      }
-    }
-  }), [options]);
-  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 toggleMenu = () => {
-    if (open) {
-      hideMenu();
-    } else {
-      showMenu();
-    }
-  };
-  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 > options.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 options[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);
-    }
-  };
-  const handleListKeyDown = event => {
-    if (event.key === 'Tab') {
-      event.preventDefault();
-    }
-    if (['Tab', 'Escape'].includes(event.key)) {
-      hideMenu();
-    }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
-    role: "menu",
-    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,
-      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,
-        onKeyDown: handleListKeyDown,
-        "aria-labelledby": buttonId,
-        variant: "menu",
-        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.default.object,
-  /**
-   * The mode of the cell.
-   */
-  cellMode: _propTypes.default.oneOf(['edit', 'view']).isRequired,
-  /**
-   * The column of the row that the current cell belongs to.
-   */
-  colDef: _propTypes.default.object.isRequired,
-  /**
-   * The column field of the cell that triggered the event.
-   */
-  field: _propTypes.default.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.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.shape({
-      focus: _propTypes.default.func.isRequired
-    })
-  })]),
-  /**
-   * The cell value formatted with the column valueFormatter.
-   */
-  formattedValue: _propTypes.default.any,
-  /**
-   * If true, the cell is the active element.
-   */
-  hasFocus: _propTypes.default.bool.isRequired,
-  /**
-   * The grid row id.
-   */
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-  /**
-   * If true, the cell is editable.
-   */
-  isEditable: _propTypes.default.bool,
-  position: _propTypes.default.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.default.any.isRequired,
-  /**
-   * The node of the row that the current cell belongs to.
-   */
-  rowNode: _propTypes.default.object.isRequired,
-  /**
-   * the tabIndex value.
-   */
-  tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
-  /**
-   * The cell value.
-   * If the column has `valueGetter`, use `params.row` to directly access the fields.
-   */
-  value: _propTypes.default.any
-} : void 0;
-const renderActionsCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridActionsCell, (0, _extends2.default)({}, params));
-exports.renderActionsCell = renderActionsCell;