@mui/x-data-grid 6.0.0-beta.2 → 6.0.0-beta.4

package/legacy/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
 import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
@@ -18,6 +19,38 @@ function enrichPageRowsWithPinnedRows(apiRef, rows) {
   var pinnedRows = gridPinnedRowsSelector(apiRef) || {};
   return [].concat(_toConsumableArray(pinnedRows.top || []), _toConsumableArray(rows), _toConsumableArray(pinnedRows.bottom || []));
 }
+var getLeftColumnIndex = function getLeftColumnIndex(_ref) {
+  var currentColIndex = _ref.currentColIndex,
+    firstColIndex = _ref.firstColIndex,
+    lastColIndex = _ref.lastColIndex,
+    direction = _ref.direction;
+  if (direction === 'rtl') {
+    if (currentColIndex < lastColIndex) {
+      return currentColIndex + 1;
+    }
+  } else if (direction === 'ltr') {
+    if (currentColIndex > firstColIndex) {
+      return currentColIndex - 1;
+    }
+  }
+  return null;
+};
+var getRightColumnIndex = function getRightColumnIndex(_ref2) {
+  var currentColIndex = _ref2.currentColIndex,
+    firstColIndex = _ref2.firstColIndex,
+    lastColIndex = _ref2.lastColIndex,
+    direction = _ref2.direction;
+  if (direction === 'rtl') {
+    if (currentColIndex > firstColIndex) {
+      return currentColIndex - 1;
+    }
+  } else if (direction === 'ltr') {
+    if (currentColIndex < lastColIndex) {
+      return currentColIndex + 1;
+    }
+  }
+  return null;
+};
 
 /**
  * @requires useGridSorting (method) - can be after
@@ -31,6 +64,7 @@ function enrichPageRowsWithPinnedRows(apiRef, rows) {
 export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
   var initialCurrentPageRows = useGridVisibleRows(apiRef, props).rows;
+  var theme = useTheme();
   var currentPageRows = React.useMemo(function () {
     return enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows);
   }, [apiRef, initialCurrentPageRows]);
@@ -114,15 +148,27 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
         }
       case 'ArrowRight':
         {
-          if (colIndexBefore < lastColIndex) {
-            goToHeader(colIndexBefore + 1, event);
+          var rightColIndex = getRightColumnIndex({
+            currentColIndex: colIndexBefore,
+            firstColIndex: firstColIndex,
+            lastColIndex: lastColIndex,
+            direction: theme.direction
+          });
+          if (rightColIndex !== null) {
+            goToHeader(rightColIndex, event);
           }
           break;
         }
       case 'ArrowLeft':
         {
-          if (colIndexBefore > firstColIndex) {
-            goToHeader(colIndexBefore - 1, event);
+          var leftColIndex = getLeftColumnIndex({
+            currentColIndex: colIndexBefore,
+            firstColIndex: firstColIndex,
+            lastColIndex: lastColIndex,
+            direction: theme.direction
+          });
+          if (leftColIndex !== null) {
+            goToHeader(leftColIndex, event);
           }
           break;
         }
@@ -170,7 +216,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows.length, goToCell, getRowIdFromIndex, goToHeader, goToGroupHeader]);
+  }, [apiRef, currentPageRows.length, theme.direction, goToCell, getRowIdFromIndex, goToHeader, goToGroupHeader]);
   var focusedColumnGroup = useGridSelector(apiRef, unstable_gridFocusColumnGroupHeaderSelector);
   var handleColumnGroupHeaderKeyDown = React.useCallback(function (params, event) {
     var dimensions = apiRef.current.getRootDimensions();
@@ -279,6 +325,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
     if (currentPageRows.length === 0 || !dimensions) {
       return;
     }
+    var direction = theme.direction;
     var viewportPageSize = apiRef.current.getViewportPageSize();
     var colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
     var rowIndexBefore = currentPageRows.findIndex(function (row) {
@@ -309,15 +356,27 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
         }
       case 'ArrowRight':
         {
-          if (colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, getRowIdFromIndex(rowIndexBefore), 'right');
+          var rightColIndex = getRightColumnIndex({
+            currentColIndex: colIndexBefore,
+            firstColIndex: firstColIndex,
+            lastColIndex: lastColIndex,
+            direction: direction
+          });
+          if (rightColIndex !== null) {
+            goToCell(rightColIndex, getRowIdFromIndex(rowIndexBefore), direction === 'rtl' ? 'left' : 'right');
           }
           break;
         }
       case 'ArrowLeft':
         {
-          if (colIndexBefore > firstColIndex) {
-            goToCell(colIndexBefore - 1, getRowIdFromIndex(rowIndexBefore));
+          var leftColIndex = getLeftColumnIndex({
+            currentColIndex: colIndexBefore,
+            firstColIndex: firstColIndex,
+            lastColIndex: lastColIndex,
+            direction: direction
+          });
+          if (leftColIndex !== null) {
+            goToCell(leftColIndex, getRowIdFromIndex(rowIndexBefore), direction === 'rtl' ? 'right' : 'left');
           }
           break;
         }
@@ -390,7 +449,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows, getRowIdFromIndex, goToCell, goToHeader]);
+  }, [apiRef, currentPageRows, theme.direction, getRowIdFromIndex, goToCell, goToHeader]);
   useGridApiEventHandler(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
   useGridApiEventHandler(apiRef, 'columnGroupHeaderKeyDown', handleColumnGroupHeaderKeyDown);
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);

package/legacy/hooks/features/scroll/useGridScroll.js

@@ -1,5 +1,6 @@
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnPositionsSelector, gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
 import { useGridSelector } from '../../utils/useGridSelector';
@@ -41,6 +42,7 @@ function scrollIntoView(dimensions) {
  * @requires useGridColumnSpanning (method)
  */
 export var useGridScroll = function useGridScroll(apiRef, props) {
+  var theme = useTheme();
   var logger = useGridLogger(apiRef, 'useGridScroll');
   var colRef = apiRef.current.columnHeadersElementRef;
   var virtualScrollerRef = apiRef.current.virtualScrollerRef;
@@ -68,9 +70,10 @@ export var useGridScroll = function useGridScroll(apiRef, props) {
       if (typeof cellWidth === 'undefined') {
         cellWidth = visibleColumns[params.colIndex].computedWidth;
       }
+      // When using RTL, `scrollLeft` becomes negative, so we must ensure that we only compare values.
       scrollCoordinates.left = scrollIntoView({
         clientHeight: virtualScrollerRef.current.clientWidth,
-        scrollTop: virtualScrollerRef.current.scrollLeft,
+        scrollTop: Math.abs(virtualScrollerRef.current.scrollLeft),
         offsetHeight: cellWidth,
         offsetTop: columnPositions[params.colIndex]
       });
@@ -100,8 +103,9 @@ export var useGridScroll = function useGridScroll(apiRef, props) {
   }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows]);
   var scroll = React.useCallback(function (params) {
     if (virtualScrollerRef.current && params.left != null && colRef.current) {
+      var direction = theme.direction === 'rtl' ? -1 : 1;
       colRef.current.scrollLeft = params.left;
-      virtualScrollerRef.current.scrollLeft = params.left;
+      virtualScrollerRef.current.scrollLeft = direction * params.left;
       logger.debug("Scrolling left: ".concat(params.left));
     }
     if (virtualScrollerRef.current && params.top != null) {
@@ -109,7 +113,7 @@ export var useGridScroll = function useGridScroll(apiRef, props) {
       logger.debug("Scrolling top: ".concat(params.top));
     }
     logger.debug("Scrolling, updating container, and viewport");
-  }, [virtualScrollerRef, colRef, logger]);
+  }, [virtualScrollerRef, theme.direction, colRef, logger]);
   var getScrollPosition = React.useCallback(function () {
     if (!(virtualScrollerRef != null && virtualScrollerRef.current)) {
       return {

package/legacy/hooks/features/virtualization/useGridVirtualScroller.js

@@ -7,6 +7,7 @@ var _excluded = ["style"],
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { useTheme } from '@mui/material/styles';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridSelector } from '../../utils/useGridSelector';
@@ -38,7 +39,7 @@ export function binarySearch(offset, positions) {
 }
 function exponentialSearch(offset, positions, index) {
   var interval = 1;
-  while (index < positions.length && positions[index] < offset) {
+  while (index < positions.length && Math.abs(positions[index]) < offset) {
     index += interval;
     interval *= 2;
   }
@@ -52,6 +53,12 @@ export var getRenderableIndexes = function getRenderableIndexes(_ref) {
     maxLastIndex = _ref.maxLastIndex;
   return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
 };
+var areRenderContextsEqual = function areRenderContextsEqual(context1, context2) {
+  if (context1 === context2) {
+    return true;
+  }
+  return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
+};
 export var useGridVirtualScroller = function useGridVirtualScroller(props) {
   var _currentPage$range3, _currentPage$range4;
   var apiRef = useGridPrivateApiContext();
@@ -65,6 +72,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     _props$renderZoneMaxC = props.renderZoneMaxColumnIndex,
     renderZoneMaxColumnIndex = _props$renderZoneMaxC === void 0 ? visibleColumns.length : _props$renderZoneMaxC,
     getRowProps = props.getRowProps;
+  var theme = useTheme();
   var columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   var columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   var cellFocus = useGridSelector(apiRef, gridFocusCellSelector);
@@ -149,8 +157,8 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       hasRowWithAutoHeight = apiRef.current.rowHasAutoHeight(row.id);
     }
     if (!hasRowWithAutoHeight) {
-      firstColumnIndex = binarySearch(left, columnPositions);
-      lastColumnIndex = binarySearch(left + containerDimensions.width, columnPositions);
+      firstColumnIndex = binarySearch(Math.abs(left), columnPositions);
+      lastColumnIndex = binarySearch(Math.abs(left) + containerDimensions.width, columnPositions);
     }
     return {
       firstRowIndex: firstRowIndex,
@@ -180,7 +188,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       height: params.height
     });
   }, []);
-  useGridApiEventHandler(apiRef, 'resize', handleResize);
+  useGridApiEventHandler(apiRef, 'debouncedResize', handleResize);
   var updateRenderZonePosition = React.useCallback(function (nextRenderContext) {
     var _getRenderableIndexes3 = getRenderableIndexes({
         firstIndex: nextRenderContext.firstRowIndex,
@@ -208,8 +216,9 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       lastRowToRender: lastRowToRender,
       visibleRows: currentPage.rows
     });
+    var direction = theme.direction === 'ltr' ? 1 : -1;
     var top = gridRowsMetaSelector(apiRef.current.state).positions[firstRowToRender];
-    var left = gridColumnPositionsSelector(apiRef)[firstColumnToRender]; // Call directly the selector because it might be outdated when this method is called
+    var left = direction * gridColumnPositionsSelector(apiRef)[firstColumnToRender]; // Call directly the selector because it might be outdated when this method is called
     renderZoneRef.current.style.transform = "translate3d(".concat(left, "px, ").concat(top, "px, 0px)");
     if (typeof onRenderZonePositioning === 'function') {
       onRenderZonePositioning({
@@ -217,8 +226,12 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
         left: left
       });
     }
-  }, [apiRef, currentPage.rows, onRenderZonePositioning, renderZoneMinColumnIndex, renderZoneMaxColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer]);
+  }, [apiRef, currentPage.rows, onRenderZonePositioning, renderZoneMinColumnIndex, renderZoneMaxColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer, theme.direction]);
   var updateRenderContext = React.useCallback(function (nextRenderContext) {
+    if (prevRenderContext.current && areRenderContextsEqual(nextRenderContext, prevRenderContext.current)) {
+      updateRenderZonePosition(nextRenderContext);
+      return;
+    }
     setRenderContext(nextRenderContext);
     updateRenderZonePosition(nextRenderContext);
     var _getRenderableIndexes7 = getRenderableIndexes({
@@ -261,9 +274,19 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     scrollPosition.current.left = scrollLeft;
 
     // On iOS and macOS, negative offsets are possible when swiping past the start
-    if (scrollLeft < 0 || scrollTop < 0 || !prevRenderContext.current) {
+    if (!prevRenderContext.current || scrollTop < 0) {
       return;
     }
+    if (theme.direction === 'ltr') {
+      if (scrollLeft < 0) {
+        return;
+      }
+    }
+    if (theme.direction === 'rtl') {
+      if (scrollLeft > 0) {
+        return;
+      }
+    }
 
     // When virtualization is disabled, the context never changes during scroll
     var nextRenderContext = disableVirtualization ? prevRenderContext.current : computeRenderContext();

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.0.0-beta.2
+ * @mui/x-data-grid v6.0.0-beta.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internals/index.js

@@ -18,6 +18,7 @@ export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
 export { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
 export { passFilterLogic } from '../hooks/features/filter/gridFilterUtils';
+export { isSingleSelectColDef } from '../components/panel/filterPanel/filterPanelUtils';
 export { useGridFocus, focusStateInitializer } from '../hooks/features/focus/useGridFocus';
 export { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
 export { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';

package/legacy/utils/domUtils.js

@@ -25,15 +25,17 @@ function escapeOperandAttributeSelector(operand) {
 export function getGridColumnHeaderElement(root, field) {
   return root.querySelector("[role=\"columnheader\"][data-field=\"".concat(escapeOperandAttributeSelector(field), "\"]"));
 }
+function getGridRowElementSelector(id) {
+  return ".".concat(gridClasses.row, "[data-id=\"").concat(escapeOperandAttributeSelector(String(id)), "\"]");
+}
 export function getGridRowElement(root, id) {
-  return root.querySelector(".".concat(gridClasses.row, "[data-id=\"").concat(escapeOperandAttributeSelector(String(id)), "\"]"));
+  return root.querySelector(getGridRowElementSelector(id));
 }
 export function getGridCellElement(root, _ref) {
   var id = _ref.id,
     field = _ref.field;
-  var row = getGridRowElement(root, id);
-  if (!row) {
-    return null;
-  }
-  return row.querySelector(".".concat(gridClasses.cell, "[data-field=\"").concat(escapeOperandAttributeSelector(field), "\"]"));
+  var rowSelector = getGridRowElementSelector(id);
+  var cellSelector = ".".concat(gridClasses.cell, "[data-field=\"").concat(escapeOperandAttributeSelector(field), "\"]");
+  var selector = "".concat(rowSelector, " ").concat(cellSelector);
+  return root.querySelector(selector);
 }

package/models/api/gridEditingApi.d.ts

@@ -39,9 +39,9 @@ export interface GridEditingSharedApi {
      * In row editing, `field` is ignored and all fields are considered.
      * @param {GridRowId} id The row id being edited.
      * @param {string} field The field being edited.
-     * @ignore - do not document.
+     * @returns {GridRowModel} The row with edited values.
      */
-    unstable_getRowWithUpdatedValues: (id: GridRowId, field: string) => GridRowModel;
+    getRowWithUpdatedValues: (id: GridRowId, field: string) => GridRowModel;
     /**
      * Gets the meta information for the edit cell.
      * @param {GridRowId} id The row id being edited.

package/models/colDef/gridColDef.d.ts

@@ -106,10 +106,6 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      * @default 'string'
      */
     type?: GridColType;
-    /**
-     * To be used in combination with `type: 'singleSelect'`. This is an array (or a function returning an array) of the possible cell values and labels.
-     */
-    valueOptions?: Array<ValueOptions> | ((params: GridValueOptionsParams<R>) => Array<ValueOptions>);
     /**
      * Allows to align the column values in cells.
      */
@@ -227,6 +223,9 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      */
     colSpan?: number | ((params: GridCellParams<R, V, F>) => number | undefined);
 }
+/**
+ * Column Definition interface used for columns with the `actions` type.
+ */
 export interface GridActionsColDef<R extends GridValidRowModel = any, V = any, F = V> extends GridBaseColDef<R, V, F> {
     /**
      * Type allows to merge this object with a default definition [[GridColDef]].
@@ -240,10 +239,24 @@ export interface GridActionsColDef<R extends GridValidRowModel = any, V = any, F
      */
     getActions: (params: GridRowParams<R>) => React.ReactElement<GridActionsCellItemProps>[];
 }
+/**
+ * Column Definition interface used for columns with the `singleSelect` type.
+ */
+export interface GridSingleSelectColDef<R extends GridValidRowModel = any, V = any, F = V> extends GridBaseColDef<R, V, F> {
+    /**
+     * Type allows to merge this object with a default definition [[GridColDef]].
+     * @default 'singleSelect'
+     */
+    type: 'singleSelect';
+    /**
+     * To be used in combination with `type: 'singleSelect'`. This is an array (or a function returning an array) of the possible cell values and labels.
+     */
+    valueOptions?: Array<ValueOptions> | ((params: GridValueOptionsParams<R>) => Array<ValueOptions>);
+}
 /**
  * Column Definition interface.
  */
-export type GridColDef<R extends GridValidRowModel = any, V = any, F = V> = GridBaseColDef<R, V, F> | GridActionsColDef<R, V, F>;
+export type GridColDef<R extends GridValidRowModel = any, V = any, F = V> = GridBaseColDef<R, V, F> | GridActionsColDef<R, V, F> | GridSingleSelectColDef<R, V, F>;
 export type GridColTypeDef<V = any, F = V> = Omit<GridBaseColDef<any, V, F>, 'field'> & {
     extendType?: GridNativeColTypes;
 };

package/models/colDef/index.d.ts

@@ -1,3 +1,3 @@
-export type { GridAlignment, ValueOptions, GridKeyValue, GridColDef, GridColTypeDef, GridColumnsMeta, } from './gridColDef';
+export type { GridAlignment, ValueOptions, GridKeyValue, GridColDef, GridColTypeDef, GridColumnsMeta, GridSingleSelectColDef, GridActionsColDef, } from './gridColDef';
 export * from './gridColType';
 export * from './gridColumnTypesRecord';

package/models/gridFilterOperator.d.ts

@@ -32,6 +32,12 @@ export interface GridFilterOperator<R extends GridValidRowModel = any, V = any,
      * The props to pass to the input component in the filter panel for this filter operator.
      */
     InputComponentProps?: Record<string, any>;
+    /**
+     * Converts the value of a filter item to a human-readable form.
+     * @param {GridFilterItem['value']} value The filter item value.
+     * @returns {string} The value formatted to be displayed in the UI of filter button tooltip.
+     */
+    getValueAsString?: (value: GridFilterItem['value']) => string;
     /**
      * If `false`, filter operator doesn't require user-entered value to work.
      * Usually should be set to `false` for filter operators that don't have `InputComponent` (for example `isEmpty`)

package/models/gridSlotsComponent.d.ts

@@ -35,6 +35,11 @@ export interface GridSlotsComponent extends GridIconSlotsComponent {
      * @default Button
      */
     BaseButton: React.JSXElementConstructor<any>;
+    /**
+     * The custom IconButton component used in the grid.
+     * @default IconButton
+     */
+    BaseIconButton: React.JSXElementConstructor<any>;
     /**
      * The custom Tooltip component used in the grid.
      * @default Tooltip

package/models/gridSlotsComponentsProps.d.ts

@@ -8,6 +8,7 @@ export interface GridSlotsComponentsProps {
     baseSelect?: any;
     baseSwitch?: any;
     baseButton?: any;
+    baseIconButton?: any;
     basePopper?: any;
     baseTooltip?: any;
     cell?: any;

package/modern/colDef/gridSingleSelectColDef.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { GRID_STRING_COL_DEF } from './gridStringColDef';
 import { renderEditSingleSelectCell } from '../components/cell/GridEditSingleSelectCell';
 import { getGridSingleSelectOperators } from './gridSingleSelectOperators';
-import { getLabelFromValueOption } from '../components/panel/filterPanel/filterPanelUtils';
+import { getLabelFromValueOption, isSingleSelectColDef } from '../components/panel/filterPanel/filterPanelUtils';
 const isArrayOfObjects = options => {
   return typeof options[0] === 'object';
 };
@@ -16,6 +16,9 @@ export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
       api
     } = params;
     const colDef = params.api.getColumn(field);
+    if (!isSingleSelectColDef(colDef)) {
+      return '';
+    }
     let valueOptions;
     if (typeof colDef.valueOptions === 'function') {
       valueOptions = colDef.valueOptions({

package/modern/components/GridRow.js

@@ -199,11 +199,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       classNames.push(clsx(gridClasses['cell--withRenderer'], rootProps.classes?.['cell--withRenderer']));
     }
     if (editCellState != null && column.renderEditCell) {
-      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 updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
       const editCellStateRest = _objectWithoutPropertiesLoose(editCellState, _excluded2);
       const params = _extends({}, cellParams, {
         row: updatedRow
@@ -245,7 +241,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     }, rootProps.componentsProps?.cell, {
       children: content
     }), column.field);
-  }, [apiRef, cellTabIndex, editRowsState, cellFocus, rootProps, row, rowHeight, rowId, treeDepth, sortModel.length]);
+  }, [apiRef, cellTabIndex, editRowsState, cellFocus, rootProps, rowHeight, rowId, treeDepth, sortModel.length]);
   const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
   let minHeight = rowHeight;
   if (minHeight === 'auto' && sizes) {

package/modern/components/cell/GridActionsCell.js

@@ -3,8 +3,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import IconButton from '@mui/material/IconButton';
 import MenuList from '@mui/material/MenuList';
+import { useTheme } from '@mui/material/styles';
 import { unstable_useId as useId } from '@mui/utils';
 import { gridClasses } from '../../constants/gridClasses';
 import { GridMenu } from '../menu/GridMenu';
@@ -30,9 +30,17 @@ function GridActionsCell(props) {
   const buttonRef = React.useRef(null);
   const ignoreCallToFocus = React.useRef(false);
   const touchRippleRefs = React.useRef({});
+  const theme = useTheme();
   const menuId = useId();
   const buttonId = useId();
   const rootProps = useGridRootProps();
+  if (!hasActions(colDef)) {
+    throw new Error('MUI: 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]) => {
@@ -68,13 +76,6 @@ function GridActionsCell(props) {
       }
     }
   }), []);
-  if (!hasActions(colDef)) {
-    throw new Error('MUI: 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.useEffect(() => {
     if (focusedButtonIndex >= numberOfButtons) {
       setFocusedButtonIndex(numberOfButtons - 1);
@@ -104,9 +105,17 @@ function GridActionsCell(props) {
     }
     let newIndex = focusedButtonIndex;
     if (event.key === 'ArrowRight') {
-      newIndex += 1;
+      if (theme.direction === 'rtl') {
+        newIndex -= 1;
+      } else {
+        newIndex += 1;
+      }
     } else if (event.key === 'ArrowLeft') {
-      newIndex -= 1;
+      if (theme.direction === 'rtl') {
+        newIndex += 1;
+      } else {
+        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
@@ -138,7 +147,7 @@ function GridActionsCell(props) {
       touchRippleRef: handleTouchRippleRef(index),
       onClick: handleButtonClick(index, button.props.onClick),
       tabIndex: focusedButtonIndex === index ? tabIndex : -1
-    })), menuButtons.length > 0 && buttonId && /*#__PURE__*/_jsx(IconButton, {
+    })), menuButtons.length > 0 && buttonId && /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
       ref: buttonRef,
       id: buttonId,
       "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
@@ -149,11 +158,12 @@ function GridActionsCell(props) {
       size: "small",
       onClick: showMenu,
       touchRippleRef: handleTouchRippleRef(buttonId),
-      tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1,
+      tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
+    }, rootProps.componentsProps?.baseIconButton, {
       children: /*#__PURE__*/_jsx(rootProps.components.MoreActionsIcon, {
         fontSize: "small"
       })
-    }), menuButtons.length > 0 && /*#__PURE__*/_jsx(GridMenu, {
+    })), menuButtons.length > 0 && /*#__PURE__*/_jsx(GridMenu, {
       onClickAway: hideMenu,
       onClick: hideMenu,
       open: open,

package/modern/components/cell/GridActionsCellItem.js

@@ -3,9 +3,9 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["label", "icon", "showInMenu", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import IconButton from '@mui/material/IconButton';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -16,19 +16,21 @@ const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       onClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
   const handleClick = event => {
     if (onClick) {
       onClick(event);
     }
   };
   if (!showInMenu) {
-    return /*#__PURE__*/_jsx(IconButton, _extends({
+    return /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
       ref: ref,
       size: "small",
       role: "menuitem",
       "aria-label": label
     }, other, {
-      onClick: handleClick,
+      onClick: handleClick
+    }, rootProps.componentsProps?.baseIconButton, {
       children: /*#__PURE__*/React.cloneElement(icon, {
         fontSize: 'small'
       })

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -8,7 +8,7 @@ import MenuItem from '@mui/material/MenuItem';
 import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
-import { getLabelFromValueOption, getValueFromValueOptions } from '../panel/filterPanel/filterPanelUtils';
+import { getLabelFromValueOption, getValueFromValueOptions, isSingleSelectColDef } from '../panel/filterPanel/filterPanelUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 function isKeyboardEvent(event) {
@@ -35,15 +35,26 @@ function GridEditSingleSelectCell(props) {
   const [open, setOpen] = React.useState(initialOpen);
   const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? false;
+  useEnhancedEffect(() => {
+    if (hasFocus) {
+      inputRef.current?.focus();
+    }
+  }, [hasFocus]);
+  if (!isSingleSelectColDef(colDef)) {
+    return null;
+  }
   let valueOptions;
-  if (typeof colDef.valueOptions === 'function') {
-    valueOptions = colDef.valueOptions({
+  if (typeof colDef?.valueOptions === 'function') {
+    valueOptions = colDef?.valueOptions({
       id,
       row,
       field
     });
   } else {
-    valueOptions = colDef.valueOptions;
+    valueOptions = colDef?.valueOptions;
+  }
+  if (!valueOptions) {
+    return null;
   }
   const handleChange = async event => {
     setOpen(false);
@@ -78,11 +89,6 @@ function GridEditSingleSelectCell(props) {
     }
     setOpen(true);
   };
-  useEnhancedEffect(() => {
-    if (hasFocus) {
-      inputRef.current.focus();
-    }
-  }, [hasFocus]);
   const OptionComponent = isSelectNative ? 'option' : MenuItem;
   return /*#__PURE__*/_jsx(rootProps.components.BaseSelect, _extends({
     ref: ref,