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

package/modern/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import IconButton from '@mui/material/IconButton';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -38,7 +37,7 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
   }, [apiRef, colDef.field]);
   return /*#__PURE__*/_jsx("div", {
     className: classes.root,
-    children: /*#__PURE__*/_jsx(IconButton, {
+    children: /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
       ref: iconButtonRef,
       tabIndex: -1,
       className: classes.button,
@@ -49,10 +48,11 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
       "aria-expanded": open ? 'true' : undefined,
       "aria-haspopup": "true",
       "aria-controls": columnMenuId,
-      id: columnMenuButtonId,
+      id: columnMenuButtonId
+    }, rootProps.componentsProps?.baseIconButton, {
       children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuIcon, {
         fontSize: "small"
       })
-    })
+    }))
   });
 });

package/modern/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import IconButton from '@mui/material/IconButton';
 import Badge from '@mui/material/Badge';
 import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
 import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
@@ -52,17 +51,18 @@ function GridColumnHeaderFilterIconButton(props) {
   if (!counter) {
     return null;
   }
-  const iconButton = /*#__PURE__*/_jsx(IconButton, {
+  const iconButton = /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
     onClick: toggleFilter,
     color: "default",
     "aria-label": apiRef.current.getLocaleText('columnHeaderFiltersLabel'),
     size: "small",
-    tabIndex: -1,
+    tabIndex: -1
+  }, rootProps.componentsProps?.baseIconButton, {
     children: /*#__PURE__*/_jsx(rootProps.components.ColumnFilteredIcon, {
       className: classes.icon,
       fontSize: "small"
     })
-  });
+  }));
   return /*#__PURE__*/_jsx(rootProps.components.BaseTooltip, _extends({
     title: apiRef.current.getLocaleText('columnHeaderFiltersTooltipActive')(counter),
     enterDelay: 1000

package/modern/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -3,7 +3,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import Badge from '@mui/material/Badge';
-import IconButton from '@mui/material/IconButton';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -51,13 +50,14 @@ function GridColumnHeaderSortIconRaw(props) {
   if (!iconElement) {
     return null;
   }
-  const iconButton = /*#__PURE__*/_jsx(IconButton, {
+  const iconButton = /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
     tabIndex: -1,
     "aria-label": apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
     title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
-    size: "small",
+    size: "small"
+  }, rootProps.componentsProps?.baseIconButton, {
     children: iconElement
-  });
+  }));
   return /*#__PURE__*/_jsxs(GridIconButtonContainer, {
     children: [index != null && /*#__PURE__*/_jsx(Badge, {
       badgeContent: index,

package/modern/components/panel/filterPanel/GridFilterForm.js

@@ -5,7 +5,6 @@ const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterCha
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_capitalize as capitalize } from '@mui/utils';
-import IconButton from '@mui/material/IconButton';
 import MenuItem from '@mui/material/MenuItem';
 import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
@@ -235,15 +234,16 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
       as: rootProps.components.BaseFormControl
     }, baseFormControlProps, deleteIconProps, {
       className: clsx(classes.deleteIcon, baseFormControlProps.className, deleteIconProps.className),
-      children: /*#__PURE__*/_jsx(IconButton, {
+      children: /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
         "aria-label": apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         title: apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         onClick: handleDeleteFilter,
-        size: "small",
+        size: "small"
+      }, rootProps.componentsProps?.baseIconButton, {
         children: /*#__PURE__*/_jsx(rootProps.components.FilterPanelDeleteIcon, {
           fontSize: "small"
         })
-      })
+      }))
     })), /*#__PURE__*/_jsx(FilterFormLogicOperatorInput, _extends({
       variant: "standard",
       as: rootProps.components.BaseFormControl

package/modern/components/toolbar/GridToolbarFilterButton.js

@@ -58,13 +58,19 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
       return apiRef.current.getLocaleText('toolbarFiltersTooltipShow');
     }
     const getOperatorLabel = item => lookup[item.field].filterOperators.find(operator => operator.value === item.operator).label || apiRef.current.getLocaleText(`filterOperator${capitalize(item.operator)}`).toString();
+    const getFilterItemValue = item => {
+      const {
+        getValueAsString
+      } = lookup[item.field].filterOperators.find(operator => operator.value === item.operator);
+      return getValueAsString ? getValueAsString(item.value) : item.value;
+    };
     return /*#__PURE__*/_jsxs("div", {
       children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/_jsx(GridToolbarFilterListRoot, {
         className: classes.root,
         children: activeFilters.map((item, index) => _extends({}, lookup[item.field] && /*#__PURE__*/_jsx("li", {
           children: `${lookup[item.field].headerName || item.field}
                   ${getOperatorLabel(item)}
-                  ${item.value ?? ''}`
+                  ${item.value ? getFilterItemValue(item) : ''}`
         }, index)))
       })]
     });

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -4,7 +4,6 @@ const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import TextField from '@mui/material/TextField';
-import IconButton from '@mui/material/IconButton';
 import { styled } from '@mui/material/styles';
 import { unstable_debounce as debounce } from '@mui/utils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
@@ -91,17 +90,18 @@ function GridToolbarQuickFilter(props) {
       startAdornment: /*#__PURE__*/_jsx(rootProps.components.QuickFilterIcon, {
         fontSize: "small"
       }),
-      endAdornment: /*#__PURE__*/_jsx(IconButton, {
+      endAdornment: /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
         "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
         size: "small",
         sx: {
           visibility: searchValue ? 'visible' : 'hidden'
         },
-        onClick: handleSearchReset,
+        onClick: handleSearchReset
+      }, rootProps.componentsProps?.baseIconButton, {
         children: /*#__PURE__*/_jsx(rootProps.components.QuickFilterClearIcon, {
           fontSize: "small"
         })
-      })
+      }))
     }
   }, other, rootProps.componentsProps?.baseTextField));
 }

package/modern/constants/defaultGridSlotsComponents.js

@@ -5,6 +5,7 @@ import MUIFormControl from '@mui/material/FormControl';
 import MUISelect from '@mui/material/Select';
 import MUISwitch from '@mui/material/Switch';
 import MUIButton from '@mui/material/Button';
+import MUIIconButton from '@mui/material/IconButton';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
 import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridSkeletonCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridDragIcon, GridColumnHeaderFilterIconButton, GridSearchIcon, GridVisibilityOffIcon, GridViewColumnIcon, GridClearIcon } from '../components';
@@ -51,6 +52,7 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, DEFAULT_GRID_ICON
   BaseSelect: MUISelect,
   BaseSwitch: MUISwitch,
   BaseButton: MUIButton,
+  BaseIconButton: MUIIconButton,
   BaseTooltip: MUITooltip,
   BasePopper: MUIPopper,
   Cell: GridCell,

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { defaultMemoize } from 'reselect';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridSelector } from '../../utils/useGridSelector';
@@ -36,6 +36,7 @@ export const useGridColumnHeaders = props => {
     innerRef: innerRefProp,
     minColumnIndex = 0
   } = props;
+  const theme = useTheme();
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
@@ -87,9 +88,10 @@ export const useGridColumnHeaders = props => {
       apiRef,
       visibleRows: currentPage.rows
     });
-    const offset = firstColumnToRender > 0 ? prevScrollLeft.current - columnPositions[firstColumnToRender] : prevScrollLeft.current;
+    const direction = theme.direction === 'ltr' ? 1 : -1;
+    const offset = firstColumnToRender > 0 ? prevScrollLeft.current - direction * columnPositions[firstColumnToRender] : prevScrollLeft.current;
     innerRef.current.style.transform = `translate3d(${-offset}px, 0px, 0px)`;
-  }, [columnPositions, minColumnIndex, rootProps.columnBuffer, apiRef, currentPage.rows, rootProps.rowBuffer]);
+  }, [columnPositions, minColumnIndex, rootProps.columnBuffer, apiRef, currentPage.rows, rootProps.rowBuffer, theme.direction]);
   React.useLayoutEffect(() => {
     if (renderContext) {
       updateInnerPosition(renderContext);

package/modern/hooks/features/editing/useGridCellEditing.js

@@ -382,10 +382,13 @@ export const useGridCellEditing = (apiRef, props) => {
   const getRowWithUpdatedValuesFromCellEditing = React.useCallback((id, field) => {
     const column = apiRef.current.getColumn(field);
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
+    const row = apiRef.current.getRow(id);
+    if (!editingState[id] || !editingState[id][field]) {
+      return apiRef.current.getRow(id);
+    }
     const {
       value
     } = editingState[id][field];
-    const row = apiRef.current.getRow(id);
     return column.valueSetter ? column.valueSetter({
       value,
       row

package/modern/hooks/features/editing/useGridEditing.js

@@ -117,7 +117,7 @@ export const useGridEditing = (apiRef, props) => {
   const editingSharedApi = {
     isCellEditable,
     setEditCellValue,
-    unstable_getRowWithUpdatedValues: getRowWithUpdatedValues,
+    getRowWithUpdatedValues,
     unstable_getEditCellMeta: getEditCellMeta
   };
   const editingSharedPrivateApi = {

package/modern/hooks/features/editing/useGridRowEditing.js

@@ -503,6 +503,9 @@ export const useGridRowEditing = (apiRef, props) => {
   const getRowWithUpdatedValuesFromRowEditing = React.useCallback(id => {
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
     const row = apiRef.current.getRow(id);
+    if (!editingState[id]) {
+      return apiRef.current.getRow(id);
+    }
     let rowUpdate = _extends({}, row);
     Object.entries(editingState[id]).forEach(([field, fieldProps]) => {
       const column = apiRef.current.getColumn(field);

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

@@ -1,4 +1,5 @@
 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';
@@ -17,6 +18,40 @@ function enrichPageRowsWithPinnedRows(apiRef, rows) {
   const pinnedRows = gridPinnedRowsSelector(apiRef) || {};
   return [...(pinnedRows.top || []), ...rows, ...(pinnedRows.bottom || [])];
 }
+const getLeftColumnIndex = ({
+  currentColIndex,
+  firstColIndex,
+  lastColIndex,
+  direction
+}) => {
+  if (direction === 'rtl') {
+    if (currentColIndex < lastColIndex) {
+      return currentColIndex + 1;
+    }
+  } else if (direction === 'ltr') {
+    if (currentColIndex > firstColIndex) {
+      return currentColIndex - 1;
+    }
+  }
+  return null;
+};
+const getRightColumnIndex = ({
+  currentColIndex,
+  firstColIndex,
+  lastColIndex,
+  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
@@ -30,6 +65,7 @@ function enrichPageRowsWithPinnedRows(apiRef, rows) {
 export const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
   const initialCurrentPageRows = useGridVisibleRows(apiRef, props).rows;
+  const theme = useTheme();
   const currentPageRows = React.useMemo(() => enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
 
   /**
@@ -110,15 +146,27 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         }
       case 'ArrowRight':
         {
-          if (colIndexBefore < lastColIndex) {
-            goToHeader(colIndexBefore + 1, event);
+          const rightColIndex = getRightColumnIndex({
+            currentColIndex: colIndexBefore,
+            firstColIndex,
+            lastColIndex,
+            direction: theme.direction
+          });
+          if (rightColIndex !== null) {
+            goToHeader(rightColIndex, event);
           }
           break;
         }
       case 'ArrowLeft':
         {
-          if (colIndexBefore > firstColIndex) {
-            goToHeader(colIndexBefore - 1, event);
+          const leftColIndex = getLeftColumnIndex({
+            currentColIndex: colIndexBefore,
+            firstColIndex,
+            lastColIndex,
+            direction: theme.direction
+          });
+          if (leftColIndex !== null) {
+            goToHeader(leftColIndex, event);
           }
           break;
         }
@@ -166,7 +214,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows.length, goToCell, getRowIdFromIndex, goToHeader, goToGroupHeader]);
+  }, [apiRef, currentPageRows.length, theme.direction, goToCell, getRowIdFromIndex, goToHeader, goToGroupHeader]);
   const focusedColumnGroup = useGridSelector(apiRef, unstable_gridFocusColumnGroupHeaderSelector);
   const handleColumnGroupHeaderKeyDown = React.useCallback((params, event) => {
     const dimensions = apiRef.current.getRootDimensions();
@@ -279,6 +327,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (currentPageRows.length === 0 || !dimensions) {
       return;
     }
+    const direction = theme.direction;
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
     const rowIndexBefore = currentPageRows.findIndex(row => row.id === params.id);
@@ -307,15 +356,27 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         }
       case 'ArrowRight':
         {
-          if (colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, getRowIdFromIndex(rowIndexBefore), 'right');
+          const rightColIndex = getRightColumnIndex({
+            currentColIndex: colIndexBefore,
+            firstColIndex,
+            lastColIndex,
+            direction
+          });
+          if (rightColIndex !== null) {
+            goToCell(rightColIndex, getRowIdFromIndex(rowIndexBefore), direction === 'rtl' ? 'left' : 'right');
           }
           break;
         }
       case 'ArrowLeft':
         {
-          if (colIndexBefore > firstColIndex) {
-            goToCell(colIndexBefore - 1, getRowIdFromIndex(rowIndexBefore));
+          const leftColIndex = getLeftColumnIndex({
+            currentColIndex: colIndexBefore,
+            firstColIndex,
+            lastColIndex,
+            direction
+          });
+          if (leftColIndex !== null) {
+            goToCell(leftColIndex, getRowIdFromIndex(rowIndexBefore), direction === 'rtl' ? 'right' : 'left');
           }
           break;
         }
@@ -388,7 +449,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     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/modern/hooks/features/scroll/useGridScroll.js

@@ -1,4 +1,5 @@
 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';
@@ -42,6 +43,7 @@ function scrollIntoView(dimensions) {
  * @requires useGridColumnSpanning (method)
  */
 export const useGridScroll = (apiRef, props) => {
+  const theme = useTheme();
   const logger = useGridLogger(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersElementRef;
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
@@ -68,9 +70,10 @@ export const 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]
       });
@@ -99,8 +102,9 @@ export const useGridScroll = (apiRef, props) => {
   }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows]);
   const scroll = React.useCallback(params => {
     if (virtualScrollerRef.current && params.left != null && colRef.current) {
+      const 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: ${params.left}`);
     }
     if (virtualScrollerRef.current && params.top != null) {
@@ -108,7 +112,7 @@ export const useGridScroll = (apiRef, props) => {
       logger.debug(`Scrolling top: ${params.top}`);
     }
     logger.debug(`Scrolling, updating container, and viewport`);
-  }, [virtualScrollerRef, colRef, logger]);
+  }, [virtualScrollerRef, theme.direction, colRef, logger]);
   const getScrollPosition = React.useCallback(() => {
     if (!virtualScrollerRef?.current) {
       return {

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

@@ -6,6 +6,7 @@ const _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';
@@ -35,7 +36,7 @@ export function binarySearch(offset, positions, sliceStart = 0, sliceEnd = posit
 }
 function exponentialSearch(offset, positions, index) {
   let interval = 1;
-  while (index < positions.length && positions[index] < offset) {
+  while (index < positions.length && Math.abs(positions[index]) < offset) {
     index += interval;
     interval *= 2;
   }
@@ -62,6 +63,7 @@ export const useGridVirtualScroller = props => {
     renderZoneMaxColumnIndex = visibleColumns.length,
     getRowProps
   } = props;
+  const theme = useTheme();
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   const cellFocus = useGridSelector(apiRef, gridFocusCellSelector);
@@ -137,8 +139,8 @@ export const 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,
@@ -168,7 +170,7 @@ export const useGridVirtualScroller = props => {
       height: params.height
     });
   }, []);
-  useGridApiEventHandler(apiRef, 'resize', handleResize);
+  useGridApiEventHandler(apiRef, 'debouncedResize', handleResize);
   const updateRenderZonePosition = React.useCallback(nextRenderContext => {
     const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
       firstIndex: nextRenderContext.firstRowIndex,
@@ -191,8 +193,9 @@ export const useGridVirtualScroller = props => {
       lastRowToRender,
       visibleRows: currentPage.rows
     });
+    const direction = theme.direction === 'ltr' ? 1 : -1;
     const top = gridRowsMetaSelector(apiRef.current.state).positions[firstRowToRender];
-    const left = gridColumnPositionsSelector(apiRef)[firstColumnToRender]; // Call directly the selector because it might be outdated when this method is called
+    const left = direction * gridColumnPositionsSelector(apiRef)[firstColumnToRender]; // Call directly the selector because it might be outdated when this method is called
     renderZoneRef.current.style.transform = `translate3d(${left}px, ${top}px, 0px)`;
     if (typeof onRenderZonePositioning === 'function') {
       onRenderZonePositioning({
@@ -200,7 +203,7 @@ export const useGridVirtualScroller = props => {
         left
       });
     }
-  }, [apiRef, currentPage.rows, onRenderZonePositioning, renderZoneMinColumnIndex, renderZoneMaxColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer]);
+  }, [apiRef, currentPage.rows, onRenderZonePositioning, renderZoneMinColumnIndex, renderZoneMaxColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer, theme.direction]);
   const updateRenderContext = React.useCallback(nextRenderContext => {
     setRenderContext(nextRenderContext);
     updateRenderZonePosition(nextRenderContext);
@@ -243,9 +246,19 @@ export const 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
     const nextRenderContext = disableVirtualization ? prevRenderContext.current : computeRenderContext();

package/modern/index.js

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

package/modern/utils/domUtils.js

@@ -25,16 +25,18 @@ function escapeOperandAttributeSelector(operand) {
 export function getGridColumnHeaderElement(root, field) {
   return root.querySelector(`[role="columnheader"][data-field="${escapeOperandAttributeSelector(field)}"]`);
 }
+function getGridRowElementSelector(id) {
+  return `.${gridClasses.row}[data-id="${escapeOperandAttributeSelector(String(id))}"]`;
+}
 export function getGridRowElement(root, id) {
-  return root.querySelector(`.${gridClasses.row}[data-id="${escapeOperandAttributeSelector(String(id))}"]`);
+  return root.querySelector(getGridRowElementSelector(id));
 }
 export function getGridCellElement(root, {
   id,
   field
 }) {
-  const row = getGridRowElement(root, id);
-  if (!row) {
-    return null;
-  }
-  return row.querySelector(`.${gridClasses.cell}[data-field="${escapeOperandAttributeSelector(field)}"]`);
+  const rowSelector = getGridRowElementSelector(id);
+  const cellSelector = `.${gridClasses.cell}[data-field="${escapeOperandAttributeSelector(field)}"]`;
+  const selector = `${rowSelector} ${cellSelector}`;
+  return root.querySelector(selector);
 }

package/node/components/GridRow.js

@@ -207,11 +207,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       classNames.push((0, _clsx.default)(_gridClasses.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 = (0, _objectWithoutPropertiesLoose2.default)(editCellState, _excluded2);
       const params = (0, _extends2.default)({}, cellParams, {
         row: updatedRow
@@ -253,7 +249,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) {