[core] Use useRtl instead of useTheme to access direction (#14359)

packages/x-charts/src/ChartsLegend/ContinuousColorLegend.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ScaleSequential } from '@mui/x-charts-vendor/d3-scale';
 import { useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import ChartsContinuousGradient from '../internals/components/ChartsAxesGradients/ChartsContinuousGradient';
 import { AxisDefaultized, ContinuousScaleName } from '../models/axis';
 import { useChartId, useDrawingArea } from '../hooks';
@@ -205,6 +206,7 @@ const defaultLabelFormatter: LabelFormatter = ({ formattedValue }) => formattedV
 
 function ContinuousColorLegend(props: ContinuousColorLegendProps) {
   const theme = useTheme();
+  const isRtl = useRtl();
   const {
     id: idProp,
     minLabel = defaultLabelFormatter,
@@ -224,8 +226,6 @@ function ContinuousColorLegend(props: ContinuousColorLegendProps) {
   const chartId = useChartId();
   const id = idProp ?? `gradient-legend-${chartId}`;
 
-  const isRTL = theme.direction === 'rtl';
-
   const axisItem = useAxis({ axisDirection, axisId });
   const { width, height, left, right, top, bottom } = useDrawingArea();
 
@@ -277,7 +277,7 @@ function ContinuousColorLegend(props: ContinuousColorLegendProps) {
   // Place bar and texts
 
   const barBox =
-    direction === 'column' || (isRTL && direction === 'row')
+    direction === 'column' || (isRtl && direction === 'row')
       ? { width: thickness, height: size }
       : { width: size, height: thickness };
 

packages/x-charts/src/ChartsLegend/LegendPerItem.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import NoSsr from '@mui/material/NoSsr';
 import { useTheme, styled } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import { DrawingArea } from '../context/DrawingProvider';
 import { DefaultizedProps } from '../models/helpers';
 import { ChartsText, ChartsTextStyle } from '../ChartsText';
@@ -111,7 +112,7 @@ export function LegendPerItem(props: LegendPerItemProps) {
     labelStyle: inLabelStyle,
   } = props;
   const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const drawingArea = useDrawingArea();
 
   const labelStyle = React.useMemo(
@@ -200,11 +201,11 @@ export function LegendPerItem(props: LegendPerItemProps) {
           <g
             key={id}
             className={classes?.series}
-            transform={`translate(${gapX + (isRTL ? legendWidth - positionX : positionX)} ${gapY + positionY})`}
+            transform={`translate(${gapX + (isRtl ? legendWidth - positionX : positionX)} ${gapY + positionY})`}
           >
             <rect
               className={classes?.mark}
-              x={isRTL ? -itemMarkWidth : 0}
+              x={isRtl ? -itemMarkWidth : 0}
               y={-itemMarkHeight / 2}
               width={itemMarkWidth}
               height={itemMarkHeight}
@@ -213,7 +214,7 @@ export function LegendPerItem(props: LegendPerItemProps) {
             <ChartsText
               style={labelStyle}
               text={label}
-              x={(isRTL ? -1 : 1) * (itemMarkWidth + markGap)}
+              x={(isRtl ? -1 : 1) * (itemMarkWidth + markGap)}
               y={0}
             />
           </g>

packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme, Theme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { useTicks } from '../hooks/useTicks';
 import { useDrawingArea } from '../hooks/useDrawingArea';
@@ -77,7 +78,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
   } = defaultizedProps;
 
   const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = useRtl();
 
   const classes = useUtilityClasses({ ...defaultizedProps, theme });
 
@@ -106,7 +107,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
   const TickLabel = slots?.axisTickLabel ?? ChartsText;
   const Label = slots?.axisLabel ?? ChartsText;
 
-  const revertAnchor = (!isRTL && position === 'right') || (isRTL && position !== 'right');
+  const revertAnchor = (!isRtl && position === 'right') || (isRtl && position !== 'right');
   const axisTickLabelProps = useSlotProps({
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,

packages/x-charts/src/PieChart/PieChart.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useRtl } from '@mui/system/RtlProvider';
 import { useThemeProps } from '@mui/material/styles';
 import {
   ResponsiveChartContainer,
@@ -30,7 +31,6 @@ import {
   ChartsXAxisProps,
   ChartsYAxisProps,
 } from '../models/axis';
-import { useIsRTL } from '../internals/useIsRTL';
 import {
   ChartsOverlay,
   ChartsOverlayProps,
@@ -153,12 +153,12 @@ const PieChart = React.forwardRef(function PieChart(inProps: PieChartProps, ref)
     className,
     ...other
   } = props;
-  const isRTL = useIsRTL();
+  const isRtl = useRtl();
 
-  const margin = { ...(isRTL ? defaultRTLMargin : defaultMargin), ...marginProps };
+  const margin = { ...(isRtl ? defaultRTLMargin : defaultMargin), ...marginProps };
   const legend: ChartsLegendProps = {
     direction: 'column',
-    position: { vertical: 'middle', horizontal: isRTL ? 'left' : 'right' },
+    position: { vertical: 'middle', horizontal: isRtl ? 'left' : 'right' },
     ...legendProps,
   };
 

packages/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
@@ -12,7 +12,7 @@ function GridColumnMenuPinningItem(props: GridColumnMenuItemProps) {
   const { colDef, onClick } = props;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const theme = useTheme();
+  const isRtl = useRtl();
 
   const pinColumn = React.useCallback(
     (side: GridPinnedColumnPosition) => (event: React.MouseEvent<HTMLElement>) => {
@@ -76,7 +76,7 @@ function GridColumnMenuPinningItem(props: GridColumnMenuItemProps) {
     );
   }
 
-  if (theme.direction === 'rtl') {
+  if (isRtl) {
     return (
       <React.Fragment>
         {pinToRightMenuItem}

packages/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
-import { useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import {
   CursorCoordinates,
   useGridApiEventHandler,
@@ -75,7 +75,7 @@ export const useGridColumnReorder = (
   const removeDnDStylesTimeout = React.useRef<ReturnType<typeof setTimeout>>();
   const ownerState = { classes: props.classes };
   const classes = useUtilityClasses(ownerState);
-  const theme = useTheme();
+  const isRtl = useRtl();
 
   React.useEffect(() => {
     return () => {
@@ -219,14 +219,10 @@ export const useGridColumnReorder = (
         const cursorMoveDirectionX = getCursorMoveDirectionX(cursorPosition.current, coordinates);
         const hasMovedLeft =
           cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_LEFT &&
-          (theme.direction === 'rtl'
-            ? dragColIndex < targetColIndex
-            : targetColIndex < dragColIndex);
+          (isRtl ? dragColIndex < targetColIndex : targetColIndex < dragColIndex);
         const hasMovedRight =
           cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_RIGHT &&
-          (theme.direction === 'rtl'
-            ? targetColIndex < dragColIndex
-            : dragColIndex < targetColIndex);
+          (isRtl ? targetColIndex < dragColIndex : dragColIndex < targetColIndex);
 
         if (hasMovedLeft || hasMovedRight) {
           let canBeReordered: boolean;
@@ -298,7 +294,7 @@ export const useGridColumnReorder = (
         cursorPosition.current = coordinates;
       }
     },
-    [apiRef, logger, theme.direction],
+    [apiRef, logger, isRtl],
   );
 
   const handleDragEnd = React.useCallback<GridEventListener<'columnHeaderDragEnd'>>(

packages/x-data-grid/src/components/cell/GridActionsCell.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuList from '@mui/material/MenuList';
-import { useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import { unstable_useId as useId } from '@mui/utils';
 import { GridRenderCellParams } from '../../models/params/gridCellParams';
 import { gridClasses } from '../../constants/gridClasses';
@@ -47,7 +47,7 @@ function GridActionsCell(props: GridActionsCellProps) {
   const buttonRef = React.useRef<HTMLButtonElement>(null);
   const ignoreCallToFocus = React.useRef(false);
   const touchRippleRefs = React.useRef<Record<string, TouchRippleActions | null>>({});
-  const theme = useTheme();
+  const isRtl = useRtl();
   const menuId = useId();
   const buttonId = useId();
   const rootProps = useGridRootProps();
@@ -149,7 +149,7 @@ function GridActionsCell(props: GridActionsCellProps) {
       }
 
       // 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

packages/x-data-grid/src/hooks/core/gridCoreSelector.ts

@@ -4,4 +4,4 @@ import { GridStateCommunity } from '../../models/gridStateCommunity';
  * Get the theme state
  * @category Core
  */
-export const gridThemeSelector = (state: GridStateCommunity) => state.theme;
+export const gridIsRtlSelector = (state: GridStateCommunity) => state.isRtl;

packages/x-data-grid/src/hooks/core/useGridInitialization.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { GridApiCommon, GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { useGridRefs } from './useGridRefs';
-import { useGridTheme } from './useGridTheme';
+import { useGridIsRtl } from './useGridIsRtl';
 import { useGridLoggerFactory } from './useGridLoggerFactory';
 import { useGridApiInitialization } from './useGridApiInitialization';
 import { useGridLocaleText } from './useGridLocaleText';
@@ -23,7 +23,7 @@ export const useGridInitialization = <
   const privateApiRef = useGridApiInitialization<PrivateApi, Api>(inputApiRef, props);
 
   useGridRefs(privateApiRef);
-  useGridTheme(privateApiRef);
+  useGridIsRtl(privateApiRef);
   useGridLoggerFactory(privateApiRef, props);
   useGridStateInitialization(privateApiRef);
   useGridPipeProcessing(privateApiRef);

packages/x-data-grid/src/hooks/core/useGridIsRtl.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useRtl } from '@mui/system/RtlProvider';
+import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
+
+export const useGridIsRtl = (apiRef: React.MutableRefObject<GridPrivateApiCommon>): void => {
+  const isRtl = useRtl();
+
+  if (apiRef.current.state.isRtl === undefined) {
+    apiRef.current.state.isRtl = isRtl;
+  }
+
+  const isFirstEffect = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstEffect.current) {
+      isFirstEffect.current = false;
+    } else {
+      apiRef.current.setState((state) => ({ ...state, isRtl }));
+    }
+  }, [apiRef, isRtl]);
+};

packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx

@@ -1,6 +1,7 @@
 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 { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { useGridSelector } from '../../utils';
 import { useGridRootProps } from '../../utils/useGridRootProps';
@@ -98,7 +99,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
   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);
@@ -110,7 +111,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
   const offsetLeft = computeOffsetLeft(
     columnPositions,
     renderContext,
-    theme.direction,
+    isRtl,
     pinnedColumns.left.length,
   );
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;

packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx

@@ -4,7 +4,7 @@ import {
   unstable_useEventCallback as useEventCallback,
 } from '@mui/utils';
 import useLazyRef from '@mui/utils/useLazyRef';
-import { useTheme, Direction } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import {
   findGridCellElementsFromCol,
   findGridElement,
@@ -112,11 +112,11 @@ function flipResizeDirection(side: ResizeDirection) {
   return 'Right';
 }
 
-function getResizeDirection(separator: HTMLElement, direction: Direction) {
+function getResizeDirection(separator: HTMLElement, isRtl: boolean) {
   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);
   }
@@ -280,7 +280,7 @@ export const useGridColumnResize = (
     | 'onColumnWidthChange'
   >,
 ) => {
-  const theme = useTheme();
+  const isRtl = useRtl();
   const logger = useGridLogger(apiRef, 'useGridColumnResize');
 
   const refs = useLazyRef(createResizeRefs).current;
@@ -491,7 +491,7 @@ export const useGridColumnResize = (
         ? []
         : findRightPinnedHeadersBeforeCol(apiRef.current, refs.columnHeaderElement);
 
-    resizeDirection.current = getResizeDirection(separator, theme.direction);
+    resizeDirection.current = getResizeDirection(separator, isRtl);
 
     initialOffsetToSeparator.current = computeOffsetToSeparator(
       xStart,

packages/x-data-grid/src/hooks/features/columns/gridColumnsSelector.ts

@@ -5,7 +5,7 @@ import {
   GridPinnedColumnFields,
   EMPTY_PINNED_COLUMN_FIELDS,
 } from './gridColumnsInterfaces';
-import { gridThemeSelector } from '../../core/gridCoreSelector';
+import { gridIsRtlSelector } from '../../core/gridCoreSelector';
 
 /**
  * Get the columns state
@@ -85,13 +85,9 @@ export const gridVisiblePinnedColumnDefinitionsSelector = createSelectorMemoized
   gridColumnsStateSelector,
   gridPinnedColumnsSelector,
   gridVisibleColumnFieldsSelector,
-  gridThemeSelector,
-  (columnsState, model, visibleColumnFields, theme) => {
-    const visiblePinnedFields = filterVisibleColumns(
-      model,
-      visibleColumnFields,
-      theme.direction === 'rtl',
-    );
+  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]),