[DataGrid] Fix RTL mode

packages/x-data-grid/src/components/virtualization/GridTopContainer.tsx

@@ -21,6 +21,7 @@ const Element = styled('div')({
     zIndex: 5,
     bottom: 0,
     left: 0,
+    right: 0,
     height: 1,
     width: 'var(--DataGrid-rowWidth)',
     backgroundColor: 'var(--DataGrid-rowBorderColor)',

packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx

@@ -67,13 +67,15 @@ const EMPTY_SCROLL_POSITION = { top: 0, left: 0 };
 export const EMPTY_DETAIL_PANELS = Object.freeze(new Map<GridRowId, React.ReactNode>());
 
 const createScrollCache = (
+  mode: 'ltr' | 'rtl',
   rowBufferPx: number,
   columnBufferPx: number,
   verticalBuffer: number,
   horizontalBuffer: number,
 ) => ({
   direction: ScrollDirection.NONE,
   buffer: bufferForDirection(
+    mode,
     ScrollDirection.NONE,
     rowBufferPx,
     columnBufferPx,
@@ -139,6 +141,7 @@ export const useGridVirtualScroller = () => {
   const frozenContext = React.useRef<GridRenderContext | undefined>(undefined);
   const scrollCache = useLazyRef(() =>
     createScrollCache(
+      theme.direction,
       rootProps.rowBufferPx,
       rootProps.columnBufferPx,
       dimensions.rowHeight * 15,
@@ -243,6 +246,7 @@ export const useGridVirtualScroller = () => {
 
     scrollCache.direction = direction;
     scrollCache.buffer = bufferForDirection(
+      theme.direction,
       direction,
       rootProps.rowBufferPx,
       rootProps.columnBufferPx,
@@ -938,7 +942,7 @@ export function computeOffsetLeft(
     factor * (columnPositions[renderContext.firstColumnIndex] ?? 0) -
     (columnPositions[pinnedLeftLength] ?? 0);
 
-  return left;
+  return Math.abs(left);
 }
 
 function directionForDelta(dx: number, dy: number) {
@@ -963,12 +967,25 @@ function directionForDelta(dx: number, dy: number) {
 }
 
 function bufferForDirection(
+  mode: 'ltr' | 'rtl',
   direction: ScrollDirection,
   rowBufferPx: number,
   columnBufferPx: number,
   verticalBuffer: number,
   horizontalBuffer: number,
 ) {
+  if (mode === 'rtl') {
+    switch (direction) {
+      case ScrollDirection.LEFT:
+        direction = ScrollDirection.RIGHT;
+        break;
+      case ScrollDirection.RIGHT:
+        direction = ScrollDirection.LEFT;
+        break;
+      default:
+    }
+  }
+
   switch (direction) {
     case ScrollDirection.NONE:
       return {

test/regressions/data-grid/DataGridRTLVirtualization.js

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { prefixer } from 'stylis';
+import rtlPlugin from 'stylis-plugin-rtl';
+import { useGridApiRef, DataGrid } from '@mui/x-data-grid';
+import { arSD } from '@mui/x-data-grid/locales';
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
+import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
+
+// Create rtl cache
+const cacheRtl = createCache({
+  key: 'data-grid-rtl-demo',
+  stylisPlugins: [prefixer, rtlPlugin],
+});
+
+const columns = [
+  {
+    field: 'id',
+    headerName: 'تعريف',
+    width: 150,
+  },
+  {
+    field: 'name',
+    headerName: 'اسم',
+    width: 150,
+  },
+  {
+    field: 'age',
+    headerName: 'عمر',
+    valueGetter: (value) => `${value} سنوات`,
+    width: 150,
+  },
+  {
+    field: 'occupation',
+    headerName: 'المهنة',
+    width: 150,
+  },
+  {
+    field: 'gender',
+    headerName: 'جنس',
+    width: 150,
+  },
+];
+
+const rows = [
+  { id: 1, name: 'سارہ', age: 35, occupation: 'معلم', gender: 'أنثى' },
+  { id: 2, name: 'زید', age: 42, occupation: 'مهندس', gender: 'ذكر' },
+  { id: 3, name: 'علی', age: 33, occupation: 'محاسب', gender: 'ذكر' },
+  { id: 4, name: 'فاطمہ', age: 25, occupation: 'معلم', gender: 'أنثى' },
+  { id: 5, name: 'ایندریو', age: 65, occupation: 'مهندس', gender: 'ذكر' },
+];
+
+export default function DataGridRTLVirtualization() {
+  const apiRef = useGridApiRef();
+  const existingTheme = useTheme();
+  const theme = React.useMemo(
+    () =>
+      createTheme({}, arSD, existingTheme, {
+        direction: 'rtl',
+      }),
+    [existingTheme],
+  );
+  React.useEffect(() => {
+    Promise.resolve().then(() => {
+      const scroller = apiRef.current.rootElementRef.current.querySelector(
+        '.MuiDataGrid-virtualScroller',
+      );
+      scroller.scrollLeft = -Math.abs(scroller.scrollWidth - scroller.clientWidth);
+    });
+  }, [apiRef]);
+  return (
+    <CacheProvider value={cacheRtl}>
+      <ThemeProvider theme={theme}>
+        <div dir="rtl" style={{ height: 400, width: 300 }}>
+          <DataGrid apiRef={apiRef} rows={rows} columns={columns} />
+        </div>
+      </ThemeProvider>
+    </CacheProvider>
+  );
+}

test/regressions/index.js

@@ -56,31 +56,50 @@ function excludeTest(suite, name) {
   });
 }
 
+const tests = [];
+
 // Also use some of the demos to avoid code duplication.
 const requireDocs = require.context('docsx/data', true, /\.js$/);
-const tests = requireDocs.keys().reduce((res, path) => {
+requireDocs.keys().forEach((path) => {
   const [name, ...suiteArray] = path.replace('./', '').replace('.js', '').split('/').reverse();
   const suite = `docs-${suiteArray.reverse().join('-')}`;
 
   if (excludeTest(suite, name)) {
-    return res;
+    return;
   }
 
   // TODO: Why does webpack include a key for the absolute and relative path?
   // We just want the relative path
   if (!path.startsWith('./')) {
-    return res;
+    return;
   }
 
-  res.push({
+  tests.push({
     path,
     suite,
     name,
     case: requireDocs(path).default,
   });
+});
+
+const requireRegressions = require.context('./data-grid', true, /\.js$/);
+requireRegressions.keys().forEach((path) => {
+  // "./DataGridRTLVirtualization.js"
+  // "test/regressions/data-grid/DataGridRTLVirtualization.js"
+  if (!path.startsWith('./')) {
+    return;
+  }
+
+  const name = path.replace('./', '').replace('.js', '');
+  const suite = `test-regressions-data-grid`;
 
-  return res;
-}, []);
+  tests.push({
+    path,
+    suite,
+    name,
+    case: requireRegressions(path).default,
+  });
+});
 
 clock.restore();
 
@@ -130,7 +149,9 @@ function App() {
             return null;
           }
 
-          const isDataGridTest = path.indexOf('/docs-data-grid') === 0;
+          const isDataGridTest =
+            path.indexOf('/docs-data-grid') === 0 ||
+            path.indexOf('test-regressions-data-grid') !== -1;
 
           return (
             <Route