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

package/node/components/cell/GridActionsCell.js

@@ -10,8 +10,8 @@ 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 _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
+var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
 var _gridClasses = require("../../constants/gridClasses");
 var _GridMenu = require("../menu/GridMenu");
@@ -39,9 +39,17 @@ function GridActionsCell(props) {
   const buttonRef = React.useRef(null);
   const ignoreCallToFocus = React.useRef(false);
   const touchRippleRefs = React.useRef({});
+  const theme = (0, _styles.useTheme)();
   const menuId = (0, _utils.unstable_useId)();
   const buttonId = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.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]) => {
@@ -77,13 +85,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);
@@ -113,9 +114,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
@@ -147,7 +156,7 @@ function GridActionsCell(props) {
       touchRippleRef: handleTouchRippleRef(index),
       onClick: handleButtonClick(index, button.props.onClick),
       tabIndex: focusedButtonIndex === index ? tabIndex : -1
-    })), menuButtons.length > 0 && buttonId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    })), menuButtons.length > 0 && buttonId && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseIconButton, (0, _extends2.default)({
       ref: buttonRef,
       id: buttonId,
       "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
@@ -158,11 +167,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__*/(0, _jsxRuntime.jsx)(rootProps.components.MoreActionsIcon, {
         fontSize: "small"
       })
-    }), menuButtons.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
+    })), menuButtons.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
       onClickAway: hideMenu,
       onClick: hideMenu,
       open: open,

package/node/components/cell/GridActionsCellItem.js

@@ -9,9 +9,9 @@ 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 _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["label", "icon", "showInMenu", "onClick"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -24,19 +24,21 @@ const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       onClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const handleClick = event => {
     if (onClick) {
       onClick(event);
     }
   };
   if (!showInMenu) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseIconButton, (0, _extends2.default)({
       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/node/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -8,7 +8,6 @@ exports.ColumnHeaderMenuIcon = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -47,7 +46,7 @@ const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
   }, [apiRef, colDef.field]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: classes.root,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseIconButton, (0, _extends2.default)({
       ref: iconButtonRef,
       tabIndex: -1,
       className: classes.button,
@@ -58,11 +57,12 @@ 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__*/(0, _jsxRuntime.jsx)(rootProps.components.ColumnMenuIcon, {
         fontSize: "small"
       })
-    })
+    }))
   });
 });
 exports.ColumnHeaderMenuIcon = ColumnHeaderMenuIcon;

package/node/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -9,7 +9,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
 var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPanel/gridPreferencePanelSelector");
 var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
