@mui/x-data-grid 7.14.0 → 7.15.0

package/modern/hooks/core/useGridInitialization.js

@@ -1,5 +1,5 @@
 import { useGridRefs } from './useGridRefs';
-import { useGridTheme } from './useGridTheme';
+import { useGridIsRtl } from './useGridIsRtl';
 import { useGridLoggerFactory } from './useGridLoggerFactory';
 import { useGridApiInitialization } from './useGridApiInitialization';
 import { useGridLocaleText } from './useGridLocaleText';
@@ -13,7 +13,7 @@ import { useGridStateInitialization } from './useGridStateInitialization';
 export const useGridInitialization = (inputApiRef, props) => {
   const privateApiRef = useGridApiInitialization(inputApiRef, props);
   useGridRefs(privateApiRef);
-  useGridTheme(privateApiRef);
+  useGridIsRtl(privateApiRef);
   useGridLoggerFactory(privateApiRef, props);
   useGridStateInitialization(privateApiRef);
   useGridPipeProcessing(privateApiRef);

package/modern/hooks/core/{useGridTheme.js → useGridIsRtl.js}

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-export const useGridTheme = apiRef => {
-  const theme = useTheme();
-  if (!apiRef.current.state.theme) {
-    apiRef.current.state.theme = theme;
+import { useRtl } from '@mui/system/RtlProvider';
+export const useGridIsRtl = apiRef => {
+  const isRtl = useRtl();
+  if (apiRef.current.state.isRtl === undefined) {
+    apiRef.current.state.isRtl = isRtl;
   }
   const isFirstEffect = React.useRef(true);
   React.useEffect(() => {
@@ -12,8 +12,8 @@ export const useGridTheme = apiRef => {
       isFirstEffect.current = false;
     } else {
       apiRef.current.setState(state => _extends({}, state, {
-        theme
+        isRtl
       }));
     }
-  }, [apiRef, theme]);
+  }, [apiRef, isRtl]);
 };

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

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled, useTheme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import { useGridSelector } from '../../utils';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
@@ -44,7 +45,7 @@ export const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
-  const theme = useTheme();
+  const isRtl = useRtl();
   const rootProps = useGridRootProps();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
@@ -53,7 +54,7 @@ export const useGridColumnHeaders = props => {
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
-  const offsetLeft = computeOffsetLeft(columnPositions, renderContext, theme.direction, pinnedColumns.left.length);
+  const offsetLeft = computeOffsetLeft(columnPositions, renderContext, isRtl, pinnedColumns.left.length);
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import useLazyRef from '@mui/utils/useLazyRef';
-import { useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, getFieldsFromGroupHeaderElem, findGroupHeaderElementsFromField, findGridHeader, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol, escapeOperandAttributeSelector } from '../../../utils/domUtils';
 import { DEFAULT_GRID_AUTOSIZE_OPTIONS } from './gridColumnResizeApi';
 import { gridClasses } from '../../../constants/gridClasses';
@@ -52,9 +52,9 @@ function flipResizeDirection(side) {
   }
   return 'Right';
 }
-function getResizeDirection(separator, direction) {
+function getResizeDirection(separator, isRtl) {
   const side = separator.classList.contains(gridClasses['columnSeparator--sideRight']) ? 'Right' : 'Left';
-  if (direction === 'rtl') {
+  if (isRtl) {
     // Resizing logic should be mirrored in the RTL case
     return flipResizeDirection(side);
   }
@@ -177,7 +177,7 @@ function createResizeRefs() {
  * TODO: improve experience for last column
  */
 export const useGridColumnResize = (apiRef, props) => {
-  const theme = useTheme();
+  const isRtl = useRtl();
   const logger = useGridLogger(apiRef, 'useGridColumnResize');
   const refs = useLazyRef(createResizeRefs).current;
 
@@ -317,7 +317,7 @@ export const useGridColumnResize = (apiRef, props) => {
     refs.rightPinnedCellsBefore = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedCellsBeforeCol(apiRef.current, refs.columnHeaderElement);
     refs.leftPinnedHeadersAfter = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedHeadersAfterCol(apiRef.current, refs.columnHeaderElement);
     refs.rightPinnedHeadersBefore = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedHeadersBeforeCol(apiRef.current, refs.columnHeaderElement);
-    resizeDirection.current = getResizeDirection(separator, theme.direction);
+    resizeDirection.current = getResizeDirection(separator, isRtl);
     initialOffsetToSeparator.current = computeOffsetToSeparator(xStart, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
   };
   const handleResizeMouseUp = useEventCallback(finishResize);

package/modern/hooks/features/columns/gridColumnsSelector.js

@@ -1,6 +1,6 @@
 import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
 import { EMPTY_PINNED_COLUMN_FIELDS } from './gridColumnsInterfaces';
-import { gridThemeSelector } from '../../core/gridCoreSelector';
+import { gridIsRtlSelector } from '../../core/gridCoreSelector';
 
 /**
  * Get the columns state
@@ -55,8 +55,8 @@ export const gridPinnedColumnsSelector = state => state.pinnedColumns;
  * Get the visible pinned columns.
  * @category Visible Columns
  */
-export const gridVisiblePinnedColumnDefinitionsSelector = createSelectorMemoized(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, gridThemeSelector, (columnsState, model, visibleColumnFields, theme) => {
-  const visiblePinnedFields = filterVisibleColumns(model, visibleColumnFields, theme.direction === 'rtl');
+export const gridVisiblePinnedColumnDefinitionsSelector = createSelectorMemoized(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, gridIsRtlSelector, (columnsState, model, visibleColumnFields, isRtl) => {
+  const visiblePinnedFields = filterVisibleColumns(model, visibleColumnFields, isRtl);
   const visiblePinnedColumns = {
     left: visiblePinnedFields.left.map(field => columnsState.lookup[field]),
     right: visiblePinnedFields.right.map(field => columnsState.lookup[field])

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
@@ -24,13 +24,13 @@ const getLeftColumnIndex = ({
   currentColIndex,
   firstColIndex,
   lastColIndex,
-  direction
+  isRtl
 }) => {
-  if (direction === 'rtl') {
+  if (isRtl) {
     if (currentColIndex < lastColIndex) {
       return currentColIndex + 1;
     }
-  } else if (direction === 'ltr') {
+  } else if (!isRtl) {
     if (currentColIndex > firstColIndex) {
       return currentColIndex - 1;
     }
@@ -41,13 +41,13 @@ const getRightColumnIndex = ({
   currentColIndex,
   firstColIndex,
   lastColIndex,
-  direction
+  isRtl
 }) => {
-  if (direction === 'rtl') {
+  if (isRtl) {
     if (currentColIndex > firstColIndex) {
       return currentColIndex - 1;
     }
-  } else if (direction === 'ltr') {
+  } else if (!isRtl) {
     if (currentColIndex < lastColIndex) {
       return currentColIndex + 1;
     }
@@ -67,7 +67,7 @@ const getRightColumnIndex = ({
 export const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
   const initialCurrentPageRows = useGridVisibleRows(apiRef, props).rows;
-  const theme = useTheme();
+  const isRtl = useRtl();
   const currentPageRows = React.useMemo(() => enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
   const headerFilteringEnabled = props.signature !== 'DataGrid' && props.headerFilters;
 
@@ -161,7 +161,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
-            direction: theme.direction
+            isRtl
           });
           if (rightColIndex !== null) {
             goToHeader(rightColIndex, event);
@@ -174,7 +174,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
-            direction: theme.direction
+            isRtl
           });
           if (leftColIndex !== null) {
             goToHeader(leftColIndex, event);
@@ -225,7 +225,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows.length, headerFilteringEnabled, goToHeaderFilter, goToCell, getRowIdFromIndex, theme.direction, goToHeader, goToGroupHeader]);
+  }, [apiRef, currentPageRows.length, headerFilteringEnabled, goToHeaderFilter, goToCell, getRowIdFromIndex, isRtl, goToHeader, goToGroupHeader]);
   const handleHeaderFilterKeyDown = React.useCallback((params, event) => {
     const isEditing = gridHeaderFilteringEditFieldSelector(apiRef) === params.field;
     const isHeaderMenuOpen = gridHeaderFilteringMenuSelector(apiRef) === params.field;
@@ -254,7 +254,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
-            direction: theme.direction
+            isRtl
           });
           if (rightColIndex !== null) {
             goToHeaderFilter(rightColIndex, event);
@@ -267,7 +267,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
-            direction: theme.direction
+            isRtl
           });
           if (leftColIndex !== null) {
             goToHeaderFilter(leftColIndex, event);
@@ -311,7 +311,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows.length, goToHeaderFilter, theme.direction, goToHeader, goToCell, getRowIdFromIndex]);
+  }, [apiRef, currentPageRows.length, goToHeaderFilter, isRtl, goToHeader, goToCell, getRowIdFromIndex]);
   const handleColumnGroupHeaderKeyDown = React.useCallback((params, event) => {
     const focusedColumnGroup = gridFocusColumnGroupHeaderSelector(apiRef);
     if (focusedColumnGroup === null) {
@@ -419,7 +419,6 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (currentPageRows.length === 0) {
       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);
@@ -454,10 +453,10 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
-            direction
+            isRtl
           });
           if (rightColIndex !== null) {
-            goToCell(rightColIndex, getRowIdFromIndex(rowIndexBefore), direction === 'rtl' ? 'left' : 'right');
+            goToCell(rightColIndex, getRowIdFromIndex(rowIndexBefore), isRtl ? 'left' : 'right');
           }
           break;
         }
@@ -467,10 +466,10 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
-            direction
+            isRtl
           });
           if (leftColIndex !== null) {
-            goToCell(leftColIndex, getRowIdFromIndex(rowIndexBefore), direction === 'rtl' ? 'right' : 'left');
+            goToCell(leftColIndex, getRowIdFromIndex(rowIndexBefore), isRtl ? 'right' : 'left');
           }
           break;
         }
@@ -545,7 +544,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows, theme.direction, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader]);
+  }, [apiRef, currentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader]);
   const checkIfCanStartEditing = React.useCallback((initialValue, {
     event
   }) => {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnPositionsSelector, gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
 import { useGridSelector } from '../../utils/useGridSelector';
@@ -43,7 +43,7 @@ function scrollIntoView(dimensions) {
  * @requires useGridColumnSpanning (method)
  */
 export const useGridScroll = (apiRef, props) => {
-  const theme = useTheme();
+  const isRtl = useRtl();
   const logger = useGridLogger(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersContainerRef;
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
@@ -101,7 +101,7 @@ export const useGridScroll = (apiRef, props) => {
   }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows]);
   const scroll = React.useCallback(params => {
     if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
-      const direction = theme.direction === 'rtl' ? -1 : 1;
+      const direction = isRtl ? -1 : 1;
       colRef.current.scrollLeft = params.left;
       virtualScrollerRef.current.scrollLeft = direction * params.left;
       logger.debug(`Scrolling left: ${params.left}`);
@@ -111,7 +111,7 @@ export const useGridScroll = (apiRef, props) => {
       logger.debug(`Scrolling top: ${params.top}`);
     }
     logger.debug(`Scrolling, updating container, and viewport`);
-  }, [virtualScrollerRef, theme.direction, colRef, logger]);
+  }, [virtualScrollerRef, isRtl, colRef, logger]);
   const getScrollPosition = React.useCallback(() => {
     if (!virtualScrollerRef?.current) {
       return {

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

@@ -5,7 +5,7 @@ import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallb
 import useLazyRef from '@mui/utils/useLazyRef';
 import useTimeout from '@mui/utils/useTimeout';
 import { useResizeObserver } from '@mui/x-internals/useResizeObserver';
-import { useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridSelector } from '../../utils/useGridSelector';
@@ -39,9 +39,9 @@ const EMPTY_SCROLL_POSITION = {
   left: 0
 };
 export const EMPTY_DETAIL_PANELS = Object.freeze(new Map());
-const createScrollCache = (mode, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) => ({
+const createScrollCache = (isRtl, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) => ({
   direction: ScrollDirection.NONE,
-  buffer: bufferForDirection(mode, ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
+  buffer: bufferForDirection(isRtl, ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
 });
 let isJSDOM = false;
 try {
@@ -63,7 +63,7 @@ export const useGridVirtualScroller = () => {
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
-  const theme = useTheme();
+  const isRtl = useRtl();
   const cellFocus = useGridSelector(apiRef, gridFocusCellSelector);
   const cellTabIndex = useGridSelector(apiRef, gridTabIndexCellSelector);
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
@@ -100,7 +100,7 @@ export const useGridVirtualScroller = () => {
   const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
   const scrollTimeout = useTimeout();
   const frozenContext = React.useRef(undefined);
-  const scrollCache = useLazyRef(() => createScrollCache(theme.direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
+  const scrollCache = useLazyRef(() => createScrollCache(isRtl, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
   const focusedCell = {
     rowIndex: React.useMemo(() => cellFocus ? currentPage.rows.findIndex(row => row.id === cellFocus.id) : -1, [cellFocus, currentPage.rows]),
     columnIndex: React.useMemo(() => cellFocus ? visibleColumns.findIndex(column => column.field === cellFocus.field) : -1, [cellFocus, visibleColumns])
@@ -165,7 +165,7 @@ export const useGridVirtualScroller = () => {
       }
     }
     scrollCache.direction = direction;
-    scrollCache.buffer = bufferForDirection(theme.direction, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
+    scrollCache.buffer = bufferForDirection(isRtl, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
     const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
 
@@ -193,12 +193,12 @@ export const useGridVirtualScroller = () => {
     if (scrollTop < 0) {
       return;
     }
-    if (theme.direction === 'ltr') {
+    if (!isRtl) {
       if (scrollLeft < 0) {
         return;
       }
     }
-    if (theme.direction === 'rtl') {
+    if (isRtl) {
       if (scrollLeft > 0) {
         return;
       }
@@ -325,7 +325,7 @@ export const useGridVirtualScroller = () => {
       if (!isPinnedSection && frozenContext.current && rowIndexInPage >= frozenContext.current.firstRowIndex && rowIndexInPage < frozenContext.current.lastRowIndex) {
         currentRenderContext = frozenContext.current;
       }
-      const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, theme.direction, pinnedColumns.left.length);
+      const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, isRtl, pinnedColumns.left.length);
       const showBottomBorder = isLastVisibleInSection && params.position === 'top';
       rows.push( /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
         row: model,
@@ -645,8 +645,8 @@ export function areRenderContextsEqual(context1, context2) {
   }
   return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
 }
-export function computeOffsetLeft(columnPositions, renderContext, direction, pinnedLeftLength) {
-  const factor = direction === 'ltr' ? 1 : -1;
+export function computeOffsetLeft(columnPositions, renderContext, isRtl, pinnedLeftLength) {
+  const factor = isRtl ? -1 : 1;
   const left = factor * (columnPositions[renderContext.firstColumnIndex] ?? 0) - (columnPositions[pinnedLeftLength] ?? 0);
   return Math.abs(left);
 }
@@ -670,8 +670,8 @@ function directionForDelta(dx, dy) {
   }
   /* eslint-enable */
 }
-function bufferForDirection(mode, direction, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) {
-  if (mode === 'rtl') {
+function bufferForDirection(isRtl, direction, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) {
+  if (isRtl) {
     switch (direction) {
       case ScrollDirection.LEFT:
         direction = ScrollDirection.RIGHT;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.14.0
+ * @mui/x-data-grid v7.15.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/components/cell/GridActionsCell.js

@@ -11,7 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
-var _styles = require("@mui/material/styles");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _utils = require("@mui/utils");
 var _gridClasses = require("../../constants/gridClasses");
 var _GridMenu = require("../menu/GridMenu");
@@ -39,7 +39,7 @@ function GridActionsCell(props) {
   const buttonRef = React.useRef(null);
   const ignoreCallToFocus = React.useRef(false);
   const touchRippleRefs = React.useRef({});
-  const theme = (0, _styles.useTheme)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const menuId = (0, _utils.unstable_useId)();
   const buttonId = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -120,7 +120,7 @@ function GridActionsCell(props) {
       }
 
       // for rtl mode we need to reverse the direction
-      const rtlMod = theme.direction === 'rtl' ? -1 : 1;
+      const rtlMod = isRtl ? -1 : 1;
       const indexMod = (direction === 'left' ? -1 : 1) * rtlMod;
 
       // if the button that should receive focus is disabled go one more step

package/node/hooks/core/gridCoreSelector.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridThemeSelector = void 0;
+exports.gridIsRtlSelector = void 0;
 /**
  * Get the theme state
  * @category Core
  */
-const gridThemeSelector = state => state.theme;
-exports.gridThemeSelector = gridThemeSelector;
+const gridIsRtlSelector = state => state.isRtl;
+exports.gridIsRtlSelector = gridIsRtlSelector;

package/node/hooks/core/useGridInitialization.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useGridInitialization = void 0;
 var _useGridRefs = require("./useGridRefs");
-var _useGridTheme = require("./useGridTheme");
+var _useGridIsRtl = require("./useGridIsRtl");
 var _useGridLoggerFactory = require("./useGridLoggerFactory");
 var _useGridApiInitialization = require("./useGridApiInitialization");
 var _useGridLocaleText = require("./useGridLocaleText");
@@ -18,7 +18,7 @@ var _useGridStateInitialization = require("./useGridStateInitialization");
 const useGridInitialization = (inputApiRef, props) => {
   const privateApiRef = (0, _useGridApiInitialization.useGridApiInitialization)(inputApiRef, props);
   (0, _useGridRefs.useGridRefs)(privateApiRef);
-  (0, _useGridTheme.useGridTheme)(privateApiRef);
+  (0, _useGridIsRtl.useGridIsRtl)(privateApiRef);
   (0, _useGridLoggerFactory.useGridLoggerFactory)(privateApiRef, props);
   (0, _useGridStateInitialization.useGridStateInitialization)(privateApiRef);
   (0, _pipeProcessing.useGridPipeProcessing)(privateApiRef);

package/node/hooks/core/{useGridTheme.js → useGridIsRtl.js}

@@ -4,16 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridTheme = void 0;
+exports.useGridIsRtl = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/material/styles");
+var _RtlProvider = require("@mui/system/RtlProvider");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useGridTheme = apiRef => {
-  const theme = (0, _styles.useTheme)();
-  if (!apiRef.current.state.theme) {
-    apiRef.current.state.theme = theme;
+const useGridIsRtl = apiRef => {
+  const isRtl = (0, _RtlProvider.useRtl)();
+  if (apiRef.current.state.isRtl === undefined) {
+    apiRef.current.state.isRtl = isRtl;
   }
   const isFirstEffect = React.useRef(true);
   React.useEffect(() => {
@@ -21,9 +21,9 @@ const useGridTheme = apiRef => {
       isFirstEffect.current = false;
     } else {
       apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-        theme
+        isRtl
       }));
     }
-  }, [apiRef, theme]);
+  }, [apiRef, isRtl]);
 };
-exports.useGridTheme = useGridTheme;
+exports.useGridIsRtl = useGridIsRtl;

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

@@ -9,6 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _utils = require("../../utils");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
@@ -53,7 +54,7 @@ const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
-  const theme = (0, _styles.useTheme)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const dimensions = (0, _utils.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
   const hasVirtualization = (0, _utils.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
@@ -62,7 +63,7 @@ const useGridColumnHeaders = props => {
   const renderContext = (0, _utils.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
   const pinnedColumns = (0, _utils.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   const pinnedRows = (0, _utils.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsSelector);
-  const offsetLeft = (0, _useGridVirtualScroller.computeOffsetLeft)(columnPositions, renderContext, theme.direction, pinnedColumns.left.length);
+  const offsetLeft = (0, _useGridVirtualScroller.computeOffsetLeft)(columnPositions, renderContext, isRtl, pinnedColumns.left.length);
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;

package/node/hooks/features/columnResize/useGridColumnResize.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
-var _styles = require("@mui/material/styles");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _domUtils = require("../../../utils/domUtils");
 var _gridColumnResizeApi = require("./gridColumnResizeApi");
 var _gridClasses = require("../../../constants/gridClasses");
@@ -61,9 +61,9 @@ function flipResizeDirection(side) {
   }
   return 'Right';
 }
-function getResizeDirection(separator, direction) {
+function getResizeDirection(separator, isRtl) {
   const side = separator.classList.contains(_gridClasses.gridClasses['columnSeparator--sideRight']) ? 'Right' : 'Left';
-  if (direction === 'rtl') {
+  if (isRtl) {
     // Resizing logic should be mirrored in the RTL case
     return flipResizeDirection(side);
   }
@@ -187,7 +187,7 @@ function createResizeRefs() {
  * TODO: improve experience for last column
  */
 const useGridColumnResize = (apiRef, props) => {
-  const theme = (0, _styles.useTheme)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const logger = (0, _utils2.useGridLogger)(apiRef, 'useGridColumnResize');
   const refs = (0, _useLazyRef.default)(createResizeRefs).current;
 
@@ -327,7 +327,7 @@ const useGridColumnResize = (apiRef, props) => {
     refs.rightPinnedCellsBefore = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT ? [] : (0, _domUtils.findRightPinnedCellsBeforeCol)(apiRef.current, refs.columnHeaderElement);
     refs.leftPinnedHeadersAfter = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT ? [] : (0, _domUtils.findLeftPinnedHeadersAfterCol)(apiRef.current, refs.columnHeaderElement);
     refs.rightPinnedHeadersBefore = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT ? [] : (0, _domUtils.findRightPinnedHeadersBeforeCol)(apiRef.current, refs.columnHeaderElement);
-    resizeDirection.current = getResizeDirection(separator, theme.direction);
+    resizeDirection.current = getResizeDirection(separator, isRtl);
     initialOffsetToSeparator.current = computeOffsetToSeparator(xStart, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
   };
   const handleResizeMouseUp = (0, _utils.unstable_useEventCallback)(finishResize);

package/node/hooks/features/columns/gridColumnsSelector.js

@@ -62,8 +62,8 @@ const gridPinnedColumnsSelector = state => state.pinnedColumns;
  * @category Visible Columns
  */
 exports.gridPinnedColumnsSelector = gridPinnedColumnsSelector;
-const gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisiblePinnedColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, _gridCoreSelector.gridThemeSelector, (columnsState, model, visibleColumnFields, theme) => {
-  const visiblePinnedFields = filterVisibleColumns(model, visibleColumnFields, theme.direction === 'rtl');
+const gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisiblePinnedColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, _gridCoreSelector.gridIsRtlSelector, (columnsState, model, visibleColumnFields, isRtl) => {
+  const visiblePinnedFields = filterVisibleColumns(model, visibleColumnFields, isRtl);
   const visiblePinnedColumns = {
     left: visiblePinnedFields.left.map(field => columnsState.lookup[field]),
     right: visiblePinnedFields.right.map(field => columnsState.lookup[field])