@@ -60,17 +59,18 @@ function GridColumnHeaderFilterIconButton(props) {
   if (!counter) {
     return null;
   }
-  const iconButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+  const iconButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseIconButton, (0, _extends2.default)({
     onClick: toggleFilter,
     color: "default",
     "aria-label": apiRef.current.getLocaleText('columnHeaderFiltersLabel'),
     size: "small",
-    tabIndex: -1,
+    tabIndex: -1
+  }, rootProps.componentsProps?.baseIconButton, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ColumnFilteredIcon, {
       className: classes.icon,
       fontSize: "small"
     })
-  });
+  }));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseTooltip, (0, _extends2.default)({
     title: apiRef.current.getLocaleText('columnHeaderFiltersTooltipActive')(counter),
     enterDelay: 1000

package/node/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -10,7 +10,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -59,13 +58,14 @@ function GridColumnHeaderSortIconRaw(props) {
   if (!iconElement) {
     return null;
   }
-  const iconButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+  const iconButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseIconButton, (0, _extends2.default)({
     tabIndex: -1,
     "aria-label": apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
     title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
-    size: "small",
+    size: "small"
+  }, rootProps.componentsProps?.baseIconButton, {
     children: iconElement
-  });
+  }));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridIconButtonContainer.GridIconButtonContainer, {
     children: [index != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
       badgeContent: index,

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

@@ -10,7 +10,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
 var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
@@ -243,15 +242,16 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
       as: rootProps.components.BaseFormControl
     }, baseFormControlProps, deleteIconProps, {
       className: (0, _clsx.default)(classes.deleteIcon, baseFormControlProps.className, deleteIconProps.className),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseIconButton, (0, _extends2.default)({
         "aria-label": apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         title: apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         onClick: handleDeleteFilter,
-        size: "small",
+        size: "small"
+      }, rootProps.componentsProps?.baseIconButton, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.FilterPanelDeleteIcon, {
           fontSize: "small"
         })
-      })
+      }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormLogicOperatorInput, (0, _extends2.default)({
       variant: "standard",
       as: rootProps.components.BaseFormControl

package/node/components/toolbar/GridToolbarFilterButton.js

@@ -66,13 +66,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${(0, _utils.unstable_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__*/(0, _jsxRuntime.jsxs)("div", {
       children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarFilterListRoot, {
         className: classes.root,
         children: activeFilters.map((item, index) => (0, _extends2.default)({}, lookup[item.field] && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
           children: `${lookup[item.field].headerName || item.field}
                   ${getOperatorLabel(item)}
-                  ${item.value ?? ''}`
+                  ${item.value ? getFilterItemValue(item) : ''}`
         }, index)))
       })]
     });

package/node/components/toolbar/GridToolbarQuickFilter.js

@@ -10,7 +10,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -100,17 +99,18 @@ function GridToolbarQuickFilter(props) {
       startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.QuickFilterIcon, {
         fontSize: "small"
       }),
-      endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseIconButton, (0, _extends2.default)({
         "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
         size: "small",
         sx: {
           visibility: searchValue ? 'visible' : 'hidden'
         },
-        onClick: handleSearchReset,
+        onClick: handleSearchReset
+      }, rootProps.componentsProps?.baseIconButton, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.QuickFilterClearIcon, {
           fontSize: "small"
         })
-      })
+      }))
     }
   }, other, rootProps.componentsProps?.baseTextField));
 }

package/node/constants/defaultGridSlotsComponents.js

@@ -12,6 +12,7 @@ var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
 var _Select = _interopRequireDefault(require("@mui/material/Select"));
 var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
 var _components = require("../components");
@@ -58,6 +59,7 @@ const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = (0, _extends2.default)({}, DEFAULT_GR
   BaseSelect: _Select.default,
   BaseSwitch: _Switch.default,
   BaseButton: _Button.default,
+  BaseIconButton: _IconButton.default,
   BaseTooltip: _Tooltip.default,
   BasePopper: _Popper.default,
   Cell: _components.GridCell,

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

@@ -45,6 +45,7 @@ const useGridColumnHeaders = props => {
     innerRef: innerRefProp,
     minColumnIndex = 0
   } = props;
+  const theme = (0, _styles.useTheme)();
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
@@ -96,9 +97,10 @@ 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/node/hooks/features/editing/useGridCellEditing.js

@@ -391,10 +391,13 @@ const useGridCellEditing = (apiRef, props) => {
   const getRowWithUpdatedValuesFromCellEditing = React.useCallback((id, field) => {
     const column = apiRef.current.getColumn(field);
     const editingState = (0, _gridEditingSelectors.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/node/hooks/features/editing/useGridEditing.js

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

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

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

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useGridKeyboardNavigation = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
@@ -25,6 +26,40 @@ function enrichPageRowsWithPinnedRows(apiRef, rows) {
   const pinnedRows = (0, _gridRowsSelector.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
@@ -38,6 +73,7 @@ function enrichPageRowsWithPinnedRows(apiRef, rows) {
 const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridKeyboardNavigation');
   const initialCurrentPageRows = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props).rows;
+  const theme = (0, _styles.useTheme)();
   const currentPageRows = React.useMemo(() => enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
 
   /**
@@ -118,15 +154,27 @@ 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;
         }
@@ -174,7 +222,7 @@ 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 = (0, _useGridSelector.useGridSelector)(apiRef, _focus.unstable_gridFocusColumnGroupHeaderSelector);
   const handleColumnGroupHeaderKeyDown = React.useCallback((params, event) => {
     const dimensions = apiRef.current.getRootDimensions();
@@ -287,6 +335,7 @@ 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);
@@ -315,15 +364,27 @@ 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;
         }
@@ -396,7 +457,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows, getRowIdFromIndex, goToCell, goToHeader]);
+  }, [apiRef, currentPageRows, theme.direction, getRowIdFromIndex, goToCell, goToHeader]);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnGroupHeaderKeyDown', handleColumnGroupHeaderKeyDown);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', handleCellKeyDown);

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useGridScroll = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridSelector = require("../../utils/useGridSelector");
@@ -49,6 +50,7 @@ function scrollIntoView(dimensions) {
  * @requires useGridColumnSpanning (method)
  */
 const useGridScroll = (apiRef, props) => {
+  const theme = (0, _styles.useTheme)();
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersElementRef;
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
@@ -75,9 +77,10 @@ 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]
       });
@@ -106,8 +109,9 @@ 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) {
@@ -115,7 +119,7 @@ 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/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -11,6 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _utils = require("@mui/utils");
+var _styles = require("@mui/material/styles");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridSelector = require("../../utils/useGridSelector");
@@ -44,7 +45,7 @@ function binarySearch(offset, positions, sliceStart = 0, sliceEnd = positions.le
 }
 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;
   }
@@ -72,6 +73,7 @@ const useGridVirtualScroller = props => {
     renderZoneMaxColumnIndex = visibleColumns.length,
     getRowProps
   } = props;
+  const theme = (0, _styles.useTheme)();
   const columnPositions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnPositionsSelector);
   const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnsTotalWidthSelector);
   const cellFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridFocusCellSelector);
@@ -147,8 +149,8 @@ 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,
@@ -178,7 +180,7 @@ const useGridVirtualScroller = props => {
       height: params.height
     });
   }, []);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'resize', handleResize);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'debouncedResize', handleResize);
   const updateRenderZonePosition = React.useCallback(nextRenderContext => {
     const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
       firstIndex: nextRenderContext.firstRowIndex,
@@ -201,8 +203,9 @@ const useGridVirtualScroller = props => {
       lastRowToRender,
       visibleRows: currentPage.rows
     });
+    const direction = theme.direction === 'ltr' ? 1 : -1;
     const top = (0, _gridRowsMetaSelector.gridRowsMetaSelector)(apiRef.current.state).positions[firstRowToRender];
-    const left = (0, _gridColumnsSelector.gridColumnPositionsSelector)(apiRef)[firstColumnToRender]; // Call directly the selector because it might be outdated when this method is called
+    const left = direction * (0, _gridColumnsSelector.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({
@@ -210,7 +213,7 @@ 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);
@@ -253,9 +256,19 @@ 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/node/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